/* Inter (SIL Open Font License), Latin subset, one variable file per style. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/inter-latin-wght-normal.woff2) format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(vendor/inter-latin-wght-italic.woff2) format('woff2');
}

:root {
  --ink: #16191d;
  --muted: #56606b;
  --line: #d9dde2;
  --bg: #f2f3f5;
  --panel: #ffffff;
  --accent: #d0202e;
  --good: #14713f;
  --good-bg: #e4f4ea;
  --bad-bg: #fde8e9;
  --water: #d5e4ee;
  --water-ink: #1c5a85;
  --land: #fdfcf8;
  --foreign: #e7e5df;
  /* The rest are the same idea in both themes: lines on the map, highlights, and what sits on a filled shape. */
  --bad: #a3141f;
  --border: #4f5761;
  --water-line: #7697ad;
  --foreign-line: #b4b0a6;
  --hl-land: #f9d9da;
  --hl-foreign: #f0cfd0;
  --hl-lake: #ee9aa0;
  --field-line: #7d8590;
  --on-ink: #fff;        /* text on an ink-filled button */
  --on-mark: #fff;       /* the number on a coloured point */
  --halo: #fff;          /* the edge that lifts points and names off the map */
  --dot-face: #fff;      /* the inside of a numbered point */
  --pin-face: rgba(255, 255, 255, 0.8);
}

/* Dark mode. index.html sets data-theme before the first paint: his saved choice, or else what the device prefers. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7e9ec;
  --muted: #9ba4ae;
  --line: #2e343b;
  --bg: #0e1114;
  --panel: #171b1f;
  --accent: #f0525b;
  --good: #4cc38a;
  --good-bg: #133022;
  --bad: #ff8f95;
  --bad-bg: #3b171a;
  --water: #15212b;
  --water-ink: #86bde6;
  --water-line: #5a83a3;
  --land: #262b31;
  --border: #747d87;
  --foreign: #1b1f23;
  --foreign-line: #3a4047;
  --hl-land: #55292e;
  --hl-foreign: #47262a;
  --hl-lake: #a3414a;
  --field-line: #6f7884;
  --on-ink: #101316;
  --on-mark: #101316;
  --halo: #101316;
  --dot-face: #171b1f;
  --pin-face: rgba(16, 19, 22, 0.75);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* stops iPhones inflating text when turned sideways */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font: 15px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, input:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
