/* ============================================================
   Antenna Demo — style.css (the shell + the shared module kit)
   ECE 215 · Lesson 31 · Objective 3.3

   On the design system's light theme: ../_shared/ece-tokens.css and
   ../_shared/ece-base.css load first; each module's own CSS loads after
   this file (wire.css: .ant-wire, the dipole and the monopole). This file
   is layout only; every color is an --ece-* token. Projector first
   (~1600–1920 × 1000), still usable at 1280 × 800 (see Smaller screens).

   The kit (sidebar, cards, controls, readout tiles, verdict, stage, view
   tabs, canvases, the three.js wrap) is scoped under .ant-module, so
   every antenna looks like one app; a module's own rules are scoped
   under .ant-<id> (or its family class, .ant-wire).
   ============================================================ */

:root {
  --header-h: 56px;
  --sidebar-w: 304px;
  --panel-w: 22%;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--ece-bg); color: var(--ece-ink); font-family: var(--ece-font-sans); }

/* ── Header ── */
.app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100; padding: 0 20px; }
.header-title h1 { font-size: 16px; }
.header-subtitle { font-size: 12.5px; }
.antenna-tabs .ece-segment { font-size: 14px; padding: 7px 18px; }

/* ── Main: one module root shown at a time ── */
.app-main { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; min-height: 0; }
.ant-module { position: absolute; inset: 0; display: flex; min-height: 0; }
.ant-module[hidden] { display: none; }
.boot-msg { display: block; max-width: 640px; margin: 32px auto; font-size: 14px; }

/* ════════ Module kit ════════ */

/* ── Sidebar ── */
.ant-module .sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 10px 12px;
  overflow-y: auto;
}
.ant-module .ctrl-card { flex-shrink: 0; overflow: hidden; }
.ant-module .ctrl-card-header { padding: 7px 12px; font-size: 12.5px; }
.ant-module .ctrl-body { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 9px; }

.ant-module .ctrl-field { display: flex; flex-direction: column; gap: 7px; }
.ant-module .ctrl-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ant-module .ctrl-line label { font-size: 13px; color: var(--ece-ink-2); }
.ant-module .num-wrap { font-size: 12px; color: var(--ece-ink-3); white-space: nowrap; }
.ant-module .num-input {
  width: 74px; padding: 3px 7px; text-align: right;
  font-family: var(--ece-font-mono); font-size: 14px; font-weight: 600; color: var(--ece-ink);
  background: var(--ece-bg); border: 1px solid var(--ece-rule); border-radius: var(--ece-radius-chip);
}
.ant-module .num-input:focus { border-color: var(--ece-brand); outline: none; }
.ant-module .ctrl-val { font-family: var(--ece-font-mono); font-size: 13px; font-weight: 600; color: var(--ece-brand-dk); }
.ant-module input[type="range"].accent::-webkit-slider-thumb { background: var(--ece-accent); }
.ant-module input[type="range"].accent::-moz-range-thumb { background: var(--ece-accent); }

.ant-module .toggle-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ece-ink-2); cursor: pointer; user-select: none; }

.ant-module .anim-row { display: flex; align-items: flex-end; gap: 12px; }
.ant-module .play-btn { min-width: 72px; font-size: 13px; }
.ant-module .speed-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ant-module .speed-wrap label { font-size: 12.5px; }
.ant-module .note { font-size: 11.5px; color: var(--ece-ink-3); line-height: 1.35; }

/* Readouts */
.ant-module .readouts { gap: 7px; }
.ant-module .metric-row { display: grid; gap: 6px; }
.ant-module .metric-row.three { grid-template-columns: repeat(3, 1fr); }
.ant-module .metric-row.two { grid-template-columns: 1fr 1fr; }
.ant-module .metric { padding: 5px 6px; }
.ant-module .metric-label { font-size: 11px; }
.ant-module .metric-val { font-size: 16px; }
.ant-module .details { font-size: 11px; color: var(--ece-ink-3); font-family: var(--ece-font-mono); text-align: center; }
.ant-module .caveat { font-size: 11.5px; line-height: 1.35; color: var(--ece-ink-3); border-top: 1px solid var(--ece-rule); padding-top: 6px; }

.ant-module .verdict { display: block; flex-shrink: 0; font-size: 13px; line-height: 1.42; }
.ant-module .verdict b { font-weight: 600; }

/* ── Antenna panel (a narrow middle column) ── */
.ant-module .antenna-panel {
  width: var(--panel-w); min-width: 230px; flex-shrink: 0;
  display: flex; flex-direction: column;
  padding: 10px 0 10px 10px;
}
.ant-module .panel-title { font-size: 14px; font-weight: 600; color: var(--ece-ink); padding: 2px 4px 7px; }
.ant-module .panel-sub { font-weight: 400; color: var(--ece-ink-3); font-size: 12px; }
.ant-module .antenna-panel .canvas-wrap {
  flex: 1; background: var(--ece-paper);
  border: 1px solid var(--ece-rule); border-radius: var(--ece-radius-card);
}
.ant-module .panel-caption { font-size: 12.5px; line-height: 1.4; color: var(--ece-ink-2); padding: 8px 6px 0; text-align: center; }

