/* NumGuard — "Modernist" web design system.
   Shared by index.html (public) and testeurs.html (field-tester briefing).
   Same token family as the Android app's ui/theme/Theme.kt (NgColors),
   extended here with an always-dark "panel" pair for inverted blocks that
   must stay legible regardless of the page's own light/dark theme. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#f3f2f2;
  --surface:#eae9e9;
  --surface-2:#e2e0e0;
  --ink:#201e1d;
  --ink-soft:rgba(32,30,29,0.62);
  --ink-faint:rgba(32,30,29,0.38);
  --line:rgba(32,30,29,0.16);
  --line-strong:rgba(32,30,29,0.4);
  --accent:#ec3013;
  --accent-deep:#ae1800;
  --accent-tint:#fff2ef;
  --accent-tint-ink:#7c1405;
  --on-accent:#f3f2f2;
  --shadow:0 1px 2px rgba(32,30,29,0.12);

  /* Always-dark inverted panel: a fixed dark-bg/light-fg pair, never
     derived from --ink/--bg, so a block using it can't lose contrast when
     the surrounding page flips to dark mode (--ink itself flips role). */
  --panel-bg:#201e1d;
  --panel-fg:#f3f2f2;
  --panel-fg-soft:rgba(243,242,242,0.7);
  --panel-fg-faint:rgba(243,242,242,0.5);
  --panel-accent:#ff6a4a;
  --panel-hairline:rgba(243,242,242,0.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#18100e; --surface:#241a17; --surface-2:#2c211d;
    --ink:#f4efec; --ink-soft:rgba(244,239,236,0.66); --ink-faint:rgba(244,239,236,0.4);
    --line:rgba(244,239,236,0.16); --line-strong:rgba(244,239,236,0.32);
    --accent:#ff5a3a; --accent-deep:#ff7657; --accent-tint:#2c1712; --accent-tint-ink:#ffab93;
    --on-accent:#1a1210; --shadow:0 1px 2px rgba(0,0,0,0.5);
    --panel-bg:#241a17; --panel-fg:#f4efec;
    --panel-fg-soft:rgba(244,239,236,0.66); --panel-fg-faint:rgba(244,239,236,0.46);
    --panel-accent:#ff5a3a; --panel-hairline:rgba(244,239,236,0.16);
  }
}
:root[data-theme="dark"]{
  --bg:#18100e; --surface:#241a17; --surface-2:#2c211d;
  --ink:#f4efec; --ink-soft:rgba(244,239,236,0.66); --ink-faint:rgba(244,239,236,0.4);
  --line:rgba(244,239,236,0.16); --line-strong:rgba(244,239,236,0.32);
  --accent:#ff5a3a; --accent-deep:#ff7657; --accent-tint:#2c1712; --accent-tint-ink:#ffab93;
  --on-accent:#1a1210; --shadow:0 1px 2px rgba(0,0,0,0.5);
  --panel-bg:#241a17; --panel-fg:#f4efec;
  --panel-fg-soft:rgba(244,239,236,0.66); --panel-fg-faint:rgba(244,239,236,0.46);
  --panel-accent:#ff5a3a; --panel-hairline:rgba(244,239,236,0.16);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono{font-family:"JetBrains Mono","SFMono-Regular",Menlo,monospace}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif; font-weight:800; line-height:1.05; letter-spacing:-0.02em; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit; text-underline-offset:3px}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important}}

.wrap{max-width:820px; margin:0 auto; padding:0 28px}

/* ---- shared header mark ---- */
header{padding:26px 0}
.mark-row{display:flex; align-items:center; gap:10px}
.mark-row .name{font-weight:800; font-size:15px}
.mark-row .status{margin-left:auto; display:flex; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint)}
.mark-row .status .dot{width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
.mark-row .tag{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); padding:4px 8px}

/* ---- site-wide nav (between the brand and whatever sits at the far right) ---- */
.site-nav{display:flex; gap:18px; margin-left:22px}
.site-nav a{font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none}
.site-nav a:hover, .site-nav a[aria-current]{color:var(--accent)}

/* ---- site-wide footer ---- */
.site-footer{border-top:2px solid var(--line-strong); background:var(--surface)}
.site-footer .wrap{padding:22px 28px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap}
.site-footer .brand{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-faint)}
.site-footer .brand svg{width:14px; height:14px}
.site-footer nav{display:flex; gap:16px; flex-wrap:wrap}
.site-footer nav a{font-size:12.5px; color:var(--ink-soft); text-decoration:none}
.site-footer nav a:hover{color:var(--accent)}

/* ---- section shell ---- */
section{padding:56px 0}
.kicker{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent)}
.h2{font-size:28px; margin-top:10px}
.section-lede{margin-top:12px; max-width:58ch; color:var(--ink-soft); font-size:16px}

/* ---- entrance (respects prefers-reduced-motion above) ---- */
.rise{animation:rise 0.5s cubic-bezier(.16,.8,.32,1) both}
.rise-1{animation-delay:.04s} .rise-2{animation-delay:.12s} .rise-3{animation-delay:.2s}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}