/* Layout: one plain sheet of paper. The map fills it edge to edge with a notes column beside it; everything else is written text. */
:root {
  --paper: #FBFCFD;
  --rule: #DCE4EF;
  --ink: #1A1F2B;
  --ink-2: #394150;
  --pencil: #6B7380;
  --hl-time: #4DE3D2;
  --accent: #1F5AA6;
  --hl-goal: #8EE6A6;
  --hl-have: #E9D8B4;
  --hl-earn: #A3D3FF;
  --hl-why: #FFE45C;
  --hl-limit: #FFAED2;
  --hl-cost: #FFC47E;
  --hl-alpha: 0.85;
  --font-hand: "Shantell Sans", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* One spacing scale: tight inside a group, wide between groups. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 32px; --s6: 56px; --s7: 96px; --s8: 144px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111111;
    --rule: #222222;
    --ink: #EDEDED;
    --ink-2: #C8C8C8;
    --pencil: #9A9A9A;
    --hl-time: #17B3A3;
    --accent: #F0C04A;
    --hl-goal: #2FA866;
    --hl-have: #8A7650;
    --hl-earn: #2F7FD6;
    --hl-why: #C9A611;
    --hl-limit: #CF4F89;
    --hl-cost: #D4832C;
    --hl-alpha: 0.45;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-hand); font-weight: 600; text-wrap: balance; margin: 0; }
p { margin: 0; }

/* Page columns: prose keeps a reading measure; the map runs edge to edge. */
.top, .hero, .maphead, .sec, footer {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

.top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s5); padding-block: var(--s4); }
.brand { font: 600 22px/1 var(--font-hand); color: var(--ink); text-decoration: none; }
.top nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 16px; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }
.menu-btn { display: none; }

.hero { padding-block: var(--s7) var(--s6); }
.hero h1 { max-width: 14ch; font-size: clamp(44px, 7.4vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.lede { margin-top: var(--s5); max-width: 52ch; font-size: clamp(19px, 2.1vw, 22px); line-height: 1.55; }
.howto { list-style: none; margin: var(--s5) 0 0; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); counter-reset: howto; }
.howto li { counter-increment: howto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); }
.howto li::before { content: counter(howto); grid-row: span 2; width: 28px; height: 28px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--font-hand); }
.howto a { font: 600 19px/1.4 var(--font-hand); color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.howto span { color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* The map */
.mapsec { padding-top: var(--s6); }
.maphead h2, .sec > h2, footer h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; }
.hint { margin-top: var(--s3); max-width: 62ch; color: var(--ink-2); }
.tools { margin-top: var(--s4); margin-bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }

/* Highlighter key: each label is marked the way its bubbles are. Pressing one circles it in pen. */
.key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.key button {
  position: relative;
  padding: 2px 6px;
  border: 0; border-radius: 50%;
  background: none;
  font: 500 17px/1.3 var(--font-hand);
  cursor: pointer;
}
/* Highlighted labels use the same see-through marker as the bubbles. Older Safari has no color-mix, so it gets the full color instead of none. */
.key button span, .notes .kind span, .links button span { --hl-t: var(--hl, transparent); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .key button span, .notes .kind span, .links button span { --hl-t: color-mix(in srgb, var(--hl, transparent) calc(var(--hl-alpha) * 100%), transparent); }
}
.key button span { padding: 0 2px; background-image: linear-gradient(transparent 52%, var(--hl-t) 52%, var(--hl-t) 94%, transparent 94%); }
.key button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.key .k-move span::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.3em; border: 1.5px solid var(--ink); border-radius: 2px; vertical-align: -0.05em; }
.k-goal { --hl: var(--hl-goal); } .k-have { --hl: var(--hl-have); } .k-earn { --hl: var(--hl-earn); }
.k-why { --hl: var(--hl-why); } .k-limit { --hl: var(--hl-limit); } .k-cost { --hl: var(--hl-cost); } .k-time { --hl: var(--hl-time); }

