/* Mobile shell redesign: utilities and toasts. Tokens live on :root in
   index.html; this file only consumes them. */

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--hairline);
}
.glass-strong {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid var(--hairline);
}
/* Opaque fallback: no backdrop-filter support, or the user asked for less
   transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { background: var(--graphite); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-strong {
    background: var(--graphite);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.tap { min-width: 44px; min-height: 44px; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.pt-safe { padding-top: env(safe-area-inset-top); }

.scroll-panel {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Toasts: top-centre, below the header. */
.shell-toasts {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 72px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--pale);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: 10px 16px;
  box-shadow: 0 8px 24px oklch(0 0 0 / 35%);
}
.toast[data-kind="error"] {
  border-color: var(--danger);
  color: var(--danger);
}
.toast-in { opacity: 0; transition: opacity 0.2s ease; }
.toast-in.toast-show { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .toast { background: var(--graphite); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Header ------------------------------------------------------------------ */
.shell-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: var(--pale);
  font-family: var(--font-ui);
}
.shell-mark {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--pale); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.shell-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 360px; }
.shell-search-button { display: none; }
.shell-actions { display: flex; gap: 8px; }
.shell-actions button, .shell-search-button,
.shell-status .scene-copy, .shell-status .scene-dismiss {
  padding: 0 12px;
  background: transparent; color: var(--pale);
  border: 1px solid var(--hairline); font: inherit; font-size: 12px; cursor: pointer;
}
.shell-actions button:hover, .shell-search-button:hover,
.shell-status .scene-copy:hover, .shell-status .scene-dismiss:hover { border-color: var(--slate); }
.shell-status .scene-note button + button { margin-left: 6px; }
.shell-status button:focus-visible { outline: 2px solid var(--pale); outline-offset: 2px; }
/* Scene note: a strip below the header, so a long note never overflows the
   56px row and stays visible (and announced, role=status on the note) at any
   width. Empty until Scenes shows a note. */
.shell-status {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(420px, 100%); box-sizing: border-box;
  font-size: 11px; color: var(--pale); min-width: 0;
}
.shell-status .scene-note {
  margin: 0; background: var(--glass-strong); border: 1px solid var(--hairline);
}
.shell-status .scene-note-text {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
@media (pointer: fine) {
  .shell-actions button, .shell-search-button,
  .shell-status .scene-copy, .shell-status .scene-dismiss { min-height: 32px; }
  .shell-menu summary { min-width: 32px; min-height: 32px; }
}
@media (pointer: coarse), (max-width: 899px) {
  .shell-actions button, .shell-search-button, .shell-menu summary,
  .shell-status .scene-copy, .shell-status .scene-dismiss,
  .shell-menu .about-trigger { min-height: 44px; min-width: 44px; }
  .shell-menu-list a { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
}
.shell-menu { position: relative; margin-left: auto; }
.shell-menu summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--hairline); font-size: 18px;
}
.shell-menu summary::-webkit-details-marker { display: none; }
.shell-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none; min-width: 180px; z-index: 31;
}
.shell-menu-list a { display: block; padding: 10px; color: var(--pale); text-decoration: none; font-size: 13px; }
.shell-menu-list a:hover { color: var(--ice); }
.shell-menu .about-trigger {
  position: static; width: 100%; text-align: left; border: 0; font-size: 13px;
}
.shell-header a:focus-visible, .shell-header button:focus-visible,
.shell-menu summary:focus-visible { outline: 2px solid var(--pale); outline-offset: 2px; }

/* The search box lives in the header, not in a free corner of the scene. */
.shell-header .nom-search { position: static; width: auto; }

@media (max-width: 899px) {
  .shell-header {
    top: 12px; left: 12px; right: 12px;
    height: auto; min-height: 56px;
    padding-top: env(safe-area-inset-top);
    padding-left: 12px; padding-right: 12px; gap: 6px;
  }
  /* At 360px the row is full: the search slot (Labels) keeps its width and
     the body name gives way first. */
  .shell-search { flex: none; }
  .shell-mark { min-width: 0; flex: 0 1 auto; }
  .shell-mark span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 380px) { .shell-mark-icon { display: none; } }
  .shell-search-button { display: inline-block; margin-left: auto; }
  .shell-status { width: 100%; }
  .shell-header .nom-search input,
  .shell-header .nom-search .nom-results { display: none; }
  .shell-header[data-search="open"] .shell-actions,
  .shell-header[data-search="open"] .shell-menu,
  .shell-header[data-search="open"] .shell-search-button,
  .shell-header[data-search="open"] .shell-mark { display: none; }
  .shell-header[data-search="open"] .shell-search { max-width: none; flex: 1 1 auto; }
  .shell-header[data-search="open"] .nom-search input { display: block; font-size: 16px; height: 40px; }
  .shell-header[data-search="open"] .nom-search .nom-results { display: block; }
  .shell-header[data-search="open"] .nom-search .nom-results[hidden] { display: none; }
}

