/* Pano-specific layouts using WebUiKit navigation, controls and surfaces. */
:root {
  color-scheme: light dark;
  --surface: var(--ui-surface);
  --surface-soft: var(--ui-soft);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --accent: var(--ui-accent);
  --accent-soft: var(--ui-nav-active);
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 var(--ui-font); color: var(--ink); }
body.paper-bg {
  --mesh-light: #fff;
  --mesh-base: #fff;
  --mesh-tint: color-mix(in srgb, var(--ui-accent-500) 4%, #fff);
  background: var(--mesh-base);
}
/* Broad, overlapping fades create a soft mesh without a large blur filter. */
body.paper-bg::before {
  content: "";
  position: fixed;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  animation: pano-mesh-drift 60s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse at 56% 32%, var(--mesh-light) 0%, transparent 58%),
    radial-gradient(ellipse at 4% 12%, color-mix(in srgb, var(--ui-accent-500) 5%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse at 96% 76%, color-mix(in srgb, var(--ui-accent-600) 4%, transparent) 0%, transparent 62%),
    radial-gradient(ellipse at 28% 96%, var(--mesh-tint) 0%, transparent 65%),
    var(--mesh-base);
}
@keyframes pano-mesh-drift {
  from { transform: translate3d(-1.5%, -1%, 0) rotate(-.5deg); }
  to { transform: translate3d(1.5%, 1%, 0) rotate(.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  body.paper-bg::before { animation: none; }
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Lower semantic colors one step; deepen fills already at the darkest palette shade. */
    --ui-positive: #22c55e; --ui-positive-soft: color-mix(in srgb, #052e16 80%, #000);
    --ui-warning: #f59e0b; --ui-warning-soft: color-mix(in srgb, #451a03 80%, #000);
    --ui-danger: #ef4444; --ui-danger-soft: color-mix(in srgb, #450a0a 80%, #000);
    --ui-neutral: #9ca3af; --ui-neutral-soft: #1f2937;
  }
  body.paper-bg { --mesh-light: #141820; --mesh-base: #0b0e14; --mesh-tint: #6d4b9c; }
  body.paper-bg::before {
    background:
      radial-gradient(ellipse at 56% 32%, var(--mesh-light) 0%, transparent 58%),
      radial-gradient(ellipse at 4% 12%, color-mix(in srgb, var(--mesh-tint) 20%, transparent) 0%, transparent 30%),
      radial-gradient(ellipse at 96% 76%, color-mix(in srgb, var(--mesh-tint) 18%, transparent) 0%, transparent 32%),
      radial-gradient(ellipse at 28% 96%, color-mix(in srgb, var(--mesh-tint) 22%, transparent) 0%, transparent 30%),
      var(--mesh-base);
  }
}
button, input, select { font: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
/* Navigation focuses the heading for reading order, not as an interactive control. */
h1#page-title[tabindex="-1"]:focus { outline: none; }
label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
input { min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 14px; font-weight: 600; }
p + p { margin-top: 12px; }
small, .small { font-size: 12px; }
ul { padding-left: 20px; }
.muted { color: var(--muted); }
.ui-main { width: 100%; max-width: none; margin: 0 auto; padding-inline: 0; }
.pano-page-outgoing { position: fixed; inset: 0 0 var(--pano-metrics-height); overflow: hidden; pointer-events: none; z-index: 3; }
.pano-page-preview { position: absolute; inset: 0; }
.pano-title-carousel { position: absolute; z-index: 11; top: 14px; left: 44px; right: 72px; height: 28px; overflow: hidden; color: var(--ui-accent); font: 600 18px/28px var(--ui-font); letter-spacing: -.025em; }
/* Keep resting glyphs beyond the 18px fade; the viewport starts nearer the logo. */
.pano-title-carousel h1, .pano-title-frame { box-sizing: border-box; padding-left: 20px; margin: 0; font: inherit; letter-spacing: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-page-direction] .pano-title-carousel {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.pano-title-track { position: absolute; inset: 0; pointer-events: none; }
.pano-title-frame { position: absolute; top: 0; width: 100%; }
.pano-data-freshness { display: none; }
.app-shell > .ui-mobile-header .ui-mobile-brand > span { display: none; }
html[data-page-direction] { overflow-x: clip; }
.app-shell > .ui-sidebar nav { position: relative; }
.pano-nav-selection { position: absolute; border-radius: 12px; background: var(--ui-accent-600); box-shadow: 0 1px 2px #0001; pointer-events: none; }
.app-shell > .ui-sidebar nav[data-selection-ready] .nav-item { z-index: 1; }
.app-shell > .ui-sidebar nav[data-selection-ready] .nav-item.is-active { background: transparent; color: #fff; }
.app-shell .ui-mobile-link.is-active { background: var(--ui-accent-600); color: #fff; box-shadow: 0 1px 2px #0001; }
/* Keep shared navigation behavior while presenting Pano's desktop shell horizontally. */
@media (min-width: 1024px) {
  html { scroll-padding-top: 88px; }
  .app-shell.ui-shell { padding: 80px 8px 8px; }
  .app-shell > .ui-sidebar { inset: 8px 8px auto; width: auto; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 8px 16px; }
  .app-shell > .ui-sidebar nav { display: flex; gap: 4px; justify-self: center; }
  .app-shell > .ui-sidebar .nav-item { height: 44px; }
  .app-shell > .ui-sidebar .ui-brand { margin: 0; }
  .app-shell > .ui-sidebar .ui-nav-footer { margin: 0 0 0 auto; padding: 0; }
  .pano-title-carousel { position: fixed; top: 26px; left: 68px; right: calc(50% + 238px); max-width: 380px; font-size: clamp(16px, 1.5vw, 20px); }
  .pano-data-freshness { position: fixed; z-index: 11; top: 40px; right: 80px; transform: translateY(-50%); display: block; margin: 0; max-width: 180px; color: var(--ui-muted); font: 500 10px/1.35 var(--ui-font); text-align: right; white-space: nowrap; }
  .app-shell > .ui-mobile-header, .app-shell .ui-fallback-navigation { display: none; }
  .app-shell > .ui-sidebar .nav-tooltip { left: 50%; top: calc(100% + 8px); transform: translateX(-50%) scale(.96); }
  .app-shell > .ui-sidebar .nav-tooltip::before { left: 0; right: 0; top: -10px; bottom: auto; width: auto; height: 10px; }
  .app-shell > .ui-sidebar .nav-item:not([data-label-dismissed]):is(:hover,:focus-visible) .nav-tooltip { transform: translateX(-50%) scale(1); }
  .app-shell > .ui-sidebar .ui-brand .nav-tooltip { left: 0; }
  .app-shell > .ui-sidebar .ui-nav-footer .nav-tooltip { left: auto; right: 0; }
  .app-shell > .ui-sidebar :is(.ui-brand, .ui-nav-footer .nav-item) .nav-tooltip,
  .app-shell > .ui-sidebar :is(.ui-brand, .ui-nav-footer .nav-item):not([data-label-dismissed]):is(:hover,:focus-visible) .nav-tooltip { transform: none; }
}
.page-heading { margin-bottom: 24px; }
.nav-label { font-size: 10px; line-height: 1.5; letter-spacing: .12em; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.page-workspace { display: grid; gap: 20px; align-items: start; }
.page-content { min-width: 0; }
.evidence-column { min-width: 0; }
/* One shared control surface, with a second row for Fleet planning. */
.page-controls { display:grid; gap:12px; margin-bottom:24px; }
.control-bar, .control-fields { display:flex; flex-wrap:wrap; align-items:end; gap:12px 16px; min-width:0; }
.control-bar { --control-input-height:36px; padding:12px 16px; }
.control-fields { margin:0; }
.control-bar label { display:flex; align-items:center; flex:0 1 240px; min-width:200px; gap:0; border:1px solid var(--ui-input-border); border-radius:12px; background:var(--ui-input-surface); overflow:hidden; font-size:11px; }
.control-bar .control-label { display:flex; align-items:center; align-self:stretch; flex:none; padding:6px 10px; border-right:1px solid var(--line); white-space:nowrap; }
.control-bar label:focus-within { border-color:var(--ui-input-focus); }
.control-bar label:has(:focus-visible) { outline:2px solid var(--ui-focus); outline-offset:2px; }
.control-bar label:has(:disabled) { opacity:.6; }
.control-bar .form-input { flex:1 1 0; width:100%; min-width:0; min-height:var(--control-input-height); border:0; border-radius:0; background-color:transparent; padding:6px 10px; font-size:13px; }
.control-bar .form-select { padding-right:32px; }
.control-bar .form-input:focus-visible { outline:none; }
.control-bar .ui-button { min-height:36px; padding:6px 12px; font-size:13px; }
.control-bar .control-field-wide { flex-basis:370px; }
.control-bar .control-help { flex-basis:100%; margin:0; font-size:11px; }
.briefing-controls { align-items:center; justify-content:space-between; }
.briefing-controls > .control-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); flex:0 1 496px; }
.briefing-controls > .control-fields > label { min-width:0; }
.control-bar .filter-row { margin:0; gap:8px; }
.control-bar .assessment-pill { padding:8px 12px; }
.control-bar.planning-controls label { flex:1 1 280px; min-width:0; }
.control-bar.diagnostic-search label { flex:1 1 260px; }
.control-bar .store-view-tabs { height:calc(var(--control-input-height) + 2px); padding:3px; margin:0; align-self:center; }
.control-bar .store-view-tabs .ui-button { min-height:0; padding-block:0; }
.store-controls .control-fields { flex:1 1 400px; }
.store-controls .control-fields label { flex:1 1 240px; }
.store-controls .control-fields label:has(input[type="search"]) { flex-basis:340px; }
.store-controls .control-fields a { align-self:end; padding-block:8px; font-size:12px; }
@media (max-width:600px) {
  .control-bar { --control-input-height:40px; padding:12px; gap:12px; }
  .control-bar label, .control-bar .control-field-wide, .control-bar.planning-controls label { flex:1 1 100%; min-width:0; }
  .control-bar .control-label { white-space:normal; max-width:65%; }
  .briefing-controls > .control-fields { grid-template-columns:minmax(0, 1fr); }
  .control-fields { width:100%; }
  .control-bar .form-input, .control-bar .ui-button { min-height:40px; }
  .control-bar.diagnostic-search label { flex-basis:100%; }
  .store-controls .control-fields { flex-basis:100%; }
}
.totals h2 { font-size: 13px; }
.totals header { padding: 12px; border-bottom: 1px solid var(--line); }
.totals header p { font-size: 12px; margin-top: 4px; }
dl { margin: 0; }
.totals dl > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.totals dt { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.totals .info { flex: none; margin-left: 0; }
.totals dd { font-size: 20px; font-weight: 600; margin: 0; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.totals dd small { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); text-align: right; }
.totals footer { padding: 12px; font-size: 11px; line-height: 1.7; }
/* Keep metrics outside the animated main surface, in a stable viewport footer. */
:root { --pano-metrics-height: calc(36px + env(safe-area-inset-bottom, 0px)); }
.ui-main { padding-bottom: calc(var(--pano-metrics-height) + 24px); }
html { scroll-padding-bottom: calc(var(--pano-metrics-height) + 16px); }
.page-summary { position:fixed; inset:auto 0 0; z-index:5; box-sizing:border-box; height:var(--pano-metrics-height); padding:2px 24px calc(2px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); font:400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; display:flex; align-items:center; overflow-x:auto; overflow-y:hidden; }
.page-summary::before { content:""; position:fixed; inset:auto 0 0; height:var(--pano-metrics-height); z-index:-1; pointer-events:none; background:color-mix(in srgb, var(--mesh-base) 88%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.page-summary:focus-visible { outline:2px solid var(--ui-focus); outline-offset:-2px; }
.page-summary .totals { display:flex; flex:none; min-width:100%; align-items:baseline; }
.page-summary .totals dl { display:flex; flex-wrap:nowrap; align-items:baseline; gap:28px; }
.page-summary .totals dl > div { flex:none; justify-content:start; align-items:baseline; gap:8px; padding:0; border:0; }
.page-summary .totals dt, .page-summary .totals dd, .page-summary .totals dd small { font:inherit; letter-spacing:0; white-space:nowrap; }
.page-summary .totals dd { font-weight:600; text-align:left; }
.page-summary .totals dd small { display:inline; color:var(--muted); font-weight:400; }
.page-summary .notice { padding:0; font:inherit; white-space:nowrap; }
@media (max-width:1199px) { .page-summary { padding-inline:16px; } .page-summary .totals dl { gap:20px; } }
[data-assessment="attention"] { --tone: var(--ui-warning); --tint: var(--ui-warning-soft); --selected: var(--ui-warning-solid); }
[data-assessment="improvement"] { --tone: var(--ui-positive); --tint: var(--ui-positive-soft); --selected: var(--ui-positive-solid); }
[data-assessment="information"] { --tone: var(--ui-neutral); --tint: var(--ui-neutral-soft); --selected: var(--ui-neutral-solid); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; }
.filter-row form { margin: 0; }
.assessment-pill { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; background: var(--tint); color: var(--tone); padding: 8px 12px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; white-space: nowrap; transition: background-color .15s, color .15s; }
.assessment-pill:hover { border-color: var(--tone); }
.assessment-pill[aria-pressed="true"] { background: var(--selected); color: #fff; border-color: var(--selected); }
.assessment-badge { display: inline-flex; color: var(--tone); background: var(--tint); font-size: 11px; font-weight: 600; border-radius: 6px; padding: 4px 8px; }
.finding-list { display: grid; gap: 16px; }
.finding-card { border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent); padding: 24px; }
.finding-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; font-size: 12px; }
.finding-card h2 { margin-bottom: 4px; }
.finding-highlight { --secondary-tone: color-mix(in srgb, var(--tone) 65%, var(--muted)); background: var(--tint); border-radius: 12px; padding: 16px; margin: 20px 0 16px; color: var(--tone); }
.finding-highlight h3 { font-size: 12px; margin-bottom: 12px; font-weight: 500; }
.comparison { display: flex; gap: 24px; align-items: end; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.comparison > div { display: flex; flex-direction: column; }
.comparison strong { font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: -.025em; }
.comparison span { font-size: 12px; color: var(--secondary-tone, var(--muted)); }
.comparison .previous { color: var(--secondary-tone, var(--muted)); }
.comparison .previous strong { font-size: 24px; }
.comparison .delta { margin-left: auto; text-align: right; }
.comparison .delta strong { font-size: 24px; }
.finding-card > p { font-size: 13px; line-height: 1.7; }
details { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
summary { color: var(--accent); font-weight: 500; font-size: 12px; }
details p, details ul { font-size: 12px; margin-top: 12px; }
details h3 { margin-top: 16px; }
.finding-comparison { margin-top: 16px; overflow-x: auto; }
.finding-comparison table { width: 100%; table-layout: fixed; margin: 0; border-collapse: collapse; font-size: 12px; }
.finding-comparison th, .finding-comparison td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.finding-comparison th { text-align: left; font-weight: 500; }
.finding-comparison thead th { background: var(--surface-soft); font-weight: 600; width: 30%; }
.finding-comparison thead th:first-child { width: 40%; }
.finding-comparison td { font-variant-numeric: tabular-nums; font-size: 16px; }
.finding-comparison td:last-child { font-weight: 600; }
.finding-comparison .comparison-window, .finding-comparison small { display: block; font-weight: 400; font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 4px; }
.finding-comparison .comparison-key-row { color: var(--tone); background: var(--tint); }
.finding-comparison .comparison-key-row td { font-weight: 600; }
.comparison-supporting dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.comparison-supporting dt { color: var(--muted); }
.comparison-supporting dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.comparison-supporting small { display: block; color: var(--muted); font-size: 11px; }
.evidence-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; font-size: 12px; }
.source-note { color: var(--muted); margin: 24px 0; }
.source-note summary { color: var(--muted); font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metric-grid dt { font-size: 12px; color: var(--muted); }
.metric-grid dd { margin: 4px 0 0; font-size: 28px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.metric-grid dd small { font-size: 12px; display: block; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.hero-metrics { padding: 24px; margin-bottom: 16px; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.panel { padding: 24px; margin-bottom: 24px; }
.panel h2 + p { margin-top: 8px; }
.panel .metric-grid { margin-block: 24px; }
.destination-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.destination-row div, .destination-row > strong { display: flex; flex-direction: column; }
.destination-row small, .destination-row span { color: var(--muted); font-size: 11px; font-weight: 400; }
.destination-row > strong { text-align: right; font-size: 20px; font-variant-numeric: tabular-nums; }
.destination-row + details { margin-top: 0; border-top: 0; }
.panel form { margin-top: 24px; }
.notice { padding: 24px; margin-bottom: 24px; }
.notice h2 { margin-bottom: 8px; }
.empty-state { padding: 40px 24px; text-align: center; }
.empty-state p { margin-top: 12px; color: var(--muted); }
.empty-state li { text-align: left; }
.table-scroll { max-width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; margin-top: 20px; }
th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
thead { color: var(--muted); }
th { font-weight: 500; }
caption { text-align: left; color: var(--muted); padding-bottom: 12px; }
.gantry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
.gantry-layout > section { min-width: 0; }
.gantry-visual { overflow: hidden; }
.scene { position: relative; }
.scene svg { width: 100%; display: block; }
.scene-controls { display: flex; gap: 16px; padding: 16px; align-items: center; justify-content: center; border-top: 1px solid var(--line); flex-wrap: wrap; }
.scene-controls [role=group] { display: flex; gap: 4px; }
.scene-controls .ui-button { font-size: 12px; padding: 7px 12px; }
.scene-controls button[aria-pressed=true] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.passage-details { padding: 24px; margin-top: 24px; }
.passage-details > p { margin-top: 16px; font-size: 12px; }
.pass-list h2 { font-size: 14px; margin: 0 0 16px; }
.pass-link { padding: 16px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); margin-bottom: 12px; font-size: 12px; transition: border-color .15s; }
.pass-link strong { font-size: 13px; }
.pass-link span, .pass-link small { color: var(--muted); margin-top: 4px; font-size: 11px; }
.pass-link:hover { border-color: var(--ui-input-border); }
.pass-link[aria-current] { border-color: var(--accent); background: var(--accent-soft); }
.scene-label { fill: var(--scene-ink); font-size: 12px; }
.scene-eyebrow { fill: var(--scene-muted); font-size: 9px; letter-spacing: .08em; }
/* Eighteen discrete slots: unknown baskets remain neutral and translucent. */
.stack-basket {
 --basket-top:var(--scene-hardware-top); --basket-front:var(--scene-hardware-front);
 --basket-side:var(--scene-hardware-side); --basket-slot:var(--scene-hardware-side); --basket-edge:var(--scene-box-edge);
 opacity:.26;
}
.stack-basket .basket-tag { opacity:0; }
.stack-basket[data-read="true"] {
 --basket-top:var(--scene-basket-rfid-top); --basket-front:var(--scene-basket-rfid-front);
 --basket-side:var(--scene-basket-rfid-side); --basket-slot:var(--scene-basket-rfid-slot);
 opacity:1;
}
.stack-basket[data-read="true"] .basket-tag { opacity:1; }
[data-visible-reads="0"] .stack-pallet {
 --scene-pallet-top:var(--scene-hardware-top); --scene-pallet-front:var(--scene-hardware-front); --scene-pallet-side:var(--scene-hardware-side);
 opacity:.3;
}
.gantry-visual:not([data-step="2"]) .rfid-layer { display:none; }
.gantry-visual[data-step="2"] .pre-rfid-layer { display:none; }
.gantry-visual:not([data-sensing="true"]) .camera-signal { display:none; }
.infrared-beam { opacity:.65; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 10px; }
.connection-error { position: fixed; bottom: calc(var(--pano-metrics-height) + 20px); left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--accent); padding: 16px 24px; border-radius: 12px; z-index: 30; }
.login-page { display: grid; min-height: 100dvh; place-items: center; padding: 24px; }
/* Keep the sign-in surface above the fixed decorative mesh. */
.login-card { position: relative; z-index: 1; max-width: 430px; padding: 32px; }
.login-card form { display: grid; gap: 12px; margin-top: 24px; }
.login-card h1 { margin-bottom: 12px; }
@media (prefers-color-scheme: dark) {
  .finding-card { border-color: color-mix(in srgb, var(--tone) 18%, transparent); }
}
@media (min-width: 1600px) { .finding-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1150px) {
  .gantry-layout { grid-template-columns: 1fr; }
  .pass-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pass-list h2 { grid-column: 1/-1; }
}
@media (max-width: 800px) {
  .two-columns { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px) {
  .finding-card, .panel, .passage-details, .hero-metrics { padding: 16px; }
  .finding-meta { gap: 8px; }
  .metric-grid { gap: 12px; }
  .metric-grid dd { font-size: 24px; }
  .comparison { gap: 16px; }
  .comparison strong { font-size: 28px; }
  .comparison .previous strong, .comparison .delta strong { font-size: 22px; }
  .scope-controls { gap: 8px; }
  .scope-controls select { min-width: 130px; }
  .scene-label { display: none; }
  .pass-list { grid-template-columns: 1fr; }
  .pass-link { margin: 0; }
  .finding-comparison th, .finding-comparison td { padding: 10px 6px; }
  .scene-controls { gap: 8px; padding: 12px; }
  .scene-controls .ui-button { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }

/* Cool steel surroundings leave camera and RFID evidence visually distinct. Geometry is illustrative. */
.scene {
 --scene-background: #f9fafb; --scene-ink: var(--ui-ink); --scene-muted: var(--ui-muted); --scene-label: var(--ui-ink); --scene-secondary: var(--ui-muted);
 --scene-floor-glow: #d1d5db; --scene-shadow: #111827; --scene-floor-top: #f3f4f6; --scene-floor-front: #e5e7eb; --scene-floor-side: #d1d5db; --scene-floor-edge: #d1d5db; --scene-floor-grid: #d1d5db; --scene-lane: #fff; --scene-lane-marking: #9ca3af;
 --scene-box-edge: #ffffff66; --scene-hardware-top: #9ca3af; --scene-hardware-front: #6b7280; --scene-hardware-side: #4b5563;
 --scene-reader-top: #fff; --scene-reader-front: #e5e7eb; --scene-reader-side: #9ca3af; --scene-camera-top: #f3f4f6; --scene-camera-front: #d1d5db; --scene-camera-side: #9ca3af;
 --scene-pallet-top: #ccb696; --scene-pallet-front: #ae9471; --scene-pallet-side: #967c5b;
 --scene-basket-camera-top: #dfcab0; --scene-basket-camera-front: #b59876; --scene-basket-camera-side: #977c5b; --scene-basket-camera-slot: #7a6248;
 --scene-basket-rfid-top: #79c9b4; --scene-basket-rfid-front: #3c9e89; --scene-basket-rfid-side: #257965; --scene-basket-rfid-slot: #235e50; --scene-basket-tag: #d5ffee;
 --scene-camera-signal: #e9bd76; --scene-radio-signal: #36a895; --scene-leader: #9ca3af; --scene-marker: #6b7280;
 --scene-inspect-ink: var(--ui-accent); --scene-inspect-border: var(--ui-line); --scene-inspect-background: #ffffffcf;
 background:var(--scene-background); color:var(--scene-ink); overflow:hidden;
}
.scene svg { height:auto; margin-top:16px; }
.scene-label { fill:var(--scene-label); }
.scene-eyebrow { fill:var(--scene-muted); font-weight:650; }
.scene-secondary { fill:var(--scene-secondary); font-size:11px; }
/* Highlight the active system without changing the basket evidence colors. */
.rfid-tower, .station-camera, .infrared-beam, .ir-sensor { transition:filter 180ms ease, stroke 180ms ease; }
.gantry-visual[data-sensing="true"] .rfid-tower {
 --scene-hardware-top:color-mix(in srgb, var(--accent) 70%, white);
 --scene-hardware-front:var(--accent);
 --scene-hardware-side:color-mix(in srgb, var(--accent) 65%, black);
 --scene-box-edge:color-mix(in srgb, var(--accent) 60%, white);
 --scene-radio-signal:var(--accent);
}
.gantry-visual[data-sensing="true"] .station-camera {
 --scene-camera-top:color-mix(in srgb, var(--accent) 70%, white);
 --scene-camera-front:var(--accent);
 --scene-camera-side:color-mix(in srgb, var(--accent) 65%, black);
 --scene-box-edge:color-mix(in srgb, var(--accent) 60%, white);
 --scene-camera-signal:var(--accent);
}
.gantry-visual[data-sensing="true"] .ir-sensor {
 --scene-hardware-top:color-mix(in srgb, var(--accent) 70%, white);
 --scene-hardware-front:var(--accent);
 --scene-hardware-side:color-mix(in srgb, var(--accent) 65%, black);
 --scene-box-edge:color-mix(in srgb, var(--accent) 60%, white);
}
.gantry-visual[data-sensing="true"] .infrared-beam { stroke:var(--accent); stroke-width:3; opacity:1; }
.gantry-visual[data-sensing="true"] .camera-signal { fill:var(--accent); opacity:.2; }
.gantry-visual[data-sensing="true"] .rfid-tower,
.gantry-visual[data-sensing="true"] .station-camera,
.gantry-visual[data-sensing="true"] .ir-sensor,
.gantry-visual[data-sensing="true"] .infrared-beam { filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }
.gantry-visual[data-sensing="true"] [data-component-label="rfid"],
.gantry-visual[data-sensing="true"] [data-component-label="camera"],
.gantry-visual[data-sensing="true"] [data-component-label="infrared"] {
 --scene-label:var(--accent); --scene-muted:var(--accent); --scene-secondary:var(--accent);
 --scene-leader:var(--accent); --scene-camera-signal:var(--accent); --scene-radio-signal:var(--accent); --scene-marker:var(--accent);
 fill:var(--accent);
}
@media(prefers-reduced-motion:reduce) { .rfid-tower, .station-camera, .infrared-beam, .ir-sensor { transition:none; } }
.scene-floor-label { fill:var(--scene-secondary); font-size:9px; letter-spacing:.2em; }
.scene-inspect { position:absolute; bottom:39px; right:23px; display:flex; align-items:center; gap:16px; padding:7px 11px; font-size:11px; text-decoration:none; color:var(--scene-inspect-ink); background:var(--scene-inspect-background); border:1px solid var(--scene-inspect-border); border-radius:7px; }
.scene-inspect:hover { color:var(--scene-ink); border-color:var(--scene-marker); }

@media (prefers-color-scheme:dark) {
 .scene {
  --scene-background: #111827;
  --scene-floor-glow: #4b5563; --scene-shadow: #000; --scene-floor-top: #1f2937; --scene-floor-front: #111827; --scene-floor-side: #0b1220; --scene-floor-edge: #4b5563; --scene-floor-grid: #4b5563; --scene-lane: #374151; --scene-lane-marking: #9ca3af;
  --scene-box-edge: #d1d5db55; --scene-hardware-top: #9ca3af; --scene-hardware-front: #6b7280; --scene-hardware-side: #4b5563;
  --scene-reader-top: #f3f4f6; --scene-reader-front: #d1d5db; --scene-reader-side: #9ca3af; --scene-camera-top: #e5e7eb; --scene-camera-front: #9ca3af; --scene-camera-side: #6b7280;
  --scene-pallet-top: #b9a080; --scene-pallet-front: #8d7658; --scene-pallet-side: #655239;
  --scene-basket-camera-top: #d5b896; --scene-basket-camera-front: #af8d63; --scene-basket-camera-side: #806040; --scene-basket-camera-slot: #4c392a;
  --scene-basket-rfid-top: #80d5bd; --scene-basket-rfid-front: #3eaa90; --scene-basket-rfid-side: #277c68; --scene-basket-rfid-slot: #163f35; --scene-basket-tag: #d5ffee;
  --scene-camera-signal: #f8cc83; --scene-radio-signal: #5be1bd; --scene-leader: #6b7280; --scene-marker: #9ca3af;
  --scene-inspect-background: #111827ed;
 }
}
@media (max-width:600px) {
 .scene svg { min-width:540px; width:125%; margin-left:calc((100% - max(540px,125%))/2); margin-top:36px; }
 .scene-inspect { bottom:35px; right:14px; }
}

.forecast-chart { margin:22px 0 12px; } .forecast-chart svg { display:block; width:100%; overflow:visible; } .forecast-chart text { fill:var(--muted); font-size:11px; } .chart-grid { stroke:var(--line); stroke-dasharray:3 5; } .chart-band { fill:var(--ui-data); opacity:.13; } .chart-line { fill:none; stroke:var(--ui-data); stroke-width:2.5; stroke-linejoin:round; } .chart-point { fill:var(--ui-data); stroke:var(--surface); stroke-width:2; } .forecast-chart figcaption { display:flex; gap:22px; justify-content:center; color:var(--muted); font-size:11px; } .forecast-chart figcaption span::before { content:''; display:inline-block; width:17px; height:3px; background:var(--ui-data); margin:0 7px 3px 0; } .forecast-chart figcaption span+span::before { height:10px; opacity:.3; margin-bottom:0; }


/* Fleet planning reuses shell controls and semantic palette tokens. */
.planning-controls h2 { font-size: 14px; }
.planning-controls p { margin: 0; }
.capacity-plan, .demand-scenarios { margin-bottom: 24px; }
.planning-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 24px 0; }
.planning-metrics dt { color: var(--muted); font-size: 12px; }
.planning-metrics dd { margin: 8px 0 0; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.planning-metrics small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.6; }
.planning-target dd { color: var(--accent); }
.planning-bars { display: grid; gap: 18px; }
.planning-bar > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 7px; }
.planning-bar strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.planning-track { height: 12px; border-radius: 4px; background: var(--surface-soft); overflow: hidden; }
.planning-track span { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 40%, var(--surface-soft)); border-radius: inherit; }
.planning-bar--target .planning-track span { background: var(--accent); }
.planning-balance { padding: 16px; margin-top: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.planning-balance > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.planning-balance strong { font-variant-numeric: tabular-nums; }
.planning-balance > div strong { font-size: 24px; }
.planning-balance p, .planning-hint { font-size: 12px; margin-top: 12px; }
.planning-table-scroll { overflow-x: auto; margin-top: 20px; }
.planning-table { margin: 0; width: 100%; min-width: 540px; border-collapse: collapse; font-size: 12px; }
.planning-table th, .planning-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.planning-table tr > :first-child { text-align: left; }
.planning-table thead th { font-weight: 500; color: var(--muted); background: var(--surface-soft); }
.planning-table small { display: block; font-size: 10px; font-weight: 400; }
.planning-selected { background: var(--ui-nav-active); color: var(--accent); font-weight: 600; }
@media (max-width: 600px) {
  .planning-metrics { gap: 12px; }
  .planning-metrics dd { font-size: 24px; }
  .planning-bar > div:first-child { flex-wrap: wrap; gap: 4px 12px; }
}

.forecast-outlook .planning-metrics { margin-bottom: 18px; }
.forecast-exact-values { margin-top: 24px; }
.forecast-table { min-width: 480px; }
.forecast-table tbody th { white-space: nowrap; }
.forecast-day-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 24px; }
.forecast-day { --day-tone: var(--accent); padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.forecast-day h3 { font-size: 13px; margin: 0 0 16px; }
.forecast-day-value { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }
.forecast-day-value small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.forecast-day-track { position: relative; height: 8px; margin: 16px 0; background: var(--surface); border-radius: 3px; }
.forecast-day-track span { display: block; height: 100%; background: var(--day-tone); border-radius: inherit; }
.forecast-day-track i { position: absolute; width: 2px; top: -4px; bottom: -4px; background: var(--ink); transform: translateX(-1px); }
.forecast-day .small { margin: 8px 0 0; }
.forecast-day-status { font-size: 12px; font-weight: 600; color: var(--day-tone); margin: 14px 0 0; }
.forecast-day--over { --day-tone: var(--ui-warning); border-color: color-mix(in srgb, var(--ui-warning) 40%, var(--line)); }
.forecast-day--risk { border-style: dashed; }
.forecast-capacity-key { margin-top: 20px; }
.forecast-error-summary { color: var(--accent); font-weight: 600; }
.forecast-error-bars { margin: 24px 0; max-width: 720px; }
.forecast-history-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 12px; }
.forecast-history-header p { margin: 0; font-size: 12px; }
.forecast-history-sample { margin-left: 10px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; }
.forecast-history-legend { display: flex; gap: 20px; color: var(--muted); font-size: 12px; }
.forecast-history-legend span::before { content: ''; display: inline-block; width: 22px; margin-right: 7px; vertical-align: middle; border-top: 3px solid var(--accent); }
.forecast-history-legend .history-forecast-key::before { border-top-style: dashed; }
.forecast-history-legend .history-actual-key::before { border-color: var(--ui-data); }
.forecast-history-scroll { overflow-x: auto; margin: 16px 0; }
.forecast-history-chart { display: block; width: 100%; min-width: 640px; }
.forecast-history-chart text { fill: var(--muted); font: 11px var(--ui-font); }
.forecast-history-chart .history-axis-label { font-weight: 600; }
.history-forecast-line, .history-actual-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.history-forecast-line { stroke: var(--accent); stroke-dasharray: 7 4; }
.history-actual-line { stroke: var(--ui-data); }
.history-zero { stroke: var(--muted); stroke-width: 1; }
.history-difference--above, .history-forecast-dot { fill: var(--accent); }
.history-difference--below, .history-actual-dot { fill: var(--ui-data); }
.history-difference { opacity: .7; }
.history-hit { fill: transparent; }
.history-day { outline: none; }
.history-focus { opacity: 0; pointer-events: none; }
.history-day:hover .history-focus, .history-day:focus .history-focus { opacity: 1; }
.forecast-history-chart:has(.history-day:hover) .history-day:not(:hover) .history-focus { opacity: 0; }
.history-guide { stroke: var(--muted); stroke-dasharray: 3 4; }
.history-tooltip rect { fill: var(--surface); stroke: var(--line); }
.history-tooltip text { fill: var(--ink); }
.forecast-history-values { margin-bottom: 24px; }
@media (max-width: 420px) { .forecast-day-grid { grid-template-columns: 1fr; } }

/* Gantry follows one processing stack while incoming activity stays visible alongside it. */
.gantry-stream-heading, .gantry-stream-heading > div, .stream-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.gantry-controls { align-items:center; }
.gantry-stream-heading { flex:1 1 480px; min-width:0; justify-content:space-between; }
.gantry-stream-heading .stream-actions { margin-left:auto; }
.stream-indicator { width:7px; height:7px; border-radius:50%; background:var(--muted); }
.gantry-stream-heading[data-following="true"] .stream-indicator { background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.stream-actions .ui-button { font-size:12px; padding:6px 12px; }
.gantry-live .gantry-layout { grid-template-columns:minmax(0, 1fr) 290px; gap:20px; }
.gantry-live .gantry-layout > section { display:contents; }
.gantry-live .gantry-visual, .gantry-live .empty-state { grid-column:1; grid-row:1; }
.gantry-live .recorded-stack-details { grid-column:1; grid-row:2; margin-top:0; }
.active-stack-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); }
.active-stack-heading h2 { font-family:var(--ui-font-mono, monospace); font-size:17px; }
.active-stack-heading .nav-label { font-size:10px; margin-bottom:4px; }
.gantry-stages { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr); gap:20px; list-style:none; margin:0; padding:20px 24px 24px; border-top:1px solid var(--line); }
.gantry-stages li { min-width:0; border-top:2px solid var(--line); padding-top:12px; color:var(--ink); }
.gantry-stages h3 { margin:0; font-size:14px; }
.gantry-stages .stage-description { margin:6px 0 18px; font-size:11px; color:var(--muted); }
.gantry-stages .stage-status { min-height:28px; margin:0 0 12px; font-size:11px; color:var(--muted); }
.gantry-stages li[data-state="complete"], .gantry-stages li[data-state="current"] { border-color:var(--accent); }
.gantry-stages li[data-state="current"] h3 { color:var(--accent); }
.live-stack-metrics { margin:0; }
.live-stack-metrics dt, .stack-expected dt { color:var(--muted); font-size:11px; }
.live-stack-metrics dd, .stack-expected dd { margin:6px 0 0; font-family:var(--ui-font-mono, monospace); font-size:32px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; }
.stack-feed { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-self:stretch; min-width:0; min-height:0; contain:size; overflow:hidden; }
.stack-feed > header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:18px 16px; border-bottom:1px solid var(--line); }
.stack-feed h2 { font-size:14px; }
.stack-feed-entries { flex:1 1 auto; min-height:0; overflow:auto; overflow-anchor:none; }
.stack-feed-entry { display:grid; grid-template-columns:1fr; gap:4px; width:100%; padding:14px 16px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); text-align:left; text-decoration:none; }
.stack-feed-entry strong { font-family:var(--ui-font-mono, monospace); font-size:12px; overflow-wrap:anywhere; }
.stack-feed-time { color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.stack-feed-state { color:var(--muted); font-size:11px; }
.stack-feed-entry[aria-current], .stack-feed-entry:hover { background:var(--accent-soft); }
.stack-feed-entry[aria-current] { box-shadow:inset 3px 0 var(--accent); }
.stack-feed-entry[data-review="true"] .stack-feed-state { color:var(--ui-warning); }
.stack-feed-entry:focus-visible { outline-offset:-3px; }
.stack-feed > footer { flex:none; display:flex; flex-wrap:wrap; gap:12px; padding:14px 16px; font-size:11px; }
.gantry-live [hidden], .gantry-controls [hidden] { display:none !important; }
@media(max-width:800px) {
 .gantry-live .gantry-layout { grid-template-columns:minmax(0,1fr); }
 .stack-feed { grid-column:1; grid-row:2; contain:none; }
 .gantry-live .recorded-stack-details { grid-row:3; }
 .stack-feed-entries { max-height:340px; }
 .active-stack-heading { padding:16px; }
 .gantry-stages { padding:16px; }

}

.stack-identity { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.stack-identity-details { min-width:0; }
.stack-identity-label { display:block; color:var(--muted); font-size:11px; }
.stack-identity strong { display:block; margin:6px 0 10px; font-family:var(--ui-font-mono, monospace); font-size:15px; overflow-wrap:anywhere; }
.oracle-match-status { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:11px; color:var(--muted); }
[data-oracle-match-status] { font-weight:600; }
.stack-identity[data-oracle-match="true"] [data-oracle-match-status] { color:var(--accent); }
.stack-expected { margin:0; }
@media(max-width:600px) { .gantry-stages { grid-template-columns:1fr; gap:20px; } }
.stack-feed-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:7px 0; font-size:10px; color:var(--muted); }
.stack-feed-counts b { display:block; margin-top:2px; font:600 13px var(--ui-font-mono, monospace); color:var(--ink); }
.stack-feed-resolution { display:grid; gap:4px; font-size:10px; color:var(--muted); }
.stack-feed-resolution > span { display:flex; justify-content:space-between; gap:8px; }
.stack-feed-resolution [data-feed-oracle], .stack-feed-resolution [data-feed-decision] { font-size:10px; text-align:right; color:var(--ink); }
.stack-feed-entry[data-review="true"] [data-feed-decision] { color:var(--ui-warning); }