/* EEUK Project — the EEUK Group brand over the Cairn codebase.
   Source of truth: EEUK Brand Guidelines (January 2025). Treatment matches
   EEUK Brand Studio so EEUK's web apps read as one family: purple bar with the
   official logo crop and a Bebas product name, red primary buttons, Barlow
   Light body with Barlow SemiBold emphasis, Bebas for headlines (uppercase).

   Loaded after app.css. Only overrides — no layout of its own beyond the
   brand lock-ups the build swaps into index.html. */

/* ---------- type ----------
   One "EEUK Barlow" family with WEIGHT RANGES: anything up to 549 renders in
   the real Light face, anything from 550 in the real SemiBold face. Cairn uses
   600/650/700 for headings and labels (-> SemiBold) and 500 only for list rows,
   note titles and folder names (-> Light, i.e. body text). Without the ranges
   the browser would synthesise a faux bold from Light, which the brand guide
   forbids outright. */
@font-face { font-family: "EEUK Barlow"; src: url("../brand/fonts/Barlow-Light.woff2") format("woff2");
  font-weight: 1 549; font-style: normal; font-display: swap; }
@font-face { font-family: "EEUK Barlow"; src: url("../brand/fonts/Barlow-LightItalic.woff2") format("woff2");
  font-weight: 1 549; font-style: italic; font-display: swap; }
@font-face { font-family: "EEUK Barlow"; src: url("../brand/fonts/Barlow-SemiBold.woff2") format("woff2");
  font-weight: 550 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "EEUK Barlow"; src: url("../brand/fonts/Barlow-SemiBoldItalic.woff2") format("woff2");
  font-weight: 550 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "EEUK Bebas"; src: url("../brand/fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 1 1000; font-display: swap; }

:root {
  /* brand palette */
  --eeuk-purple: #3C1053; --eeuk-red: #F4384C; --eeuk-lgrey: #ECECEC; --eeuk-dgrey: #5E514D;
  --eeuk-lilac: #E3D8EC; --eeuk-lilac-2: #CBB8DA; --eeuk-pink: #FDE0E3;
  --head: "EEUK Bebas", "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "EEUK Barlow", "Barlow", system-ui, sans-serif;

  /* Cairn's tokens, mapped to the brand */
  --bg: #F5F4F6;
  --panel: #ffffff;
  --ink: #2A2A2A;
  --muted: var(--eeuk-dgrey);
  --line: #E4DEE8;
  --accent: var(--eeuk-purple);      /* links, selection, focus: purple */
  --accent-ink: #ffffff;
  --danger: #C0182E;                 /* red, darkened for small text (AA on white) */
  --ok: #2E7D4F;                     /* functional state, not a brand colour */
  --code-bg: #F1EDF4;
}
:root[data-theme="dark"] {
  /* The guide defines no dark theme. This is built only from the brand purple
     and its tints, so it stays recognisably EEUK. */
  --bg: #160A1F;
  --panel: #211030;
  --ink: #F3EEF6;
  --muted: var(--eeuk-lilac-2);
  --line: #3A2549;
  --accent: var(--eeuk-lilac);
  --accent-ink: var(--eeuk-purple);
  --danger: #FF7083;
  --ok: #5CC28A;
  --code-bg: #2C1740;
}

html { font-synthesis: none; }          /* belt and braces against faux bold/italic */
body { font-family: var(--body); font-weight: 300; }
strong, b { font-weight: 600; }

/* headlines: Bebas, always uppercase */
.plan-head h2, .mi-content h2, .set-sec > h2, .modal h2, .modal h3,
.settings-pop > strong {
  font-family: var(--head); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--eeuk-purple); line-height: 1.05;
}
.plan-head h2, .mi-content h2, .set-sec > h2 { font-size: 2rem; }
.settings-pop > strong { font-size: 1.25rem; }
/* second level: Bebas in red */
.mi-content h3, .set-sec > h3 {
  font-family: var(--head); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--eeuk-red); font-size: 1.2rem;
}
/* third level: Barlow SemiBold purple */
.set-card h3 { font-weight: 600; color: var(--eeuk-purple); }
:root[data-theme="dark"] :is(.plan-head h2, .mi-content h2, .set-sec > h2, .modal h2,
  .modal h3, .settings-pop > strong, .set-card h3) { color: var(--eeuk-lilac); }

