/* PRT Status — public site.
   One identity, shared with the app: WVU navy as the ground, gold as the single accent,
   and semantic colour reserved for service state so "gold" never means "warning". */

:root {
  /* --- brand ------------------------------------------------------------- */
  --navy-950: #031A2F;
  --navy-900: #002855;   /* WVU Blue */
  --navy-800: #073B68;
  --navy-700: #12517F;
  --gold:     #F4C430;
  --gold-dim: #D9A800;
  --cyan:     #2AA9C8;

  /* --- service state ----------------------------------------------------- */
  --running: #0B7252;
  --warning: #9B5A00;
  --down:    #B8323A;

  /* --- ground / ink ------------------------------------------------------ */
  --canvas:  #EEF3F7;
  --surface: #FFFFFF;
  --raised:  #F7F9FB;
  --ink:     #102033;
  --ink-2:   #44566A;
  --ink-3:   #5B6C80;   /* measured 4.82:1 on --canvas; #607287 came in at 4.42 and failed AA */
  --hair:    #DDE5EC;

  /* the dark band at the top of the page, which does NOT flip with the theme —
     it is the product's dashboard surface and reads the same in both */
  --band:      var(--navy-950);
  --band-card: #06243F;
  --band-ink:  #FFFFFF;
  --band-ink-2:#A9BFD1;
  --band-ink-3:#6887A2;
  --band-hair: rgba(169, 191, 209, 0.18);

  --shadow: 0 1px 2px rgba(3, 26, 47, .06), 0 8px 24px rgba(3, 26, 47, .07);
  --shadow-lg: 0 2px 4px rgba(3, 26, 47, .08), 0 24px 60px rgba(3, 26, 47, .14);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:  #071A2B;
    --surface: #0C2439;
    --raised:  #102B43;
    --ink:     #EAF2F8;
    --ink-2:   #B3C7D7;
    --ink-3:   #8AA3B8;
    --hair:    rgba(169, 191, 209, .16);

    --running: #42D59A;
    --warning: #FFB84D;
    --down:    #FF7A83;

    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.34), 0 24px 60px rgba(0,0,0,.44);
  }
}

:root[data-theme="dark"] {
  --canvas:  #071A2B;
  --surface: #0C2439;
  --raised:  #102B43;
  --ink:     #EAF2F8;
  --ink-2:   #B3C7D7;
  --ink-3:   #8AA3B8;
  --hair:    rgba(169, 191, 209, .16);
  --running: #42D59A;
  --warning: #FFB84D;
  --down:    #FF7A83;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.34), 0 24px 60px rgba(0,0,0,.44);
}

/* ---------------------------------------------------------------- base ---- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -.022em; }

h1 { font-size: clamp(2.6rem, 6.4vw, 4.3rem); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.1; }
h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; }

p { margin: 0; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }

.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}

/* ----------------------------------------------------------------- mark --- */

.mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }

.mark-glyph {
  position: relative;
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: var(--gold);
  display: grid; place-items: center;
  font-weight: 800; font-size: .92rem; letter-spacing: -.04em;
  color: var(--navy-900);
  font-stretch: 108%;
}
.mark-glyph::after {          /* the live dot, same idea as the app header */
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--running);
  box-shadow: 0 0 0 3px var(--band);
}
.mark-text { display: flex; flex-direction: column; line-height: 1.1; }
.mark-name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; }
.mark-sub {
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--band-ink-3);
}

/* ------------------------------------------------------------------ nav --- */

.band { background: var(--band); color: var(--band-ink); }

nav { padding: 16px 0; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.nav-links { display: flex; align-items: center; gap: 22px; }
/* :not(.btn) is load-bearing. `.nav-links a` outranks `.btn-primary` on specificity, so
   without it the gold nav button inherited the muted link colour and rendered pale blue-grey
   on gold — measured 1.16:1. */
.nav-links a:not(.btn) {
  color: var(--band-ink-2); text-decoration: none;
  font-size: .92rem; font-weight: 600;
}
.nav-links a:not(.btn):hover { color: var(--band-ink); }
.nav-links .btn { font-size: .88rem; }

/* ----------------------------------------------------------------- hero --- */

.hero { padding: 46px 0 62px; }

.kicker {
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .04em;
  color: var(--band-ink-3); margin-bottom: 18px;
}

.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--gold); }