/* On its own line under the key, at the right. */
.find { align-self: flex-end; }
.find select {
  /* Only as wide as "Find a bubble" and its arrow; browsers that can't size to the text get a width that fits it. */
  width: calc(7.2em + 26px);
  /* It shows the selected bubble's name, so long names are cut short rather than stretching the row. */
  max-width: min(62vw, 15em);
  padding: 2px 24px 4px 2px;
  border: 0; border-bottom: 1.5px solid var(--ink-2); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  /* A small chevron drawn from two triangles, so it follows the ink color in light and dark. */
  background: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%) calc(100% - 10px) 55% / 6px 6px no-repeat,
              linear-gradient(135deg, var(--ink-2) 50%, transparent 50%) calc(100% - 4px) 55% / 6px 6px no-repeat;
  font: 500 17px var(--font-hand); color: var(--ink);
  cursor: pointer;
}
@supports (field-sizing: content) { .find select { width: auto; field-sizing: content; } }
.find select:focus-visible { outline: none; border-bottom-color: var(--accent); }
.find option, .find optgroup { font-family: var(--font-body); background: var(--paper); color: var(--ink); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The sheet: the map, with a notes column beside it. */
.sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  height: min(82vh, 880px);
  min-height: 440px;
  border-block: 1px solid var(--rule);
}
.stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.stage.panning { cursor: grabbing; }
.stage.pointing { cursor: pointer; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world.moving { will-change: transform; }

.hud { position: absolute; z-index: 4; left: max(var(--s3), env(safe-area-inset-left, 0px)); bottom: var(--s3); display: flex; align-items: center; gap: var(--s1); }
.hud button {
  min-width: 36px; height: 36px; padding: 0 var(--s3);
  border: 1.5px solid var(--ink); border-radius: 4px;
  background: var(--paper);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.hud button:hover { background: var(--rule); }
.zval { margin-left: var(--s2); font-size: 14px; color: var(--pencil); font-variant-numeric: tabular-nums; }
/* Full screen is for phones only; on wider screens the map already has the room. */
.expand {
  position: absolute; z-index: 4; top: var(--s3); right: var(--s3);
  display: none; align-items: center; gap: var(--s2);
  height: 36px; padding: 0 var(--s3);
  border: 1.5px solid var(--ink); border-radius: 4px;
  background: var(--paper);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.map-full .expand svg { display: none; }

.notes {
  position: relative;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s5) max(var(--s5), env(safe-area-inset-right, 0px)) var(--s5) var(--s5);
  border-left: 1px solid var(--rule);
  background: var(--paper);
}
.notes h3 { font-size: 28px; line-height: 1.15; }
.notes .kind { margin-bottom: var(--s2); font: 500 16px var(--font-hand); color: var(--ink-2); }
.notes .kind span { padding: 0 3px; background-image: linear-gradient(transparent 52%, var(--hl-t) 52%, var(--hl-t) 94%, transparent 94%); }
.notes .note { margin-top: var(--s4); font-size: 17px; line-height: 1.6; }
.notes h4 { margin: var(--s5) 0 var(--s2); font-size: 15px; font-weight: 700; color: var(--ink-2); }
.notes .meta { margin-top: var(--s4); font-size: 15px; color: var(--pencil); }
.notes .close { position: absolute; top: var(--s3); right: var(--s3); border: 0; background: none; padding: var(--s1) var(--s2); cursor: pointer; color: var(--pencil); font-size: 24px; line-height: 1; }
.notes .close:hover { color: var(--ink); }
.notes .grip { display: none; }
.route { font-size: 15px; line-height: 1.7; }
.route + .route { margin-top: var(--s3); }
.crumb { border: 0; background: none; padding: 0; cursor: pointer; font: 15px var(--font-hand); color: var(--ink-2); }
.crumb:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumb.cur { color: var(--ink); font-weight: 600; }
.route .sep { color: var(--pencil); padding: 0 5px; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.links button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 500 17px var(--font-hand); color: var(--ink); }
.links button span { padding: 0 2px; background-image: linear-gradient(transparent 52%, var(--hl-t) 52%, var(--hl-t) 94%, transparent 94%); }
.links button:hover span { text-decoration: underline; text-underline-offset: 3px; }
.notes label { display: inline-flex; align-items: center; gap: var(--s2); font-size: 16px; cursor: pointer; }
.notes input[type="checkbox"], .todo input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* Bubbles. The same buttons are drawn into the canvas (HTML-in-Canvas) or laid over it (standard view). */
.bubble {
  --s: 1;
  position: absolute; left: 0; top: 0;
  display: block;
  width: max-content;
  margin: 0;
  padding: calc(14px * var(--s)) calc(26px * var(--s));
  border: calc(2px * var(--s)) solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: 500 calc(17px * var(--s)) / calc(21px * var(--s)) var(--font-hand);
  text-align: center;
  cursor: pointer;
  isolation: isolate;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
/* In the canvas version the page finds the bubble under the pointer itself, so the buttons don't take pointer events. */
.hic .bubble { --s: 2; pointer-events: none; }
.bubble .t { display: block; max-width: calc(124px * var(--s)); }
.bubble::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(4px * var(--s)) calc(2px * var(--s)) calc(1px * var(--s)) calc(6px * var(--s));
  border-radius: 50%;
  background: var(--hl, transparent);
  opacity: var(--hl-alpha);
  transform: rotate(-4deg);
}
.bubble:hover, .bubble.hover { border-width: calc(2.6px * var(--s)); }
.bubble:focus-visible { outline: none; box-shadow: inset 0 0 0 calc(3px * var(--s)) var(--accent); }
.bubble.k-goal {
  display: grid; place-items: center;
  width: calc(92px * var(--s)); height: calc(92px * var(--s));
  padding: 0;
  font-size: calc(40px * var(--s)); font-weight: 600;
}
.bubble.k-move {
  border-radius: calc(6px * var(--s));
  padding: calc(11px * var(--s)) calc(22px * var(--s)) calc(11px * var(--s)) calc(42px * var(--s));
}
.bubble.k-move::before { display: none; }
.bubble .box {
  position: absolute; left: calc(13px * var(--s)); top: 50%;
  width: calc(15px * var(--s)); height: calc(15px * var(--s));
  margin-top: calc(-7.5px * var(--s));
  border: calc(1.6px * var(--s)) solid var(--ink); border-radius: calc(2px * var(--s));
}
.bubble.done .box::after {
  content: ""; position: absolute;
  left: calc(4px * var(--s)); top: calc(0.5px * var(--s));
  width: calc(4px * var(--s)); height: calc(8px * var(--s));
  border: solid var(--accent); border-width: 0 calc(2.4px * var(--s)) calc(2.4px * var(--s)) 0;
  transform: rotate(45deg);
}
.bubble.done .t { opacity: 0.55; }

/* Written sections */
.sec { padding-top: var(--s8); }
.sec > h2 + * { margin-top: var(--s5); }
.lead { max-width: 64ch; }
.lead h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.lead p { margin-top: var(--s3); font-size: clamp(19px, 2vw, 21px); }
/* The space after the lead takeaway matches the space between the others, at every width. */
.takes { --take-gap: var(--s6); margin-top: var(--take-gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--take-gap) var(--s7); max-width: 1040px; }
.takes h3 { font-size: 24px; line-height: 1.2; }
.takes p { margin-top: var(--s2); }

.intro { max-width: 62ch; }
.path { list-style: none; margin: var(--s6) 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.path li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; }
.path li:not(:last-child)::after {
  content: ""; position: absolute; top: 26px; right: calc(-1 * var(--s4) + 4px); width: 28px; height: 2px; background: var(--ink-2);
}
.path li:not(:last-child)::before {
  content: ""; position: absolute; top: 21px; right: calc(-1 * var(--s4) + 2px); width: 8px; height: 8px;
  border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg);
}
.path span { font-size: 16px; color: var(--ink-2); max-width: 26ch; }
.mini {
  position: relative;
  max-width: calc(100% - 36px);
  padding: 12px 22px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper);
  font: 500 17px/1.25 var(--font-hand); color: var(--ink);
  cursor: pointer; isolation: isolate; text-align: center;
}
.mini::before { content: ""; position: absolute; z-index: -1; inset: 4px 2px 1px 6px; border-radius: 50%; background: var(--hl, transparent); opacity: var(--hl-alpha); transform: rotate(-4deg); }
.mini.k-move { border-radius: 6px; padding-left: 38px; text-align: left; }
.mini.k-move::before { display: none; }
.mini i { position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 1.6px solid var(--ink); border-radius: 2px; }
.mini:hover { border-width: 2.6px; }

