/* Discover Map — "the cartographer's console".
   The canvas is a full-viewport artifact; the chrome is atlas marginalia floating over it in the site's
   dark projection-booth panels. Display type is Fraunces — the same serif the engine letters the map with
   — so console and canvas share one hand. Blue (Discover) drives interaction; a warm atlas-gold is the one
   warm note against the cool map. Depends on site.css tokens. Do not edit the vendored engine (discover-map.js). */

.dm-page {
  --atlas-display: "Fraunces", Georgia, serif;
  --atlas-gold: #e9c878;
  --dm-top: 64px;                       /* overwritten from the live header height by the page shell */
  --dm-topbar-h: 60px;                                          /* mobile top find/plot bar height */
  --dm-detailbar-h: calc(58px + env(safe-area-inset-bottom, 0px));   /* mobile bottom detail-scale bar height */
  --dm-peek-h: 300px;                                           /* mobile film place-card peek height (JS reads this) */
  --dm-panel: color-mix(in srgb, var(--ink) 86%, transparent);
  --dm-panel-solid: color-mix(in srgb, var(--ink-2) 96%, black);
}

/* ---- Mobile chrome: top find/plot bar + bottom detail bar (only shown ≤720px; empty/hidden otherwise) ---- */
.dm-topbar, .dm-mplot, .dm-detailbar, .dm-detail-region, .dm-lb-btn { display: none; }

/* Full-viewport canvas. The engine sizes it to innerWidth×innerHeight and reads pointer coords in
   viewport space, so it MUST sit at the viewport origin — the sticky site header simply floats over its
   top edge. (Insetting the canvas would throw hover/click picking off by the header height.) */
/* Panels below set an explicit `display`, which would override the `hidden` attribute's UA
   `display:none`. Re-assert it so toggling `hidden` in JS actually shows/hides them. */
.dm-page [hidden] { display: none !important; }

#dm-map { position: fixed; inset: 0; z-index: 0; display: block; background: var(--ink); cursor: grab;
  touch-action: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
#dm-map.drag { cursor: grabbing; }

/* Drag-handle for the mobile bottom sheets (hidden on desktop, where the panels dock to the side). */
.dm-grabber { display: none; }

/* The map lives below the normal page flow; hide the site footer on this page (credits live on-canvas). */
body:has(.dm-page) { overflow: hidden; }
body:has(.dm-page) .site-main { padding: 0; max-width: none; }
body:has(.dm-page) .site-footer { display: none; }

/* ---- Loading / error curtain ---- */
.dm-curtain {
  position: fixed; inset: 0; z-index: 15; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 40%, var(--ink-2), var(--ink));
}
.dm-curtain-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 2rem; }
.dm-curtain-title { font-family: var(--atlas-display); font-weight: 600; font-size: 1.6rem; color: var(--text); margin: 0; letter-spacing: -0.01em; }
.dm-curtain-sub { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); margin: 0; max-width: 26rem; }
.dm-curtain.is-error .dm-compass { border-top-color: var(--orange); animation: none; }
.dm-curtain.is-error .dm-curtain-title { color: #ffd9b8; }
/* Compass rose — a spinning needle, not a generic ring. */
.dm-compass {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-top-color: var(--atlas-gold); position: relative;
  animation: dm-spin 1.1s cubic-bezier(.6,.1,.3,.9) infinite;
}
.dm-compass::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 3px; height: 3px; border-radius: 50%;
  background: var(--atlas-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--atlas-gold) 20%, transparent);
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

/* ---- Shared floating-panel look ---- */
.dm-console, .dm-detail {
  position: fixed; z-index: 6; box-sizing: border-box;
  background: var(--dm-panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  color: var(--text); font-family: var(--body); font-size: 0.9rem;
}

/* ---- Console (left) ---- */
.dm-console {
  top: calc(var(--dm-top) + 14px); left: 14px; width: 300px;
  max-height: calc(100dvh - var(--dm-top) - 28px); display: flex; flex-direction: column;
  border-top: 2px solid var(--blue);
}
.dm-console-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 0.95rem 1.05rem 0.7rem; border-bottom: 1px solid var(--line); }
.dm-kind { color: var(--blue); }
.dm-console-titles h1 { font-family: var(--atlas-display); font-weight: 600; font-size: 1.5rem; line-height: 1.05; margin: 0.15rem 0 0.2rem; letter-spacing: -0.015em; }
.dm-count { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted); }
.dm-storylink { color: var(--atlas-gold); }
.dm-storylink:hover { text-decoration: underline; }
.dm-collapse {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 1rem; line-height: 1;
}
.dm-collapse:hover { color: var(--text); border-color: var(--muted-2); }

