/* Direction: ACT Fibernet — brand red #E9171C, glowing fibre strands, night-ink bands, playful signal-bar details */
/* 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: #fff1ef;
  --surface: #ffffff;
  --surface-2: #ffe4e0;
  --border: #f8cfcb;
  --border-strong: #bcacab;
  --ink: #1c0b10;
  --muted: #6a4950;
  --accent: #e9171c;
  --accent-hover: #c61418;
  --accent-ink: #ffffff;
  --accent-text: #c4121a;
  --accent-strong: #c51318;
  --accent-soft: #fcd6d5;
  --accent-border: #f59192;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3e7dd;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e2d7;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7dbd9;
  --danger-strong: #b91c1c;
  --chart-1: #e9171c;
  --chart-2: #ad8601;
  --chart-3: #137c32;
  --chart-4: #1c98a7;
  --chart-5: #2e4ce6;
  --chart-6: #dd51dd;

  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 14px 34px -18px rgba(196, 18, 26, 0.45);
  --card-pad: 1.25rem;
  --x-night: #1a0509;
  --x-night-2: #3a0a15;
  --x-on-photo: #ffffff;
  --x-ok: #19a24a;
  --x-warn: #f29f05;
  --x-bad: #e9171c;
  --x-glow: #ff5a4d;
  --x-amber: #ffb020;
  --gradient-hero: linear-gradient(125deg, #dd1319 0%, #ee3a3d 52%, #ff6b57 100%);
  --gradient-night: linear-gradient(180deg, #ffffff 0%, #ffecea 100%);
  --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: #fff5f3;
  --muted: #a09493;
  --accent: #e9171c;
  --accent-hover: #ec3a3e;
  --accent-ink: #ffffff;
  --accent-text: #ee4b4e;
  --accent-strong: #ee4b4e;
  --accent-soft: #410709;
  --accent-border: #720c0e;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #121f10;
  --success-strong: #499c68;
  --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 — ACT Fibernet. Fibre strands, signal bars, status pills, sidebar drawer. */
.night { background: var(--gradient-night); color: var(--ink); box-shadow: 0 0 0 1px var(--border), 0 10px 30px -22px var(--accent); }
html[data-theme="dark"] .night { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.night .glass { background: var(--accent-soft); color: var(--accent-strong); }
.night .glass:hover { background: color-mix(in srgb, var(--accent) 22%, var(--accent-soft)); }
.hero-grad .logo i, .cert-sheet .logo i { background: var(--x-on-photo); }
.hero-grad .logo i:nth-child(4) { background: #fff1a8; }
.logo i { background: var(--accent); }
.logo i:nth-child(4) { background: var(--x-glow); }
body { background-image: radial-gradient(900px 500px at 100% -10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%), radial-gradient(700px 420px at -10% 105%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%), radial-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1.3px); background-size: auto, auto, 24px 24px; }
.hero-grad { background: var(--gradient-hero); color: var(--x-on-photo); }
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); }

/* Logo: four signal bars */
.logo { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.logo i { display: block; width: 6px; border-radius: 3px; background: var(--x-glow); }
.logo i:nth-child(1) { height: 8px; } .logo i:nth-child(2) { height: 13px; }
.logo i:nth-child(3) { height: 19px; } .logo i:nth-child(4) { height: 26px; background: var(--x-amber); }
.logo i { animation: sig 2.4s ease-in-out infinite; transform-origin: bottom; }
.logo i:nth-child(2) { animation-delay: .15s; } .logo i:nth-child(3) { animation-delay: .3s; } .logo i:nth-child(4) { animation-delay: .45s; }
@keyframes sig { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.62); } }