/* the note title is the writer's own text: brand weight and colour, NOT Bebas */
#note-title { font-family: var(--body); font-weight: 600; color: var(--eeuk-purple); }
:root[data-theme="dark"] #note-title { color: var(--ink); }

/* section labels in the sidebar trees */
.tree-team-head, .space-head {
  font-family: var(--head); font-weight: 400; letter-spacing: 0.05em; font-size: 0.95rem;
  color: var(--eeuk-dgrey);
}
:root[data-theme="dark"] :is(.tree-team-head, .space-head) { color: var(--eeuk-lilac-2); }

/* ---------- controls ----------
   Buttons stay Barlow Light by default: Cairn renders note rows, chips and
   autocomplete items as <button>s, and those are body text. SemiBold goes only
   on the control groups below, so a group missed here degrades to Light rather
   than turning a whole list heavy. */
button { border-color: var(--line); }
button:hover { border-color: var(--eeuk-lilac-2); }
:is(.btn-row, .editor-actions, .set-card, .set-row, .settings-pop, .plan-head, .modal-backdrop,
    .team-card, .team-invite, .dir-actions, .cal-tools, .task-filters, .pt-detail, .auth-card) button,
.tab, #btn-tags-view, button.linklike { font-weight: 600; }
:is(.btn-row, .editor-actions, .set-card, .set-row, .settings-pop, .plan-head, .modal-backdrop,
    .team-card, .dir-actions, .pt-detail) button:not(.primary):not(.danger):not(.linklike),
