/* Atlas Trainer — "Atlas Plate": an editorial, printed-atlas look.
   Paper ground, ink type, one blue-green (water, actions, correct), one
   vermilion (marker, wrong, streak). Hierarchy from type and hairlines, not
   boxes. One radius (2px). Fonts are self-hosted so the app stays offline. */
@font-face{font-family:"Newsreader"; src:url(fonts/newsreader.woff2) format("woff2"); font-weight:200 800; font-style:normal; font-display:swap;}
@font-face{font-family:"Newsreader"; src:url(fonts/newsreader-italic.woff2) format("woff2"); font-weight:200 800; font-style:italic; font-display:swap;}
@font-face{font-family:"IBM Plex Sans"; src:url(fonts/plex-sans.woff2) format("woff2"); font-weight:100 700; font-style:normal; font-display:swap;}
/* Windows has no flag emoji (it draws "FR" — the answer). Only there, a flag-only
   font (Twemoji, CC-BY 4.0) is put first; unicode-range keeps it off all other text. */
@font-face{font-family:"Flags"; src:url(fonts/flags.woff2) format("woff2"); unicode-range:U+1F1E6-1F1FF,U+1F3F4,U+E0062-E007F; font-display:block;}
.flagfont{--sans:"Flags","IBM Plex Sans",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
  --serif:"Flags","Newsreader",Georgia,"Times New Roman",serif;}

:root{
  --ground:#F3EFE6; --ink:#1C1F22; --muted:#5F6360; --dom:#1D4E5C; --acc:#C2371B; --rule:#D9D2C3; --on-dom:#F3EFE6;
  --raise:#EAE5DA;                      /* pressed / hovered rows */
  --land:#E8E1D2; --ocean:#D6E1E2; --neutral:#DED7C7; --border:rgba(28,31,34,.38); --land-hover:#DDD5C3;
  /* strength ramp: one hue, rising darkness — reads in greyscale too */
  --s0:#E8E1D2; --s1:#BBC1B8; --s2:#8D9F9D; --s3:#5A7A7F; --s4:#1D4E5C; --s-weak:#D79480;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,"Helvetica Neue",Helvetica,sans-serif;
  --r:2px; --ease:cubic-bezier(.2,.8,.2,1);
  /* legacy names still used by inline styles in developer tools */
  --text:var(--ink); --dim:var(--muted); --accent:var(--dom); --good:var(--dom); --bad:var(--acc); --warn:var(--acc);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#121416; --ink:#ECE7DC; --muted:#9A9D98; --dom:#7FB3C2; --acc:#F06A4A; --rule:#2A2D30; --on-dom:#121416;
    --raise:#1B1E21;
    --land:#2A2E31; --ocean:#171C20; --neutral:#222629; --border:rgba(236,231,220,.28); --land-hover:#353A3E;
    --s0:#2A2E31; --s1:#3F4F55; --s2:#55717A; --s3:#6A929E; --s4:#7FB3C2; --s-weak:#83493C;
    color-scheme:dark;
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; min-height:100%; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5; overscroll-behavior:none; -webkit-font-smoothing:antialiased;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; touch-action:manipulation; padding:0;}
input,select{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--dom); outline-offset:2px; border-radius:var(--r);}
h1,h2,h3{font-weight:300;}

/* ---------- frame ---------- */
#app{display:flex; flex-direction:column; min-height:100dvh;}
#topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px; min-height:56px;
  padding:env(safe-area-inset-top) 24px 0; background:var(--ground); border-bottom:1px solid var(--rule);}
#topbar h1{font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.2px; margin:0; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#backBtn{width:44px; height:44px; display:none; align-items:center; justify-content:center; margin-left:-12px;}
#backBtn.show{display:flex;}
#backBtn svg{width:18px; height:18px;}
#topRight{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;}
#topRight b{color:var(--acc); font-weight:600;}
#tabbar{position:fixed; z-index:20; left:0; right:0; bottom:0; display:flex; background:var(--ground);
  border-top:1px solid var(--rule); padding-bottom:env(safe-area-inset-bottom);}