/* LEDs */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--x-ok); box-shadow: 0 0 10px var(--x-ok); animation: blink 1.8s infinite; }
.led.r { background: var(--x-glow); box-shadow: 0 0 10px var(--x-glow); animation-delay: .5s; }
.led.a { background: var(--x-amber); box-shadow: 0 0 10px var(--x-amber); animation-delay: 1s; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Fibre strands */
.strands { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.strand { fill: none; stroke: var(--x-glow); stroke-width: 1.6; stroke-dasharray: 3 12; opacity: .55; animation: dash 7s linear infinite; }
.strand.s2 { stroke: var(--x-amber); animation-duration: 10s; opacity: .4; }
.strand.s3 { stroke: var(--x-on-photo); animation-duration: 13s; opacity: .22; }
@keyframes dash { to { stroke-dashoffset: -150; } }
.pk { fill: var(--x-on-photo); filter: drop-shadow(0 0 6px var(--x-glow)); offset-rotate: 0deg; animation: travel 6s linear infinite; }
.pk1 { offset-path: path("M-20 640 C 150 560, 260 700, 400 560 S 560 420, 640 460"); }
.pk2 { offset-path: path("M-20 420 C 120 300, 280 480, 420 330 S 580 200, 640 240"); animation-duration: 8s; animation-delay: -2s; }
.pk3 { offset-path: path("M-20 220 C 160 120, 300 260, 460 120 S 580 40, 640 60"); animation-duration: 9s; animation-delay: -4s; }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.glass { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); }
.glass:hover { background: color-mix(in srgb, var(--x-on-photo) 18%, transparent); }
.btn-light { background: var(--x-on-photo); color: var(--x-night); }
.btn-light:hover { background: color-mix(in srgb, var(--x-on-photo) 88%, var(--x-amber)); }
.btn-line { background: transparent; color: var(--x-on-photo); border: 2px solid color-mix(in srgb, var(--x-on-photo) 70%, transparent); }
.btn-line:hover { background: color-mix(in srgb, var(--x-on-photo) 16%, transparent); }
/* Sticker chips */
.sticker { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 999px; font-weight: 600; font-size: .85rem; background: color-mix(in srgb, var(--x-on-photo) 14%, transparent); border: 1px solid color-mix(in srgb, var(--x-on-photo) 35%, transparent); transform: rotate(-1.5deg); }
.sticker:nth-child(even) { transform: rotate(1.2deg); }

/* Sidebar drawer */
.side { transform: translateX(-100%); transition: transform .25s ease; }
.side.open { transform: none; }
@media (min-width: 768px) { .side { transform: none; } }
.navlink { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: 14px; font-weight: 600; color: color-mix(in srgb, var(--ink) 82%, transparent); transition: background .15s, color .15s, transform .15s; }
.navlink:hover { background: var(--accent-soft); color: var(--accent-strong); transform: translateX(3px); }
.navlink.on:hover { color: var(--x-on-photo); background: var(--gradient-hero); }
.navlink.on { background: var(--gradient-hero); color: var(--x-on-photo); box-shadow: 0 8px 22px -10px var(--x-glow); }
.navlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Telecom flourishes: broadcast rings, tower ticker, KPI accent bars */
.rings::before, .rings::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.rings::before { right: -140px; top: -140px; width: 460px; height: 460px; background: repeating-radial-gradient(circle, transparent 0 30px, color-mix(in srgb, var(--x-on-photo) 16%, transparent) 30px 32px); }
.rings::after { right: 60px; top: 60px; width: 14px; height: 14px; background: var(--x-on-photo); box-shadow: 0 0 0 0 color-mix(in srgb, var(--x-on-photo) 60%, transparent); animation: ping 2.6s ease-out infinite; }
@keyframes ping { to { box-shadow: 0 0 0 90px transparent; } }
.ticker { overflow: hidden; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.ticker-track { display: flex; width: max-content; gap: 2.25rem; padding: .6rem 1.25rem; animation: marquee 38s linear infinite; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.ticker-track span { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; }
.ticker-track span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gradient-hero); }
.kpi { transition: transform .18s ease, box-shadow .18s ease; }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px var(--accent); }
.tbl thead th { background: var(--surface-2); color: var(--accent-strong); }
.tbl thead th:first-child { border-top-left-radius: 12px; } .tbl thead th:last-child { border-top-right-radius: 12px; }
.card-title { display: flex; align-items: center; gap: .5rem; }
.card-title::before { content: ""; width: 5px; height: 1.1em; border-radius: 3px; background: var(--gradient-hero); flex: none; }
.cert-sheet { background-image: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%); }
html.reduced-motion .ticker-track, html.reduced-motion .rings::after { animation: none; }

/* Pills / tones */
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.tone-ok { background: color-mix(in srgb, var(--x-ok) 16%, transparent); color: color-mix(in srgb, var(--x-ok) 62%, var(--ink)); }
.tone-warn { background: color-mix(in srgb, var(--x-warn) 20%, transparent); color: color-mix(in srgb, var(--x-warn) 50%, var(--ink)); }
.tone-bad { background: color-mix(in srgb, var(--x-bad) 14%, transparent); color: color-mix(in srgb, var(--x-bad) 70%, var(--ink)); }
.tone-info { background: var(--surface-2); color: var(--accent-text); }
.tone-mute { background: var(--surface-2); color: var(--muted); }

/* Bars */
.track { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.fill { height: 100%; border-radius: 999px; transform-origin: left; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.fill.red { background: var(--gradient-hero); }
.fill.ok { background: var(--x-ok); border-radius: 0; }
.fill.bad { background: var(--x-bad); border-radius: 0; }
.fill.ink { background: var(--ink); }
@keyframes grow { from { transform: scaleX(.15); } to { transform: scaleX(1); } }

.kpi { position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; right: -18px; top: -18px; width: 70px; height: 70px; border-radius: 50%; background: var(--gradient-hero); opacity: .14; }
.kpi .num { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.03em; }

.donut { --p: 50; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--x-ok) calc(var(--p) * 1%), var(--x-bad) 0); display: grid; place-items: center; }
.donut > span { width: 84px; height: 84px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; }

.qr-frame { background: var(--x-on-photo); padding: 14px; border-radius: 24px; display: inline-block; box-shadow: 0 0 0 6px var(--accent), 0 20px 50px -20px var(--x-glow); }
.qr-frame img { display: block; width: min(72vw, 300px); height: auto; aspect-ratio: 1; }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .6rem .75rem; white-space: nowrap; border-bottom: 1px solid var(--border); }
.tbl td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.opt { display: flex; gap: .75rem; align-items: center; padding: .9rem 1rem; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); cursor: pointer; font-weight: 600; transition: border-color .15s, transform .1s; }
.opt:active { transform: scale(.985); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.opt input { accent-color: var(--accent); width: 20px; height: 20px; flex: none; }

.cert-sheet { background: var(--x-on-photo); color: var(--x-night); border: 10px solid var(--accent); border-radius: 8px; }

html.reduced-motion .logo i, html.reduced-motion .led, html.reduced-motion .strand, html.reduced-motion .pk, html.reduced-motion .fill, html.reduced-motion .navlink { animation: none; transition: none; }
@media print { .side, .no-print, header { display: none !important; } main { padding: 0 !important; } .cert-sheet { border-width: 10px; } }