/* ============================================================================
   SPEC COCKPIT — assembly builder, computed-results-first
   The functional results lead: a hairline-tiled band of big Light numbers with
   their targets/limits is the hero; the 3D assembly sits below as verification,
   flanked by the bill of materials (left) and targets & checks (right). Full
   height, no page scroll; each pane scrolls on its own. Token-driven so light &
   dark theme come free. Shared vocabulary (.st .num .muted) in ../../_shared/base.css.
   ========================================================================== */

/* Steel is the tool's material, not UI chrome — fixed neutrals that read on
   both the light and the dark canvas. Everything else is a --sds-* token. */
:root {
  --steel-1: #eef0f2; --steel-2: #d2d6dc; --steel-3: #aab0b8; --steel-4: #7c828b; --steel-5: #494d54;
}

.app { display: grid; grid-template-columns: 232px 1fr; height: calc(100vh - 34px); }
h1, h2, h3 { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-regular); color: var(--sds-color-text); margin: 0; }

/* ---- Nav rail ----------------------------------------------------------- */
.rail {
  display: flex; flex-direction: column; gap: var(--sds-space-700);
  padding: var(--sds-space-600) var(--sds-space-400);
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: var(--sds-space-300); --sds-logo-height: 22px; }
.product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }

/* ---- Main column -------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; height: calc(100vh - 34px); }

/* identity / save bar */
.idbar {
  display: flex; align-items: center; gap: var(--sds-space-500);
  padding: var(--sds-space-300) var(--sds-space-500);
  border-bottom: 1px solid var(--sds-color-border);
  flex: none;
}
.idbar-l { display: flex; align-items: center; gap: var(--sds-space-400); min-width: 0; }
.iid { font-weight: var(--sds-font-weight-bold); font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.iname { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.i-type { width: 168px; }
.idactions { margin-left: auto; display: flex; align-items: center; gap: var(--sds-space-300); flex: none; }
.recompute { display: inline-flex; align-items: center; gap: var(--sds-space-200); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.recompute .rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sds-color-success); flex: none; }

/* ---- COMPUTED RESULTS — the hairline-tiled hero band -------------------- */
.vitals {
  flex: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px;
  background: var(--sds-color-border);
  border-bottom: 1px solid var(--sds-color-border);
}
.vital {
  display: flex; flex-direction: column; gap: var(--sds-space-300);
  padding: var(--sds-space-500) var(--sds-space-500) var(--sds-space-400);
  background: var(--sds-color-bg);
}
.v-num {
  font-family: var(--sds-font-family-headline);
  font-weight: 300;                       /* expressive numbers want Light; no token yet */
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.v-u { margin-left: 4px; font-size: .44em; color: var(--sds-color-text-muted); }
.v-lbl { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
.v-lbl .num { margin-right: 6px; color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); }
.v-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sds-space-200) var(--sds-space-300); }
.v-sub { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.v-meta--bar { flex-direction: column; align-items: stretch; gap: var(--sds-space-200); }
/* neutral limit meter (token-driven micro data-viz, not an orange progress bar) */
.limitbar { inline-size: 100%; block-size: 5px; border-radius: var(--sds-radius-pill); background: var(--sds-color-surface-strong); overflow: hidden; }
.limitbar-fill { display: block; block-size: 100%; border-radius: inherit; background: var(--sds-color-text); }

/* ---- body: BOM · canvas · checks ---------------------------------------- */
.split { flex: 1; display: grid; grid-template-columns: 272px 1fr 360px; min-height: 0; }

.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sds-space-300); margin-bottom: var(--sds-space-300); }
.panel-head h2 { font-size: var(--sds-type-headline-6-size); }
.ph-meta { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }

