/* PORTAL PORT (R1.1 Lane D): ad-anvil public/map/css/app.css scoped to .map-shell by a one-off script
   (see static/map/PORTED_FROM.txt). Every selector is under .map-shell except #hv-tip / #hv-choose (appended to
   <body> by js/hover.js, fixed palette). Panels fixed to the viewport sit below the Portal header: their top and the
   100vh heights subtract --map-top, which src/routes/(map)/map/+page.svelte sets from the header's height. The UI
   tokens follow the Portal theme (html[data-theme], else the system preference); the map canvas never does
   (MAP_PALETTE, js/app.js). Portal additions are at the end of this file. */
/* AD-Anvil Map UI (ported from the Valeris sandbox webmap). Map colours live in js/style.js; these tokens cover the chrome. */
.map-shell {
  --paper: #f7f0de;
  --paper-2: #efe4c8;
  --ink: #33291f;
  --ink-soft: #6b5c48;
  --rule: #cdbb94;
  --accent: #9c3b25;
  --accent-soft: #e9cdb9;
  --shadow: 0 2px 10px rgba(60, 40, 20, 0.18);
  --badge-C: #2f6b3f; --badge-S: #2f4f8b; --badge-L: #8a6a2a; --badge-R: #6a3f8b;
  --badge-B2: #3f7a80; --badge-D: #a0522d; --badge-SECRET: #8b1a1a;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] .map-shell {
  --paper: #1d2024;
  --paper-2: #262a2f;
  --ink: #ebe3cf;
  --ink-soft: #a99f8a;
  --rule: #3d424a;
  --accent: #e08a5f;
  --accent-soft: #4a3326;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-shell {
  --paper: #1d2024;
  --paper-2: #262a2f;
  --ink: #ebe3cf;
  --ink-soft: #a99f8a;
  --rule: #3d424a;
  --accent: #e08a5f;
  --accent-soft: #4a3326;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
} }
.map-shell * { box-sizing: border-box; }
.map-shell { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 14px; }
.map-shell #map { position: fixed; inset: var(--map-top, 0px) 0 0 0; }