/* Mobile sheet (mobile-sheet.js). Hosts the existing #panel, #timebar and
   .selected-location; they are display:none on mobile until moved in. */
.sheet { display: none; }

@media (max-width: 899px) {
  #panel, #timebar, .selected-location { display: none; }

  .sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; z-index: 25;
    bottom: calc(var(--toolbar-h, 52px) + env(safe-area-inset-bottom));
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 0;
    overflow: hidden;
    transition: height 0.2s ease;
  }
  .sheet[hidden] { display: none; }
  .sheet.dragging { transition: none; }
  .sheet-handle {
    flex: none; display: flex; justify-content: center; padding: 8px 0 2px;
    touch-action: none; cursor: grab;
  }
  .sheet-handle span { width: 36px; height: 4px; border-radius: 2px; background: var(--slate); opacity: 0.6; }
  .sheet-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 16px; touch-action: none; }
  .sheet-title { flex: 1; margin: 0; font: 600 15px var(--font-display); color: var(--pale); }
  .sheet-chevron, .sheet-close {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--pale); border: 0; font-size: 20px; cursor: pointer;
  }
  .sheet-chevron:focus-visible, .sheet-close:focus-visible { outline: 2px solid var(--pale); outline-offset: -2px; }
  .sheet-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }

  .sheet-body #panel, .sheet-body #timebar, .sheet-body .selected-location:not([hidden]) {
    position: static; width: auto; max-width: none; border: 0; background: transparent;
    backdrop-filter: none;
  }
  .sheet-body #panel { display: flex; }
  .sheet-body #timebar { display: grid; }
  .sheet-body .selected-location:not([hidden]) { display: block; }

  /* Keyboard up: the toolbar gets out of the way (sheet bottom is set inline). */
  body[data-keyboard="open"] .mobile-toolbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
}

/* Bottom toolbar and context strip (mobile-nav.js). Hidden at >= 900px,
   where #readout keeps its index.html rule. */
.toolbar, .context-strip { display: none; }

