/* The chrome around the map. Deliberately little of it: the map is the app,
   and everything here is a thin white layer that gets out of the way. */

:root {
  --bg: #f8f4f0;
  --panel: #fffefc;
  --ink: #201d19;
  --ink-soft: #6d665e;
  --line: #e2dbd2;
  --accent: #1f6f5c;
  --shadow: 0 1px 2px rgb(32 29 25 / 12%), 0 6px 20px rgb(32 29 25 / 10%);
  --radius: 12px;
  --gap: 10px;
  /* The footprint of a pill along the bottom edge ("Öva", the map controls):
     what everything else down there clears. */
  --bar: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  /* The map handles its own gestures; the page itself never scrolls or bounces. */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#map { position: absolute; inset: 0; }

svg { fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- controls ----------------------------------------------------------- */

/* MapLibre's own controls (geolocate, scale, attribution) get the same shape as
   ours, and clear the bottom edge the way the rest of the chrome does. */
.maplibregl-ctrl-group {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: var(--panel) !important;
}
.maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
.maplibregl-ctrl-bottom-right { z-index: 2; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right {
  bottom: calc(var(--safe-bottom) + var(--bar));
}

/* ---- selected feature --------------------------------------------------- */

#card {
  position: absolute;
  left: var(--gap);
  right: var(--gap);
  bottom: calc(var(--safe-bottom) + var(--bar) + 34px);
  z-index: 3;
  max-width: 420px;
  padding: 14px 40px 16px 16px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#card h2 { margin: 0; font-size: 17px; }
#card p { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
#cardmeta { font-size: 12px !important; text-transform: uppercase; letter-spacing: .04em; }
#cardclose {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  padding: 6px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--ink-soft);
}

/* ---- boot / offline ----------------------------------------------------- */

#boot {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .4s ease;
}

#boot.done { opacity: 0; pointer-events: none; }
#bootmsg { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#boot.failed #bootmsg { color: #a3341f; max-width: 30ch; text-align: center; line-height: 1.5; }

/* Attribution is a requirement, not decoration: it stays legible and on
   screen at every size. */
.maplibregl-ctrl-attrib {
  font-size: 11px !important;
  background: rgb(255 254 252 / 82%) !important;
}
.maplibregl-ctrl-attrib a { color: var(--ink-soft); }

/* ---- learning: the picker ------------------------------------------------
   The one full-screen surface in the app. Everywhere else the map is the
   interface; here it is deliberately behind glass, because choosing what to
   practise is reading, not looking. */

#learn {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: rgb(248 244 240 / 96%);
  backdrop-filter: blur(6px);
  padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 8px);
}

#learnhead {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: 8px 16px 12px;
}
#learnhead h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
#learnhead p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); max-width: 46ch; }

#toexplore, #forget {
  flex: none;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
#toexplore { color: var(--accent); }

#learnsub { margin: 8px 0 0; font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }

#roundlist { flex: 1; overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }

/* The two halves of the quiz. The heading carries the claim the split makes and
   the line under it says what the claim is, because a page that sorts the city
   into "expected" and "not" owes the reader that sentence. */
.tier { margin-bottom: 18px; }
.tier h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.tier h2 .count { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 400; }
.tier .blurb { margin: 3px 0 8px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); max-width: 46ch; }

/* One row per kind: what it is called, how much of it you know, and the way to
   be asked. The bar is the only number that matters here — a chunk is never
   "done", it is only as known as its least known name. */