#tabbar button{flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--muted);}
#tabbar button::before{content:""; width:24px; height:2px; background:transparent;}
#tabbar button.on{color:var(--ink);}
#tabbar button.on::before{background:var(--dom);}
#tabbar.hidden{display:none;}
#main{flex:1; width:100%; max-width:600px; margin:0 auto; padding:20px 24px calc(env(safe-area-inset-bottom) + 96px);}
#main > *{animation:rise .35s var(--ease) both;}
#main > *:nth-child(2){animation-delay:.03s} #main > *:nth-child(3){animation-delay:.06s}
#main > *:nth-child(n+4){animation-delay:.09s}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- type ---------- */
.sub{color:var(--muted); font-size:13px; margin:0; line-height:1.5;}
.center{text-align:center;}
.display{font-family:var(--serif); font-weight:300; font-size:40px; line-height:1.1; margin:0; letter-spacing:-.3px;}
.display b{font-weight:600;}
.fact{font-family:var(--serif); font-style:italic; font-size:17px; line-height:1.45; margin:8px 0 0;}

/* a "card" is a section: hairline above, space around — never a box */
.card{border-top:1px solid var(--rule); padding:20px 0 4px; margin:0 0 20px;}
.card h2,.sec{font-family:var(--serif); font-size:24px; font-weight:300; line-height:1.25; margin:0 0 4px;}
.secHead{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.secHead .sub{white-space:nowrap;}
#main > .card:first-child{border-top:0; padding-top:0;}
.rule{height:1px; background:var(--rule); margin:20px 0;}

/* ---------- buttons ---------- */
.btn{display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding:12px 16px; margin-top:12px;
  border:1px solid var(--ink); border-radius:var(--r); font-size:16px; font-weight:600; transition:background .15s,color .15s,transform .1s;}
.btn:hover{background:var(--raise);}
.btn:active,.opt:active,.row-link:active,.chip:active{transform:scale(.985);}
.btn.primary{background:var(--dom); border-color:var(--dom); color:var(--on-dom);}
.btn.primary:hover{filter:brightness(1.08); background:var(--dom);}
.btn.ghost{border-color:transparent; color:var(--dom);}
.btn.ghost:hover{background:var(--raise);}
.btn.danger{border-color:var(--acc); color:var(--acc);}
.btn:disabled{opacity:.4; cursor:default; filter:none;}
.row{display:flex; gap:12px;} .row .btn{flex:1;}

/* index rows: the home "Practise" list, paths, settings links */
.rows{margin:4px 0 0;}
.row-link{display:flex; align-items:center; gap:16px; width:100%; min-height:62px; padding:10px 0; text-align:left;
  border-bottom:1px solid var(--rule); transition:background .15s;}
.row-link:hover{background:var(--raise);}
.row-link .t{flex:1; min-width:0;}
.row-link .t b{display:block; font-size:16px; font-weight:500;}
.row-link .t span{display:block; font-size:13px; color:var(--muted);}
.row-link .n{text-align:right; font-family:var(--serif); font-size:24px; font-weight:300; line-height:1; font-variant-numeric:tabular-nums;}
.row-link .n small{display:block; font-family:var(--sans); font-size:11px; color:var(--muted); margin-top:3px;}
.row-link .chev{width:16px; height:16px; flex:none; color:var(--muted);}

/* ---------- home ---------- */
.big-count{display:flex; align-items:baseline; gap:8px; margin:0;}
.big-count b{font-family:var(--serif); font-size:64px; font-weight:300; line-height:1; letter-spacing:-1.5px; font-variant-numeric:tabular-nums;}
.big-count span{font-family:var(--serif); font-size:28px; font-weight:300; color:var(--muted);}
.hero{margin:8px 0 24px;}
.hero p.sub{font-size:15px; margin-top:8px;}
.scale{position:relative; margin:20px 0 12px; height:8px;}
.scale .track{height:8px; border:1px solid var(--ink); border-radius:var(--r); overflow:hidden;}
.scale .track i{display:block; height:100%; width:0; background:var(--dom); transition:width .9s var(--ease);}
.scale .tick{position:absolute; top:-4px; width:2px; height:16px; background:var(--acc);}
.scale .lbl{position:absolute; top:13px; font-size:11px; color:var(--muted); white-space:nowrap;}
.scale .lbl.mid{transform:translateX(-50%);}
.scale .lbl.end{right:0;}
.levelLine{font-size:13px; color:var(--muted); margin:0;}
.todayLine{margin:8px 0 0;}
.todayLine b{font-weight:600;}
.welcome{font-size:15px; margin:12px 0 0;}
.fotd{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--rule);}
.fotd blockquote{margin:0; font-family:var(--serif); font-style:italic; font-size:20px; font-weight:300; line-height:1.4;}
.fotd figcaption{margin-top:8px; font-size:13px; color:var(--muted);}
.fotd figcaption button{color:var(--dom); font-weight:600; font-size:13px; min-height:44px;}
.homeAtlas{display:none;}

