/* ============================================================================
 * CASELY — "FUEGO"
 * Medicine, Decoded by Daily Cases
 * ============================================================================
 *
 * SECTIONS
 *   1. TOKENS          raw constants, then light / dark / auto semantics
 *   2. FONTS           two scripts, one family name, split by unicode-range
 *   3. BASE            page shell, reset-ish, focus
 *   4. TYPE            display scale, labels, prose
 *   5. BANDS           the alternating contrast rhythm
 *   6. COMPONENTS      button, panel, table, form, pill, nav, flash
 *   7. ART             the squid + vortex placement system
 *   8. DOTS            the connective tissue between mark and layout
 *
 * TWO RULES THAT KEEP THIS FILE HONEST
 *
 *   1. NEVER write a raw hex outside §1. Every colour in §3-§8 is a semantic
 *      token, because the theme flips underneath them. A literal is a bug that
 *      only shows up in the other theme, which is the half nobody reviews.
 *
 *   2. NEVER write `background: var(--raw-charcoal)`. Write `var(--band-bg)`.
 *      "Cream on charcoal / charcoal on cream" is a RELATIONSHIP, not two
 *      colours — see §5. Hard-coding the colours makes dark mode render a
 *      blinding white slab where a "cream band" was.
 *
 * SCOPE. Component rules are scoped under `.fuego` so they are (0,2,0) and beat
 * any single Tailwind utility (0,1,0). That means no `!important` anywhere and
 * no dependence on where the Play CDN injects its <style>. A template joins by
 * declaring `{% block body_class %}fuego{% endblock %}`, so pages migrate one at
 * a time. Tailwind still owns layout (flex, grid, gap, sizing); Fuego owns
 * colour, radius, shadow and type.
 *
 * NO BUILD STEP. No @apply, no @layer, no nesting — there is no compiler. This
 * is hand-written CSS served straight from /static.
 * ========================================================================== */


/* ==========================================================================
 * 1. TOKENS
 * ========================================================================== */

:root {
  /* --- raw brand constants. Identical in every theme. ---------------------- */
  --raw-cream:      #F7F6F1;   /* the page */
  --raw-charcoal:   #2C2F33;   /* the ink */
  --raw-charcoal-d: #212429;   /* dark-theme flip band: DEEPER, never lighter */
  --raw-charcoal-l: #3A3E43;   /* hairline rule on charcoal */
  --raw-orange:     #D1492A;   /* the mark's orange */

  /* THE ORANGE IS NOT A TEXT COLOUR. Measured, WCAG 2.1:
   *     #D1492A on #F7F6F1  = 4.13:1   fails AA for body text
   *     #D1492A on #2C2F33  = 3.01:1   fails AA, scrapes the 3:1 UI floor
   * It is correct for dots, rules, borders, hover fills and display-size
   * headings, and wrong for a 14px label. These two carry small orange text: */
  --raw-orange-ink: #B83D1F;   /* on cream    → 5.21:1  AA */
  --raw-orange-lit: #F0774F;   /* on charcoal → 4.77:1  AA */

  /* Engraving ink for the squid plates. A fourth hue, confined to artwork —
   * never type, never a border. It is what makes the illustrations read as
   * plates pressed into the page rather than as UI. */
  --raw-navy:       #24313F;
  --raw-navy-lit:   #8FA3B8;

  /* --- state -------------------------------------------------------------
   * Fuego has ONE accent, and four more hues would undo the whole discipline.
   * But this is an operations panel for a medical product: "cached / failed /
   * awaiting review / suspended" are facts an admin scans a 200-row table for,
   * and rendering them all in charcoal would be minimalism bought with the
   * reader's time.
   *
   * So: four states, desaturated toward the palette so they read as ink rather
   * than as UI chrome, used on TEXT and 1px borders only — never as a fill,
   * never as a badge background. The accent stays the only colour that fills
   * anything, so it stays the only colour that means "Casely". */
  --raw-ok:      #2F6B4F;  --raw-ok-lit:      #7FBE9C;
  --raw-warn:    #8A6524;  --raw-warn-lit:    #D8AC63;
  --raw-bad:     #A33A2E;  --raw-bad-lit:     #E58C7F;
  --raw-info:    #35607E;  --raw-info-lit:    #8FBBD6;

  /* --- type ---------------------------------------------------------------- */
  /* 'Garet' leads the stack and is expected to 404 until a webfont licence is
   * bought; the browser falls through to Montserrat inside the SAME family, so
   * buying it later upgrades every heading with no code change. */
  --font-display: 'Casely Display', ui-sans-serif, system-ui, sans-serif;
  --font-text:    'Casely Text', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

  --t-hero: clamp(2.5rem, 6.5vw, 5rem);
  --t-d1:   clamp(1.875rem, 4vw, 2.75rem);
  --t-d2:   clamp(1.375rem, 2.6vw, 1.875rem);
  --t-h3:   1.125rem;
  --t-body: 1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;
  --t-2xs:  0.6875rem;

  --lead-tight: 1.06;
  --lead-body:  1.6;
  --lead-loose: 1.9;

  --track-caps:  0.12em;
  --track-logo:  0.30em;
  --track-tight: -0.02em;

  --w-book: 400; --w-med: 600; --w-bold: 700;

  /* --- space. 4px base; the band seam is where the "doubled whitespace" lives */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;   --s-9: 6rem; --s-10: 8rem;
  --band-pad-y: clamp(var(--s-7), 8vw, var(--s-9));
  --band-pad-x: clamp(var(--s-4), 5vw, var(--s-8));
  --panel-pad:  var(--s-5);
  --measure:    68ch;

  /* --- border & radius: the Fuego law -------------------------------------- */
  --bw: 1px; --bw-thick: 2px;
  --radius: 2px;    /* the working radius. Two carve-outs, both named: .fg-dot
                       in §8 (a dot is a circle), and --radius-pill below. */
  --radius-0: 0;
  /* V7.1 — the theme switch's stadium track, at the owner's explicit request
   * (their mockup is a full pill). A named token rather than a literal in
   * the component, so the radius invariant stays enforceable: anything
   * rounded must either be a dot, the 2px law, or THIS, on purpose. */
  --radius-pill: 999px;

  /* --- motion --------------------------------------------------------------- */
  --dur-fast: 90ms; --dur: 160ms; --dur-slow: 320ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* --- art opacity ladder ---------------------------------------------------- */
  --art-op-ghost: .05; --art-op-soft: .10; --art-op-mid: .22; --art-op-solid: .85;
}

