/* Fonts are served from this site (src/fonts), not from Google. Licence: src/fonts/OFL.txt */
@font-face { font-family: "Bricolage Grotesque"; src: url("src/fonts/bricolage-grotesque.woff") format("woff"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("src/fonts/newsreader.woff") format("woff"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("src/fonts/newsreader-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #E9EEF2;
  --surface: #FFFFFF;
  --ink: #11253A;
  --muted: #55677A;
  --line: #C3CFD9;
  --tape: #FFC21A;
  --on-tape: #11253A;
  --ok: #17795A;
  --bad: #B3372A;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1621;
    --surface: #152230;
    --ink: #E8EEF3;
    --muted: #9AABBA;
    --line: #2B3B4A;
    --ok: #4CC49A;
    --bad: #FF8F80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D1621;
  --surface: #152230;
  --ink: #E8EEF3;
  --muted: #9AABBA;
  --line: #2B3B4A;
  --ok: #4CC49A;
  --bad: #FF8F80;
  color-scheme: dark;
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.5;
}
.wrap { max-width: 540px; margin: 0 auto; padding: 20px 16px 48px; }

/* header */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
h1 { font-family: var(--display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; line-height: 1; margin: 0; display: flex; align-items: center; gap: 0.28em; white-space: nowrap; }
.logo { width: 0.95em; height: 0.95em; flex: none; } /* the broom beside the title: the same drawing as src/icons/icon.svg */
.proto { font-size: 15px; color: var(--muted); font-style: italic; }
.tabs { display: flex; gap: 6px; margin: 16px 0 0; }
.tab {
  font: 700 15px var(--display);
  padding: 8px 14px; border-radius: 999px;
  border: 2px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer;
}
.tab[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.tab:focus-visible, .choice:focus-visible, .btn:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }


/* chain box */
.chainbox { display: grid; justify-content: center; padding: 24px 0 18px; }
.chain { display: flex; align-items: center; justify-content: center; min-height: 40px; }
details.facts { margin-top: 18px; border-top: 2px solid var(--line); padding-top: 12px; font-size: 16px; }
details.facts summary { cursor: pointer; font: 700 15px var(--display); color: var(--muted); }
details.facts ul { margin: 8px 0 0; padding-left: 18px; }
details.facts li { margin: 2px 0; }
.todo { color: var(--bad); font-weight: 500; }
.hingeline { font-size: 20px; margin: 14px 0 0; }

/* chain */
.chain { display: flex; align-items: center; justify-content: center; padding: 28px 0 22px; min-height: 90px; }
.link {
  width: 40px; height: 28px; border-radius: 999px;
  border: 3px solid var(--line);
  display: grid; place-items: center;
  font: 800 15px var(--display);
  color: transparent;
  margin-left: 8px;
  transition: margin-left .25s ease, background-color .25s ease, border-color .25s ease;
}
.link:first-child { margin-left: 0; }
.link.joined { margin-left: 8px; } /* answers used to overlap here; now every slot keeps its own space */
.link.now { border-color: var(--tape); border-style: solid; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tape) 35%, transparent); }
.link.ok { border-color: transparent; background: transparent; color: var(--ink); }
.link.miss { border-color: transparent; background: transparent; color: var(--ink); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)); }

