/* Terminal Dystopia: Censorship Control Stack - SAIERA Safemachine: Screening
   No characters, no 3D, no scenery, no cyberpunk neon, no holographic UI.
   Sharp vector shapes only. Monospace. Bureaucratic 1980s terminal aesthetic. */

/* Self-hosted, not loaded from Google Fonts: see fonts/OFL.txt for license.
   Ships identically in the live site and the offline ZIP, no network call
   either way. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  --saiera-green: #00ff88;
  --trust-blue: #2b6cb0;
  --trust-blue-text: #6fa8dc; /* lightened variant for body/link text: 7.5:1+ on --bg and --panel, --trust-blue itself fails WCAG AA for text */
  --trust-blue-dark: #1a365d;
  --copper: #b87333;
  --copper-dark: #8b4513;
  --alarm-red: #ff3333;
  --bg: #05080a;
  --panel: #0a1210;
  --phosphor-white: #e8f5ee;
  --font-mono: "Courier New", Courier, monospace;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;

  /* Type scale, roughly 1.12-1.27 step, replaces the 11 ad hoc sizes this
     file used to carry. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;

  --transition-fast: 0.15s ease;
  --transition-med: 0.35s ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--phosphor-white);
  font-family: var(--font-body);
  min-height: 100vh;
}

body.reduced-motion * { animation: none !important; transition: none !important; }

/* Honor the OS-level setting directly, not only the in-product toggle, so a
   visitor who set prefers-reduced-motion never sees motion even on first launch
   (Accessibility Standard, Rule 13). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

body.high-contrast {
  --panel: #000000;
  --phosphor-white: #ffffff;
  --trust-blue: #66aaff;
  --trust-blue-text: #9cc6ff;
  --trust-blue-dark: #000000;
  --copper: #ffb84d;
  --saiera-green: #33ff99;
}
body.high-contrast .panel { border-width: 2px; }
body.high-contrast button { border-width: 2px; }

#app {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  min-height: 100vh;
  position: relative;
}

@media (max-width: 480px) {
  #app { padding: 16px 14px 72px; }
  h1 { font-size: var(--fs-lg); }
  .rank-headline { font-size: var(--fs-lg); }
  .share-row button { flex: 1 1 100%; }
  button { padding: 12px 14px; }
}

/* CRT scanline overlay, sits behind content */
.crt-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 136, 0.03) 0px,
    rgba(0, 255, 136, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.screen { position: relative; z-index: 1; }

/* Every render() call replaces #app's children with brand-new DOM nodes,
   so a plain animation on the top-level children replays automatically on
   every screen change without any JS transition orchestration. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
#app > * { animation: fadeInUp var(--transition-med) both; }
#app > *:nth-child(2) { animation-delay: 0.03s; }
#app > *:nth-child(3) { animation-delay: 0.06s; }
#app > *:nth-child(4) { animation-delay: 0.09s; }
#app > *:nth-child(n+5) { animation-delay: 0.11s; }

@keyframes pulseOpacity {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.loading-pulse { animation: pulseOpacity 1.2s ease-in-out infinite; }

.system-text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--saiera-green);
}

.case-number {
  font-family: var(--font-mono);
  color: var(--copper);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
}

h1, h2, h3 {
  font-family: var(--font-mono);
  font-weight: 700;
}

h1 { font-size: var(--fs-lg); color: var(--phosphor-white); }
h2 { font-size: var(--fs-md); color: var(--trust-blue-text); }

p, li { line-height: 1.55; font-size: var(--fs-base); }

.panel {
  background: var(--panel);
  border: 1px solid var(--trust-blue-dark);
  border-radius: 2px;
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color var(--transition-fast);
}

.panel.warn { border-color: var(--copper); }
.panel.alarm { border-color: var(--alarm-red); }

button {
  font-family: var(--font-body);
  background: var(--trust-blue-dark);
  color: var(--phosphor-white);
  border: 1px solid var(--trust-blue);
  border-radius: 2px;
  padding: 14px 16px;
  font-size: var(--fs-base);
  cursor: pointer;
  text-align: left;
  min-height: 48px;
  min-width: 48px;
  width: 100%;
  margin-bottom: 10px;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.1s ease;
}

button:hover { background: var(--trust-blue); }
button:focus-visible { background: var(--trust-blue); outline: 2px solid var(--saiera-green); outline-offset: 2px; }
button:active { background: var(--saiera-green); color: #05080a; transform: scale(0.98); }
button:disabled { opacity: 0.45; cursor: not-allowed; background: var(--trust-blue-dark); transform: none; }
button:disabled:hover { background: var(--trust-blue-dark); }

button.primary { background: var(--trust-blue); border-color: var(--saiera-green); }
button.ghost { background: transparent; }
button.small { width: auto; display: inline-block; margin-right: 8px; }

.option-code {
  font-family: var(--font-mono);
  color: var(--saiera-green);
  font-weight: 700;
  margin-right: 8px;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--copper);
  margin-bottom: 16px;
}

.progress-bar {
  height: 4px;
  background: var(--trust-blue-dark);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.progress-bar > div { height: 100%; background: var(--saiera-green); transition: width var(--transition-med); }

.tick { font-family: var(--font-mono); font-weight: 700; }
.tick.cleared { color: var(--saiera-green); }
.tick.survived { color: var(--copper); }
.tick.failed { color: var(--alarm-red); }

.footer-nav {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--trust-blue-text);
  border-top: 1px solid var(--trust-blue-dark);
  padding-top: 12px;
  margin-top: 24px;
}
.footer-nav a { color: var(--trust-blue-text); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { text-decoration: underline; }

.click-reveal summary { cursor: pointer; color: var(--trust-blue-text); font-family: var(--font-mono); font-size: var(--fs-base); }
.click-reveal[open] summary { color: var(--saiera-green); }

.rank-headline {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  color: var(--saiera-green);
  letter-spacing: 0.05em;
  margin: 4px 0 2px;
}

.diagnostic-line { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--copper); }

.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.checkbox-row input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }

label { font-size: var(--fs-sm); }

input[type="text"], input[type="email"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--trust-blue);
  color: var(--phosphor-white);
  padding: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  border-radius: 2px;
  margin-bottom: 12px;
  transition: border-color var(--transition-fast);
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible {
  outline: 2px solid var(--saiera-green);
  outline-offset: 1px;
  border-color: var(--saiera-green);
}
input.invalid { border-color: var(--alarm-red); }
.field-error { color: var(--alarm-red); font-size: var(--fs-sm); margin: -8px 0 12px; font-family: var(--font-mono); }

.share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.share-row button { width: auto; flex: 1 1 140px; }

.hidden { display: none !important; }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--copper);
  color: var(--copper);
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 6px;
}

.dev-note {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--alarm-red);
  border: 1px dashed var(--alarm-red);
  padding: 8px;
  margin-top: 8px;
}

.milestone-panel {
  border-color: var(--saiera-green);
  background: linear-gradient(180deg, rgba(0,255,136,0.08), var(--panel) 60%);
  text-align: center;
  padding: 28px 20px;
}
.milestone-panel h2 { color: var(--saiera-green); font-size: var(--fs-xl); }

.toast {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--saiera-green);
  border: 1px solid var(--saiera-green);
  border-radius: 2px;
  padding: 10px 14px;
  margin-top: 8px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Print / Save-as-PDF: the certificate's "Print" button calls window.print().
   Without this, the whole dark scrolling page prints. Here we hide the CRT
   overlay and everything except the certificate block, and flip it to ink-
   friendly dark-on-white so the saved PDF is a clean, giftable certificate. */
@media print {
  .crt-overlay { display: none !important; }
  body { background: #fff; color: #111; }
  /* hide every top-level screen child, then re-show only the certificate */
  #app > * { display: none !important; }
  #app > #cert-block {
    display: block !important;
    background: #fff;
    border: 2px solid #1a365d;
    color: #111;
    max-width: 100%;
    box-shadow: none;
  }
  #cert-block .system-text { color: #1a365d; }
  #cert-block h2 { color: #111; }
  #cert-block .rank-headline { color: #1a365d; }
  #cert-block .diagnostic-line { color: #333; }
  #cert-block input#cert-name {
    border: none; color: #111; background: transparent; padding: 0;
    font-family: var(--font-mono);
  }
}