/* console.css
   Layout for the prototype only. The 3D viewport fills the screen and is always visible. The app bar,
   the overview column (left), the side panel (right) and the line-card dock float above it.
   Every value comes from tokens.css (generated from tokens/tokens.json). */

/* ── Layout variables ─────────────────────────────────────────────── */
body {
  --gap: var(--layout-float-gap);
  --top: calc(var(--layout-bar-height) + var(--gap) * 2);           /* below the floating app bar */
  --panel-now: var(--layout-panel-width);                            /* the side panel's current width */
  --dash-now: var(--layout-dash-width);                              /* the overview column's current width */
  --right: calc(var(--panel-now) + var(--gap) * 2);                  /* left edge of the side panel */
  --left: calc(var(--dash-now) + var(--gap) * 2);                    /* right edge of the overview column */
  overflow: hidden;
}
body[data-panel="collapsed"] { --panel-now: var(--layout-panel-rail); }
body[data-dash="collapsed"] { --dash-now: var(--layout-dash-rail); }
.no-motion *, .no-motion *::before, .no-motion *::after { transition: none !important; }
.stage { display: contents; }

/* ── 3D viewport: full screen ─────────────────────────────────────────────── */
.viewport { position: fixed; inset: 0; z-index: 0; background: var(--color-surface-bg); overflow: hidden; }
.viewport canvas { display: block; touch-action: none; }
.viewport::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / var(--effect-scanline-opacity)) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / var(--effect-vignette-opacity))); }

.overlay { position: absolute; z-index: 2; }
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.labels span { position: absolute; transform: translate(-50%, -100%); color: var(--color-accent); font-family: var(--font-family-display); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-wide); background: var(--color-surface-overlay-subtle); border-left: 2px solid var(--color-accent); padding: 0 0.4rem; white-space: nowrap; }
/* Overlays sit inside the open area, clear of the floating containers, and slide with them */
#stats { top: var(--top); left: var(--left); transition: left var(--motion-panel) var(--motion-ease); }
.topright { top: var(--top); right: var(--right); display: grid; justify-items: end; gap: 0.45rem; transition: right var(--motion-panel) var(--motion-ease); }
.topright .scanner { max-width: max(14rem, calc(100vw - var(--left) - var(--right) - 18.5rem - var(--gap) * 3)); text-align: right; transition: max-width var(--motion-panel) var(--motion-ease); }
.scanner { color: var(--color-text); font-size: var(--font-size-xs); background: var(--color-surface-overlay-subtle); padding: 0.15rem 0.5rem; border: 1px solid var(--color-border-strong); box-shadow: var(--elevation-raised); }
.scanner::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-accent); margin-right: 0.4rem; box-shadow: 0 0 6px var(--color-accent); }
.hud { left: var(--left); bottom: calc(var(--dock-h, 0px) + var(--gap) * 2); color: var(--color-text); font-size: var(--font-size-sm); pointer-events: none; background: var(--color-surface-overlay-subtle); padding: 0.15rem 0.5rem; border-left: 2px solid var(--color-accent);
  transition: left var(--motion-panel) var(--motion-ease); }
.hud:empty { display: none; }

/* ── Floating app bar ─────────────────────────────────────────────── */
.bar.float { position: fixed; z-index: 20; top: var(--gap); left: var(--gap); right: var(--gap); height: var(--layout-bar-height); flex-wrap: nowrap; padding-block: 0; }
.bar.float h1 { white-space: nowrap; }

/* ── Overview column, left (invisible container) ─────────────────────────────────────────────── */
.dash { position: fixed; z-index: 15; top: var(--top); left: var(--gap); bottom: var(--gap); }

/* ── Floating side panel, right (copilot and event log) ─────────────────────────────────────────────── */
.panel.float { position: fixed; z-index: 20; top: var(--top); right: var(--gap); bottom: var(--gap); }

/* ── Floating line-card dock, between the two columns ─────────────────────────────────────────────── */
.console { display: contents; }
/* Spans the full open width between the overview column and the side panel, one half per line */
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; padding: 0.7rem; }
.lines.float { position: fixed; z-index: 10; left: var(--left); right: var(--right); bottom: var(--gap);
  transition: left var(--motion-panel) var(--motion-ease), right var(--motion-panel) var(--motion-ease); }

/* ── Medium screens: give the 3D view more room ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .bar.float .barlink { display: none; }
}
/* Short screens: the floating stats would crowd the dock */
@media (max-height: 700px) and (min-width: 861px) {
  #stats { display: none; }
}

/* ── Small screens: stack, nothing floats over the 3D view ─────────────────────────────────────────────── */
/* 860px = layout.breakpoint token (media queries can't read CSS variables) */
@media (max-width: 860px) {
  body { --gap: 0.6rem; --left: var(--gap); height: auto; min-height: 100%; overflow: visible; gap: var(--gap); padding: var(--gap); }
  .bar.float { position: sticky; top: var(--gap); left: auto; right: auto; order: 0; height: auto; min-height: var(--layout-bar-height); flex-wrap: wrap; padding-block: 0.45rem; row-gap: 0.4rem; }
  .bar.float .barlink { display: inline; }
  .viewport { position: relative; inset: auto; order: 1; flex: none; height: 58vh; border: var(--shape-border-width) solid var(--color-border-strong); }
  .console, .stage { display: contents; }
  .lines.float, .panel.float { position: static; width: auto; max-width: none; margin: 0; }
  .lines.float { order: 2; grid-template-columns: 1fr; }
  /* Overview column: flows in the page, cards no longer scroll on their own */
  .dash { position: static; order: 3; width: auto; }
  .dash[data-collapsed="true"] { --dash-w: auto; }
  .dash-body { width: auto; }
  .dash-scroll { overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .dash[data-collapsed="true"] .dash-body { opacity: 1; visibility: visible; pointer-events: auto; position: static; }
  .dash[data-collapsed="true"] .dash-scroll, .dash[data-collapsed="true"] .dash-bottom, .dash[data-collapsed="true"] .seg { display: none; }
  .dash[data-collapsed="true"] .dash-rail { display: none; }
  .dash-head .icon-btn svg { transform: rotate(-90deg); transition: transform var(--motion-panel) var(--motion-ease); }
  .dash[data-collapsed="true"] .dash-head .icon-btn svg { transform: rotate(90deg); }
  .panel.float { order: 4; height: auto; }
  .panel-body { width: auto; }
  .pane { overflow: visible; min-height: 22rem; }
  /* Collapsed on a phone: keep the tabs, hide the rest, point the chevron down */
  .panel[data-collapsed="true"] { --panel-w: auto; }
  .panel[data-collapsed="true"] .panel-head { padding: 0 0.6rem 0 0; justify-content: flex-start; border-bottom: 0; }
  .panel[data-collapsed="true"] .panel-head .tabs { display: flex; }
  .panel[data-collapsed="true"] .panel-rail { display: none; }
  .panel-head .icon-btn svg { transform: rotate(90deg); }
  .panel[data-collapsed="true"] .panel-head .icon-btn svg { transform: rotate(-90deg); }
  #stats, .topright, .hud { --top: var(--gap); --right: var(--gap); }
  #stats { left: var(--gap); }
  .topright { top: auto; bottom: var(--gap); right: var(--gap); }
  .hud { bottom: auto; top: auto; display: none; }
  .labels { display: none; }
  .stats { width: auto; right: var(--gap); }
  .stats b { font-size: var(--font-size-xl); }
}