/* card */
.card { background: var(--surface); border-radius: 22px; padding: 22px 20px 20px; border: 2px solid var(--line); }
.kicker { margin: 0 0 4px; font-size: 16px; color: var(--muted); }
.big { font-family: var(--display); font-weight: 800; font-size: 46px; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.big small { font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.name { font-family: var(--display); font-weight: 500; font-size: 18px; margin: 4px 0 0; color: var(--muted); }
.ask { font-size: 22px; line-height: 1.35; margin: 22px 0 16px; }
.subject { font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
.choices { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.choices.stack { grid-template-columns: 1fr; }
.choice {
  min-height: 60px; padding: 12px 14px;
  font: 700 19px/1.2 var(--display);
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--ink); border-radius: 14px; cursor: pointer;
  text-align: center;
}
.choice:hover { background: var(--tape); border-color: var(--tape); color: var(--on-tape); }
.btn {
  font: 700 18px var(--display);
  padding: 14px 20px; min-height: 52px; border-radius: 14px;
  border: 2px solid var(--ink); background: var(--tape); color: var(--on-tape);
  cursor: pointer;
}
.btn.quiet { background: transparent; color: var(--ink); }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* verdict */
.verdict { display: flex; align-items: center; gap: 10px; font: 800 24px var(--display); margin: 0 0 10px; }
.verdict .mark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; }
.verdict.ok { color: var(--ok); }
.verdict.ok .mark { background: var(--ok); color: var(--surface); }
.verdict.miss { color: var(--bad); }
.verdict.miss .mark { border: 3px dashed var(--bad); }
.diff { margin: 6px 0 0; font-size: 19px; }
.gaps { margin: 4px 0 0; padding: 0; list-style: none; font-size: 19px; }
.gaps li { margin: 2px 0; }
.fact { margin: 16px 0 0; padding-top: 14px; border-top: 2px solid var(--line); font-style: italic; color: var(--muted); }

/* tape measure ruler */
.ruler { position: relative; height: 112px; margin: 10px 0 0; }
.axis {
  position: absolute; left: 3%; right: 3%; top: 50%; height: 16px; margin-top: -8px;
  background:
    repeating-linear-gradient(90deg, var(--on-tape) 0 2px, transparent 2px 10px) bottom / 100% 6px no-repeat,
    var(--tape);
  border-radius: 3px;
}
.mark-pt { position: absolute; top: 50%; width: 0; height: 0; }
.dot {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--surface);
}
.new .dot { background: var(--ok); animation: pop .35s ease-out; }
.new.wrong .dot { background: var(--bad); }
.tag {
  position: absolute; left: 0; transform: translateX(-50%);
  width: max-content; max-width: 108px; text-align: center;
  font: 500 13px/1.2 var(--display); color: var(--muted);
}
.tag b { display: block; font-weight: 800; font-size: 16px; color: var(--ink); }
.tag.above { bottom: 18px; }
.tag.below { top: 18px; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

/* done */
.score { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.grid-out { font-size: 30px; letter-spacing: 6px; margin: 14px 0 6px; }
.toast { min-height: 24px; margin: 10px 0 0; color: var(--muted); font-size: 16px; }
textarea.copybox { width: 100%; margin-top: 8px; font: 500 15px var(--display); background: var(--bg); color: var(--ink); border: 2px solid var(--line); border-radius: 10px; padding: 10px; resize: none; }

@media (max-width: 400px) {
  .big { font-size: 38px; }
  .subject { font-size: 27px; }
  .link { width: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .link { transition: none; }
  .new .dot { animation: none; }
}

/* stats */
.stats { display: flex; gap: 22px; margin: 14px 0 4px; }
.stat b { display: block; font: 800 28px var(--display); letter-spacing: -0.02em; line-height: 1; }
.stat span { font-size: 14px; color: var(--muted); }
.lockline { margin: 12px 0 0; color: var(--muted); font-size: 16px; }


/* clue (before answering) and hint (after) */
.clue { margin: -10px 0 16px; color: var(--muted); font-style: italic; font-size: 17px; }
.hintline { margin: 2px 0 0; color: var(--muted); font-style: italic; font-size: 17px; }

/* scoring */
.pts { font-family: var(--display); font-weight: 800; color: var(--ok); margin-left: 6px; }
.verdict.miss .pts { color: var(--muted); }
.ptsnote { margin: -2px 0 10px; color: var(--muted); font-size: 16px; }
.stats { flex-wrap: wrap; }
details.facts p { margin: 8px 0 0; }

/* difficulty tier shown before answering */
.tierrow { margin: 18px 0 -8px; display: flex; align-items: center; gap: 10px; }
.tier { display: inline-block; font: 800 14px var(--display); padding: 3px 12px; border-radius: 999px; border: 2px solid var(--line); color: var(--muted); }
.tier.medium { border-color: var(--ink); color: var(--ink); }
.tier.close { background: var(--tape); border-color: var(--ink); color: var(--on-tape); }
.tierworth { font-size: 16px; color: var(--muted); }
.tier.deep { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tierrow { flex-wrap: wrap; }
.tier.warm { border-color: var(--ok); color: var(--ok); }

/* brooms and dust inside the chain */
.link.ok, .link.miss { font-size: 24px; line-height: 1; min-height: 28px; }

/* light and dark toggle, and the version label */
.topright { display: flex; align-items: center; gap: 10px; }
.theme {
  width: 36px; height: 36px; padding: 0; border-radius: 999px;
  border: 2px solid var(--line); background: transparent; color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.theme:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }
.ver { text-align: center; margin: 22px 0 0; font: 600 12px var(--display); letter-spacing: 0.04em; color: var(--muted); opacity: 0.8; }

/* the first-time note under the title: one slim line, so it does not push the game down */
.firsttime { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; font: 600 14px/1.3 var(--display); color: var(--muted); }
.firsttime[hidden] { display: none; }
.firsttime b { color: var(--ink); }
.btn.mini { position: relative; padding: 3px 12px; min-height: 0; font-size: 13px; border-radius: 10px; flex: none; }
.btn.mini::after { content: ""; position: absolute; inset: -10px -8px; } /* an invisible, bigger area to tap: about 46px tall */
.theme.nudge { box-shadow: 0 0 0 3px var(--tape); } /* a still yellow ring on the "?" while the note shows */

/* how to play */
.help { margin: 16px 0 0; padding: 14px 16px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
.help[hidden] { display: none; }
.help h2 { margin: 0 0 6px; font: 800 18px var(--display); }
.help ol { margin: 0 0 12px; padding-left: 22px; font-size: 17px; }
.help li { margin: 3px 0; }

/* the Clean Sweep celebration */
.sweepfx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.sweepfx span { position: absolute; bottom: -48px; animation: sweepRise 3s ease-out forwards; will-change: transform, opacity; }
@keyframes sweepRise {
  0% { transform: translateY(0) rotate(-12deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-115vh) rotate(18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sweepfx { display: none; } }

/* header: title and puzzle number on the left, the two round buttons top right */
.titleblock { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.topright { flex: none; margin-top: 2px; }
.tabs:empty { display: none; }
.practice { margin: 0 0 14px; padding-top: 10px; border-top: 2px solid var(--line); }
.practice p { margin: 0 0 8px; font-size: 16px; color: var(--muted); }
/* the title stays on one line on every phone: it scales with the screen, never smaller than 22px or bigger than 34px */
@media (max-width: 480px) { h1 { font-size: clamp(22px, 8.6vw, 34px); } }
@media (max-width: 360px) {
  .theme { width: 32px; height: 32px; font-size: 16px; }
  .topright { gap: 8px; }
}

/* the "Play it" link when a new puzzle is ready */
.linkbtn { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.linkbtn:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }

/* captions at the ends of the ruler, before you answer */
.endcap { position: absolute; top: calc(50% + 20px); font: 700 13px var(--display); color: var(--muted); }
.endcap.l { left: 3%; }
.endcap.r { right: 3%; text-align: right; }
.endcap { max-width: 44%; line-height: 1.2; } /* the end captions can be event names in a "closer in time" question, so they may wrap */
/* in a "closer in time" reveal, the option that is NOT closer is grey; the closer one is green, or red if you missed it, like any answer dot */
.mark-pt.new.far .dot { background: var(--muted); }

/* the glide ruler.
   The top slot (the verdict, then the tier), the big answer and the ruler sit in the same place on the reveal and on the
   question, so nothing at the top moves. When you move on, everything overlaps in one movement (0.85s, same ease as the slide):
     the old starting dot and its figure fade out,
     the green or red dot moves to the middle, and its figure rises from under it to above it,
     and the dot settles to its usual colour as it arrives.
   Meanwhile the old screen cross-fades into the new one (see src/transition.js). */
.topslot { min-height: 58px; display: flex; align-items: center; margin: 0 0 8px; }
.topslot .verdict, .topslot .tierrow { margin: 0; }
.hintline { min-height: 1.5em; }
.hintline:not(:empty):not(.ghost) { animation: fadeIn 0.35s ease; }
.hintline.ghost { animation: fadeOut 0.5s ease 0.25s forwards; }
.axis.glide { background: var(--tape); overflow: hidden; }
.axis.glide .ticks {
  position: absolute; left: -50%; width: 200%; bottom: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--on-tape) 0 2px, transparent 2px 10px);
}
.mark-pt.slide { transition: left 0.85s cubic-bezier(0.2, 0.75, 0.25, 1); }
.mark-pt.leaving { animation: fadeOut 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards; }

/* the answer's figure: under the green or red dot */
.tag.rider { top: 18px; bottom: auto; left: 0; transform: translate(-50%, 0) scale(1); transform-origin: 50% 0; }
.tag.rider.at-l { left: -9px; transform: translate(0, 0) scale(1); transform-origin: 0 0; text-align: left; }
.tag.rider.at-r { left: 9px; transform: translate(-100%, 0) scale(1); transform-origin: 100% 0; text-align: right; }
.mark-pt.new .tag.rider { opacity: 0; animation: tagIn 0.3s ease 0.55s forwards; }
@keyframes tagIn { to { opacity: 1; } }

/* then the dot moves to the middle, and the figure rises from under it to above it */
.mark-pt.glide-in { animation: glideToMiddle 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards; }
.mark-pt.glide-in .tag.rider { animation: riseAbove 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards; }
.mark-pt.glide-in.from-ok .dot { background: var(--ok); }
.mark-pt.glide-in.from-wrong .dot { background: var(--bad); }
.mark-pt.glide-in .dot { animation: settle 0.3s ease 0.55s forwards; }
/* at the halfway point the figure changes as it goes: the old one fades out as the new one fades in */
.tag.rider .fig-old { animation: fadeOut 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards; }
.tag.rider .fig-new { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; opacity: 0; animation: fadeIn 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) forwards; }
@keyframes glideToMiddle { from { left: var(--from); } to { left: 50%; } }
@keyframes riseAbove { to { top: -18px; left: 0; transform: translate(-50%, -100%) scale(1); text-align: center; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { to { background: var(--ink); } }
@media (prefers-reduced-motion: reduce) {
  .mark-pt.slide { transition: none; }
  .mark-pt.leaving { display: none; }
  .mark-pt.glide-in, .mark-pt.glide-in .dot, .mark-pt.glide-in .tag.rider, .mark-pt.new .tag.rider, .hintline { animation: none; }
  .mark-pt.glide-in { left: 50%; }
  .mark-pt.glide-in .dot { background: var(--ink); }
  .mark-pt.glide-in .tag.rider { top: -18px; left: 0; transform: translate(-50%, -100%) scale(1); text-align: center; }
  .tag.rider .fig-old { display: none; }
  .tag.rider .fig-new { animation: none; opacity: 1; }
  .mark-pt.new .tag.rider { opacity: 1; }
  .hintline.ghost { display: none; }
}