/* Canvases fill their wrap; JS sizes the backing store. */
.ant-module .canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; max-height: none; }

/* ── Stage: the module's view tabs, then the active view ── */
.ant-module .stage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 6px 10px 10px; }
.ant-module .view-tabs { flex-shrink: 0; background: transparent; gap: 2px; }
.ant-module .view-tabs .ece-tab { font-size: 14px; padding: 7px 16px 8px; }
.ant-module .tab-content { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 8px; }
.ant-module .tab-content.active { display: flex; }
.ant-module .stage-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 2px 4px; min-height: 26px; }
.ant-module .stage-title { font-size: 14px; font-weight: 600; margin-right: auto; }
.ant-module .stage-canvas { flex: 1; background: var(--ece-paper); border: 1px solid var(--ece-rule); border-radius: var(--ece-radius-card); }

.ant-module .three-wrap {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
  background: var(--ece-paper); border: 1px solid var(--ece-rule); border-radius: var(--ece-radius-card);
}
.ant-module .three-wrap canvas { display: block; }
.ant-module .three-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--ece-ink-3); background: var(--ece-paper);
  padding: 3px 12px; border-radius: 99px; border: 1px solid var(--ece-rule);
  pointer-events: none; z-index: 5; white-space: nowrap;
}

/* Gain view: sphere ~60 %, cuts ~40 % */
.ant-module .gain-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.ant-module .gain-3d { flex: 3; }
.ant-module .gain-cuts { flex: 2; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ant-module .cut-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--ece-paper); border: 1px solid var(--ece-rule); border-radius: var(--ece-radius-card);
  overflow: hidden;
}
.ant-module .cut-title { font-size: 13px; font-weight: 600; padding: 7px 12px 0; }
.ant-module .cut-title span { font-weight: 400; color: var(--ece-ink-3); }
.ant-module .cut-card .canvas-wrap { flex: 1; }

/* Gain3D's HTML labels */
.ant-module .label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.ant-module .label-layer .lbl {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 12.5px; font-weight: 500; color: var(--ece-ink-2); white-space: nowrap;
  background: rgb(var(--ece-paper-rgb) / 0.85); padding: 1px 6px; border-radius: 4px;
}
.ant-module .label-layer .lbl.iso { color: var(--ece-ink-3); }
.ant-module .label-layer .lbl.big { top: auto; bottom: 44px; left: 12px; transform: none; font-size: 13px; color: var(--ece-ink); border: 1px solid var(--ece-rule); padding: 4px 9px; }
/* a caption too long for a narrow 3D view (L = 2λ at 1280 × 800, a dish under λ/2 across) wraps upward instead of being cut off */
.ant-module .label-layer .lbl.big { white-space: normal; max-width: calc(100% - 24px); text-wrap: balance; }

/* ── Smaller screens ──
   Short viewports (≤ 960 px tall: 1440 × 900, 1280 × 800) tighten the sidebar's spacing, card
   padding and secondary lines so it fits without removing text; nothing here applies at
   1600 × 1000 or 1920 × 1080. Where it still overflows (1280 × 800), the verdict sticks to the
   sidebar's bottom edge, so it stays in view while the rest scrolls under it. */
@media (max-height: 960px) {
  .ant-module .sidebar { gap: 5px; padding: 8px 8px 8px; }
  .ant-module .ctrl-card-header { padding: 5px 11px; font-size: 12px; }
  .ant-module .ctrl-body { gap: 5px; padding: 6px 11px 7px; }
  .ant-module .ctrl-field { gap: 5px; }
  .ant-module .readouts { gap: 6px; }
  .ant-module .metric { padding: 4px 6px; }
  .ant-module .verdict {
    position: sticky; bottom: 0; z-index: 2;
    box-shadow: 0 -4px 0 0 var(--ece-bg);        /* a strip of the sidebar's gap (≥ 4 px) above it, over what scrolls under */
    font-size: 12.5px; line-height: 1.38; padding: 6px 10px;
  }
}
@media (max-height: 860px) {
  .ant-module .sidebar { gap: 4px; padding: 6px 8px; }
  .ant-module .ctrl-card-header { padding: 4px 10px; }
  .ant-module .ctrl-body { gap: 5px; padding: 4px 10px 5px; }
  .ant-module .ctrl-field { gap: 3px; }
  .ant-module .ctrl-line label { font-size: 12.5px; }
  .ant-module .readouts { gap: 5px; }
  .ant-module .metric { padding: 3px 5px; }
  .ant-module .note { font-size: 11px; line-height: 1.3; }
  .ant-module .details { font-size: 10.5px; }
  .ant-module .caveat { font-size: 11px; line-height: 1.3; padding-top: 4px; }
  .ant-module .verdict { font-size: 12px; line-height: 1.35; padding: 6px 9px; }
}
@media (max-width: 1360px) {
  :root { --sidebar-w: 286px; }
  .ant-module .stage-bar { gap: 6px 12px; }
  .ant-module .toggle-item { font-size: 12px; }
  .antenna-tabs .ece-segment { padding: 7px 14px; }
}