/* console-shell.css — DTCCC shell layout + the one generic panel-card
   anatomy every panel (except the 3 carve-outs) renders through.
   Consumes design-tokens.css exclusively. */

#dc-shell {
  position: fixed; inset: 0;
  min-width: 1280px; min-height: 800px;
  display: flex; flex-direction: column;
  background: var(--dc-bg);
  font-family: var(--dc-font-ui);
  color: var(--dc-body);
}

/* Header */
#dc-header {
  height: var(--dc-header-h); flex: none;
  display: flex; align-items: center; gap: var(--dc-sp-16);
  padding: 0 20px;
  background: var(--dc-panel);
  border-bottom: 1px solid var(--dc-border);
}
.dc-logo { display: flex; align-items: center; gap: 11px; }
.dc-logo-mark {
  width: 26px; height: 26px; border: 1.5px solid var(--dc-cyan); border-radius: var(--dc-r-control);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--dc-font-mono); font-size: 12.5px; font-weight: 700; color: var(--dc-cyan);
}
.dc-wordmark { font-family: var(--dc-font-head); font-weight: 600; font-size: 19px; letter-spacing: .16em; color: var(--dc-text); }
.dc-subword { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--dc-muted); }
.dc-ais-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dc-muted); animation: dcPulse 1.8s infinite; }
/* live/stale/replay - VesselFeed (src/data/VesselFeed.js) applies exactly one of
   these via console-shell.js's setAisStatus(); no class = still pending on first load. */
.dc-ais-dot.live { background: var(--dc-cyan); }
.dc-ais-dot.stale { background: var(--dc-warning); }
.dc-ais-dot.replay { background: var(--dc-muted); animation: none; opacity: .6; }
/* KPI feed status (src/data/KpiFeed.js) — same shape/size as the AIS dot so the
   two read as one consistent pair in the header; 'live' is healthy green,
   'unavailable' is amber (scripted/simulated fallback), 'pending' is the
   muted initial-state colour while the first /api/kpi-values fetch is in flight. */
.dc-kpi-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dc-muted); animation: dcPulse 1.8s infinite; }
.dc-kpi-dot.live { background: var(--dc-healthy); }
.dc-kpi-dot.unavailable { background: var(--dc-warning); }
.dc-kpi-dot.pending { background: var(--dc-muted); opacity: .55; }
@keyframes dcPulse { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* Header readouts driven by a what-if scenario rather than the live feed or the
   real clock — set by header-weather-flyout.js's setSimulated() while a
   storm/tidal directive is fast-forwarding time and weather
   (src/sim/time-weather-forward.js). Same --dc-warning token the AIS/KPI dots
   use for "degraded or scripted source", so the console has ONE amber meaning.
   Colour plus a hairline rule, deliberately not a glow: zero-offset chromatic
   halos are banned by this project's design floor. */
.dc-sim-value { color: var(--dc-warning); border-bottom: 1px solid var(--dc-warning); }
.dc-sim-active { border-color: var(--dc-warning); }
.dc-header-readout { font-family: var(--dc-font-mono); font-size: 13px; color: var(--dc-body); }
.dc-header-spacer { flex: 1; }
.dc-risk-line { font-family: var(--dc-font-mono); font-size: 12px; letter-spacing: .12em; }
.dc-copilot-toggle {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: var(--dc-r-button);
  font-family: var(--dc-font-mono); font-size: 12px; letter-spacing: .12em; cursor: pointer; transition: all .18s;
  border: 1px solid var(--dc-control-border); background: var(--dc-panel-secondary); color: var(--dc-body);
}
.dc-copilot-toggle.active, .dc-copilot-toggle:hover { border-color: var(--dc-cyan); color: var(--dc-cyan); background: var(--dc-cyan-tint-3); }

/* Main row */
#dc-main { flex: 1; display: flex; min-height: 0; position: relative; overflow: hidden; }

/* Icon rail */
#dc-rail {
  width: var(--dc-rail-w); flex: none; z-index: 10;
  display: flex; flex-direction: column; align-items: center; padding: var(--dc-sp-14) 0; gap: var(--dc-sp-10);
  background: var(--dc-panel); border-right: 1px solid var(--dc-border);
}
.dc-rail-btn {
  width: 64px; height: 56px; border-radius: 6px; cursor: pointer; transition: all .18s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--dc-font-mono); border: 1px solid var(--dc-control-border); background: var(--dc-panel-secondary); color: var(--dc-body);
}
.dc-rail-btn.selected { border-color: var(--dc-cyan); background: var(--dc-cyan-tint-3); color: var(--dc-cyan); }
.dc-rail-code { font-size: 15.5px; font-weight: 700; line-height: 1; }
.dc-rail-label { font-size: 11px; letter-spacing: .06em; }
.dc-rail-divider { width: 32px; height: 1px; background: var(--dc-border); margin: 4px 0; }
.dc-rail-hide {
  width: 64px; height: 36px; border-radius: 6px; cursor: pointer; transition: all .18s;
  font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: .08em;
  border: 1px solid var(--dc-control-border); background: var(--dc-panel-secondary); color: var(--dc-body);
}
.dc-rail-hide.active { border-color: var(--dc-cyan); background: var(--dc-cyan-tint-3); color: var(--dc-cyan); }
.dc-rail-spacer { flex: 1; }
.dc-rail-count { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-dim); writing-mode: vertical-rl; letter-spacing: .16em; }