/* Literal fallbacks FIRST, for engines without color-mix(). Engines that have
 * it take the computed versions in the theme blocks below. */
:root               { --ink-muted:#6B6E72; --ink-faint:#9DA0A4; --rule:#DCDAD3; }
[data-theme="dark"] { --ink-muted:#A8ABAF; --ink-faint:#74777B; --rule:#3A3E43; }

/* ---------- LIGHT ---------------------------------------------------------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --page-bg: var(--raw-cream);        --page-fg: var(--raw-charcoal);
  --band-bg: var(--raw-cream);        --band-fg: var(--raw-charcoal);
  --band-bg-2: var(--raw-charcoal);   --band-fg-2: var(--raw-cream);
  --ink: var(--raw-charcoal);
  --ink-muted:   color-mix(in srgb, var(--raw-charcoal) 62%, var(--raw-cream));
  --ink-faint:   color-mix(in srgb, var(--raw-charcoal) 38%, var(--raw-cream));
  --rule:        color-mix(in srgb, var(--raw-charcoal) 22%, var(--raw-cream));
  --rule-strong: var(--raw-charcoal);
  --accent: var(--raw-orange);
  --accent-ink: var(--raw-orange-ink);
  --accent-on:  var(--raw-cream);     /* text ON an accent fill */
  --accent-wash: color-mix(in srgb, var(--raw-orange) 9%, transparent);
  --field-bg: transparent;
  --art-ink: var(--raw-navy);
  --art-vortex: var(--raw-charcoal);
  --state-ok: var(--raw-ok); --state-warn: var(--raw-warn);
  --state-bad: var(--raw-bad); --state-info: var(--raw-info);
}

/* ---------- DARK ----------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: var(--raw-charcoal);     --page-fg: var(--raw-cream);
  --band-bg: var(--raw-charcoal);     --band-fg: var(--raw-cream);
  --band-bg-2: var(--raw-charcoal-d); --band-fg-2: var(--raw-cream);
  --ink: var(--raw-cream);
  --ink-muted:   color-mix(in srgb, var(--raw-cream) 66%, var(--raw-charcoal));
  --ink-faint:   color-mix(in srgb, var(--raw-cream) 40%, var(--raw-charcoal));
  --rule: var(--raw-charcoal-l);
  --rule-strong: color-mix(in srgb, var(--raw-cream) 55%, var(--raw-charcoal));
  --accent: var(--raw-orange);
  --accent-ink: var(--raw-orange-lit);
  --accent-on: var(--raw-cream);
  --accent-wash: color-mix(in srgb, var(--raw-orange) 16%, transparent);
  --field-bg: transparent;
  --art-ink: var(--raw-navy-lit);
  --art-vortex: var(--raw-cream);
  --state-ok: var(--raw-ok-lit); --state-warn: var(--raw-warn-lit);
  --state-bad: var(--raw-bad-lit); --state-info: var(--raw-info-lit);
}

/* ---------- (auto retired) --------------------------------------------------
 * V7.1 removed the `auto` OS-follow state at the owner's request: the control
 * is a two-position switch, dark or light. app/theme.py's whitelist resolves
 * any lingering "auto" cookie to the dark default, so data-theme="auto" can
 * no longer reach the document and its token block was deleted rather than
 * left as a dead state the switch cannot display. */


/* ==========================================================================
 * 2. FONTS — two scripts, one family name
 *
 * Do NOT switch font-family per language. Every clinical line in this app mixes
 * Persian prose with Latin drug names and units, so a per-language switch sets
 * half of each line in the wrong face. Each role is composed from a Latin face
 * and Vazirmatn partitioned by unicode-range, and the browser picks per glyph.
 *
 * U+200C (ZWNJ) MUST be in the Persian range. It sits outside U+0600-06FF and
 * Persian is unreadable without it — می‌شود becomes میشود. Text that looks
 * almost right is exactly the kind of bug that survives review.
 * ========================================================================== */

/* Google's own latin subset range, verbatim. */
/* stylelint-disable */
@font-face {
  font-family: 'Casely Display'; font-weight: 700; font-style: normal;
  font-display: swap;
  src: url('/static/fonts/garet/Garet-Heavy.woff2') format('woff2'),
       url('/static/fonts/montserrat/Montserrat-700.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: 'Casely Display'; font-weight: 700; font-style: normal;
  font-display: swap;
  src: url('/static/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  /* size-adjust equalises the optical weight of the two scripts on a mixed
   * line. MEASURED against a real Persian+Latin sentence, not guessed. If
   * either face changes, re-measure it. */
  size-adjust: 96%;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D,
                 U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Casely Text'; font-weight: 400 700; font-style: normal;
  font-display: swap;
  src: url('/static/fonts/nunito/Nunito-variable.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: 'Casely Text'; font-weight: 400; font-style: normal;
  font-display: swap;
  src: url('/static/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  size-adjust: 96%;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Casely Text'; font-weight: 500 600; font-style: normal;
  font-display: swap;
  src: url('/static/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  size-adjust: 96%;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D,
                 U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Casely Text'; font-weight: 700; font-style: normal;
  font-display: swap;
  src: url('/static/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  size-adjust: 96%;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D,
                 U+FB50-FDFF, U+FE70-FEFF;
}
/* stylelint-enable */

/* Persian needs more leading than Latin at the same size — its ascenders and
 * descenders travel further and its diacritics sit above the cap line. */
:lang(fa) { --lead-body: 1.8; }


/* ==========================================================================
 * 3. BASE
 * ========================================================================== */

.fuego {
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: var(--lead-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fuego :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--bw-thick) solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.fuego a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.fuego a:hover { text-decoration-thickness: 2px; }

.fuego hr, .fuego .fg-rule {
  border: 0;
  border-block-start: var(--bw) solid var(--rule);
  margin-block: var(--s-6);
}

/* 44px minimum touch target. Named rather than spelled as utilities so the
 * intent survives a restyle — tests assert on this class, not on `w-11 h-11`. */
.fuego .fg-tap {
  min-inline-size: 44px; min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

.fg-sr {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.fuego .fg-stack > * + *       { margin-block-start: var(--s-4); }
.fuego .fg-stack--wide > * + * { margin-block-start: var(--s-7); }

/* --- ink helpers ----------------------------------------------------------
 * The migration's landing zone. Tailwind's `text-slate-400` cannot theme;
 * these say the same thing in a way that flips. Deliberately colour-only —
 * they set no size, so they can be combined with any type class. */
.fuego .fg-muted  { color: var(--ink-muted); }
.fuego .fg-faint  { color: var(--ink-faint); }
.fuego .fg-accent { color: var(--accent-ink); }
.fuego .fg-ok     { color: var(--state-ok); }
.fuego .fg-warn   { color: var(--state-warn); }
.fuego .fg-bad    { color: var(--state-bad); }
.fuego .fg-info   { color: var(--state-info); }
.fuego .fg-num    { font-variant-numeric: tabular-nums; }

/* --- hairlines -----------------------------------------------------------
 * Tailwind's bare `border` paints in currentColor, which for a table rule is
 * full-strength ink — a grid that shouts. These carry the rule token instead. */
.fuego .fg-hair   { border: var(--bw) solid var(--rule); }
.fuego .fg-hair-t { border-block-start: var(--bw) solid var(--rule); }
.fuego .fg-hair-b { border-block-end: var(--bw) solid var(--rule); }
.fuego .fg-divide > * + * { border-block-start: var(--bw) solid var(--rule); }
.fuego .fg-divide tr + tr,
.fuego tbody.fg-divide tr + tr { border-block-start: var(--bw) solid var(--rule); }


/* ==========================================================================
 * 4. TYPE
 * ========================================================================== */

.fuego .fg-hero, .fuego .fg-d1, .fuego .fg-d2, .fuego .fg-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  line-height: var(--lead-tight);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
  color: var(--ink);
}
.fuego .fg-hero { font-size: var(--t-hero); }
.fuego .fg-d1   { font-size: var(--t-d1); }
.fuego .fg-d2   { font-size: var(--t-d2); }
.fuego .fg-h3   { font-size: var(--t-h3); letter-spacing: var(--track-caps); }

.fuego .fg-label {
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--ink-muted);
}
.fuego .fg-meta  { font-size: var(--t-2xs); color: var(--ink-faint); }
.fuego .fg-prose { max-inline-size: var(--measure); }
.fuego .fg-lead  { font-size: var(--t-h3); color: var(--ink-muted);
                   line-height: var(--lead-body); }

/* Persian has no letter case, so `text-transform: uppercase` is a no-op on it —
 * but the declaration still applies to any Latin on the same line, and Latin
 * letter-spacing SHREDS Arabic joining (م ی ش و د instead of می‌شود). Both are
 * neutralised for Persian rather than left to chance. */
.fuego :lang(fa) :is(.fg-hero, .fg-d1, .fg-d2, .fg-h3, .fg-label) {
  text-transform: none;
  letter-spacing: 0;
}


/* ==========================================================================
 * 5. BANDS — the alternating contrast rhythm
 *
 * "Cream on charcoal / charcoal on cream" is a RELATIONSHIP, not two colours.
 * Written literally it breaks the instant the theme flips: a "cream band" in
 * dark mode is a blinding slab and dark mode stops being dark.
 *
 * So a band reads --band-bg / --band-fg, and the flip has theme-dependent
 * amplitude:
 *   LIGHT — base cream, flip is a TRUE INVERSION to charcoal. 12.4:1 both ways.
 *           This is the letterpress look the brand is built on.
 *   DARK  — base charcoal, flip goes DEEPER (#212429), never lighter. The
 *           rhythm survives and the darkness survives. A lighter band would
 *           read as a light-mode leak AND would push the accent under its 3:1
 *           floor, failing the one contrast the palette cannot spare.
 * ========================================================================== */

.fuego .fg-band {
  position: relative;
  overflow: clip;                 /* this is what crops the bleeding artwork */
  isolation: isolate;
  background: var(--band-bg);
  color: var(--band-fg);
  padding-block: var(--band-pad-y);
  padding-inline: var(--band-pad-x);
}

.fuego .fg-band--flip {
  background: var(--band-bg-2);
  color: var(--band-fg-2);
  --ink: var(--band-fg-2);
  --rule:      color-mix(in srgb, var(--band-fg-2) 26%, var(--band-bg-2));
  --ink-muted: color-mix(in srgb, var(--band-fg-2) 66%, var(--band-bg-2));
  --ink-faint: color-mix(in srgb, var(--band-fg-2) 42%, var(--band-bg-2));
  --rule-strong: color-mix(in srgb, var(--band-fg-2) 55%, var(--band-bg-2));
  /* A flip band is dark in BOTH themes, so orange text needs the lit ink. */
  --accent-ink: var(--raw-orange-lit);
  --art-ink: var(--raw-navy-lit);
  --art-vortex: var(--raw-cream);
  --state-ok: var(--raw-ok-lit); --state-warn: var(--raw-warn-lit);
  --state-bad: var(--raw-bad-lit); --state-info: var(--raw-info-lit);
}

.fuego .fg-band--tight { padding-block: var(--s-6); }
.fuego .fg-band__inner { max-inline-size: 1100px; margin-inline: auto; }
/* Content sits above the artwork, which is painted at z-index 0. */
.fuego .fg-band > *    { position: relative; z-index: 1; }


/* ==========================================================================
 * 6. COMPONENTS
 * ========================================================================== */

/* --- GHOST BUTTON --------------------------------------------------------- */
.fuego .fg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  padding: 12px 24px;
  min-block-size: 44px;
  border: var(--bw-thick) solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.fuego .fg-btn:hover  { background: var(--ink); color: var(--band-bg); }
.fuego .fg-btn:active { transform: translateY(1px); }
.fuego .fg-btn:is([disabled], [aria-disabled="true"]) {
  opacity: .45; cursor: not-allowed;
}
.fuego .fg-btn:is([disabled], [aria-disabled="true"]):hover {
  background: transparent; color: var(--ink);
}
.fuego :lang(fa) .fg-btn { text-transform: none; letter-spacing: 0; }

.fuego .fg-btn--primary { border-color: var(--accent); color: var(--accent-ink); }
.fuego .fg-btn--primary:hover { background: var(--accent); color: var(--accent-on); }

/* Danger differs by WEIGHT, not hue — Fuego has one accent, and inventing a
 * second red for destructive actions would make the brand colour mean "danger"
 * everywhere else it appears. The heavy leading rule is the signal. */
.fuego .fg-btn--danger {
  border-color: var(--accent); color: var(--accent-ink);
  border-inline-start-width: 6px;
}
.fuego .fg-btn--danger:hover { background: var(--accent); color: var(--accent-on); }

.fuego .fg-btn--quiet {
  border-color: transparent; color: var(--ink-muted);
  padding-inline: var(--s-3);
}
.fuego .fg-btn--quiet:hover {
  background: transparent; color: var(--ink); border-color: var(--rule);
}
.fuego .fg-btn--sm    { padding: 8px 16px; font-size: var(--t-2xs);
                        min-block-size: 36px; }
.fuego .fg-btn--block { display: flex; inline-size: 100%; }

/* --- PANEL ---------------------------------------------------------------- */
.fuego .fg-panel {
  border: var(--bw) solid var(--rule);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
  padding: var(--panel-pad);
}
.fuego .fg-panel--framed { border-width: var(--bw-thick);
                           border-color: var(--rule-strong); }
.fuego .fg-panel--accent { border-inline-start: 4px solid var(--accent); }
.fuego .fg-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) var(--panel-pad);
  padding: var(--s-3) var(--panel-pad);
  border-block-end: var(--bw) solid var(--rule);
}

.fuego .fg-stat {
  border: var(--bw) solid var(--rule); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
}
.fuego .fg-stat__n {
  font-family: var(--font-display); font-size: var(--t-d2);
  font-weight: var(--w-bold); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* --- TABLE ---------------------------------------------------------------- */
.fuego .fg-table { inline-size: 100%; border-collapse: collapse;
                   font-size: var(--t-sm); }
.fuego .fg-table th {
  font-family: var(--font-display);
  font-size: var(--t-2xs); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--ink-muted);
  text-align: start;            /* logical: flips correctly under RTL */
  padding: var(--s-3);
  border-block-end: var(--bw-thick) solid var(--rule-strong);
  white-space: nowrap;
}
.fuego .fg-table td {
  padding: var(--s-3); vertical-align: top;
  border-block-end: var(--bw) solid var(--rule);
}
.fuego .fg-table tbody tr:hover { background: var(--accent-wash); }
.fuego .fg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fuego :lang(fa) .fg-table th { text-transform: none; letter-spacing: 0; }

/* --- FORM ----------------------------------------------------------------- */
.fuego .fg-field { display: block; margin-block-end: var(--s-4); }
.fuego .fg-field > .fg-label { display: block; margin-block-end: var(--s-2); }

.fuego .fg-input, .fuego .fg-select, .fuego .fg-textarea {
  inline-size: 100%;
  font-family: var(--font-text); font-size: var(--t-body);
  line-height: var(--lead-body);
  color: var(--ink); background: var(--field-bg);
  border: 0;
  border-block-end: var(--bw-thick) solid var(--rule);   /* letterpress rule */
  border-radius: var(--radius-0);
  padding: 10px 2px; min-block-size: 44px;
  box-shadow: none; appearance: none;
  transition: border-color var(--dur) var(--ease);
}
.fuego :is(.fg-input, .fg-select, .fg-textarea):focus {
  outline: none; border-block-end-color: var(--accent);
}
.fuego .fg-input::placeholder { color: var(--ink-faint); }
.fuego .fg-input:user-invalid {
  border-block-end-color: var(--accent); border-block-end-width: 3px;
}
/* Boxed variant for places a bottom rule reads ambiguous (inline table edits). */
.fuego .fg-input--boxed {
  border: var(--bw) solid var(--rule); border-radius: var(--radius);
  padding: 10px var(--s-3);
}
.fuego .fg-select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 8px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--s-6);
}
[dir="rtl"] .fuego .fg-select, .fuego [dir="rtl"] .fg-select {
  background-position: 14px 52%, 8px 52%;
  padding-inline-end: 2px; padding-inline-start: var(--s-6);
}
/* V6.2 — the OPTION list of a native <select> is painted by the engine, not
 * by the page: the closed control sits happily on `--field-bg: transparent`,
 * but Chromium composes the popup on its own (light) surface while the text
 * inherits the theme ink — cream on white in dark mode, i.e. invisible.
 * color-scheme alone does not fix a transparent control, so the options are
 * colored explicitly. Scoped to bare `select` rather than `.fg-select`, so
 * the panels that style their selects ad hoc are covered too. */
.fuego select option,
.fuego select optgroup {
  background-color: var(--page-bg);
  /* --page-fg, NOT --ink: bands redefine --ink to their own foreground
   * (.fg-band--flip sets it to cream) while --page-bg stays the page's, so
   * the pair --page-bg/--ink can come apart into cream-on-cream. The
   * page-level pair cannot — it is defined once per theme and never
   * re-scoped, which is the property an OS-layer popup actually needs. */
  color: var(--page-fg);
}
/* --- the theme switch (V7.1) ----------------------------------------------
 * A two-position pill: DARK · [knob] · LIGHT, knob at the inline-start in
 * dark, inline-end in light. Pure CSS on [data-theme] — the control is a
 * plain same-tab link to the opposite theme, exactly like the language
 * toggle, so it inherits the no-flash architecture and the no-new-tab rule.
 * The crescent on the knob is a pseudo-element circle of track color; both
 * halves re-ink per theme through the tokens, no literals. Logical
 * properties throughout, so RTL mirrors the whole control for free. */
.fuego .fg-themeswitch {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-3); min-block-size: 44px;
  text-decoration: none; user-select: none;
}
.fuego .fg-themeswitch__word {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  /* --ink-muted, not --ink-faint: these words CONVEY the switch state, and
   * faint ink is ~2.2:1 on cream — decoration contrast, not label contrast.
   * Muted passes; the active word still steps up to full ink below. */
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}
[data-theme="dark"] .fg-themeswitch__word--dark,
[data-theme="light"] .fg-themeswitch__word--light { color: var(--ink); }
.fuego .fg-themeswitch__track {
  position: relative; display: inline-block;
  inline-size: 46px; block-size: 26px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}
.fuego .fg-themeswitch__knob {
  position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 20px; block-size: 20px;
  border-radius: 50%;
  background: var(--page-bg);
  transition: inset-inline-start var(--dur) var(--ease);
}
/* The crescent: a track-colored circle biting into the knob. */
.fuego .fg-themeswitch__knob::before {
  content: ""; position: absolute;
  inset-block-start: 1px; inset-inline-start: 7px;
  inline-size: 16px; block-size: 16px;
  border-radius: 50%;
  background: var(--ink);
}
[data-theme="light"] .fg-themeswitch__knob {
  inset-inline-start: calc(100% - 23px);
}
@media (prefers-reduced-motion: reduce) {
  .fuego .fg-themeswitch__knob { transition: none; }
}

.fuego .fg-check { accent-color: var(--accent);
                   inline-size: 18px; block-size: 18px; }
.fuego .fg-help  { font-size: var(--t-xs); color: var(--ink-muted);
                   margin-block-start: var(--s-1); }

/* --- PILL ----------------------------------------------------------------- */
.fuego .fg-pill, .fuego .fg-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-2xs); font-weight: var(--w-bold);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  padding: 3px 10px;
  border: var(--bw) solid currentColor;
  border-radius: var(--radius);   /* a "pill" at 2px. The Fuego law wins. */
  color: var(--ink-muted); white-space: nowrap;
}
.fuego .fg-pill--on, .fuego .fg-badge--on    { color: var(--accent-ink); border-color: var(--accent); }
.fuego .fg-pill--solid, .fuego .fg-badge--solid { background: var(--accent); border-color: var(--accent);
                         color: var(--accent-on); }
.fuego .fg-pill--quiet, .fuego .fg-badge--quiet { color: var(--ink-faint); border-color: var(--rule); }
/* State variants. Border AND text take the state ink; the fill stays empty, so
 * the accent remains the only colour in the product that fills anything. */
.fuego .fg-pill--ok, .fuego .fg-badge--ok   { color: var(--state-ok);   border-color: var(--state-ok); }
.fuego .fg-pill--warn, .fuego .fg-badge--warn { color: var(--state-warn); border-color: var(--state-warn); }
.fuego .fg-pill--bad, .fuego .fg-badge--bad  { color: var(--state-bad);  border-color: var(--state-bad); }
.fuego .fg-pill--info, .fuego .fg-badge--info { color: var(--state-info); border-color: var(--state-info); }
.fuego :lang(fa) .fg-pill { text-transform: none; letter-spacing: 0; }
/* `.fg-badge` is an ALIAS on the selector above, not a second component — two
 * names for one thing is how a design system rots. It exists because the brief
 * named it; the modifiers below work on either. */

/* --- NAV ------------------------------------------------------------------ */
.fuego .fg-nav { display: flex; flex-direction: column; gap: 2px; }
.fuego .fg-nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xs); font-weight: var(--w-med);
  text-transform: uppercase; letter-spacing: var(--track-caps);
  color: var(--ink-muted); text-decoration: none;
  padding: 11px var(--s-4); min-block-size: 44px;
  border-inline-start: var(--bw-thick) solid transparent;   /* logical! */
  border-radius: var(--radius-0);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.fuego .fg-nav-item:hover { color: var(--ink); background: var(--accent-wash); }
