/* Explore (Look up › Map): the typographic map. Tokens from the kit plus the x-* map tokens (DESIGN.md, Explore).
   The map font is a vendored Newsreader instance without layout features (src/vendor/newsreader-map/VENDOR.md): its
   widths are the ones the layout was built with. */
@font-face { font-family: "Fluentish Map"; font-style: normal; font-weight: 400; font-display: block; src: url("../../src/vendor/newsreader-map/map-regular.woff2") format("woff2"); }
@font-face { font-family: "Fluentish Map"; font-style: italic; font-weight: 400; font-display: block; src: url("../../src/vendor/newsreader-map/map-italic.woff2") format("woff2"); }

:root {
  --x-known: var(--ink);
  --x-shaky: var(--ink-3);                   /* 5.8:1 on canvas */
  --x-unknown: #2b2d33;                      /* text in the open box */
  --x-box: rgb(20 21 25 / 0.50);             /* open box and outlined bar: 3.4:1 */
  --x-new: #6b6d74;                          /* not seen, italic: 4.69:1 on canvas, 5.03:1 on surface */
  --x-bar-new: rgb(20 21 25 / 0.13);
  --x-today: var(--accent);
  --x-glow: color-mix(in oklab, var(--accent) 26%, var(--canvas));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --x-unknown: #d6d5d0; --x-box: rgb(236 235 230 / 0.42); --x-new: #7f8189; --x-bar-new: rgb(236 235 230 / 0.12); --x-glow: color-mix(in oklab, var(--accent) 34%, var(--canvas)); }
}
:root[data-theme="dark"] { --x-unknown: #d6d5d0; --x-box: rgb(236 235 230 / 0.42); --x-new: #7f8189; --x-bar-new: rgb(236 235 230 / 0.12); --x-glow: color-mix(in oklab, var(--accent) 34%, var(--canvas)); }

/* the map fills the space between the bar and the tab bar; the page does not scroll */
body.ex-page #view { max-width: none; padding: 0; }
body.ex-page { overscroll-behavior: none; }
.explore {
  --ex-top: calc(53px + env(safe-area-inset-top));
  --ex-bottom: calc(58px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; height: calc(100dvh - var(--ex-top) - var(--ex-bottom)); min-height: 360px;
}
@media (min-width: 900px) { .explore { --ex-bottom: 0px; } }
/* on a phone the map's head row (back, title, the view control with Find in it) takes the app bar's place */
@media (max-width: 899px) {
  body.ex-page .bar { display: none; }
  .explore { --ex-top: 0px; }
  .ex-head { min-height: calc(48px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); gap: var(--s-2); }
}
.ex-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) max(var(--gutter), env(safe-area-inset-left)) 0; padding-inline-end: max(var(--gutter), env(safe-area-inset-right)); max-width: var(--page-max); width: 100%; margin: 0 auto; }
.ex-title { font: 400 28px/1.1 var(--font-display); letter-spacing: -0.015em; margin-inline-end: auto; }
@media (max-width: 719px) { .ex-title { font-size: 21px; } }
/* the view control: Map · 3D · List with Find at its end, one control */
.ex-viewctl { flex: none; display: flex; align-items: center; border-radius: var(--r-ctl); background: var(--surface-2); }
.ex-viewctl .seg { background: transparent; }
.ex-viewctl .ex-findbtn { width: 40px; height: 40px; margin-inline: 1px 2px; border-radius: 9px; color: var(--ink-2); }
.ex-viewctl .ex-findbtn:hover { background: var(--surface); color: var(--ink); }
.ex-viewctl .seg + .ex-findbtn { box-shadow: -1px 0 0 var(--hairline); border-start-start-radius: 0; border-end-start-radius: 0; }
@media (max-width: 719px) { .ex-viewctl .seg button { padding: 0 11px; } }
@media (pointer: coarse) { .ex-viewctl .ex-findbtn { width: var(--tap); height: var(--tap); margin: 0; } }
.ex-status { padding: var(--s-6) var(--gutter); }
.ex-status .btn { margin-inline-start: var(--s-2); }
.ex-icon { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); cursor: pointer; }
.ex-icon:hover { background: var(--surface-2); }