@media (max-width: 899px) {
  body { --toolbar-h: 64px; }

  .toolbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
    box-sizing: border-box; height: calc(var(--toolbar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    border-width: 1px 0 0;
  }
  .toolbar button {
    flex: 1 1 0; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: transparent; border: 0; color: var(--slate);
    font: 600 11px var(--font-ui); cursor: pointer;
  }
  .toolbar button[aria-pressed="true"] { color: var(--ice); }
  .toolbar button:focus-visible { outline: 2px solid var(--pale); outline-offset: -2px; }
  .toolbar .badge {
    position: absolute; top: 6px; left: calc(50% + 6px);
    min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: var(--ice); color: var(--ice-ink);
    font: 700 10px/16px var(--font-data); text-align: center;
  }
  .toolbar .badge[hidden] { display: none; }
  body[data-keyboard="open"] .toolbar { display: none; }

  .context-strip {
    display: flex; align-items: center; gap: 8px;
    position: absolute; z-index: 20; left: 12px; right: 12px;
    top: calc(env(safe-area-inset-top) + 76px + var(--status-space, 0px));
    min-height: 44px; padding: 0 4px 0 12px; box-sizing: border-box;
    border-radius: var(--radius);
    flex-wrap: wrap;
  }
  /* A pinned readout gets its own row on a phone; the chip wraps under it. */
  .context-strip:has(#readout:not(:empty)) { padding-bottom: 4px; }
  .context-strip:not(:has(#readout:not([hidden]), .time-chip:not([hidden]), .context-pin:not([hidden]))) {
    display: none;
  }
  .context-readout { flex: 1 1 260px; min-width: 0; font: 12px var(--font-data); color: var(--pale); }
  .context-readout #readout {
    position: static; padding: 4px 0; background: none; border: 0;
    font: inherit; font-size: 12px; line-height: 1.3;
  }
  .context-readout #readout[hidden] { display: none; }
  .context-pin { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; color: var(--pale); }
  .context-pin[hidden] { display: none; }
  .context-pin-cancel, .time-chip {
    background: transparent; border: 1px solid var(--hairline); border-radius: 8px;
    color: var(--pale); font: 12px var(--font-data); cursor: pointer; padding: 0 10px;
  }
  .time-chip { flex: none; white-space: nowrap; margin-left: auto; }
  .time-chip[hidden] { display: none; }
  .context-pin-cancel:focus-visible, .time-chip:focus-visible { outline: 2px solid var(--pale); outline-offset: 2px; }
  /* The datum banner sits where the context strip does, above it (z 35):
     a mismatch alert outranks the readout. */
  #banner { left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 76px); }
  /* The strip carries the pin hint on mobile. */
  .pin-hint { display: none; }

  /* Bottom-anchored map widgets stack above the toolbar (and the sheet at
     peek); they step aside while the sheet is half or full. */
  /* --measure-space is the measure bar's height + 8px (mobile-nav.js), unset
     while the bar is hidden. */
  .camctl {
    top: auto; transform: none; right: 12px;
    bottom: calc(var(--toolbar-h) + env(safe-area-inset-bottom) + 12px + var(--measure-space, 0px));
  }
  .camgauge {
    right: auto; left: 12px; justify-items: start;
    bottom: calc(var(--toolbar-h) + env(safe-area-inset-bottom) + 12px + var(--measure-space, 0px));
  }
  body[data-sheet="peek"] .camctl, body[data-sheet="peek"] .camgauge {
    bottom: calc(var(--toolbar-h) + env(safe-area-inset-bottom) + 180px);
  }
  body[data-sheet="half"] .camctl, body[data-sheet="full"] .camctl,
  body[data-sheet="half"] .camgauge, body[data-sheet="full"] .camgauge { display: none; }

  .measure, .note-composer {
    position: fixed; top: auto; z-index: 24;
    bottom: calc(var(--toolbar-h) + env(safe-area-inset-bottom) + 8px);
  }
  /* The toolbar owns the Measure toggle; the bar (Profile / Clear / result)
     shows only while measuring, and lets taps through to the camera
     controls around it. body[data-tool] is set by mobile-nav.js. */
  .measure { left: 12px; right: 12px; display: none; pointer-events: none; }
  body[data-tool="measure"] .measure { display: block; }
  /* A finished measurement stays on the map after Measure is left: keep its
     Clear reachable while the sheet is closed and no note is being placed. */
  body[data-sheet="closed"]:not([data-tool="pin"]) .measure:has(.measure-clear:not([hidden])) { display: block; }
  .measure .measure-toggle { display: none; }
  .measure button, .measure .measure-result { pointer-events: auto; }
  .measure-row { justify-content: center; }
  /* A short landscape phone has no room above a measure bar: the camera
     controls step aside while it shows, as they do for a half/full sheet. */
  @media (max-height: 500px) {
    body[data-tool="measure"] .camctl, body[data-tool="measure"] .camgauge,
    body[data-sheet="closed"]:not([data-tool="pin"]):has(.measure-clear:not([hidden])) .camctl,
    body[data-sheet="closed"]:not([data-tool="pin"]):has(.measure-clear:not([hidden])) .camgauge { display: none; }
  }
  /* --kb is the software keyboard height, published by mobile-sheet.js. */
  body[data-keyboard="open"] .note-composer { bottom: calc(var(--kb, 0px) + 8px); }

  /* The Layers sheet shows panel.js's Explore / Active / Compare tabs as a
     segmented strip. */
  .sheet-body .panel-tabs { gap: 4px; padding: 6px 12px; border-bottom: 0; }
  .sheet-body .panel-tabs button {
    flex: 1; min-height: 44px; border: 1px solid var(--hairline); border-radius: 8px;
  }
  .sheet-body .panel-tabs button[aria-selected="true"] {
    background: var(--ice); border-color: var(--ice); color: var(--ice-ink);
  }
}

/* Desktop surfaces (>= 900px) on the new tokens. Everything here sits inside
   one min-width block, so the mobile (< 900px) rules above are untouched.
   Loaded after index.html's inline <style>, so equal specificity wins here. */
@media (min-width: 900px) {
  /* Map overlays that used to sit at the top of #scene start below the 56px
     header (z 30), plus the scene-note strip when one is showing
     (--status-space, published by mobile-nav.js). */
  .measure { top: calc(56px + 12px + var(--status-space, 0px)); }
  .pin-hint { top: calc(56px + 12px); }
  .note-composer { top: calc(56px + 12px + 44px); }

  #panel {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid var(--hairline); border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }
  body.has-targets #targets-rail {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
    border: 1px solid var(--hairline); border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  #timebar, .camgauge, .camctl button, #readout {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border-radius: var(--radius);
  }
  .camctl button { border-radius: 8px; }
  .about-scrim { background: var(--scrim); }
  .about-dialog {
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
    border-radius: var(--radius);
  }

  h1, .panel-head h1, .about-dialog h2 {
    font-family: var(--font-display); font-weight: 500; letter-spacing: -0.035em;
  }
  #readout, .camgauge, .scalebar b, .stamp, .time-meta, .nom-results em,
  .measure-result, .profile, .target-meta, .note-meta, .note-composer-where {
    font-family: var(--font-data);
  }

  /* Opaque fallbacks, as for .glass / .glass-strong. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #panel, body.has-targets #targets-rail, #timebar, .camgauge, .camctl button,
    #readout, .about-dialog { background: var(--graphite); }
  }
  @media (prefers-reduced-transparency: reduce) {
    #panel, body.has-targets #targets-rail, #timebar, .camgauge, .camctl button,
    #readout, .about-dialog {
      background: var(--graphite);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
  }
}