.fuego .fg-nav-item:is([aria-current="page"], .is-active) {
  color: var(--ink);
  border-inline-start-color: var(--accent);
  background: var(--accent-wash);
}
/* The mark's dot, echoed on the active item only. */
.fuego .fg-nav-item[aria-current="page"]::after {
  content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--accent); margin-inline-start: auto; flex: 0 0 auto;
}
.fuego :lang(fa) .fg-nav-item { text-transform: none; letter-spacing: 0; }

/* --- FLASH ---------------------------------------------------------------- */
.fuego .fg-flash {
  display: flex; align-items: flex-start; gap: var(--s-3);
  border: var(--bw) solid var(--rule);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm); color: var(--ink);
  margin-block-end: var(--s-6);
}
.fuego .fg-flash::before {
  content: ""; flex: 0 0 auto;
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--accent); margin-block-start: .55em;
}
.fuego .fg-flash--quiet { border-inline-start-color: var(--rule); }
.fuego .fg-flash--quiet::before { background: var(--ink-faint); }


/* ==========================================================================
 * 7. ART — the squid and the vortex
 *
 * DELIVERED AS A CSS MASK, not as <img> and not as inline SVG.
 *
 * Decorative art appears dozens of times per page here (edge bleeds, corner
 * reaches, header glyphs, empty states). A background mask cannot be focused,
 * selected, dragged or announced — inertness is STRUCTURAL rather than
 * per-instance discipline, so no forgotten aria-hidden turns into a screen
 * reader reciting "image, squid, image, squid". It also recolours per theme for
 * free, because the colour IS background-color.
 *
 * Two-tone art is composed, not baked: the mask paints line-art in one token
 * and a separate .fg-dot supplies the orange. That is more flexible than a
 * two-colour SVG, because the dot then moves independently of the drawing.
 *
 * THE ASSET CONTRACT: masks read the ALPHA channel. Each plate must be ink on
 * TRANSPARENT — a white or cream background masks to a solid rectangle. The
 * source illustrations ship with flat backgrounds, so tools/prepare_art.py
 * derives alpha from luminance. See app/static/art/README.md.
 *
 * KNOBS, all optional, all set inline as custom properties:
 *   --art-w --art-h --art-op --art-rot --art-flip --art-x --art-y --art-ink
 * The class picks the asset and the placement; the knobs tune the instance.
 * That is what keeps this six placements x six assets instead of 400 classes.
 * ========================================================================== */