.dm-console-body { overflow-y: auto; padding: 0.9rem 1.05rem 1.05rem; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: thin; }
.dm-field { display: flex; flex-direction: column; gap: 0.45rem; }
.dm-field > .mono-label { color: var(--muted); }

.dm-console select, .dm-console input[type=text] {
  width: 100%; box-sizing: border-box; appearance: none;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  padding: 0.55rem 0.65rem; font-family: var(--body); font-size: 0.92rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.dm-console input::placeholder { color: var(--muted-2); }
.dm-console select:hover, .dm-console input:hover { border-color: var(--muted-2); }
.dm-console select:focus, .dm-console input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
.dm-note { margin: 0; font-family: var(--mono); font-size: 0.7rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--muted-2); }
.dm-err { color: #ff9d7a; }

/* Detail drawer — grand-strategy mapmode selector: a row of icon tiles, coarse → fine, then Auto */
.dm-mapmodes { display: flex; gap: 4px; }
.dm-mapmode {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.42rem 0.15rem 0.32rem;
  color: var(--muted); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dm-mapmode:hover { color: var(--text); border-color: var(--muted-2); }
.dm-mapmode.on { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.dm-mapmode-ico { width: 20px; height: 20px; }
.dm-mapmode-ico svg { width: 100%; height: 100%; display: block; }
.dm-mapmode-cap { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.01em; }

/* Name-register segmented control */
.dm-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dm-seg button {
  background: transparent; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); padding: 0.4rem 0.3rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.dm-seg button:nth-child(3n) { border-right: 0; }
.dm-seg button:nth-last-child(-n+3) { border-bottom: 0; }
.dm-seg button:hover { color: var(--text); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.dm-seg button.on { background: var(--blue); color: var(--ink); font-weight: 600; }

/* Checkboxes */
.dm-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text); cursor: pointer; }
.dm-check input[type=checkbox] { accent-color: var(--blue); width: 1rem; height: 1rem; flex: 0 0 auto; }
.dm-swatch { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; display: inline-block; }
.swatch-recs { background: var(--atlas-gold); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.swatch-wl { border: 2px solid var(--green); border-radius: 50%; background: transparent; }

/* Buttons in the console */
.dm-row { display: flex; gap: 0.5rem; }
.dm-row input { flex: 1; min-width: 0; }
#dm-go, #dm-war-add {
  flex: 0 0 auto; background: var(--blue); color: var(--ink); border: 0; border-radius: 8px; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 0 0.9rem;
}
#dm-go:hover, #dm-war-add:hover { filter: brightness(1.08); }
.dm-textbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.dm-textbtn:hover { color: var(--text); }

/* Search suggestions */
.dm-find { position: relative; }
.dm-suggest { display: flex; flex-direction: column; }
.dm-suggest:empty { display: none; }
.dm-suggestion { text-align: left; background: none; border: 0; color: var(--text); padding: 0.4rem 0.5rem; border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.88rem; }
.dm-suggestion small { color: var(--muted-2); font-family: var(--mono); }
.dm-suggestion:hover { background: var(--panel-2); }

.dm-overlays { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.15rem; }

/* Completion summary (plotted user's regions ranked by how close they are to finishing them) */
.dm-summary:empty { display: none; }
.dm-summary { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.2rem; border-top: 1px solid var(--line); }
.dm-summary-head { color: var(--muted); margin-top: 0.7rem; }
.dm-region-row {
  position: relative; display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: none; border: 0; border-radius: 6px; cursor: pointer; padding: 0.4rem 0.5rem; overflow: hidden;
  text-align: left; color: var(--text); font: inherit; font-size: 0.82rem;
}
.dm-region-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--blue) 24%, transparent); border-radius: 6px; z-index: 0; }
.dm-region-name, .dm-region-stat { position: relative; z-index: 1; }
.dm-region-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-region-stat { display: flex; align-items: baseline; gap: 0.4rem; flex: 0 0 auto; font-family: var(--mono); font-size: 0.7rem; }
.dm-region-pct { color: var(--text); font-weight: 600; }
.dm-region-frac { color: var(--muted); }
.dm-region-lift { color: var(--atlas-gold); }
.dm-region-row:hover { outline: 1px solid color-mix(in srgb, var(--blue) 40%, transparent); }
.dm-region-row[aria-expanded="true"] { outline: 1px solid color-mix(in srgb, var(--blue) 55%, transparent); }
.dm-region-missing { padding: 0.15rem 0.5rem 0.5rem; }
.dm-summary-foot { margin-top: 0.5rem; }

