/* tenshi. Light theme for the landing page; the demo (stage, phones, dashboard) runs on the dark "Midnight"
   theme from the Figma design: navy, teal, sand. Tokens are RGB triplets so Tailwind can apply alpha. */
:root {
  --ink-rgb: 255 255 255;        /* page background */
  --dusk-rgb: 243 245 248;       /* secondary surface */
  --line-rgb: 226 230 237;       /* hairlines */
  --paper-rgb: 15 26 48;         /* primary text: navy ink */
  --mist-rgb: 91 100 120;        /* secondary text */
  --sodium-rgb: 47 115 122;      /* action: deep teal (white text on it passes AA) */
  --signal-rgb: 217 45 32;       /* alert red */
  --mint-rgb: 31 122 112;        /* OK / armed */
  --amber-rgb: 178 107 0;        /* check-in due */
  --gold-rgb: 150 116 72;        /* brand sand, deepened for white */
  --on-sodium: #fff;             /* text on an action button */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-text: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ink: rgb(var(--ink-rgb)); --dusk: rgb(var(--dusk-rgb)); --line: rgb(var(--line-rgb));
  --paper: rgb(var(--paper-rgb)); --mist: rgb(var(--mist-rgb));
  --sodium: rgb(var(--sodium-rgb)); --signal: rgb(var(--signal-rgb)); --mint: rgb(var(--mint-rgb));
  --amber: rgb(var(--amber-rgb)); --gold: rgb(var(--gold-rgb));
}
/* Midnight: the live stage (.theme-dark) and the app pages (body.app) */
.theme-dark, body.app {
  --ink-rgb: 11 18 32; --dusk-rgb: 23 34 58; --line-rgb: 54 71 111;
  --paper-rgb: 242 239 232; --mist-rgb: 163 171 186;
  --sodium-rgb: 95 208 216; --signal-rgb: 255 79 74; --mint-rgb: 95 179 187;
  --amber-rgb: 240 176 74; --gold-rgb: 209 184 150;
  --on-sodium: #0b1220;
  /* derived colors resolve where they're declared, so restate them here */
  --ink: rgb(var(--ink-rgb)); --dusk: rgb(var(--dusk-rgb)); --line: rgb(var(--line-rgb));
  --paper: rgb(var(--paper-rgb)); --mist: rgb(var(--mist-rgb));
  --sodium: rgb(var(--sodium-rgb)); --signal: rgb(var(--signal-rgb)); --mint: rgb(var(--mint-rgb));
  --amber: rgb(var(--amber-rgb)); --gold: rgb(var(--gold-rgb));
  color: var(--paper); background-color: var(--ink);
}
html:has(body.app) { background: #0b1220; }

html { background: var(--ink); }
body {
  margin: 0;
  font-family: var(--font-text);
  color: var(--paper);
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.011em;
}
.display { font-family: var(--font-display); letter-spacing: -0.035em; }
.display.font-extrabold { font-weight: 700; }
.tnum { font-variant-numeric: tabular-nums; }

/* The wordmark: lowercase, tracked, in the text colour like the mark. */
.wordmark { font-weight: 500; letter-spacing: .06em; color: var(--paper); line-height: 1; }

/* Plain page background (kept as a class name the pages already use). */
.streetlight { background: var(--ink); }

/* App pages: flat navy. Alerts turn the whole page deep red, a stand-down turns it deep teal. */
body.app { background: #0b1220; }
body.app.state-contact, body.app.alerting { background: #2a1119; }
body.app.flash { background: #2a1119; animation: alarmBg 1.2s ease-in-out infinite; }
@keyframes alarmBg { 50% { background-color: #3d1520; } }
body.app.ok { background: #0f2f32; }

:focus-visible { outline: 3px solid rgb(var(--sodium-rgb) / .5); outline-offset: 2px; border-radius: 12px; }

/* Frosted bar for navigation */
.glass { background: rgb(var(--ink-rgb) / .72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }

/* Cards: a flat tinted panel; on dark pages, a faint fill with a hairline. */
.glass-card { position: relative; border-radius: 16px; background: var(--dusk); }
.theme-dark .glass-card, body.app .glass-card { background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: 0 1.4rem; border-radius: 980px;
  font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em;
  transition: transform .12s ease, background-color .2s ease, opacity .2s ease;
  cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn-sodium { background: var(--sodium); color: var(--on-sodium); }
.btn-sodium:hover { background: rgb(var(--sodium-rgb) / .88); }
.btn-ghost { color: var(--sodium); border: 1px solid rgb(var(--sodium-rgb) / .9); }
.btn-ghost:hover { background: rgb(var(--sodium-rgb) / .08); }
.btn:disabled { opacity: .5; cursor: progress; }
.link-arrow { color: var(--sodium); font-weight: 500; }
.link-arrow::after { content: ' ›'; }
.link-arrow:hover { text-decoration: underline; }

/* Signature: the main button is a switch. A white knob that nudges over when you're about to flip it. */
.btn-switch { padding-left: .4rem; gap: .75rem; }
.btn-switch .knob { width: 2.15rem; height: 2.15rem; border-radius: 50%; background: #fff; display: grid; place-items: center; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.btn-switch .knob::after { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--sodium); transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .2s ease; }
.btn-switch:hover .knob { transform: translateX(4px); }
.btn-switch:hover .knob::after { transform: scale(1.25); background: var(--mint); }

/* Signature: a pulse divider. A hairline that draws itself and spikes once, like a check-in. */
.pulse { display: flex; align-items: center; gap: 0; height: 36px; margin: 0 auto 2.5rem; max-width: 420px; }
.pulse .ln { flex: 1; height: 1px; background: var(--line); transform: scaleX(0); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.pulse .ln:first-child { transform-origin: right; } .pulse .ln:last-child { transform-origin: left; }
.pulse svg { flex: none; width: 46px; height: 36px; overflow: visible; }
.pulse path { fill: none; stroke: var(--sodium); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset .7s ease .35s; }
.pulse.in .ln { transform: none; }
.pulse.in path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .pulse .ln { transform: none; } .pulse path { stroke-dashoffset: 0; } }

/* ---------- Form fields ---------- */
.field { display: block; font-size: .875rem; font-weight: 500; color: var(--mist); }
.field input {
  display: block; width: 100%; margin-top: .4rem; padding: .85rem 1rem;
  font: 400 1.0625rem var(--font-text); color: var(--paper);
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: rgb(var(--mist-rgb) / .7); }
.field input:focus { outline: none; border-color: var(--sodium); box-shadow: 0 0 0 4px rgb(var(--sodium-rgb) / .15); }

/* ---------- Route (the escalation ladder as a night-bus line) ---------- */
.route ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.route .stop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* line segment to the next stop */
.route .stop:not(:last-child)::after {
  content: ''; position: absolute; top: var(--dot-mid); left: 50%; width: 100%; height: var(--track);
  transform: translateY(-50%); background: var(--line); z-index: 0;
}
.route .stop.is-past::after { background: rgb(var(--t-next)); }
.route .stop-dot {
  position: relative; z-index: 1; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--ink); border: var(--track) solid var(--line); box-sizing: border-box;
}
.route .stop.is-past .stop-dot { background: rgb(var(--t)); border-color: rgb(var(--t)); }
.route .stop.is-here .stop-dot { background: var(--ink); border-color: rgb(var(--t)); box-shadow: 0 0 0 6px rgb(var(--t) / .2); }
.route .stop-name { margin-top: .55rem; font-weight: 600; color: var(--mist); }
.route .is-here .stop-name, .route .is-past .stop-name { color: var(--paper); }

.route-mini { --dot: 14px; --track: 3px; --dot-mid: 7px; }
.route-mini .stop-name { font-size: .75rem; }

.route-full { --dot: 22px; --track: 4px; --dot-mid: 11px; container-type: inline-size; }
.route-full .stop { align-items: flex-start; text-align: left; padding-right: 1.25rem; }
.route-full .stop:not(:last-child)::after { left: 0; width: 100%; }
.route-full .stop-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; margin-top: 1rem; color: var(--paper); }
.route-full .stop-desc { margin-top: .4rem; color: var(--mist); font-size: .975rem; line-height: 1.5; max-width: 22ch; }
.route-full .stop-dot { border-color: rgb(var(--t)); }
.route-full .stop:not(:last-child)::after { background: rgb(var(--t-next)); }
.route-draw .stop:not(:last-child)::after { transform-origin: left center; transform: translateY(-50%) scaleX(0); }
.route-draw.in .stop:not(:last-child)::after { animation: draw .55s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--n, 0) * .28s + .2s); }
.route-draw .stop-dot { transform: scale(0); }
.route-draw.in .stop-dot { animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--n, 0) * .28s); }
.route-draw .stop-name, .route-draw .stop-desc { opacity: 0; transform: translateY(10px); }
.route-draw.in .stop-name, .route-draw.in .stop-desc { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--n, 0) * .28s + .1s); }
.route-draw .stop:nth-child(2) { --n: 1; } .route-draw .stop:nth-child(3) { --n: 2; } .route-draw .stop:nth-child(4) { --n: 3; } .route-draw .stop:nth-child(5) { --n: 4; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes draw { from { transform: translateY(-50%) scaleX(0); } to { transform: translateY(-50%) scaleX(1); } }

@container (max-width: 640px) {
  .route-full ol { grid-template-columns: 1fr; gap: 1.6rem; }
  .route-full .stop { display: grid; grid-template-columns: var(--dot) 1fr; column-gap: 1rem; padding: 0; }
  .route-full .stop-dot { grid-row: 1 / span 2; margin-top: .05rem; }
  .route-full .stop-name { margin-top: 0; }
  .route-full .stop-desc { max-width: none; }
  .route-full .stop:not(:last-child)::after {
    top: var(--dot); left: calc(var(--dot) / 2); width: var(--track); height: calc(100% + 1.6rem - var(--dot));
    transform: translateX(-50%);
  }
  .route-draw .stop:not(:last-child)::after, .route-draw.in .stop:not(:last-child)::after { animation: none; transform: translateX(-50%); }
}

/* ---------- Countdown ring ---------- */
.ring-track { stroke: var(--line); }
.ring-fill { stroke: var(--mint); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ring-amber { stroke: var(--signal); }  /* the check-in ring, red to match the I'm OK button */

/* The big "I'm OK" button: flat red, the same red as the alarm and alert steps. */
.ok-button { color: #fff; background: var(--signal); font-weight: 700; letter-spacing: -0.02em; word-spacing: .12em; }
.ok-button:hover { background: rgb(var(--signal-rgb) / .92); }

/* ---------- Keypad ---------- */
/* iOS-style keypad: 72px circles, a backspace key and a confirm key that wakes up at 4 digits */
.keypad-grid { display: grid; grid-template-columns: repeat(3, 72px); justify-content: center; gap: 14px 26px; }
.key {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 400; font-size: 28px;
  color: inherit; background: rgb(var(--paper-rgb) / .1); border: 0;
  transition: background-color .12s ease, transform .1s ease, opacity .15s ease;
}
.key:hover { background: rgb(var(--paper-rgb) / .16); }
.key:active { transform: scale(.94); background: rgb(var(--paper-rgb) / .26); }
.key-text { background: transparent; }
.key-ok { background: var(--paper); color: var(--ink); }
.key-ok:hover { background: rgb(var(--paper-rgb) / .9); }
.key:disabled { opacity: .35; cursor: default; transform: none; }
.key-ok:disabled { background: rgb(var(--paper-rgb) / .1); color: var(--paper); }
.pin-dots { display: flex; justify-content: center; gap: .9rem; height: 1rem; }
.pin-dots span { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; opacity: .5; }
.pin-dots span.on { background: currentColor; opacity: 1; }
.shake { animation: shake .35s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------- Alarm keys on the red page ---------- */
.flash .key { background: rgb(255 140 130 / .14); }

/* Breathing pilot light while armed */
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.breathe { animation: breathe 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .flash { background-color: var(--signal); color: #fff; }
}

.route-draw[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .route-draw .stop-dot, .route-draw .stop-name, .route-draw .stop-desc { opacity: 1; transform: none; } .route-draw .stop:not(:last-child)::after { transform: translateY(-50%); } }