.fuego .fg-art {
  position: absolute; display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  z-index: 0;
  inline-size: var(--art-w, 320px);
  block-size:  var(--art-h, 320px);
  opacity: var(--art-op, var(--art-op-soft));
  background-color: var(--art-ink);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-image: var(--art-src); mask-image: var(--art-src);
  transform: translate(var(--art-x, 0), var(--art-y, 0))
             rotate(var(--art-rot, 0deg))
             scaleX(var(--art-flip, 1));
  transition: opacity var(--dur-slow) var(--ease);
  contain: paint;             /* bleeds are large; don't repaint the whole band */
  content-visibility: auto;   /* skip offscreen plates entirely */
}
@media print                  { .fuego .fg-art { display: none; } }
@media (forced-colors: active) { .fuego .fg-art { display: none; } }

/* --- assets ---------------------------------------------------------------- */
.fuego .fg-art--squid       { --art-src: url('/static/art/squid-full.png'); }
.fuego .fg-art--squid-pair  { --art-src: url('/static/art/squid-pair.png'); }
.fuego .fg-art--squid-dorsal{ --art-src: url('/static/art/squid-dorsal.png'); }
.fuego .fg-art--tentacle    { --art-src: url('/static/art/tentacle.png'); }
.fuego .fg-art--vortex      { --art-src: url('/static/art/vortex.png');
                              --art-ink: var(--art-vortex); }

