/* Direction: ACT Fibernet broadband control room — light red paper, glowing fibre strands, rounded cards */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fff5f5;
  --surface: #ffffff;
  --surface-2: #ffe8e8;
  --border: #f5cdcf;
  --border-strong: #bcacad;
  --ink: #2b0c0e;
  --muted: #7a4b4f;
  --accent: #e9171c;
  --accent-hover: #c61418;
  --accent-ink: #ffffff;
  --accent-text: #c4121a;
  --accent-strong: #a50d13;
  --accent-soft: #ffdfe0;
  --accent-border: #f59193;
  --success: #0f7a56;
  --success-ink: #ffffff;
  --success-soft: #e2e6e2;
  --success-strong: #0e704f;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e2d9;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dbdb;
  --danger-strong: #b91c1c;
  --chart-1: #e9171c;
  --chart-2: #ad8601;
  --chart-3: #137c32;
  --chart-4: #1c98a7;
  --chart-5: #2e4ce6;
  --chart-6: #dd51dd;

  --font-display: "Outfit", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --display-weight: 800;
  --display-tracking: -0.025em;
  --radius-card: 26px;
  --radius-btn: 999px;
  --radius-input: 16px;
  --shadow-card: 0 18px 40px -24px rgba(233, 23, 28, 0.45), 0 2px 6px -2px rgba(120, 10, 14, 0.12);
  --x-on-photo: #ffffff;
  --x-deep: #a50d13;
  --x-glow: #ff8a8e;
  --gradient-hero: linear-gradient(135deg, #f3282d 0%, #d4121a 42%, #8e0a12 100%);
  --gradient-side: linear-gradient(190deg, #ea1a1f 0%, #b70f17 52%, #5a050c 100%);
  --gradient-bar: linear-gradient(90deg, #ff6a6f, #e9171c);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110303;
  --surface: #291c1c;
  --surface-2: #1d1010;
  --border: #322626;
  --border-strong: #584f4f;
  --ink: #fff5f5;
  --muted: #a09494;
  --accent: #e9171c;
  --accent-hover: #ec3a3e;
  --accent-ink: #ffffff;
  --accent-text: #ee4b4e;
  --accent-strong: #ee4b4e;
  --accent-soft: #410709;
  --accent-border: #720c0e;
  --success: #0f7a56;
  --success-ink: #ffffff;
  --success-soft: #111d15;
  --success-strong: #44987b;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #351504;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #360909;
  --danger-strong: #d16969;
  --chart-1: #e9171c;
  --chart-2: #bb9321;
  --chart-3: #169a3f;
  --chart-4: #17a6b6;
  --chart-5: #4a70fe;
  --chart-6: #dd51dd;
}

/* Training Hub: the broadband control-room look. Tokens only. */
body {
  background-image: radial-gradient(60rem 28rem at 100% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(40rem 24rem at -10% 60%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  background-attachment: fixed;
}

[hidden] { display: none !important; }

/* ---- shell ---- */
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 50; width: 18rem; max-width: 86vw; overflow-y: auto;
  background: var(--gradient-side); transform: translateX(-104%); transition: transform 0.28s ease;
  box-shadow: 12px 0 40px -18px rgba(0, 0, 0, 0.5);
}
.side::after {
  content: ""; position: absolute; inset: auto -30% -10% -30%; height: 55%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--x-glow) 45%, transparent), transparent);
}
.side.is-open { transform: translateX(0); }
@media (min-width: 1024px) { .side { transform: none; z-index: 30; max-width: none; } }
.scrim { position: fixed; inset: 0; z-index: 40; display: none; background: rgba(0, 0, 0, 0.45); }
.scrim.is-shown { display: block; }
@media (min-width: 1024px) { .scrim { display: none !important; } }
.nav-link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.72rem 0.95rem; border-radius: 1.1rem; font-weight: 600;
  color: var(--x-on-photo); transition: background 0.2s, transform 0.2s;
}
.nav-link:hover { background: color-mix(in srgb, var(--x-on-photo) 16%, transparent); transform: translateX(3px); }
.nav-link.is-active { background: var(--x-on-photo); color: var(--x-deep); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); }
.nav-link:focus-visible { outline: 2px solid var(--x-on-photo); outline-offset: 2px; }