/* UC menu — position: absolute so it slides OVER the scene pane via
   `transform` instead of being a flex sibling that steals width from it
   (that used to shrink #dc-scene-pane's box on every open/close, which
   fired scene.js's ResizeObserver and resized the WebGL viewport mid
   -transition). Width is always set from state by console-shell.js's
   render(); only the `.open` class's transform toggles visibility. */
#dc-menu {
  position: absolute; left: var(--dc-rail-w); top: 0; bottom: 0;
  width: var(--dc-menu-w); overflow: hidden; z-index: 8;
  background: var(--dc-panel); border-right: 1px solid var(--dc-border);
  transition: var(--dc-t-pane);
  transform: translateX(-100%);
}
#dc-menu.open { transform: translateX(0); }
.dc-menu-inner { width: 100%; min-width: 210px; height: 100%; display: flex; flex-direction: column; }
.dc-menu-title { font-family: var(--dc-font-head); font-size: 19px; font-weight: 600; letter-spacing: .1em; color: var(--dc-text); padding: 16px 18px 0; }
.dc-menu-sub { font-family: var(--dc-font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--dc-muted); padding: 4px 18px 12px; }
/* ALL / AI-ML / REAL / SIM — filters the panel LIST below, not the drawer
   (already-open panels stay open through a filter change). 49+ panels per
   UC group is too many to scan unfiltered. */
.dc-menu-filter { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 16px 12px; border-bottom: 1px solid var(--dc-divider); }
.dc-menu-filter-btn {
  font-family: var(--dc-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 9px; border-radius: var(--dc-r-chip); cursor: pointer; transition: all .16s;
  border: 1px solid var(--dc-control-border); background: transparent; color: var(--dc-muted);
}
.dc-menu-filter-btn:hover { border-color: var(--dc-cyan-tint-7); color: var(--dc-body); }
.dc-menu-filter-btn.active { border-color: var(--dc-cyan); background: var(--dc-cyan-tint-3); color: var(--dc-cyan); }
.dc-menu-empty { padding: 22px 14px; font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-muted); text-align: center; font-style: italic; }
.dc-menu-list { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.dc-menu-row {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; border-radius: var(--dc-r-button);
  cursor: pointer; transition: all .16s; border: 1px solid transparent; background: transparent; color: var(--dc-body);
}
.dc-menu-row.open { border-color: var(--dc-cyan-tint-7); background: var(--dc-cyan-tint-1); color: var(--dc-text); }
.dc-menu-square { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--dc-control-border); }
.dc-menu-row.open .dc-menu-square { background: var(--dc-cyan); }
.dc-menu-label { font-size: 15px; font-weight: 500; line-height: 1.35; }

