/* DRAWER-TABS (rail.js) — Chrome's tab model rotated onto the map's right edge
   (James ruled 2026-07-04; evolved from the slot dock). Each feature = one .drawer:
   a vertical-text tab FUSED to its panel, the tab on the panel's LEFT edge (the tab
   is the drawer handle). Click toggles · drag-x pulls open / resizes / shuts ·
   drag-y REORDERS (order owns positions — tabs re-flow to even spacing per the
   chosen mode, never overlap). Panels may overlap; pointerdown raises. Rainbow state
   language: bright hue = open/active, dim = closed, glow in the tab's OWN hue =
   attention. The #tab-picker chooses which tabs show, their order, and the mode. */

/* Always keep a bottom gap so the map's own bottom-right controls (compass +
   fullscreen) are never covered by the lowest tab / an open card — normal on all
   map types (James 2026-07-14). `--rail-bottom-gap` shrinks the whole stage
   (host.clientHeight drives every tab Y in rail.js computeY), so top/spread/bottom
   modes all stop above the controls. */
.dock { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
  --rail-bottom-gap: 104px; bottom: var(--rail-bottom-gap); }
/* Google's native 3D exploration controls occupy a taller lower-right strip —
   extend the gap while that renderer is active. */
.layout.photo3d-active .dock { --rail-bottom-gap: 128px; }

.drawer { --slot-hue: var(--accent);
  position: absolute; right: 0; z-index: 10;
  display: flex; align-items: flex-start;
  /* The drawer's border-box is the tab+panel UNION — a card taller than the 92px
     tab leaves an invisible strip below the tab inside the box. Hit-test only the
     visible chrome (tab + card re-enable below) so a raised drawer's empty corner
     can't steal clicks from an overlapped drawer (or the map) beneath it. */
  pointer-events: none; }
/* Every closed tab remains on the screen-edge taskbar above open cards. Open
   drawers use rail.js' inline z-order so their cards can overlap and be raised;
   closed drawers deliberately have no inline z-index. */
.drawer:not(.is-open) { z-index: 1000000; }
/* Tabs animate to their derived slots when the order/mode changes — but NOT on the
   first boot layout (the `is-live` gate is set one frame after the initial layout so
   tabs don't slide in from the top edge), and NOT the tab you're actively dragging
   (`is-sorting` follows the finger 1:1 while its neighbours re-flow around it). */
.dock.is-live .drawer { transition: top .18s ease, right .18s ease; }
.dock.is-live .drawer.is-sorting { transition: none; }
/* An OPEN card sits to the LEFT of the persistent tab column, not behind it: closed
   tabs stay pinned to the screen edge (right:0, z above), so an open drawer offsets
   right by the rail width + a breathing gap so its card clears them with air (James
   2026-07-14 — cards were tucking under the tabs / reading as cut off). Closed
   drawers stay flush right. */
.drawer.is-open { right: calc(var(--rail-w, 48px) + 10px); }

/* ---- The tab (drawer handle): vertical text, hue-coded ---------------------- */
.drawer-tab {
  position: relative; flex: none;
  pointer-events: auto;
  width: 48px; min-height: 104px;  /* keep in step with --rail-w (layout.css) + tabH fallback (rail.js) */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 0; border: 3px solid color-mix(in srgb, var(--slot-hue) 82%, transparent);
  border-right: 0; border-radius: 11px 0 0 11px;
  background: linear-gradient(180deg, rgba(22,38,28,.9), rgba(11,21,14,.86));
  color: color-mix(in srgb, var(--slot-hue) 78%, var(--ink));
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  backdrop-filter: blur(8px);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.drawer-tab:active { cursor: grabbing; }
.drawer-ico { font-size: 27px; line-height: 1; filter: saturate(.55) opacity(.9);
  transition: filter .15s ease; }
.drawer-tab-label { writing-mode: vertical-rl; font-size: 16px; font-weight: 600;
  letter-spacing: .05em; line-height: 1; }
.drawer-tab:hover { color: var(--ink); border-color: var(--slot-hue); }
.drawer-tab:hover .drawer-ico { filter: none; }
.drawer.is-open .drawer-tab, .drawer.is-active .drawer-tab {
  border-color: var(--slot-hue); color: var(--ink);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--slot-hue) 24%, rgba(22,38,28,.92)),
    color-mix(in srgb, var(--slot-hue) 12%, rgba(11,21,14,.9))); }