.tab, #btn-tags-view { color: var(--eeuk-purple); }
:root[data-theme="dark"] :is(:is(.btn-row, .editor-actions, .set-card, .set-row, .settings-pop, .plan-head,
    .modal-backdrop, .team-card, .dir-actions, .pt-detail) button:not(.primary):not(.danger):not(.linklike),
    .tab, #btn-tags-view) { color: var(--ink); }
button.danger { color: var(--danger); }
button.linklike { color: var(--muted); }
/* primary actions: the brand's red pill with a Bebas label */
button.primary {
  font-family: var(--head); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.04em;
  background: var(--eeuk-red); border-color: var(--eeuk-red); color: #fff;
  border-radius: 999px; padding: 0.42rem 1.4rem 0.3rem;
}
button.primary:hover { background: #DD2A3F; border-color: #DD2A3F; }
/* icon-only primary (new note): the Bebas baseline padding would push the
   glyph off-centre, so square it up */
button.primary.icon-btn { padding: 0.4rem 0.3rem; }
input:focus, textarea:focus, select:focus { outline-color: var(--eeuk-purple); }
:root[data-theme="dark"] :is(input, textarea, select):focus { outline-color: var(--eeuk-lilac-2); }
.ctx-switch { font-weight: 600; border-color: var(--eeuk-purple); color: var(--eeuk-purple); background: var(--panel); }
:root[data-theme="dark"] .ctx-switch { border-color: var(--eeuk-lilac-2); color: var(--ink); }

.view-toggle .vt { color: var(--eeuk-dgrey); }
.view-toggle .vt.active { background: var(--eeuk-purple); border-color: var(--eeuk-purple); color: #fff; }
:root[data-theme="dark"] .view-toggle .vt { color: var(--eeuk-lilac-2); }
:root[data-theme="dark"] .view-toggle .vt.active { background: var(--eeuk-lilac); border-color: var(--eeuk-lilac); color: var(--eeuk-purple); }
.vt.has-due::after { background: var(--eeuk-red); }

.tree-row.selected { background: var(--eeuk-lilac); }
:root[data-theme="dark"] .tree-row.selected { background: #3A2152; }
.note-item.active { background: var(--eeuk-purple); color: #fff; }
:root[data-theme="dark"] .note-item.active { background: var(--eeuk-lilac); color: var(--eeuk-purple); }
.tab.active { background: var(--eeuk-purple); border-color: var(--eeuk-purple); color: #fff; }

/* tables in notes: purple header row, as in every EEUK document */
.preview th, .rich-body th { background: var(--eeuk-purple); color: #fff; border-color: var(--eeuk-purple); font-weight: 600; }
.preview tbody tr:nth-child(even) td, .rich-body tbody tr:nth-child(even) td { background: #FAF8FB; }
:root[data-theme="dark"] :is(.preview, .rich-body) tbody tr:nth-child(even) td { background: #26132F; }
.preview blockquote, .rich-body blockquote { border-left-color: var(--eeuk-red); }
.preview h1, .preview h2, .rich-body h1, .rich-body h2 { color: var(--eeuk-purple); }
:root[data-theme="dark"] :is(.preview, .rich-body) :is(h1, h2) { color: var(--eeuk-lilac); }
.hl-h, .hl-h .hl-mark { color: var(--eeuk-purple); }
:root[data-theme="dark"] :is(.hl-h, .hl-h .hl-mark) { color: var(--eeuk-lilac); }

/* ---------- lock-ups (markup swapped in by the build) ---------- */
.brand-lockup { display: flex; align-items: center; gap: 0.9rem; margin: 0; }
.brand-logo { display: block; height: auto; }
.brand-app {
  font-family: var(--head); font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1; padding-left: 0.9rem;
}

/* sign-in / unlock card: full-colour logo on white */
.auth-card .brand-lockup { margin: 0 0 1.4rem; }
.auth-card .brand-logo { width: 9.5rem; }
.auth-card .brand-app {
  font-size: 2.1rem; color: var(--eeuk-purple); border-left: 2px solid var(--eeuk-lgrey); padding-top: 0.2rem;
}
.auth-card { border: none; border-radius: 12px; box-shadow: 0 1px 2px rgba(60,16,83,.06), 0 12px 40px rgba(60,16,83,.10); }
.auth-card label { font-weight: 600; color: var(--eeuk-purple); }
:root[data-theme="dark"] .auth-card { background: #ffffff; color: #2A2A2A; }   /* logo is the white-background version */
:root[data-theme="dark"] .auth-card :is(input, button:not(.primary):not(.active)) { background: #fff; color: #2A2A2A; border-color: #E4DEE8; }
:root[data-theme="dark"] .auth-card .muted { color: var(--eeuk-dgrey); }

/* corner motif: red stripes top-right on light pages, purple tints bottom-right on dark */
#view-auth, #view-unlock {
  background: var(--bg) url("../brand/stripes-red-tr.png") no-repeat top right / clamp(9rem, 24vw, 19rem);
}
:root[data-theme="dark"] :is(#view-auth, #view-unlock) {
  background: var(--bg) url("../brand/stripes-purple-br.png") no-repeat bottom right / clamp(9rem, 24vw, 19rem);
}

/* sidebar head: the official red-on-purple crop sits on a #3C1053 band —
   the same purple as the image's own background, so there is no visible box */
.sidebar-head { background: var(--eeuk-purple); border-bottom: none; padding: 0.75rem 0.9rem; gap: 0.5rem; }
.sidebar-head .brand-lockup { min-width: 0; gap: 0.7rem; }
.sidebar-head .brand-logo { height: 1.7rem; width: auto; flex: none; }
.sidebar-head .head-right { flex: none; white-space: nowrap; }
/* if the band is ever too narrow, the product name clips — it never slides under the icons */
.sidebar-head .brand-app { min-width: 0; overflow: hidden; white-space: nowrap; }
.sidebar-head .brand-app {
  font-size: 1.35rem; color: #fff; border-left: 1px solid rgba(255,255,255,.3); padding-left: 0.7rem;
  padding-top: 0.15rem;
}
.sidebar-head .linklike, .sidebar-head .icon-btn, .sidebar-head .sidebar-close { color: var(--eeuk-lilac); }
.sidebar-head .linklike:hover, .sidebar-head .icon-btn:hover { color: #fff; }
.sidebar-head .icon-btn.active { color: #fff; }
/* At the 17rem sidebar (below 1400px) logo + product name + Sign out do not
   fit on one line, so the logo carries the identity on its own there. The
   wider sidebars, and the 20rem phone drawer, have room for both. */
@media (max-width: 1399px) and (min-width: 701px) { .sidebar-head .brand-app { display: none; } }

/* ---------- small things ---------- */
.mode-badge { border-color: var(--eeuk-red); color: var(--eeuk-red); font-family: var(--head); font-weight: 400; letter-spacing: 0.05em; }
.reminder-bar { border-color: var(--eeuk-red); }
.auth-invite { border-color: var(--eeuk-purple); color: var(--eeuk-purple); background: var(--eeuk-lilac); }
.focus-hint { background: var(--eeuk-purple); color: #fff; }
:root[data-theme="dark"] .focus-hint { background: var(--eeuk-lilac); color: var(--eeuk-purple); }
::selection { background: var(--eeuk-lilac); }
#note-body::selection { background: rgba(60, 16, 83, 0.22); }