/* Vantage — bold + graphic, all visible text BLACK (matches the All Means Works
   toolkit design rule). Display font = Archivo Black for titles/headings. */

:root {
  --ink: #111;
  --line: #d9d6cf;
  --panel: #ffffff;
  --stage: #1b1d1f;     /* matte around the frame (not text) */
  --accent: #1f6feb;
  --display: "Archivo Black", system-ui, sans-serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--panel);
  -webkit-font-smoothing: antialiased;
}

.vg-app {
  display: grid;
  grid-template-columns: 1fr 372px;
  height: 100vh;
  min-height: 0;
}

/* ---- stage (left) -------------------------------------------------------- */
.vg-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 18px;
  gap: 10px;
}
.vg-topbar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.vg-title {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink);
}
.vg-sub { margin: 0; font-size: 14px; color: var(--ink); }

/* two-pane camera window: perspective | side+plan rig.
   Both columns are fractional, so the side & plan scale up with the window
   (and with the perspective) — they carry just-as-important information. */
.vg-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: 10px;
}
.vg-panes--solo { grid-template-columns: 1fr; }
.vg-panes--solo .vg-pane--rig { display: none; }
.vg-pane { min-width: 0; min-height: 0; }
.vg-pane--view { display: flex; }

.vg-pane--rig {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
/* each figure splits the rig height; its SVG fills the box (meet-scaled) so the
   diagrams grow in BOTH dimensions as the window gets bigger. */
.vg-rigfig {
  margin: 0;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.vg-rigcap {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink); margin: 0 0 6px;
}

.vg-frame-wrap {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage);
  border-radius: 12px;
  overflow: hidden;
}
.vg-frame { position: relative; box-shadow: 0 6px 30px rgba(0,0,0,0.35); }
.vg-frame canvas, .vg-frame .vg-overlay {
  display: block;
  position: absolute;
  inset: 0;
}
#vg-canvas { position: relative; }
.vg-overlay { pointer-events: none; }
.vg-fallback { color: var(--panel); font-size: 15px; max-width: 36ch; text-align: center; padding: 24px; }

.vg-caption {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  min-height: 1.2em;
  font-weight: 600;
}
.vg-live { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.vg-tip { margin: 0; font-size: 12.5px; color: var(--ink); }

/* ---- panel (right) ------------------------------------------------------- */
.vg-panel {
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px 16px 28px;
}
.vg-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.vg-block:last-child { border-bottom: 0; }
.vg-h {
  font-family: var(--display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: var(--ink);
}

.vg-ctl { display: block; margin: 10px 0; }
.vg-lab {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--ink);
}
.vg-lab output { font-variant-numeric: tabular-nums; font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
select,
.vg-panel input[type="text"] {
  width: 100%; padding: 6px 8px; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
}
.vg-panel input[type="text"]::placeholder { color: var(--ink); opacity: 0.75; }

.vg-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.vg-presets button {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--ink);
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); cursor: pointer;
}
.vg-presets button:hover { border-color: var(--line); background: var(--panel); }

.vg-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--ink); margin: 8px 0; cursor: pointer; line-height: 1.35;
}
.vg-check input { margin-top: 2px; accent-color: var(--accent); }

.vg-seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.vg-seg button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink);
  padding: 7px 4px; background: var(--panel); border: 0; border-right: 1px solid var(--line); cursor: pointer;
}
.vg-seg button:last-child { border-right: 0; }
.vg-seg button.on { background: var(--ink); color: var(--panel); }

.vg-lessons { display: grid; gap: 6px; }
.vg-lesson {
  font: inherit; font-size: 13px; font-weight: 700; text-align: left; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer;
}
.vg-lesson:hover { border-color: var(--accent); background: var(--panel); }

.vg-reset {
  margin-top: 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer;
}
.vg-reset:hover { border-color: var(--line); }

.vg-hint, .vg-note { font-size: 12px; line-height: 1.45; color: var(--ink); margin: 8px 0 0; }
.vg-note { font-size: 11.5px; }

.vg-diagram {
  flex: 1 1 0; min-height: 0; width: 100%; height: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.vg-dlabel { font: 700 10px var(--sans); fill: var(--ink); }

.vg-num { margin: 0; display: grid; gap: 6px; }
.vg-num > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.vg-num dt { color: var(--ink); }
.vg-num dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }

/* ---- responsive: stack on narrow screens -------------------------------- */
@media (max-width: 980px) {
  .vg-panes { grid-template-columns: 1fr; }
  .vg-pane--view .vg-frame-wrap { min-height: 44vh; }
}
@media (max-width: 820px) {
  .vg-app { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .vg-frame-wrap { min-height: 44vh; }
  .vg-panel { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── House design language (All Means Works) ───────────────────────────────
   Square the boxes so Vantage reads like the shell's .graphic-box rectangles.
   The preset chips stay pills — they are chips, not boxes. */
.vg-pane--rig, .vg-frame-wrap, .vg-diagram, .vg-seg, .vg-lesson, .vg-reset,
select, .vg-panel input[type="text"] { border-radius: 0; }