/* ---- glass + light buttons on red ---- */
.glass { background: color-mix(in srgb, var(--x-on-photo) 16%, transparent); border: 1px solid color-mix(in srgb, var(--x-on-photo) 30%, transparent); backdrop-filter: blur(10px); }
.glass-pill { border-radius: 999px; background: color-mix(in srgb, var(--x-on-photo) 16%, transparent); border: 1px solid color-mix(in srgb, var(--x-on-photo) 34%, transparent); color: var(--x-on-photo); transition: background 0.2s; }
a.glass-pill:hover { background: color-mix(in srgb, var(--x-on-photo) 28%, transparent); }
.btn-light { background: var(--x-on-photo); color: var(--x-deep); border: 0; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.55); }
.btn-light:hover { background: color-mix(in srgb, var(--x-on-photo) 90%, var(--x-glow)); }
.hero { box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---- fibre art ---- */
.fb { stroke: var(--x-on-photo); stroke-width: 1.4; opacity: 0.26; }
.fb-flow { stroke: var(--x-on-photo); stroke-width: 3.2; stroke-dasharray: 2 40; opacity: 0.95; animation: flow 3.4s linear infinite; filter: drop-shadow(0 0 5px var(--x-glow)); }
.fb-flow.f2 { animation-duration: 4.6s; animation-direction: reverse; }
.fb-flow.f3 { animation-duration: 5.8s; stroke-dasharray: 2 60; }
.fb-flow.f4 { animation-duration: 3.9s; stroke-dasharray: 2 70; }
@keyframes flow { to { stroke-dashoffset: -420; } }
.fb-nodes circle { fill: var(--x-on-photo); opacity: 0.85; transform-box: fill-box; transform-origin: center; animation: node 2.8s ease-in-out infinite; }
.fb-nodes circle:nth-child(2) { animation-delay: 0.6s; } .fb-nodes circle:nth-child(3) { animation-delay: 1.2s; } .fb-nodes circle:nth-child(4) { animation-delay: 1.8s; }
@keyframes node { 50% { transform: scale(1.9); opacity: 0.25; } }
.live-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: currentColor; animation: ping 1.7s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 0.65rem transparent; } }

/* ---- "the network is learning": signal bars, dots, slogan ticker ---- */
.sigbars { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.3rem; }
.sigbars i { display: block; width: 5px; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: sig 1.6s ease-in-out infinite; }
.sigbars i:nth-child(1) { height: 30%; } .sigbars i:nth-child(2) { height: 55%; animation-delay: 0.15s; }
.sigbars i:nth-child(3) { height: 78%; animation-delay: 0.3s; } .sigbars i:nth-child(4) { height: 100%; animation-delay: 0.45s; }
@keyframes sig { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.dots b { display: inline-block; animation: hop 1.2s ease-in-out infinite; }
.dots b:nth-child(2) { animation-delay: 0.15s; } .dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.3em); } }
.ticker { overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--x-on-photo) 30%, transparent); padding-block: 0.7rem; }
.ticker-track { display: flex; width: max-content; gap: 2rem; animation: tick 34s linear infinite; }
.ticker-track > span { padding-right: 2rem; }
@keyframes tick { to { transform: translateX(-50%); } }
html.reduced-motion .sigbars i, html.reduced-motion .dots b, html.reduced-motion .ticker-track { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sigbars i, .dots b, .ticker-track { animation: none !important; } }