/* Panel drawer — absolute + transform slide, same rationale as #dc-menu.
   Offset assumes the menu's width is always reserved (Task 2's fix
   guarantees the drawer can only have open cards when a group — and
   therefore the menu — is selected; menu closed implies drawer empty).
   `left` below is a fallback only (static --dc-menu-w token, for first
   paint before JS runs / if JS is somehow absent) — console-shell.js's
   render() overrides it every render with the menu's *live* state.menuW,
   since the menu's resize grip can move that width away from the token. */
#dc-drawer {
  position: absolute; left: calc(var(--dc-rail-w) + var(--dc-menu-w)); top: 0; bottom: 0;
  width: var(--dc-drawer-w); overflow: hidden; z-index: 7;
  background: var(--dc-bg); border-right: 1px solid var(--dc-border);
  transition: var(--dc-t-pane);
  /* -100% (its own width) only clears the drawer back to its own `left`
     edge (rail-w + menu-w) — fully off-window when #dc-menu is still open
     and covers that same span, but a visible sliver otherwise (e.g.
     console-shell.js's closeMenu(), Task 7 — closing menu+drawer together
     to give a #dc-scene-pane overlay full width). The extra offset clears
     it past the rail regardless of the menu's own open/closed state.
     --live-menu-w is set inline by console-shell.js's render() from the
     *live* state.menuW (same staleness problem/fix as the `left` override
     above — the menu's resize grip can move that width anywhere in its
     210-420px clamped range, and the static --dc-menu-w token never
     reflects that). The var(--dc-menu-w) fallback only matters for first
     paint before JS runs / if JS is somehow absent. */
  transform: translateX(calc(-100% - var(--live-menu-w, var(--dc-menu-w))));
}
#dc-drawer.open { transform: translateX(0); }
.dc-drawer-inner { width: 100%; min-width: 280px; height: 100%; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.dc-panel-card { border: 1px solid var(--dc-border); border-radius: var(--dc-r-card); background: var(--dc-panel); overflow: hidden; position: relative; flex: none; display: flex; flex-direction: column; min-height: 88px; max-height: 1200px; }
.dc-card-header { flex: none; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--dc-divider); }
.dc-uc-chip { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: .1em; padding: 3px 6px; border-radius: var(--dc-r-chip); background: var(--dc-cyan-tint-2); color: var(--dc-cyan); }
.dc-card-titles { display: flex; flex-direction: column; line-height: 1.25; }
.dc-card-title { font-size: 16.5px; font-weight: 600; color: var(--dc-text); }
.dc-card-sub { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--dc-muted); }
.dc-card-source { font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: .06em; color: var(--dc-dim-2); margin-left: 6px; }
.dc-card-close { margin-left: auto; width: 24px; height: 24px; border-radius: var(--dc-r-control); border: 1px solid var(--dc-control-border); background: transparent; color: var(--dc-body); cursor: pointer; font-size: 13.5px; line-height: 1; transition: all .16s; }
.dc-card-close:hover { border-color: var(--dc-critical); color: var(--dc-critical); }
.dc-card-body { flex: 1; min-height: 0; overflow-y: auto; }

.dc-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dc-divider); }
.dc-metric { background: var(--dc-panel); display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; }
.dc-metric-label { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--dc-muted); }
.dc-metric-value-row { display: flex; align-items: baseline; gap: 5px; }
.dc-metric-value { font-family: var(--dc-font-mono); font-weight: 700; line-height: 1; font-size: 23px; }
.dc-metric-unit { font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-muted); }