.todo { margin-top: var(--s7); }
.todo h3 { font-size: 30px; }
.todo > p { margin-top: var(--s2); max-width: 62ch; color: var(--ink-2); }
/* One row per group: title and tally on the left, its moves in two columns on the right. */
.todo-groups { margin-top: var(--s5); border-top: 1px solid var(--rule); }
.todo-group { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: var(--s4) var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--rule); }
/* Each group is a <details> so phones can fold it; on wider screens it's always open and the title is just a heading. */
.todo-group summary { align-self: start; position: sticky; top: var(--s6); display: block; list-style: none; cursor: default; }
.todo-group summary::-webkit-details-marker { display: none; }
.todo-groups h4 { font: 600 21px/1.2 var(--font-hand); margin: 0; }
.todo-group .tally { margin-top: var(--s1); font-size: 15px; color: var(--pencil); font-variant-numeric: tabular-nums; }
.todo ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4) var(--s5); }
.todo li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--s3); align-content: start; }
.todo li input { margin-top: 4px; }
.todo li label { font: 500 18px/1.35 var(--font-hand); cursor: pointer; }
.todo li p { grid-column: 2; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.todo li.done label { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--pencil); }

footer { padding-block: var(--s8) var(--s6); }
footer p { margin-top: var(--s3); max-width: 64ch; color: var(--ink-2); }
footer h2 + p { margin-top: var(--s4); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; padding: 1px 4px; border-radius: 3px; background: var(--rule); color: var(--ink); }