/* ---------- session ---------- */
#app:has(#progress) #topbar{border-bottom-color:transparent;}
#progress{height:2px; background:var(--rule); margin:-20px -24px 20px;}
#progress i{display:block; height:100%; background:var(--dom); transition:width .4s var(--ease);}
.prompt{margin:0 0 16px;}
.prompt .flag{font-size:96px; line-height:1.1; display:block; margin:4px 0 8px;}
#main .prompt .flag{animation:flagIn .45s var(--ease) both;}
@keyframes flagIn{from{opacity:0; transform:scale(.85)}to{opacity:1; transform:none}}
.prompt .q{font-size:17px; margin-top:4px;}
.prompt .big{font-family:var(--serif); font-size:32px; font-weight:300; line-height:1.15;}
.prompt .big b{font-weight:600;}
.prompt.centered{text-align:center;}
.tag{display:inline-block; font-size:13px; font-weight:600; color:var(--dom); margin-bottom:4px;}
.tag.dom{color:var(--ink);}
.opt{display:block; width:100%; min-height:54px; padding:14px 16px; margin-top:8px; text-align:left;
  border:1px solid var(--rule); border-radius:var(--r); font-size:16px; font-weight:500; transition:background .15s,border-color .15s,color .15s;}
.opt:hover{border-color:var(--ink);}
.opt.good{background:var(--dom); border-color:var(--dom); color:var(--on-dom);}
.opt.bad{background:var(--acc); border-color:var(--acc); color:var(--on-dom);}
#main .opt.good{animation:pop .35s var(--ease);} #main .opt.bad{animation:shake .4s;}
@keyframes pop{40%{transform:scale(1.02)}}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.typeInput{width:100%; min-height:56px; padding:12px 4px; font-size:22px; font-family:var(--serif); text-align:center;
  background:transparent; border:0; border-bottom:2px solid var(--ink); border-radius:0; outline:none; transition:border-color .2s;}
.typeInput:focus{border-color:var(--dom);}
.typeInput.good{border-color:var(--dom); color:var(--dom);}
.typeInput.bad{border-color:var(--acc); color:var(--acc);}
#main .typeInput.bad{animation:shake .4s;}
.answerLine{display:flex; align-items:center; gap:10px; margin-top:16px; min-height:30px;
  font-family:var(--serif); font-size:24px; font-weight:300; line-height:1.2;}
.answerLine:empty{display:none;}
.answerLine svg{width:22px; height:22px; flex:none;}
.answerLine.good svg{color:var(--dom);} .answerLine.bad svg,.answerLine.warn svg{color:var(--acc);}
.studyStrip{margin-top:12px;}
.studyStrip .capLine{margin:0;}
.studyStrip .capLine span{color:var(--muted);}
.studyStrip .capLine b{font-weight:600;}
.repairCard{margin-top:20px; padding-top:16px; border-top:1px solid var(--rule);}
.repairCard h2{font-family:var(--serif); font-size:20px; font-weight:300; margin:0 0 2px;}
.repairCard p{margin:0; color:var(--muted); font-size:13px;}
.flagCompare{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; margin-top:12px;}
.flagCompare .flagFact{text-align:center; padding:8px 4px; border:1px solid var(--rule); border-radius:var(--r);}
.flagCompare .flagFact.target{border-color:var(--dom); box-shadow:inset 0 0 0 1px var(--dom);}
.flagCompare .emoji{display:block; font-size:30px; line-height:1.15;}
.flagCompare .name{display:block; font-size:12px; margin-top:4px; line-height:1.2;}
/* find on the map: prompt, map and answer panel; side by side on desktop */
.findGrid{display:grid; grid-template-areas:"prompt" "map" "panel";}
.findGrid .fPrompt{grid-area:prompt;} .findGrid .fMap{grid-area:map; margin:0 -24px;} .findGrid .fPanel{grid-area:panel;}