.dc-row-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--dc-divider); }
.dc-row { display: flex; flex-direction: column; gap: 6px; }
.dc-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dc-row-label { color: var(--dc-body); line-height: 1.4; font-size: 13px; }
.dc-row-tag { font-family: var(--dc-font-mono); font-size: 9px; letter-spacing: .06em; color: var(--dc-dim-2); border: 1px solid var(--dc-control-border); border-radius: var(--dc-r-chip); padding: 1px 4px; margin-left: 6px; vertical-align: middle; }
/* Same colours as the vessel-inspector's inline aiChip/mlChip (index.html) —
   kept as real classes here so every other panel can tag a model-derived
   value the same way instead of repeating the inline style block. */
.dc-ai-chip, .dc-ml-chip { font-family: var(--dc-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; border-radius: var(--dc-r-chip); padding: 1px 5px; margin-left: 6px; vertical-align: middle; }
.dc-ai-chip { background: rgba(0,100,255,0.28); color: #44aaff; border: 1px solid rgba(0,150,255,0.55); }
.dc-ml-chip { background: rgba(140,60,220,0.28); color: #cc88ff; border: 1px solid rgba(180,80,255,0.55); }
.dc-row-value { font-family: var(--dc-font-mono); font-size: 13.5px; flex: none; }
.dc-row-track { height: 3px; background: var(--dc-divider); border-radius: 2px; overflow: hidden; }
.dc-row-fill { height: 100%; border-radius: 2px; transition: var(--dc-t-bar); }

.dc-note { padding: 11px 14px; border-top: 1px solid var(--dc-divider); background: var(--dc-panel-secondary); }
.dc-note p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dc-body); text-wrap: pretty; }

.dc-resize-grip { flex: none; height: 8px; cursor: row-resize; display: flex; align-items: center; justify-content: center; background: var(--dc-grip-bg); border-top: 1px solid var(--dc-divider); }
.dc-resize-grip:hover { background: var(--dc-cyan-tint-5); }
.dc-resize-grip::after { content: ''; width: 30px; height: 2px; border-radius: 1px; background: var(--dc-control-border); }

.dc-pane-grip { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; background: transparent; }
.dc-pane-grip:hover { background: var(--dc-cyan-tint-6); }
#dc-menu .dc-pane-grip, #dc-drawer .dc-pane-grip { right: -3px; }
#dc-copilot .dc-pane-grip { left: -3px; }

/* Scene pane — the only pane still a real flex item. #dc-menu/#dc-drawer/
   #dc-copilot are position:absolute now, so they no longer contribute
   width to this flex row: #dc-scene-pane always fills the space right of
   the rail regardless of which panes are open, and never resizes when
   they slide in/out over it. z-index just needs to clear the absolute
   panes; it does NOT need to out-rank #dc-scene-pane's own overlay
   children (#whatif-extra-panel/berth-gantt/notifications-feed), which
   stack among themselves inside this element's own stacking context.
   #resolution-panel and #cascade-panel are NOT in that list — both were
   moved out to be true #dc-copilot siblings at the #dc-main level
   (index.html's reparenting code) specifically because this element's own
   stacking context can never let a child out-rank a sibling of this
   element (#dc-copilot, z-index:8) no matter how high that child's
   z-index is set. */
#dc-scene-pane { flex: 1; min-width: 620px; position: relative; z-index: 1; background: var(--dc-bg); overflow: hidden; }
#dc-scene-pane > #canvas-container { position: absolute; inset: 0; width: 100%; height: 100%; }

/* AI Co-pilot — absolute + transform slide, right-anchored. */
#dc-copilot {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: var(--dc-copilot-w); overflow: hidden; z-index: 8;
  background: var(--dc-panel); border-left: 1px solid var(--dc-border);
  transition: var(--dc-t-pane);
  transform: translateX(100%);
}
#dc-copilot.open { transform: translateX(0); }
.dc-copilot-inner { width: 100%; min-width: 300px; height: 100%; display: flex; flex-direction: column; }

/* Accessibility: reduce-motion (Task 17 Step 6, dc-settings.js's new
   Accessibility tab). Zero-duration rather than `display:none`-style
   `transition:none`/`animation:none`, so transitionend/animationend
   listeners elsewhere in the app still fire. */
.dc-reduce-motion, .dc-reduce-motion * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }