/* Content-only overlay. Canonical shell owns global chrome; no opacity on a
* panel ancestor: only its ground is translucent, keeping glyphs crisp. */
:root {
  /* Compatibility aliases for the canonical Musix control sheet. These are
   * semantic links, not a second palette. Shell theme changes still win. */
  --bg: var(--of-paper); --panel: var(--of-paper-soft); --ink-dim: var(--of-ink-soft);
  --accent-dim: var(--line); --accent-soft: var(--accent-subtle);
  --accent-hover: var(--accent); --accent-press: var(--accent); --on-accent: var(--of-paper);
  --focus: var(--accent); --btn-ghost-hover: var(--surface-subtle);
  /* Overwatch/CIC controls, not the Musix player's rounded visual family.
   * Keep the generated controls sheet for behavior, locally use chrome tokens. */
  --btn-ghost-active: var(--accent-subtle); --r-control: var(--bar-control-radius); --r-pill: 999px;
  --sans: var(--bar-font-family); --mono: ui-monospace, Consolas, monospace;
  --h-lg: var(--control-min-h, 44px);
  --targeting-rail-width: var(--tab-width, 1.45rem);
  /* Owner 2026-09-30 16:06: "yellow is a bad contrasting color, go with grey".
   * The chrome's grey pair is the version strip's (shell-tokens.css): a 72%
   * grey with white ink, theme-invariant. Aliased once here for the rail. */
  --targeting-rail-accent: var(--version-strip-surface);
  --targeting-rail-accent-ink: var(--version-strip-ink);
  /* Owner's y-start: 20% of the current usable viewport, not physical monitor
   * pixels. Subtract it from available height so long drawers still scroll. */
  --targeting-drawer-top: calc(20dvh + env(safe-area-inset-top, 0px));
  --targeting-readout-reserve: 80px;
  --targeting-tag-ground: var(--of-ink);
  --targeting-tag-ink: var(--of-paper);
}
:root[data-theme="light"] { --targeting-tag-ground: var(--of-paper); --targeting-tag-ink: var(--of-ink); }
* { box-sizing: border-box; }
html { touch-action: manipulation; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--of-paper, var(--bg)); color: var(--of-ink, var(--ink)); font: 15px/1.5 var(--sans); }
[hidden] { display: none !important; }
#targeting-stage { position: absolute; inset: 0; overflow: hidden; }
#world-frame, #director-stage { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#director-stage.is-inset { inset: auto 12px 12px auto; width: min(400px, calc(100% - 24px)); height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--of-paper); }
.targeting-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.targeting-renderer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.targeting-picking { cursor: crosshair; }
#scene-readout { position: absolute; z-index: 5; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); left: calc(env(safe-area-inset-left, 0px) + var(--targeting-rail-width) + 12px); max-width: calc(100% - var(--targeting-rail-width) - 24px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
#scene-status { max-width: 100%; padding: 4px 6px; background: var(--surface-overlay); color: var(--of-ink); pointer-events: none; font: 10px var(--mono); }
/* Live OVERWATCH reference: .right-drawer-tabs / .drawer-tab / module rail in
 * cic/topology/styles.css:1126–1236. Mirror its rail on the owner-requested
 * LEFT edge, scope it to this guest, and consume current tokens instead of
 * copying legacy literal colors or importing global shell layout rules. */
/* Owner 2026-09-30 16:06: the sidebars are "semitransparent overlays". The
 * rail floats over the stage (fixed; the stage stays full-bleed) on the house
 * glass: --surface-overlay-glass under --overlay-blur (shell-tokens.css, s033),
 * falling back to the opaque --surface-overlay where blur is unsupported or
 * transparency is reduced. Only the ground is translucent; glyphs stay crisp. */
#targeting-rail { position: fixed; top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); z-index: 11; width: var(--targeting-rail-width); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; box-shadow: var(--shadow-drawer); background: var(--surface-overlay); border-right: 1px solid var(--overlay-border, var(--line)); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #targeting-rail { background: var(--surface-overlay-glass, var(--surface-overlay)); backdrop-filter: var(--overlay-blur, none); -webkit-backdrop-filter: var(--overlay-blur, none); }
}
@media (prefers-reduced-transparency: reduce) {
  #targeting-rail { background: var(--surface-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
#targeting-rail::-webkit-scrollbar { display: none; }
/* Owner 2026-09-30 15:27: "top button needs to be a collapse left arrow button
 * in a contrasting color"; 16:06: grey, not yellow. It supersedes the earlier
 * quarter-width hover rest: the rail is always the CIC sidebar's width
 * (--tab-width, the shell's own right rail opened by its top-right ⇥ Sidebar
 * button) and is put away explicitly. The same button stays at the top when
 * collapsed and points back (⇥), so the rail is never lost. */
.targeting-rail-collapse { width: 100%; min-width: 0; aspect-ratio: 1; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--overlay-border, var(--line)); background: var(--targeting-rail-accent); color: var(--targeting-rail-accent-ink); cursor: pointer; touch-action: manipulation; user-select: none; font-family: var(--bar-font-family); font-size: var(--bar-icon-size); font-weight: var(--bar-font-weight); line-height: 1; }
.targeting-rail-collapse:hover, .targeting-rail-info:hover { background: color-mix(in srgb, var(--targeting-rail-accent) 70%, var(--bar-bg-solid)); }
.targeting-rail-collapse:focus-visible, .targeting-rail-info:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Owner 2026-09-30 16:08: the square Info button is replaced by the circular
 * "i", "at the bottom of the left (node level) sidebar". It is the only info
 * control: it also drives the map's own Info labels (s052) and carries the map
 * attribution (app.js). Collapsed, the rail keeps it under the ⇥ button. */
