/* App chrome only. The map's own colours come from the colour packs in src/presets.js. */
:root {
  color-scheme: light;
  --bg: #f4f3f0;
  --panel: #ffffff;
  --fg: #1f2328;
  --muted: #1f2328;           /* no grey text: hierarchy comes from size and weight */
  --border: #cbc6bc;          /* dividers between areas */
  --control: #8d887e;         /* outlines of buttons, inputs and cards */
  --btn: #ffffff;
  --btn-hover: #e9e6de;
  --accent: #0078bf;          /* Branchwise riso blue */
  --accent-fg: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --map-bg: #fbfaf8;
  --editor-w: 380px;
  --warn: #b35c00;
  --ink-blue: #0078bf;
  --ink-pink: #ff48b0;
  --ink-yellow: #ffe800;
  --ink-blend: multiply;      /* the logo's inks overprint like riso on light paper */
  --bar: #fffdf8;             /* top bar: a lighter paper than the page */
  --btn-ink: #1f2328;         /* button outlines */
  --btn-shadow: #1f2328;      /* the hard offset shadow under buttons */
  --notice-bg: #fff2a1;       /* riso-yellow tint for the keep-notice banner */
  --notice-ink: #1f2328;
  --ui-font: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121316; --panel: #18191d; --fg: #e6e6e6; --muted: #e6e6e6; --border: #3b3e46; --control: #6a6f7a;
    --btn: #2c2f36; --btn-hover: #3a3e47; --accent: #47a8ec; --accent-fg: #0b1a24;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --map-bg: #15161a; --warn: #ffb35c;
    --ink-blue: #2f93dc; --ink-blend: normal;
    --bar: #202228; --btn-ink: #9298a4; --btn-shadow: #000000; --notice-bg: #3b3512; --notice-ink: #ffe800;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121316; --panel: #18191d; --fg: #e6e6e6; --muted: #e6e6e6; --border: #3b3e46; --control: #6a6f7a;
  --btn: #2c2f36; --btn-hover: #3a3e47; --accent: #47a8ec; --accent-fg: #0b1a24;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --map-bg: #15161a; --warn: #ffb35c;
  --ink-blue: #2f93dc; --ink-blend: normal;
    --bar: #202228; --btn-ink: #9298a4; --btn-shadow: #000000; --notice-bg: #3b3512; --notice-ink: #ffe800;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 var(--ui-font);
}

.bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 16px;
  background: var(--bar);
  border-bottom: 2px solid var(--ink-blue);
  box-shadow: 0 2px 0 var(--ink-pink);  /* a misprinted double rule: blue over pink */
  position: relative;
  z-index: 2;
}
/* Branchwise logo: the Misprint B and the wordmark, blue printed over a pink copy
   a hair out of register (the "tighter register" option). */
.brand { display: flex; align-items: center; gap: 7px; margin: 0; font: 700 19px/1 var(--ui-font); letter-spacing: -0.015em; border-radius: 6px; cursor: default; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand-mark { width: 26px; height: 26px; flex: none; isolation: isolate; overflow: visible; }
.brand-word { position: relative; display: inline-block; isolation: isolate; }
.brand-word .top { position: relative; color: var(--ink-blue); mix-blend-mode: var(--ink-blend); }
.brand-word .under { position: absolute; left: max(1px, .028em); top: max(1px, .024em); color: var(--ink-pink); mix-blend-mode: var(--ink-blend); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.mode-seg button { padding: 4px 12px; }
.sep { width: 1px; margin: 3px 4px; background: var(--border); }

button {
  font: inherit;
  padding: 5px 10px;
  border: 1.5px solid var(--btn-ink);
  border-radius: 7px;
  background: var(--btn);
  color: var(--fg);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--btn-shadow);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
button:hover { background: var(--btn-hover); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--btn-shadow); }
button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--btn-shadow); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--btn-ink); color: var(--accent-fg); font-weight: 700; box-shadow: 2px 2px 0 var(--ink-pink); }
button.primary:hover { filter: brightness(1.08); box-shadow: 3px 3px 0 var(--ink-pink); }
button.primary:active { box-shadow: 1px 1px 0 var(--ink-pink); }
/* Buttons that sit inside a group or a menu stay flat. */
.seg button, .menu-list button, button.linkish, .tour-dots button, .card { transform: none !important; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:hover, button:active { transform: none; } }

/* Tutorial button: a pink dotted border (the logo's ink) until the tutorial
   has been opened once. It creeps round slowly for half a minute after the
   page loads, then holds still, so it catches the eye without nagging. */
