/* Measured, Not Copied: components on top of the house style. Colours come from house-style.css tokens only. */

/* ---------- Compare stage: model over concept, revealed by a slider ---------- */
.stage.compare { aspect-ratio: 1024 / 1536; max-height: calc(100dvh - var(--bar-h) - 40px); margin: 0 auto; background: #c9c5c3; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.cmp-over { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 1px; background: var(--ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent); pointer-events: none;
}
.cmp-handle span {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%);
  border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); backdrop-filter: blur(10px);
}
.cmp-handle span::before, .cmp-handle span::after {
  content: ''; position: absolute; top: 50%; width: 6px; height: 6px; border: solid var(--accent); border-width: 0 0 1.6px 1.6px;
}
.cmp-handle span::before { left: 11px; transform: translateY(-50%) rotate(45deg); }
.cmp-handle span::after { right: 11px; transform: translateY(-50%) rotate(-135deg); }
.cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-range:focus-visible + .stage-top, .compare:has(.cmp-range:focus-visible) { outline: 2px solid var(--accent); outline-offset: 5px; }
.cmp-label {
  position: absolute; top: 64px; padding: 6px 9px; border: 1px solid var(--glass-line); border-radius: 4px;
  background: var(--glass); backdrop-filter: blur(10px); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; pointer-events: none;
}
.cmp-label-l { left: 18px; }
.cmp-label-r { right: 18px; color: var(--accent); }
.compare.holding .cmp-over, .compare.holding .cmp-handle { opacity: 0; }

/* ---------- Rail: the gates ---------- */
.rail-item .score { margin-left: auto; font: 400 26px / 1 'Instrument Serif', serif; font-variant-numeric: tabular-nums; color: var(--muted); }
.rail-item.selected .score { color: var(--accent); }
.rail-item:disabled .score { opacity: 0.5; }
.gap-card h3 { display: flex; align-items: baseline; gap: 10px; margin-top: 8px !important; font-size: 44px !important; font-variant-numeric: tabular-nums; }
.gap-card h3 small { font: 12px 'Instrument Sans', sans-serif; letter-spacing: 0; color: var(--muted); }
.card-type-s { margin: 0; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
#gap-chart { position: relative; margin-top: 12px; }
#gap-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
#gap-chart .axis { stroke: var(--rule); stroke-width: 1; }
#gap-chart .tick { fill: var(--muted); font: 10px 'Instrument Sans', sans-serif; font-variant-numeric: tabular-nums; }
#gap-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#gap-chart .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
#gap-chart .dot.sel { fill: var(--ink); }
#gap-chart .hit { fill: transparent; cursor: pointer; }
#gap-chart .tip {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); padding: 6px 8px; white-space: nowrap; pointer-events: none;
  border: 1px solid var(--glass-line); border-radius: 4px; background: var(--glass); font-size: 11px; color: var(--ink);
}

