/* ==============================================================================================
   AUSSAN — the HUD skin
   ==============================================================================================

   Steve, 25 Oct 2026: "the GUI needs to look amazing, science fiction version. remember what you
   did for aubin? do something similar for aussan, but with their style guide, which should be
   based on their website colour scheme etc."

   THE SOURCE. aussan.com.au's own stylesheet (read 25 Oct 2026):
     --color-brand-green #369e36, --color-brand-green-dark #2d7a2d, --color-ink #0f1419,
     the navy #254e75 of their round leaf mark, and Inter for all type.
   Those are the only hues here. Green is the instrument light; navy is the survey grid and the
   frames; ink is the field. Inter is self-hosted (fonts/) because the hosted portal's security
   policy allows no outside fonts.

   THE LANGUAGE is Aubin's HUD (aubin-ops/public/hydros-hud.css), re-tinted: glass over a dark field,
   a lit hairline along the top edge, corner brackets ON the frame, mono uppercase micro-labels,
   a console bezel set into the page, and motion that is slow and dim. Its four protocols hold here:
     1. BEZEL, NOT BLEED. Each page sits in a console bezel; the field never runs under the content.
     2. TITLE PLATES. Headings are uppercase, tracked, with a green text-shadow: a channel name on an
        instrument, not a sentence.
     3. CHIPS CARRY FILL AND RING AND GLOW. One channel does not survive a bright screen.
     4. BRACKETS SIT ON THE FRAME (inset: -1px), never a second rectangle inside it.

   THE RULE THAT DECIDES EVERYTHING. This is a research database: the numbers and their sources must
   come out of the skin LOUDER than they went in. Decoration sits on panels, never over values. Glow is
   reserved for the one headline figure on a page; chart bars and trend marks never glow (they would
   smear the edge a reader measures against). Status colours (supported / partly / not supported)
   are not brand green, and always travel with an icon and a word.

   WHAT THIS FILE IS. Paint. It loads after app.css, changes no markup that carries data and no
   behaviour. Delete its <link> in index.html and the app is exactly as it was.
   ============================================================================================ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
}

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  color-scheme: dark;
  /* Aussan's palette, lifted for a dark field. */
  --au-green: #369e36;          /* brand green, exactly */
  --au-green-dark: #2d7a2d;     /* brand green dark, exactly */
  --au-green-bright: #63d163;   /* the lit edge of a green instrument */
  --au-green-glow: rgba(54, 158, 54, .55);
  --au-green-soft: rgba(54, 158, 54, .12);
  --au-navy: #254e75;           /* their leaf mark's circle, exactly */
  --au-navy-line: rgba(70, 130, 190, .26);
  --au-navy-soft: rgba(37, 78, 117, .22);
  --au-ink: #0f1419;            /* brand ink, exactly: the field */
  --hud-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --hud-bracket: 12px;

  /* Re-point the app's tokens: most of the skin comes free from these. */
  --bg: #0b1016;
  --panel: rgba(17, 26, 36, .92);
  --ink: #e8f2ec;
  --muted: #9fb3c3;             /* 7.9:1 on the panel: labels must survive a bright room */
  --line: #24384c;
  --accent: var(--au-green);
  --accent-ink: #ffffff;
  --pass: #6fe0b0; --pass-bg: rgba(46, 190, 140, .16);
  --flag: #f2c14e; --flag-bg: rgba(242, 193, 78, .14);
  --fail: #ff8a80; --fail-bg: rgba(255, 110, 100, .15);
  --info: #9cc6f2; --info-bg: rgba(90, 150, 220, .15);
  --pick: rgba(54, 158, 54, .14);
  --confirmed: #63d163;
  --hl: rgba(99, 209, 99, .38); --hl-token: rgba(255, 196, 70, .62);
}
.viz-root { --series-1: #3dab3d; --grid: rgba(70, 130, 190, .22); }  /* validated: dataviz, dark, on #0c1620 */

html { background: var(--au-ink); }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  font-feature-settings: "tnum" 1, "cv11" 1;   /* tabular figures: columns of numbers line up */
  /* THE FIELD: a green horizon glow, a navy survey grid and a slow drift (the page is never quite still). */
  background:
    radial-gradient(1300px 620px at 50% -12%, rgba(54, 158, 54, .16), transparent 70%),
    radial-gradient(900px 520px at 92% 4%, rgba(37, 78, 117, .30), transparent 70%),
    linear-gradient(var(--au-navy-line) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--au-navy-line) 1px, transparent 1px) 0 0 / 46px 100%,
    var(--au-ink);
  background-attachment: fixed;
  animation: auField 30s linear infinite;
  min-height: 100vh;
}
@keyframes auField {
  from { background-position: 50% -12%, 92% 4%, 0 0, 0 0, 0 0; }
  to   { background-position: 50% -12%, 92% 4%, 0 46px, 46px 0, 0 0; }
}
body::before {   /* vignette: the edges fall away so the bezel reads as lit */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
#app, .top, #toast, .viz-tip { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------------------------------
   THE HEADER: a glass rail with Aussan's mark, the channel name, and HUD tabs.
   --------------------------------------------------------------------------------------------- */
.top {
  background: linear-gradient(180deg, rgba(15, 24, 33, .96), rgba(10, 16, 22, .92));
  border-bottom: 1px solid var(--au-navy-line);
  box-shadow: 0 1px 0 rgba(99, 209, 99, .18), 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
}
.top::after {   /* a lit hairline along the rail */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--au-green) 20%, var(--au-green-bright) 50%, var(--au-green) 80%, transparent);
  opacity: .55;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: 15px; }