.map-shell .panel { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); }
.map-shell button, .map-shell select, .map-shell input { font: inherit; color: inherit; }
.map-shell .icon-btn, .map-shell .chip { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.map-shell .chip { border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.map-shell .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- top bar / search */
.map-shell #topbar { position: fixed; top: calc(var(--map-top, 0px) + 12px); left: 12px; width: min(380px, calc(100vw - 24px)); padding: 8px 10px; z-index: 5; }
.map-shell .brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.map-shell .brand-name { font-family: var(--font); font-size: 20px; font-weight: 700; letter-spacing: 0.04em; }
.map-shell .brand-sub { color: var(--ink-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-shell .search { position: relative; }
.map-shell #search { width: 100%; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2); }
.map-shell #search-results { list-style: none; margin: 4px 0 0; padding: 0; max-height: 50vh; overflow: auto; border-top: 1px solid var(--rule); }
.map-shell #search-results li { padding: 6px 4px; cursor: pointer; border-bottom: 1px solid var(--rule); }
.map-shell #search-results li:hover, .map-shell #search-results li[aria-selected="true"] { background: var(--accent-soft); }
.map-shell #search-results .hit { font-weight: 600; }
.map-shell #search-results .why { display: block; font-size: 12px; color: var(--ink-soft); }

.map-shell #placeholder-ribbon { position: fixed; top: calc(var(--map-top, 0px) + 12px); left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; background: #b8862b; color: #fff; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; pointer-events: none; }

/* ---- controls */
.map-shell #controls { position: fixed; top: calc(var(--map-top, 0px) + 12px); right: 12px; width: 240px; padding: 8px 10px; z-index: 5; max-height: calc(100vh - var(--map-top, 0px) - 150px); overflow: auto; }
.map-shell #controls.collapsed { width: auto; }
.map-shell #controls.collapsed #controls-body { display: none; }
.map-shell #controls .controls-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.map-shell #controls .controls-title { font-weight: 600; padding-left: 2px; }
.map-shell #controls-toggle { font-size: 12px; padding: 3px 8px; }
.map-shell #controls.collapsed .controls-title { display: none; }
.map-shell #controls .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0 6px; }
.map-shell #controls select { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 6px; }
.map-shell #controls fieldset { border: 1px solid var(--rule); border-radius: 6px; margin: 8px 0; padding: 4px 8px 6px; }
.map-shell #controls legend { color: var(--ink-soft); font-size: 12px; }
.map-shell #controls fieldset label, .map-shell .toggles label { display: block; margin: 3px 0; cursor: pointer; }
.map-shell #controls label.sub { padding-left: 22px; font-size: 12px; color: var(--ink-soft); }
.map-shell #controls label.sub input { width: 100px; vertical-align: middle; }
.map-shell #legend { font-size: 12px; }
.map-shell #legend .item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.map-shell #legend .sw { width: 14px; height: 10px; border: 1px solid rgba(0,0,0,0.35); border-radius: 2px; flex: none; }

/* ---- time bar */
/* the timeline is a collapsed panel at the bottom left, above the scale and the lat/lng readout (2026-10-10) */
.map-shell #timebar { position: fixed; left: 12px; bottom: 62px; width: min(520px, calc(100vw - 24px)); padding: 6px 10px; z-index: 5; }
.map-shell #timebar.collapsed { width: auto; max-width: min(420px, calc(100vw - 24px)); }
.map-shell #timebar.collapsed #time-body { display: none; }
.map-shell #timebar.collapsed .era-name { font-size: 13px; }
.map-shell .time-head { display: flex; align-items: center; gap: 10px; }
.map-shell #time-toggle { font-size: 12px; padding: 3px 8px; flex: none; }

/* ---- map legend (bottom centre, where the timeline was): what the current zoom draws */
.map-shell #map-legend { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: min(760px, calc(100vw - 420px)); padding: 5px 10px; z-index: 5;
  display: flex; align-items: center; gap: 10px; }
.map-shell #map-legend .legend-head { display: flex; align-items: center; gap: 6px; flex: none; }
.map-shell #map-legend .legend-title { font-family: var(--font); font-weight: 600; font-size: 13px; }
.map-shell #map-legend.collapsed .legend-title, .map-shell #map-legend.collapsed .legend-items { display: none; }
.map-shell #legend-toggle { font-size: 12px; padding: 3px 8px; }
.map-shell .legend-items { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; color: var(--ink); }
.map-shell .lg-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* world items in the Featured list: the dot says story place (blue) or place (red) */
.map-shell .fi-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin: 4px 6px 0 4px; background: #b02a30; border: 1.5px solid #fff8e8; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.map-shell .fi-dot.story { background: #2f4f8b; }
.map-shell .fi-dot.plan-label { background: transparent; border-color: #7a3f22; box-shadow: none; }
.map-shell #explore .view-note { font-size: 12px; color: var(--ink-soft); margin: 2px 2px 6px; }
.map-shell .era-name { font-family: var(--font); font-size: 16px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-shell .year { font-variant-numeric: tabular-nums; font-weight: 600; }
.map-shell #year { width: 100%; margin: 6px 0 2px; accent-color: var(--accent); }
.map-shell .era-chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- locator inset */
.map-shell #locator-inset { position: fixed; left: 12px; bottom: 120px; width: 160px; height: 120px; z-index: 4; padding: 6px; }
.map-shell .locator-placeholder { flex-direction: column; height: 100%; border: 2px dashed var(--rule); border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-soft); font-size: 12px; }

/* ---- card */
.map-shell #card { position: fixed; top: calc(var(--map-top, 0px) + 12px); right: 264px; bottom: 120px; width: 380px; z-index: 6; overflow: auto; padding: 14px 16px 18px; }
.map-shell #card .close { position: absolute; top: 8px; right: 8px; padding: 0 9px; font-size: 18px; line-height: 26px; }
.map-shell .card-handle { display: none; }
.map-shell #card h2 { font-family: var(--font); font-size: 22px; margin: 0 32px 2px 0; line-height: 1.2; }
.map-shell #card .kind { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.map-shell #card h3 { font-family: var(--font); font-size: 15px; margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }
.map-shell #card .asof { font-size: 12px; background: var(--accent-soft); border-radius: 4px; padding: 3px 6px; margin: 8px 0; }
.map-shell #card .names { list-style: none; padding: 0; margin: 0; }
.map-shell #card .names li { margin: 0 0 8px; }
.map-shell #card .names .nm { font-family: var(--font); font-size: 16px; font-weight: 600; }
.map-shell #card .names .meta { display: block; font-size: 12px; color: var(--ink-soft); }
.map-shell #card .names .note { display: block; font-size: 12px; font-style: italic; }
.map-shell .status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink-soft); margin-left: 4px; vertical-align: 2px; }
.map-shell .status.official { border-color: #2f6b3f; color: #2f6b3f; }
.map-shell .status.disputed { border-color: #a0522d; color: #a0522d; }
.map-shell .status.former { text-decoration: line-through; }
:root[data-theme="dark"] .map-shell .status.official { border-color: #7fbf8f; color: #7fbf8f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-shell .status.official { border-color: #7fbf8f; color: #7fbf8f; } }
:root[data-theme="dark"] .map-shell .status.disputed { border-color: #e0a07a; color: #e0a07a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-shell .status.disputed { border-color: #e0a07a; color: #e0a07a; } }
.map-shell #card dl.attrs { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.map-shell #card dl.attrs dt { color: var(--ink-soft); }
.map-shell #card dl.attrs dd { margin: 0; }
.map-shell #card .was { color: var(--ink-soft); font-size: 12px; }
.map-shell #card .timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--rule); }
.map-shell #card .timeline li { position: relative; margin: 0 0 8px; font-size: 13px; }
.map-shell #card .timeline li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--rule); }
.map-shell #card .timeline li.past::before { background: var(--accent); border-color: var(--accent); }
.map-shell #card .timeline li.future { opacity: 0.55; }
.map-shell #card .timeline .yr { font-weight: 600; font-variant-numeric: tabular-nums; }
.map-shell #card .md p { margin: 0 0 8px; line-height: 1.5; }
.map-shell #card .md blockquote { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--rule); color: var(--ink-soft); font-style: italic; }
.map-shell #card .md h4, .map-shell #card .md h5 { font-family: var(--font); margin: 10px 0 4px; }
.map-shell #card .md ul { margin: 0 0 8px; padding-left: 18px; }
.map-shell #card .dispute { background: var(--paper-2); border-radius: 6px; padding: 6px 8px; margin: 0 0 8px; }
.map-shell #card .dispute .topic { font-weight: 600; }
.map-shell #card .dispute ul { margin: 4px 0 0; padding-left: 16px; font-size: 13px; }
.map-shell #card .refs { display: flex; flex-wrap: wrap; gap: 4px; }
.map-shell #card .ref { font-size: 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 6px; }
.map-shell #card a.ref, .map-shell #card .link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.map-shell #card .author-box { border: 1px dashed var(--badge-SECRET); border-radius: 6px; padding: 6px 8px; margin-top: 12px; font-size: 12px; }
.map-shell #card pre { white-space: pre-wrap; word-break: break-word; font-size: 11px; max-height: 240px; overflow: auto; }

.map-shell .prov { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 3px; margin-left: 3px; color: var(--ink-soft); border: 1px solid var(--rule); vertical-align: 1px; }
body.author .map-shell .prov { color: #fff; border-color: transparent; }
body.author .map-shell .prov.C { background: var(--badge-C); } body.author .map-shell .prov.S { background: var(--badge-S); }
body.author .map-shell .prov.L { background: var(--badge-L); } body.author .map-shell .prov.R { background: var(--badge-R); }
body.author .map-shell .prov.B2 { background: var(--badge-B2); } body.author .map-shell .prov.D { background: var(--badge-D); }
body.author .map-shell .prov.SECRET { background: var(--badge-SECRET); }
.map-shell .flag { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px; background: #b8862b; color: #fff; margin-left: 4px; }
.map-shell .flag.secret { background: var(--badge-SECRET); }

.map-shell #fatal { position: fixed; inset: 20% 10% auto; z-index: 20; background: #fff3f0; color: #6b1a0a; border: 2px solid #b0402a; border-radius: 8px; padding: 16px 20px; font-family: var(--ui); box-shadow: var(--shadow); }
.map-shell #fatal code { background: #f8e0d8; padding: 1px 4px; border-radius: 3px; }

.map-shell .maplibregl-ctrl-group { background: var(--paper) !important; }
.map-shell .maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--paper) 80%, transparent) !important; color: var(--ink-soft) !important; }
.map-shell .maplibregl-ctrl-bottom-right { bottom: 0; }

/* ---- explore panel: featured places + story tours */
.map-shell #explore { position: fixed; top: calc(var(--map-top, 0px) + 104px); left: 12px; width: min(380px, calc(100vw - 24px)); z-index: 5; padding: 6px 8px 8px;
  max-height: calc(100vh - var(--map-top, 0px) - 104px - 130px); display: flex; flex-direction: column; }
body:has(#timebar:not(.collapsed)) .map-shell #explore { max-height: calc(100vh - var(--map-top, 0px) - 104px - 200px); }
.map-shell #explore .explore-head { display: flex; align-items: center; gap: 6px; }
.map-shell #explore .tabs { display: flex; gap: 4px; flex: 1; }
.map-shell #explore .tab { flex: 1; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.map-shell #explore .tab.active { background: var(--accent-soft); color: var(--ink); border-color: var(--rule); }
.map-shell #explore-toggle { font-size: 12px; padding: 3px 8px; }
.map-shell #explore-body { overflow: auto; margin-top: 6px; }
.map-shell #explore.collapsed { width: auto; }
.map-shell #explore.collapsed .tabs, .map-shell #explore.collapsed #explore-body { display: none; }
.map-shell #explore h4 { font-family: var(--font); font-size: 14px; margin: 4px 2px 4px; color: var(--ink-soft); }
.map-shell #explore .count, .map-shell #explore summary .count { font-family: var(--ui); font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.map-shell #explore details summary { cursor: pointer; font-family: var(--font); font-size: 14px; color: var(--ink-soft); margin: 8px 2px 4px; }
.map-shell #explore .empty { color: var(--ink-soft); font-size: 13px; }
.map-shell .feat-list, .map-shell .tour-list { list-style: none; margin: 0; padding: 0; }
.map-shell .feat-item, .map-shell .tour-item { display: flex; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 5px 6px; cursor: pointer; align-items: flex-start; }
.map-shell .feat-item:hover, .map-shell .tour-item:hover, .map-shell .feat-item.active { background: var(--paper-2); }
.map-shell .feat-item.active { box-shadow: inset 3px 0 0 var(--accent); }
.map-shell .feat-item.gone { opacity: 0.55; }
.map-shell .fi-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fbf3df; color: #6b3a22; border: 1.5px solid #7a4a2a; }
.map-shell .feat-item.t1 .fi-icon, .map-shell .tour-item .fi-icon { background: #8a2f1c; color: #f6d27a; border-color: #f8e7b8; }
.map-shell .tour-item .fi-icon { background: #2f4f8b; color: #fff; border-color: #fff; }
.map-shell .fi-text { display: flex; flex-direction: column; min-width: 0; }
.map-shell .fi-name { font-family: var(--font); font-weight: 700; font-size: 14px; }
.map-shell .feat-item.t2 .fi-name { font-weight: 600; font-size: 13px; }
.map-shell .fi-pic { color: var(--accent); font-size: 11px; }
.map-shell .fi-tag { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.map-shell .fi-desc { font-size: 12px; line-height: 1.4; margin-top: 2px; }
.map-shell .vicon { vertical-align: -2px; flex: none; }

/* ---- tour player */
.map-shell .player-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.map-shell .player-title { font-family: var(--font); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.map-shell .stop-meta { font-size: 12px; color: var(--ink-soft); }
.map-shell .stop-title { font-family: var(--font); font-size: 18px; margin: 4px 0 4px; }
.map-shell .stop-text { font-size: 13.5px; line-height: 1.5; margin: 4px 0 8px; }
.map-shell .stop-text p { margin: 0 0 6px; }
.map-shell .player-nav { display: flex; gap: 6px; margin: 8px 0; }
.map-shell .player-nav .icon-btn { flex: 1; }
.map-shell .player-nav .primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.map-shell .player-nav button[disabled] { opacity: 0.4; cursor: default; }
.map-shell .stop-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.map-shell .stop-link { display: flex; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; padding: 4px 2px; cursor: pointer; font-size: 13px; align-items: center; }
.map-shell .stop-link .n { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #2f4f8b; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.map-shell .stop-link.active { font-weight: 700; }
.map-shell .stop-link.active .n { background: var(--accent); }

/* ---- hero card */
.map-shell #card .hero-img { margin: -14px -16px 10px; position: relative; }
.map-shell #card .hero-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px 8px 0 0; }
.map-shell #card .hero-img figcaption { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; opacity: 0.85; }
.map-shell #card .hero { margin: 4px 0 6px; }
.map-shell #card .tagline { font-family: var(--font); font-size: 15px; font-style: italic; margin: 2px 0 8px; line-height: 1.4; }
.map-shell #card .hero-quote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--paper-2); border-radius: 0 6px 6px 0; font-family: var(--font); font-size: 14px; line-height: 1.45; }
.map-shell #card .hero-quote cite { display: block; font-family: var(--ui); font-style: normal; font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.map-shell #card .hero-quote cite::before { content: "— "; }
.map-shell .who { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 6px; }
.map-shell .who .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-right: 2px; }
.map-shell .who-chip { font-size: 12px; background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.map-shell #card .hero-links { margin-top: 4px; }
.map-shell #card a.ref.tour-chip { background: #2f4f8b; color: #fff; border-color: #2f4f8b; text-decoration: none; }
.map-shell #card a.ref.tour-chip .vicon { stroke: #fff; }
.map-shell .tier { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px; margin-left: 4px; letter-spacing: 0.04em; vertical-align: 1px; }
.map-shell .tier.t1 { background: #8a2f1c; color: #f6d27a; }
.map-shell .tier.t2 { background: var(--paper-2); color: var(--ink-soft); border: 1px solid var(--rule); }
.map-shell #card .rooms { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.map-shell #card .rooms li { margin: 0 0 5px; }
.map-shell #card .rooms .lvl { display: inline-block; min-width: 54px; font-size: 11px; color: var(--ink-soft); }
.map-shell #card .rooms .meta { display: block; font-size: 12px; color: var(--ink-soft); padding-left: 54px; }
.map-shell #card .rooms .secret-item { border-left: 3px solid var(--badge-SECRET); padding-left: 4px; }
.map-shell #search-results li.feat .hit { color: var(--accent); }
.map-shell #search-results .star { color: #b8862b; }
.map-shell #search-results .hit .vicon { margin-right: 2px; }

@media (max-width: 760px) {
  .map-shell #explore { top: calc(var(--map-top, 0px) + 64px); left: 8px; width: calc(100vw - 16px); max-height: 44vh; z-index: 7; }
  .map-shell #explore .stop-list { display: none; }
  .map-shell .stop-title { font-size: 16px; }
  .map-shell .stop-text { font-size: 13px; }
  .map-shell #explore.collapsed { width: auto; }
  .map-shell #card .hero-img { margin: -22px -16px 10px; }
  .map-shell #card .hero-img img { max-height: 160px; border-radius: 14px 14px 0 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .map-shell #explore { width: 320px; }
}

/* ---- mobile: controls collapse, card becomes a bottom sheet */
@media (max-width: 760px) {
  .map-shell #topbar { top: calc(var(--map-top, 0px) + 8px); left: 8px; width: calc(100vw - 16px); padding: 6px 8px; }
  .map-shell .brand { display: none; }
  .map-shell #placeholder-ribbon { top: calc(var(--map-top, 0px) + 64px); left: 8px; transform: none; }
  .map-shell .maplibregl-ctrl-bottom-right, .map-shell .maplibregl-ctrl-bottom-left { bottom: 112px; }
  .map-shell #controls { top: calc(var(--map-top, 0px) + 64px); right: 8px; width: min(260px, calc(100vw - 16px)); max-height: calc(100vh - var(--map-top, 0px) - 220px); }
  .map-shell #timebar { left: 8px; bottom: 8px; width: calc(100vw - 16px); padding: 6px 10px; }
  .map-shell #map-legend { left: auto; right: 8px; transform: none; bottom: 8px; max-width: calc(100vw - 16px); flex-wrap: wrap; }
  .map-shell #locator-inset { left: 8px; bottom: 132px; width: 120px; height: 90px; }
  .map-shell #card { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 45vh; border-radius: 14px 14px 0 0; padding-top: 22px; z-index: 8; transition: height 0.2s ease; }
  .map-shell #card.expanded { height: 88vh; }
  .map-shell .card-handle { display: block; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 48px; height: 6px; border-radius: 3px; background: var(--rule); cursor: pointer; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .map-shell #card { right: 12px; z-index: 7; }
}
.map-shell #controls label[hidden], .map-shell #pitch-row[hidden] { display: none; }

/* World section (B-10 option 2, js/world.js) */
body.world .map-shell #map { background: #1b1f26; } /* space round the globe */
.map-shell #controls fieldset.world[hidden] { display: none; }
.map-shell #controls .world-zoom { font-variant-numeric: tabular-nums; margin-left: 4px; }
.map-shell #controls .world-fly { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.map-shell #card .world-prov { font-size: 12px; margin: 2px 0 6px; }
.map-shell #card .world-meta { font-size: 11px; color: var(--ink-soft); margin-top: 8px; }

/* ── AD-Anvil additions: canon links ─────────────────────────────────────── */
.map-shell .canon-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 4px 0 10px; padding: 6px 10px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: 13px; }
.map-shell .canon-link:hover, .map-shell .canon-link:focus-visible { background: var(--accent); color: #fff; outline: none; }
.map-shell .canon-link .canon-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
.map-shell .canon-link:hover .canon-k, .map-shell .canon-link:focus-visible .canon-k { color: #fff; }
.map-shell .canon-link .canon-id { font-family: ui-monospace, Menlo, monospace; font-size: 11px; opacity: .75; }
.map-shell a.ref.canon-ref { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.map-shell a.ref.canon-ref:hover { background: var(--accent); color: #fff; }
.map-shell .canon-dot { color: var(--accent); font-size: 10px; vertical-align: 1px; }

/* Environment badge: tells sandbox and vault maps apart at a glance. */
.map-shell .env-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 10px; font: 600 10px/1.4 var(--ui, system-ui, sans-serif); letter-spacing: .08em; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); user-select: none; }
.map-shell .env-badge .env-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .9; }
.map-shell .env-badge.env-vault { background: #2f6b4a; }
.map-shell .env-badge.env-sandbox { background: #b26a00; }
.map-shell .env-badge.env-sandbox .env-dot { animation: env-pulse 2s ease-in-out infinite; }
@keyframes env-pulse { 50% { opacity: .35; } }
.map-shell .env-badge { cursor: pointer; }
.map-shell .env-badge.env-compact { padding: 4px; gap: 0; }
.map-shell .env-badge.env-compact .env-text { display: none; }

/* ---- Layers panel guide */
.map-shell #controls .controls-actions { display: flex; gap: 4px; }
.map-shell #controls-help { font-size: 12px; padding: 3px 8px; font-weight: 700; }
.map-shell #controls.collapsed #controls-help { display: none; }
.map-shell #layers-guide { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - var(--map-top, 0px) - 48px); padding: 0; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow); font-family: var(--ui); }
.map-shell #layers-guide::backdrop { background: rgba(0, 0, 0, .35); }
.map-shell #layers-guide .lg-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.map-shell #layers-guide h2 { margin: 0; font-family: var(--font); font-size: 18px; }
.map-shell #layers-guide .lg-body { padding: 4px 16px 16px; overflow: auto; max-height: calc(100vh - var(--map-top, 0px) - 110px); line-height: 1.45; }
.map-shell #layers-guide h3 { font-family: var(--font); font-size: 15px; margin: 18px 0 6px; display: flex; align-items: center; gap: 8px; }
.map-shell #layers-guide .lg-scope { font-family: var(--ui); font-size: 11px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 10px; padding: 0 7px; }
.map-shell #layers-guide p { margin: 6px 0; }
.map-shell #layers-guide .lg-lead { color: var(--ink-soft); }
.map-shell #layers-guide .lg-note { font-size: 12px; color: var(--ink-soft); }
.map-shell #layers-guide dl { margin: 4px 0; display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 6px 12px; }
.map-shell #layers-guide dt { font-weight: 600; }
.map-shell #layers-guide dd { margin: 0; }
.map-shell #layers-guide kbd { border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; font-size: 12px; }
@media (max-width: 520px) { .map-shell #layers-guide dl { grid-template-columns: 1fr; gap: 2px; } .map-shell #layers-guide dd { margin-bottom: 8px; } }

/* ---- Street-level controls only show at city zoom (world mode); a note stands in for them when zoomed out. */
.map-shell #controls .city-note { display: none; margin: 8px 0 4px; font-size: 12px; color: var(--ink-soft); }
.map-shell #controls.zoomed-out .city-note { display: block; }
.map-shell #controls.zoomed-out .city-only { display: none !important; }
.map-shell #controls .linkish { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }

/* Pointer lat/lng + zoom readout (bottom left): click to copy. */
.map-shell .coord-readout { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; padding: 1px 6px; border-radius: 4px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow); cursor: copy; user-select: none; }
.map-shell .coord-readout.copied { background: var(--accent-soft); }

/* Proposals overlay (js/proposals.js, 2026-10-10): the World toggle's per-draft list and the proposal card.
   Panel chrome uses theme tokens; the violet marks the overlay and matches its fixed map palette (#a02bb5). */
.map-shell #controls .prop-drafts { padding-left: 22px; font-size: 12px; color: var(--ink-soft); }
.map-shell #controls .prop-drafts label { margin: 2px 0; }
.map-shell #controls .prop-n { color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
.map-shell #controls .prop-empty, .map-shell #controls .prop-warn { display: block; font-style: italic; margin: 2px 0; }
.map-shell #controls .prop-warn { color: #9a5b00; cursor: help; }
.map-shell #card .prop-title { font-style: italic; }
.map-shell #card .prop-banner { margin: 6px 0 8px; padding: 5px 8px; border: 1px dashed #a02bb5; border-radius: 6px; font-size: 12px; }
.map-shell #card .prop-conf { font-style: italic; }
.map-shell #card .prop-conf.c-rumour, .map-shell #card .prop-conf.c-speculation { opacity: 0.75; }
.map-shell #card .prop-miss, .map-shell #card .prop-meta { color: var(--ink-soft); font-size: 12px; }
.map-shell #controls .prop-garrison { display: block; margin-top: 4px; }
.map-shell #controls .prop-garrison select { font-size: 12px; padding: 1px 4px; max-width: 150px; }
.map-shell #card .prop-glyph { width: 16px; height: 16px; vertical-align: -3px; }
.map-shell #card .prop-mil { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 5px; border-radius: 4px; background: #4a1257; color: #fff; }
.map-shell #card .prop-reclass { font-size: 13px; margin: 6px 0; }
.map-shell #controls .prop-goods { display: block; margin-top: 4px; }
.map-shell #controls .prop-goods input { font-size: 12px; width: 120px; padding: 1px 4px; }
.map-shell #card .prop-good { display: inline-block; margin: 0 4px 3px 0; padding: 0 7px; border-radius: 999px; border: 1px solid #a02bb5; font-size: 12px; }
.map-shell #controls .prop-cities { margin: 4px 0 2px; }
.map-shell #controls .prop-cities .chip { margin: 2px 3px 0 0; font-size: 11px; padding: 1px 8px; }

/* ---- Layers panel sections, draft rows, saved views, collapsible legend (2026-10-11; js/panel.js) ---- */
.map-shell #controls .psec { border-top: 1px solid var(--rule); margin-top: 4px; }
.map-shell #controls .psec:first-child { border-top: 0; }
.map-shell #controls .psec[hidden], .map-shell #controls .world[hidden] { display: none; }
.map-shell #controls .psec-h { display: flex; align-items: baseline; gap: 6px; width: 100%; background: none; border: 0; padding: 6px 2px 4px; cursor: pointer; color: var(--ink); font: inherit; text-align: left; }
.map-shell #controls .psec-h::before { content: "▾"; font-size: 10px; color: var(--ink-soft); width: 10px; flex: none; }
.map-shell #controls .psec.closed .psec-h::before { content: "▸"; }
.map-shell #controls .psec-t { font-weight: 600; font-size: 13px; }
.map-shell #controls .psec-sub { font-size: 11px; color: var(--ink-soft); }
.map-shell #controls .psec-h .world-zoom { margin-left: auto; font-size: 11px; color: var(--ink-soft); }
.map-shell #controls .psec.closed .psec-b { display: none; }
.map-shell #controls .psec-b { padding: 0 0 6px 4px; }
.map-shell #controls .world label { display: block; margin: 3px 0; cursor: pointer; }
.map-shell #controls .psec .toggles { margin-top: 4px; }
.map-shell #controls .pd-master { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-weight: 600; cursor: pointer; }
.map-shell #controls .prop-drafts { padding-left: 0; font-size: 12px; color: var(--ink); }
.map-shell #controls .prop-drafts.off .pd-row, .map-shell #controls .prop-drafts.off .pd-filters { opacity: 0.5; }
.map-shell #controls .pd-allnone { display: flex; gap: 4px; margin: 2px 0 4px; }
.map-shell #controls .pd-allnone .chip { font-size: 11px; padding: 0 8px; }
.map-shell #controls .pd-row { display: flex; align-items: center; gap: 6px; margin: 1px 0; cursor: pointer; min-height: 20px; }
.map-shell #controls .pd-row input { flex: none; margin: 0; }
.map-shell #controls .pd-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 30px; }
.map-shell #controls .pd-ic svg, .map-shell #controls .pd-ic img { display: block; }
.map-shell #controls .pd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-shell #controls .pd-parent { display: flex; align-items: center; gap: 4px; }
.map-shell #controls .pd-parent label { flex: 1; display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.map-shell #controls .pd-caret { background: none; border: 0; cursor: pointer; color: var(--ink-soft); padding: 0 4px; font-size: 11px; }
.map-shell #controls .pd-children { padding-left: 18px; }
.map-shell #controls .pd-group.closed .pd-children { display: none; }
.map-shell #controls .pd-filters { margin-top: 4px; border-top: 1px dashed var(--rule); padding-top: 3px; }
.map-shell #controls .pd-fh { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink-soft); font: inherit; font-size: 12px; }
.map-shell #controls .pd-active { color: var(--accent); font-size: 11px; }
.map-shell #controls .pd-filters.closed .pd-fb { display: none; }
.map-shell #controls .pd-fb { padding-left: 4px; }
.map-shell #controls .world-fly { margin-top: 2px; }
.map-shell #controls .view-save { display: flex; gap: 4px; margin: 8px 0 4px; }
.map-shell #controls .view-save input { flex: 1; min-width: 0; font-size: 12px; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2); color: var(--ink); }
.map-shell #controls .view-list { list-style: none; margin: 2px 0 4px; padding: 0; font-size: 12px; }
.map-shell #controls .view-list li { display: flex; align-items: center; gap: 4px; margin: 1px 0; }
.map-shell #controls .view-go { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0; color: var(--accent); cursor: pointer; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-shell #controls .view-meta { color: var(--ink-soft); font-size: 11px; white-space: nowrap; }
.map-shell #controls .view-x { background: none; border: 0; cursor: pointer; color: var(--ink-soft); padding: 0 3px; font-size: 12px; }
.map-shell #controls .view-x.confirm { color: #b02a30; font-weight: 600; }
.map-shell #controls .view-rename { flex: 1; min-width: 0; font-size: 12px; padding: 1px 4px; }
.map-shell #controls .view-empty { color: var(--ink-soft); font-style: italic; }
.map-shell #controls .view-tools { font-size: 12px; color: var(--ink-soft); }
.map-shell #controls .view-import { cursor: pointer; }
.map-shell #controls .view-link { width: 100%; font-size: 11px; margin-top: 4px; }

.map-shell #map-legend { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 10px 6px; max-width: none; }
.map-shell #map-legend .legend-head { justify-content: flex-start; }
.map-shell #map-legend .legend-hbtn { background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--ink); }
.map-shell #map-legend.collapsed { padding: 3px 10px; }
.map-shell #map-legend.collapsed .legend-items { display: none; }
.map-shell #map-legend .legend-items { display: block; max-height: 40vh; overflow: auto; }
.map-shell #map-legend .lg-grp { margin: 2px 0; }
.map-shell #map-legend .lg-gh { background: none; border: 0; padding: 1px 0; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.map-shell #map-legend .lg-n { font-weight: 400; }
.map-shell #map-legend .lg-gb { display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: center; padding: 1px 0 3px 12px; }
.map-shell #map-legend .lg-grp.closed .lg-gb { display: none; }
.map-shell #map-legend .legend-items { overflow-x: hidden; }
.map-shell #map-legend .lg-item { white-space: normal; max-width: 100%; }
.map-shell #map-legend .lg-item svg, .map-shell #map-legend .lg-item img { flex: none; }

/* ---- Overlay groups (2026-10-11): Proposals · Accepted plans · Thalion's margins (js/proposals.js) ---- */
.map-shell #controls .ov-g { margin: 1px 0; }
.map-shell #controls .ov-g .ov-sw { display: inline-flex; flex: none; width: 30px; }
.map-shell #controls .ov-g .ov-sw svg { display: block; }
.map-shell #controls .ov-g.ov-empty { opacity: 0.55; font-weight: 400; }
.map-shell #card .prop-banner.g-accepted { border-style: solid; border-color: #4b2a8c; }
.map-shell #card .prop-banner.g-margin { border-color: #8c5a86; font-style: italic; }
.map-shell #card .prop-grp svg { vertical-align: -3px; }
.map-shell #card .prop-arch { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 5px; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-soft); }

/* ---- Floating panels: mini / full, draggable (2026-10-11; js/floating.js) ---- */
.map-shell .fp-grip { flex: none; background: none; border: 0; padding: 0 3px; margin: 0 2px 0 -4px; color: var(--ink-soft); cursor: grab; font-size: 14px; line-height: 1; border-radius: 4px; touch-action: none; }
.map-shell .fp-grip:focus-visible, .map-shell .fp-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.map-shell .fp-handle { cursor: grab; touch-action: none; }
.map-shell .fp-handle button, .map-shell .fp-handle input, .map-shell .fp-handle select, .map-shell .fp-handle a { cursor: pointer; }
.map-shell .fp-dragging, .map-shell .fp-dragging .fp-handle { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.map-shell .fp-dragging { box-shadow: 0 6px 22px rgba(60, 40, 20, 0.3); }
.map-shell .icon-btn.fp-mode { font-size: 13px; line-height: 1.1; padding: 2px 8px; min-width: 28px; flex: none; }
.map-shell .fp-title { font-family: var(--font); font-weight: 600; font-size: 13px; }
/* search */
.map-shell #topbar .topbar-tools { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; gap: 2px; z-index: 1; }
.map-shell #topbar .brand { padding-right: 60px; }
.map-shell #topbar.mini { padding-top: 6px; }
.map-shell #topbar.mini .brand { display: none; }
.map-shell #topbar.mini .search { margin-right: 58px; }
/* Featured / Story tours: mini = the current list's top 3 */
.map-shell #explore .fp-top3 { display: none; list-style: none; margin: 6px 0 0; padding: 0; }
.map-shell #explore.mini .fp-top3 { display: block; }
.map-shell #explore.mini #explore-body { display: none; }
.map-shell #explore .fp-top3 .fp-none { font-size: 12px; color: var(--ink-soft); padding: 2px 4px; }
/* Layers: mini = the section chips */
.map-shell #controls .fp-chips { display: none; }
.map-shell #controls.mini { width: 240px; }
.map-shell #controls.mini .controls-title, .map-shell #controls.mini #controls-help { display: inline-block; }
.map-shell #controls.mini .fp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.map-shell #controls.mini .fp-chips .chip { font-size: 11px; padding: 1px 9px; }
.map-shell #controls .controls-head .controls-title { flex: 1; }
/* timeline: mini = era, year, Today (the old "collapsed" look) */
.map-shell #timebar .time-head .fp-grip { margin-right: 0; }
/* legend: mini = its title */
.map-shell #map-legend .legend-head { display: flex; align-items: center; gap: 6px; }
.map-shell #map-legend .legend-head .fp-title { flex: 1; }
.map-shell #map-legend.mini { padding: 3px 8px; }
/* the card: a slim header; mini = the place's kind and name */
.map-shell #card .card-head { display: flex; align-items: center; gap: 6px; margin: -8px 34px 6px -6px; font-size: 11px; color: var(--ink-soft); }
.map-shell #card .card-head .fp-title { flex: 1; font-family: var(--ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.map-shell #card.mini { bottom: auto; overflow: hidden; }
.map-shell #card.mini #card-body > :not(.kind):not(h2) { display: none; }
.map-shell #card.mini #card-body h2 { margin-bottom: 0; }
.map-shell #controls .view-save { flex-wrap: wrap; }
.map-shell #controls .view-save .view-incl { flex-basis: 100%; font-size: 11px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }
/* narrow (< 768 px): docked, no dragging; the card stays a bottom sheet */
@media (max-width: 767px) {
  .map-shell .fp-grip, .map-shell #card-mode, .map-shell #card .card-head { display: none; }
  .map-shell .fp-handle { cursor: default; touch-action: auto; }
}
.map-shell #map-legend.mini .legend-title, .map-shell #map-legend.collapsed .legend-title { display: inline; }

/* ---- Hover tooltip, chooser, nearby (2026-10-11; js/hover.js). Fixed palette: ink #2b2118 on paper #fffaf0 (15:1),
   secondary #4e4030 (9.6:1), so the chip reads the same in both themes and over any imagery. */
#hv-tip { position: fixed; z-index: 30; pointer-events: none; max-width: 300px; padding: 6px 9px 7px; border-radius: 7px;
  background: #fffaf0; color: #2b2118; border: 1px solid #b9a57e; box-shadow: 0 3px 12px rgba(40, 28, 12, 0.28);
  font: 12px/1.35 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; opacity: 0; transition: opacity 90ms ease-out; }
#hv-tip.hv-in { opacity: 1; }
#hv-tip[hidden] { display: none; }
#hv-tip .hv-row { display: flex; align-items: center; gap: 6px; }
#hv-tip .hv-ic, #hv-choose .hv-ic { flex: none; display: inline-flex; align-items: center; min-width: 18px; }
#hv-tip .hv-ic svg, #hv-tip .hv-ic img { display: block; }
#hv-tip .hv-name { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 700; font-size: 14px; }
#hv-tip .hv-type { color: #4e4030; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
#hv-tip .hv-grp { text-transform: none; letter-spacing: 0; font-style: italic; }
#hv-tip .hv-grp.g-accepted { color: #3a1f6e; } #hv-tip .hv-grp.g-margin { color: #5c2f57; } #hv-tip .hv-grp.g-proposal { color: #5e1f6e; }
#hv-tip .hv-detail { margin-top: 3px; }
#hv-tip .hv-dyk { margin-top: 3px; font-style: italic; color: #4e4030; }
#hv-tip .hv-more { margin-top: 3px; color: #7a3a14; font-size: 11px; }
#hv-choose { position: fixed; z-index: 31; min-width: 200px; max-width: 300px; padding: 4px; border-radius: 8px; background: #fffaf0; color: #2b2118;
  border: 1px solid #b9a57e; box-shadow: 0 4px 16px rgba(40, 28, 12, 0.3); font: 12px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
#hv-choose .hv-ch-h { font-size: 11px; color: #4e4030; padding: 2px 6px 4px; text-transform: uppercase; letter-spacing: 0.05em; }
#hv-choose button { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 4px 6px; cursor: pointer; color: inherit; font: inherit; }
#hv-choose button:hover, #hv-choose button:focus-visible { background: #f1e6cc; outline: none; }
#hv-choose .hv-ch-t { display: flex; flex-direction: column; min-width: 0; }
#hv-choose small { color: #4e4030; }
.map-shell #card .hv-nearby { font-size: 13px; margin: 8px 0 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { #hv-tip { transition: none; } }

/* ---- Portal additions (R1.1 Lane D) */
/* The shell fills the window under the Portal header (--map-top, set by the page) and stays below it (z 20). */
.map-shell { position: fixed; inset: var(--map-top, 0px) 0 0 0; height: auto; z-index: 10; }
/* Anvil-only furniture: the VAULT / SANDBOX badge. */
.map-shell .env-badge { display: none; }
/* The reader card's gate and its codex / story links (js/card.js readerGate, readerLinks). */
.map-shell #card .reader-more { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.map-shell #card .reader-signin { display: inline-block; padding: 5px 12px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); text-decoration: none; font-weight: 600; }
.map-shell #card .reader-signin:hover { background: var(--accent); color: #fff; }
.map-shell #card .reader-loading { color: var(--ink-soft); font-size: 12px; border-top: 0; }
/* No page scroll behind the map (the Portal's <main> padding would otherwise scroll on a phone). */
html.map-page, html.map-page body { overflow: hidden; overscroll-behavior: none; }