#btn-tour.nudge {
  --ant: var(--ink-pink);
  border: 2px solid transparent;
  padding: 4.5px 9.5px;
  background-image:
    linear-gradient(90deg, var(--ant) 50%, transparent 0), linear-gradient(90deg, var(--ant) 50%, transparent 0),
    linear-gradient(0deg, var(--ant) 50%, transparent 0), linear-gradient(0deg, var(--ant) 50%, transparent 0);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-origin: border-box;
  animation: ants 4s linear 8;
}
@keyframes ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
@media (prefers-reduced-motion: reduce) { #btn-tour.nudge { animation: none; } }

.split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--editor-w) 7px 1fr;
}
body.no-editor .split { grid-template-columns: 1fr; }
body.no-editor .editor-pane,
body.no-editor .divider { display: none; }

.editor-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--panel); }
/* The syntax list scrolls inside its own box, so opening it never squashes the outline or grows the page. */
.hint.syntax { flex: none; max-height: 45%; overflow-y: auto; }
#editor { min-height: 7em; }
#editor {
  flex: 1;
  min-height: 0;
  padding: 16px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fg);
  font: 14px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre;
  overflow: auto;
  tab-size: 4;
}
.hint {
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.divider {
  cursor: col-resize;
  touch-action: none;
  background: linear-gradient(to right, transparent 3px, var(--border) 3px, var(--border) 4px, transparent 4px);
}
.divider:hover { background: linear-gradient(to right, transparent 2px, var(--accent) 2px, var(--accent) 5px, transparent 5px); }

.map-pane { position: relative; min-width: 0; overflow: hidden; background: var(--map-bg); }
#map { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
#map.dragging { cursor: grabbing; }
#map .node { cursor: pointer; }
#map .dot { cursor: pointer; }
#map .dot:hover .dot-mark { stroke-width: 3.5; }

.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}
.empty[hidden] { display: none; }

.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
.zoom #btn-fit { width: auto; min-width: 32px; padding: 0 6px; font-size: 13px; }

/* ── Style panel ── */
.panel {
  position: absolute;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(340px, calc(100% - 24px));
  overflow-y: auto;
  padding: 4px 16px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.panel[hidden] { display: none; }
.panel-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px;
  padding: 10px 16px 8px;
  background: var(--panel);
  z-index: 1;
}
.panel h2 { margin: 0; font-size: 15px; }
.panel-head .random { margin-left: auto; margin-right: 8px; padding: 4px 10px; font-size: 13px; }
.panel h3 { margin: 14px 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.panel-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.panel code { font-size: 11px; }
button.icon { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  text-align: left;
  font-size: 12px;
  border-radius: 9px;
}
.card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.card svg { display: block; width: 100%; height: 64px; border-radius: 5px; }
.swatch { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border-radius: 5px; }
.swatch i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.swatch i.root { width: 20px; height: 20px; border-radius: 6px; }

.seg { display: flex; border: 1.5px solid var(--btn-ink); border-radius: 8px; overflow: hidden; box-shadow: 2px 2px 0 var(--btn-shadow); }
.seg-grid { box-shadow: none; }
.seg button { flex: 1; border: 0; border-radius: 0; box-shadow: none; }
.seg button + button { border-left: 1.5px solid var(--btn-ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); font-weight: 600; }

button:disabled { opacity: 0.4; cursor: default; }
.seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--control); }
.seg-grid button, .seg-grid button + button { border: 0; background: var(--btn); }
.seg-grid button:hover { background: var(--btn-hover); }
.seg-grid button[aria-pressed="true"] { background: var(--accent); }