/* --- 1. EDGE BLEED — huge, cropped by the band's overflow:clip -------------- */
.fuego .fg-place--bleed-e {
  inset-block-start: 50%; inset-inline-end: 0;
  --art-x: 38%; --art-y: -50%;
  --art-w: clamp(280px, 46vw, 720px); --art-h: clamp(280px, 46vw, 720px);
  --art-op: var(--art-op-ghost);
}
.fuego .fg-place--bleed-s {
  inset-block-start: 50%; inset-inline-start: 0;
  --art-x: -38%; --art-y: -50%;
  --art-w: clamp(280px, 46vw, 720px); --art-h: clamp(280px, 46vw, 720px);
  --art-op: var(--art-op-ghost);
}
.fuego .fg-place--bleed-bottom {
  inset-block-end: 0; inset-inline-start: 50%;
  --art-x: -50%; --art-y: 42%;
  --art-w: clamp(360px, 70vw, 900px); --art-h: clamp(360px, 70vw, 900px);
  --art-op: var(--art-op-ghost);
}

/* --- 2. CORNER REACH — a tentacle entering from a corner -------------------- */
.fuego .fg-place--corner-te {
  inset-block-start: 0; inset-inline-end: 0;
  --art-x: 18%; --art-y: -22%; --art-rot: -14deg;
  --art-w: clamp(160px, 26vw, 380px); --art-h: clamp(160px, 26vw, 380px);
  --art-op: var(--art-op-soft);
}
.fuego .fg-place--corner-bs {
  inset-block-end: 0; inset-inline-start: 0;
  --art-x: -20%; --art-y: 24%; --art-rot: 9deg;
  --art-w: clamp(160px, 26vw, 380px); --art-h: clamp(160px, 26vw, 380px);
  --art-op: var(--art-op-soft);
}