.chunk {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(32 29 25 / 6%);
}
.chunkname { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.chunkname .count { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: 13px; }
.chunk .bar { grid-column: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.chunk .bar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
/* One button, in the cell that used to hold a choice of two. */
.chunk .start {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: #f2ede6;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
}
.chunk .start:hover { background: #eae3d9; }

#learnfoot { padding: 6px 16px 0; }

/* ---- learning: a round in progress --------------------------------------- */

#playbar {
  position: absolute;
  top: calc(var(--safe-top) + var(--gap));
  left: var(--gap);
  right: var(--gap);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 6px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#prompt { flex: 1; margin: 0; font-size: 15px; line-height: 1.3; }
#tally { flex: none; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
#quit { flex: none; width: 34px; height: 34px; padding: 8px; border: 0; border-radius: 50%; background: none; color: var(--ink-soft); }

#verdict {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 68px);
  z-index: 4;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  background: var(--panel);
  border-radius: 999px;
  box-shadow: var(--shadow);
  max-width: calc(100% - 2 * var(--gap));
  text-align: center;
}
#verdict[data-tone="wrong"] { color: #a3341f; }
#verdict[data-tone="right"] { color: var(--accent); }

/* ---- learning: the fact and the summary ---------------------------------- */

#factcard, #summary {
  position: absolute;
  left: var(--gap);
  right: var(--gap);
  bottom: calc(var(--safe-bottom) + var(--gap));
  z-index: 6;
  max-width: 460px;
  margin: 0 auto;
  padding: 14px 16px 12px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* On a phone the card is a sheet along the bottom; given a wider window it
   moves to a column down the right, which is the one edge nothing else uses —
   the prompt owns the top and the map keeps the middle, where you can watch the
   answer appear while you read about it.

   It is on the whole time now, which changes what it is allowed to cost. As a
   card after an answer it could take half the screen for a moment; as the
   question it is competing with the map for the entire round, so on a phone it
   is capped harder and the picture is cropped shallower. */
#factcard {
  max-height: 52vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 699px) {
  #factcard.asking { max-height: 38vh; }
}

@media (min-width: 700px) {
  #factcard {
    left: auto;
    right: var(--gap);
    top: calc(var(--safe-top) + var(--bar) + 2 * var(--gap));
    bottom: calc(var(--safe-bottom) + var(--gap));
    width: 330px;
    max-width: 36vw;
    max-height: none;
    margin: 0;
  }
}

#factverdict {
  margin: 0 0 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}
#factverdict[data-tone="right"] { color: var(--accent); }
#factname { margin: 0; font-size: 18px; }
#factmeta { margin: 3px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
#facttext { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
#factsource { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
#next, .summaryactions button {
  margin-top: 12px;
  padding: 10px 16px;
  font-size: 14px;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
}
#next { width: 100%; }

#summary h2 { margin: 0; font-size: 18px; }
#summary p { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }
#summarylist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 34vh; overflow-y: auto; }
#summarylist button {
  padding: 7px 11px;
  font-size: 13px;
  background: #f2ede6;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
}
/* Green for what you placed yourself, plain for what you were shown. No red:
   being shown a name is how you learn it, not a failure to be marked up. */
#summarylist li[data-outcome="right"] button { background: #e4efe9; color: #16553f; }
.summaryactions { display: flex; gap: 8px; }
.summaryactions button { flex: 1; }
#summarydone { background: #f2ede6 !important; color: var(--ink) !important; }

/* The way back to being asked. Bottom centre: the layer button owns the left
   corner and MapLibre's own controls the right, and this belongs to neither
   side of the map — it leaves it. */
#tolearn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + var(--gap));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--bar);
  padding: 0 14px;
  font-size: 14px;
  color: var(--accent);
  background: var(--panel);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--shadow);
}
#tolearn svg { width: 17px; height: 17px; }

/* `display` from an id selector beats the UA rule behind `hidden`, so every
   panel that sets its own display has to say this or it stays tabbable while
   invisible. In a quiz that is not a cosmetic bug: a hidden summary is a hidden
   answer sheet. */
#learn[hidden], #play[hidden], #factcard[hidden], #summary[hidden],
#tolearn[hidden], #playbar[hidden],
/* `#factsource` sets `display: inline-block` from an id, which beat the UA
   sheet's rule for `hidden` outright — so "Källa" was drawn under every card,
   linking nowhere, for every name with no source. Invisible while the card
   only appeared for a moment after an answer; unmissable now that the panel is
   the question and most of the streets have no source at all. */
#factsource[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #boot { transition: none; }
}