.drawer.is-open .drawer-ico, .drawer.is-active .drawer-ico { filter: none; }
.drawer-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.drawer-tab[disabled] { opacity: .35; cursor: default; }
.drawer.is-unavailable .drawer-tab { opacity: .58; border-color: color-mix(in srgb, var(--ink-dim) 40%, var(--line)); }
.drawer.is-unavailable .drawer-ico { filter: grayscale(1); opacity: .55; }
.drawer.is-unavailable .drawer-tab::after { content: "×"; font-size: 18px; line-height: 1; color: var(--ink-dim); }

/* Attention (rail.setBadge) — count pill + breathing glow in the tab's OWN hue
   (rainbow, not traffic lights); the glow rests once the drawer is open. */
.drawer-badge { position: absolute; top: -7px; left: -9px;
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--slot-hue); color: #0c1810;
  font-size: 14px; font-weight: 700; line-height: 24px; text-align: center; }
.drawer.has-note:not(.is-open) .drawer-tab { animation: drawer-note 1.6s ease-in-out infinite; }
@keyframes drawer-note {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 14px color-mix(in srgb, var(--slot-hue) 65%, transparent); }
}
/* First-run cue (rail.setPulse) — same breathing glow, no count. */
.drawer-tab.is-pulsing { animation: drawer-note 1.6s ease-in-out infinite; }

/* ---- The fused panel: width-clipper + fixed-width card ----------------------
   .drawer-panel animates 0↔w (the drawer slide); .drawer-card holds the real
   width so content never reflows mid-slide. Flush with the screen's right edge. */
.drawer-panel { flex: none; width: 0; overflow: hidden;
  /* transform = the vertical-fit slide (rail.js applyGeom): the card shifts up
     relative to its tab when it would overflow the stage bottom. */
  transition: width .18s ease, transform .18s ease; }
.drawer-card { position: relative;
  pointer-events: auto;
  display: flex; flex-direction: column; min-height: 96px;
  /* The card now floats free of the screen edge (open drawers offset left of the
     tab column), so it's a fully-bordered, all-but-top-left-rounded panel — the
     top-left stays square where the tab fuses at the top. */
  border: 3px solid var(--slot-hue); border-radius: 0 12px 12px 12px;
  background: linear-gradient(180deg, rgba(20,36,26,.97), rgba(11,21,15,.98));
  box-shadow: 0 18px 46px rgba(0,0,0,.46); }
/* Vertical-fit shift active (tab riding part-way down the card's left edge, not
   fused flush at the top) — the top-left is exposed too, so round all corners. */
.drawer-card.is-shifted { border-radius: 12px; }
/* No panel header — the TAB is the toggle and the label (James 2026-07-04). A slim
   right-aligned bar appears only for features declaring a headAction (Storage). */
.drawer-bar { flex: none; display: flex; justify-content: flex-end;
  padding: 9px 12px 0; }
.drawer-action { flex: none;
  background: color-mix(in srgb, var(--slot-hue) 14%, transparent);
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--slot-hue) 45%, transparent);
  border-radius: 7px; padding: 7px 14px; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.drawer-action:hover { background: color-mix(in srgb, var(--slot-hue) 26%, transparent); }
/* 16px base = the floor for pane content (James 2026-07-05: no tiny text anywhere
   in the sidebar) — anything without an explicit size inherits this. */
/* Padding lives on the BODY so EVERY pane gets breathing room on all four sides —
   whether it's a `.dr-pane` (stashed HTML) or a feature-built root like `.draw-pane`
   that mounts straight in (James 2026-07-14). `.dr-pane` therefore adds none. */
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  font-size: 16px; padding: 18px 20px 22px; }
.drawer-body .dr-pane { padding: 0; }
/* registerLazy placeholder: shows while the feature module imports on first open. */
.drawer-loading { padding: 26px 20px; font-size: 16px; color: var(--muted, #9aa3ad); }
.drawer-loading button { margin-left: 6px; background: color-mix(in srgb, var(--slot-hue) 14%, transparent);
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--slot-hue) 45%, transparent);
  border-radius: 7px; padding: 5px 12px; font-size: 15px; cursor: pointer; }

/* Bottom-left resize grip: drag left = wider, down = taller. Rendered as a bright-
   yellow DOUBLE corner-bracket so it's unmissable (James 2026-07-14 — the single
   dim slot-hue bracket read as decoration, not a handle). */
.drawer-grip { position: absolute; left: -5px; bottom: -5px; width: 34px; height: 34px;
  cursor: nesw-resize; touch-action: none; z-index: 3; }