/* the header's second row: one status line ("767 known · Next: Food and drink") and Group by */
.ex-statusrow { position: relative; z-index: 5; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding-block: 0 6px; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); max-width: var(--page-max); width: 100%; margin: 0 auto; }
.ex-status-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 400 13px/1.3 var(--font-ui); color: var(--ink-2); }
.ex-known { flex: none; margin: 0; color: var(--ink-2); }
.ex-known-short { display: none; }
.ex-nextbest { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; overflow: hidden; }
.ex-sep { color: var(--ink-3); }
.ex-next-label { flex: none; color: var(--ink-3); }
.ex-next-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: var(--ink); font: 600 13px/1.3 var(--font-ui); text-align: start; cursor: pointer; }
.ex-next-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ex-next-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (pointer: coarse) { .ex-next-name { min-height: var(--tap); } }
@media (max-width: 719px) {
  .ex-known-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ex-known-short { display: inline; }
}
/* Group by: a button with the current mode and a panel of the six on a phone; a row of chips from 720 px */
.ex-modewrap { position: relative; flex: none; }
.ex-modebtn { gap: 6px; padding-inline: 14px 10px; background: var(--surface); color: var(--ink); }
.ex-chev { display: inline-grid; color: var(--ink-3); transform: rotate(90deg); transition: transform var(--dur-quick) var(--ease-out); }
.ex-modebtn[aria-expanded="true"] .ex-chev { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .ex-chev { transition: none; } }
:root[data-motion="reduce"] .ex-chev { transition: none; }
.ex-modepanel { display: none; }
.ex-modes .chip.is-landed, .ex-modebtn.is-landed { animation: ex-chip-land 520ms var(--spring-pop); }
@keyframes ex-chip-land { 0% { transform: scale(calc(1 - 0.1 * var(--move))); } 100% { transform: none; } }
@media (max-width: 719px) {
  .ex-modepanel.is-open { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; display: grid; gap: 2px; width: 220px; padding: var(--s-2); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-lift), 0 0 0 1px var(--hairline); }
  .ex-modes-title { margin: var(--s-1) var(--s-2) var(--s-1); color: var(--ink-3); }
  .ex-modes { display: grid; gap: 2px; }
  .ex-modes .chip { justify-content: flex-start; width: 100%; min-height: var(--tap); padding: 0 var(--s-3); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); font-size: 15px; }
  .ex-modes .chip:hover { background: var(--surface-2); }
  .ex-modes .chip[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); }
  [dir="rtl"] .ex-modes .chip[aria-pressed="true"] { box-shadow: inset -2px 0 0 var(--ink); }
}
@media (min-width: 720px) {
  .ex-statusrow { min-height: 52px; padding-block: var(--s-1) var(--s-2); }
  .ex-modebtn { display: none; }
  .ex-modepanel { display: flex; align-items: center; gap: var(--s-3); }
  .ex-modes-title { margin: 0; color: var(--ink-3); }
  .ex-modes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .ex-modes .chip { flex: none; min-height: 34px; height: 34px; padding: 0 14px; }
}
@media (min-width: 720px) and (pointer: coarse) { .ex-modes .chip { height: var(--tap); } }

.ex-stage { position: relative; flex: 1; min-height: 0; border-top: 1px solid var(--hairline); overflow: hidden; }
.ex-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: var(--canvas); outline: none; cursor: grab; }
.ex-canvas:active { cursor: grabbing; }
.ex-canvas[data-kbd]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* where you are */
.ex-here { position: absolute; top: var(--s-3); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: baseline; gap: var(--s-2); max-width: calc(100% - 2 * var(--gutter)); padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-lift), 0 0 0 1px var(--hairline); white-space: nowrap; pointer-events: none; }
.ex-here b { font: 600 14px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; }
.ex-here span { font: 400 12px/1.2 var(--font-ui); color: var(--ink-3); }