@media (max-width: 900px) {
  .takes { --take-gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .path li:nth-child(2)::before, .path li:nth-child(2)::after { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  /* Phones: the section links fold into a menu button on the brand's line. Without JavaScript they stay listed as before. */
  .js .top { position: relative; flex-wrap: nowrap; align-items: center; }
  .js .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu-btn .x, .menu-btn[aria-expanded="true"] .bars { display: none; }
  .menu-btn[aria-expanded="true"] .x { display: inline; }
  .js .top nav {
    display: none; position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: var(--s1) var(--gutter-r) var(--s3) var(--gutter);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.25);
  }
  .js .top nav.open { display: flex; }
  .js .top nav a { padding-block: var(--s3); font-size: 18px; color: var(--ink); }
  .howto { grid-template-columns: minmax(0, 1fr); }
  .todo-group .tally { margin-top: 0; white-space: nowrap; }
  /* On phones each group is an accordion; its title row opens and closes it. */
  .todo-group { display: block; padding-block: 0; }
  .todo-group summary { position: static; display: flex; align-items: center; gap: var(--s3); padding-block: var(--s4); cursor: pointer; }
  .todo-group summary h4 { flex: 1; }
  .todo-group summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 var(--s1); border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-3px) rotate(45deg); }
  .todo-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .todo-group > ul { padding-bottom: var(--s5); }
  .hero { padding-block: var(--s6) var(--s5); }
  .sec { padding-top: var(--s7); }
  footer { padding-top: var(--s7); }
  /* svh measures the screen with the browser's toolbars showing, so the map box never runs under them (vh is the fallback). */
  .sheet { display: block; height: 68vh; height: 68svh; min-height: 400px; }
  .stage { height: 100%; }
  .notes {
    position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
    max-height: 72%;
    /* Extra room at the end so the last lines can scroll clear of a browser toolbar floating over the bottom of the screen. */
    padding: 0 var(--gutter-r) calc(var(--s7) + env(safe-area-inset-bottom, 0px)) var(--gutter);
    border-left: 0; border-top: 1px solid var(--rule);
  }
  .notes.empty { display: none; }
  /* The note opens as a short strip so the route stays in sight; the grip opens the rest. */
  .notes.peek {
    max-height: 150px;
    overflow: hidden;
    touch-action: none;
  }
  .notes.peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
  .notes .grip {
    display: block; position: relative;
    width: 100%; height: 28px;
    margin-bottom: var(--s1); padding: 0;
    border: 0; background: none; cursor: pointer;
    touch-action: none;
  }
  .notes .grip::before { content: ""; position: absolute; left: 50%; top: 12px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--pencil); }
  .notes .close { top: var(--s1); }
  .hud { bottom: calc(var(--s3) + var(--cover, 0px)); }
  .expand { display: inline-flex; }
  /* Full screen: the map covers the page until it's closed. */
  .map-full, .map-full body { overflow: hidden; }
  .map-full .sheet { position: fixed; inset: 0; z-index: 50; height: auto; min-height: 0; border: 0; background: var(--paper); }
  .map-full .expand { top: calc(var(--s3) + env(safe-area-inset-top, 0px)); right: max(var(--s3), env(safe-area-inset-right, 0px)); }
  .map-full .hud { bottom: calc(var(--s3) + max(var(--cover, 0px), env(safe-area-inset-bottom, 0px))); }
  .map-full .notes.peek { max-height: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .path { grid-template-columns: minmax(0, 1fr); }
  .path li::before, .path li::after { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}