@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap');

  :root {
    --bg-dark: #1a1714;
    --bg-panel: #23201b;
    --bg-hover: #2e2a24;
    --bg-active: #3a342c;
    --border: #3d3630;
    --border-light: #554d43;
    --text-primary: #e8dcc8;
    --text-secondary: #a89b88;
    --text-muted: #968b78;          /* lightened from #746a5c → ~4.8:1 on panel (WCAG AA) */
    --accent: #c9a84c;
    --label-gold: #e8d5a3;          /* settlement-name gold (was a hard-coded one-off) */
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    --accent-hover: #ddb94f;
    --accent-dim: #a08535;
    --ember: #e07b39;               /* distinct warm accent — collapse carets */
    --ember-hover: #f2954f;
    --halo: #6db3ff;                /* marker highlight glow (audit-tuned lighter blue) */
    --halo-bright: #8fc4ff;         /* halo on hover */
    --danger: #c95a54;              /* brightened from #b34444 → clears the 3:1 UI bar */
    --danger-rgb: 201, 90, 84;      /* == --danger (#c95a54), for translucent danger fills */
    --success: #5a9e4b;
    --scrollbar-thumb: #4a4238;
    --scrollbar-track: #1a1714;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

  /* Respect users who prefer reduced motion: drop transitions/animations. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
    }
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

  /* ── Sidebar ── */
  #sidebar {
    width: 300px;
    min-width: 300px;
    height: 100vh;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: margin-left 0.3s ease;
  }
  #sidebar.collapsed { margin-left: -300px; }

  .sidebar-header {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  }
  /* Branded title: the wordmark is the hero; the crest tucks beside the tagline
     as a small brand mark rather than stacking on top. */
  .sidebar-header .sb-logo {
    width: 100%; max-width: 200px; height: auto; display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));   /* lift the wordmark off the dark panel */
  }
  /* Tagline dressed up: warm gold, wider tracking, a touch of depth, and thin
     gold hairline flourishes flanking it (heraldic banner feel). */
  .sidebar-header .sb-tagline {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-family: 'Cinzel', serif; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.2em;
    color: var(--label-gold);
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  }
  .sidebar-header .sb-tagline::before,
  .sidebar-header .sb-tagline::after {
    content: ''; flex: 0 0 30px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-dim));
  }
  .sidebar-header .sb-tagline::after {
    background: linear-gradient(90deg, var(--accent-dim), transparent);
  }

  /* ── Region Switcher ── */
  /* ── Region Switcher — sliding segmented control ──
     One recessed track holds both regions; a single gold pill slides between
     them (same recessed-track / raised-thumb / 0.26s motion language as .switch).
     The thumb is a ::before positioned by which .region-btn is .active via :has(),
     so switchRegion() needs no layout knowledge — it just toggles .active. */
  .region-section {
    padding: 12px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .region-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    margin-bottom: 8px;
  }
  .region-switcher {
    position: relative;
    display: flex;
    padding: 3px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.42);   /* recessed track */
  }
  /* The sliding gold pill — covers one half of the track (inside the 3px pad). */
  .region-switcher::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: var(--accent);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);          /* raised thumb */
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  }
  .region-switcher:has(.region-btn[data-region="kuttenberg"].active)::before {
    transform: translateX(100%);
  }
  .region-btn {
    position: relative; z-index: 1;   /* sit above the sliding pill */
    flex: 1;
    padding: 7px 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.26s;
  }
  .region-btn:hover { color: var(--text-primary); }
  .region-btn.active { color: var(--bg-dark); }   /* dark text on the gold pill (also wins on hover) */

  /* ── Overall Game Completion bar ── */
  /* ── Editorial eyebrow: one quiet, uppercase, letter-spaced section label that
     recedes into the type system, with a hairline to group the list it heads.
     Gold stays reserved for the figures + active states. ── */
  .section-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }

  .game-progress {
    padding: 12px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .game-progress .gp-header {
    display: flex; justify-content: space-between; align-items: baseline;
    width: 100%; margin-bottom: 6px; padding: 0;
    background: none; border: none; cursor: pointer; font-family: inherit;
  }
  .game-progress .gp-header-end { display: flex; align-items: center; gap: 8px; }
  .game-progress.collapsed .gp-header { margin-bottom: 0; }
  .game-progress.collapsed .mo-caret { transform: rotate(-45deg); }
  /* The whole card body collapses; the % figure stays visible in the header. */
  .game-progress .gp-body {
    overflow: hidden; max-height: 220px; opacity: 1;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s;
  }
  .game-progress.collapsed .gp-body {
    max-height: 0; opacity: 0; visibility: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0s 0.28s;
  }
  .game-progress .gp-header span:first-child {
    font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600;
    color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em;
  }
  /* The hero stat figure: a large mono %, gold (gold is reserved for figures). */
  .game-progress #gp-pct {
    font-family: var(--font-mono); font-size: 18px; font-weight: 600;
    color: var(--accent); line-height: 1; letter-spacing: -0.03em;
  }
  .game-progress .gp-bar {
    height: 6px; background: var(--bg-dark); border: 1px solid var(--border);
    border-radius: 4px; overflow: hidden; margin-top: 2px;
  }
  .game-progress .gp-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent-hover));
    border-radius: 4px; transition: width 0.4s ease;
  }
  .game-progress .gp-detail {
    font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
    margin-top: 5px; text-align: right; letter-spacing: -0.01em;
  }
  /* Per-region breakdown (enlarged names; lives inside the collapsible card body) */
  .game-progress .gp-regions { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
  .game-progress .gp-region { display: flex; align-items: center; gap: 8px; }
  .game-progress .gpr-name { font-size: 12.5px; color: var(--text-secondary); width: 80px; flex-shrink: 0; }
  .game-progress .gp-region.active .gpr-name { color: var(--accent); font-weight: 600; }
  .game-progress .gpr-bar { flex: 1; height: 5px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  .game-progress .gpr-fill { display: block; height: 100%; width: 0%; background: var(--accent-dim); border-radius: 3px; transition: width 0.4s ease; }
  .game-progress .gp-region.active .gpr-fill { background: var(--accent); }
  .game-progress .gpr-pct { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); width: 34px; text-align: right; flex-shrink: 0; letter-spacing: -0.02em; }

  /* ── Sidebar Tabs ── */
  .sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .sidebar-tab {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    flex: 1;
    padding: 10px 6px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
  }

  /* Keyboard focus rings (only show for keyboard users, not mouse clicks) */
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  a:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: 3px;
  }
  .sidebar-tab:hover { color: var(--text-secondary); }
  .sidebar-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* ── Tab Content ── */
  .tab-content { display: none; flex: 1; overflow-y: auto; }
  .tab-content.active { display: flex; flex-direction: column; }

  /* ── Category List ── */
  .category-controls {
    padding: 12px 18px 8px;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .cat-ctrl-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .cat-ctrl-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-active); }

  .category-list { padding: 6px 12px; flex: 1; overflow-y: auto; }

  /* ── Category Groups ── */
  .cat-group { margin-bottom: 2px; }
  .cat-group-header {
    display: flex;
    align-items: center;
    padding: 7px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 6px;
    user-select: none;
  }
  .cat-group-header:hover { background: var(--bg-hover); }
  .cat-group-header:hover .group-name { color: var(--text-primary); }
  .cat-group-header .group-arrow {
    font-size: 10px;
    color: var(--text-muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.2s;
  }
  .cat-group-header.expanded .group-arrow { transform: rotate(90deg); }
  .cat-group-header .group-name {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex: 1;
    transition: color 0.15s;
  }
  .cat-group-header .group-count {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 24px;
    text-align: right;
  }
  /* ── Shared toggle-switch component (group / category) ──
     Track + knob, sized via --sw-w / --sw-h. The three call sites trigger the
     shared "on" appearance via their own class / checkbox. */
  .switch {
    position: relative; flex-shrink: 0; cursor: pointer; padding: 0;
    width: var(--sw-w, 30px); height: var(--sw-h, 16px);
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg-dark);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.38);   /* recessed track */
    transition: border-color 0.24s;
  }
  .switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: calc(var(--sw-h, 16px) - 6px); height: calc(var(--sw-h, 16px) - 6px);
    border-radius: 50%; background: var(--text-muted);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);          /* raised thumb */
    /* Slide with transform (compositor) rather than left (main thread) so the thumb
       still glides while toggling a big category floods the main thread with markers. */
    transition: transform 0.24s cubic-bezier(0.4,0,0.2,1), background 0.24s;
  }
  /* ON: the track fills gold and the (dark) thumb slides right — the strong
     at-a-glance signal that keeps the dense category list scannable. The recessed
     track + raised thumb + smooth slide above is the editorial tactile polish. */
  .group-toggle-all.on,
  .category-item.active .cat-toggle {
    background: var(--accent-dim); border-color: var(--accent);
  }
  .group-toggle-all.on::after,
  .category-item.active .cat-toggle::after {
    transform: translateX(calc(var(--sw-w, 30px) - var(--sw-h, 16px))); background: var(--bg-dark);
  }
  .cat-group-children { display: none; padding-left: 8px; }
  .cat-group-children.expanded { display: block; }

  .category-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
    user-select: none;
  }
  .category-item:hover { background: var(--bg-hover); }
  .category-item .cat-icon {
    width: 22px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .category-item .cat-name {
    font-size: 13px;
    color: var(--text-primary);
    flex: 1;
  }
  .category-item .cat-count {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 20px;
    text-align: right;
  }
  /* .cat-toggle uses the shared .switch component (track/knob/on-state above). */

  /* ── Search ── */
  .search-box {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .search-field { position: relative; }
  .search-icon {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
  }
  .search-field:focus-within .search-icon { color: var(--accent-dim); }
  .search-input {
    width: 100%;
    padding: 8px 32px 8px 34px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
  }
  .search-input::placeholder { color: var(--text-muted); }
  .search-input:focus { border-color: var(--accent-dim); }
  .search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    background: none; border: none; border-radius: 3px;
    color: var(--text-muted); cursor: pointer;
    transition: color 0.15s, background 0.15s;
  }
  .search-clear:hover { color: var(--text-primary); background: var(--bg-hover); }
  .search-clear[hidden] { display: none; }
  .search-results {
    display: none; max-height: 260px; overflow-y: auto;
    background: var(--bg-dark); border: 1px solid var(--border); border-top: none;
    margin: -1px 18px 0; border-radius: 0 0 4px 4px;
  }
  .search-results.active { display: block; }
  .search-result-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    cursor: pointer; font-size: 12px; color: var(--text-primary); border-bottom: 1px solid var(--border);
  }
  .search-result-item:last-child { border-bottom: none; }
  .search-result-item:hover { background: var(--bg-hover); }
  .search-result-item img { width: 18px; height: 18px; image-rendering: pixelated; flex-shrink: 0; }
  .search-result-item .sr-name { font-weight: 500; }
  .search-result-item .sr-cat { color: var(--text-muted); font-size: 11px; }
  .cat-progress { font-size: 11px; color: var(--text-secondary); margin-left: auto; margin-right: 4px; white-space: nowrap; }
  .cat-progress .done { color: var(--success); }
  .group-progress { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-left: 4px; }

  /* ── My Markers Tab ── */
  .my-markers-list { padding: 8px 12px; flex: 1; overflow-y: auto; }
  .my-marker-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
    border-bottom: 1px solid var(--border);
  }
  .my-marker-item:last-child { border-bottom: none; }
  .my-marker-item:hover { background: var(--bg-hover); }
  .my-marker-item .mm-icon { font-size: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; }
  .my-marker-item .mm-info { flex: 1; min-width: 0; }
  .my-marker-item .mm-name { font-size: 13px; font-weight: 500; }
  .my-marker-item .mm-coords { font-size: 11px; color: var(--text-muted); }
  .my-marker-item .mm-delete {
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
    transition: all 0.15s;
  }
  .my-marker-item .mm-delete:hover { color: var(--danger); background: rgba(var(--danger-rgb),0.15); }
  .my-marker-item .mm-edit {
    padding: 2px 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
    transition: all 0.15s;
  }
  .my-marker-item .mm-edit:hover { color: var(--accent); background: var(--bg-hover); }

  .mm-controls { display: flex; gap: 6px; margin-bottom: 8px; }
  .mm-controls .mm-search {
    flex: 1;
    min-width: 0;
    padding: 5px 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
  }
  .mm-controls .mm-search:focus { outline: none; border-color: var(--accent); }
  .mm-controls .mm-sort {
    padding: 5px 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
  }
  .mm-controls .mm-sort option { background: var(--bg-dark); color: var(--text-primary); }
  .mm-other-region {
    padding: 10px 4px 4px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }

  .no-markers {
    padding: 24px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    --empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }
  /* Faint glyph above empty-state messages — themeable (currentColor fill + SVG
     mask), so the JS-rendered empty strings need no icon markup of their own. */
  .no-markers::before, .search-no-results::before {
    content: ''; display: block; width: 30px; height: 30px; margin: 2px auto 12px;
    background: currentColor; opacity: 0.75;
    -webkit-mask: var(--empty-icon) center / contain no-repeat;
    mask: var(--empty-icon) center / contain no-repeat;
  }
  .search-no-results {
    --empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  }
  /* Shared inline-icon baseline: never shrink in a flex row. */
  .ui-icon { flex-shrink: 0; }

  /* ── Tools Tab ── */
  .tools-section { padding: 16px 18px; }
  .tools-section h3 {
    font-family: 'Cinzel', serif;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-bottom: 6px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .tool-btn {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
  }
  .tool-btn:hover { border-color: var(--border-light); background: var(--bg-hover); }
  .tool-btn.danger { border-color: rgba(var(--danger-rgb),0.3); }
  .tool-btn.danger:hover { border-color: var(--danger); background: rgba(var(--danger-rgb),0.1); }
  .tool-icon { flex-shrink: 0; margin-top: 1px; color: var(--text-secondary); transition: color 0.15s; }
  .tool-btn:hover .tool-icon { color: var(--accent); }
  .tool-btn.danger .tool-icon { color: var(--danger); }
  .tool-txt { display: flex; flex-direction: column; min-width: 0; }
  .tool-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

  /* ── Map ── */
  #map-container { flex: 1; position: relative; }
  #map { width: 100%; height: 100%; background: var(--bg-dark); }

  .leaflet-container { background: var(--bg-dark) !important; }

  /* Fix tile seams (sub-pixel gaps between tiles during transforms) */
  .leaflet-tile-container {
    will-change: transform;
  }
  .leaflet-tile {
    outline: 1px solid transparent;
    backface-visibility: hidden;
    image-rendering: auto;
  }

  .leaflet-control-zoom a {
    background: var(--bg-panel) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
  }
  .leaflet-control-zoom a:hover { background: var(--bg-hover) !important; }

  /* ── POI marker glow (per-group colour) + hover affordance ── */
  .leaflet-marker-icon.poi-marker img {
    filter: none;  /* no glow by default — only on hover */
    transition: filter 0.15s ease;
  }
  .leaflet-marker-icon.poi-marker:hover img {
    filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 3px var(--glow));
  }
  /* "Highlight markers" View toggle — a blue halo around every marker.
     Driven by a body class so it survives region switches (which recreate the
     map) and auto-applies to markers created later. */
  body.highlight-markers .leaflet-marker-icon.poi-marker img,
  body.highlight-markers .custom-marker-icon {
    filter: drop-shadow(0 0 1.5px var(--halo)) drop-shadow(0 0 3px var(--halo));
  }
  body.highlight-markers .leaflet-marker-icon.poi-marker:hover img {
    filter: drop-shadow(0 0 2.5px var(--halo-bright)) drop-shadow(0 0 4px var(--halo));
  }

  /* ── Marker tooltips (name on hover) ── */
  .leaflet-tooltip.poi-tooltip {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px; font-weight: 500;
    padding: 3px 8px; border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  }
  .leaflet-tooltip.poi-tooltip::before { display: none; }

  /* ── Toggle Button ── */
  /* The panel handle is the KCD crest emblem (replaces the old ☰). */
  #toggle-sidebar {
    position: absolute;
    left: 0;
    top: 80px;
    z-index: 1001;
    padding: 5px 7px 5px 5px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    line-height: 0;
    transition: all 0.2s;
  }
  #toggle-sidebar img {
    width: 26px; height: 26px; display: block; border-radius: 4px;
  }
  #toggle-sidebar:hover { background: var(--bg-hover); }
  #toggle-sidebar:hover img { filter: brightness(1.12); }

  /* ── Coordinates Display ── */
  #coords-display,
  #zoom-display {
    position: absolute;
    right: 8px;
    z-index: 1001;
    padding: 4px 10px;
    background: rgba(26,23,20,0.85);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    pointer-events: none;
  }
  #coords-display { bottom: 8px; }
  #zoom-display { bottom: 38px; }    /* sits just above the coords pill */

  /* ── Custom Popup Styles ── */
  .leaflet-popup-content-wrapper {
    /* base panel + a subtle top-lit sheen (merged up from the old Illuminated-Edition override) */
    background: linear-gradient(180deg, rgba(58,48,34,0.28), rgba(58,48,34,0) 42%), var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  }
  .leaflet-popup-tip { background: var(--bg-panel) !important; border: 1px solid var(--border) !important; }
  .leaflet-popup-close-button { color: var(--text-muted) !important; }
  .leaflet-popup-close-button:hover { color: var(--text-primary) !important; }

  .popup-title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .popup-category { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .popup-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
  .popup-coords { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-family: monospace; }

  /* ── Progress Tracking Button ── */
  .popup-progress-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    white-space: nowrap;
    background: transparent;
    color: var(--text-secondary);
  }
  .popup-progress-btn:hover { border-color: var(--border-light); background: var(--bg-hover); }
  .popup-progress-btn.completed {
    background: rgba(90,158,75,0.15);
    border-color: var(--success);
    color: var(--success);
  }
  .popup-progress-btn.completed:hover {
    background: rgba(90,158,75,0.25);
  }
  .popup-link-btn {
    display: block; width: 100%; margin-top: 6px; padding: 5px 12px;
    border: 1px solid var(--border); border-radius: 4px;
    background: transparent; color: var(--text-secondary);
    font-size: 12px; font-family: inherit; font-weight: 500;
    cursor: pointer; text-align: center; transition: all 0.15s;
  }
  .popup-link-btn:hover { border-color: var(--border-light); background: var(--bg-hover); color: var(--text-primary); }

  /* ── Popup Action Buttons ── */
  .popup-actions { display: flex; gap: 6px; margin-top: 8px; }
  .popup-action-btn {
    flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
    background: transparent; color: var(--text-secondary); font-size: 12px;
    cursor: pointer; text-align: center; transition: all 0.15s;
  }
  .popup-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
  .popup-action-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: rgba(var(--danger-rgb),0.1); }

  /* ── Local Map Calibration Panel ── */
  /* ── Tool panels (Calibrate / Position Names / Edit Markers) — shared chrome ── */
  .tool-panel {
    display: none; position: absolute; bottom: 40px; z-index: 2000;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); font-size: 12px;
  }
  .tool-panel.active { display: block; }
  .tool-panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--accent-dim); }
  .tool-panel .cal-actions { display: flex; gap: 6px; margin-top: 8px; }
  .tool-panel .cal-actions button { flex: 1; }
  /* Per-panel position/size deltas */
  #calibration-panel { left: 50%; transform: translateX(-50%); min-width: 320px; }
  #label-edit-panel, #marker-edit-panel { right: 20px; min-width: 280px; max-width: 320px; }
  #marker-edit-panel .me-status {
    font-size: 11px; color: var(--text-muted); margin: 0 0 8px;
    padding: 5px 8px; background: var(--bg-dark); border-radius: 4px; text-align: center;
  }
  #marker-edit-panel .me-status.active { color: var(--accent); font-weight: 600; }
  /* Flash a tool panel to draw attention when the user tries to open another */
  @keyframes toolFlash {
    0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
    20%, 60% { box-shadow: 0 0 0 2px var(--accent), 0 4px 24px rgba(0,0,0,0.6); }
  }
  .tool-panel.tool-flash { animation: toolFlash 0.5s ease 2; }
  #calibration-panel .cal-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  #calibration-panel .cal-row label { width: 60px; color: var(--text-secondary); }
  #calibration-panel input[type=range] { flex: 1; accent-color: var(--accent); }
  #calibration-panel .cal-bounds { font-family: monospace; font-size: 11px; color: var(--text-muted); padding: 6px; background: var(--bg-dark); border-radius: 4px; margin: 8px 0; word-break: break-all; }

  /* ── Marker Add Form (popup) ── */
  .marker-form { min-width: 220px; }
  .marker-form h3 {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 10px;
  }
  .marker-form label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 3px; margin-top: 8px; }
  .marker-form input, .marker-form textarea, .marker-form select {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
  }
  .marker-form textarea { resize: vertical; min-height: 50px; }
  .marker-form select option { background: var(--bg-dark); color: var(--text-primary); }

  /* ── Custom Icon Dropdown ── */
  .icon-dropdown { position: relative; }
  .icon-dropdown-btn {
    width: 100%; padding: 7px 10px; background: var(--bg-dark); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-primary); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; text-align: left;
  }
  .icon-dropdown-btn:hover { border-color: var(--border-light); }
  .icon-dropdown-btn img { width: 20px; height: 20px; image-rendering: pixelated; }
  .icon-dropdown-list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: 320px; overflow-y: auto; background: var(--bg-dark);
    border: 1px solid var(--border); border-radius: 0 0 4px 4px;
    z-index: 2000;
  }
  .icon-dropdown-list.open { display: block; }
  .icon-dropdown-search {
    position: sticky; top: 0; z-index: 1;
    width: 100%; padding: 6px 10px; border: none; border-bottom: 1px solid var(--border);
    background: var(--bg-panel); color: var(--text-primary); font-size: 13px; outline: none;
  }
  /* Sectioned icon grid — many classes at a glance, minimal scrolling. */
  .icon-group-header {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 7px 8px 2px; opacity: 0.9;
  }
  .icon-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 2px; padding: 2px 6px 6px;
  }
  .icon-tile {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 3px; border-radius: 4px; cursor: pointer; text-align: center;
    transition: background 0.12s;
  }
  .icon-tile:hover { background: var(--bg-hover); }
  .icon-tile img { width: 26px; height: 26px; image-rendering: pixelated; flex-shrink: 0; }
  .icon-tile .it-emoji { font-size: 20px; line-height: 26px; height: 26px; }
  .icon-tile .it-label {
    font-size: 10px; line-height: 1.15; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
  }

  .marker-form .form-actions { display: flex; gap: 8px; margin-top: 12px; }
  .marker-form .btn {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
  }
  .marker-form .btn-save { background: var(--accent-dim); border-color: var(--accent); color: var(--bg-dark); }
  .marker-form .btn-save:hover { background: var(--accent); }
  .marker-form .btn-del { background: rgba(var(--danger-rgb),0.15); border-color: var(--danger); color: var(--danger); }
  .marker-form .btn-del:hover { background: rgba(var(--danger-rgb),0.28); }
  .marker-form .btn-cancel { background: transparent; color: var(--text-secondary); }
  .marker-form .btn-cancel:hover { background: var(--bg-hover); }

  /* ── Custom Marker Icons ── */
  .custom-marker-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.15s;
  }
  .custom-marker-icon:hover { transform: scale(1.15); }

  /* ── Toast ── */
  #toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 10px 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    z-index: 9999;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  #toast.show { transform: translateX(-50%) translateY(0); }

  /* ── Modal ── */
  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
  }
  .modal-overlay.show { display: flex; }
  .modal {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
  }
  .modal h2 {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    color: var(--accent);
    margin-bottom: 12px;
  }
  .modal textarea {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: monospace;
    resize: vertical;
    outline: none;
  }
  .modal .form-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
  .modal .btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
  }
  .modal .btn-primary { background: var(--accent-dim); border-color: var(--accent); color: var(--bg-dark); }
  .modal .btn-primary:hover { background: var(--accent); }
  .modal .btn-secondary { background: transparent; color: var(--text-secondary); }
  .modal .btn-secondary:hover { background: var(--bg-hover); }

  /* ── Settlement Labels ── */
  .settlement-label {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--label-gold);
    text-shadow:
      -1px -1px 2px rgba(0,0,0,0.9),
       1px -1px 2px rgba(0,0,0,0.9),
      -1px  1px 2px rgba(0,0,0,0.9),
       1px  1px 2px rgba(0,0,0,0.9),
       0    0   6px rgba(0,0,0,0.7);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.5px;
  }
  /* Positioning mode: make each name grabbable for drag-to-place */
  .settlement-label.label-draggable {
    pointer-events: auto;
    cursor: move;
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
    background: rgba(0,0,0,0.35);
    border-radius: 3px;
  }
  /* The crest+name stack grows with zoom (--label-scale from updateLabelScale).
     The transform lives here, NOT on the marker root, so it doesn't clobber
     Leaflet's positioning transform. Anchored at the name's left edge so the
     user's calibrated name positions stay put; the crest floats above. */
  .settlement-label .sl-stack {
    position: relative;
    display: inline-block;
    transform-origin: left center;
    transform: scale(var(--label-scale, 1));
  }
  .settlement-label .sl-name { display: inline-block; }
  /* Town crest, centered just above the name */
  .settlement-label .sl-crest {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    height: 28px;
    width: auto;
    margin-bottom: 2px;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
  }

  /* ── Legend overlay ── */
  #legend-btn {
    position: absolute; bottom: 8px; left: 8px; z-index: 1001;
    padding: 6px 12px; background: var(--bg-panel); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-secondary); font-size: 12px; cursor: pointer;
    font-family: inherit; transition: all 0.2s;
  }
  #legend-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
  #legend-panel {
    display: none; position: absolute; bottom: 42px; left: 8px; z-index: 1001;
    width: 260px; max-height: 60vh; overflow-y: auto;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 12px 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  #legend-panel.active { display: block; }

  /* ── Map control cluster (reset view / fullscreen / copy link) ── */
  #map-controls {
    position: absolute; top: 12px; right: 12px; z-index: 1001;
    display: flex; flex-direction: column; gap: 6px;
  }
  #map-controls button {
    width: 34px; height: 34px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px;
    color: var(--text-secondary); font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
  }
  #map-controls button:hover { background: var(--bg-hover); color: var(--text-primary); }

  /* ── One-time "right-click to add" hint ── */
  #map-hint {
    display: none; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 1001; max-width: min(440px, 68vw);
    align-items: center; gap: 10px;
    padding: 8px 10px 8px 14px;
    background: var(--bg-panel); border: 1px solid var(--accent); border-radius: 6px;
    color: var(--text-secondary); font-size: 13px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  }
  #map-hint.show { display: flex; }
  #map-hint b { color: var(--accent); }
  #map-hint button {
    flex-shrink: 0; padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
    background: transparent; color: var(--text-secondary); font-size: 12px; cursor: pointer;
    font-family: inherit; transition: all 0.15s;
  }
  #map-hint button:hover { background: var(--bg-hover); color: var(--text-primary); }
  .legend-group-title {
    font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin: 9px 0 4px;
    padding-bottom: 3px; border-bottom: 1px solid var(--border);
  }
  .legend-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; color: var(--text-secondary); }
  .legend-row img { width: 18px; height: 18px; image-rendering: pixelated; flex-shrink: 0; }

  /* ── Map Options (toggle switches) ── */
  /* ── Map view options — collapsible "View" disclosure ──
     Collapsed by default to reclaim ~100px of permanent panel height; the
     three toggles reveal on click. Their on/off state persists regardless of
     whether the disclosure is open. */
  .map-options {
    padding: 8px 18px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mo-header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 5px 0; background: none; border: none;
    cursor: pointer; color: var(--text-secondary);
    font-family: 'Cinzel', serif; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    transition: color 0.15s;
  }
  .mo-header:hover { color: var(--text-primary); }
  .mo-caret {
    width: 6px; height: 6px; margin-right: 3px;
    border-right: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
    transform: rotate(45deg);            /* points down = expanded */
    transition: transform 0.22s ease, border-color 0.15s ease;
  }
  .mo-header:hover .mo-caret, .gp-header:hover .mo-caret { border-color: var(--ember-hover); }
  .map-options.collapsed .mo-caret { transform: rotate(-45deg); }   /* points right = collapsed */
  .mo-body {
    display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px;
    overflow: hidden; max-height: 160px; opacity: 1;
    transition: max-height 0.26s ease, opacity 0.2s ease, visibility 0s;
  }
  .map-options.collapsed .mo-body {
    max-height: 0; opacity: 0; visibility: hidden; padding-top: 0;
    /* hide from tab order only after the collapse finishes */
    transition: max-height 0.26s ease, opacity 0.2s ease, visibility 0s 0.26s;
  }
  /* Text-in-button toggle chips: the whole chip is the control, its checkbox is
     the hidden state of record, and :has(input:checked) lights it gold with a
     filled status dot. Keeping the checkbox means the existing toggle handlers
     (and the label-edit tool that flips toggle-labels) work unchanged. */
  .mo-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 6px;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-secondary); font-size: 12px;
    cursor: pointer; user-select: none;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
  }
  .mo-chip:hover { border-color: var(--border-light); color: var(--text-primary); }
  .mo-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
  /* Leading glyph inherits currentColor — gold when on, muted when off. */
  .mo-chip .ui-icon { flex-shrink: 0; }
  .mo-chip:has(input:checked) {
    background: rgba(201,168,76,0.14); border-color: var(--accent); color: var(--accent);
  }
  .mo-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Search empty state */
  .search-no-results { padding: 14px 12px; text-align: center; color: var(--text-muted); font-size: 12px; }

  /* Danger button (themed confirm dialog) */
  .modal .btn-danger { background: rgba(var(--danger-rgb),0.15); border-color: var(--danger); color: var(--danger); }
  .modal .btn-danger:hover { background: rgba(var(--danger-rgb),0.28); }

  /* ── Responsive ── */
  #sidebar-scrim { display: none; }

  /* ═══════════════════════════════════════════════
     ██ ILLUMINATED EDITION — creative design layer
     ═══════════════════════════════════════════════ */

  /* Tactile press feedback on buttons */
  button:active, .tool-btn:active, .region-btn:active, .cat-ctrl-btn:active { transform: translateY(1px); }

  /* ── Cinematic intro / themed loading overlay ── */
  #intro-overlay {
    position: fixed; inset: 0; z-index: 5000; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 38%, #241d14 0%, #140f0a 68%, #0b0805 100%);
    transition: opacity 0.8s ease, visibility 0.8s ease;
  }
  #intro-overlay.done { opacity: 0; visibility: hidden; }
  .intro-inner { text-align: center; padding: 20px; animation: introRise 1.1s ease both; }
  @keyframes introRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .intro-crest { width: 84px; height: 84px; filter: drop-shadow(0 0 20px rgba(201,168,76,0.5)); animation: crestGlow 3s ease-in-out infinite; }
  @keyframes crestGlow { 0%, 100% { filter: drop-shadow(0 0 14px rgba(201,168,76,0.4)); } 50% { filter: drop-shadow(0 0 30px rgba(221,185,79,0.7)); } }
  .intro-title { font-family: 'Cinzel', serif; font-size: clamp(20px, 4vw, 28px); font-weight: 700; color: var(--label-gold); letter-spacing: 1px; margin-top: 16px; }
  .intro-title span { color: var(--accent); }
  .intro-quill { height: 2px; width: 0; max-width: 80vw; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: quillDraw 1s ease 0.45s forwards; }
  @keyframes quillDraw { to { width: 300px; } }
  .intro-sub { font-family: 'Cinzel', serif; font-size: 13px; color: var(--text-secondary); letter-spacing: 3px; margin-top: 12px; text-transform: uppercase; }
  .intro-loading { font-size: 12px; color: var(--text-muted); margin-top: 22px; letter-spacing: 1px; animation: pulseFade 1.6s ease-in-out infinite; }
  @keyframes pulseFade { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }

  /* ── Scroll & wax-seal popups ── */
  .popup-progress-btn.completed { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.30); }
  .popup-progress-btn.stamp { animation: inkStamp 0.45s cubic-bezier(.3, 1.4, .5, 1); }
  @keyframes inkStamp {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--danger-rgb),0.45); }
    30% { transform: scale(0.9); }
    55% { transform: scale(1.05); }
    100% { transform: scale(1); box-shadow: 0 0 0 16px rgba(var(--danger-rgb),0); }
  }

  @media (max-width: 768px) {
    #sidebar { width: 280px; min-width: 280px; position: absolute; height: 100%; z-index: 1002; }
    #toggle-sidebar { z-index: 1003; }                  /* always tappable, above the open drawer */
    #sidebar:not(.collapsed) + #sidebar-scrim {          /* tap-to-close dim behind the open drawer */
      display: block; position: fixed; inset: 0; z-index: 1001; background: rgba(0,0,0,0.5);
    }
    #calibration-panel, #label-edit-panel, #marker-edit-panel {
      max-width: calc(100vw - 24px);                     /* keep dev panels on-screen */
    }
  }