/* one row over the bottom of the map: the study action at its start; Key and groups (with select and zoom) at its end */
.ex-hud { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-2) var(--s-3); min-height: 60px; padding-block: 8px; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--canvas) 94%, transparent) 12px); pointer-events: none; }
.ex-hud > * { pointer-events: auto; }
.ex-total { flex: none; min-width: 0; }
.ex-study { flex: none; min-height: var(--tap); padding: 0 18px; }
.ex-study[hidden] { display: none; }
.ex-hudkey { display: contents; }
.ex-ctl { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.ex-ctl .chip { background: var(--surface); color: var(--ink); }
.ex-ctl .ex-selbtn { flex: none; background: var(--surface); box-shadow: 0 0 0 1px var(--hairline-strong); }
.ex-ctl .ex-selbtn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.ex-panel-short { display: none; }
.ex-legend { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); font: 400 13px/1.4 var(--font-ui); color: var(--ink-2); }
.ex-key { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ex-key i { font: 400 16px/1 "Fluentish Map", var(--font-display); font-style: normal; color: var(--x-known); }
.ex-key.is-shaky i { color: var(--x-shaky); }
.ex-key.is-unknown i { color: var(--x-unknown); padding: 0 3px; border: 1px solid var(--x-box); border-radius: 3px; }
.ex-key.is-unseen i { color: var(--x-new); font-style: italic; }
.ex-key.is-today i { color: var(--x-today); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* − and + only with a pointer (a phone pinches; the keys + and − and the wheel zoom everywhere) */
.ex-zoom { flex: none; display: none; overflow: hidden; border-radius: var(--r-ctl); background: var(--surface); box-shadow: 0 0 0 1px var(--hairline); }
@media (any-pointer: fine) and (min-width: 480px) { .ex-zoom { display: flex; } }
.ex-zoom .ex-icon { display: grid; width: 40px; height: 40px; margin: 0; border-radius: 0; }
.ex-zoom .ex-icon:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.ex-zoom .ex-icon:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.ex-zoom .ex-icon + .ex-icon { box-shadow: -1px 0 0 var(--hairline); }
.ex-zoom .ex-fit { display: none; }
@media (pointer: coarse) { .ex-zoom .ex-icon { width: var(--tap); height: var(--tap); } }
@media (max-width: 719px) {
  .ex-hudkey { display: none; }
}
@media (min-width: 720px) {
  .ex-zoom .ex-fit { display: grid; }
  .ex-panel-long, .ex-panel-total, .pl-dist .ex-panel-key { display: none; }
  .ex-stage .pl-dist { inset-inline-end: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
  .ex-panel-short { display: inline; }
  /* the key sits in the row itself, after the study action, with Gaps only (2D) */
  .ex-hudkey { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
  .ex-hud { padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))); }
  .ex-hudkey .ex-legend { gap: 2px var(--s-4); font-size: 12px; }
  .ex-hudkey .ex-legend .ex-key i { font-size: 15px; }
}

/* the sheet: a bottom sheet on a phone, a card at the bottom right from 720px */
.ex-sheet {
  position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: var(--z-sheet); height: min(72dvh, 560px); max-height: min(72dvh, 560px); display: flex; flex-direction: column;
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--surface); box-shadow: var(--shadow-sheet);
  transform: translateY(calc(24px * var(--move))); opacity: 0;
  transition: transform var(--dur-quick) var(--ease-in), opacity var(--dur-quick) var(--ease-in);
}
.ex-sheet.is-in { transform: translateY(var(--ex-drag, 0px)); opacity: 1; transition: transform var(--dur-card) var(--spring-snappy), opacity var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); }
/* two heights on a phone: peek (46 % of the map: the word, its meaning, the example and the buttons) and full */
@media (max-width: 719px) {
  .ex-sheet.is-peek { height: min(var(--ex-peek, 46dvh), 72dvh); }
  .ex-sheet.is-drag { transition: none; }
}
.ex-grab { flex: none; display: grid; place-items: center; width: 100%; height: 24px; margin: 0; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.ex-grab i { width: 36px; height: 4px; border-radius: 2px; background: var(--hairline-strong); }
.ex-grab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* new content in the sheet crosses in */
.ex-sheet-body.is-swap > * { animation: ex-swap var(--dur-base) var(--ease-out) both; }
@keyframes ex-swap { from { opacity: 0; transform: translateY(calc(6px * var(--move))); } }
.ex-close { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 1; color: var(--ink-2); }
.ex-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-5) 0; }
.ex-sheet-body::after { content: ""; display: block; height: calc(var(--s-5) + env(safe-area-inset-bottom)); }
/* the sheet's buttons stay in reach while its list scrolls */
.ex-sheet-body > .ex-actions { position: sticky; bottom: 0; z-index: 1; margin-inline: calc(-1 * var(--s-5)); padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -1px 0 var(--hairline); }
@media (min-width: 720px) {
  .ex-sheet { inset-inline-start: auto; inset-inline-end: max(var(--s-4), calc((100vw - var(--page-max)) / 2)); top: calc(var(--ex-stage-top, 170px) + var(--s-4)); bottom: auto; width: 380px; height: auto; max-height: calc(100dvh - var(--ex-stage-top, 170px) - 112px); border-radius: var(--r-card); box-shadow: var(--shadow-lift), 0 0 0 1px var(--hairline); }
  .ex-grab { display: none; }
  .ex-sheet-body { padding-top: var(--s-4); }
}
.ex-meta { display: flex; justify-content: space-between; gap: var(--s-3); padding-inline-end: 40px; }
.ex-word { margin-top: var(--s-2); font: 400 34px/1.1 "Fluentish Map", var(--font-display); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ex-art { color: var(--ink-3); font-size: 0.72em; }
.ex-en { margin-top: var(--s-2); color: var(--ink-2); }
.ex-ex { margin-top: var(--s-3); font: 400 18px/1.4 var(--font-display); color: var(--ink); }
.ex-exen { margin-top: 2px; }
.ex-card-extra > .caption:first-child { margin-top: var(--s-1); }
.ex-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-2); }
.ex-state b { color: var(--ink); font-weight: 600; }
.ex-state-key { font: 400 16px/1 "Fluentish Map", var(--font-display); color: var(--x-known); }
.ex-state-key.is-shaky { color: var(--x-shaky); }
.ex-state-key.is-unknown { color: var(--x-unknown); padding: 0 3px; border: 1px solid var(--x-box); border-radius: 3px; }
.ex-state-key.is-unseen { color: var(--x-new); font-style: italic; }
.ex-state-key.is-today { color: var(--x-today); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ex-from { margin-top: var(--s-1); }
.ex-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.ex-links-label { flex-basis: 100%; }
.ex-link { min-height: 36px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 400 16px/1 "Fluentish Map", var(--font-display); cursor: pointer; }
.ex-link:hover { border-color: var(--ink-3); }
.ex-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.ex-actions .btn { flex: 1 1 auto; }
.ex-group-title { margin-top: var(--s-1); }
.ex-group-known { margin-top: 2px; color: var(--ink-2); }
.ex-stack { display: flex; gap: 2px; height: 8px; margin-top: var(--s-3); }
.ex-stack span { border-radius: 2px; min-width: 2px; }
.ex-stack .is-known { background: var(--x-known); }
.ex-stack .is-shaky { background: var(--x-shaky); }
.ex-stack .is-unknown { box-shadow: inset 0 0 0 1px var(--x-box); }
.ex-stack .is-unseen { background: var(--x-bar-new); }
.ex-counts { display: flex; flex-wrap: wrap; gap: 2px var(--s-3); margin-top: var(--s-2); }
.ex-next-title { margin-top: var(--s-4); }
.ex-next { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: var(--s-4); }
.ex-next-item { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 40px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); text-align: start; font: 400 17px/1.25 "Fluentish Map", var(--font-display); cursor: pointer; }
.ex-next-item .ex-w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* lists show the state as a 6 px square before the word (the box and the italic stay on the map) */
.ex-sw { flex: none; display: inline-block; width: 6px; height: 6px; border-radius: 1px; transform: translateY(-2px); background: var(--x-known); }
.ex-sw.is-shaky { background: var(--x-shaky); }
.ex-sw.is-unknown { background: transparent; box-shadow: inset 0 0 0 1px var(--x-box); }
.ex-sw.is-unseen { background: transparent; outline: 1px dotted var(--x-box); outline-offset: -1px; }
.ex-sw.is-today { background: var(--x-today); }
.ex-counts .ex-sw { margin-inline-end: 5px; transform: translateY(-1px); }
@media (forced-colors: active) { .ex-sw { forced-color-adjust: none; background: CanvasText; } .ex-sw.is-unknown, .ex-sw.is-unseen { background: Canvas; outline: 1px solid CanvasText; } .ex-sw.is-today { background: Highlight; } }
.ex-note { margin-top: var(--s-3); }
.ex-allknown { margin-top: var(--s-4); color: var(--ink-2); }