/* --- 3. HEADER GLYPH — small, inline, flows with the heading ---------------- */
.fuego .fg-place--glyph {
  position: static; display: inline-block; vertical-align: -0.18em;
  --art-w: 1.15em; --art-h: 1.15em; --art-op: 1; --art-ink: var(--accent);
  margin-inline-end: var(--s-2);
  contain: none; content-visibility: visible;
}

/* --- 4. HERO — a real illustration, in flow, high opacity ------------------- */
.fuego .fg-place--hero {
  position: relative; margin-inline: auto;
  --art-w: clamp(200px, 38vw, 440px); --art-h: clamp(200px, 38vw, 440px);
  --art-op: var(--art-op-solid);
  contain: none; content-visibility: visible;
}

/* --- 5. EMPTY STATE -------------------------------------------------------- */
.fuego .fg-place--empty {
  position: relative; margin: 0 auto var(--s-5);
  --art-w: 148px; --art-h: 148px;
  --art-op: var(--art-op-mid); --art-ink: var(--ink-faint);
  contain: none; content-visibility: visible;
}

/* --- 6. LOADING — the vortex, slowly turning ------------------------------- */
.fuego .fg-place--loading {
  position: relative; margin: 0 auto;
  --art-w: 56px; --art-h: 56px; --art-op: .7; --art-ink: var(--accent);
  contain: none; content-visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .fuego .fg-place--loading { animation: fg-spin 2.4s linear infinite; }
  @keyframes fg-spin { to { transform: rotate(360deg); } }
}

/* --- RTL: flip the gesture and the brand, never the type -------------------
 * A squid is a DIRECTIONAL GESTURE — its tentacles reach into the reading
 * flow, so when the flow reverses the gesture must reverse or it points off
 * the page.
 *
 * V6.2 REVISED THE VORTEX RULE at the owner's request. The old comment here
 * called mirroring the vortex "a visual no-op (radially symmetric)"; it is
 * not quite — the spiral has a handedness — and the owner wants the LOGO to
 * face into the page in RTL. So the rule now splits by role:
 *
 *   BRAND renderings of the vortex mirror in RTL — the lockup's .brand__mark
 *   (see §7 below) and the shellbar glyph (the mobile header's mini-logo).
 *   DECORATIVE vortex art keeps the opt-out — the auth-page ghost is texture,
 *   and 5%-opacity texture flipping with the language is churn, not meaning.
 *   TYPE never mirrors, anywhere, for any reason.
 *
 * Placement is already correct because every placement above uses logical
 * properties; only the artwork's own handedness needs a rule. Note the useful
 * interaction with --art-rot: scaleX(-1) mirrors the rotation too, so a squid
 * tilted into the top-right corner becomes correctly tilted into the top-left
 * with no per-instance correction. */
