/* app_brand: the faces and the tokens. The one file in the platform where a raw hex may live (the
   text gate). Source: the prototype's three :root blocks, styles.css L4-59, L615-621 and L1190-1197,
   copied 2026-09-09; names as the prototype has them. Set from JavaScript, never here: --notes-w,
   --vp-w. --f55-mask is declared on the frame's ::before in shell.css, not on :root: a nested var()
   is substituted where it is declared, so a :root mask would freeze --f55-side. Until
   app_admin_02_brand renders a Brand row into :root this file IS the brand. */

/* the five faces, self-hosted, one variable woff2 per family, latin only. Nunito carries 200 to 1000,
   Geist Mono 100 to 900, Caveat 400 to 700, Poetsen One (the wordmark's face) 400, IBM Plex Sans
   400 to 700. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;
  src:url("fonts/nunito-latin.166202cc391c.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url("fonts/geist-mono-latin.a15f9d568fb0.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/caveat-latin.2d9de14f93a2.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poetsen One';font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/poetsen-one-latin.344f7401643e.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/ibm-plex-sans-latin.b2c9031d9fd6.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Livewire skin: pure black ladder on a saturated orange desk. LOCKED (Erik 2026-08-27): palette = OLED
   black base, accent hue = brand #FF9A2E. */
:root{
  --canvas:#050505; --s1:#0c0c0c; --s2:#121212; --s3:#171717;
  --ink:#f5f5f5; --dim:#a3a3a3; --faint:#6b6b6b;
  --dim2:#c6c6c6; /* prose on a tinted ground, where --dim goes muddy */
  --hl1:rgba(255,255,255,.06); --hl2:rgba(255,255,255,.10); --hl3:rgba(255,255,255,.18);
  --acc:#FF9A2E; --acc2:#FFB056; --acc-ink:#140a00;
  --green:#4ade80; --red:#ef4444;
  --c-video:#db4a4a; --c-docs:#4aa3ff; --c-blog:#3ddc97; --c-forum:#b06ae0; --c-ai:#FF9A2E;
  /* TRAINING IDENTITY (Erik 2026-09-06): the ONLY place the site uses a colour other than the accent
     to mean something, and it means one thing: which training this is. Each pair runs light to mid,
     never to dark, so the same near-black ink is readable on all four. */
  --tr-ft-a:#FFFFFF; --tr-ft-b:#CDD3DB;   /* Fast-Track */
  --tr-ch-a:#6EE7A5; --tr-ch-b:#27B06E;   /* 21-Day Challenge */
  --tr-a2-a:#86C4FF; --tr-a2-b:#3D78E8;   /* Academy 2.0 */
  --tr-a3-a:#FFC178; --tr-a3-b:#F08A22;   /* Academy 3.0 */
  --tr-ink:#0d0f12;
  --fd:'Nunito',system-ui,sans-serif;   /* LOCKED type (Erik 2026-08-28) */
  --fm:'Geist Mono',ui-monospace,monospace;
  --fl:'Poetsen One',var(--fd);         /* the wordmark only (lockup 65, Erik 2026-09-03); not in the prototype's list */
  --desk-a:#d97f1d; --desk-b:#cc7315; /* LOCKED desk color = Lighter (Erik 2026-08-27) */
  --inset:clamp(12px,calc(1.4vw + 4px),22px); /* the desk margin around the window */
  --r:14px; --rc:12px; --rb:10px; /* window / cards / buttons+inputs (61 radius language) */
  --h1:2.75rem; /* ONE h1 scale for every page h1 */
  --hero-w:850px; /* ONE centred-hero width (inbox 0039) */
  --secpad:68px; --gap:14px;            /* LOCKED density = Compact (Erik 2026-08-28) */
  --fh:'Caveat',cursive;
  /* RULE (Erik 2026-08-28, narrowed 2026-09-16): NEVER fill a surface with flat transparent orange.
     Orange as a BORDER, STROKE or GLOW is fine. The diagonal hatch that was the answer until 2026-09-16
     is gone with its five tokens (0440): an on state is a lighter gray, an off state a darker one. */
  /* RULE (Erik 2026-08-29, restated 2026-09-16): NEVER mark a card with a coloured bar down ONE side.
     A card that needs a colour states it on the WHOLE perimeter, 1px, accent at low alpha. ANTI-PATTERN
     2 below: on a ROUNDED card it is worse, it is the AI house style, and we do not ship it. */
}

/* THE SIDEBAR'S OWN FACE (Erik, 2026-09-16, Design Lab round `pfont` option 18). The aside
   `<aside id="side">` of base.html carries IBM Plex Sans; the site and the main window keep Geist
   Mono and Nunito. Both tokens are set, never one: a row's title reads --fd and its slug, group
   heading, count and chip read --fm (studio.css), so half a row would change face otherwise.
   Never write var(--fd) inside this block: a token cannot fall back to the token the same
   declaration redefines, the cycle invalidates BOTH and the sidebar drops to the browser's font. */
#side{
  --fd:'IBM Plex Sans',system-ui,sans-serif;
  --fm:'IBM Plex Sans',system-ui,sans-serif;
}

/* ================================ ANTI-PATTERNS ================================
   The looks this brand does not wear. Erik names one when he sees it; it lands here so the next
   builder never argues it back in. A rule with no gate is the reviewer's to enforce; a rule broken
   twice earns a gate (CLAUDE.md).

   1. A DIAGONAL HATCH AS A BACKGROUND FILL (Erik, 2026-09-16, swept 2026-09-23 in 0440). On any
      control, tab, chip, badge, toggle, row or card. The tokens are deleted and app_02_brand's
      test_10 refuses one back. Instead: on = a lighter gray surface, off = a darker gray; a colour
      that means something stays on the border, the stroke or the text. A drawing keeps its pen
      hatch (the 404 crane's earth, the plan's crosshatch).

   2. A COLOURED BAR DOWN ONE SIDE OF A ROUNDED CARD (Erik, 2026-08-29, restated 2026-09-16).
      `border-left:Npx solid var(--acc)` plus a `border-radius`. Erik: "It's AI signature, we avoid
      it." Instead: the whole perimeter at 1px and low alpha, or no border at all.

   3. (free)
   ============================================================================== */

/* COURSE SYSTEM constants, measured on the Fast-Track export. The squares are Erik's language:
   never circles, never other colours. */
:root{
  --sq-gray:rgba(43,45,49,.8);   /* not started */
  --sq-green:rgba(45,139,97,.8); /* done (tick inside) */
  --sq-orange:rgb(from var(--acc) r g b / .8); /* current */
  --xbar-track:#252525; --xbar-fill:#F6A12A;         /* export progress bar */
  --xbtn:#EAA43B; --xbtn-ink:#0b0b0b;                /* export Resume button */
  --xt-strong:#9AA2AF; --xt-mid:#716E68; --xt-dim:#69717E; --xt-mod:#414141;
}

/* Framed-55 side ticks (LOCKED, Erik 2026-08-29): the sides repeat every --f55-gap, the first tick at
   gap/2 so it never meets a corner bracket. The whole side layer is ONE var so the -webkit- and the
   standard mask cannot drift apart. */
:root{
  --f55-gap:1200px;
  --f55-side:repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--f55-gap) / 2 - 7px),
    #000 calc(var(--f55-gap) / 2 - 7px) calc(var(--f55-gap) / 2 + 7px),
    transparent calc(var(--f55-gap) / 2 + 7px) var(--f55-gap));
  --f55-side-sz:6px 100%;
}