/* find */
.ex-find { position: fixed; z-index: var(--z-sheet); inset-inline-start: 0; inset-inline-end: 0; top: calc(var(--ex-top, 53px)); max-height: calc(100dvh - var(--ex-top, 53px) - 24px); display: flex; flex-direction: column; padding: var(--s-3) max(var(--gutter), env(safe-area-inset-left)); background: var(--surface); box-shadow: var(--shadow-lift); border-radius: 0 0 var(--r-card) var(--r-card); }
@media (min-width: 720px) { .ex-find { inset-inline-start: auto; inset-inline-end: var(--s-4); top: calc(var(--ex-top, 53px) + var(--s-2)); width: 420px; border-radius: var(--r-card); } }
.ex-find-row { display: flex; gap: var(--s-2); align-items: center; }
.ex-find-input { flex: 1; min-width: 0; height: var(--tap); padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--r-ctl); background: var(--canvas); font-size: 16px; }
.ex-find-list { list-style: none; margin: var(--s-2) 0 0; padding: 0; overflow-y: auto; }
.ex-find-hit { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 6px 4px; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; color: var(--ink); text-align: start; cursor: pointer; }
.ex-find-de { font: 400 18px/1.25 "Fluentish Map", var(--font-display); }
.ex-find-meta { white-space: nowrap; }
.ex-find-none { padding: var(--s-3) 4px; }