/* ---------- map ---------- */
.mapWrap{position:relative; overflow:hidden; background:var(--ocean);}
.mapWrap svg{display:block; width:100%; height:auto; transform-origin:0 0; will-change:transform;}
.mapWrap.inter svg{touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none;}
.mapBar{-webkit-user-select:none; user-select:none;}
.mapWrap.inter svg:active{cursor:grabbing;}
.mapWrap.tall svg{height:clamp(280px,48vh,480px);}
.map .ocean{fill:var(--ocean);}
.map .neutral{fill:var(--neutral); stroke:var(--border); stroke-width:.5; vector-effect:non-scaling-stroke;}
.map .land{fill:var(--land); stroke:var(--border); stroke-width:.7; vector-effect:non-scaling-stroke; transition:fill .25s;}
.map .land.dot{fill:var(--muted); stroke:var(--ground); stroke-width:1.5;}   /* microstates & islands: must read on pale water */
.map .halo{fill:none; stroke:var(--muted); stroke-width:1.2; stroke-opacity:.7; vector-effect:non-scaling-stroke; pointer-events:none;}
.map.zin .halo{display:none;}
.map.inter .land{cursor:pointer;}
@media(hover:hover){.map.inter .land:hover{fill:var(--land-hover);}}
.map .land.sel{fill:var(--land-hover); stroke:var(--ink); stroke-width:2;}
.map .land.target{fill:var(--dom); stroke:var(--dom); stroke-width:1;}
.map .land.hit{fill:var(--dom); stroke:var(--dom);}
.map .land.miss{fill:var(--acc); stroke:var(--acc);}
.map .land.near{fill:var(--s-weak); stroke:var(--acc); stroke-width:1.2;}
.map .marker{fill:var(--acc); stroke:var(--ground); stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; transform-box:fill-box; transform-origin:center;}
.map .marker.pop{animation:markerPop .3s var(--ease);}
@keyframes markerPop{from{transform:scale(2.2); opacity:.3}to{transform:scale(1); opacity:1}}
.mapBar{display:flex; align-items:center; gap:4px; min-height:48px; padding:0 16px; border-bottom:1px solid var(--rule);}
.mapBar button{min-width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:400;}
.mapBar button.txt{font-size:13px; font-weight:600; padding:0 8px;}
.mapBar button:hover{background:var(--raise);}
.mapBar .mapHint{flex:1; text-align:right; font-size:12px; color:var(--muted);}
.legend{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); margin:10px 0 0;}
.legend span{display:inline-flex; align-items:center; gap:6px;}
.legend i{width:12px; height:12px; border-radius:var(--r); display:inline-block; box-shadow:inset 0 0 0 1px var(--border);}
.bleed{margin-left:-24px; margin-right:-24px;}

/* ---------- stats ---------- */
.figures{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:12px 0; margin:20px 0;}
.figures > div{padding:0 12px;} .figures > div:first-child{padding-left:0;}
.figures > div + div{border-left:1px solid var(--rule);}
.figures b{display:block; font-family:var(--serif); font-size:36px; font-weight:300; line-height:1.1; font-variant-numeric:tabular-nums;}
.figures b.acc{color:var(--acc);}
.figures + .card{border-top:0; padding-top:0;}
.figures span{font-size:12px; color:var(--muted);}
.regionBar{display:block; width:100%; text-align:left; padding:8px 0; min-height:44px;}
.regionBar:hover{background:var(--raise);}
.regionBar .lbl{display:flex; justify-content:space-between; align-items:baseline;}
.regionBar .lbl span:first-child{font-weight:500;}
.regionBar .lbl span:last-child{font-size:13px; color:var(--muted);}
.regionBar .lbl b{color:var(--ink); font-weight:600;}
.regionBar .track{height:4px; margin-top:4px; background:var(--rule); border-radius:var(--r); overflow:hidden;}
.regionBar .fill{height:100%; background:var(--dom);}
.weakItem{display:flex; align-items:center; gap:12px; width:100%; text-align:left; min-height:48px; padding:8px 0; border-bottom:1px solid var(--rule);}
.weakItem:hover{background:var(--raise);}
.weakItem .fl{font-size:22px;}
.weakItem .meta{margin-left:auto; color:var(--muted); font-size:12px; text-align:right;}
.rankBar{height:4px; background:var(--rule); border-radius:var(--r); overflow:hidden; margin-top:8px;}
.rankBar i{display:block; height:100%; width:0; background:var(--dom); transition:width .9s var(--ease);}
.cal{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,12px); gap:3px; justify-content:start; margin:12px 0 4px;}
.cal i{width:12px; height:12px; border-radius:var(--r); background:var(--rule);}
.cal i.goldRing{box-shadow:inset 0 0 0 1.5px var(--acc);}
.cal i.ice{background:var(--s1);}
.badgeList{display:grid; grid-template-columns:1fr; margin-top:8px;}
.badgeItem{display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule);}
.badgeItem svg{width:20px; height:20px; flex:none; margin-top:2px; color:var(--dom);}
.badgeItem.off{color:var(--muted);} .badgeItem.off svg{color:var(--rule);}
.badgeItem b{display:block; font-weight:600;} .badgeItem span{display:block; font-size:13px; color:var(--muted);}
.badgeItem .when{margin-left:auto; font-size:12px; white-space:nowrap;}
.boxBadge{display:inline-block; min-width:22px; text-align:center; font-size:11px; font-weight:600; border-radius:var(--r); padding:2px 5px; color:var(--ink);}