/* ---- wi-fi: radiating rings, signal glyph, session pills ---- */
.rings { display: grid; place-items: center; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--x-on-photo); opacity: 0.4; transform: scale(0.2); animation: radiate 5.2s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: 1.3s; } .rings i:nth-child(3) { animation-delay: 2.6s; } .rings i:nth-child(4) { animation-delay: 3.9s; }
.rings b { position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--x-on-photo); color: var(--x-deep); box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--x-on-photo) 18%, transparent); }
@keyframes radiate { 0% { transform: scale(0.2); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
.signal { overflow: visible; }
.signal .sg { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; opacity: 0.25; }
.signal circle.sg { fill: currentColor; stroke: none; }
.signal .sg.on { opacity: 1; animation: sigpulse 2.4s ease-in-out infinite; }
.signal path.sg.on:nth-of-type(1) { animation-delay: 0.2s; } .signal path.sg.on:nth-of-type(2) { animation-delay: 0.4s; } .signal path.sg.on:nth-of-type(3) { animation-delay: 0.6s; }
@keyframes sigpulse { 50% { opacity: 0.55; } }
.sess { display: grid; gap: 0.1rem; min-width: 9.5rem; padding: 0.7rem 1rem; border: 2px solid var(--border); border-radius: 1.2rem; background: var(--surface); color: var(--ink); transition: border-color 0.2s, transform 0.2s; }
.sess:hover { border-color: var(--accent); transform: translateY(-2px); }
.sess.is-active { background: var(--gradient-hero); border-color: transparent; color: var(--x-on-photo); box-shadow: 0 14px 26px -16px var(--accent); }
html.reduced-motion .rings i, html.reduced-motion .signal .sg.on { animation: none !important; }
html.reduced-motion .rings i:nth-child(1) { transform: scale(0.4); } html.reduced-motion .rings i:nth-child(2) { transform: scale(0.6); } html.reduced-motion .rings i:nth-child(3) { transform: scale(0.8); } html.reduced-motion .rings i:nth-child(4) { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .rings i, .signal .sg.on { animation: none !important; } }

/* ---- cards, segments, tables ---- */
.kpi, .tcard { transition: transform 0.25s ease, border-color 0.25s; }
.kpi:hover, .tcard:hover { transform: translateY(-4px); }
.seg { display: inline-flex; gap: 0.2rem; padding: 0.25rem; border-radius: 999px; background: var(--surface-2); max-width: 100%; }
.seg-item { padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; white-space: nowrap; color: var(--muted); transition: background 0.2s, color 0.2s; }
.seg-item:hover { color: var(--ink); }
.seg-item.is-active { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 18px -10px var(--accent); }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th { text-align: left; padding: 0.75rem 1rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.tbl td { padding: 0.8rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tbl tfoot td { font-weight: 800; background: var(--accent-soft); border-top: 2px solid var(--accent); }
.select-sm { min-height: 0; padding: 0.35rem 2rem 0.35rem 0.7rem; font-size: 0.8rem; border-radius: 0.8rem; }

/* ---- bars ---- */
.bar-fill { transform-origin: left; animation: grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes grow { from { transform: scaleX(0.04); } }
.bar-alt .bar-fill { background: var(--accent-strong); }
.stack { display: flex; height: 0.85rem; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.stack-pass { background: var(--success); } .stack-fail { background: var(--accent); }
.dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 999px; }
.dot-pass { background: var(--success); } .dot-fail { background: var(--accent); }

/* ---- form pickers ---- */
.pick { cursor: pointer; }
.pick-box { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1rem; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 0.9rem; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.pick-box:hover { border-color: var(--accent); transform: translateY(-1px); }
.pick-tick { display: none; }
.peer:checked + .pick-box .pick-tick { display: inline-block; }
.tile-wrap { display: block; cursor: pointer; }
.tile { display: flex; align-items: flex-start; gap: 0.75rem; height: 100%; padding: 0.8rem 0.9rem; border: 2px solid var(--border); border-radius: 1rem; background: var(--surface); transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.tile:hover { border-color: var(--accent); }
.tile-tick { display: grid; place-items: center; flex-shrink: 0; width: 1.35rem; height: 1.35rem; margin-top: 0.05rem; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); transition: background 0.2s, border-color 0.2s; }
.tile-tick .icon { opacity: 0; transform: scale(0.5); transition: opacity 0.15s, transform 0.15s; }
.peer:checked + .tile { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 6px 16px -12px var(--accent); }
.peer:checked + .tile .tile-tick { background: var(--accent); border-color: var(--accent); }
.peer:checked + .tile .tile-tick .icon { opacity: 1; transform: scale(1); }
.aud-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.aud-group legend { padding: 0; }
.aud-missing .tile { border-color: var(--danger); }
html.reduced-motion .tile, html.reduced-motion .tile-tick .icon { transition: none; }
.step { position: relative; }
.step-no { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 999px; background: var(--gradient-hero); color: var(--x-on-photo); font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; box-shadow: 0 10px 20px -10px var(--accent); }

/* ---- QR ---- */
.qr { image-rendering: auto; }
.qr-off .qr { filter: grayscale(1) blur(2px); opacity: 0.3; }
.qr-live .qr { filter: none; opacity: 1; }
.qr-note { display: inline-block; margin-top: 0.6rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 700; }
.qr-lock { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: var(--ink); }

/* ---- quiz (public, phone first) ---- */
.quiz-top { position: sticky; top: 0.5rem; z-index: 5; }
.opt { display: block; cursor: pointer; }
.opt-box { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.85rem 1rem; border: 2px solid var(--border); border-radius: 1.2rem; background: var(--surface); font-weight: 500; transition: border-color 0.2s, background 0.2s, transform 0.12s; }
.opt:active .opt-box { transform: scale(0.985); }
.opt-key { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 999px; background: var(--surface-2); font-size: 0.85rem; }
.peer:checked + .opt-box .opt-key { background: var(--accent); color: var(--accent-ink); }
.score-ring { --ring: var(--accent); background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--surface-2) 0); }
.score-ring.is-pass { --ring: var(--success); }
.ok-ring { animation: pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes pop { from { transform: scale(0.55); } }

/* ---- flash note (from ?n=) ---- */
.flash { position: fixed; top: 1rem; left: 50%; z-index: 90; max-width: 92vw; transform: translateX(-50%); padding: 0.75rem 1.25rem; border-radius: 999px; background: var(--ink); color: var(--canvas); font-weight: 600; font-size: 0.9rem; box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6); animation: drop 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes drop { from { transform: translate(-50%, -1.5rem); } }

html.reduced-motion .fb-flow, html.reduced-motion .fb-nodes circle, html.reduced-motion .live-dot, html.reduced-motion .bar-fill,
html.reduced-motion .ok-ring, html.reduced-motion .flash, html.reduced-motion .kpi, html.reduced-motion .tcard { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .fb-flow, .fb-nodes circle, .live-dot, .bar-fill, .ok-ring, .flash { animation: none !important; } }