/* ---------- Five views strip ---------- */
.views { margin: 72px 0 96px; }
.section-head { max-width: 760px; margin-bottom: 26px; }
.section-head h2 { margin: 0; font: 400 clamp(34px, 3.6vw, 52px) / 1 'Instrument Serif', serif; letter-spacing: -0.02em; }
.section-head h2 em { font-style: normal; color: #4f7cff; }
.section-head h2 .miss { color: #ff5a4f; }
.section-lede { margin: 14px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.view-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.view-cell { margin: 0; padding: 12px; border: 1px solid var(--rule); background: var(--panel); }
.view-cell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #eee; }
.view-cell figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.view-cell figcaption b { font-weight: 400; color: var(--ink); text-transform: capitalize; }
.view-cell .num { font-variant-numeric: tabular-nums; }
.view-cell .pass { color: var(--accent); }
.view-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 90ch; }

@media (max-width: 1100px) {
  .stage.compare { max-height: none; }
  .view-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .view-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-label { top: 58px; }
  .shortcut-row span { display: none; }
}

/* ---------- 3D viewer ---------- */
.viewer-sec { margin: 0 0 96px; }
.section-head h2 em.ink { color: var(--ink); }
.viewer { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--rule); background: radial-gradient(120% 90% at 50% 35%, #2e2b28, var(--bg) 70%); touch-action: none; }
.viewer canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.viewer canvas:active { cursor: grabbing; }
.viewer-top { position: absolute; inset: 16px 18px auto; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.viewer-top > * { pointer-events: auto; }
.viewer-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 12px; color: var(--muted); }
@media (max-width: 800px) { .viewer { aspect-ratio: 4 / 5; } }

/* ---------- Step card: time + how it was made ---------- */
.step-card .step-time { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; font: 400 40px / 1 'Instrument Serif', serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.step-card .step-time small { font: 11px 'Instrument Sans', sans-serif; color: var(--muted); }
.step-card .step-team { margin: 10px 0 0; font-size: 12px; color: var(--ink); }
.step-card .step-how { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.step-card .step-total { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.step-card .step-total .step-time { font-size: 32px; }

/* ---------- Matrix: every step x every view ---------- */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--panel); scrollbar-width: thin; }
.matrix-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.matrix { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.matrix th, .matrix td { padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; text-align: left; }
.matrix thead th { font-size: 10px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.matrix thead th:first-child, .matrix tbody th { width: 150px; }
.matrix thead th:nth-child(2) { color: var(--accent); }
.matrix tbody tr { cursor: pointer; transition: background 0.2s; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover, .matrix tbody tr:focus-visible { background: color-mix(in srgb, var(--ink) 4%, transparent); outline: none; }
.matrix tbody tr.selected { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.matrix tbody tr.selected th strong, .matrix tbody tr.selected th .num { color: var(--accent); }
.matrix tbody th .num { display: block; font-size: 10px; color: var(--muted); }
.matrix tbody th strong { display: block; margin: 3px 0 4px; font: 400 20px / 1 'Instrument Serif', serif; color: var(--ink); }
.matrix tbody th small { font-size: 10px; color: var(--muted); }
.mcell { margin: 0; }
.mcell img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #eeeeee; }
.mcell.key img { outline: 1px solid var(--accent); outline-offset: -1px; }
.mcell.model figcaption { color: var(--ink); }
.mcell figcaption { margin-top: 6px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mcell figcaption b { font: 400 18px / 1 'Instrument Serif', serif; color: var(--ink); }
.mcell figcaption .pass { color: var(--accent); }

/* ---------- Step zero: three base meshes + reference views ---------- */
.bases, .attempt, .renders { margin: 72px 0 96px; }
.base-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.base-card { margin: 0; border: 1px solid var(--rule); background: var(--panel); }
.base-card img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: contain; background: #cdcac5; }
.base-card figcaption { padding: 14px 16px 16px; }
.base-card figcaption b { display: flex; align-items: center; gap: 8px; font: 400 22px / 1.1 'Instrument Serif', serif; color: var(--ink); }
.base-card figcaption span { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.base-card figcaption p { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.base-card.chosen { border-color: var(--accent); }
.base-card .tag { font: 10px 'Instrument Sans', sans-serif; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 3px 6px; }
.ref-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ref-strip figure, .attempt-grid figure { margin: 0; border: 1px solid var(--rule); background: var(--panel); padding: 10px; }
.ref-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #cbc9c5; }
.ref-strip figcaption, .attempt-grid figcaption { margin-top: 8px; font-size: 11px; color: var(--muted); }
.attempt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.attempt-grid img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #cbc9c5; }

/* ---------- Render gallery: columns keep each render's own aspect ---------- */
.render-grid { columns: 3; column-gap: 10px; }
.render-grid figure { margin: 0 0 10px; break-inside: avoid; border: 1px solid var(--rule); background: var(--panel); }
.render-grid img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .base-grid, .attempt-grid { grid-template-columns: 1fr; }
  .ref-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .render-grid { columns: 2; }
  .base-card img { aspect-ratio: 1; } .attempt-grid img { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .render-grid { columns: 1; } }