/* ── Editor extras ── */
.editor-head {
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.hint.warn { color: var(--warn); }

.keep-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--notice-bg);
  color: var(--fg);
  border-bottom: 1.5px solid var(--btn-ink);
  border-left: 6px solid var(--ink-pink);
  font-size: 13px;
}
.keep-notice strong { color: var(--notice-ink); }
.keep-notice p { margin: 0; flex: 1; }
.keep-notice button { flex: none; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
button.linkish { padding: 0; border: 0; box-shadow: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline dotted; }
button.linkish:hover { color: var(--fg); background: none; }
.syntax summary { cursor: pointer; color: var(--fg); font-weight: 600; }
.syntax table { margin: 8px 0 4px; border-collapse: collapse; width: 100%; }
.syntax td { padding: 3px 8px 3px 0; vertical-align: top; }
.syntax td:last-child { color: var(--muted); }
.syntax code { font-size: 11px; padding: 1px 4px; border-radius: 4px; background: var(--btn-hover); color: var(--fg); white-space: nowrap; }
.syntax p { margin: 6px 0 0; }
.colour-chip { display: inline-block; width: 10px; height: 10px; margin-right: 3px; border-radius: 3px; vertical-align: -1px; background: var(--sw-light); box-shadow: 0 0 0 1px var(--control); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .colour-chip { background: var(--sw-dark); } }
:root[data-theme="dark"] .colour-chip { background: var(--sw-dark); }

/* ── Map extras ── */
.chip {
  position: absolute;
  top: 10px;
  left: 12px;
  max-width: calc(100% - 24px);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  opacity: 1;
}
.chip:hover { color: var(--fg); }
#map a.link { cursor: pointer; }
#map a.link:hover tspan { opacity: 0.75; }

.note-card {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 13px;
}
.note-card p { margin: 6px 0 0; }
.note-card a { color: var(--accent); }
.note-card code { font-size: 12px; }

/* ── Menu, toast, dialogs ── */
.menu { position: relative; }
.menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.menu-list button { border: 0; text-align: left; box-shadow: none; }
.menu-list button small { display: block; max-width: 30ch; margin-top: 2px; font-size: 11.5px; line-height: 1.35; color: var(--muted); white-space: normal; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: var(--fg);
  color: var(--bg);
  box-shadow: var(--shadow);
}
.toast button { background: transparent; color: inherit; border-color: currentColor; white-space: nowrap; }

.dlg {
  width: min(440px, calc(100% - 32px));
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--fg);
  box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgba(0, 0, 0, 0.35); }
.dlg h2 { margin: 0 0 6px; font-size: 16px; }
.dlg p { margin: 0 0 12px; color: var(--muted); }
.dlg p.warn { color: var(--warn); margin-top: 10px; }
.dlg label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; }
.dlg label.check { justify-content: flex-start; }
.dlg select, .dlg input[type="text"] {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid var(--control);
  border-radius: 7px;
  background: var(--btn);
  color: var(--fg);
}
.dlg .row { display: flex; gap: 6px; }
.dlg .row input { flex: 1; min-width: 0; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ── Presentation ── */
body.presenting .bar,
body.presenting .editor-pane,
body.presenting .divider,
body.presenting .zoom,
body.presenting .chip { display: none; }
body.presenting .split { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.presenting #viewport [data-branch] { transition: opacity 0.45s ease; }
#viewport .ghost { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  body.presenting #viewport [data-branch] { transition: none; }
}
.present-bar {
  position: absolute;
  left: 50%;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(760px, calc(100% - 32px));
  padding: 8px 10px;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.present-bar > button { flex: none; }
#pres-prev, #pres-next { width: 36px; height: 36px; padding: 0; font-size: 20px; }
.pres-caption { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pres-caption strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-caption span { color: var(--muted); font-size: 13px; }
.pres-count { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Print ── */
#print-area { display: none; }
@media print {
  body { display: block; background: #fff; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: flex; justify-content: center; align-items: center; }
  #print-area svg { display: block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 720px) {
  .chip { display: none; }
  .brand-word { display: none; }
  .actions { margin-left: 0; }
  .sep { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: 38vh minmax(0, 1fr); }
  .divider { display: none; }
  .editor-pane { border-bottom: 1px solid var(--border); }
  body.no-editor .split { grid-template-rows: minmax(0, 1fr); }
  .bar { padding: 8px 12px; }
}
.seg-grid button:last-child:nth-child(3n+2) { grid-column: span 2; }
.grid > .card { min-width: 0; }
.swatch { overflow: hidden; }
.panel { overflow-x: hidden; }

/* ── Tutorial ── */
.dlg.tour { width: min(820px, calc(100% - 24px)); padding: 14px 18px 16px; }
.tour-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-count { color: var(--muted); font-size: 12px; }
.dlg.tour { max-height: calc(100vh - 24px); overflow: auto; }
.tour-slide { display: flex; flex-direction: column; gap: 14px; }
.tour-visual { display: flex; flex-direction: column; height: 270px; min-width: 0; }
.tour-pair { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 8px; flex: 1; min-height: 0; }
.tour-code {
  margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); font: 12px/1.65 var(--mono, ui-monospace, Consolas, monospace); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto;
}
.tour-map { border: 1px solid var(--border); border-radius: 9px; min-height: 140px; display: block; width: 100%; height: 100%; }
.tour-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; }
.tour-trio figure { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); text-align: center; }
.tour-trio .tour-map { min-height: 120px; flex: 1; }
.tour-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; height: 100%; align-content: center; }
.tour-cards div { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--bg); }
.tour-cards > div > b { display: block; margin-bottom: 2px; }
.tour-cards span { color: var(--muted); font-size: 13px; }
.tour-text { min-height: 150px; }
.tour-text h2 { margin: 0 0 8px; font-size: 19px; }
.tour-text p, .tour-text li { color: var(--fg); margin: 0 0 8px; line-height: 1.5; }
.tour-text ul { margin: 0 0 8px; padding-left: 18px; }
.tour-text kbd {
  font: 12px ui-monospace, Consolas, monospace; padding: 1px 5px; border: 1px solid var(--control);
  border-bottom-width: 2px; border-radius: 4px; background: var(--btn);
}
.tour-nav { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tour-dots { flex: 1; display: flex; justify-content: center; gap: 6px; }
.tour-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; box-shadow: none; background: var(--border); border-color: var(--control); }
.tour-dots button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) {
  .tour-visual { height: auto; }
  .tour-pair, .tour-cards { grid-template-columns: minmax(0, 1fr); }
  .tour-pair .tour-code { max-height: none; }
  .tour-map { height: 200px; }
  .tour-trio { grid-template-columns: minmax(0, 1fr); }
  .tour-trio figure:nth-child(n+2) { display: none; }
}

