/* Wedgetail Ocean Serenity design system (see /DESIGN.md) */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --ink:#06202B; --muted:#527389;
  --primary:#15495E; --primary-soft:#E1E5F2; --accent:#1A7B8C; --accent-soft:#C7DDF6;
  --line:#E1E5F2; --sage:#A9C1AD; --mint:#E9F3E3;
  --success:#3F7256; --warning:#A16A1B; --error:#A63B2A; --info:#4A7FA5;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --shadow:0 1px 3px rgba(6,32,43,.08),0 6px 20px rgba(6,32,43,.06);
}
/* Single-theme by design: institutional white in every OS theme. */
:root{color-scheme: light}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;line-height:1.6}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(34px,6vw,56px);letter-spacing:-.01em}
h2{font-size:clamp(24px,4vw,32px)}
h3{font-size:19px}
p{max-width:65ch}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:8px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.mono{font-family:"Geist Mono",Consolas,monospace;font-variant-numeric:tabular-nums;font-weight:500}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

/* nav: institutional dark bar, consistent in both themes */
nav.top{background:#06202B;border-bottom:3px solid var(--accent)}
nav.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:600;color:#FFFFFF;text-decoration:none;letter-spacing:.01em}
.brand span{color:#4FB3C6}
nav.top a.nl{color:#B8CFDC;text-decoration:none;font-size:15px;padding:6px 2px}
nav.top a.nl[aria-current="page"]{color:#FFFFFF;font-weight:600;border-bottom:2px solid #4FB3C6}
nav.top a.nl:hover{color:#FFFFFF}
nav.top a:focus-visible{outline-color:#4FB3C6}
nav.top .grow{flex:1}

/* buttons */
.btn{display:inline-block;font:inherit;font-weight:600;font-size:15px;border-radius:var(--r-md);padding:12px 24px;cursor:pointer;border:1px solid transparent;text-decoration:none;text-align:center}
.btn-primary{background:var(--primary);color:var(--paper)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-accent{background:var(--accent);color:#fff}

/* sections */
header.hero{padding:72px 0 56px}
.kicker{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:13px;margin-bottom:14px}
.hero p.lede{font-size:19px;color:var(--muted);margin:18px 0 28px;max-width:56ch}
section{padding:52px 0;border-top:1px solid var(--line)}
section .lede{color:var(--muted);margin:8px 0 28px;max-width:60ch}
.grid{display:grid;gap:16px}
@media(min-width:720px){.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c2{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.card p{font-size:15px;color:var(--muted)}
.tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:999px;display:inline-block}
.tag.num{background:var(--primary-soft);color:var(--primary)}
.tag.lit{background:var(--accent-soft);color:var(--accent)}
.tag.sage{background:var(--mint);color:var(--success)}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
tr:last-child td{border-bottom:none}

/* misc */
.alert{border-radius:var(--r-md);padding:12px 16px;font-size:14px;margin:10px 0;border:1px solid}
.alert.info{color:var(--info);border-color:var(--info);background:color-mix(in srgb,var(--info) 8%,transparent)}
.alert.success{color:var(--success);border-color:var(--success);background:color-mix(in srgb,var(--success) 8%,transparent)}
.alert.warning{color:var(--warning);border-color:var(--warning);background:color-mix(in srgb,var(--warning) 8%,transparent)}
.alert.error{color:var(--error);border-color:var(--error);background:color-mix(in srgb,var(--error) 8%,transparent)}
details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600;font-size:15px}
details p{margin-top:10px;font-size:15px;color:var(--muted)}
footer.site{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:14px;margin-top:52px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
ol.steps{counter-reset:s;list-style:none;display:grid;gap:14px}
ol.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 20px 64px;position:relative;box-shadow:var(--shadow)}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-family:"Geist Mono",monospace;font-weight:500;display:flex;align-items:center;justify-content:center;font-size:14px}
ol.steps b{display:block;margin-bottom:4px}
ol.steps p{font-size:15px;color:var(--muted)}

/* app (login + dashboard) */
.auth{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth .card{width:100%;max-width:400px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px}
input[type=password],input[type=text],input[type=email],textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink)}
.bandbar{display:flex;gap:4px;align-items:center;margin-top:8px;flex-wrap:wrap}
.band{flex:1;min-width:52px;text-align:center;font-size:11px;padding:7px 2px;border-radius:6px;background:var(--paper);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.band.done{background:var(--mint);color:var(--success);border-color:transparent}
.band.now{background:var(--primary);color:var(--paper);border-color:transparent;font-weight:600}
.skillrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.skillrow:last-child{border-bottom:none}
.skillrow .name{flex:1}
.pill{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px}
.pill.mastered{background:var(--mint);color:var(--success)}
.pill.learning{background:var(--accent-soft);color:var(--accent)}
.pill.queued{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.statrow{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.stat .v{font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:500}
.stat .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}