/* Geography — one stylesheet, no framework.
   Used mostly on a desktop, also on iPhone and iPad. The base (dark, high
   contrast, big type, the same cards and buttons) is SpellingApp's, so the two
   apps feel like siblings. The map is the light thing on the dark page: an
   atlas page, sea blue, land cream.

   Two layouts for the map screens (quiz and report):
     · wide (≥ 900px): map on the left, staying put while the list on the
       right scrolls past it;
     · narrow: map across the top, held at the top of the screen, list below. */

:root {
  --bg: #0f1b2d;
  --card: #16263d;
  --card-2: #1c3150;
  --line: #2a4366;
  --text: #eaf2fb;
  --muted: #9db1ca;
  --accent: #0ea5e9;
  --accent-2: #0369a1;
  --good: #22c55e;
  --bad: #f87171;
  --warn: #fbbf24;
  --radius: 14px;

  /* the map */
  --sea: #bfdcee;
  --land: #fffaf0;
  --context: #dad7d0;
  --border: #383838;
  --coast: #56718a;
  --hover: #fff0b3;
  --hl: #fcd34d;
  --right: #9be7b4;
  --wrong: #fca5a5;
  --marker: #1d4ed8;
  --marker-used: #e2e8f8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.center { text-align: center; }

/* ---- login ---- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-card .logo {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  border-radius: 18px;
}
.login-card .logo svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 1.8; }
.login-card h1 { margin: 0 0 4px; font-size: 26px; }
.login-card form { margin-top: 20px; display: grid; gap: 10px; }
.error { color: var(--bad); font-size: 14px; min-height: 20px; }

/* ---- inputs ---- */

input, textarea, select {
  width: 100%; padding: 13px 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button {
  padding: 13px 16px;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  color: #fff; border: 0; border-radius: 11px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
button.secondary { background: var(--card); border: 1px solid var(--line); color: var(--text); }
button.small { padding: 9px 13px; font-size: 14px; }
button.wide { display: block; width: calc(100% - 32px); margin: 12px 16px 0; }

/* ---- layout ---- */

#app { min-height: 100vh; }
#screen { padding-bottom: 90px; max-width: 760px; margin: 0 auto; }
/* The map screens use the whole width; the quiz also hides the nav, so the
   map gets the room and nothing else competes for his attention. */
body.screen-wide #screen { max-width: 1560px; }
body.screen-quiz .bottom-nav, body.screen-quiz .topbar { display: none; }
body.screen-quiz #screen { padding-bottom: 0; }

.topbar {
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 12px;
  border-bottom: 1px solid var(--line);
}
.date-label { font-size: 19px; font-weight: 700; }

.section-label {
  padding: 18px 16px 6px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.card {
  margin: 12px 16px; padding: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.empty { color: var(--muted); text-align: center; padding: 26px 16px; font-size: 15px; }
.msg { min-height: 20px; font-size: 14px; padding: 6px 16px 0; }
.card .msg, .sec-body .msg { padding: 0; }
.msg.ok { color: var(--good); }
.msg.bad { color: var(--bad); }
.item-meta { font-size: 14px; color: var(--muted); margin-top: 4px; }
.inline-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- collapsibles (Settings) ---- */

.sec { margin: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sec-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: 0; padding: 15px 16px; color: var(--text); font-size: 16px; font-weight: 600;
  text-align: left;
}
.sec-chevron { transition: transform .2s; color: var(--muted); font-size: 20px; }
.sec.open > .sec-head .sec-chevron { transform: rotate(90deg); }
.sec-body { display: none; padding: 0 16px 16px; gap: 10px; grid-template-columns: 1fr; }
.sec.open > .sec-body { display: grid; }

/* ---- choosing a map ---- */

.resume { border-color: var(--warn); display: grid; gap: 8px; }
.resume-title { font-size: 18px; font-weight: 700; }
.resume-buttons { margin-top: 4px; }

.map-picker { display: grid; gap: 10px; padding: 0 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick-card {
  text-align: left; display: grid; gap: 4px;
  background: var(--card); border: 2px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 15px 16px; font-weight: 400;
}
.pick-card.on { border-color: var(--accent); background: rgba(14, 165, 233, .12); }
.pick-name { font-size: 20px; font-weight: 700; }
.pick-meta { font-size: 14px; color: var(--muted); }
.begin {
  display: block; width: calc(100% - 32px); margin: 18px 16px 10px;
  padding: 20px; font-size: 22px; font-weight: 800; border-radius: 16px;
}

/* ---- the map ---- */

.map-wrap {
  position: relative; background: var(--sea);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
}
.map {
  display: block; width: 100%; height: auto;
  max-height: calc(100svh - 90px);
  touch-action: pan-y;          /* let the page scroll past an unzoomed map… */
  user-select: none; -webkit-user-select: none;
}
.map-wrap.zoomed .map { touch-action: none; cursor: grab; } /* …but a zoomed one is dragged */
.map-wrap.zoomed .map:active { cursor: grabbing; }

.map .sea { fill: var(--sea); }
.map .context path { fill: var(--context); }
.map .region { fill: var(--land); stroke: var(--land); stroke-width: .6; vector-effect: non-scaling-stroke; transition: fill .12s; }
.map .region.hover { fill: var(--hover); stroke: var(--hover); }
.map .region.right { fill: var(--right); stroke: var(--right); }
.map .region.wrong { fill: var(--wrong); stroke: var(--wrong); }
.map .region.hl { fill: var(--hl); stroke: var(--hl); }
.map .lines path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map .coast { stroke: var(--coast); stroke-width: .8; }
.map .borders { stroke: var(--border); stroke-width: 1; }
.map .frames { stroke: #7d8e9e; stroke-width: 1; stroke-dasharray: 5 4; }
/* No neighbours drawn (the US without Canada and Mexico): a quiet paper
   colour outside, so Canada doesn't look like ocean. Lakes still read as water. */
.map-wrap[data-bg="plain"] { --sea: #dde7ee; }
.map .callouts { pointer-events: none; }
.map .callouts line { stroke: var(--marker); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.map .callouts circle { fill: var(--marker); }

.map .markers { pointer-events: none; }
.map .marker circle { fill: var(--marker); stroke: #fff; stroke-width: 1.6; }
.map .marker text { fill: #fff; font-size: 11.5px; font-weight: 800; font-family: inherit; }
.map .marker text.three { font-size: 9px; }
/* A number he's already written somewhere: pale, so the ones left stand out. */
.map .marker.used circle { fill: var(--marker-used); stroke: var(--marker); }
.map .marker.used text { fill: var(--marker); }
.map .marker.right circle { fill: #15803d; stroke: #fff; }
.map .marker.wrong circle { fill: #dc2626; stroke: #fff; }
.map .marker.right text, .map .marker.wrong text { fill: #fff; }
.map .marker.hl circle { fill: #f59e0b; stroke: #fff; }
.map .marker.hl text { fill: #fff; }

/* Top left: open ocean on both maps (the Atlantic west of Iceland, the Pacific
   off Washington). Top right covered New England's numbers. test.sh keeps
   that corner free of numbers on every map. */
.map-tools {
  position: absolute; left: 10px; top: 10px;
  display: grid; gap: 6px;
}
.map-tool {
  width: 40px; height: 40px; padding: 0;
  background: rgba(255, 255, 255, .92); color: #1e293b;
  border: 1px solid rgba(15, 27, 45, .25); border-radius: 10px;
  font-size: 22px; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.map-tool:disabled { opacity: .4; }

/* ---- map screens: the shared two-column layout ---- */

.mapview { display: grid; gap: 12px; padding: 12px 16px 16px; }
.mapview-map { min-width: 0; }
.mapview-side { min-width: 0; }

/* Narrow: the map stays at the top of the screen while the list scrolls. */
@media (max-width: 899px) {
  .mapview-map { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: calc(env(safe-area-inset-top) + 6px) 0 8px; margin: 0 -4px; }
  .mapview-map .map { max-height: 44svh; }
}

/* Wide: map left, list right. */
@media (min-width: 900px) {
  .mapview {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 32vw, 480px);
    grid-template-areas: "head head" "map side";
    align-items: start; column-gap: 20px;
  }
  .quiz-head, .report-head { grid-area: head; }
  .mapview-map { grid-area: map; position: sticky; top: 12px; }
  .mapview-side { grid-area: side; }
  /* Outside the quiz the top bar and the nav are showing too. */
  body:not(.screen-quiz) .mapview-map .map { max-height: calc(100svh - 190px); }
}

/* ---- the quiz ---- */

.quiz { padding-top: calc(env(safe-area-inset-top) + 12px); }
.quiz-head { display: flex; align-items: center; gap: 12px; }
.quiz-title { font-size: 20px; font-weight: 800; flex: 1; }
.quiz-progress { font-size: 15px; color: var(--muted); font-weight: 600; }
.quiz-help { margin: 2px 0 10px; color: var(--muted); font-size: 15px; }

.name-grid { display: grid; gap: 6px 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.name-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px;
  padding: 6px 6px 6px 12px; min-height: 52px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  cursor: text;
}
.name-row .name { font-size: 16px; font-weight: 600; line-height: 1.2; }
.name-row.filled { border-color: #36557f; }
.name-row:focus-within { border-color: var(--accent); background: var(--card-2); }
.num-input {
  width: 58px; padding: 8px 4px; text-align: center;
  font-size: 20px; font-weight: 800; letter-spacing: .02em;
  background: var(--bg); border-width: 2px;
}
.row-hint { grid-column: 1 / -1; font-size: 13px; color: var(--warn); }
.row-hint:empty { display: none; }
.name-row.warn { border-color: var(--warn); }

.quiz-foot {
  position: sticky; bottom: 0; z-index: 1;
  display: grid; gap: 6px; margin-top: 12px;
  padding: 12px 0 calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(to bottom, rgba(15, 27, 45, 0), var(--bg) 22%);
}
.check { padding: 17px; font-size: 19px; font-weight: 800; border-radius: 14px; }
.check:not(.ready) { background: var(--card-2); border: 1px solid var(--line); }
.check-msg { font-size: 15px; color: var(--warn); text-align: center; }
.check-msg:empty { display: none; }
.save-note { font-size: 12px; color: var(--muted); text-align: center; min-height: 15px; }
.save-note.bad { color: var(--warn); }

/* ---- the report ---- */

.report-head { display: flex; align-items: center; gap: 12px; }
.report-card { margin: 0 0 12px; }
.report-map { font-size: 22px; font-weight: 800; }
.score { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 6px; }
.score-big { font-size: 42px; font-weight: 800; }
.score-big.perfect { color: var(--good); }
.score-label { color: var(--muted); font-size: 17px; }
.facts { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 8px; }
.fact-value { font-size: 19px; font-weight: 700; }
.fact-label { font-size: 13px; color: var(--muted); }
.note-line { margin-top: 12px; font-size: 16px; font-weight: 700; }
.note-line.good { color: var(--good); }
.again { display: block; width: 100%; margin-top: 14px; padding: 15px; font-size: 17px; }

.result-group { margin-top: 6px; }
.group-title { padding: 10px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.group-title.wrong { color: var(--bad); }
.group-title.right { color: var(--good); }
.result-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; margin-top: 6px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  color: var(--text); font-weight: 400;
}
.result-row.on { border-color: var(--warn); background: var(--card-2); }
.result-body { flex: 1; min-width: 0; }
.result-name { font-size: 17px; font-weight: 700; }
.typed { font-size: 15px; margin-top: 3px; color: var(--muted); }
.typed-bad { color: var(--bad); font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1px; }
.result-num {
  flex: 0 0 auto; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; font-weight: 800; color: #fff;
}
.result-row.wrong .result-num { background: #dc2626; }
.result-row.right .result-num { background: #15803d; }

/* ---- reports history ---- */

.history-card {
  display: flex; align-items: center; gap: 14px; width: calc(100% - 32px);
  margin: 8px 16px 0; padding: 14px 16px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-weight: 400;
}
.history-main { flex: 1; min-width: 0; }
.history-list { font-size: 17px; font-weight: 700; }
.history-meta { font-size: 14px; color: var(--muted); margin-top: 3px; }
.history-score-big { font-size: 22px; font-weight: 800; }
.history-score.perfect { color: var(--good); }

/* ---- bottom nav ---- */

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex; background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item {
  flex: 1; background: none; border: 0; color: var(--muted); border-radius: 0;
  font-size: 12px; font-weight: 600; padding: 9px 0 8px;
  display: grid; justify-items: center; gap: 3px;
}
.bottom-nav .nav-item svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.bottom-nav .nav-item.active { color: var(--accent); }

/* ---- desktop ---- */

@media (min-width: 900px) {
  .bottom-nav { justify-content: center; }
  .bottom-nav .nav-item { flex: 0 1 140px; }
}
@media (hover: hover) {
  button:not(:disabled):hover { filter: brightness(1.12); }
  .pick-card:hover, .history-card:hover, .result-row:hover { border-color: var(--accent); }
  .bottom-nav .nav-item:hover { color: var(--text); filter: none; }
  .map-tool:not(:disabled):hover { filter: none; background: #fff; }
}