/* ==========================================================================
   Lyndryss Campaign Map — clean dark UI
   --------------------------------------------------------------------------
   State classes JS is expected to toggle (no other CSS hooks needed):
     #sidebar.sidebar--collapsed   hide the sidebar (desktop: slides right,
                                   mobile: slides down)
     .is-hidden                    generic hide (loading overlay, error banner,
                                   search results, …)
     .tool-btn.is-active           engaged annotation tool
     .map-mode.is-active           current map-mode (Biomes/Territory/Culture/Religion)
     .icon-palette__swatch.is-selected   chosen annotation icon
     body.is-panning / body.is-placing  optional cursor hints over the canvas
   ========================================================================== */

/* ---------- Theme tokens ---------- */
:root {
  --bg: #14171c;            /* page / canvas backdrop */
  --panel: #1d2128;         /* sidebar, header */
  --panel-raised: #262b34;  /* popups, inputs, hover rows */
  --border: #333a45;
  --text: #e3e6eb;
  --text-muted: #9aa3b0;
  --accent: #5aa9e6;        /* interactive highlights */
  --accent-soft: rgba(90, 169, 230, 0.18);
  --danger: #e06c5c;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --radius: 8px;
  --radius-sm: 5px;
  --header-h: 52px;
  --sidebar-w: 300px;
  --lore-w: 340px;
  --ease: 200ms ease;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Amarante", var(--font);   /* shared with WikiLore's title */
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  overflow: hidden; /* the map pans, the page never scrolls */
}

button {
  font: inherit;
  color: inherit;
}

.is-hidden {
  display: none !important;
}

/* ---------- App frame ---------- */
.app {
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  height: 100%;
}

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 30;
}

/* Title matches WikiLore's: two separate links, Amarante display font.
   "Lyndryss" → the hub, "Map" (accent) → this site's own URL. */
.site-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.site-title__home,
.site-title__accent {
  text-decoration: none;
}

.site-title__home {
  color: var(--text);
}

.site-title__accent {
  color: var(--accent);
}

.site-title__home:hover,
.site-title__accent:hover {
  text-decoration: underline;
}

.header-meta {
  display: flex;
  gap: 12px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.header-meta__item {
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}

.btn:hover {
  background: var(--border);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn--icon {
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  font-size: 16px;
  line-height: 1;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #10222f;
  font-weight: 600;
}

.btn--primary:hover {
  background: #7cbcec;
}

.btn--danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.btn--danger:hover {
  background: rgba(224, 108, 92, 0.12);
}

.btn--ghost {
  background: transparent;
}

/* ---------- Map viewport ---------- */
.map-container {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none; /* JS owns panning/pinching via pointer events */
}

body.is-panning .map-canvas {
  cursor: grabbing;
}

body.is-placing .map-canvas {
  cursor: crosshair;
}

/* Floating zoom controls — bottom-right, clear of the sidebar on desktop */
.zoom-controls {
  position: absolute;
  right: 16px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  transition: right var(--ease);
}

/* shift left while the sidebar is open so it doesn't cover the buttons */
.app:has(> .sidebar:not(.sidebar--collapsed)) .zoom-controls {
  right: calc(var(--sidebar-w) + 16px);
}

.zoom-controls .btn {
  box-shadow: var(--shadow);
}

.zoom-controls__reset {
  margin-top: 4px;
}

/* Cursor coordinates — bottom-left */
.coords-readout {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 3px 8px;
  background: rgba(20, 23, 28, 0.8);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  pointer-events: none;
  z-index: 10;
}

/* Feature status bar — bottom center (province/state, culture, river/lake…).
   Azgaar-style: a wide band, faint in the middle, fading to transparent at the
   left/right edges; no hard border, larger text with a shadow for legibility. */
.status-readout {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: min(640px, 72vw);
  padding: 5px 0;
  background: linear-gradient(to right,
              rgba(20, 23, 28, 0) 0%,
              rgba(20, 23, 28, 0.5) 28%,
              rgba(20, 23, 28, 0.5) 72%,
              rgba(20, 23, 28, 0) 100%);
  border: none;
  border-radius: 0;
  font-size: 19px;
  letter-spacing: 0.3px;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 10;
}

.status-readout:empty {   /* nothing under the cursor (e.g. open ocean) → hide */
  display: none;
}

/* ---------- Popup layer ---------- */
.popup-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.popup {
  pointer-events: auto;
  position: absolute; /* JS sets left/top */
  min-width: 200px;
  max-width: 280px;
  padding: 12px 14px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.popup__close {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 24px;
  min-height: 24px;
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--text-muted);
}

.popup__close:hover {
  color: var(--text);
  background: transparent;
}

.popup__title {
  margin: 0 18px 6px 0;
  font-size: 14px;
  font-weight: 650;
}

.popup__body {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.popup__link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
}

.popup__link:hover {
  text-decoration: underline;
}

/* GM-only location id (for pasting into a WikiLore article). A borderless
   button so it reads as a muted label but supports click-to-copy. */
.popup__id {
  display: block;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.popup__id code {
  color: var(--text);
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
}

.popup__id:hover code {
  color: var(--accent);
}

.popup__id.is-copied code::after {
  content: " ✓ copied";
  color: var(--text-muted);
  font-family: var(--font);
}

/* Watabou location-map preview (Phase 3). JS adds .popup--wide alongside the
   preview so the embedded map gets room; min() keeps it on phone screens. */
.popup--wide {
  max-width: min(420px, calc(100vw - 32px));
}

.popup__preview {
  margin-top: 10px;
}

.popup__preview-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  pointer-events: none; /* preview is a picture — the link opens the real thing */
}

.popup__textarea {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.popup__textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.popup__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* ---------- Loading overlay ---------- */
.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  z-index: 40;
}

.loading-overlay__text {
  margin: 0;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.5s;
  }
}

/* ---------- Error banner ---------- */
.error-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(90%, 480px);
  padding: 8px 8px 8px 14px;
  background: rgba(224, 108, 92, 0.14);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 50;
}