/* War mode */
.dm-war { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.dm-war > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 9px; padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--orange) 8%, transparent); transition: border-color 0.12s, background 0.12s;
}
.dm-war > summary:hover { border-color: color-mix(in srgb, var(--orange) 50%, var(--line)); background: color-mix(in srgb, var(--orange) 13%, transparent); }
.dm-war > summary::-webkit-details-marker { display: none; }
.dm-war-title { display: flex; flex-direction: column; gap: 0.1rem; }
.dm-war-name { font-family: var(--atlas-display); font-size: 1.05rem; font-weight: 600; color: var(--text); }
.dm-war-name::before { content: "⚑ "; color: var(--orange); }
.dm-war > summary small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--muted-2); }
.dm-war-chevron { width: 20px; height: 20px; flex: 0 0 auto; color: var(--orange); transition: transform 0.2s ease; }
.dm-war[open] .dm-war-chevron { transform: rotate(180deg); }
.dm-war[open] > summary { margin-bottom: 0.7rem; }
.dm-war-body { display: flex; flex-direction: column; gap: 0.6rem; }
.dm-war-roster { display: flex; flex-direction: column; gap: 0.35rem; }
.dm-faction { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.dm-faction-flag { width: 0.8rem; height: 0.8rem; border-radius: 3px; flex: 0 0 auto; }
.dm-faction-name { font-weight: 600; }
.dm-faction-score { margin-left: auto; color: var(--muted); }
.dm-faction-x { background: none; border: 0; color: var(--muted-2); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 0.2rem; }
.dm-faction-x:hover { color: #ff6b6b; }

/* ---- Reopen tab (console collapsed) ---- */
.dm-reopen {
  position: fixed; z-index: 6; top: calc(var(--dm-top) + 14px); left: 14px;
  background: var(--dm-panel); backdrop-filter: blur(14px); border: 1px solid var(--line); border-top: 2px solid var(--blue);
  border-radius: 12px; color: var(--text); cursor: pointer; padding: 0.5rem 0.85rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 0.4rem;
}
.dm-reopen:hover { border-color: var(--muted-2); }

/* ---- Detail gazetteer (right) ---- */
.dm-detail {
  top: calc(var(--dm-top) + 14px); right: 14px; width: 320px;
  max-height: calc(100dvh - var(--dm-top) - 28px); overflow-y: auto; padding: 1.05rem;
  border-top: 2px solid var(--atlas-gold); scrollbar-width: thin;
}
.dm-close { position: absolute; top: 0.55rem; right: 0.65rem; background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.dm-close:hover { color: var(--text); }
/* Poster-forward header: large poster, then title / year / rank stacked below it */
.dm-detail-head { display: block; margin-bottom: 0.2rem; }
.dm-poster { display: block; width: 154px; max-width: 60%; margin: 0 0 0.85rem; }
.dm-poster img { width: 100%; border-radius: 8px; display: block; }
.dm-poster-empty { width: 154px; max-width: 60%; aspect-ratio: 2/3; border-radius: 8px; background: var(--panel-2); display: block; }
.dm-film-name { font-family: var(--atlas-display); font-size: 1.45rem; font-weight: 600; line-height: 1.12; color: var(--text); display: block; }
a.dm-film-name:hover { color: var(--atlas-gold); text-decoration: none; }
/* Year · Director · #rank on one line — only the director shrinks/ellipsizes so it never wraps */
.dm-film-meta { color: var(--muted); margin-top: 0.35rem; display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.dm-meta-item, .dm-meta-sep { flex: 0 0 auto; white-space: nowrap; }
.dm-meta-sep { color: var(--muted-2); }
.dm-meta-dir { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dm-rank { cursor: help; border-bottom: 1px dotted var(--muted-2); }
.dm-uncharted { color: var(--muted); font-style: italic; font-size: 0.86rem; margin: 0.9rem 0 0; }

/* Region path: a route into the taste-space, current tier highlighted */
.dm-path { list-style: none; margin: 1rem 0 0; padding: 0; }
.dm-path-step { position: relative; padding: 0.5rem 0 0.5rem 0.9rem; border-top: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; }
.dm-path-step::before { content: ""; position: absolute; left: 0; top: 0.7rem; bottom: -0.5rem; width: 2px; background: var(--line); }
.dm-path-step:last-child::before { bottom: auto; height: 0.5rem; }
.dm-path-step::after { content: ""; position: absolute; left: -3px; top: 0.7rem; width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: 2px solid var(--ink); }
.dm-path-step.cur::after { background: var(--atlas-gold); }
.dm-path-step.cur .dm-path-name { color: var(--atlas-gold); }
.dm-tier { grid-column: 1; color: var(--muted-2); }
.dm-path-size { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--mono); font-size: 0.72rem; color: var(--muted-2); }
.dm-path-name { grid-column: 1; font-weight: 600; font-size: 0.95rem; }
.dm-path-step:not(.cur) .dm-path-name { color: var(--muted); font-weight: 500; }   /* collapsed rows recede */
.dm-path-desc { grid-column: 1; font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin-top: 0.15rem; }
.dm-path-step:hover .dm-path-name { color: var(--blue); }

/* Collapsible "Missing for <user>" panel — collapsed by default, same double-chevron emphasis as war */
.dm-collapsible { margin-top: 0.9rem; }
.dm-collapsible > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 9px; padding: 0.5rem 0.7rem;
  background: color-mix(in srgb, var(--green) 8%, transparent); transition: border-color 0.12s, background 0.12s;
}
.dm-collapsible > summary:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 14%, transparent); }
.dm-collapsible > summary::-webkit-details-marker { display: none; }
.dm-collapsible-title { font-size: 0.9rem; color: var(--text); }
.dm-collapsible-title b { color: var(--green); font-weight: 700; }
.dm-chevron { width: 18px; height: 18px; flex: 0 0 auto; color: var(--green); transition: transform 0.2s ease; }
.dm-collapsible[open] .dm-chevron { transform: rotate(180deg); }
.dm-collapsible-body { padding: 0.6rem 0.1rem 0; }

/* Members list */
.dm-members { margin-top: 0.9rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.dm-members-head { color: var(--muted); margin-bottom: 0.35rem; }
.dm-member { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0.2rem 0; font: inherit; font-size: 0.85rem; }
.dm-member small { color: var(--muted-2); font-family: var(--mono); margin-left: 0.35rem; }
.dm-member:hover { color: var(--atlas-gold); }
.dm-members-more { color: var(--muted-2); font-family: var(--mono); font-size: 0.72rem; margin-top: 0.2rem; }

/* ---- Legend (active overlays) ---- */
.dm-legend {
  position: fixed; z-index: 4; right: 14px; bottom: 14px;
  background: var(--dm-panel); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.55rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; box-shadow: var(--shadow);
}
.dm-legend-item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--text); }