/* ===== left: bill of materials ===== */
.bom {
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  padding: var(--sds-space-500) var(--sds-space-400);
  overflow: auto; min-height: 0;
}
.bom-flow { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sds-space-400); font-size: var(--sds-type-footnote-size); }
.bom-flow sds-icon { color: var(--sds-color-text-muted); }
.bom-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sds-space-200); }
.bom-row {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-300);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m);
  background: var(--sds-color-bg);
}
.bom-row .bn { width: 18px; flex: none; text-align: center; font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-bold); }
.bom-row .tn {
  width: 36px; height: 28px; flex: none; border-radius: var(--sds-radius-s);
  border: 1px solid var(--sds-color-border);
  background:
    linear-gradient(180deg, var(--steel-1), var(--steel-3) 70%, var(--steel-4)) padding-box;
}
.bom-row.edge .tn { background: linear-gradient(180deg, #f0dcab, var(--sds-color-gold) 75%); }
.bom-row .bm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.bom-row .bm b { font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bom-row .bm span { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bom-row sds-button { flex: none; }
.bom-row.active { border-color: var(--sds-color-border-strong); background: var(--sds-color-surface); box-shadow: inset 2px 0 0 var(--sds-color-text); }
.bom-foot { margin: var(--sds-space-400) 0 0; font-size: var(--sds-type-footnote-size); }

/* ===== centre: 3D verification canvas ===== */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--sds-color-border); }
.stage-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sds-space-400);
  padding: var(--sds-space-300) var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border); flex: none;
}
.stage-cap { font-size: var(--sds-type-body-small-size); }
.stage-tools { display: flex; align-items: center; gap: var(--sds-space-200); }

.canvas {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  display: grid; place-items: center; padding: var(--sds-space-600);
  background: radial-gradient(120% 100% at 50% 12%, var(--sds-color-surface), var(--sds-color-bg) 70%);
}
.scene { position: relative; width: min(100%, 660px); height: min(100%, 320px); }

/* the assembled tool, coaxial, machine side (left) -> cutting edge (right) */
.asm { position: absolute; inset-inline: 0; top: 46%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; z-index: 2; }
.seg {
  position: relative; flex: none;
  background: linear-gradient(180deg, var(--steel-1) 0%, var(--steel-2) 16%, var(--steel-3) 46%, var(--steel-4) 74%, var(--steel-5) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 7px rgba(0,0,0,.22);
}
.seg::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.26)); }
.s-iface  { width: 80px; height: 92px; clip-path: polygon(13% 0,100% 0,100% 100%,13% 100%,0 76%,0 24%); }
.s-adapt  { width: 116px; height: 74px; }
.s-holder { width: 92px; height: 86px; }
.s-holder::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.09) 7px 9px); }
.s-body   { width: 146px; height: 52px; clip-path: polygon(0 0,100% 14%,100% 86%,0 100%); }
.s-edge   { width: 38px; height: 38px; background: linear-gradient(180deg, #f0dcab, var(--sds-color-gold) 55%, #b07e16); clip-path: polygon(0 0,64% 0,100% 36%,100% 64%,64% 100%,0 100%); }
.s-edge::after { display: none; }
.seg.sel { z-index: 3; box-shadow: 0 0 0 2px var(--sds-color-text), 0 12px 22px -10px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 7px rgba(0,0,0,.22); }
.asm:has(.sel) .seg:not(.sel) { opacity: .66; }
.seg-cap {
  position: absolute; inset-block-end: calc(100% + 14px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--sds-type-footnote-size); font-weight: var(--sds-font-weight-bold); color: var(--sds-color-text);
}
.seg-cap::after { content: ""; position: absolute; top: calc(100% + 2px); left: 50%; width: 1px; height: 11px; background: var(--sds-color-border-strong); }

/* couplings — matched = success dot (feedback) */
.join { position: relative; width: 7px; height: 17px; flex: none; align-self: center; z-index: 3; border-radius: 2px; margin: 0 -1px; }
.join.ok { background: var(--sds-color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sds-color-success) 22%, transparent); }

/* neutral annotations — gauge line, axis, the headline dimension */
.axis { position: absolute; inset-inline: 4%; top: 46%; border-top: 1px dashed var(--sds-color-border-strong); opacity: .7; z-index: 1; }
.gaugeplane { position: absolute; left: 8%; top: 14%; bottom: 26%; border-left: 1.5px dashed var(--sds-color-text-muted); z-index: 2; }
.gaugeplane span { position: absolute; top: -20px; left: -6px; font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); white-space: nowrap; }
.gaugedim { position: absolute; left: 8%; right: 12%; bottom: 14%; height: 0; border-top: 1.5px solid var(--sds-color-text); z-index: 3; }
.gaugedim::before, .gaugedim::after { content: ""; position: absolute; top: -7px; width: 1.5px; height: 14px; background: var(--sds-color-text); }
.gaugedim::before { left: 0; } .gaugedim::after { right: 0; }
.gaugedim span {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--sds-type-footnote-size); font-weight: var(--sds-font-weight-bold); color: var(--sds-color-text);
  background: var(--sds-color-bg); padding: 2px 8px; border-radius: var(--sds-radius-s);
}
.gizmo { position: absolute; left: 4px; bottom: 0; width: 44px; height: 44px; z-index: 4; opacity: .8; }
.gizmo i { position: absolute; left: 8px; bottom: 8px; height: 2px; border-radius: 2px; transform-origin: left center; background: var(--sds-color-text-muted); }
.gizmo .gx { width: 22px; } .gizmo .gy { width: 22px; transform: rotate(-90deg); } .gizmo .gz { width: 16px; transform: rotate(-34deg); opacity: .55; }
.gizmo b { position: absolute; right: 0; top: 0; font-size: 10px; color: var(--sds-color-text-muted); }