/* ── Self-hosted font (no requests to other sites) ── */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Indent buttons: shown on touch screens, which have no Tab key ── */
.indent-tools { display: none; gap: 6px; padding: 6px 12px; border-top: 1px solid var(--border); }
.indent-tools button { flex: 1; padding: 6px 8px; font-size: 13px; }
@media (pointer: coarse) { .indent-tools { display: flex; } }
body.touch .indent-tools { display: flex; }

/* ── Privacy dialog ── */
.dlg.privacy { width: min(560px, calc(100% - 24px)); }
.dlg.privacy ul { margin: 0 0 12px; padding-left: 18px; }
.dlg.privacy li { margin: 0 0 8px; line-height: 1.5; }
.dlg .credit { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.dlg .credit a { color: var(--accent); }
.keep-notice .linkish, .keep-notice .linkish:hover { color: var(--fg); font-size: inherit; }

/* ── Phones: a compact notice so the map stays visible ── */
@media (max-width: 720px) {
  .keep-notice { flex-wrap: wrap; gap: 8px; padding: 8px 12px; font-size: 12.5px; }
  .keep-notice p { flex: 1 1 100%; }
  .keep-notice .long { display: none; }
  #hint-simple { display: none; }
  .keep-notice button { flex: 1; }
  .actions { gap: 4px; }
  .actions button { padding: 5px 8px; font-size: 12.5px; }
}
@media (min-width: 721px) { .keep-notice .short { display: none; } }

/* Atkinson Hyperlegible, for the Hyperlegible map style */
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/atkinson-hyperlegible-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Gochi Hand, for the Handwritten map style (one weight; other alphabets use the fallback) */
@font-face {
  font-family: 'Gochi Hand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/gochi-hand-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Permanent Marker, for the Poster map style (one weight; other alphabets use the fallback) */
@font-face {
  font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/permanent-marker-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Phones: tutorial fits the visible screen. The slide scrolls between a
   fixed header and fixed Back / Next, so Next is always reachable. dvh is the
   height left after the browser's own bars; vh is the fallback. ── */
@media (max-width: 720px) {
  .dlg.tour[open] {
    display: flex; flex-direction: column;
    width: calc(100% - 16px); max-width: none;
    height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none;
    padding: 10px 12px 12px; overflow: hidden;
  }
  .tour-slide { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; gap: 10px; }
  .tour-text { min-height: 0; }
  .tour-text h2 { font-size: 17px; }
  .tour-map { height: 170px; }
  .tour-pair .tour-code { max-height: 150px; }
  .tour-nav { flex: none; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
}

/* ── Phones: the style panel is a bottom sheet over the lower part of the map,
   and the outline steps aside while it's open, so the map stays in view
   above the sheet while you try options. ── */
@media (max-width: 720px) {
  body.panel-open .split { grid-template-rows: minmax(0, 1fr); }
  body.panel-open .editor-pane { display: none; }
  .panel {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; height: 52%;
    padding: 0 12px 12px;
  }
  .panel-head { margin: 0 -12px; padding: 8px 12px 6px; }
  .panel h3 { margin: 10px 0 6px; }
  body.panel-open .zoom { bottom: calc(52% + 16px); }
  body.panel-open .chip, body.panel-open .note-card { display: none; }
}

/* Phone toast: message on top, buttons side by side underneath, so the text isn't squeezed into a thin column. */
@media (max-width: 720px) {
  .toast { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; flex-wrap: wrap; gap: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.35; }
  .toast #toast-msg { flex: 1 1 100%; }
  .toast button { flex: 1 1 0; min-width: 0; white-space: normal; }
}