/* ---- Credits ---- */
.dm-credit {
  position: fixed; z-index: 4; left: 14px; bottom: 12px; margin: 0;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.03em; color: var(--muted-2);
  text-shadow: 0 1px 4px var(--ink); pointer-events: auto;
}
.dm-credit a { color: var(--muted); }
.dm-credit a:hover { color: var(--atlas-gold); }

/* ---- Tooltip ---- */
.dm-tooltip {
  position: fixed; z-index: 12; pointer-events: none; max-width: 260px;
  background: var(--dm-panel-solid); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.6rem;
  color: var(--text); font-family: var(--body); font-size: 0.82rem; line-height: 1.35; box-shadow: var(--shadow);
}
.dm-tooltip .yr { color: var(--muted); font-family: var(--mono); font-size: 0.75rem; }
.dm-tooltip .region { color: var(--atlas-gold); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; }

/* ---- Responsive (≤720px): the desktop console is replaced by a top find/plot bar + a thin always-on
   bottom detail-scale bar. Text entry sits at the top (keyboard opens downward into results); the detail
   scale sits at the bottom with the map visible above. Sections are relocated in at load (setupMobile). ---- */
@media (max-width: 720px) {
  .dm-console, .dm-reopen { display: none !important; }   /* replaced by the top bar + detail bar */

  /* Film gazetteer = a "place card": full-height sheet above the detail bar, translated DOWN to show only the
     peek (compact header) by default; .is-full slides it up to reveal the region route + members. */
  .dm-detail {
    top: auto; bottom: var(--dm-detailbar-h); left: 0; right: 0; width: auto;
    height: 86dvh; max-height: none; overflow: hidden;
    border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    transform: translateY(calc(86dvh - var(--dm-peek-h)));
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform;
    /* The whole sheet is a drag handle (see enablePeekSheet). pan-y lets the content scroll natively when
       full; contain stops a pull-to-collapse from chaining into the page behind it. */
    touch-action: pan-y; overscroll-behavior: contain;
  }
  .dm-detail.is-full { transform: translateY(0); overflow-y: auto; }
  /* Compact header: small poster + title/meta/region/CTA beside it, reclaiming the wasted right column */
  .dm-detail-head { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 0.15rem; }
  .dm-detail .dm-poster, .dm-detail .dm-poster-empty { width: 86px; max-width: 86px; margin: 0; flex: 0 0 auto; }
  .dm-detail-title { flex: 1; min-width: 0; }
  .dm-detail-region { display: block; margin-top: 0.5rem; color: var(--atlas-gold); font-size: 0.72rem; }
  .dm-lb-btn {
    display: inline-flex; align-items: center; margin-top: 0.7rem; padding: 0.5rem 0.9rem;
    border-radius: 9px; text-decoration: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
    color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  }
  .dm-legend { top: auto; bottom: calc(var(--dm-detailbar-h) + 10px); right: 10px; }
  .dm-credit { display: none; }
  .dm-grabber { display: block; padding: 9px 0 5px; touch-action: none; cursor: grab; flex: none; }
  .dm-grabber span { display: block; width: 42px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--muted-2); }
  .dm-detail .dm-grabber { margin-top: -0.4rem; }

  /* ---- Top bar: find a film (grows) + plot a user (button); keyboard opens downward into results ---- */
  .dm-topbar {
    display: flex; position: fixed; z-index: 8; left: 0; right: 0; top: var(--dm-top);
    align-items: center; gap: 8px; padding: 8px 10px;
    background: var(--dm-panel-solid); border-bottom: 1px solid var(--line);
  }
  .dm-topbar-find { flex: 1; min-width: 0; position: relative; }
  .dm-topbar-find .mono-label { display: none; }                 /* the placeholder carries it on mobile */
  .dm-topbar-find input[type=text] { width: 100%; box-sizing: border-box; margin: 0; }
  .dm-topbar-find .dm-suggest {                                  /* results drop under the field */
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 9;
    background: var(--dm-panel-solid); border: 1px solid var(--line); border-radius: 10px; padding: 0.25rem;
    box-shadow: var(--shadow); max-height: 60dvh; overflow-y: auto;
  }
  .dm-topplot {
    flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
  }
  .dm-topplot svg { width: 22px; height: 22px; display: block; }
  .dm-topplot.on { color: var(--blue); border-color: var(--blue); }
  .dm-topplot.has-user { color: var(--atlas-gold); border-color: color-mix(in srgb, var(--atlas-gold) 60%, var(--line)); }

  /* Plot panel: drops from under the top bar so the username field sits above the keyboard */
  .dm-mplot {
    display: block; position: fixed; z-index: 7; left: 0; right: 0; top: calc(var(--dm-top) + var(--dm-topbar-h));
    box-sizing: border-box; max-height: calc(100dvh - var(--dm-top) - var(--dm-topbar-h) - 12px); overflow-y: auto;
    background: var(--dm-panel-solid); border-bottom: 1px solid var(--line); border-radius: 0 0 14px 14px;
    border-top: 2px solid var(--atlas-gold); box-shadow: var(--shadow);
    padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; scrollbar-width: thin;
  }

  /* ---- Bottom detail-scale bar: the level tiles, always visible; the map stays visible above ---- */
  .dm-detailbar {
    display: flex; position: fixed; z-index: 8; left: 0; right: 0; bottom: 0; gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--dm-panel-solid); border-top: 1px solid var(--line);
  }
  .dm-detailbar .dm-mapmodes { flex: 1; gap: 5px; }
  .dm-detailbar .dm-mapmode { min-height: 44px; }

  /* Comfortable touch targets in the relocated controls */
  .dm-topbar button, .dm-topbar input[type=text], .dm-mplot button, .dm-mplot input[type=text],
  .dm-mplot .dm-check { min-height: 44px; }
  .dm-mplot .dm-check { display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-compass { animation: none; }
}