/* the list view */
.ex-list { position: absolute; inset: 0; overflow-y: auto; padding: var(--s-2) max(var(--gutter), env(safe-area-inset-left)) var(--s-8); }
.ex-list > * { max-width: 760px; margin-inline: auto; }
.ex-lgroup { border-bottom: 1px solid var(--hairline); }
.ex-lgroup summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding: 14px 0; cursor: pointer; list-style: none; }
.ex-lgroup summary::-webkit-details-marker { display: none; }
.ex-lgroup summary b { font: 600 15px/1.3 var(--font-ui); }
.ex-litems { list-style: none; margin: 0 0 var(--s-3); padding: 0; }
.ex-litems li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--hairline); }
.ex-litem { flex: 1; display: flex; align-items: baseline; gap: 8px; min-height: var(--tap); padding: 8px 0; border: 0; background: transparent; color: var(--ink); text-align: start; font: 400 18px/1.3 "Fluentish Map", var(--font-display); cursor: pointer; }
.ex-lbody { padding-bottom: var(--s-3); }
.ex-lbody .ex-stack { margin-top: 0; }
.ex-lbody .ex-actions { margin-top: var(--s-3); }
.ex-lstate { white-space: nowrap; }
.ex-lstate.is-today { color: var(--accent-ink); }
.ex-empty { padding: var(--s-6) 0; color: var(--ink-2); }

@media (prefers-reduced-transparency: reduce) {
  .ex-hud { background: var(--canvas); }
}
@media (forced-colors: active) { .ex-hud { background: Canvas; } }
@media (pointer: coarse) {
  .ex-link, .ex-next-item { min-height: var(--tap); }
}

/* Look up: the way into the map */
.lk-map { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; }
.lk-map-art { flex: none; width: 64px; height: 64px; }
.lk-map-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.lk-map-title { font: 400 22px/1.15 var(--font-display); }
.lk-map-detail { font-size: 13px; color: var(--ink-3); }
.lk-map > .icon { color: var(--ink-3); }
@media (max-width: 719px) { .ex-find { top: 0; padding-top: calc(var(--s-3) + env(safe-area-inset-top)); } }
.ex-sheet h2[tabindex="-1"]:focus { outline: none; }
.ex-zoom .ex-icon:focus-visible { outline-offset: -3px; }

/* select mode (select.js): tap the words you know; a solid bar over the bottom of the map or list */
.ex-selbtn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.ex-selbar { position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 4; display: grid; gap: var(--s-2); padding-block: var(--s-3); padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  background: var(--surface); box-shadow: 0 -1px 0 var(--hairline), var(--shadow-lift); }
.ex-selbar[hidden] { display: none; }
.ex-sel-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0; font: 400 14px/1.35 var(--font-ui); }
.ex-sel-top b { font-weight: 600; }
.ex-sel-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ex-sel-actions .btn { min-height: var(--tap); padding: 0 12px; }
.ex-sel-actions .btn-primary { margin-inline-start: auto; min-width: 96px; }
.explore.is-select .ex-hud { visibility: hidden; }
.explore.is-select .ex-list { padding-bottom: 148px; }
.explore.is-select .ex-litem { cursor: copy; }
@media (forced-colors: active) { .ex-selbar { background: Canvas; border-top: 1px solid CanvasText; } }