.error-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--text-muted);
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: absolute;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--border);
  transition: transform var(--ease);
  z-index: 25;
}

.sidebar.sidebar--collapsed {
  transform: translateX(100%);
}

/* Collapse handle: hidden on desktop (the header ☰ collapses the panel there);
   shown as a sticky bar at the top of the bottom sheet on mobile. */
.sidebar-collapse {
  display: none;
}

/* ---- Search ---- */
.sidebar-search {
  position: relative;
  margin-bottom: 8px;
}

.sidebar-search__input {
  width: 100%;
  padding: 8px 10px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
}

.sidebar-search__input::placeholder {
  color: var(--text-muted);
}

.sidebar-search__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 5;
}

.search-result__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.search-result__btn:hover,
.search-result__btn:focus-visible {
  background: var(--accent-soft);
  outline: none;
}

/* ---- Sections ---- */
.sidebar-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar-section__title {
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none; /* hide default marker; we draw our own chevron */
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-section__title::-webkit-details-marker {
  display: none;
}

.sidebar-section__title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg); /* points right when closed */
  transition: transform var(--ease);
  flex-shrink: 0;
}

.sidebar-section[open] > .sidebar-section__title::before {
  transform: rotate(45deg); /* points down when open */
}

.sidebar-section__title:hover {
  color: var(--text);
}

/* ---- Toggle rows / switches ---- */
.toggle-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toggle-row + .toggle-row {
  margin-top: 2px;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}

.switch:hover {
  background: var(--panel-raised);
}

/* Visually hidden but focusable input; the track shows state */
.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch__track {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  background: var(--border);
  border-radius: 9px;
  transition: background var(--ease);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--ease), background var(--ease);
}

.switch__input:checked + .switch__track {
  background: var(--accent);
}

.switch__input:checked + .switch__track::after {
  transform: translateX(14px);
  background: #fff;
}

.switch__input:focus-visible + .switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch__input:disabled ~ .switch__label {
  color: var(--text-muted);
  opacity: 0.5;
}

.switch__input:disabled + .switch__track {
  opacity: 0.4;
}

.switch__icon {
  flex-shrink: 0;
}

.switch__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 7px;
}

/* ---- Bulk actions (show/hide all) ---- */
.bulk-actions {
  display: flex;
  gap: 6px;
  padding: 0 4px 8px;
}

.bulk-actions__btn {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.bulk-actions__btn:hover {
  color: var(--text);
}

/* ---- Map mode buttons ---- */
.map-modes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.map-mode {
  width: 100%;
  justify-content: flex-start;
}

/* The active map-mode: a highlighted box around the current selection. */
.map-mode.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Annotation tools ---- */
.annotation-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}

.hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.annotation-tools__modes {
  display: flex;
  gap: 6px;
}

.tool-btn {
  flex: 1;
}

.tool-btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.icon-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.icon-palette__swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.icon-palette__swatch:hover {
  border-color: var(--text-muted);
}

.icon-palette__swatch.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.icon-palette__swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.annotation-tools__clear {
  align-self: flex-start;
  font-size: 12px;
  padding: 5px 10px;
}

/* ---- Player account (Phase 3): sync notes across devices ---- */
.player-account {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.player-auth {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-auth .hint {
  margin-bottom: 2px;
}

.player-auth__actions {
  display: flex;
  gap: 6px;
}

.player-auth__actions .btn {
  flex: 1;
}

.player-auth__msg {
  margin: 0;
  font-size: 12px;
  color: var(--danger);
}

/* Confirmations ("check your email") reuse the same slot but read muted. */
.player-auth__msg.is-ok {
  color: var(--text-muted);
}

.player-session {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-session__signout {
  align-self: flex-start;
  font-size: 12px;
  padding: 5px 10px;
}

/* ---- Game Master floating menu (Phase 2) ---- */
/* Pinned inside the map viewport, top-left, just below the header. Independent
   of the sidebar so both can be open at once. */
.gm-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 20;
  box-shadow: var(--shadow);
}

/* ---------- Lore panel (Phase 3, guide 04) ---------- */
/* The wiki twin of the right sidebar: an absolute left column over the map.
   The iframe inside loads WikiLore in embed mode (chrome hidden), so the
   panel reads as a native part of the map UI. */
.lore-panel {
  position: absolute;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--lore-w);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
}

.lore-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.lore-panel__title {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lore-panel__open {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
}

.lore-panel__open:hover {
  text-decoration: underline;
}

.lore-panel__close {
  flex-shrink: 0;
  min-width: 24px;
  min-height: 24px;
  padding: 2px;
  background: transparent;
  border: none;
  color: var(--text-muted);
}

.lore-panel__close:hover {
  color: var(--text);
  background: transparent;
}

.lore-panel__frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--panel);
}