.drawer-grip::before, .drawer-grip::after { content: ''; position: absolute;
  border-left: 3px solid #ffd21e; border-bottom: 3px solid #ffd21e; border-radius: 0 0 0 4px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.drawer-grip::before { left: 4px; bottom: 4px; width: 20px; height: 20px; opacity: .7; }
.drawer-grip::after  { left: 9px; bottom: 9px; width: 12px; height: 12px; }
.drawer-grip:hover::before, .drawer-grip:hover::after {
  border-color: #ffe45c; box-shadow: 0 0 9px rgba(255,210,30,.7); }

/* ---- Header master PICKER (#tab-picker): which tabs exist on your edge ------ */
.hdr-tabs { position: relative; }
/* Sibling to the base-mode pill: same rounded, filled, glassy family so the header reads as
   one control cluster. Pill-shaped, taller, hue-glow on hover/open. */
.tabs-btn { display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--panel) 72%, black); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 13px 20px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 2px 10px rgba(0, 0, 0, .28);
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.tabs-btn:hover, .tabs-btn[aria-expanded="true"] { color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, color-mix(in srgb, var(--panel) 72%, black));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 26%, transparent); }
.tabs-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 270px; padding: 7px;
  border: 1px solid var(--line); border-radius: 11px;
  background: linear-gradient(180deg, rgba(20,36,26,.97), rgba(11,21,15,.98));
  box-shadow: 0 14px 38px rgba(0,0,0,.44); }
.tabs-row { display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.tabs-row:hover { background: color-mix(in srgb, var(--slot-hue) 13%, transparent); }
/* Drag handle — the only part that starts a reorder (keeps the checkbox + row-click
   free for toggling visibility). */
.tabs-row-grip { flex: none; width: 22px; font-size: 19px; line-height: 1;
  text-align: center; color: var(--ink-dim); cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; }
.tabs-row-grip:hover { color: var(--ink); }
/* While dragging, the row IS the live drop slot (it insertBefore-moves into place) —
   render it as a ghosted placeholder so the landing spot reads at a glance. */
.tabs-row.is-grabbing { cursor: grabbing;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: -3px; }
.tabs-row.is-grabbing > * { opacity: .5; }
.tabs-row.is-grabbing .tabs-row-grip { cursor: grabbing; }
.tabs-row-ico { font-size: 23px; line-height: 1; flex: none; }
.tabs-row-label { flex: 1; font-size: 16px; font-weight: 600; color: var(--ink); }
.tabs-row input[type="checkbox"] { width: 21px; height: 21px; flex: none; cursor: pointer;
  accent-color: var(--slot-hue); }

/* Footer: segmented stack-mode control (Top | Spread | Bottom) + one Show/Hide toggle. */
.tabs-foot { display: flex; flex-direction: column; gap: 7px;
  margin-top: 6px; padding: 8px 4px 2px; border-top: 1px solid var(--line); }
.tabs-modes { display: flex; }
/* Overlap adjacent borders (margin-left:-1px) so a segment can own ALL FOUR of its
   borders; the active one lifts to z-index 1 so its full accent border — including
   the shared left edge — draws on top of its neighbour's grey border. */
.tabs-modes button { position: relative; flex: 1; background: none; color: var(--ink-dim);
  border: 1px solid var(--line); margin-left: -1px;
  padding: 8px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.tabs-modes button:first-child { margin-left: 0; border-radius: 7px 0 0 7px; }
.tabs-modes button:last-child { border-radius: 0 7px 7px 0; }
.tabs-modes button:hover { color: var(--ink); }
.tabs-modes button.is-on { z-index: 1; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.tabs-toggle-all { background: none; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 0; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.tabs-toggle-all:hover { color: var(--ink); border-color: var(--accent); }

/* ---- Feature-pane widgets (the #rail-stash panes: Mini-map / Video / Capture).
        Onboarding-sized: full-row labels, real explanations, big inputs. */
.pane-hint { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; color: var(--ink-dim); }
.pane-select { width: 100%; min-height: 48px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  font: 16px/1.4 var(--font); cursor: pointer; }
.pane-select:hover { border-color: var(--slot-hue, var(--accent)); }
.pane-primary { width: 100%; min-height: 50px;
  background: color-mix(in srgb, var(--slot-hue, var(--accent)) 20%, transparent);
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--slot-hue, var(--accent)) 55%, transparent);
  border-radius: 9px; font-size: 17px; font-weight: 700; cursor: pointer; }
.pane-primary:hover { background: color-mix(in srgb, var(--slot-hue, var(--accent)) 32%, transparent); }
.pane-btn { flex: none; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 10px 16px;
  font-size: 15.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pane-btn:hover { border-color: var(--slot-hue, var(--accent)); }
.pane-btn[disabled] { opacity: .6; cursor: progress; }