.hero-lead {
  margin-top: 20px; max-width: 56ch;
  color: var(--band-ink-2); font-size: 1.09rem;
}
.hero-lead strong { color: var(--band-ink); font-weight: 700; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: inherit; font-size: .97rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: var(--navy-900); }
.btn-primary:hover { background: #FFD34F; }
.btn-ghost { border-color: var(--band-hair); color: var(--band-ink); }
.btn-ghost:hover { border-color: var(--band-ink-2); }

/* Appears on both grounds — the hero (dark band) and the closing block (light canvas) — so it
   defaults to the light-ground ink and only takes the band colour inside the band. */
.cta-note { font-size: .85rem; color: var(--ink-3); }
.band .cta-note { color: var(--band-ink-3); }

/* ------------------------------------------------------- live status card - */

.live-card {
  margin-top: 40px;
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--band-card) 62%, #04203A 100%);
  border: 1px solid var(--band-hair);
  border-radius: var(--r-lg);
  padding: 26px clamp(22px, 4vw, 34px) 24px;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.live-card::after {           /* soft light bloom, echoes the dashboard mock */
  content: ""; position: absolute; inset: -40% -30% auto auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(42,169,200,.20), transparent 68%);
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--band-hair);
  font-size: .78rem; font-weight: 700; color: var(--band-ink);
}
.chip .d { width: 8px; height: 8px; border-radius: 50%; background: var(--running); }

.live-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--band-ink-3);
}
.live-status {
  font-size: clamp(2.3rem, 5.6vw, 3.5rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.03em; margin: 8px 0 14px;
  color: var(--band-ink);
}
.live-detail { color: var(--band-ink-2); max-width: 54ch; }

.live-meta {
  display: flex; flex-wrap: wrap; gap: 10px 44px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--band-hair);
}
.live-meta div { min-width: 132px; }
.live-meta dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--band-ink-3); margin-bottom: 5px;
}
.live-meta dd { margin: 0; font-weight: 700; font-size: .95rem; }

/* Says on its face that this is the app's display, not a live reading of the PRT.
   A marketing page showing a fabricated "Running normally" as though it were current is
   the same lie this project exists to correct. */
.live-card[data-sample="true"]::before {
  content: "Example of the app’s display — open the app for the live answer";
  position: absolute; top: 0; left: 0; right: 0;
  padding: 5px 14px; z-index: 1;
  background: var(--gold); color: var(--navy-900);
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-align: center;
}
.live-card[data-sample="true"] { padding-top: 46px; }

/* ------------------------------------------------------------ line board -- */

.netline { margin-top: 26px; }
.netline-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 16px;
}
.netline-head b { font-size: .95rem; }
.netline-head .src, .netline-head .age {
  font-family: var(--mono); font-size: .76rem; color: var(--band-ink-3);
}

.line { display: flex; align-items: flex-start; }
.stop { flex: 1; text-align: center; min-width: 0; }
.stop .rail { position: relative; height: 22px; display: grid; place-items: center; }
.stop .rail::before {
  content: ""; position: absolute; top: 50%; left: -50%; right: 50%;
  height: 3px; transform: translateY(-50%); background: var(--cyan);
}
.stop:first-child .rail::before { display: none; }
.stop .dot {
  position: relative; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--band); border: 3px solid var(--running);
}
.stop span {
  display: block; margin-top: 9px;
  font-size: .78rem; font-weight: 600; color: var(--band-ink-2);
  overflow-wrap: anywhere;
}
.stop.warn .dot { border-color: var(--warning); }
.stop.warn span { color: var(--warning); }
.stop.out .dot { border-color: var(--down); }
.stop.out span { color: var(--down); }

/* -------------------------------------------------------------- sections -- */

section { padding: 74px 0; }
section > p { max-width: 62ch; color: var(--ink-2); }
section h2 + p { margin-top: 16px; }