/* Slide the floating GM toggle out from under an open lore panel. */
.app:has(.lore-panel:not(.is-hidden)) .gm-toggle {
  left: calc(var(--lore-w) + 16px);
}

/* The lore button in marker popups. */
.popup__lore {
  display: block;
  width: 100%;
  margin-top: 8px;
}

.gm-toggle.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.gm-panel {
  position: absolute;
  top: 60px;            /* sits just under the toggle button */
  left: 16px;
  width: 260px;
  max-height: calc(100% - 76px);
  overflow-y: auto;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.gm-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gm-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.gm-panel__close {
  min-width: 24px;
  min-height: 24px;
  padding: 2px;
}

/* ---- Game Master panel contents (Phase 2) ---- */
.gm-login {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.gm-login__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gm-login__label {
  font-size: 12px;
  color: var(--text-muted);
}

.gm-login__input {
  padding: 6px 8px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.gm-login__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gm-login__submit {
  align-self: flex-start;
}

.gm-login__error {
  margin: 0;
  font-size: 12px;
  color: var(--danger);
}

.gm-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}

.gm-tools__status {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.gm-tools__status #gm-who {
  color: var(--text);
}

.gm-tools__signout {
  align-self: flex-start;
  font-size: 12px;
  padding: 5px 10px;
}

/* ---- GM reveal tools (Phase 2): stacked, full-width (long labels) ---- */
.reveal-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Reveal level popup (05e-2) ---- */
.popup--reveal {
  width: 230px;
}

.reveal-popup__info {
  font-size: 12px;
  color: var(--text-muted);
}

.reveal-popup__levels {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.reveal-level {
  text-align: left;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.reveal-level:hover {
  border-color: var(--text-muted);
}

.reveal-level.is-selected {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.reveal-level--hide {
  color: var(--danger);
}

.reveal-level--hide.is-selected {
  background: rgba(224, 108, 92, 0.18);
  border-color: var(--danger);
  color: var(--danger);
}

/* ---- Token placement options (Phase 2) ---- */
/* Hidden until the Place-token tool is active, so the GM menu stays just tool
   buttons until a tool actually needs options. setActiveTool() already toggles
   .is-active on #tool-token, so this is pure CSS (:has) — no extra JS. */
.token-options {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}

.gm-tools:has(#tool-token.is-active) .token-options {
  display: flex;
}

/* Ping options (Phase 3, guide 03). In the sidebar (#player-ping-tools) the
   block is always laid out; JS toggles .is-hidden by sign-in state. In the GM
   panel it appears only while the ping tool is armed, like token options. */
.ping-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.gm-tools .ping-options {
  display: none;
  margin-top: 0;
  padding: 0 4px;
}

.gm-tools:has(#tool-ping.is-active) .ping-options {
  display: flex;
}

.gm-player-pings {
  margin-top: 2px;
}

.annotation-color {
  margin: 2px 0;
}

.tool-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.token-color {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.token-color__input {
  width: 40px;
  height: 26px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.token-label {
  font-size: 13px;
}

/* ---- Legend ---- */
.legend-list {
  margin: 0;
  padding: 0 4px;
  list-style: none;
}

.legend-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px;
  color: var(--text-muted);
}

/* ---------- Narrow screens: sidebar becomes a bottom sheet ---------- */
@media (max-width: 720px) {
  :root {
    --sidebar-w: 100%;
    --lore-w: 100%; /* lore panel becomes a full overlay on phones */
  }

  .app-title__sub {
    display: none;
  }

  .header-meta {
    display: none;
  }

  .sidebar {
    top: auto;
    left: 0;
    height: 55%;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow);
  }

  .sidebar.sidebar--collapsed {
    transform: translateY(100%);
  }

  /* Tappable collapse bar pinned to the top edge of the sheet (thumb-reachable). */
  .sidebar-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    flex: 0 0 auto;
    width: 100%;
    height: 30px;
    margin-bottom: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
  }

  .sidebar-collapse:active {
    color: var(--text);
  }

  /* keep zoom buttons clear of the sheet (top-right; the sheet rises from
     the bottom, so the desktop "shift left" rule must not apply here) */
  .zoom-controls,
  .app:has(> .sidebar:not(.sidebar--collapsed)) .zoom-controls {
    right: 16px;
    bottom: auto;
    top: 16px;
  }
}