[dir="rtl"] .fuego .fg-art--squid,
[dir="rtl"] .fuego .fg-art--squid-pair,
[dir="rtl"] .fuego .fg-art--squid-dorsal,
[dir="rtl"] .fuego .fg-art--tentacle { --art-flip: -1; }

/* Decorative vortex art: opted out (see the role split above). */
[dir="rtl"] .fuego .fg-art--vortex { --art-flip: 1; }
/* The BRAND glyph in the mobile shellbar: mirrors with the lockup mark, or
 * the same logo faces two directions at once on one screen. */
[dir="rtl"] .fuego .fg-shellbar .fg-art--vortex { --art-flip: -1; }
.fuego .fg-art--noflip { --art-flip: 1; }


/* ==========================================================================
 * 8. DOTS — the connective tissue between the mark and the layout
 *
 * The logo is a charcoal vortex with ONE solitary orange dot beside it. That
 * dot is the brand's smallest unit, and repeating it as a layout primitive is
 * what ties a page back to the mark without repeating the mark.
 *
 * NOTE: .fg-dot is the ONE sanctioned border-radius above 2px in Fuego. A dot
 * is a dot. Do not generalise this radius to anything else.
 * ========================================================================== */

.fuego .fg-dot {
  display: inline-block;
  inline-size: var(--dot-size, 7px); block-size: var(--dot-size, 7px);
  border-radius: 50%;                       /* <- the carve-out */
  background: var(--dot-color, var(--accent));
  flex: 0 0 auto; vertical-align: middle;
}
.fuego .fg-dot--lg { --dot-size: 11px; }
.fuego .fg-dot--sm { --dot-size: 5px; }
.fuego .fg-dot--hollow {
  background: transparent; box-shadow: none;
  border: var(--bw-thick) solid var(--accent);
}

/* --- SECTION ANCHOR — the eyebrow dot, with zero extra markup -------------- */
.fuego .fg-anchor {
  position: relative;
  padding-inline-start: calc(var(--s-4) + 4px);
}
.fuego .fg-anchor::before {
  content: ""; position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;        /* optical centre of a cap-height line */
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--accent);
}
.fuego :is(.fg-hero, .fg-d1).fg-anchor::before {
  inline-size: 12px; block-size: 12px; inset-block-start: .5em;
}

/* --- CONSTELLATION — scattered accents, zero DOM ---------------------------
 * Coordinates are hand-placed so it reads composed rather than random. */
.fuego .fg-scatter { position: relative; }
.fuego .fg-scatter::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 4px at 11% 18%, var(--accent) 98%, transparent 100%),
    radial-gradient(circle 3px at 27% 71%, var(--accent) 98%, transparent 100%),
    radial-gradient(circle 5px at 63% 12%, var(--accent) 98%, transparent 100%),
    radial-gradient(circle 3px at 82% 44%, var(--accent) 98%, transparent 100%),
    radial-gradient(circle 4px at 92% 83%, var(--accent) 98%, transparent 100%),
    radial-gradient(circle 3px at 45% 92%, var(--accent) 98%, transparent 100%);
  opacity: var(--scatter-op, .55);
}
/* Decorative and asymmetric — mirror it with the layout. */
[dir="rtl"] .fuego .fg-scatter::after { transform: scaleX(-1); }

/* --- DOT RULE — a divider made of the dot, not of a line -------------------- */
.fuego .fg-dot-rule {
  border: 0; block-size: 7px; margin-block: var(--s-6);
  background: radial-gradient(circle 3.5px at 50% 50%,
              var(--accent) 98%, transparent 100%);
}

/* --- TAGLINE BRACKETS — "[ Medicine, Decoded by Daily Cases ]" -------------- */
.fuego .fg-bracket::before { content: "[ "; color: var(--accent); }
.fuego .fg-bracket::after  { content: " ]"; color: var(--accent); }
/* Brackets are mirrored glyphs: RTL needs them swapped, or the pair reads
 * inside-out. The bidi algorithm handles the ORDER but not our literal choice. */
[dir="rtl"] .fuego .fg-bracket::before { content: "] "; }
[dir="rtl"] .fuego .fg-bracket::after  { content: " ["; }


/* ==========================================================================
 * 8b. THE SHELL — sidebar, mobile bar, main column
 *
 * Not scoped under `.fuego` for the shell surfaces themselves because the
 * <body> IS `.fuego`; these are its direct furniture. Kept together so the
 * chrome can be reasoned about as one thing.
 * ========================================================================== */

.fg-shell {
  background: var(--band-bg);
  border-block-end: var(--bw) solid var(--rule);
}
@media (min-width: 768px) {
  .fg-shell {
    border-block-end: 0;
    border-inline-end: var(--bw) solid var(--rule);   /* logical: flips in RTL */
  }
}
.fg-shell__brand {
  position: relative;              /* anchors the tentacle behind the lockup */
  overflow: clip;                  /* crops it, exactly as a band does */
  padding: var(--s-6) var(--s-5);
  border-block-end: var(--bw) solid var(--rule);
}
.fg-shell__brand > .brand { position: relative; z-index: 1; }
.fg-shell__user  { border-block-start: var(--bw) solid var(--rule); }
.fg-shell__foot  { border-block-start: var(--bw) solid var(--rule); }

.fg-shellbar {
  background: var(--band-bg);
  border-block-end: var(--bw) solid var(--rule);
}

/* The main column. Generous by default — "the Fuego style relies on breathing
 * room to look premium" — and the max width is a reading measure, not a
 * container query: past ~1100px a table just gets harder to scan. */
