/* Design picks from review/design/compare.html, applied in order. */

/* == 01-hero.taste == */
/* 01 Title page, Taste: asymmetric hero. The globe figure dissolves into the grid (display:contents) so the
   "what I tapped" readout moves into the left column under the headline, the hint under it, and the globe owns the whole right side. */
.hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"text globe" "info globe" "tools globe";grid-template-rows:auto auto 1fr;align-items:start;row-gap:0;margin-bottom:34px}
.hero-text{grid-area:text;padding-top:clamp(0px,3vw,40px)}
.globe,.globe figcaption{display:contents}
.globe canvas{grid-area:globe;justify-self:end;width:min(100%,500px)}
.globe-info{grid-area:info;min-height:4.6rem;align-self:start;margin-top:1.6rem;max-width:30rem}
.globe-info:empty{border-color:var(--ink);border-bottom-color:transparent;min-height:0;height:0;padding:0;margin-top:1.6rem}
.globe-tools{grid-area:tools;margin-top:.9rem}
.gi-flag{width:72px}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;grid-template-areas:"text" "globe" "info" "tools"}
  .globe canvas{justify-self:center;width:min(94%,380px)}
  .globe-info{margin-top:.6rem;min-height:0}
  .globe-info:empty{display:none}
}

/* == 02-select.impeccable == */
/* 02 Selection controls, Impeccable: the red X read as "struck out". Checked = ink fill + paper tick.
   Region/area/length chips become printed tag-boxes that invert when chosen, so the state is legible without reading colour. */