/* ---------- settings ---------- */
.setRow{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule);}
.setRow:last-child{border-bottom:none;}
.setRow label{font-size:15px;}
.setRow .hint{display:block; font-size:13px; color:var(--muted); margin-top:2px;}
select,.stepBtn{background:var(--ground); border:1px solid var(--ink); border-radius:var(--r); padding:8px 10px; font-size:15px; min-height:44px;}
.stepper{display:flex; align-items:center; gap:12px;}
.stepper b{min-width:28px; text-align:center; font-variant-numeric:tabular-nums; font-weight:600;}
.stepBtn{width:44px; font-size:18px;}
.switch{position:relative; width:52px; height:30px; flex:none; border:1px solid var(--ink); border-radius:var(--r); transition:background .2s;}
.switch.on{background:var(--dom); border-color:var(--dom);}
.switch i{position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:var(--r); background:var(--muted); transition:left .2s var(--ease),background .2s;}
.switch.on i{left:25px; background:var(--on-dom);}
.inspRow{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--rule); font-size:13px;}
.inspRow .meta{margin-left:auto; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; text-align:right;}
.debugBanner{border:1px solid var(--acc); color:var(--acc); background:var(--ground); border-radius:var(--r); padding:10px 12px; font-size:13px; margin-bottom:16px;}
.versionLine{padding:16px 0; min-height:44px;}

/* ---------- blitz, chips, lists ---------- */
.blitzHud{display:flex; align-items:baseline; justify-content:space-between; font-variant-numeric:tabular-nums;}
.blitzHud b{font-family:var(--serif); font-size:32px; font-weight:300;}
.blitzHud span{font-size:13px; color:var(--muted);}
.timerTrack{height:4px; background:var(--rule); overflow:hidden; margin:8px 0 16px;}
.timerTrack i{display:block; height:100%; background:var(--acc); transition:width .1s linear;}
.chipRow{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px;}
.chip{min-height:44px; padding:8px 14px; border:1px solid var(--rule); border-radius:var(--r); font-size:14px; font-weight:500; transition:border-color .15s,background .15s;}
.chip:hover{border-color:var(--ink);}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--ground);}
.pathRow{display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule);}
.pathRow .pathBody{flex:1; min-width:0;}
.pathRow b{display:block; font-size:16px; font-weight:500;}
.pathRow .pathBtn{width:auto; margin:0; min-height:44px; padding:8px 16px; font-size:14px;}
.missItem{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule); font-size:14px;}
.missItem .fl{font-size:22px;} .missItem .said{margin-left:auto; color:var(--acc); font-size:13px;}
.summaryBig{padding:12px 0 8px; margin-bottom:24px;}
.summaryBig .pctBig{font-family:var(--serif); font-size:88px; font-weight:300; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums;}
.summaryBig .pctBig small{font-size:32px; color:var(--muted); letter-spacing:0;}
.summaryBig .em{font-size:72px; line-height:1.1;}
.summaryBig h2{font-family:var(--serif); font-size:28px; font-weight:300; margin:12px 0 4px; line-height:1.2;}
.summaryBig p{color:var(--muted); margin:0;}
.spin{width:100%; height:2px; margin:40px 0; background:linear-gradient(90deg,transparent,var(--dom),transparent); background-size:50% 100%;
  background-repeat:no-repeat; animation:sp 1s linear infinite;}