/* ===== right: targets & checks ===== */
.checks { background: var(--sds-color-bg); padding: var(--sds-space-500) var(--sds-space-400); overflow: auto; min-height: 0; }
.check-list { list-style: none; margin: 0 0 var(--sds-space-500); padding: 0; display: flex; flex-direction: column; }
.check {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-300) 0; border-bottom: 1px solid var(--sds-color-border);
  font-size: var(--sds-type-body-small-size);
}
.check .st { flex: none; }
.check .ck-l { flex: 1; min-width: 0; }
.check b { font-weight: var(--sds-font-weight-bold); white-space: nowrap; }
.check.fail b { color: var(--sds-color-error); }

sds-divider { display: block; margin: var(--sds-space-200) 0 var(--sds-space-500); }

.warn-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sds-space-300); margin-bottom: var(--sds-space-400); }
.warn-head h3 { font-size: var(--sds-type-headline-6-size); }

.warn { display: flex; gap: var(--sds-space-300); margin-bottom: var(--sds-space-300); padding: var(--sds-space-400); border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m); background: var(--sds-color-surface); }
.warn .w-bar { width: 3px; flex: none; border-radius: var(--sds-radius-pill); background: var(--sds-color-warning); }
.warn .w-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sds-space-200); }
.w-t { margin: 0; font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); }
.w-d { margin: 0; font-size: var(--sds-type-footnote-size); line-height: 1.45; }
.warn sds-button { align-self: flex-start; margin-top: var(--sds-space-100); }
.checks-foot { margin: var(--sds-space-400) 0 0; font-size: var(--sds-type-footnote-size); line-height: 1.5; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  .split { grid-template-columns: 240px 1fr; }
  .checks { grid-column: 1 / -1; border-top: 1px solid var(--sds-color-border); }
  .stage { border-right: 0; }
}
@media (max-width: 900px) {
  .app { height: auto; grid-template-columns: 1fr; }
  .rail { flex-direction: row; align-items: center; gap: var(--sds-space-600); overflow-x: auto; }
  .main { height: auto; }
  .split { grid-template-columns: 1fr; }
  .bom { border-right: 0; border-bottom: 1px solid var(--sds-color-border); }
  .canvas { min-height: 340px; }
  .idbar { flex-wrap: wrap; }
  .idactions { margin-left: 0; }
}