/* The app shell: design tokens, and the navigation every screen shares.
 *
 * Tokens lived in three copies — the map template, review.css and browse.css —
 * and had already drifted (review.css had no --grid, browse.css no --c-verb).
 * They live here now; the map template still carries its own because it ships
 * as one spliced standalone file with no stylesheet to link.
 *
 * NAVIGATION IS THE POINT OF THIS FILE. There are four screens and no way to
 * get between them on a phone: the links sit in a desktop header that wraps to
 * three rows at 375px. So the same markup renders as header links on a wide
 * screen and as a bottom tab bar on a narrow one, where thumbs are.
 */

:root{
  --ground:#EDF0F3; --surface:#FFFFFF; --surface-2:#F5F7F9;
  --ink:#141C24; --ink-2:#3D4A56; --muted:#5A6976; --faint:#8E9BA6;
  --line:#D2DAE1; --line-2:#E3E9ED; --grid:#DCE3E9; --focus:#2A6FB0;
  --again:#C8443A; --hard:#8A6D1D; --good:#4C7D2A; --easy:#2A6FB0;
  --shadow:0 1px 2px rgba(20,28,36,.06), 0 8px 24px rgba(20,28,36,.07);
  /* The knowledge ladder, cold to warm: unknown grey, acquisition blue,
     trouble red, consolidation amber, held knowledge green. Ordered so a row
     of pills reads as a scale even with the labels covered. */
  --k-unseen:#8E9BA6; --k-learning:#2A6FB0; --k-relearning:#C8443A;
  --k-young:#C97A16;  --k-mature:#4C7D2A;  --k-known:#12787E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E141A; --surface:#161F27; --surface-2:#1C262F;
    --ink:#E6EDF3; --ink-2:#C2CEDA; --muted:#8496A3; --faint:#6B7A87;
    --line:#232E39; --line-2:#1D2731; --grid:#1E2831; --focus:#5B9BD8;
    --again:#E8695E; --hard:#B99B45; --good:#7BAE52; --easy:#5B9BD8;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --k-unseen:#6E7A85; --k-learning:#5B9BD8; --k-relearning:#E8695E;
    --k-young:#E0A040;  --k-mature:#7BAE52;  --k-known:#3AA5AB;
  }
}
:root[data-theme="dark"]{
  --ground:#0E141A; --surface:#161F27; --surface-2:#1C262F;
  --ink:#E6EDF3; --ink-2:#C2CEDA; --muted:#8496A3; --faint:#6B7A87;
  --line:#232E39; --line-2:#1D2731; --grid:#1E2831; --focus:#5B9BD8;
  --again:#E8695E; --hard:#B99B45; --good:#7BAE52; --easy:#5B9BD8;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --k-unseen:#6E7A85; --k-learning:#5B9BD8; --k-relearning:#E8695E;
  --k-young:#E0A040;  --k-mature:#7BAE52;  --k-known:#3AA5AB;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{color-scheme:light dark; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 14px/1.5 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Keep content clear of the notch and the home indicator when installed. */
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
a{color:var(--focus)}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
      font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
    white-space:nowrap}

/* ---- shared primitives -------------------------------------------------- */
.btn{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  color:var(--ink-2); font:inherit; font-size:13px; padding:7px 12px;
  text-decoration:none; cursor:pointer; min-height:36px; display:inline-flex;
  align-items:center; justify-content:center; gap:6px; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--surface-2); color:var(--ink)}
.btn:active{transform:translateY(1px)}
/* Destructive. Quiet until hovered, so it does not compete with the actions
   next to it, then unmistakable. */
.btn.danger{color:var(--again); border-color:var(--line)}
.btn.danger:hover{background:var(--again); border-color:var(--again); color:#fff}
.btn.on{border-color:var(--focus); color:var(--focus)}
.btn.primary{background:var(--focus); border-color:var(--focus); color:#fff; font-weight:600}
.btn.primary:hover{background:var(--focus); filter:brightness(1.08); color:#fff}
.btn.danger:hover{border-color:var(--again); color:var(--again)}
input,select,textarea,button{font:inherit}
input[type=search],input[type=text],input[type=number],select,textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  color:var(--ink); font-size:16px; padding:7px 10px; min-height:36px;
  max-width:100%;
}
/* 16px is not a taste choice: iOS Safari zooms the page in on focus for any
   font-size below it, and the zoom is never undone. Desktop gets 13px back. */
@media (min-width:761px){
  input[type=search],input[type=text],input[type=number],select,textarea{font-size:13px}
}
input:focus-visible,select:focus-visible,textarea:focus-visible,
.btn:focus-visible,#tabs a:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
.toast{
  position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%); max-width:calc(100vw - 32px);
  background:var(--ink); color:var(--ground); padding:10px 16px; border-radius:10px;
  font-size:13px; box-shadow:var(--shadow); z-index:60; text-align:center;
}
@media (max-width:760px){ .toast{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))} }
.err{
  margin:16px; padding:13px 15px; border-radius:11px; font-size:14px;
  border:1px solid var(--again); color:var(--again); background:var(--surface);
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}