.targeting-rail-info { align-self: center; width: 80%; aspect-ratio: 1; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; margin: .25rem 0; padding: 0; border: 1px solid var(--version-strip-border); border-radius: 50%; background: var(--targeting-rail-accent); color: var(--targeting-rail-accent-ink); cursor: pointer; touch-action: manipulation; user-select: none; font-family: var(--bar-font-family); font-size: max(.6rem, calc(var(--targeting-rail-width) * .5)); font-weight: 700; line-height: 1; text-transform: none; }
.targeting-rail-info[aria-pressed="true"] { background: var(--bar-bg-solid); color: var(--bar-fg); }
#targeting-rail[data-collapsed] > :not(.targeting-rail-collapse, .targeting-rail-info) { display: none; }
.targeting-rail-tab { width: 100%; min-width: 0; min-height: 4.75rem; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--overlay-border, var(--line)); background: transparent; color: var(--ink); box-shadow: inset -2px 0 0 var(--targeting-rail-accent); cursor: pointer; touch-action: manipulation; user-select: none; font-family: var(--bar-font-family); font-size: .6rem; font-weight: var(--bar-font-weight); letter-spacing: var(--bar-letter-spacing); line-height: 1.05; text-transform: var(--bar-text-transform); }
/* vertical-rl accounts for label height in layout, fixing the reference's
 * legacy rotation clipping. Owner 2026-09-30 15:27: "all the text in that
 * sidebar should be rotated 180" - so the labels read bottom-to-top, the
 * reverse of the shell rail. The turn is paint-only; layout is unchanged. */