blockquote {
  margin: 44px 0 0; padding: 26px 30px;
  background: var(--surface); border-radius: var(--r);
  border-left: 5px solid var(--gold);
  box-shadow: var(--shadow);
  font-size: 1.18rem; font-weight: 600; line-height: 1.45;
}
blockquote em { color: var(--ink); font-style: italic; }
blockquote cite {
  display: block; margin-top: 14px;
  font-size: .78rem; font-weight: 700; font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* --------------------------------------------------------------- versus --- */

.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 34px; }
.vcard {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 24px; box-shadow: var(--shadow);
}
.vcard.live { border-color: var(--gold); box-shadow: var(--shadow-lg); }
.vtag {
  display: inline-block; margin-bottom: 16px; padding: 4px 11px;
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.vtag.stale { background: var(--hair); color: var(--ink-2); }
.vtag.fresh { background: var(--gold); color: var(--navy-900); }
.vhead { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; font-weight: 800; }
.vhead .d { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.vcard p { margin-top: 12px; color: var(--ink-2); font-size: .95rem; }
.vmeta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: .78rem; color: var(--ink-3);
}

/* ---------------------------------------------------------------- steps --- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; margin-top: 36px; }
.step {
  display: flex; gap: 16px; padding: 22px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.step .n {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--navy-900); color: var(--gold);
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
}
.step p { margin-top: 7px; font-size: .93rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- stats --- */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; margin-top: 42px;
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--r); overflow: hidden;
}
.stat { background: var(--surface); padding: 24px; }
.stat b {
  display: block; font-size: 2.5rem; font-weight: 800;
  line-height: 1; letter-spacing: -.04em; color: var(--navy-900);
}
.stat span { display: block; margin-top: 10px; font-size: .87rem; color: var(--ink-2); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat b { color: var(--gold); }
}
:root[data-theme="dark"] .stat b { color: var(--gold); }

/* ---------------------------------------------------------------- cards --- */

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; margin-top: 34px; }
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 24px; box-shadow: var(--shadow);
}
.card .ic { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: 14px; }
.card p { margin-top: 8px; font-size: .93rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- close --- */

.close { padding: 84px 0; text-align: center; }
.close .cta { justify-content: center; }
.close .eyebrow { color: var(--ink-3); }

/* --------------------------------------------------------------- footer --- */

footer { background: var(--band); color: var(--band-ink-2); padding: 46px 0; }
.foot-in { display: flex; flex-direction: column; gap: 12px; }
.foot-in .by { font-weight: 700; color: var(--band-ink); }
.foot-in p { font-size: .87rem; max-width: 68ch; }
footer .nav-links { flex-wrap: wrap; }

/* ------------------------------------------------- privacy / terms / support */
/* Long-form legal and help pages. Same identity, quieter: no gold accents competing with the
   text, and a measure that stays readable at 16px. */

.doc { padding: 56px 0 48px; }
.doc-head { border-bottom: 1px solid var(--hair); padding-bottom: 26px; margin-bottom: 6px; }
.doc h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.doc .updated {
  margin-top: 12px; font-family: var(--mono);
  font-size: .8rem; color: var(--ink-3);
}

.doc section { padding: 34px 0; border-top: 1px solid var(--hair); }
.doc section:first-of-type { border-top: 0; }
.doc h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0 0 14px; }
.doc h3 { font-size: 1rem; margin: 22px 0 6px; }
.doc p, .doc li { font-size: 1rem; color: var(--ink-2); }
.doc p { max-width: 68ch; }
.doc li { margin-bottom: 9px; }
.doc ul { padding-left: 20px; margin: 0 0 16px; max-width: 66ch; }
.doc strong { color: var(--ink); }
.doc a { color: var(--navy-700); text-underline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .doc a { color: var(--running); }
}
:root[data-theme="dark"] .doc a { color: var(--running); }

.tldr {
  background: var(--surface); border: 1px solid var(--hair);
  border-left: 5px solid var(--gold);
  border-radius: var(--r); padding: 22px 24px; margin: 26px 0 8px;
  box-shadow: var(--shadow);
}
.tldr h2 {
  font-size: .82rem; margin: 0 0 14px; font-family: var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.tldr ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tldr li {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; color: var(--ink); font-size: .97rem;
}
.tldr li::before { content: "—"; color: var(--gold-dim); flex: 0 0 auto; }

.table-scroll { overflow-x: auto; }
.facts { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: .95rem; }
.facts th, .facts td {
  text-align: left; padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.facts th {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.facts td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; padding-right: 24px; }
.facts td { color: var(--ink-2); }

.never { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.never div {
  background: var(--raised); border: 1px solid var(--hair); border-radius: 12px;
  padding: 14px 16px; font-size: .93rem; color: var(--ink);
}
.never div span { display: block; color: var(--ink-3); font-size: .8rem; margin-top: 3px; }

.note-box {
  background: var(--navy-900); color: #DDE9F4;
  border-radius: 14px; padding: 18px 20px; margin: 22px 0; font-size: .95rem;
}
.note-box p { color: inherit; margin: 0; max-width: none; }
.note-box strong { color: #FFFFFF; }
.note-box a { color: var(--gold); }

.doc-nav {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--hair);
}
.doc-nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); text-decoration: none;
}
.doc-nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hide-sm { display: none; }
  section { padding: 56px 0; }
  .live-meta { gap: 18px 32px; }
  .stop span { font-size: .68rem; }
  .mark-sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}