/* Shared floating-panel "command deck" chrome (cb-*) — used by ANY screen that hosts draggable HUD panels
   (the Map Wizard, Play, …). It lives in its own stylesheet so the chrome never depends on one feature's
   CSS existing: previously it lived in play.css, and archiving Play's combat UI made every Map-Wizard panel
   go see-through. Feature stylesheets (tower.css, play.css) load AFTER this and may override per-screen. */

/* full-bleed board/canvas stage beneath the floating panels */
.cb-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), .05), transparent 60%), var(--bg-deep); }
.cb-stage:active { cursor: grabbing; }

/* floating HUD wrapper + the four corner clusters */
.cb-hud { position: absolute; z-index: 20; width: 18.5rem; max-width: 32vw; display: flex; flex-direction: column; gap: 0.5625rem; pointer-events: none; }
.cb-hud > * { pointer-events: auto; }
.cb-hud-tl { top: 0.75rem; left: 0.75rem; max-height: calc(100% - 1.5rem); }
.cb-hud-tr { top: 0.75rem; right: 0.75rem; max-height: calc(100% - 1.5rem); }
.cb-hud-bl { bottom: 0.75rem; left: 0.75rem; max-height: calc(100% - 1.5rem); justify-content: flex-end; }
.cb-hud-br { bottom: 0.75rem; right: 0.75rem; max-height: calc(100% - 1.5rem); justify-content: flex-end; }

/* each panel = a CARD — the family frame recipe (theme.css --card-bg/--card-shadow; same chrome
   as .vcard/.pcard), replacing the old glass + brass-bracket look. */
.cb-hud .cb-panel { position: relative; color: var(--text);   /* frame comes from the shared recipe in theme.css */
  padding: 0.5625rem var(--sp-8) 0.6875rem; max-height: 46vh; overflow: hidden auto; animation: cb-hud-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cb-hud-rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cb-hud .cb-panel { animation: none; } }
@media (max-width: 1180px) { .cb-hud { width: 15.625rem; } }

/* panel base + draggable header — the header is the card family's eyebrow */
.cb-panel { padding: 0.6875rem 0.8125rem; }
.cb-panel h3 { margin: 0 0 var(--sp-5); --mlbl-ls: .14em; --mlbl-c: var(--accent); }   /* micro-label recipe via .mlbl (theme.css) */
.cb-ph { cursor: grab; user-select: none; display: flex; align-items: center; gap: var(--sp-4); touch-action: none; padding: var(--sp-2) 0.3125rem; border-radius: var(--r-md); transition: background .14s; }
.cb-ph:last-child { margin-bottom: 0; }
.cb-ph:hover { background: rgba(var(--gold-rgb), .09); }
.cb-ph:active { cursor: grabbing; background: rgba(var(--gold-rgb), .14); }
.cb-ph-x { margin-left: auto; font-size: var(--fs-base); padding: var(--sp-1) var(--sp-3); margin-right: -0.125rem; border-radius: var(--r-sm); }  /* icon-btn (2.2) */
/* Large-view toggle (⤢) — third size state beside the collapse caret. When present it owns the
   right-push so the resize + caret group together; its `.on` state marks the panel as enlarged. */
.cb-ph-z { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); line-height: 1; cursor: pointer; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); transition: color .14s, background .14s; }
.cb-ph-z:hover { color: var(--gold); background: rgba(var(--gold-rgb), .16); }
.cb-ph-z.on { color: var(--gold); background: rgba(var(--gold-rgb), .2); }
.cb-ph-z + .cb-ph-x { margin-left: var(--sp-1); }
/* grip-dots drag affordance on every movable header / title card */
.cb-ph::before, .cb-h1::before { content: ""; flex: 0 0 auto; align-self: center; width: 0.5rem; height: 0.8125rem;
  background: radial-gradient(rgba(var(--gold-rgb), .65) 0.06875rem, transparent 0.09375rem) 0 0 / 0.25rem 0.26875rem; opacity: .5; transition: opacity .14s; }
.cb-ph:hover::before, .cb-h1:hover::before { opacity: .95; }
.cb-h1 { display: inline-flex; align-items: center; gap: 0.5625rem; }
.cb-ph-c { background: var(--panel-2); border: 0.0625rem solid var(--border); border-radius: var(--r-lg); padding: 0 0.3125rem; font-size: var(--fs-micro); color: var(--muted); }

/* layout-reset pill + empty-state text */
.cb-layout-reset { position: absolute; left: 50%; top: 3.125rem; transform: translateX(-50%); z-index: 23; background: rgba(var(--glass-rgb), .92);
  border: 0.0625rem solid var(--border); color: var(--muted); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-7); font-family: var(--font-mono); font-size: var(--fs-2xs); cursor: pointer; }
.cb-layout-reset:hover { border-color: var(--accent); color: var(--accent); }
.cb-empty { color: var(--muted); font-size: var(--fs-xs); margin: 0; }

/* consecutive header x-buttons (✕ close then the collapse caret) pack instead of splitting */
.cb-ph-x + .cb-ph-x { margin-left: var(--sp-1); }

/* layout tools cluster: Reset layout + the closed-panels "Panels ▾" reopen menu, side by side */
.cb-layout-tools { position: absolute; left: 50%; top: 3.125rem; transform: translateX(-50%); z-index: 23;
  display: flex; gap: var(--sp-4); align-items: flex-start; }
.cb-layout-tools .cb-layout-reset, .cb-layout-tools .cb-panels-btn { position: static; transform: none; }
.cb-panelsmenu { position: relative; }
.cb-panels-list { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 24; min-width: 9.5rem;
  display: flex; flex-direction: column; background: var(--card-bg); border: 0.0625rem solid var(--border);
  border-top: 0.1875rem solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--card-shadow); overflow: hidden; }
.cb-panels-item { text-align: left; padding: var(--sp-4) var(--sp-6); background: none; border: 0;
  color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.cb-panels-item:hover { background: rgba(var(--accent-rgb), .12); color: var(--accent); }

/* ONE zoom idiom (Play + combat "View" panels): an absolute slider + a Fit/Center ACTION — no ± pairs */
.ui-zoomslider { flex: 1 1 auto; min-width: 0; width: 100%; height: 1.125rem; accent-color: var(--accent); cursor: pointer; }