.targeting-rail-label { display: block; padding: .6rem 0; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; }
.targeting-rail-tab:hover, .targeting-rail-tab[aria-expanded="true"] { background: var(--bar-bg-solid); color: var(--bar-fg); }
.targeting-rail-tab:focus-visible { outline: var(--bar-control-outline, 2px solid var(--focus)); outline-offset: -3px; }
.targeting-drawer { position: fixed; z-index: 10; top: var(--targeting-drawer-top); left: calc(env(safe-area-inset-left, 0px) + var(--targeting-rail-width)); width: min(20rem, calc(82vw - var(--targeting-rail-width) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); max-height: calc(100dvh - var(--targeting-drawer-top) - env(safe-area-inset-bottom, 0px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--of-paper) 62%, transparent); color: var(--of-ink); font-size: 10px; line-height: 1.4; box-shadow: var(--shadow-drawer); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.targeting-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 6px; min-height: 28px; border-bottom: 1px solid var(--line); }
.targeting-drawer h1 { margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent); letter-spacing: var(--bar-letter-spacing); text-transform: uppercase; }
.targeting-panel-scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; padding: 6px calc(env(safe-area-inset-right, 0px) + 8px) 6px calc(env(safe-area-inset-left, 0px) + 8px); }
.field-row { display: grid; grid-template-columns: minmax(0, 90px) minmax(0, 1fr); align-items: center; gap: 6px; margin: 4px 0; min-height: 24px; }
.group-switch, .button-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.group-switch .btn { flex: 1 1 92px; }
.group-switch [aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.field { width: 100%; font-size: 10px; line-height: 1.2; min-height: 24px; padding: 3px 5px; }
.btn { touch-action: manipulation; }
.targeting-drawer .btn, .targeting-drawer .field { background: var(--panel); color: var(--ink); }
.targeting-drawer .btn { font-size: 9px; min-height: 24px; min-width: 24px; padding-inline: 5px; }
.targeting-drawer #panel-close { min-width: 24px; min-height: 24px; width: 24px; height: 24px; font-size: 14px; line-height: 1; }
.targeting-drawer .btn-primary { background: var(--accent); color: var(--on-accent); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border: 0; padding: 0; min-width: 0; }
.check-row { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.check-row input { width: 14px; height: 14px; flex: 0 0 14px; }
.scope-note, .availability-note { font-size: 10px; color: var(--of-ink-soft); }
.targeting-drawer section { border-top: 1px solid var(--line); padding-top: 12px; }
.targeting-drawer h2 { margin: 0 0 6px; font-size: 13px; }
.targeting-drawer .control-group { border-top: 1px solid var(--line); margin-top: 8px; padding: 4px 0; }
.targeting-drawer .control-group { border-top: 0; margin-top: 0; padding-top: 0; }
.targeting-drawer .control-group h2 { display: none; } /* Visible name/state live once in the drawer header. */
.control-group h2 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.control-group .btn { margin: 3px 6px 3px 0; max-width: 100%; }
.section-state { margin-left: auto; font: 10px var(--mono); color: var(--muted); }
#drawer-state { text-align: right; max-width: 48%; overflow-wrap: anywhere; }
.targeting-drawer footer { margin: 0; padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px) calc(env(safe-area-inset-left, 0px) + 8px); border-top: 1px solid var(--line); }
#view-toolbar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px); z-index: 8; color: var(--ink); padding: 0; max-width: calc(100% - var(--targeting-rail-width) - 24px); }
#view-toolbar select { width: auto; max-width: 100%; }
#view-toolbar { display: flex; align-items: center; gap: 0; border: 0; font-size: 11px; }
/* Top-layer spatial callouts, not another drawer. Click-through except Close. */
#element-info { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; background: transparent; color: var(--of-ink); pointer-events: none; overflow: hidden; z-index: 2147483647; }
#element-info::backdrop { background: transparent; pointer-events: none; }
#element-info-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); left: calc(env(safe-area-inset-left, 0px) + 6px); min-height: 28px; min-width: 28px; width: 28px; height: 28px; font-size: 16px; pointer-events: auto; background: var(--panel); }
.element-info-callout { position: absolute; width: max-content; max-width: 180px; padding: 2px 3px; background: color-mix(in srgb, var(--targeting-tag-ground) 65%, transparent); color: var(--targeting-tag-ink); border: 0; font: 8px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.element-info-callout code { font: 8px/1.2 var(--mono); }
.element-info-callout[data-current] { background: color-mix(in srgb, var(--targeting-tag-ground) 75%, transparent); }
/* Reserve the bottom readout/Info rather than hiding it under a long drawer. */
#scene-readout { z-index: 12; }
.targeting-drawer { max-height: calc(100dvh - var(--targeting-drawer-top) - env(safe-area-inset-bottom, 0px) - var(--targeting-readout-reserve)); }
#info-options { z-index: 13; width: min(14rem, calc(82vw - var(--targeting-rail-width))); }
.info-levels { display: flex; gap: 8px; }
.info-note { font-size: 9px; margin: 6px 0 0; }
.targeting-drawer .btn-icon { width: 24px; height: 24px; }
@media (any-pointer: coarse) { :root { --targeting-readout-reserve: 96px; } #info-options :is(.btn, select, input) { min-height: 44px; min-width: 44px; } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@supports not (backdrop-filter: blur(1px)) { .targeting-drawer { background: color-mix(in srgb, var(--of-paper) 94%, transparent); } }
/* The shell steps --tab-width to the 44px touch target under (pointer: coarse)
 * in cic/topology/styles.css, a sheet this guest does not load. That target is
 * --control-min-h in shell-tokens.css (same query), so follow it rather than
 * a literal: the rail stays the CIC sidebar's width on a phone too. */
@media (pointer: coarse) { :root { --targeting-rail-width: var(--control-min-h); } .targeting-rail-tab { font-size: .68rem; } .targeting-rail-info { width: 100%; } }
@media (any-pointer: coarse) { #targeting-panel :is(.btn, select, input), #view-choice, #element-info-close { min-height: 44px; min-width: 44px; } .field { font-size: max(16px, 1rem); } .check-row, .button-row { gap: 8px; } .check-row input { width: 44px; height: 44px; flex-basis: 44px; } #targeting-panel .btn-primary { min-height: 48px; } }
@media (max-width: 760px) {
  /* No rail-width step by viewport width: the CIC sidebar does not widen in a
   * narrow window, and this one doubling it was the owner's "half as wide". */
  #director-stage.is-inset { width: min(240px, calc(100% - 24px)); }
  /* Width alone does not imply touch: a narrow desktop/zoomed window still
   * uses compact controls. Touch ergonomics are owned by any-pointer:coarse. */
}
@media (max-height: 44rem) { .targeting-rail-tab { min-height: 4.5rem; } }
@media (prefers-reduced-motion: reduce) { .targeting-drawer { transition: opacity 120ms linear; } }
@media (prefers-reduced-transparency: reduce) { .targeting-drawer { background: var(--surface-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; } }