/* ---------- 3D (Explore › 3D, src/features/explore/palace/) ---------- */
.ex-canvas.pl-canvas { z-index: 0; }
.ex-canvas { transition: opacity var(--dur-quick) var(--ease-out); }
.ex-canvas.is-fading { opacity: 0; transition: none; }
/* district names: DOM plates over the canvas, constant size, placed every frame */
.pl-labels { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.explore:not(.is-3d) .pl-labels { display: none; }
.pl-label { position: absolute; top: 0; left: 0; display: grid; justify-items: center; padding: 2px 6px; border-radius: 6px; background: color-mix(in oklab, var(--surface) 92%, transparent);
  white-space: nowrap; opacity: 0; transition: opacity 160ms var(--ease-out); will-change: transform; }
.pl-label.is-on { opacity: 1; }
.pl-label b { font: 600 13px/16px var(--font-ui); color: var(--ink); }
.pl-label span { font: 400 12px/15px var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* 3D: no Gaps only and no select mode (2D tools); the key says what height means */
.ex-key.pl-height { display: none; }
.explore.is-3d .ex-gaps, .explore.is-3d .ex-selbtn { display: none; }
.explore.is-3d .ex-key.pl-height { display: inline-flex; flex-basis: 100%; color: var(--ink-3); }
.ex-total.is-loading3d { color: var(--ink-3); }
/* Key and groups: the whole count, the key and Gaps only (on a phone), then every group as a button that flies there:
   the keyboard and screen-reader route around the map and the city */
.pl-dist { position: absolute; z-index: 3; inset-inline-end: max(var(--gutter), env(safe-area-inset-right)); bottom: 64px; width: min(340px, calc(100% - 2 * var(--gutter))); max-height: min(72%, 480px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-3) var(--s-2) var(--s-2); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-lift), 0 0 0 1px var(--hairline); }
.pl-dist-title { margin: 0 var(--s-2) var(--s-2); color: var(--ink-3); }
.ex-panel-total { margin: 0 var(--s-2) var(--s-3); font: 600 14px/1.35 var(--font-ui); color: var(--ink); }
.ex-panel-key { display: grid; justify-items: start; gap: var(--s-3); margin: 0 var(--s-2) var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hairline); }
.ex-panel-key .ex-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--s-4); }
.ex-panel-key .ex-key i { min-width: 24px; }
.ex-panel-key .ex-key.pl-height { grid-column: 1 / -1; white-space: normal; }
.pl-dist-list { list-style: none; margin: 0; padding: 0; }
.pl-dist-item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 6px var(--s-2); border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink); font: 500 14px/1.25 var(--font-ui); text-align: start; cursor: pointer; }
.pl-dist-item:hover, .pl-dist-item:focus-visible { background: var(--surface-2); }
.pl-dist-item span { white-space: nowrap; }
/* reduced motion: names snap; the canvases still crossfade (140 ms), which is the reduced form of the tilt */
@media (prefers-reduced-motion: reduce) { .pl-label { transition: none; } .ex-canvas { transition: opacity 140ms linear; } }
:root[data-motion="reduce"] .pl-label { transition: none; }
:root[data-motion="reduce"] .ex-canvas { transition: opacity 140ms linear; }
@media (prefers-reduced-transparency: reduce) { .pl-label { background: var(--surface); } }

/* the next best group's sheet: how many common words it has to learn */
.ex-group-next { margin-top: 2px; }
.explore.is-list .ex-statusrow, .explore.is-select .ex-statusrow { display: none; }
.explore.is-list .ex-zoom { display: none; }
@media (forced-colors: active) { .ex-study { border: 1px solid ButtonText; } }

/* the disc that grows into a group page's header (core/motion.js handoff; only inside a view transition) */
.ex-disc-fly { position: fixed; z-index: 3; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink), var(--shadow-lift); pointer-events: none; overflow: hidden; }
.ex-disc-fly b { font: 600 13px/16px var(--font-ui); color: var(--ink); padding: 0 8px; text-align: center; }

/* ---------- the group page (features/explore/group.js) ---------- */
.gp-head { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-3); margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.gp-head h1 { margin: 0; }
.gp-head .ex-stack { margin-top: var(--s-1); }
.gp-head .ex-counts { margin: 0; }
.gp-sec { display: grid; gap: var(--s-2); }
.gp-block { font-size: 18px; }
.gp .ex-next-item { text-decoration: none; }
.gp-list { grid-template-columns: 1fr; }