.brand img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(99, 209, 99, .35), 0 0 14px rgba(54, 158, 54, .45); }
.brand small { display: block; font-family: var(--hud-mono); font-size: 9.5px; letter-spacing: .22em; color: var(--au-green-bright); font-weight: 500; margin-top: 1px; }
.brand .brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.navlink {
  font-family: var(--hud-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; transition: color .15s, border-color .15s, box-shadow .15s;
}
.navlink:hover, .navlink.on { color: var(--au-green-bright); border-color: rgba(99, 209, 99, .35); background: var(--au-green-soft); box-shadow: 0 0 12px rgba(54, 158, 54, .25); }
#crumbs { font-family: var(--hud-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.who input { background: rgba(8, 14, 20, .8); }

/* ---------------------------------------------------------------------------------------------
   THE BEZEL. Every page body sits in a console set into the field (protocol 1).
   --------------------------------------------------------------------------------------------- */
.dash, .library {
  position: relative;
  margin-top: 18px; margin-bottom: 32px;
  padding: 18px 22px 28px;
  border: 2px solid rgba(54, 158, 54, .42);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(54, 158, 54, .06), transparent 120px),
    rgba(9, 15, 21, .78);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 0 6px rgba(37, 78, 117, .18),
    0 0 34px rgba(54, 158, 54, .16),
    inset 0 0 60px rgba(0, 0, 0, .45);
  overflow: hidden;   /* the sweep and grid respect the rounded corners; pop-ups mount on <body> */
}
.dash::before, .library::before {   /* one slow, dim sweep down the console: "live", never loud */
  content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(99, 209, 99, .05), transparent);
  animation: auSweep 11s linear infinite;
}
@keyframes auSweep { to { transform: translateY(350%); } }
.work { height: calc(100vh - 58px); }
.viewer { background: radial-gradient(800px 500px at 50% 0, rgba(37, 78, 117, .35), transparent), #070b10; border-right: 1px solid var(--au-navy-line); }
.page { box-shadow: 0 0 0 1px rgba(99, 209, 99, .25), 0 0 22px rgba(0, 0, 0, .7); }   /* the report pages stay white: they are evidence */
.page .pno { font-family: var(--hud-mono); color: var(--au-green-bright); }
.side { background: rgba(8, 13, 19, .9); border-left: 1px solid var(--au-navy-line); }

/* ---------------------------------------------------------------------------------------------
   TITLE PLATES (protocol 2).
   --------------------------------------------------------------------------------------------- */
.dash h2, .library h2, .login h2 {
  text-transform: uppercase; letter-spacing: .08em; font-weight: 750; font-size: 20px;
  color: #f2fbf4; text-shadow: 0 0 14px rgba(54, 158, 54, .55);
}
.dash h3, .card h3, .mname {
  font-family: var(--hud-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600;
  color: var(--au-green-bright);
}
.dash h3::before, .mname::before { content: "▸ "; color: var(--au-green); }
.dash-top .muted, .dash p.muted { color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   GLASS PANELS with a lit top edge and corner brackets ON the frame (protocol 4).
   --------------------------------------------------------------------------------------------- */
.tile, .card, .headline, .filters, .bars, .cols, .finding, .answer-card, .inspect, .login form {
  position: relative;
  background:
    linear-gradient(180deg, rgba(99, 209, 99, .07), transparent 38px),
    linear-gradient(180deg, rgba(20, 31, 43, .94), rgba(12, 19, 27, .94));
  border: 1px solid var(--au-navy-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(99, 209, 99, .22), 0 6px 20px rgba(0, 0, 0, .35);
  overflow: visible;   /* the brackets sit on the edge and must not be clipped */
}
.tile::after, .headline::after, .bars::after, .answer-card::after, .login form::after, .inspect::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: 10px;
  --b: var(--hud-bracket);
  background:
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 0 0 / var(--b) 2px,
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 0 0 / 2px var(--b),
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 100% 0 / var(--b) 2px,
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 100% 0 / 2px var(--b),
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 0 100% / var(--b) 2px,
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 0 100% / 2px var(--b),
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 100% 100% / var(--b) 2px,
    linear-gradient(var(--au-green-bright), var(--au-green-bright)) 100% 100% / 2px var(--b);
  background-repeat: no-repeat;
  opacity: .8;
}

/* TILES: mono micro-label, big tabular figure. Only the headline figure glows. */
.tile-label { font-family: var(--hud-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); }
.tile-value { color: #f4fbf6; font-weight: 750; letter-spacing: .01em; }
.tiles .tile:nth-child(4) .tile-value { color: var(--au-green-bright); }   /* Summary: median yield change. Bright, not glowing: the reactor's figure is the page's one glow. */
.tile-sub { color: var(--muted); }

/* The headline sentences read as a briefing. */
.headline { line-height: 1.6; }
.headline b { color: #f2fbf4; }
.by-outcome li::marker { color: var(--au-green); }
.by-outcome b { color: var(--au-green-bright); font-weight: 650; }
.headline p.warn { border-left-color: var(--flag); }
.headline.brief { margin-top: 14px; padding: 10px 16px; line-height: 1.5; border-left: 3px solid var(--flag); }   /* the front page's one caveat */

/* ---------------------------------------------------------------------------------------------
   CONTROLS. Buttons glow green; inputs are dark glass with a green focus ring.
   --------------------------------------------------------------------------------------------- */
button { background: rgba(15, 24, 33, .9); color: var(--ink); border-color: var(--line); transition: border-color .15s, box-shadow .15s, color .15s; }
button:hover { border-color: rgba(99, 209, 99, .6); box-shadow: 0 0 10px rgba(54, 158, 54, .3); color: #fff; }
button.primary {
  background: linear-gradient(180deg, var(--au-green), var(--au-green-dark)); border-color: var(--au-green-bright); color: #fff;
  font-weight: 650; letter-spacing: .04em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 16px rgba(54, 158, 54, .45);
}
button.primary:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 0 24px rgba(99, 209, 99, .6); }
input, select, textarea { background: rgba(6, 11, 16, .85); color: var(--ink); border-color: #2a4258; }
input:focus, select:focus, textarea:focus, button:focus-visible, .navlink:focus-visible { outline: none; border-color: var(--au-green-bright); box-shadow: 0 0 0 3px rgba(54, 158, 54, .28), 0 0 14px rgba(54, 158, 54, .35); }
::placeholder { color: #6f8496; }
.ask-input { font-family: var(--hud-mono); letter-spacing: .02em; }

/* CHIPS: fill AND ring AND glow (protocol 3). */
.chip { background: var(--au-green-soft); border: 1px solid rgba(99, 209, 99, .45); color: #d8f5d8; box-shadow: 0 0 8px rgba(54, 158, 54, .18); }
.chip:hover { background: rgba(54, 158, 54, .22); box-shadow: 0 0 14px rgba(54, 158, 54, .35); }
.chip.on, .seg button.on { background: linear-gradient(180deg, var(--au-green), var(--au-green-dark)); border-color: var(--au-green-bright); color: #fff; box-shadow: 0 0 14px rgba(54, 158, 54, .5); }

/* STATUS badges: fill AND ring AND glow, never brand green, always icon + word. */
.badge, .st { border: 1px solid currentColor; }
.badge.pass, .st.pass { box-shadow: 0 0 8px rgba(111, 224, 176, .25); }
.badge.flag, .st.flag { box-shadow: 0 0 8px rgba(242, 193, 78, .25); }
.badge.fail, .st.fail { box-shadow: 0 0 10px rgba(255, 138, 128, .35); }
.badge.none { border-color: var(--line); color: var(--muted); background: rgba(255, 255, 255, .03); }
.grade { background: var(--au-navy-soft); color: #bcd6f0; border: 1px solid rgba(110, 160, 210, .4); font-family: var(--hud-mono); letter-spacing: .06em; }

/* ---------------------------------------------------------------------------------------------
   TABLES: instrument read-outs. Hairline rows, mono headers, numbers bright.
   --------------------------------------------------------------------------------------------- */
table.list { background: rgba(10, 16, 23, .85); border-color: var(--au-navy-line); border-radius: 10px; overflow: hidden; }
table.list th { font-family: var(--hud-mono); letter-spacing: .12em; color: var(--au-green-bright); background: rgba(37, 78, 117, .18); border-bottom-color: rgba(99, 209, 99, .25); }
table.list td { border-bottom-color: rgba(70, 130, 190, .14); }
table.list tbody tr:hover td { background: rgba(54, 158, 54, .06); }
table.list a { color: #9fe39f; text-decoration-color: rgba(99, 209, 99, .45); }
table.list td.num { color: #f2fbf4; }
table.matrix td.clickable:hover, table.matrix td.clickable:focus { outline-color: var(--au-green-bright); box-shadow: inset 0 0 18px rgba(54, 158, 54, .22); }
td.quote { color: #8fa6b8; }
table.grid th { background: rgba(37, 78, 117, .25); color: var(--au-green-bright); font-family: var(--hud-mono); border-color: var(--line); }
table.grid td, table.grid th { border-color: rgba(70, 130, 190, .22); }

/* ---------------------------------------------------------------------------------------------
   CHARTS. Bars in the validated brand green, NO glow on any mark (it smears the measuring edge).
   --------------------------------------------------------------------------------------------- */
.bars { padding: 10px 14px 14px; }
.bar { filter: none; }
.bar-group { color: #bcd6f0; font-family: var(--hud-mono); letter-spacing: .06em; font-size: 11.5px; text-transform: uppercase; }
.bar-row:hover, .bar-row:focus { background: rgba(54, 158, 54, .07); }
.bar-track .zero { background: rgba(232, 242, 236, .55); }
.axis-track .tick { font-family: var(--hud-mono); }
.col-bar { filter: none; }
.col-label { font-family: var(--hud-mono); }
.viz-tip { background: rgba(10, 17, 24, .97); border-color: rgba(99, 209, 99, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .6), 0 0 18px rgba(54, 158, 54, .2); }

/* ---------------------------------------------------------------------------------------------
   THE REPORT WORKSPACE (side panel): tabs as HUD channel switches, findings as alert strips.
   --------------------------------------------------------------------------------------------- */
.tabs { background: rgba(8, 13, 19, .96); border-bottom: 1px solid var(--au-navy-line); }
.tabs button { font-family: var(--hud-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; background: transparent; }
.tabs button.on { color: var(--au-green-bright); border-color: rgba(99, 209, 99, .45); background: var(--au-green-soft); box-shadow: 0 -2px 0 var(--au-green) inset, 0 0 12px rgba(54, 158, 54, .25); }
.stick { background: rgba(8, 13, 19, .96); }
.fields .k { font-family: var(--hud-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.finding { border-left-width: 4px; }
.finding .sev { font-family: var(--hud-mono); letter-spacing: .14em; }
.st.auto { background: rgba(99, 209, 99, .14); color: var(--au-green-bright); border-color: rgba(99, 209, 99, .5); }
.st.ok { background: var(--au-green); color: #fff; border-color: var(--au-green-bright); }
td.cell.ok, td.cell.auto { box-shadow: inset 3px 0 0 var(--au-green-bright); }
.inspect .q, .pickbar .q { background: rgba(4, 8, 12, .7); color: #cfe0d6; }

/* ---------------------------------------------------------------------------------------------
   LOGIN: a secure-access console with the Aussan mark and a slow scan.
   --------------------------------------------------------------------------------------------- */
.login { max-width: 420px; }
.login .login-mark { display: block; width: 74px; height: 74px; margin: 6px auto 14px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(99, 209, 99, .45), 0 0 0 8px rgba(37, 78, 117, .25), 0 0 34px rgba(54, 158, 54, .5); }
.login h2 { text-align: center; }
.login > p { text-align: center; }
.login form { padding: 18px 18px 20px; overflow: hidden; }
.login form::before {   /* scan line across the access console */
  content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(99, 209, 99, .07), transparent);
  animation: auSweep 6s linear infinite;
}
.login label { font-family: var(--hud-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--au-green-bright); }
.login .access { display: block; text-align: center; font-family: var(--hud-mono); font-size: 10px; letter-spacing: .3em; color: var(--muted); margin-top: 10px; }

#toast { background: rgba(10, 17, 24, .97); color: var(--ink); border: 1px solid rgba(99, 209, 99, .5); box-shadow: 0 0 18px rgba(54, 158, 54, .35); font-family: var(--hud-mono); letter-spacing: .04em; }
#toast.err { background: rgba(60, 14, 12, .97); color: #ffd7d3; border-color: var(--fail); box-shadow: 0 0 18px rgba(255, 110, 100, .45); }

/* ---------------------------------------------------------------------------------------------
   MOTION RULES. Movement stops for anyone who asks the system for less of it; the light stays.
   --------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body, .dash::before, .library::before, .login form::before { animation: none !important; }
}
@media (max-width: 700px) {
  .dash, .library { padding: 14px 12px 20px; border-radius: 14px; margin-left: 8px; margin-right: 8px; }
  .brand small { display: none; }
}
.grade { white-space: nowrap; }

/* ==============================================================================================
   THE WOW PASS (26 Oct 2026). Steve: "give it the aubin op's treatment ... futuristic, like tony
   stark would make ... give this a wow factor". The moving parts are in hud-fx.js; this is their paint.
   Same rules as above: decoration on panels, never over a value; the reactor's figure is the page's
   one glow; data arcs are chart marks and never glow; everything moving stops for reduced motion.
   ============================================================================================ */

/* POWER-ON. Each panel of a new page lights in turn: a wipe down, a flash of over-bright, then
   seated. Fill "backwards" only, so once it has run the panel carries no leftover clip or filter
   (a kept clip-path would cut off the corner brackets, which sit 1px outside the frame). */
.fx-on { animation: fxPower .62s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--boot, 0ms); }
@keyframes fxPower {
  0%   { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100% 0); filter: brightness(2.4) saturate(1.4); }
  55%  { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.5); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; }
}

/* SCANLINES on the glass, under the contents. */
.tile::before, .headline::before, .fx-deck::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 3px);
}
.tile > *, .headline > *, .fx-deck > * { position: relative; z-index: 1; }

/* THE LIGHT UNDER THE POINTER: glass lit where the cursor is (hud-fx.js sets --mx/--my). */
.tile, .headline, .answer-card, .bars { transition: border-color .2s, box-shadow .2s, transform .2s; }
.tile:hover, .headline:hover, .answer-card:hover, .bars:hover {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 0), rgba(99, 209, 99, .11), transparent 65%),
    linear-gradient(180deg, rgba(99, 209, 99, .07), transparent 38px),
    linear-gradient(180deg, rgba(20, 31, 43, .94), rgba(12, 19, 27, .94));
  border-color: rgba(99, 209, 99, .38);
}
.tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(99, 209, 99, .3), 0 10px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(54, 158, 54, .14); }

/* THE HEADER: link state and a clock, after the crumbs. */
.fx-status { display: inline-flex; align-items: center; gap: 16px; font-family: var(--hud-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); white-space: nowrap; }
.fx-link { color: var(--au-green-bright); display: inline-flex; align-items: center; }
.fx-clock { font-variant-numeric: tabular-nums; color: #bcd6f0; }
.fx-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: middle;
  background: var(--au-green-bright); box-shadow: 0 0 0 2px rgba(99, 209, 99, .18), 0 0 9px var(--au-green-bright); animation: fxPulse 2.4s ease-in-out infinite; }
@keyframes fxPulse { 50% { opacity: .35; box-shadow: 0 0 0 5px rgba(99, 209, 99, 0), 0 0 3px var(--au-green-bright); } }

/* ---------------------------------------------------------------------------------------------
   THE COMMAND DECK (Summary): a status rail, the reactor, and the outcome array.
   --------------------------------------------------------------------------------------------- */
.fx-deck {
  position: relative; margin-top: 14px; padding-bottom: 18px; overflow: hidden;
  border: 1px solid rgba(99, 209, 99, .32); border-radius: 14px;
  background:
    radial-gradient(520px 340px at 17% 58%, rgba(54, 158, 54, .14), transparent 70%),
    radial-gradient(700px 300px at 85% 0%, rgba(37, 78, 117, .32), transparent 70%),
    linear-gradient(180deg, rgba(18, 28, 39, .96), rgba(8, 13, 19, .96));
  box-shadow: inset 0 1px 0 rgba(99, 209, 99, .3), 0 0 0 4px rgba(37, 78, 117, .14), 0 14px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(54, 158, 54, .12);
}
.fx-deck::after {   /* a light that runs the top edge: the deck is live */
  content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 2px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--au-green-bright), transparent);
  animation: fxEdge 5.5s linear infinite;
}
@keyframes fxEdge { to { left: 100%; } }
.fx-rail { display: flex; flex-wrap: wrap; gap: 4px 26px; padding: 9px 18px; border-bottom: 1px solid var(--au-navy-line);
  background: linear-gradient(90deg, rgba(54, 158, 54, .14), rgba(37, 78, 117, .18) 40%, rgba(37, 78, 117, .08));
  font-family: var(--hud-mono); font-size: 11px; letter-spacing: .16em; color: var(--muted); }
.fx-rail-item { display: inline-flex; align-items: center; white-space: nowrap; }
.fx-rail b { color: var(--au-green-bright); font-weight: 600; margin-right: 8px; }
.fx-rail-item > span { color: #f2fbf4; font-variant-numeric: tabular-nums; }
.fx-deck-body { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; gap: 26px; padding: 22px 22px 0; align-items: center; }

/* THE REACTOR. */
.fx-reactor { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1; margin: 0 auto 30px; }
.fx-reactor-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-reactor-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.fx-reactor-mark { width: 17%; border-radius: 50%; margin-bottom: 6px; box-shadow: 0 0 0 1px rgba(99, 209, 99, .4), 0 0 18px rgba(54, 158, 54, .5); }
.fx-reactor-value { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1; color: #f4fbf6; font-variant-numeric: tabular-nums; letter-spacing: .01em;
  text-shadow: 0 0 20px rgba(99, 209, 99, .65), 0 0 2px rgba(99, 209, 99, .9); }   /* the page's one glow */
.fx-reactor-label { margin-top: 6px; font-family: var(--hud-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--au-green-bright); }
.fx-reactor-sub { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.fx-reactor-arc { position: absolute; top: 100%; left: -30px; right: -30px; margin-top: 8px; text-align: center; font-family: var(--hud-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #bcd6f0; }

/* SVG parts, shared by the reactor, the gauges and the boot. */
.fx-ring-thin { fill: none; stroke: rgba(99, 209, 99, .32); stroke-width: 1; }
.fx-ticks line { stroke: rgba(130, 175, 220, .42); stroke-width: 1; }
.fx-ticks line.major { stroke: var(--au-green-bright); stroke-width: 1.7; }
.fx-ring-dash { fill: none; stroke: rgba(110, 160, 210, .55); stroke-width: 2; stroke-dasharray: 2 7 22 7; }
.fx-track { fill: none; stroke: rgba(37, 78, 117, .55); stroke-width: 9; }
.fx-arc { fill: none; stroke: #3dab3d; stroke-width: 9; stroke-dasharray: var(--len) 100; animation: fxArc 1.5s cubic-bezier(.2, .7, .2, 1) .25s backwards; }   /* validated green; no glow */
@keyframes fxArc { from { stroke-dasharray: 0 100; } }
.fx-seg { fill: none; stroke: rgba(99, 209, 99, .5); stroke-width: 3; }
.fx-core { fill: rgba(6, 11, 16, .78); stroke: rgba(99, 209, 99, .22); stroke-width: 1; }
.fx-spin { transform-box: view-box; transform-origin: 50% 50%; animation: fxSpin 120s linear infinite; }
.fx-spin-rev { animation-duration: 70s; animation-direction: reverse; }
.fx-spin-mid { animation-duration: 36s; }
.fx-spin-fast { animation-duration: 5s; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* THE OUTCOME ARRAY: one gauge per kind of outcome. */
.fx-array h3 { margin-top: 0; }
.fx-array > p.muted { margin: 4px 0 0; font-size: 13px; }
.fx-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-top: 14px; }
.fx-gauge { position: relative; text-align: center; padding: 12px 8px; border: 1px solid var(--au-navy-line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(99, 209, 99, .06), transparent 40px), rgba(7, 12, 18, .6);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.fx-gauge:hover { border-color: rgba(99, 209, 99, .45); box-shadow: 0 0 16px rgba(54, 158, 54, .2); transform: translateY(-2px); }
.fx-gauge-dial { position: relative; width: 96px; height: 96px; margin: 0 auto 8px; }
.fx-gauge-svg { width: 100%; height: 100%; }
.fx-gauge .fx-track, .fx-gauge .fx-arc { stroke-width: 7; }
.fx-gauge-read { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--hud-mono); font-size: 17px; font-weight: 700; color: #f4fbf6; font-variant-numeric: tabular-nums; }
.fx-gauge-read .none { color: var(--muted); }
.fx-gauge-title { font-family: var(--hud-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--au-green-bright); min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.fx-gauge-figure { font-size: 15px; font-weight: 700; color: #f2fbf4; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fx-gauge-note { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------------------------
   THE BOOT: once per browser session, ~1.6 s, a click or a key skips it.
   --------------------------------------------------------------------------------------------- */
.fx-boot { position: fixed; inset: 0; z-index: 100; cursor: pointer; transition: opacity .5s;
  background: radial-gradient(circle at 50% 44%, rgba(54, 158, 54, .2), transparent 38%), radial-gradient(circle at 50% 44%, rgba(37, 78, 117, .35), transparent 70%), #05090d; }
.fx-boot.out { opacity: 0; pointer-events: none; }
.fx-boot-rings { position: absolute; left: 50%; top: 44%; width: min(62vmin, 420px); transform: translate(-50%, -50%); overflow: visible; }
.fx-boot-mark { position: absolute; left: 50%; top: 44%; width: min(15vmin, 100px); transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(99, 209, 99, .5), 0 0 40px rgba(54, 158, 54, .7); animation: fxPulseMark 1.2s ease-in-out infinite alternate; }
@keyframes fxPulseMark { to { box-shadow: 0 0 0 1px rgba(99, 209, 99, .7), 0 0 70px rgba(99, 209, 99, .8); } }
.fx-boot-log { position: absolute; left: 50%; top: calc(44% + min(34vmin, 230px)); transform: translateX(-50%); min-width: min(360px, 90vw);
  font-family: var(--hud-mono); font-size: 12px; letter-spacing: .16em; color: var(--au-green-bright); line-height: 1.9; }
.fx-boot-log div { animation: fxType .3s steps(12) backwards; white-space: nowrap; overflow: hidden; }
.fx-boot-log div:last-child { color: #f4fbf6; }
@keyframes fxType { from { max-width: 0; } to { max-width: 100%; } }
.fx-boot-arc { stroke-width: 4; animation-duration: 1.4s; animation-delay: 0s; }

/* ---------------------------------------------------------------------------------------------
   THE LOGIN: the mark inside two counter-turning rings, a holographic emblem.
   --------------------------------------------------------------------------------------------- */
.login-holo { position: relative; width: 150px; height: 150px; margin: 8px auto 16px; display: grid; place-items: center; }
.login-holo::before, .login-holo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.login-holo::before { inset: 0; border: 1px dashed rgba(110, 160, 210, .6); box-shadow: 0 0 30px rgba(54, 158, 54, .18) inset; animation: fxSpin 40s linear infinite; }
.login-holo::after { inset: 13px; border: 2px solid transparent; border-top-color: var(--au-green-bright); border-bottom-color: rgba(99, 209, 99, .45); animation: fxSpin 5s linear infinite reverse; }
.login-holo .login-mark { margin: 0; }

/* MOTION RULES for this pass: everything moving stops; arcs and panels arrive finished. */
@media (prefers-reduced-motion: reduce) {
  .fx-on, .fx-arc, .fx-spin, .fx-dot, .fx-deck::after, .login-holo::before, .login-holo::after, .fx-boot-mark, .fx-boot-log div { animation: none !important; }
  .tile:hover, .fx-gauge:hover { transform: none; }
}
@media (max-width: 1050px) { .fx-status { display: none; } }
@media (max-width: 760px) {
  .fx-deck-body { grid-template-columns: 1fr; padding: 16px 12px 0; gap: 14px; }
  .fx-reactor { max-width: 250px; }
  .fx-rail { gap: 3px 16px; padding: 8px 12px; font-size: 10px; }
  .fx-gauges { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fx-gauge-dial { width: 80px; height: 80px; }
}