p, h1, h2, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* ── Top bar ── */
.top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
h1 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.modes, .seg { position: relative; display: flex; gap: 3px; padding: 3px; background: var(--bg); border-radius: 9px; }
.modes button, .seg button {
  position: relative;   /* keeps the words above the pill */
  border: 0;
  border-radius: 7px;
  padding: 6px 14px;
  background: transparent;
  font-weight: 550;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.modes button[aria-pressed="true"], .seg button[aria-pressed="true"] { color: var(--on-ink); }
/* The dark pill behind the pressed button. app.js sets its width and position; .slide makes later moves glide. */
.pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 7px;
  background: var(--ink);
  pointer-events: none;
}
.pill.slide { transition: transform 0.32s cubic-bezier(0.3, 0.75, 0.2, 1), width 0.32s cubic-bezier(0.3, 0.75, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .pill.slide, .modes button, .seg button { transition: none; }
}
.progress { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.progress b { color: var(--ink); }
.link {
  border: 0;
  padding: 2px 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover:not(:disabled) { color: var(--ink); }
.link:disabled { opacity: 0.45; }
/* The dark mode switch. */
.icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
}
.icon:hover, .icon[aria-pressed="true"] { color: var(--ink); border-color: var(--muted); }

/* ── Layout ── */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
}
.map-wrap { position: relative; min-height: 0; background: var(--water); }
#map { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }
#map.placing { cursor: crosshair; }
.zoom { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.zoom button {
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-weight: 600;
}
.zoom button:hover { border-color: var(--muted); }
.panel {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 28px;
  background: var(--panel);
  border-left: 1px solid var(--line);
}

/* ── Map ── */
#map path { vector-effect: non-scaling-stroke; }
.foreign path { fill: var(--foreign); stroke: var(--foreign-line); stroke-width: 0.6; }
.provinces path { fill: var(--land); stroke: var(--border); stroke-width: 0.8; }
.lakes path { fill: var(--water); stroke: var(--water-line); stroke-width: 0.5; }
.rivers path { fill: none; stroke: var(--water-line); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.foreign path.hl { fill: var(--hl-foreign); }
.provinces path.hl { fill: var(--hl-land); }
.lakes path.hl { fill: var(--hl-lake); stroke: var(--accent); }
.rivers path.hl { stroke: var(--accent); stroke-width: 3; }

/* The pin he puts down in Place mode. */
.pin { display: none; pointer-events: none; }
.pin.show { display: block; }
.pin circle { fill: var(--pin-face); stroke: var(--ink); stroke-width: 2.5; }
.pin path { fill: none; stroke: var(--ink); stroke-width: 2; }
.pin.ok circle, .pin.ok path { stroke: var(--good); }
.pin.off circle, .pin.off path { stroke: var(--accent); }

.marker { display: none; }
.marker.show { display: block; cursor: pointer; }
.marker:focus { outline: none; }
.marker .hit { fill: transparent; }
.marker .dot { fill: var(--ink); stroke: var(--halo); stroke-width: 1.5; }
.marker.water .dot { fill: var(--water-ink); }
.marker .ring { pointer-events: none; fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.marker .num { display: none; text-anchor: middle; font: 700 10px Inter, system-ui, sans-serif; fill: var(--ink); pointer-events: none; }
.marker .label {
  display: none;
  font: 600 11.5px Inter, system-ui, sans-serif;
  fill: var(--ink);
  stroke: var(--halo);
  stroke-width: 3px;
  stroke-linejoin: round;
  paint-order: stroke;
  pointer-events: none;
}
.marker.water .label { fill: var(--water-ink); font-style: italic; font-weight: 500; }
.marker .label-province, .marker .label-country { font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.marker.named .label { display: block; }
.marker .label.crowded { visibility: hidden; }

.marker.numbered .dot { r: 9px; fill: var(--dot-face); stroke: var(--ink); }
.marker.numbered .num { display: block; }
.marker.active .dot { fill: var(--accent); stroke: var(--halo); r: 7px; }
.marker.numbered.active .dot { r: 10px; }
.marker.numbered.active .num { fill: var(--on-mark); }
.marker.active .ring { animation: pulse 1.5s ease-out infinite; }
.marker.right .dot { fill: var(--good); stroke: var(--halo); }
/* Shown answers get a dark edge as well as the red, so they don't differ from right ones by colour alone. */
.marker.wrong .dot { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.marker.right .num, .marker.wrong .num { fill: var(--on-mark); }
.marker:focus-visible .dot { stroke: var(--ink); stroke-width: 3.5; }
@keyframes pulse {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .marker.active .ring { animation: none; opacity: 0.8; transform: scale(2); }
}

/* ── Panel pieces ── */
.cats-box { margin: 0 0 16px; }
.cats-box summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cats-box summary::-webkit-details-marker { display: none; }
.cats-box summary span { font-weight: 500; letter-spacing: 0; text-transform: none; }
/* A small chevron: points right when folded, down when open. */
.cats-box summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.cats-box[open] summary::after { transform: translateY(-2px) rotate(45deg); }
.cats { margin: 0; padding: 0; border: 0; }
.cat-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cat-head { width: 54px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--muted);
}
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.chip input:disabled { cursor: default; }
.chip input:disabled + span { opacity: 0.5; }
.cat-actions { display: flex; gap: 14px; margin: 8px 0 0 60px; }

.switch { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 14px; }
.switch input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.tip { margin: 10px 0; color: var(--muted); font-size: 14px; }
.seg { width: fit-content; }
.field { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 14px; }
.field select { padding: 6px 8px; border: 1px solid var(--field-line); border-radius: 7px; background: var(--panel); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.primary, .plain {
  padding: 9px 16px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}
.plain { background: var(--panel); color: var(--ink); border-color: var(--line); }
.primary:disabled { opacity: 0.4; }

/* Study list */
.list-head { margin: 18px 0 6px; font-size: 13px; font-weight: 650; }
.row {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  text-align: left;
}
.row:hover, .row.on { background: var(--bg); }
.row-name { display: block; font-weight: 600; }
.row-hint { display: block; color: var(--muted); font-size: 13px; }
.kind { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }

/* Practice */
#card { margin-top: 16px; }
.meta { color: var(--muted); font-size: 13px; }
.ask { margin: 2px 0 14px; font-size: 21px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
.options { display: grid; gap: 8px; }
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  text-align: left;
  font-weight: 550;
}
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt kbd {
  flex: none;
  width: 22px;
  border-radius: 5px;
  background: var(--bg);
  font: 600 12px/22px Inter, system-ui, sans-serif;
  text-align: center;
  color: var(--muted);
}
.opt.right { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.opt.wrong { border-color: var(--accent); background: var(--bad-bg); color: var(--bad); }
#answer { display: flex; gap: 8px; margin-bottom: 8px; }
#typed, .sheet input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--panel);
}
#typed::placeholder, .sheet input::placeholder { color: var(--muted); opacity: 1; }
#typed:focus, .sheet input:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
#feedback { margin-top: 16px; }
.verdict { font-weight: 650; }
.verdict.right { color: var(--good); }
.verdict.wrong { color: var(--bad); }
.answer { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.hint { color: var(--muted); font-size: 14px; }
#feedback .primary { margin-top: 14px; }
.score { margin: 6px 0 4px; font-size: 16px; }
.score b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.missed { margin: 0 0 4px; font-weight: 600; }
.missed li { padding: 2px 0; }

/* Mock test */
.test-head {
  position: sticky;
  top: -16px;   /* cancels the panel's top padding, so the bar sits flush when stuck */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -18px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.sheet { display: grid; gap: 7px; margin: 14px 0 18px; }
.sheet li { display: flex; align-items: center; gap: 10px; scroll-margin-top: 60px; }
.sheet .num { flex: none; width: 26px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.sheet input { padding: 7px 10px; scroll-margin-top: 60px; }
.sheet.marked li { align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sheet.marked li.wrong { background: var(--bad-bg); }
.sheet.marked li.right .num { color: var(--good); }
.sheet.marked li.wrong .num { color: var(--bad); }
.sheet.marked .answer { font-size: 15px; }
.yours { color: var(--bad); font-size: 13px; }
.sheet.marked li.right .yours { color: var(--muted); }

/* ── Phones ──
   Narrow screens, and short ones (a big phone on its side is wider than 860px). The page is pinned to the part of
   the screen that is really visible (app.js keeps --app-h and --app-top up to date, which matters once the keyboard
   is up), with the map on top and the panel scrolling underneath it. */
@media (max-width: 860px), (max-height: 500px) {
  body { position: fixed; top: var(--app-top, 0px); left: 0; right: 0; height: var(--app-h, 100dvh); }
  .top { gap: 8px 12px; padding: 8px 12px; touch-action: manipulation; }
  h1 { font-size: 15px; }
  .progress { font-size: 13px; }
  .modes { order: 3; width: 100%; }
  .modes button { flex: 1; padding: 11px 4px; }
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 44%) minmax(0, 1fr); }
  .panel {
    padding: 12px 14px 24px;
    border-left: 0;
    border-top: 1px solid var(--line);
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .zoom { left: 8px; bottom: 8px; }
  /* While the keyboard is up there is no room for the top bar. */
  .typing .top { display: none; }
  /* Fields under 16px make an iPhone zoom the whole page when you tap them. */
  #typed, .sheet input, .field select { font-size: 16px; }
  /* Bigger targets for fingers. */
  .seg button { padding: 10px 14px; }
  .chip span { padding: 10px 13px; }
  .link { padding: 10px 0; }
  .switch { min-height: 40px; margin: 6px 0; }
  .cats-box summary { padding: 10px 0; }
  .row { padding: 9px 10px; }
  .test-head { top: -12px; margin: 0 -14px; padding: 8px 14px; }
}

/* A phone on its side: map and panel side by side again, in less room. */
@media (max-width: 860px) and (min-aspect-ratio: 5/4), (max-height: 500px) {
  .modes { order: 0; width: auto; }
  .modes button { flex: none; padding: 8px 12px; }
  .layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 44%); grid-template-rows: minmax(0, 1fr); }
  .panel { border-top: 0; border-left: 1px solid var(--line); }
  /* Sideways with the keyboard up there are only a few lines of room, so the hand-in bar scrolls away. */
  .typing .test-head { position: static; }
}

/* With a finger, "Whole map" does the zooming out, so the minus button goes and less of the map is covered.
   Plus stays for anyone who can't pinch. */
@media (pointer: coarse) {
  #zout { display: none; }
}