@keyframes sp{from{background-position:-50% 0}to{background-position:150% 0}}

/* ---------- the Route ---------- */
.segs{display:grid; gap:3px; margin:8px 0 6px;}
.segs i{height:8px; border-radius:var(--r);}
.legLink .t b{margin-bottom:2px;}
.legLink .segs{margin:8px 0 6px;}
.hereLeg{margin:20px 0 8px;}
.hereLeg .tag{margin-bottom:0;}
.legItem{display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:8px 0; text-align:left; border-bottom:1px solid var(--rule);}
.legItem:hover{background:var(--raise);}
.legItem .num{width:30px; flex:none; font-family:var(--serif); font-size:22px; font-weight:300; color:var(--muted); font-variant-numeric:tabular-nums;}
.legItem.here .num{color:var(--acc);}
.legItem .t{flex:1; min-width:0;}
.legItem .t b{display:block; font-weight:500;}
.legItem .t span{display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.legItem .st{font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap;}
.legItem .st.charted,.legItem .st.passed,.legItem .st.placed{color:var(--dom);}
.legItem.here .st{color:var(--acc);}
.map .route{pointer-events:none;}
.map.routeMap .land.dot{fill:var(--land); stroke:var(--border); stroke-width:.8;}
.map .routeDone{fill:none; stroke:var(--dom); stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke;}
.map .routeTodo{fill:none; stroke:var(--ink); stroke-opacity:.5; stroke-width:1.3; stroke-dasharray:3 4; stroke-linecap:round; vector-effect:non-scaling-stroke;}
.map .stop{fill:var(--ground); stroke:var(--ink); stroke-opacity:.6; stroke-width:1.2; vector-effect:non-scaling-stroke;}
.map .stop.done{fill:var(--dom); stroke:var(--ground); stroke-opacity:1;}
.map .stop.here{fill:var(--acc); stroke:var(--ground); stroke-opacity:1; stroke-width:2;}
.map .hereRing{fill:none; stroke:var(--acc); stroke-width:1.5; vector-effect:non-scaling-stroke;}
.map .land.inleg{stroke:var(--ink); stroke-opacity:.7; stroke-width:1.2;}
.steps{list-style:none; margin:16px 0 0; padding:0;}
.step{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule);}
.step .mark{width:26px; height:26px; flex:none; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--rule); color:var(--on-dom);}
.step .mark svg{width:16px; height:16px;}
.step.done .mark{background:var(--dom); box-shadow:none;}
.step.active .mark{box-shadow:inset 0 0 0 1.5px var(--ink);}
.step b{display:block; font-weight:600;}
.step span span,.step > span:last-child > span{display:block; font-size:13px; color:var(--muted);}
.step:not(.done):not(.active) b{color:var(--muted);}

/* ---------- toast, XP, stamp ---------- */
#toast{position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 68px); transform:translate(-50%,-8px); z-index:50;
  background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:var(--r); font-size:14px; font-weight:500;
  opacity:0; transition:opacity .25s,transform .25s var(--ease); pointer-events:none; max-width:calc(100% - 48px); text-align:center;}
#toast.show{opacity:1; transform:translate(-50%,0);}
.xpFloat{position:fixed; right:24px; top:calc(env(safe-area-inset-top) + 116px); z-index:55; pointer-events:none;
  font-weight:600; font-size:14px; color:var(--dom); font-variant-numeric:tabular-nums; animation:xpUp 1s var(--ease) forwards;}