.deck input:checked+.deck-body::before,.region input[type=checkbox]:checked+span::before,.toggle input:checked+span::before{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.4-6.8' fill='none' stroke='%23f8f4e7' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/100% no-repeat}
.region span::before{display:none}
.regions,.length{gap:.5rem}
.region span{border:1px solid var(--ink);padding:.3rem .85rem;font:400 1.02rem var(--sc);letter-spacing:.04em;color:var(--ink);background:transparent;min-height:36px;transition:background .15s,color .15s}
.region:hover span{background:var(--soft)}
.region input:checked+span,.region:hover input:checked+span{background:var(--ink);color:var(--paper-hi)}
.region input:focus-visible+span{outline-offset:2px}
.toggle span{gap:.55rem}

/* == 03 labels: Taste ledger cells + ruled meter, Impeccable darker ink + larger labels == */
.dateline,.stat span,.meter,.answer-label,.deck-tag{letter-spacing:.07em;color:#4a4538}
.dateline{font-size:1.05rem}
.chips{flex-direction:row;gap:1.6rem;text-align:center;align-items:flex-end}
.chip{display:grid;font:400 1.05rem/1 var(--sc);letter-spacing:.09em;color:#4a4538}
.chip b{display:block;margin:0 0 .25rem;font:400 2.2rem/1 var(--disp);color:var(--ink)}
.stat span{font-size:1.12rem}
.meter{align-items:center;border-top:1px solid var(--ink);padding-top:.55rem;font-size:1.2rem;letter-spacing:.08em}
.meter-label{color:var(--red)}
.meter-count{font:400 1.7rem/1 var(--disp);letter-spacing:0;color:var(--ink)}
.meter-bar{margin-top:.5rem}
.answer-label,.deck-tag{font-size:1.12rem}
.rate-ivl{font-size:1.1rem;letter-spacing:.06em;opacity:1;color:#4a4538}

/* == 04-begin.taste == */
/* 04 Begin + progress, Taste: reorder the page so the day's numbers come first ("Today" ledger directly under the hero),
   then one full-width ink bar: Begin on the left, the card count on the right. One decision, one object. */
.stage{display:flex;flex-direction:column}
.hero{order:0}.progress{order:1;margin:0 0 40px;border-top:2px solid var(--ink)}.setup{order:2}
.progress::before{content:"Today";grid-column:1/-1;font:400 1.1rem var(--sc);letter-spacing:.08em;color:var(--red);padding:.55rem 0 0}
.stat:first-child b{color:var(--red)}
.stat b{font-size:3rem}
.go-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0;margin-top:0;padding:0;border:0;box-shadow:none;background:var(--ink);color:var(--paper-hi)}
.go-row .go{padding:1.3rem 3rem;font-size:1.5rem;background:var(--red);box-shadow:none}
.go-row .go:hover:not(:disabled){background:var(--paper-hi);color:var(--ink)}
.go-row .hint{color:#e1dac4;padding:0 1.6rem;text-align:right;font-size:1.05rem}
@media (max-width:880px){.go-row{display:grid;grid-template-columns:auto 1fr;padding:0;bottom:0}.go-row .go{padding:0 1.6rem;min-height:56px}.go-row .hint{padding:0 1rem;font-size:.95rem}}

/* == 05-feedback.taste == */
/* 05 Answer feedback, Taste: tinted slip of paper. The whole feedback block takes a faint wash (green / vermilion) with a big italic
   verdict, so you read right/wrong peripherally before reading a word. */
:root{--ok:#355f4a}
.feedback{margin-top:1.1rem;padding:1rem 1.2rem 1.2rem;background:rgba(26,23,18,.04)}
.card[data-state=right] .feedback{background:rgba(53,95,74,.12);box-shadow:inset 0 3px 0 var(--ok)}
.card[data-state=wrong] .feedback{background:rgba(195,50,31,.1);box-shadow:inset 0 3px 0 var(--red)}
.verdict{font:italic 400 2.3rem/1 var(--disp);letter-spacing:0;margin-bottom:.35rem}
.card[data-state=right] .verdict{color:var(--ok)}
.card[data-state=wrong] .verdict{color:var(--red)}
.card[data-state=right] .answer{color:var(--ink)}
.feedback .next{margin-top:.9rem}
@media (prefers-reduced-motion:no-preference){.feedback:not([hidden]){animation:slip .35s cubic-bezier(.16,1,.3,1) backwards}@keyframes slip{from{opacity:0;transform:translateY(6px)}}}

/* == 06-rate.taste == */
/* 06 Rating buttons, Taste: the 80% case gets the big button. Good is a full-width ink bar with its interval and key; Again / Hard / Easy
   share a quieter row beneath. Hierarchy by size, not by colour. */
.rate{grid-template-columns:repeat(3,1fr);border:0;gap:10px}
.rate button{border:1px solid var(--ink)!important;min-height:58px;padding:.5rem}
.rate-good{grid-column:1/-1;order:-1;background:var(--ink)!important;color:var(--paper-hi);min-height:78px!important;flex-direction:row!important;gap:.9rem!important;justify-content:center}
.rate-good .rate-name{font-size:1.9rem;order:1}.rate-good .rate-ivl{order:2;font-size:1.1rem}.rate-good kbd{order:3}
.rate-good:hover{background:var(--red)!important}
.rate-again{border-color:var(--red)!important;color:var(--red)}.rate-again:hover{color:var(--paper-hi)}
.rate-ivl{opacity:1;font-size:1.02rem}
@media (max-width:880px){.rate button{min-height:60px}.rate-good{min-height:72px!important}}

/* == 07-mobile-chrome.taste == */
/* 07 Mobile play chrome, Taste: during play the masthead is dropped to a slim brand strip and the progress meter becomes the sticky
   top bar (always know where you are). Answer jumps above the map, framed as a banner. */
@media (max-width:880px){
  .app[data-screen=play] .top,.app[data-screen=done] .top{grid-template-columns:1fr;padding:8px 0 6px;box-shadow:none;border-bottom-width:1px}
  .app[data-screen=play] .dateline,.app[data-screen=play] .chips,.app[data-screen=done] .dateline,.app[data-screen=done] .chips{display:none}
  .app[data-screen=play] .brand{font-size:1.9rem;justify-self:center}
  .app[data-screen=play] .stage{padding-top:0}
  .app[data-screen=play] .meter{position:sticky;top:0;z-index:25;background:var(--paper);padding:10px 0 8px;margin:0;border-bottom:1px solid var(--ink)}
  .card[data-state=back],.card[data-state=right],.card[data-state=wrong]{grid-template-areas:"prompt" "reveal" "fb" "vis" "act"}
  .card[data-state=back]>.reveal{background:var(--paper-hi);box-shadow:0 0 0 1px var(--ink);padding:.9rem 1rem;margin:0 0 1.2rem;border:0}
  .card>.prompt{padding-top:.9rem}
}

/* == 08-zoom.impeccable == */
/* 08 Map zoom controls, Impeccable: three 44px buttons sit on top of the map's most important corner (the highlighted country is often up there).
   Move them to the caption row, bottom-right of the frame, where there is only text. */
.visual-map .zoom{top:auto;bottom:10px;right:12px}
.visual-map .zoom-hint{padding-right:8.5rem;min-height:2.4rem;display:flex;align-items:center;margin:.4rem 0 0}
.zoom button{min-width:30px;height:30px}
.zoom-reset{padding:0 .6rem!important}
@media (pointer:coarse),(max-width:880px){.zoom button{min-width:44px;height:44px}.visual-map .zoom{bottom:8px;right:10px}.visual-map .zoom-hint{padding-right:0;padding-bottom:50px;min-height:0;display:block}}
@media (max-width:880px){.visual-globe .zoom{top:8px;right:8px;bottom:auto}}

/* == 09-filltools.taste == */
/* 09 Fill-the-map tools, Taste: a real toolbar. One bordered strip with three equal cells (Dots, Flat map, Give up), 44px tall, shared hairlines,
   so the controls are findable by thumb and read as one instrument rather than three loose buttons. */
.card-fill .fill-bar{display:flex;flex-wrap:wrap;gap:12px 0}
.card-fill .fill-form{flex:1 0 100%}
.card-fill .fill-tools{display:contents}
.card-fill .fill-bar .toggle,.card-fill .fill-bar .view-toggle,.card-fill [data-act=giveup]{flex:1 1 auto;min-width:0;min-height:44px;border:1px solid var(--ink);margin:0 0 0 -1px;justify-content:center;padding:0 .4rem;background:transparent;display:inline-flex;align-items:center;font:400 .9rem/1.1 var(--sc);letter-spacing:.02em;text-align:center;white-space:normal}
.card-fill .fill-bar .toggle{order:1;margin-left:0}.card-fill .view-toggle{order:2}.card-fill [data-act=giveup]{order:3;color:var(--red)}
.card-fill .toggle span{font:400 .9rem/1.1 var(--sc);letter-spacing:.02em;color:var(--ink);padding:0;min-height:0;gap:.35rem}
.card-fill .fill-bar .toggle{flex-grow:1.4}
.card-fill [data-act=giveup]:hover{background:var(--red);color:var(--paper-hi)}
.card-fill .fill-msg{order:4;flex:1 0 100%}

/* == 10-input.impeccable == */
/* 10 Answer field, Impeccable: placeholder #8d8574 on paper is ~3.2:1 (fails AA) and the field is a bare line, so it looks like a heading.
   Give it a paper-white well with a heavy base rule, a darker placeholder, and a focus state that changes more than hue. */
.answer-form input,.fill-form input{background:var(--paper-hi);border:1px solid var(--ink);border-bottom-width:3px;padding:.5rem .8rem;font-size:1.6rem}
.answer-form input::placeholder,.fill-form input::placeholder{color:#6b6454;opacity:1}
.answer-form input:focus,.fill-form input:focus{border-color:var(--ink);border-bottom-color:var(--red);box-shadow:0 0 0 3px rgba(195,50,31,.28);caret-color:var(--red)}
.fill-form{align-items:stretch}

/* == 11-results.taste == */
/* 11 Result screens, Taste: the score becomes a framed plaque (same double-rule as the map frames) and misses become a grid of specimens:
   big flag, name beneath, what you typed in small italic. Scannable at a glance, no table rows. */
.done{max-width:900px}
.done h2{display:inline-flex;align-items:baseline;justify-self:start;padding:.25em .55em .3em;background:var(--paper-hi);box-shadow:0 0 0 1px var(--ink),0 0 0 5px var(--paper-hi),0 0 0 6px var(--ink)}
.done .lede{margin-top:.8rem;font-size:1.2rem}
.missed{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.6rem 1.4rem;margin-top:1rem}
.missed li{display:grid;grid-template-columns:1fr;justify-items:start;gap:.15rem;border-bottom:0;padding:0}
.missed .flag.tiny{width:96px;outline-offset:3px;margin-bottom:.45rem}
.m-q{display:none}.m-a{font-size:1.35rem;line-height:1.15}.m-g{margin-left:0;font-size:.98rem}
.done-actions .go{padding-left:2rem;padding-right:2rem}
/* fill-the-map result: framed plaque */
.result{background:var(--paper-hi);box-shadow:0 0 0 1px var(--ink),0 0 0 5px var(--paper-hi),0 0 0 6px var(--ink);padding:1rem 1.4rem 1.2rem;gap:.5rem}
.result-score b{font-size:5rem}
.result-sub{font-size:1.2rem}

/* == 12-motion.impeccable == */
/* 12 Screen transitions, Impeccable: every screen swap is a hard DOM replace. Add one restrained move: the page "settles" (opacity + 8px rise, 380ms,
   ease-out-quart) and the revealed answer inks in. Transform/opacity only, off under prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .stage>*{animation:settle .38s cubic-bezier(.25,1,.5,1) backwards}
  .reveal:not([hidden]),.feedback:not([hidden]){animation:inkin .32s cubic-bezier(.25,1,.5,1) backwards}
  @keyframes settle{from{opacity:0;transform:translateY(8px)}}
  @keyframes inkin{from{opacity:0;transform:translateY(4px)}}
}

/* == Hidden scrollbars (scrolling still works) == */
html,body,.found-list{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none;width:0;height:0}

/* == Skeleton loaders == */
:root{--sk:rgba(26,23,18,.07);--sk-hi:rgba(26,23,18,.15)}
.sk{background:linear-gradient(100deg,var(--sk) 30%,var(--sk-hi) 50%,var(--sk) 70%) 0 0/250% 100%;border-radius:2px;display:block}
@media (prefers-reduced-motion:no-preference){.sk,img.flag:not(.loaded),.globe canvas:not(.ready),.fill-globe:not(.ready){animation:shimmer 1.4s linear infinite}}
@keyframes shimmer{to{background-position:-150% 0}}
img.flag:not(.loaded){background:linear-gradient(100deg,var(--sk) 30%,var(--sk-hi) 50%,var(--sk) 70%) 0 0/250% 100%;min-height:2rem}
.globe canvas:not(.ready),.fill-globe:not(.ready){background:radial-gradient(circle closest-side,var(--sk-hi) 0,var(--sk) 96%,transparent 97%) center/100% 100% no-repeat}
.sk-page{display:grid;gap:1.6rem;padding:1.2rem 0}
.sk-line{height:1.1rem}.sk-title{height:4.2rem;width:min(30rem,80%)}.sk-sub{height:1.1rem;width:min(22rem,60%)}
.sk-globe{aspect-ratio:1;width:min(100%,420px);border-radius:50%;justify-self:center}
.sk-row{display:grid;gap:1rem;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
@media (max-width:880px){.sk-row{grid-template-columns:1fr}}