/* Lifeline theme: glacier and debris. The map's own colours are the brand:
   amber debris is the accent, river blue for water, red only for "cut off".
   Loaded after foundation.css and site.css. */
:root{
  --bg:#F7F5F0; --bg-alt:#EFEBE3; --sunk:#EAE5DB; --surface:#FFFDF9; --surface-2:#FAF7F1;
  --ink:#0F1E2E; --ink-2:#34465A; --ink-3:#5A6B7D; --ink-4:#7E8B99;
  --line:rgba(15,30,46,.09); --line-2:rgba(15,30,46,.16); --tint:rgba(15,30,46,.05);
  --shadow-rgb:15 30 46;
  --accent:#C8792B; --accent-hi:#E39A4A; --accent-ink:#8A4E14; --accent-wash:#F8E9D6; --on-accent:#fff;
  --focus:#8A4E14; --marker:#F2C97D;
  --c-debris:#C8792B; --c-water:#2B7FB8; --c-cut:#C0392B; --c-ok:#2E7D4F; --c-risk:#D99A2B; --c-possible:#E5A85A;
  --night:#0B1824; --night-2:#132638;
  /* tables and numbers: Inter with tabular figures, not a code font */
  --font-mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wallpaper-soft:radial-gradient(70% 60% at 85% 0%,#DCE9F3 0,transparent 60%),radial-gradient(60% 60% at 10% 100%,#F6DFC2 0,transparent 60%),linear-gradient(160deg,#F7F4EE,#EDE8DF);
  --chrome:linear-gradient(#FFFDF9,#F3EFE8); --chrome-line:rgba(15,30,46,.08); --chrome-ink:#5A6B7D;
}
.score__num,.vt .num,.pbar b,.qnum,.chip b,.choke__text b,.speed b,.trace-out small,[data-sum]{font-variant-numeric:tabular-nums}
::selection{background:#F2C97D;color:var(--ink)}

/* headline: one warm serif phrase in debris amber */
.hero h1 .t-muted{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--accent-ink)}
.badge__tag{background:var(--accent);color:#fff}

/* primary actions in debris amber */
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--accent-hi),var(--accent) 60%,#B36A22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(138,78,20,.35),0 10px 24px -10px rgba(138,78,20,.7)}
.btn-primary:hover{filter:brightness(1.05)}

/* hero map sits in a night "operations room" band so debris and river glow */
.hero-stage{background:radial-gradient(60% 70% at 20% 100%,rgba(200,121,43,.28) 0,transparent 60%),radial-gradient(55% 60% at 90% 0%,rgba(43,127,184,.32) 0,transparent 60%),linear-gradient(160deg,var(--night-2),var(--night))!important}
.hero-window{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 90px -30px rgba(0,0,0,.6)}

/* every section head reads left, like a report */
.section-head{text-align:left;margin-left:0}
.section-head .lead{margin-left:0}

/* scoreboard: three rows of three, numbers coloured by the question they answer */
.score{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media (max-width:900px){.score{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.score__num{font-family:var(--font-display);font-weight:650}
.score [data-q="where"] .score__num{color:var(--c-debris)}
.score [data-q="what"] .score__num{color:var(--c-water)}
.score [data-q="who"] .score__num{color:var(--c-cut)}
.score [data-q="check"] .score__num{color:var(--ink)}

/* tables: wrap the reason instead of clipping it */
.vt td.why{min-width:240px;max-width:340px;white-space:normal;line-height:1.45}
.vt th{background:var(--surface-2)}
.choke__rank{background:var(--accent);color:#fff}
.choke-mark span{background:var(--accent-ink)}

/* the "how it works" final node */
.pipe__node--hot,.pipe__node.is-hot{background:var(--ink);color:#fff}

/* optical before/after */
.opt-tabs{display:inline-flex;gap:4px;margin-bottom:10px}
.window__bar .segmented--sm{margin-left:auto;padding:3px;background:var(--tint)}
.segmented--sm button{height:24px;padding:0 10px;font-size:12px}
.segmented button[aria-pressed="true"]{color:var(--accent-ink)}

/* menu bar: warm glass, amber marker on the section you are reading */
.nav__bar{background:color-mix(in oklab,var(--surface) 82%,transparent);box-shadow:0 0 0 1px var(--line),0 12px 32px -16px rgba(15,30,46,.28)}
.nav__brand{gap:10px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.nav__brand .app-icon{width:30px;height:30px;border-radius:8px;box-shadow:0 2px 6px -2px rgba(15,30,46,.5)}
.nav__links a{position:relative;color:var(--ink-2)}
.nav__links a:hover{background:var(--accent-wash);color:var(--accent-ink)}
.nav__links a.is-active{color:var(--ink);font-weight:600}
.nav__links a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
.nav__icon{display:grid;place-items:center;width:36px;height:36px;margin-right:4px;border-radius:50%;color:var(--ink-2);transition:background-color var(--dur-hover)}
.nav__icon:hover{background:var(--tint);color:var(--ink)}
.nav__icon svg{width:19px;height:19px}
@media (max-width:760px){.nav__icon{display:none}}

/* village table fits the page: no sideways scroll on desktop, stacked rows on phones */
.vt{min-width:0!important;table-layout:auto}
.vt th,.vt td{padding:12px 12px}
.vt th{letter-spacing:.04em;white-space:normal;line-height:1.25}
.vt td.why{min-width:0!important;max-width:220px;font-size:13px;color:var(--ink-2)}
.vt td.care{white-space:normal!important;max-width:180px}
.pbar{min-width:110px!important}
.table-scroll{overflow-x:visible!important}
@media (max-width:860px){
  .vt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .vt,.vt tbody,.vt tr,.vt td{display:block;width:100%}
  .vt tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .vt td{padding:0!important;border:0!important;max-width:none!important;text-align:left!important}
  .vt td.name{grid-column:1/-1;font-size:16px}
  .vt td:nth-child(2){grid-column:1/-1}
  .vt td:nth-child(3)::before{content:"Drive before ";color:var(--ink-4)}
  .vt td:nth-child(4)::before{content:"Drive now ";color:var(--ink-4)}
  .vt td:nth-child(5)::before{content:"Walk now ";color:var(--ink-4)}
  .vt td.care,.vt td.why{grid-column:1/-1}
  .vt td.care::before{content:"Nearest care: ";color:var(--ink-4)}
  .vt td.why::before{content:"Fix: ";color:var(--ink-4)}
}
.run-select{min-width:0;max-width:46%}
.run-select select{max-width:100%;text-overflow:ellipsis}
@media (max-width:640px){.hero-window .window__title{display:none}.run-select{max-width:100%;margin-left:auto}}

/* matched to the logo: its navy sky and slate mountains behind the hero map */
:root{--night:#0D1E2F;--night-2:#23384D}
.hero-stage{position:relative;isolation:isolate;background:radial-gradient(55% 60% at 88% 0%,rgba(227,154,74,.22) 0,transparent 60%),linear-gradient(175deg,var(--night) 0,#122638 55%,#172d43 100%)!important}
.hero-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:-1;border-radius:0 0 inherit inherit;background:#23384D;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300V190l120-70 70 40 160-120 90 60 140-90 110 80 160-110 90 70 120-60 140 100v200z'/></svg>") bottom/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'><path d='M0 300V190l120-70 70 40 160-120 90 60 140-90 110 80 160-110 90 70 120-60 140 100v200z'/></svg>") bottom/100% 100% no-repeat}
.app-icon{border-radius:22%;object-fit:cover;box-shadow:none!important}
.nav__brand .app-icon{width:30px;height:30px}

/* field kit */
.fieldkit{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:24px}
@media (max-width:860px){.fieldkit{grid-template-columns:1fr}}
.fieldkit>div{padding:22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--ring)}
.fieldkit__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fieldkit__text{padding:16px 18px;border-radius:var(--r-md);background:var(--night);color:#F3EEE5;font-size:15px;line-height:1.55;border-left:4px solid var(--accent)}
.fieldkit__foot{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px}
.filelist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.filelist li{display:flex;gap:8px;flex-wrap:wrap}
.filelist a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:var(--ring);font-weight:600;font-size:14px;color:var(--ink)}
.filelist a:hover{background:var(--accent-wash);color:var(--accent-ink)}
.filelist a span{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--accent-ink)}

/* guided tour */
.map-btn--tour{background:var(--accent)!important;color:#fff!important;margin-right:6px}
.map-btn--tour svg{width:14px;height:14px}
.tour-cap{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:5;width:min(560px,calc(100% - 32px));padding:14px 40px 14px 16px;border-radius:var(--r-lg);background:rgba(13,30,47,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F3EEE5;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.tour-cap p{margin:0;font-size:15px;line-height:1.5}
.tour-cap__step{display:block;margin-bottom:4px;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--accent-hi)}
.tour-cap__x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
.tour-glow{filter:drop-shadow(0 0 6px rgba(227,154,74,.95))}
.map-ui--tr{display:flex;align-items:center}
.speed{display:flex;align-items:baseline;gap:14px;max-width:640px;margin-top:18px;padding:14px 18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--ring)}
.speed b{font:700 34px/1 var(--font-display);letter-spacing:-.03em;color:var(--accent)}
.speed span{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.btn-ghost svg{width:14px;height:14px}
.hero-sub{margin:18px auto 0;max-width:760px;font-family:var(--font-serif);font-style:italic;font-size:clamp(24px,2.6vw,34px);line-height:1.2;color:var(--accent-ink)}
.hero .lead{margin-top:18px}
.hero-window .window__bar{gap:12px}
.hero-window .window__title{position:static;transform:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;padding-left:8px}
.chat__sugg-label{flex-basis:100%;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
/* selected chips keep their contrast on hover */
.chip[aria-pressed="true"],.chip[aria-pressed="true"]:hover{background:var(--ink)!important;color:#fff!important}
button.chip:not([aria-pressed="true"]):hover{background:var(--accent-wash);color:var(--accent-ink)}

/* phones: keep the section links, as a compact second row in the bar */
@media (max-width:760px){
  .nav__bar{flex-wrap:wrap;height:auto;padding:8px 8px 6px 14px;row-gap:2px;border-radius:24px}
  .nav__links{display:flex;order:5;flex-basis:100%;margin:0;justify-content:space-between;overflow-x:auto;scrollbar-width:none}
  .nav__links::-webkit-scrollbar{display:none}
  .nav__links a{padding:6px 7px;font-size:13px;white-space:nowrap}
  .nav__links a.is-active::after{left:7px;right:7px;bottom:1px}
  html{scroll-padding-top:122px}
  .hero{padding-top:142px}
}