.fg-main {
  padding: var(--s-6) var(--s-4) var(--s-9);
  max-inline-size: 1180px;
}
@media (min-width: 768px) {
  .fg-main { padding: var(--s-8) var(--s-8) var(--s-10); }
}


/* ==========================================================================
 * 8c. THE AUTH SCREENS
 *
 * Two bands of opposite polarity, side by side. This is the alternating
 * contrast rule used STRUCTURALLY rather than as decoration: the seam between
 * the panels is the composition, and the hero plate is cropped by it.
 *
 * Art panel first in the source, so a screen reader and a narrow viewport both
 * meet the brand before the form — and so the form is never pushed below the
 * fold by an illustration on mobile, where the art panel collapses to a band
 * just tall enough to hold the lockup.
 * ========================================================================== */

.fg-auth { min-block-size: 100vh; display: grid; grid-template-rows: auto 1fr; }
@media (min-width: 900px) {
  .fg-auth {
    grid-template-rows: none;
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
  }
}

.fg-auth__art {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--s-7);
  min-block-size: 34vh;
}
@media (min-width: 900px) { .fg-auth__art { min-block-size: 100vh; } }
.fg-auth__art-inner { position: relative; z-index: 2; }

/* The hero plate. Deliberately larger than its panel so the panel's
   overflow:clip does the cropping — the illustration reads as something the
   page was printed over rather than a picture placed on it. */
.fg-auth__hero {
  inset-block-end: -8%;
  inset-inline-start: 50%;
  --art-x: -50%;
  --art-w: clamp(320px, 92vw, 760px);
  --art-h: clamp(320px, 92vw, 760px);
  --art-op: .16;
  --art-rot: -6deg;
}
@media (min-width: 900px) {
  .fg-auth__hero {
    inset-block-end: -14%;
    --art-w: clamp(420px, 46vw, 900px);
    --art-h: clamp(420px, 46vw, 900px);
    --art-op: .18;
  }
}

/* The vortex, very faint, behind everything — the mark as a watermark. */
.fg-auth__ghost {
  inset-block-start: -10%; inset-inline-end: -14%;
  --art-w: clamp(220px, 34vw, 460px);
  --art-h: clamp(220px, 34vw, 460px);
  --art-op: .05;
  --art-ink: var(--band-fg-2);
}

.fg-auth__form {
  display: flex; align-items: center; justify-content: center;
  padding-block: var(--s-8);
}
.fg-auth__form-inner { inline-size: 100%; max-inline-size: 26rem; }
.fg-auth__form-inner .fg-d1 { margin-block-end: var(--s-6); }

.fg-auth__qr {
  inline-size: max-content; margin: 0 auto var(--s-5);
  /* The QR must stay dark-on-WHITE to scan reliably; it is the one surface in
     the product that cannot follow the theme. Framed rather than floated so it
     reads as a deliberate plate instead of a hole in the page. */
  background: #fff; padding: var(--s-3);
}
.fg-auth__qr img { display: block; }


/* ==========================================================================
 * 9. THE BRAND LOCKUP
 *
 * Assembled from live parts rather than shipped as one raster: the vortex is a
 * themeable mask, the dot is CSS, and CASELY and the tagline are real text — so
 * the lockup themes, scales, stays selectable, and the tagline can be
 * translated. A flattened PNG could do none of those.
 *
 * The class name `.brand` and the `direction: ltr !important` rule are kept
 * from the previous mark. Casely's letterspaced Latin caps have exactly the
 * same requirement: the global RTL mode must REPOSITION the lockup and never
 * mirror the TEXT.
 *
 * V6.2 revised the rule for the PICTORIAL mark only, at the owner's request:
 * in RTL the vortex mirrors (scaleX below) so it faces into the page the way
 * it does in LTR, instead of facing off the edge. The wordmark, tagline and
 * dot still never mirror — flipping letterforms is a different and worse
 * defect than the one being fixed.
 * ========================================================================== */

.brand, .brand * { direction: ltr !important; }
.brand {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  user-select: none;
  transform: none !important;
}
.brand__mark {
  position: relative;
  /* display:block is load-bearing, not tidiness. This is an empty <span>
     painted entirely by a mask; left inline it has no content to give it a
     box, and the mark silently renders at zero size. */
  display: block;
  inline-size: var(--brand-mark, 64px);
  block-size:  var(--brand-mark, 64px);
  margin: 0 auto var(--s-3);
  background-color: var(--art-vortex);
  -webkit-mask: url('/static/art/vortex.png') center / contain no-repeat;
          mask: url('/static/art/vortex.png') center / contain no-repeat;
}
/* V6.2 — mirror the mark (and only the mark) in RTL; see the header comment.
 * `.brand` itself carries `transform: none !important`, so this must sit on
 * the mark element — moving it up a level would be silently overruled. */
[dir="rtl"] .brand__mark { transform: scaleX(-1); }
/* The solitary dot, in the mark's own top-right. Positioned relative to the
 * lockup rather than baked into the artwork, so it keeps the exact accent
 * colour in both themes while the vortex re-inks. */
.brand__dot {
  position: absolute;
  inset-block-start: 2%;
  inset-inline-end: calc(50% - var(--brand-mark, 64px) * 0.72);
  inline-size: calc(var(--brand-mark, 64px) * 0.14);
  block-size:  calc(var(--brand-mark, 64px) * 0.14);
  border-radius: 50%;
  background: var(--raw-orange);
}
.brand__word {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--brand-size, 1.5rem);
  letter-spacing: var(--track-logo);
  text-transform: uppercase;
  color: var(--accent-ink);
  line-height: 1;
  /* Letterspacing adds a trailing gap after the last letter, which throws a
   * centred wordmark visibly off-axis. Pull it back by half. */
  text-indent: var(--track-logo);
}
.brand__tagline {
  display: block;
  margin-block-start: var(--s-2);
  font-family: var(--font-text);
  font-size: var(--t-2xs);
  color: var(--ink-muted);
  letter-spacing: .02em;
}