@keyframes xpUp{0%{opacity:0; transform:translateY(6px)}20%{opacity:1; transform:none}100%{opacity:0; transform:translateY(-24px)}}
/* the one celebration: an atlas stamp, inked in vermilion */
.stamp{position:fixed; left:50%; top:40%; z-index:60; pointer-events:none; width:168px; height:168px; border-radius:50%;
  border:3px double var(--acc); color:var(--acc); background:color-mix(in srgb,var(--ground) 88%,transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transform:translate(-50%,-50%) rotate(-12deg); animation:stamp 1.9s var(--ease) forwards;}
.stamp span{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;}
.stamp b{font-family:var(--serif); font-size:40px; font-weight:600; line-height:1.05;}
@keyframes stamp{0%{opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(1.6)}12%{opacity:1; transform:translate(-50%,-50%) rotate(-12deg) scale(.96)}
  18%{transform:translate(-50%,-50%) rotate(-12deg) scale(1)}80%{opacity:1}100%{opacity:0; transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}

/* ---------- country page (sheet) ---------- */
.sheetBack{position:fixed; inset:0; z-index:40; background:rgba(18,20,22,0); transition:background .25s;}
.sheetBack.open{background:rgba(18,20,22,.45);}
.sheet{position:absolute; left:50%; bottom:0; width:min(600px,100%); max-height:90dvh; overflow:auto; transform:translate(-50%,100%);
  background:var(--ground); border-top:1px solid var(--rule); border-radius:var(--r) var(--r) 0 0;
  padding:12px 24px calc(env(safe-area-inset-bottom) + 24px); transition:transform .3s var(--ease);}
.sheetBack.open .sheet{transform:translate(-50%,0);}
.sheetGrip{width:36px; height:3px; background:var(--rule); margin:0 auto 12px;}
.sheetX{position:absolute; top:8px; right:12px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;}
.sheetX svg{width:18px; height:18px;}
.sheetHead{display:flex; align-items:center; gap:16px; padding-right:44px;}
.sheetFlag{font-size:56px; line-height:1;}
.sheetTitle{flex:1; min-width:0;}
.sheetTitle h2{margin:0; font-family:var(--serif); font-size:32px; font-weight:300; line-height:1.1;}
.strengthTag{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; margin-top:4px;}
.strengthTag i{width:12px; height:12px; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--border);}
.sheetFact{margin:16px 0 4px;}
.factRows{margin:12px 0;}
.factRow{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; padding:10px 0; border-bottom:1px solid var(--rule); font-size:14px;}
.factRow .fl{font-weight:500;}
.pips{display:flex; gap:3px;} .pips i{width:14px; height:6px; border-radius:var(--r); background:var(--rule);}
.factRow .meta{grid-column:1 / -1; color:var(--muted); font-size:12px;}
.sheetMap{margin:8px -24px;}
.sheetLbl{margin:20px 0 0; font-family:var(--serif); font-size:20px; font-weight:300;}

/* ---------- desktop ---------- */
@media (min-width:1024px){
  #topbar{min-height:64px; padding:0 48px; gap:40px;}
  #topbar h1{font-size:22px;}
  #tabbar{position:static; order:2; border:0; padding:0; gap:32px; background:none;}
  #tabbar button{flex:none; flex-direction:row; min-height:64px; font-size:14px; border-bottom:2px solid transparent;}
  #tabbar button::before{display:none;}
  #tabbar button.on{border-bottom-color:var(--dom);}
  #topRight{order:3;}
  #main{padding:40px 48px 64px; max-width:700px;}
  #main[data-view=home],#main[data-view=stats],#main.wide{max-width:1280px;}
  #progress{margin:-40px -48px 32px;}
  .homeGrid{display:grid; grid-template-columns:440px minmax(0,1fr); gap:72px; align-items:start;}
  .homeGrid > *{min-width:0;}
  .homeAtlas{display:block;}
  .big-count b{font-size:96px; letter-spacing:-2.5px;}
  .big-count span{font-size:36px;}
  .card h2,.sec{font-size:32px;}
  .fotd blockquote{font-size:24px;}
  .bleed{margin-left:0; margin-right:0;}
  .statsGrid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:64px; align-items:start;}
  .statsGrid > div > .card:first-child{border-top:0; padding-top:4px;}
  .routeGrid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:start;}
  .routeGrid .hereLeg{margin-top:0;}
  .findGrid{grid-template-columns:minmax(0,1fr) 380px; grid-template-areas:"map prompt" "map panel"; grid-template-rows:auto 1fr;
    margin:-32px -48px -64px; min-height:calc(100dvh - 66px);}
  .findGrid .fMap{margin:0; border-right:1px solid var(--rule); display:flex; flex-direction:column;}
  .findGrid .fMap .mapWrap.tall svg{height:calc(100dvh - 66px - 49px);}
  .findGrid .fMap .mapBar{border-bottom:0; border-top:1px solid var(--rule);}
  .findGrid .fPrompt{padding:40px 40px 0;} .findGrid .fPanel{padding:0 40px 40px;}
  .mapWrap.tall svg{height:clamp(360px,62vh,640px);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; animation-delay:0s !important;}
}