/* Two Rulers: components added on top of house-style.css + exploration.css. Colours come from house-style tokens only.
   Layout: one stage that switches between two builds, then the shared trap, the two rulers side by side, the ledger, viewer, renders, film. */
:root {
  --ruler-a: var(--accent);         /* espresso: walnut-copper */
  --ruler-b: #9fb4c7;                /* rangefinder: satin chrome blue-grey */
  --miss: #ff5a4f;
  --extra: #4f7cff;
}

/* ---------- object switch ---------- */
.object-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; }
.object-switch button {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'k s' 't s' 'd s';
  align-items: center; gap: 2px 14px; min-height: 76px; padding: 14px 18px; text-align: left;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
}
.object-switch .os-kicker { grid-area: k; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.object-switch strong { grid-area: t; font: 400 26px / 1.05 'Instrument Serif', serif; }
.object-switch small { grid-area: d; font-size: 12px; color: var(--muted); }
.object-switch .os-score { grid-area: s; font: 400 34px / 1 'Instrument Serif', serif; font-variant-numeric: tabular-nums; color: var(--muted); }
.object-switch button[data-object='espresso'][aria-selected='true'] { border-color: var(--ruler-a); }
.object-switch button[data-object='rangefinder'][aria-selected='true'] { border-color: var(--ruler-b); }
.object-switch button[aria-selected='true'] .os-kicker,
.object-switch button[aria-selected='true'] .os-score { color: var(--accent); }
.object-switch button[data-object='rangefinder'][aria-selected='true'] .os-kicker,
.object-switch button[data-object='rangefinder'][aria-selected='true'] .os-score { color: var(--ruler-b); }
.object-switch button:hover:not([aria-selected='true']) { border-color: var(--muted); color: var(--ink); }

/* the stage takes each concept's own aspect ratio */
.stage.compare { aspect-ratio: var(--aspect, 1024 / 1536); max-width: 100%; }
.stage.compare[data-object='rangefinder'] { max-height: none; width: 100%; background: #d9d9d9; }

/* gap meter: the other build drawn faint */
#gap-chart .line.ghost { stroke: var(--muted); stroke-opacity: 0.45; stroke-width: 1.4; stroke-dasharray: 3 3; }
#gap-chart .ghost-label { fill: var(--muted); font: 9px 'Instrument Sans', sans-serif; }

/* ---------- shared trap ---------- */
.trap, .rulers, .h2h, .film { margin: 72px 0 96px; }
.trap-grid, .ruler-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trap-card, .ruler-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--rule); background: var(--panel); }
.trap-card p, .ruler-card p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
.trap-card p.card-type-s, .ruler-card p.card-type-s { font-size: 10px; color: var(--accent); }
.ruler-card h3 { margin: 0; font: 400 30px / 1.05 'Instrument Serif', serif; color: var(--ink); }
.trap-imgs { display: grid; gap: 8px; }
.trap-imgs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trap-imgs img { display: block; width: 100%; background: #cbc9c5; }
.trap-imgs.three img { aspect-ratio: 2 / 3; object-fit: cover; }
.mini-table { overflow-x: auto; }
.mini-table table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.mini-table th, .mini-table td { padding: 7px 8px; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; }
.mini-table thead th { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.mini-table tbody th { color: var(--ink); }
.mini-table td { color: var(--muted); }
.mini-table td.bad { color: var(--miss); }

/* ---------- two rulers ---------- */
.base-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.base-mini figure, .fit-pair figure { margin: 0; }
.base-mini img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #cdcac5; border: 1px solid var(--rule); }
.base-mini .chosen img { border-color: var(--accent); }
.base-mini figcaption, .fit-pair figcaption { margin-top: 6px; font-size: 11px; color: var(--muted); }
.base-mini .tag { margin-left: 4px; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 2px 5px; }
.fit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fit-pair img { display: block; width: 100%; aspect-ratio: 1956 / 1199; object-fit: cover; border: 1px solid var(--rule); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.facts dt { font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-size: 13px; color: var(--ink); }
.ruler-card:nth-child(2) p.card-type-s { color: var(--ruler-b); }

/* matrix reference row (rangefinder) */
.matrix tbody tr.ref-row { cursor: default; background: color-mix(in srgb, var(--ink) 3%, transparent); }
.matrix tbody tr.ref-row th strong { color: var(--muted); }

/* ---------- head to head ---------- */
.h2h-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--panel); }
.h2h-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.h2h-table th, .h2h-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-size: 13px; line-height: 1.5; }
.h2h-table tbody tr:last-child th, .h2h-table tbody tr:last-child td { border-bottom: 0; }
.h2h-table thead th { font: 400 22px / 1.1 'Instrument Serif', serif; color: var(--ink); }
.h2h-table thead th:nth-child(2) { color: var(--ruler-a); }
.h2h-table thead th:nth-child(3) { color: var(--ruler-b); }
.h2h-table tbody th { width: 190px; font-size: 10px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.h2h-table td { color: var(--ink); }
.h2h-table td.num { font: 400 24px / 1.1 'Instrument Serif', serif; font-variant-numeric: tabular-nums; }

/* ---------- viewer additions ---------- */
.viewer-right { display: flex; gap: 8px; align-items: start; }
@media (max-width: 800px) {
  .viewer-top { flex-direction: column; align-items: stretch; }
  .viewer-right { justify-content: space-between; }
}

/* ---------- renders: one heading per build ---------- */
.render-sub { margin: 26px 0 12px; font: 400 24px / 1.1 'Instrument Serif', serif; color: var(--ink); }
.render-sub:first-of-type { margin-top: 0; }

/* ---------- film ---------- */
.film-video { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--rule); background: #000; }

/* ---------- how dialog: two processes side by side ---------- */
.how-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.how-cols > div { min-width: 0; }
.how-cols .kicker { margin-bottom: 10px; }
.how-cols .how-steps { grid-template-columns: 1fr; margin-top: 12px; }
.how-cols .how-steps p { font-size: 14px; }
.how-cols > div:last-child .kicker { color: var(--ruler-b); }

/* the bar has two actions here (the house grid expects four) */
@media (max-width: 820px) {
  .bar-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bar-how::after { content: 'How they were made'; }
}
@media (max-width: 380px) {
  .bar-how::after { content: 'How'; }
}

@media (max-width: 900px) {
  .object-switch, .trap-grid, .ruler-grid, .how-cols { grid-template-columns: 1fr; }
  .object-switch strong { font-size: 22px; }
}
@media (max-width: 560px) {
  .object-switch button { min-height: 64px; padding: 12px 14px; }
  .object-switch .os-score { font-size: 26px; }
  .trap-imgs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: 1fr; }
}

/* ---------- viewer restart (lost graphics context) ---------- */
.viewer-restart { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); padding: 10px 16px; border: 1px solid var(--accent); background: var(--panel); color: var(--ink); font-size: 13px; }
.viewer-restart:hover { background: var(--accent); color: var(--bg); }

/* ---------- resources ---------- */
.resources { margin: 72px 0 72px; }
.resource-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 760px; }
.resource-row .action { justify-content: flex-start; min-height: 72px; padding: 14px 18px; }
@media (max-width: 560px) { .resource-row { grid-template-columns: 1fr; } }

/* shared footer from the explorations runtime, matched to this page */
:root { --exploration-footer-bg: var(--bg); --exploration-footer-ink: var(--muted); --exploration-footer-border: var(--rule); }
.site-footer[data-exploration-controls] { position: static; background: var(--exploration-footer-bg); color: var(--exploration-footer-ink); border-top: 1px solid var(--exploration-footer-border); }