/* Fonts are self-hosted (SIL Open Font License, see assets/fonts): Alegreya Sans for text, Cinzel for headings. Latin only; other scripts fall back to the system font. */
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/AlegreyaSans-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: "Alegreya Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/AlegreyaSans-500.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: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/AlegreyaSans-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; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../assets/fonts/Cinzel.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; }
/* Tarnished's Ledger styles.
   Layout: a side rail (brand, progress, navigation) beside the content on wide screens;
   on phones the rail collapses to a header and the navigation becomes a bottom bar. */

:root {
  --bg: var(--l-bg);
  --surface: var(--l-surface);
  --raised: var(--l-raised);
  --fg: var(--l-fg);
  --muted: var(--l-muted);
  --line: var(--l-line);
  --edge: var(--l-edge);
  --accent: var(--acc-l);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-ink: color-mix(in srgb, var(--accent) 75%, var(--fg)); /* text on an accent tint: 5.8:1 or better in every accent and theme */
  --muted-ink: color-mix(in srgb, var(--muted) 78%, var(--fg)); /* muted text on an accent tint */
  --warn: #a3392a;
  --warn-soft: #f4ddd5;
  --ok: #4a6b3a;
  --ok-soft: #dfe8d4;
  --onaccent: #fffdf6;
  --acc-l: #7c5d15;
  --acc-d: #d6b159;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --fs-xs: .75rem; --fs-sm: .82rem; --fs-md: .9rem; --fs-ui: .95rem; --fs-lg: 1.05rem; --fs-xl: 1.3rem;
  --z-nav: 20; --z-sticky: 30; --z-toast: 40; --z-skip: 60;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --fs: 17px;
  --safe-t: env(safe-area-inset-top, 0px);
  --top-inset: var(--safe-t); /* the space the page keeps clear at the top; the installed iPhone/iPad app adds a gap (see html.ios-pwa) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  font-size: var(--fs);
  color-scheme: light;
}
/* Surfaces, lines and text follow the accent: l = light theme, d = dark theme. Contrast is checked for every pair. */
:root { --l-bg: #ece8de; --l-surface: #f8f6f0; --l-raised: #fffdf8; --l-fg: #221f18; --l-muted: #655e4e; --l-line: #d6cfbf; --l-edge: #8a8271;
  --d-bg: #13120d; --d-surface: #1c1a14; --d-raised: #24211a; --d-fg: #ede6d5; --d-muted: #aaa18b; --d-line: #35312a; --d-edge: #7a7565; }
:root[data-accent="crimson"] { --l-bg: #f0dade; --l-surface: #faeef0; --l-raised: #fff8f9; --l-fg: #22181a; --l-muted: #6c474d; --l-line: #ddb8be; --l-edge: #926a70;
  --d-bg: #160a0c; --d-surface: #201012; --d-raised: #2a1418; --d-fg: #e8dadd; --d-muted: #be838b; --d-line: #3b2428; --d-edge: #90636b; }
:root[data-accent="frost"] { --l-bg: #d9e5f1; --l-surface: #edf4fb; --l-raised: #f8fcff; --l-fg: #181d22; --l-muted: #46596d; --l-line: #b7cade; --l-edge: #687d93;
  --d-bg: #091017; --d-surface: #0f1821; --d-raised: #141f2a; --d-fg: #dae1e8; --d-muted: #7d9ec0; --d-line: #232f3c; --d-edge: #576f88; }
:root[data-accent="silver"] { --l-bg: #e1e2e9; --l-surface: #f2f2f6; --l-raised: #fafafd; --l-fg: #181922; --l-muted: #535560; --l-line: #c4c6d1; --l-edge: #777884;
  --d-bg: #0e0e12; --d-surface: #15161b; --d-raised: #1b1c23; --d-fg: #dadce8; --d-muted: #999cb0; --d-line: #2b2c34; --d-edge: #686a77; }
:root[data-accent="verdant"] { --l-bg: #dfe8d9; --l-surface: #eff5eb; --l-raised: #f9fcf6; --l-fg: #17201a; --l-muted: #475d4c; --l-line: #bccdb8; --l-edge: #688169;
  --d-bg: #0b130e; --d-surface: #111c14; --d-raised: #17251a; --d-fg: #dae6dc; --d-muted: #86ae8f; --d-line: #25362a; --d-edge: #5b7a62; }
:root[data-accent="crimson"] { --acc-l: #9b2f3a; --acc-d: #e0727c; }
:root[data-accent="frost"] { --acc-l: #2f6487; --acc-d: #86b9dc; }
:root[data-accent="silver"] { --acc-l: #5d5f66; --acc-d: #c3c6ce; }
:root[data-accent="verdant"] { --acc-l: #2f6b3a; --acc-d: #7fc48b; }
:root[data-size="s"] { --fs: 15px; }
:root[data-size="l"] { --fs: 19.5px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: var(--d-bg); --surface: var(--d-surface); --raised: var(--d-raised); --fg: var(--d-fg); --muted: var(--d-muted); --line: var(--d-line); --edge: var(--d-edge);
    --accent: var(--acc-d); --warn: #e57e66; --warn-soft: #3b211b; --ok: #97b481; --ok-soft: #222b1c; --onaccent: #14130e;
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --bg: var(--d-bg); --surface: var(--d-surface); --raised: var(--d-raised); --fg: var(--d-fg); --muted: var(--d-muted); --line: var(--d-line); --edge: var(--d-edge);
  --accent: var(--acc-d); --warn: #e57e66; --warn-soft: #3b211b; --ok: #97b481; --ok-soft: #222b1c; --onaccent: #14130e;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); }
body {
  margin: 0;
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--fs-lg);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: var(--top-inset);
  z-index: var(--z-sticky);
  background: var(--bg);
}
button { font: inherit; color: inherit; }
a { color: var(--accent); }
.btn:focus-visible, .nav button:focus-visible, summary:focus-visible, .check:focus-visible,
.seg button:focus-visible, .switch:focus-visible, .jump:focus-visible, input:focus-visible,
textarea:focus-visible, .pin:focus-visible, .qclear:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* shell */
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  padding-left: max(16px, var(--safe-l));
  padding-right: max(16px, var(--safe-r));
  padding-block: 14px calc(92px + var(--safe-b));
}
main { min-width: 0; }
section[hidden] { display: none; }

/* brand */
.top { display: flex; align-items: center; gap: 12px; }
.top img { width: 44px; height: 44px; border-radius: var(--r-md); flex: none; }
.top h1 { font-family: var(--display); font-weight: 700; font-size: 1.18rem; line-height: 1.1; margin: 0; letter-spacing: .04em; min-width: 0; }
.top h1 small { display: block; font-family: var(--body); font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0; color: var(--muted); margin-top: 3px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--surface); }
.pill[hidden] { display: none; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill.on i { background: var(--ok); }
.pill.busy i { background: var(--accent); }
.pill.err i { background: var(--warn); }

/* progress hero */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 16px 0 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ring { position: relative; width: 104px; height: 104px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .trk { stroke: var(--line); fill: none; stroke-width: 7; }
.ring .val { stroke: var(--accent); fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ring .inner { stroke: var(--accent); opacity: .35; fill: none; stroke-width: 1; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.ring b span { display: block; font-family: var(--body); font-size: var(--fs-xs); color: var(--muted); font-weight: 400; margin-top: -4px; letter-spacing: .08em; text-transform: uppercase; }
.minis { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mini { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: var(--fs-md); }
.mini span:last-of-type { font-variant-numeric: tabular-nums; color: var(--muted); }
.mini .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mini .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }

/* navigation */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
  padding-left: max(4px, var(--safe-l));
  padding-right: max(4px, var(--safe-r));
}
.nav [role="tablist"] { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.nav button { background: none; border: 0; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: var(--fs-xs); letter-spacing: 0; color: var(--muted); cursor: pointer; min-height: 54px; min-width: 0; }
.nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-selected="true"] { color: var(--accent); font-weight: 700; }

/* undo toast */
.toast { position: fixed; left: 12px; right: 12px; width: fit-content; margin-inline: auto; bottom: calc(var(--safe-b) + 70px); z-index: var(--z-toast); display: flex; align-items: center; gap: 4px 12px; max-width: 520px; padding: 6px 6px 6px 16px; border-radius: var(--r-lg); background: var(--fg); color: var(--bg); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); font-size: var(--fs-md); animation: toastin .22s cubic-bezier(.16, 1, .3, 1); }
.toast[hidden] { display: none; }
.toast span { min-width: 0; padding-block: 8px; }
.toast-undo { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toast-undo:focus-visible { outline: 2px solid var(--bg); outline-offset: -3px; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
.map-fs .toast { bottom: calc(var(--safe-b) + 16px); z-index: 3000; }
/* phone navigation (A3): four tabs (Route, Checklists, Map, More); the six-item set shows from 980px up */
.nav .tab-d { display: none; }
.seg.ckswitch { display: flex; margin: 12px 0; }
.seg.ckswitch button { min-height: 44px; flex: 1; font-size: var(--fs-ui); }
.seg.ckswitch[hidden], .moresheet[hidden] { display: none; }
.moresheet { position: fixed; inset: 0 0 var(--navh, 64px); z-index: 19; display: flex; flex-direction: column; justify-content: flex-end; }
.more-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.more-list { position: relative; margin: 0 max(16px, var(--safe-r)) 8px max(16px, var(--safe-l)); padding: 6px; display: grid; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 -8px 28px rgb(0 0 0 / .4); }
.more-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; border: 0; border-radius: var(--r-md); background: none; color: var(--fg); font: inherit; font-size: var(--fs-lg); text-align: left; cursor: pointer; }
.more-row svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.more-row[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.more-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (min-width: 980px) {
  .nav .tab-d { display: flex; }
  .nav .tab-m, .ckswitch, .moresheet { display: none !important; }
}

/* wide screens */
@media (min-width: 980px) {
  .toast { bottom: 24px; }
  .shell { grid-template-columns: 300px minmax(0, 1fr); column-gap: 36px; padding-block: 28px 56px; }
  .rail { position: sticky; top: calc(28px + var(--top-inset)); align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: left; margin-top: 18px; }
  .minis { width: 100%; }
  .nav { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding: 0; margin-top: 12px; }
  .nav [role="tablist"] { max-width: none; grid-template-columns: 1fr; gap: 4px; }
  .nav button { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 14px; font-size: var(--fs-ui); min-height: 46px; border-radius: var(--r-md); letter-spacing: 0; }
  .nav button:hover { background: var(--surface); }
  .nav button[aria-selected="true"] { background: var(--accent-soft); }
}
@media (min-width: 1200px) { main { padding-right: 8px; } }
@media (max-width: 380px) { .hero { grid-template-columns: 1fr; justify-items: center; } .minis { width: 100%; } }


/* phone: the progress card is one line (tap to open the bars), the brand row stays, and the "Saved" pill only shows when something is wrong */
.hero-sum { display: none; }
@media (max-width: 979.98px) {
  #savePill:not(.err) { display: none; }
  .pills { margin-top: 8px; }
  .pills:not(:has(.pill:not([hidden]):not(#savePill))):not(:has(#savePill.err)) { display: none; }
  .hero { grid-template-columns: auto 1fr; gap: 6px 14px; margin: 12px 0 2px; padding: 8px 12px 8px 10px; justify-items: stretch; }
  .hero .ring { width: 52px; height: 52px; }
  .hero .ring b { font-size: var(--fs-md); }
  .hero .ring b span { display: none; }
  .hero-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--fg); font: inherit; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; border-radius: var(--r-md); }
  .hero-sum .chev { flex: none; color: var(--muted); transition: transform .2s; }
  .hero.open .hero-sum .chev { transform: rotate(180deg); }
  .hero:not(.open) .minis { display: none; }
  .hero .minis { grid-column: 1 / -1; padding-bottom: 6px; }
}
@media (max-width: 699.98px) {
  .step[data-kind="go"] { grid-template-columns: auto 1fr; }
  .step[data-kind="go"] .ico { display: none; }
}
.jumpph { flex: none; width: 13rem; }
.jumpph select { width: 13rem; min-height: 44px; font: inherit; font-size: var(--fs-md); padding: 0 30px 0 12px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--raised); color: var(--fg); cursor: pointer; max-width: 100%; }
/* phone: search and Jump share the first row, the three toggles share the second */
@media (max-width: 600px) {
  #v-route .toolbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #v-route .toolbar .search { grid-column: span 4; flex-basis: auto; }
  #v-route .toolbar .jumpph { grid-column: span 2; min-width: 0; }
  .jumpph { width: auto; }
  #v-route .toolbar .btn { grid-column: span 2; white-space: nowrap; padding-inline: 8px; }
}

/* up next */
.next { margin: 12px 0 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.next .where small { font: var(--fs-sm) var(--display); color: var(--muted-ink); margin-left: 10px; letter-spacing: 0; }
.next .where { font-family: var(--display); font-size: var(--fs-lg); margin: 0 0 6px; }
.next p { margin: 0 0 12px; max-width: 70ch; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.next .acts { margin-top: 0; }
.btn { font-size: var(--fs-md); font-weight: 700; background: var(--raised); border: 1px solid var(--line); padding: 9px 16px; border-radius: var(--r-md); cursor: pointer; min-height: 44px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }
.btn.danger { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.btn:disabled { opacity: .5; cursor: default; }

/* route toolbar and search */
.toolbar { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.search { flex: 1 1 220px; position: relative; min-width: 0; }
.search input { width: 100%; font: inherit; font-size: var(--fs-ui); padding: 10px 44px 10px 38px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--raised); color: var(--fg); min-height: 44px; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
.search input::-webkit-search-cancel-button { display: none; }
.qclear { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--r-md); }
.qclear:hover { color: var(--fg); }
.qcount { margin: -4px 2px 10px; font-size: var(--fs-md); color: var(--muted); }
@media (max-width: 600px) { .search { flex-basis: 100%; } .toolbar .btn { flex: 1; } }
.empty { color: var(--muted); text-align: center; padding: 28px 0; }

.view-h { font-family: var(--display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: .04em; margin: 10px 0 8px; }
.note { color: var(--muted); font-size: var(--fs-md); margin: 0 0 12px; max-width: 66ch; }

/* phases */
details.phase { margin-bottom: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: calc(12px + var(--top-inset)); }
details.phase.current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
details.phase > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.4rem 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; min-height: 56px; }
.chev { width: 22px; height: 22px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
details.phase[open] .chev { transform: rotate(180deg); }
details.phase > summary:hover .chev { stroke: var(--accent); }
details.phase > summary:focus-visible { outline-offset: -3px; }
details.phase > summary::-webkit-details-marker { display: none; }
.num { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.phase.done .num { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.ph-title { min-width: 0; }
.ph-title h3 { font-family: var(--display); font-weight: 500; font-size: var(--fs-lg); margin: 0; line-height: 1.25; text-wrap: balance; }
.ph-title small { color: var(--muted); font-size: var(--fs-sm); }
.ph-bar { height: 3px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.ph-bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.phase.done .ph-bar i { background: var(--ok); }
.count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-links { display: flex; gap: 12px; padding: 0 14px 10px; flex-wrap: wrap; }
.ph-links a { font-size: var(--fs-sm); display: inline-block; padding: 8px 0; }
ol.steps { list-style: none; margin: 0; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }

/* route as a road: finished phases are quiet green stops, the current phase is the loud one, upcoming phases are quiet
   stops; all of them joined by a thin line through their number discs. A long run of finished stops folds into one row. */
.trail { margin: 0; }
.trail[hidden], .missable[hidden] { display: none; }
.trail-btn { width: 100%; display: grid; grid-template-columns: 2.4rem 1fr auto auto; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--fg); background: transparent; border: 0; border-radius: 12px; padding: 8px 14px; min-height: 52px; cursor: pointer; position: relative; }
.trail-btn:hover { background: var(--surface); }
.trail-btn .num { position: relative; z-index: 1; justify-self: center; width: 1.9rem; height: 1.9rem; border-width: 1px; background: var(--ok); border-color: var(--ok); color: var(--surface); }
.trail-btn .num svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail-btn .ph-title { display: block; }
.trail-btn .ph-t { display: block; font-family: var(--display); font-weight: 400; font-size: .95rem; line-height: 1.25; }
.trail-btn .ph-title small { display: block; }
.trail-btn .ph-bar { display: block; }
.trail-btn .ph-bar i { width: 100%; background: var(--ok); }
.trail-btn .count { color: var(--ok); }
.trail-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.trail-btn:hover .chev { stroke: var(--accent); }
.trail-btn::before { content: ""; position: absolute; left: calc(14px + 1.2rem - 1px); top: 50%; bottom: 0; width: 2px; background: color-mix(in srgb, var(--ok) 55%, transparent); }
.phase.folded { display: none; }
.searching .phase.folded:not(.nomatch) { display: block; }
.searching .trail, .searching .missable, .hide-done .trail { display: none; }
.missable { margin: 0 0 10px; }
.missable-btn { width: 100%; display: block; text-align: left; font: inherit; font-size: .9rem; line-height: 1.4; color: var(--fg); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 10px; padding: 9px 14px; min-height: 44px; cursor: pointer; }
details.phase.current { border-color: var(--accent); margin-bottom: 0; }
details.phase.current > summary { padding-block: 16px; }
details.phase.current .num { background: var(--accent); border-color: var(--accent); color: var(--onaccent); width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
details.phase.current .ph-title h3 { font-size: 1.25rem; font-weight: 700; }
details.phase.current .count { color: var(--fg); font-size: .95rem; font-weight: 700; }
details.phase.ahead, details.phase.past { background: transparent; border-color: transparent; border-radius: 0; margin-bottom: 0; }
/* collapsed stops have no border, so the road line runs unbroken from row to row and lines up with the folded row above */
details.phase.ahead:not([open]), details.phase.past:not([open]) { border-width: 0; }
details.phase.ahead[open], details.phase.past[open] { background: var(--surface); border-color: var(--line); border-radius: 12px; margin-block: 6px 10px; }
details.phase.ahead > summary, details.phase.past > summary { position: relative; min-height: 52px; padding-block: 8px; }
details.phase.ahead > summary:hover, details.phase.past > summary:hover { background: var(--surface); }
details.phase.ahead .num { position: relative; z-index: 1; justify-self: center; width: 1.9rem; height: 1.9rem; font-size: .8rem; border-width: 1px; border-color: var(--edge); color: var(--muted); background: var(--bg); }
details.phase.ahead .ph-title h3, details.phase.past .ph-title h3 { font-size: .95rem; font-weight: 400; }
details.phase.ahead .ph-bar { display: none; }
details.phase.past .num { position: relative; z-index: 1; justify-self: center; width: 1.9rem; height: 1.9rem; font-size: .8rem; border-width: 1px; border-color: var(--ok); color: var(--ok); background: var(--bg); }
details.phase.past.done .num { background: var(--ok); color: var(--surface); }
details.phase.past .ph-bar i { background: var(--ok); }
details.phase.past .count { color: var(--ok); }
details.phase.ahead:not([open]) > summary::before { content: ""; position: absolute; left: calc(14px + 1.2rem - 1px); top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--edge) 55%, transparent); }
details.phase.ahead:not([open]):last-of-type > summary::before { bottom: 50%; }
details.phase.past:not([open]) > summary::before { content: ""; position: absolute; left: calc(14px + 1.2rem - 1px); top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--ok) 55%, transparent); }
details.phase.past:not([open]):first-of-type > summary::before { top: 50%; }
.trail:not([hidden]) ~ details.phase.past:not([open]):first-of-type > summary::before { top: 0; }
details.phase.past:not([open]):last-of-type > summary::before { bottom: 50%; }

.step { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: start; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 12px; cursor: pointer; transition: background .25s; }
.step.tip { grid-template-columns: auto 1fr; background: transparent; border-style: dashed; cursor: default; }
.step.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.step.flash { background: var(--accent-soft); }
.step.earned { box-shadow: inset 0 0 0 2px var(--accent); transition: box-shadow .3s; }
.step.checked { background: var(--surface); }
.step.checked .ico { opacity: .6; }
.step.checked .txt p { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.compact .step { padding: 7px 10px; gap: 10px; grid-template-columns: auto 1fr; }
.compact .ico, .compact .chips, .compact .links { display: none; }
.hide-done .step.checked, .hide-done .phase.done, .no-tips .step.tip, .step.nomatch, .phase.nomatch { display: none; }

.check { position: relative; width: 28px; height: 28px; border: 2px solid var(--muted); border-radius: var(--r-sm); display: grid; place-items: center; background: transparent; padding: 0; cursor: pointer; flex: none; }
.step .check::after { content: ""; position: absolute; inset: -10px; }
.step.checked .check, .row.checked .check { background: var(--ok); border-color: var(--ok); }
.check svg { width: 17px; height: 17px; stroke: var(--surface); stroke-width: 3; fill: none; opacity: 0; }
.step.checked .check svg, .row.checked .check svg { opacity: 1; }
.ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.ico svg, .lico svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.step.warn .ico { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.tipmark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent); font-family: var(--display); font-weight: 700; }
.txt { min-width: 0; }
.txt p { margin: 0; max-width: 72ch; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { max-width: 100%; overflow-wrap: anywhere; font-size: var(--fs-xs); letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; }
.chip.trophy { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.chip.legend { background: var(--accent); border-color: var(--accent); color: var(--onaccent); }
.chip.miss { background: var(--warn); border-color: var(--warn); color: var(--surface); }
.chip.key { border-color: var(--accent); color: var(--accent); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.links a { font-size: var(--fs-sm); padding: 4px 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }

/* lighter step rows on phones: tick, text, one muted meta line; wiki and map sit behind "More" (always open on the current step) */
.step .meta, .step .more { display: none; }
@media (max-width: 699.98px) {
  ol.steps { padding: 0 8px 8px; gap: 5px; }
  .step:not(.tip) { grid-template-columns: auto 1fr auto; gap: 10px; padding: 7px 2px 7px 11px; }
  .step:not(.tip) .txt p { line-height: 1.38; }
  .step:not(.tip) .ico, .step:not(.tip) .chip:not(.miss), .step:not(.tip) .links { display: none; }
  .step:not(.tip) .chips { margin-top: 4px; }
  .step .meta { display: block; margin: 3px 0 0; font-size: .8rem; line-height: 1.3; color: var(--muted); }
  .step.warn .chips + .meta { margin-top: 3px; }
  .step .more { display: grid; place-items: center; position: relative; width: 30px; height: 30px; margin-top: -2px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
  .step .more::after { content: ""; position: absolute; inset: -6px -6px -6px -6px; }
  .step .more svg { width: 20px; height: 20px; fill: currentColor; }
  .step .more[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); }
  .step.open .links, .step.cur .links { display: flex; }
  .step.cur .more { display: none; }
  .step.cur:not(.checked) { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .step .links a, .step .links .maplink { min-height: 44px; display: inline-flex; align-items: center; padding-block: 0; }
  .step.checked .meta { display: none; }
  .step.checked.open .meta { display: block; }
  .toolbar .btn { padding-inline: 8px; white-space: nowrap; }
  .toolbar .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
  .compact .step .meta { display: none; }
  .compact .step:not(.tip) { grid-template-columns: auto 1fr auto; padding: 5px 4px 5px 10px; }
}

/* lists */
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px 14px 6px; margin-bottom: 12px; }
.group h3 { font-family: var(--display); font-weight: 500; font-size: var(--fs-lg); margin: 10px 0 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.group h3 .c { font-family: var(--body); font-size: var(--fs-md); color: var(--muted); font-variant-numeric: tabular-nums; }
.cols { display: grid; gap: 0 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.row { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: start; padding: 10px 0; min-height: 56px; border-top: 1px solid var(--line); }
.row.tr { align-items: center; }
.row[data-tog] { cursor: pointer; }
.row.checked .row-name { color: var(--muted); text-decoration: line-through; }
.row .check { width: 28px; height: 28px; border-radius: var(--r-sm); position: relative; }
.row button.check::after { content: ""; position: absolute; inset: -10px; }
.row[data-tog]:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row[data-tog]:focus-within { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row-name { font-weight: 700; }
.row-where { color: var(--muted); font-size: var(--fs-md); }
.grade { display: inline-block; width: .65em; height: .65em; border-radius: 50%; margin-right: 8px; }
.g-p { background: #7fa8c4; } .g-g { background: #d2a637; } .g-s { background: #a7a7ad; } .g-b { background: #ae7646; }
.lico { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.badge { width: 40px; height: 40px; flex: none; }
.row:not(.checked) .badge { opacity: .5; filter: grayscale(.6); }
.jump { color: var(--accent); text-decoration: underline; background: none; border: 0; padding: 0; font-size: var(--fs-md); cursor: pointer; position: relative; }
button.jump::after { content: ""; position: absolute; inset: -12px -6px; }
.gbar { height: 3px; background: var(--line); border-radius: 2px; margin: 0 0 4px; overflow: hidden; }
.gbar i { display: block; height: 100%; background: var(--accent); }
.gbar + .cols .row:first-child { border-top: 0; }
@media (min-width: 760px) { .gbar + .cols .row:nth-child(2) { border-top: 0; } }
.empty .btn { margin-top: 4px; }
.seg-filter { margin-bottom: 12px; }

/* map */
.mapcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; margin-bottom: 14px; }
/* Map toolbar. The right cluster (Go to, Find me, Maximize or Restore) is always the top-right of the map card: beside the left
   cluster (world, map, region, markers) on wide screens, above it on phones. The left cluster wraps; the right one never moves. */
.maptools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; padding: 2px 0 8px; }
.mt-left { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mt-tools { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; justify-self: end; }
.mapcard .seg button, .mapcard .btn { min-height: 44px; }
.mapcard:not(.fs) .mt-subs { flex-basis: 100%; border: 0; background: none; gap: 6px; overflow: visible; }
.mapcard:not(.fs) .mt-subs button { border: 1px solid var(--edge); border-radius: 999px; min-height: 36px; padding: 0 14px; background: var(--raised); }
.mapcard:not(.fs) .mt-subs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--onaccent); font-weight: 700; }
.mapgo, .jumpph { position: relative; display: block; max-width: 100%; }
.mapgo::after, .jumpph::after { content: ""; position: absolute; right: 11px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.mapgo select, .jumpph select { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: none; padding-right: 40px; text-overflow: ellipsis; }
.mt-go { flex: none; width: 12rem; }
.mt-tools .btn { white-space: nowrap; }
/* narrower than a laptop: Find me and Maximize shrink to icons so the right cluster stays compact */
@media (max-width: 1100px) {
  .mt-tools #mapHere, .mt-tools #mapFs, .mt-tools #mapExit { flex: none; width: 44px; padding: 0; }
  .mt-tools .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* phones: the right cluster (Go to, Find me, Maximize) is the first row. Markers sits beside it when the card is wide enough,
   World + Layer are one row of chips under it. Maximized, those controls move into a bottom sheet behind a Layers button. */
.mt-layers, .mt-sheet-h { display: none; }
.mt-modes, .mt-chips { display: contents; }
.mapcard { container-type: inline-size; }
.mt-scrim { position: absolute; inset: 0; z-index: 1240; background: rgb(0 0 0 / .45); }
@media (max-width: 699.98px) {
  .maptools { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .mt-tools { grid-column: 1; grid-row: 1; justify-self: stretch; gap: 6px; }
  .mt-left { display: contents; }
  .mt-modes { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .mt-go { flex: 1 1 0; width: auto; min-width: 5rem; }
  .mt-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .mt-chips::-webkit-scrollbar { display: none; }
  .mt-chips:has(#mapWorld:not([hidden])) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }
  .mapcard:not(.fs) .mt-chips .seg { flex: none; flex-wrap: nowrap; border: 0; background: none; gap: 6px; overflow: visible; }
  .mapcard:not(.fs) .mt-chips .seg button { border: 1px solid var(--edge); border-radius: 999px; min-height: 36px; padding: 0 12px; background: var(--raised); white-space: nowrap; }
  .mapcard:not(.fs) .mt-chips .seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--onaccent); font-weight: 700; }
  .mapcard:not(.fs) .mt-chips #mapWorld { padding-right: 6px; border-right: 1px solid var(--line); margin-right: 2px; }
  .mapcard:not(.fs) .mapsearch { right: 10px; max-width: none; }
  .mapcard:not(.fs) .mapctl { top: 66px; }
  /* maximized: one row (Layers, then the cluster at the top right); the rest is a bottom sheet */
  .mapcard.fs .maptools { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; }
  .mapcard.fs .mt-layers { display: inline-flex; align-items: center; justify-content: center; gap: 8px; grid-column: 1; grid-row: 1; }
  .mapcard.fs .mt-tools { grid-column: 2; grid-row: 1; }
  @container (max-width: 21rem) { .mapcard.fs .mt-layers { width: 44px; padding: 0; justify-content: center; } .mapcard.fs .mt-layers span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
  .mapcard.fs .mt-left { display: none; }
  .mapcard.fs.layers-open .mt-left { display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: absolute; z-index: 1250; left: 0; right: 0; bottom: 0; max-height: 75%; overflow: auto; padding: 10px calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -8px 28px rgb(0 0 0 / .4); }
  .mapcard.fs .mt-sheet-h { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-family: var(--display); }
  .mapcard.fs .mt-sheet-h .mp-x { position: static; }
  .mapcard.fs .mt-modes { display: grid; gap: 10px; }
  .mapcard.fs .mt-chips, .mapcard.fs .mt-chips:has(#mapWorld:not([hidden])) { display: grid; gap: 10px; overflow: visible; mask-image: none; -webkit-mask-image: none; padding-right: 0; }
  .mapcard.fs #mapWorld, .mapcard.fs #mapLayer { display: flex; }
  .mapcard.fs #mapWorld[hidden], .mapcard.fs #mapLayer[hidden] { display: none; }
  .mapcard.fs #mapWorld button, .mapcard.fs #mapLayer button, .mapcard.fs .mt-subs button { flex: 1 0 auto; padding-inline: 10px; white-space: nowrap; }
  .mapcard.fs .mt-subs { border: 1px solid var(--edge); }
  .mapcard.fs .mt-subs button { flex: 1; }
}
.mapsearch { position: absolute; z-index: 1050; top: 10px; left: 10px; right: 64px; max-width: 380px; }
.mapsearch input { width: 100%; box-shadow: 0 2px 8px rgb(0 0 0 / .35); font: inherit; font-size: var(--fs-ui); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--raised); color: var(--fg); min-height: 44px; }
.mapsearch input:disabled { opacity: .6; }
#mapResults { position: absolute; z-index: 1300; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgb(0 0 0 / .3); max-height: min(50vh, 340px); overflow: auto; }
#mapResults[hidden] { display: none; }
#mapResults button { width: 100%; min-height: 44px; display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer; }
#mapResults button:hover, #mapResults button:focus-visible { background: var(--accent-soft); }
#mapResults small { grid-column: 2; color: var(--muted); }
#mapResults .more { color: var(--muted); font-size: var(--fs-md); padding: 8px; }
.mapstatus { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.mapstatus:not(:empty) { padding: 0 0 8px; }
.mapwrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mapstage { position: relative; height: var(--mh, clamp(340px, calc(100svh - 250px), 780px)); border-radius: var(--r-md); overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: #0b0a08; }
#map { position: absolute; inset: 0; background: #0b0a08; font: inherit; }
#map.leaflet-container:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mapimg { max-width: none !important; }
.mapctl { position: absolute; z-index: 1000; top: 10px; right: 10px; display: grid; gap: 6px; }
.mapctl button { width: 44px; height: 44px; font-size: var(--fs-xl); line-height: 1; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--fg); cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.mapctl button:disabled { opacity: .45; cursor: default; }
.mapctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.maptip { position: absolute; z-index: 1050; pointer-events: none; background: var(--raised); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 8px; font-size: var(--fs-sm); max-width: 240px; box-shadow: 0 2px 8px rgb(0 0 0 / .35); }
.maploading { position: absolute; inset: 0; z-index: 1100; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px; color: var(--muted); background: color-mix(in srgb, var(--bg) 82%, transparent); }
.maploading.err { color: var(--fg); }
.maploading[hidden], .mapsheet[hidden], .mappanel[hidden], .maptip[hidden] { display: none; }
.mapsheet { position: absolute; z-index: 1000; left: 8px; right: 8px; bottom: 8px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r-lg); padding: 12px 14px; box-shadow: 0 8px 28px rgb(0 0 0 / .45); max-height: 60%; overflow: auto; }
.mapsheet p { margin: 6px 0; font-size: var(--fs-md); max-width: 60ch; }
.ms-x, .mp-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; font-size: 1.5rem; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: var(--r-md); }
.ms-h { display: flex; gap: 10px; align-items: center; padding-right: 40px; }
.ms-h > div { display: grid; min-width: 0; }
.ms-h small { color: var(--muted); }
.ms-num { font-family: var(--display); font-weight: 700; font-size: var(--fs-xl); color: var(--accent); min-width: 2.2rem; text-align: center; }
.ms-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ms-act .btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--fg); }
.ms-act .btn.primary { color: var(--onaccent); }
.mappanel { position: absolute; z-index: 1200; left: 0; right: 0; bottom: 0; max-height: 64%; overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg) 14px 10px 10px; box-shadow: 0 -8px 28px rgb(0 0 0 / .4); padding: 8px 12px 12px; display: grid; gap: 4px; align-content: start; grid-auto-rows: max-content; }
.mappanel[hidden] { display: none; }
.mp-h { position: relative; display: flex; align-items: center; min-height: 44px; padding-right: 44px; font-family: var(--display); }
.mp-row { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.mp-row input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.mp-row span { flex: 1; min-width: 0; }
.mp-row em { font-style: normal; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.mp-sw { font-weight: 700; }
.mappanel .seg { display: flex; }
.mappanel .seg button { flex: 1; padding: 7px 4px; font-size: var(--fs-sm); }
.mappanel details { border-top: 1px solid var(--line); }
.mappanel summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-family: var(--display); font-size: var(--fs-ui); }
.mappanel .note { font-size: var(--fs-sm); margin: 6px 0 0; }
@media (min-width: 900px) {
  .mapwrap.panel-open { grid-template-columns: minmax(0, 1fr) 320px; }
  .mappanel { position: static; max-height: var(--mh, clamp(340px, calc(100svh - 250px), 780px)); border-radius: var(--r-md); box-shadow: none; }
  .mp-x { display: none; }
  .mapsheet { right: auto; width: 340px; top: 64px; bottom: auto; left: 10px; max-height: calc(100% - 80px); }
}
.mp-pin-wrap { background: none; border: 0; outline: none; }
.mp-pin-wrap { width: 0; height: 0; }
.mp-pin-wrap::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; }
.mp-pin { display: grid; place-items: center; position: absolute; left: calc(var(--pin, 18px) / -2); top: calc(var(--pin, 18px) / -2); width: var(--pin, 18px); height: var(--pin, 18px); border-radius: 50%; background: var(--raised); color: var(--fg); border: 2px solid var(--muted); font: 700 calc(var(--pin, 18px) * .5) var(--display); box-shadow: 0 1px 5px rgb(0 0 0 / .6), 0 0 0 1.5px rgb(255 253 246 / .75); }
.mp-pin.done { background: var(--ok); color: var(--surface); border-color: var(--surface); }
.mp-pin.cur { background: var(--accent); color: var(--onaccent); border-color: var(--surface); }
.mp-pin.cur::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--accent); opacity: .7; animation: mppulse 2s infinite; }
.mp-pin.sel { outline: 3px solid var(--fg); outline-offset: 2px; }
.mp-pin-wrap:hover .mp-pin, .mp-pin-wrap:focus-visible .mp-pin { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes mppulse { to { transform: scale(1.5); opacity: 0; } }
.mp-seg { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 2px #000); }
.mp-seg.walked { stroke: #8fd06a; stroke-width: 4; }
.mp-seg.next { stroke: #f2c14e; stroke-width: 4; }
.mp-seg.ahead { stroke: rgb(255 253 246 / .5); stroke-width: 2; stroke-dasharray: 3 9; }
@media (prefers-reduced-motion: reduce) { .mp-pin.cur::after { animation: none; } }
.maplegend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: var(--fs-xs); color: var(--muted); padding: 2px 0 4px; }
.maplegend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.phaselist { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.phaselist button { width: 100%; text-align: left; display: grid; grid-template-columns: 1.8rem 1fr; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; min-height: 42px; }
.phaselist button b { font-family: var(--display); color: var(--accent); }
.phaselist .done b { color: var(--ok); }
.phaselist .cur { border-color: var(--accent); }

/* prose, guide */
.prose { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 16px 14px; margin-bottom: 12px; }
.prose h3 { font-family: var(--display); font-weight: 500; font-size: var(--fs-lg); margin: 14px 0 6px; }
.prose p, .prose li { max-width: 68ch; }
.prose ol, .prose ul { padding-left: 1.3rem; margin: 0; }
.prose li { margin-bottom: 6px; }
.callout { background: var(--warn-soft); border-left: 3px solid var(--warn); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 10px 0; }
.callout.acc { background: var(--accent-soft); border-left-color: var(--accent); }
.prose details { border-top: 1px solid var(--line); padding: 8px 0; }
.prose summary { cursor: pointer; font-weight: 700; }
.keytable { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.keytable th, .keytable td { text-align: left; padding: 6px 10px 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.keytable th { font-weight: 700; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.toc button { font-size: var(--fs-md); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 44px; cursor: pointer; color: var(--fg); }
.toc button:hover { border-color: var(--accent); color: var(--accent); }
.toc button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prose { scroll-margin-top: 12px; }
.prose h3:focus { outline: none; }
@media (max-width: 560px) {
  .keytable.kv, .keytable.kv tbody, .keytable.kv tr, .keytable.kv th, .keytable.kv td { display: block; }
  .keytable.kv th { padding: 8px 0 0; border-top: 1px solid var(--line); }
  .keytable.kv td { padding: 0 0 8px; border-top: 0; }
}
.icolist { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.icolist li { display: flex; gap: 10px; align-items: center; margin: 0; }
code { font-size: .85em; background: var(--raised); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; word-break: break-all; }

/* settings */
.set { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.group h3 + .set { border-top: 0; }
.set .lbl { font-weight: 700; }
.set .hint { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-md); max-width: 70ch; }
.set.stack { grid-template-columns: minmax(0, 1fr); }
.seg { display: inline-flex; border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden; background: var(--raised); flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 7px 12px; font-size: var(--fs-md); cursor: pointer; color: var(--muted); min-height: 38px; }
.seg-filter button { min-height: 44px; padding-inline: 16px; }
.seg-filter button i { font-style: normal; font-variant-numeric: tabular-nums; margin-left: 2px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--onaccent); font-weight: 700; }
@media (hover: hover) { .seg button:not([aria-pressed="true"]):hover { color: var(--fg); background: var(--accent-soft); } .mapcard:not(.fs) .seg button:not([aria-pressed="true"]):hover { border-color: var(--accent); } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--edge); cursor: pointer; padding: 0; }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 2px; }
.switch { width: 52px; height: 30px; border-radius: 999px; border: 1px solid var(--edge); background: var(--raised); position: relative; cursor: pointer; padding: 0; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { background: var(--onaccent); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
input[type="password"], input[type="text"] { width: 100%; font: inherit; font-size: var(--fs-ui); padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--raised); color: var(--fg); min-height: 44px; }
textarea { width: 100%; min-height: 70px; font: inherit; font-size: var(--fs-sm); background: var(--raised); color: var(--fg); border: 1px solid var(--edge); border-radius: var(--r-md); padding: 8px 10px; resize: vertical; }
.msg { font-size: var(--fs-md); color: var(--ok); min-height: 1.2em; margin-top: 6px; }
.msg.err, .msg.bad { color: var(--warn); }
.sync-state { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.sync-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.sync-state.on i { background: var(--ok); } .sync-state.err i { background: var(--warn); } .sync-state.busy i { background: var(--accent); }
.srcs { padding-left: 1.2rem; margin: 0; }
.srcs li { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .nav, .toolbar { display: none; } }

/* DLC: hidden attribute must win over component display rules */
[hidden] { display: none !important; }
.view-h.sub { margin-top: 22px; }
.counters { display: grid; gap: 12px; }
.counter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; }
.counter .c-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.counter .lvl { color: var(--muted); font-size: var(--fs-md); flex-basis: 100%; }
.counter .c-ctl { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.counter .c-ctl .btn { min-width: 48px; min-height: 48px; font-size: var(--fs-xl); padding: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.counter input { width: 4.5em; min-height: 48px; text-align: center; font: inherit; font-variant-numeric: tabular-nums; color: var(--fg); background: var(--raised); border: 1px solid var(--edge); border-radius: var(--r-md); }
.counter .of { color: var(--muted); }
.counter .note { margin: 6px 0 0; font-size: var(--fs-md); }
.counter .btn:disabled { opacity: .4; cursor: default; }

/* a11y, first run and settings polish (settings/design pass) */
.skip { position: fixed; left: 12px; top: calc(8px + var(--top-inset)); z-index: var(--z-skip); padding: 10px 16px; border-radius: var(--r-md); background: var(--accent); color: var(--onaccent); font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - var(--top-inset) - 16px)); }
.skip:focus { transform: none; }
main:focus { outline: none; }
button:focus-visible, .phaselist button:focus-visible, .swatches button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg button:focus-visible, .nav button:focus-visible { outline-offset: -3px; }
.seg button[aria-pressed="true"]:focus-visible { outline-color: var(--onaccent); }
.welcome { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.welcome h2 { font-family: var(--display); font-size: var(--fs-lg); margin: 0 0 6px; }
.welcome p { margin: 0 0 10px; max-width: 70ch; }
.set.sub { padding-left: 14px; margin-left: 4px; border-left: 2px solid var(--line); }
.steps-help { margin: 0 0 10px; padding-left: 1.3rem; }
.steps-help li { margin-bottom: 4px; }
.set.stack > label.lbl, #connectRow > label.lbl { display: block; margin-top: 8px; }
.sync-state { font-weight: 700; }
.danger-zone { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.danger-zone h3 { color: var(--warn); }
@media (forced-colors: active) {
  .switch[aria-checked="true"], .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print {
  .skip, .welcome, .acts, .pills { display: none; }
  html, body { background: #fff; color: #000; }
  .shell { display: block; padding: 0; max-width: none; }
  .rail { position: static; max-height: none; }
  .step, .group, details.phase { break-inside: avoid; }
}

/* map: navigation aids, place names and the maximized view */
.mapgo select { min-height: 44px; font: inherit; font-size: var(--fs-md); padding: 0 30px 0 12px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--raised); color: var(--fg); cursor: pointer; }
.mapgo select:disabled { opacity: .55; cursor: default; }
.mapfs, #mapHere { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mapexit { font-weight: 700; }
.mapexit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.minimap { position: absolute; z-index: 1000; left: 10px; bottom: 10px; touch-action: none; cursor: crosshair; border: 2px solid var(--edge); border-radius: var(--r-md); overflow: hidden; background: #0b0a08; box-shadow: 0 2px 10px rgb(0 0 0 / .5); }
.minimap[hidden] { display: none; }
.minimap canvas { display: block; }
.mm-view { position: absolute; box-sizing: border-box; min-width: 6px; min-height: 6px; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; }
.mapctl button[aria-pressed="false"] { opacity: .65; }
.mp-place-wrap { width: 0; height: 0; background: none; border: 0; }
.mp-place { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fffdf6; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; }
[data-zl="far"] .mp-place.t1, [data-zl="mid"] .mp-place.t1, [data-zl="mid"] .mp-place.t2, [data-zl="near"] .mp-place.t2 { opacity: .95; }
[data-zl="mid"] .mp-place.t1 { font-size: 15px; }
[data-zl="near"] .mp-place { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .mp-place { transition: none; } }

html.map-fs, html.map-fs body { overflow: hidden; overscroll-behavior: none; }
.mapcard.fs { position: fixed; inset: 0; z-index: 2000; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--bg); display: flex; flex-direction: column; }
.mapcard.fs .maptools { flex: none; padding: calc(8px + var(--top-inset)) calc(10px + env(safe-area-inset-right, 0px)) 8px calc(10px + env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); }
.mapcard.fs .mapfs { display: none; }
.mapcard.fs .mapwrap { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 0; }
.mapcard.fs .mapstage { height: auto; min-height: 0; border: 0; border-radius: 0; }
.mapcard.fs .mapctl { top: 10px; right: calc(10px + env(safe-area-inset-right, 0px)); }
.mapcard.fs .mapsearch { left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(64px + env(safe-area-inset-right, 0px)); }
.mapcard.fs .minimap { left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.mapcard.fs .mapsheet { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.mapcard.fs .mappanel { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.mapcard.fs .mapstatus { position: absolute; z-index: 1300; top: calc(64px + var(--top-inset)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 6px 12px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 2px 10px rgb(0 0 0 / .4); }
.mapcard.fs .mapstatus:empty { display: none; }
.mapcard.fs .maplegend { display: none; }
/* phones: the sheet and the filters take the bottom, so the overview steps aside */
@media (max-width: 699.98px) {
  .mapcard.fs .mapstage:has(.mapsheet:not([hidden])) .minimap, .mapcard.fs .mapwrap.panel-open .minimap { display: none; }
  .mapcard.fs .mapctl button { width: 48px; height: 48px; }
  .mapcard.fs .mapstage .mapctl { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .mapcard.fs .mapstage:has(.mapsheet:not([hidden])) .mapctl, .mapcard.fs .mapwrap.panel-open .mapctl { display: none; }
  .mapcard.fs .mapsearch { right: calc(10px + env(safe-area-inset-right, 0px)); max-width: none; }
}
/* tablets and laptops: a wide toolbar, a docked filter column and the legend over the map */
@media (min-width: 900px) {
  .mapcard.fs .mapwrap.panel-open { grid-template-columns: minmax(0, 1fr) 340px; }
  .mapcard.fs .mappanel { position: static; height: 100%; max-height: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .mapcard.fs .mapsheet { top: 66px; bottom: auto; right: auto; left: 10px; width: 360px; max-height: calc(100% - 200px); }
  .mapcard.fs .maplegend { display: flex; position: absolute; z-index: 1000; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); }
}
@media (min-width: 900px) and (max-height: 640px) { .mapcard.fs .mapsheet { max-height: calc(100% - 90px); } }
/* in the inline view on desktop the legend stays under the map */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; min-height: 0; }
.mappanel .note .linklike { padding: 10px 0; }
.mapscale { justify-self: stretch; text-align: center; font: 700 var(--fs-xs) var(--display); color: var(--fg); background: color-mix(in srgb, var(--raised) 88%, transparent); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 0; pointer-events: none; font-variant-numeric: tabular-nums; }

/* map: progress section under the map */
.mapbelow { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mapbelow-h { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 14px; background: none; border: 0; border-radius: var(--r-lg); color: var(--fg); cursor: pointer; text-align: left; font: inherit; }
.mapbelow-h:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.mb-t { display: grid; min-width: 0; }
.mb-t small { color: var(--muted); }
.mapbelow-h svg { flex: none; transition: transform .2s; }
.mapbelow.open .mapbelow-h svg { transform: rotate(180deg); }
.mapbelow-body { display: grid; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.mapbelow-body[hidden] { display: none; }
.mapbelow .phaselist[hidden], #mapProgress[hidden] { display: none; }
.pg-bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pg-bar i { display: block; height: 100%; background: var(--accent); }
.pg-sum { display: grid; gap: 8px; }
/* Segmented switches in the progress section: equal-width, centred labels, never wider than they need on a big screen. */
.mapbelow .seg { display: flex; max-width: 30rem; }
.mapbelow .seg button { flex: 1; text-align: center; min-height: 44px; }
.mapbelow #pgScope { max-width: 22rem; }
.pg-sum b { font-variant-numeric: tabular-nums; }
.pg-pct { color: var(--muted); margin-left: 6px; }
.pg-g { border-top: 1px solid var(--line); }
.pg-g > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: var(--display); }
.pg-g > summary span, .pg-body h4 span, .pg-done summary span { font: var(--fs-sm) var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-cat { border-top: 1px dashed var(--line); }
.pg-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; width: 100%; min-height: 52px; padding: 8px 4px; background: none; border: 0; color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.pg-row .pg-bar { grid-column: 2 / -1; }
.pg-row:hover, .pg-row:focus-visible { background: var(--accent-soft); }
.pg-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pg-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.pg-cat.all .pg-n { color: var(--ok); }
.pg-body { padding: 0 4px 10px 32px; display: grid; gap: 6px; }
.pg-body h4 { margin: 4px 0 0; font: 700 var(--fs-md) var(--body); display: flex; gap: 8px; align-items: baseline; }
.pg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pg-list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; align-items: center; padding: 4px 8px; background: none; border: 0; border-radius: var(--r-sm); color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.pg-list button:hover, .pg-list button:focus-visible { background: var(--accent-soft); }
.pg-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pg-w { color: var(--muted); font-size: var(--fs-sm); flex: none; }
.pg-empty { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.pg-done > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-md); }
.pg-more { padding: 4px 0; }
.ms-note { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-md); }
.mapcredit { margin-top: 6px; }

/* map: route phase checklist, in the sheet when maximized and as a card under the map otherwise */
.ps-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 4px; }
.ps { display: flex; align-items: flex-start; gap: 6px; border-radius: var(--r-md); }
.ps-l { flex: 1; min-width: 0; display: grid; grid-template-columns: 26px 22px minmax(0, 1fr); column-gap: 8px; align-items: start; padding: 8px 6px; min-height: 44px; cursor: pointer; border-radius: var(--r-md); }
.ps-l:hover { background: var(--accent-soft); }
.ps-l input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); }
.ps-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--accent); }
.ps-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ps-t { line-height: 1.4; font-size: var(--fs-ui); }
.ps.done .ps-t { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.ps.tip { padding: 6px 8px; color: var(--muted); font-size: var(--fs-md); }
.ps.tip .ps-ic { width: 26px; }
.ps-loc { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--raised); color: var(--accent); cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 700; }
.ps-loc:hover, .ps-loc:focus-visible { background: var(--accent-soft); }
.ms-back { display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 2px; padding: 0 10px 0 4px; background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 700; }
.mapsheet.phase .ms-h { padding-right: 44px; }
.mapsheet .pg-bar { margin: 8px 0 2px; }
.phasecard { position: relative; margin: 0 0 14px; padding: 12px 14px 14px; border: 1px solid var(--accent); border-radius: var(--r-lg); background: var(--surface); }
.phasecard[hidden] { display: none; }
.phasecard .ps-list { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .phasecard .ps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } }
.phasecard .ps-l { cursor: pointer; }
.mapcard.fs .mapsheet.phase { max-height: calc(100% - 20px); }
/* phones, maximized: the route steps are a half-height sheet like the marker details; the list scrolls inside it */
@media (max-width: 699.98px) {
  .mapcard.fs .mapsheet.phase { max-height: 50%; display: flex; flex-direction: column; overflow: hidden; }
  .mapcard.fs .mapsheet.phase .ps-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .mapcard.fs .mapsheet.phase .ms-h, .mapcard.fs .mapsheet.phase .pg-bar, .mapcard.fs .mapsheet.phase .ms-act { flex: none; }
}
.mapctl .mc-filter[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
@media (min-width: 900px) { .mapcard.fs .mapsheet.phase { width: 400px; top: 66px; max-height: calc(100% - 84px); } }
.maplink { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; margin-top: 2px; border: 1px solid var(--edge); border-radius: 999px; background: var(--raised); color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.maplink:hover, .maplink:focus-visible { background: var(--accent-soft); }
@media (pointer: coarse) {
  .maplink { min-height: 44px; }
  .seg button { min-height: 44px; min-width: 44px; }
  .swatches { gap: 6px; }
  .swatches button { width: 44px; height: 44px; }
  .switch::before { content: ""; position: absolute; inset: -8px 0; } /* 30px + 2 x 1px border inside the inset = 44px */
  .set a, .prose a { padding-block: 10px; }
}
/* A short landscape phone: leave room under the inline map so a swipe on the page can still scroll (Maximize is the way to explore). */
@media (orientation: landscape) and (max-height: 500px) { .mapcard:not(.fs) .mapstage { height: clamp(200px, 55svh, 340px); } }
.skipmap { position: absolute; left: -9999px; border: 0; font: inherit; cursor: pointer; }
.skipmap:focus { position: static; display: inline-block; margin: 0 0 8px; padding: 10px 16px; border-radius: var(--r-md); background: var(--accent); color: var(--onaccent); font-weight: 700; }
.mapcard.fs .skipmap { display: none; }
.ms-sub { margin: 10px 0 0; font: 700 var(--fs-md) var(--body); color: var(--muted); }
.ms-steps { margin-top: 2px; }
.ps-t small { color: var(--muted); font-weight: 700; margin-right: 4px; }
.phase .ph-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* map: the route path, its direction arrows, stops and layer changes */
.mp-stop { stroke: #14130e; stroke-width: 2; fill-opacity: .95; cursor: pointer; }
.mp-stop.done { fill: #8fd06a; }
.mp-stop.next { fill: #f2c14e; }
.mp-stop.ahead { fill: #fffdf6; }
.mp-arrow-wrap { width: 0; height: 0; background: none; border: 0; }
.mp-arrow { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; stroke: #14130e; stroke-width: 1.2; filter: drop-shadow(0 0 1px #000); }
.mp-arrow.walked { fill: #8fd06a; } .mp-arrow.next { fill: #f2c14e; } .mp-arrow.ahead { fill: #fffdf6; opacity: .6; }
.mp-break-wrap { width: 0; height: 0; background: none; border: 0; }
.mp-break.in { transform: translate(-50%, 90%); } /* "From X" sits below the stop so it does not stack on a nearby "To X" */
.mp-break { position: absolute; transform: translate(-50%, -165%); white-space: nowrap; background: #14130e; color: #fffdf6; border: 1px solid #f2c14e; border-radius: 999px; padding: 2px 9px; font: 700 11px system-ui, sans-serif; box-shadow: 0 1px 5px rgb(0 0 0 / .6); pointer-events: none; }
.maplegend .lg-line { display: inline-block; width: 18px; height: 0; border: 0; border-top: 4px solid; border-radius: 2px; margin-right: 5px; vertical-align: 2px; background: none; }
.maplegend .lg-line.lg-done { border-color: #8fd06a; } .maplegend .lg-line.lg-next { border-color: #f2c14e; } .maplegend .lg-line.lg-ahead { border-top: 3px dashed var(--muted); }
.maptile { max-width: none !important; image-rendering: auto; }

/* Installed iPhone/iPad app only (html.ios-pwa is set by the script in index.html). The status bar is translucent and the page
   runs edge to edge, so a solid strip covers the status area and the content must start below it. In a browser tab the inset is 0
   and none of this applies. iOS 27 draws its status-bar blur a little below the reported inset, so the app keeps an extra
   --pwa-gap clear (only where there is a top inset). Change the 20px here if the title still looks soft on a device. */
html.ios-pwa {
  --pwa-gap: min(20px, calc(var(--safe-t) * 1000));
  --top-inset: calc(var(--safe-t) + var(--pwa-gap));
}
html.ios-pwa .shell { padding-top: calc(14px + var(--top-inset)); }
@media (min-width: 980px) { html.ios-pwa .shell { padding-top: calc(28px + var(--top-inset)); } }

/* Review pass (UI/UX polish). */
::placeholder { color: var(--muted); opacity: 1; }
/* done steps recede at every width: tags and links fold away; the "..." button (or keyboard focus) brings them back */
.step.checked .chips, .step.checked .links { display: none; }
.step.checked.open .chips, .step.checked.open .links { display: flex; }
.step.checked .more { display: grid; place-items: center; position: relative; width: 30px; height: 30px; margin-top: -2px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.step.checked .more::after { content: ""; position: absolute; inset: -6px; }
.step.checked .more svg { width: 20px; height: 20px; fill: currentColor; }
.step.checked .more[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.step.checked:has(:focus-visible) .chips, .step.checked:has(:focus-visible) .links { display: flex; }
@media (min-width: 700px) {
  .step.checked:not(.tip) { grid-template-columns: auto auto 1fr auto; }
  .compact .step.checked:not(.tip) { grid-template-columns: auto 1fr auto; }
  .compact .step.checked .more { display: none; }
}
/* the Platinum row (and any row with no step) is a locked medal, not a checkbox */
.row .check.lock { border-style: dashed; cursor: default; }
.row .check.lock .lk { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
.row .check.lock .tk { display: none; }
.row.checked .check.lock { border-style: solid; }
.row.checked .check.lock .tk { display: block; }
.row.checked .check.lock .lk { display: none; }
/* a tap on the text of a step on a touch screen only pulses the box it should have used */
@keyframes tickhint { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 45%, transparent); } }
.check.hint { animation: tickhint .6s ease-out 2; }
/* "Mark phase done" is a quiet text action, apart from the "Show phase on map" pill */
.ph-links .maplink[data-phaseall] { margin-left: auto; min-height: 36px; padding: 0 4px; border: 0; background: none; border-radius: var(--r-sm); color: var(--muted); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.ph-links .maplink[data-phaseall]:hover, .ph-links .maplink[data-phaseall]:focus-visible { background: none; color: var(--fg); }
@media (pointer: coarse) {
  .ph-links .maplink[data-phaseall] { min-height: 44px; }
  .links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}
/* the Trophies / Legendary / DLC switch on phones, in Main game and DLC mode */
@media (max-width: 979.98px) {
  #v-tro[data-sub="dlc"] #troList, #v-tro[data-sub="tro"] #dlcGoals, #v-tro[data-sub="dlc"] .view-h.sub { display: none; }
}
/* 360px and narrower (and Large text on a small phone): search takes a row, Jump and Compact share the next */
@media (max-width: 360px) {
  #v-route .toolbar .search { grid-column: span 6; }
  #v-route .toolbar .jumpph, #v-route .toolbar .btn { grid-column: span 3; }
}
/* meta lines break after a middot, never before one */
.row-where { overflow-wrap: anywhere; }
.row-where .jump { white-space: nowrap; }

/* Touch targets and reflow leftovers (44px hit areas for ticks, switches and standalone links; no layout change: the extra
   area comes from pseudo-element insets, or from padding cancelled by a negative margin). Keep this block last. */
@media (pointer: coarse) {
  .row button.check::after { inset: -10px; }     /* 28px box inside the inset = 48px, the same as a route step */
  .jump::after { content: ""; position: absolute; inset: -13px -6px; }
  .ph-links a { padding-block: 12px; margin-block: -4px; }
  .set a, .prose a, .note a, .hint a, .mapcredit a, #sources a { padding-block: 13px; }
  .prose summary { padding-block: 9px; margin-block: -9px; }
}
/* 200% zoom on a phone (about 195px wide): the bottom tabs and the Goals counters wrap instead of pushing the page wider. */
.nav button span { max-width: 100%; min-width: 0; overflow-wrap: anywhere; text-align: center; }
.counter, .counter .c-head > * { min-width: 0; overflow-wrap: anywhere; }
.counter .c-ctl { flex-wrap: wrap; }
.links a, .ph-links a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 260px) { body { overflow-wrap: anywhere; } }
.icolist { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
/* maximized map on a tablet or laptop: the legend sits at the bottom centre, so the toast goes above it (on phones toast.js lifts it above the details sheet) */
@media (min-width: 900px) { .map-fs .toast { bottom: calc(var(--safe-b) + 68px); } }

/* Review fixes (code agent): update notice above the tab bar, and the Up next "Ticked ... Undo" line */
.update-note { position: fixed; left: 12px; right: 12px; width: fit-content; margin-inline: auto; bottom: calc(var(--safe-b) + 70px); z-index: calc(var(--z-toast) - 1); display: flex; align-items: center; gap: 8px; max-width: min(520px, calc(100vw - 24px)); padding: 6px 6px 6px 14px; background: var(--raised); color: var(--fg); border: 1px solid var(--edge); border-radius: var(--r-lg); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); font-size: var(--fs-md); white-space: nowrap; }
.update-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.update-note .btn { flex: none; }
@media (min-width: 980px) { .update-note { bottom: 24px; } }
.map-fs .update-note { z-index: 2900; bottom: calc(var(--safe-b) + 16px); }
.next .ticked { margin: 10px 0 0; font-size: var(--fs-md); color: var(--muted); }
.next .ticked:empty { display: none; }
.ticked-undo { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }