/* OpenWorldEngineer: the CAD Output panel of the trajectory viewer (assets/cadview.js). Builds on styles.css (tokens,
   .seg) and adds only cad- classes. The 3D colors are read from the --cad-* properties below at mount time and on every
   theme change, so they follow the site tokens. Truth is a light neutral grey; the output is the deviation map's
   neutral grey, with its difference from the truth drawn over it in red and blue where the part has difference data
   (hidden test parts, and dev parts once published), or coloured by its distance to the true surface (hidden test
   parts, by the map switch). */

.cad {
  container-type: inline-size;
  --cad-view: var(--bg);          /* 3D viewport background */
  --cad-truth: #C5C9CF;           /* true solid */
  --cad-out: var(--cad-dev-mid);  /* the trial's output solid where it has no distance colours */
  --cad-edge: var(--ink-2);       /* feature edges drawn on a solid */
  --cad-line: var(--ink-2);       /* the translucent truth's edges, drawn over the background */
  --cad-points: var(--muted);     /* scan points */
  --cad-h: 360px;                 /* height of the input stage and the 3D views */
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cad { --cad-truth: var(--line-on); --cad-edge: var(--bg); --cad-points: var(--ink-2); }
}
:root[data-theme="dark"] .cad { --cad-truth: var(--line-on); --cad-edge: var(--bg); --cad-points: var(--ink-2); }

/* Distance colour maps, shared with the Artifacts page (artifacts.html). Deviation: a diverging map, blue arm for missing
   material (output inside the true solid), orange-red arm for excess (outside it), neutral grey within the tolerance.
   Coverage: one violet hue from the same grey. Three steps per arm, from the tolerance (1) to the clamp (3); the JS
   interpolates them in OKLab. Each mode's steps were run through the dataviz palette validator against the 3D view
   background of that theme: every arm monotone in lightness with visible steps, the two arms apart at every step
   under protan/deutan simulation (ΔE ≥ 17) and in full colour (ΔE ≥ 19), step 1 apart from the grey (ΔE ≥ 15.9).
   Difference (parts with difference data, hidden and dev): excess (output − truth) red, missing (truth − output) blue,
   over the grey; validated the same way: in the lightness band, apart under protan simulation (ΔE ≥ 24.8) and from the
   grey (ΔE ≥ 9.3 dark, ≥ 25 light). */
.cad, .cad-cmp {
  --cad-dev-mid: #CACCD0;
  --cad-dev-neg-1: #72AAE9; --cad-dev-neg-2: #4687D8; --cad-dev-neg-3: #245BAB;
  --cad-dev-pos-1: #EF9369; --cad-dev-pos-2: #E25C26; --cad-dev-pos-3: #AF2E13;
  --cad-cov-1: #B793E0; --cad-cov-2: #9065D0; --cad-cov-3: #6735AD;
  --cad-cut: var(--ink-2);        /* faces cut open by the section plane */
  --cad-diff-exc: #D23A2C; --cad-diff-mis: #2F68D0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.cad, .cad-cmp) {
    --cad-dev-mid: #5E6165;
    --cad-dev-neg-1: #5185C7; --cad-dev-neg-2: #67A5EA; --cad-dev-neg-3: #9ECDF9;
    --cad-dev-pos-1: #C46446; --cad-dev-pos-2: #F5793A; --cad-dev-pos-3: #FFB578;
    --cad-cov-1: #956DC1; --cad-cov-2: #B689E7; --cad-cov-3: #D9B7F4;
    --cad-diff-exc: #E8503F; --cad-diff-mis: #4A86E8;
  }
}
:root[data-theme="dark"] :is(.cad, .cad-cmp) {
  --cad-dev-mid: #5E6165;
  --cad-dev-neg-1: #5185C7; --cad-dev-neg-2: #67A5EA; --cad-dev-neg-3: #9ECDF9;
  --cad-dev-pos-1: #C46446; --cad-dev-pos-2: #F5793A; --cad-dev-pos-3: #FFB578;
  --cad-cov-1: #956DC1; --cad-cov-2: #B689E7; --cad-cov-3: #D9B7F4;
  --cad-diff-exc: #E8503F; --cad-diff-mis: #4A86E8;
}

.cad-quiet { margin: 0; padding: 18px 0; font-size: var(--fs-ui); color: var(--muted); }
.cad-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header: the dev / hidden toggle (select runs), the Artifacts link, and the trial's mean score */
.cad-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.cad-head-main { min-width: 0; }
.cad-fixture { padding: 1px 8px; border-radius: 0; border: 1px dashed var(--rule-strong); color: var(--muted); font-size: 0.6875rem; font-weight: 560; }
.cad-trial { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 640; letter-spacing: -0.03em; line-height: 1.35; }
.cad-flag { padding: 2px 9px; border-radius: 0; background: var(--warn-wash); color: var(--warn-ink); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; }
.cad-mean { display: flex; align-items: center; gap: 10px; }
.cad-mean-v { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 660; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cad-mean-k { max-width: 19ch; font-size: 0.75rem; line-height: 1.3; color: var(--muted); }

.cad-setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }

/* part picker: one dropdown of the parts, sorted by the trial's scores, and the order switch (also on the Artifacts pages) */
.cad-parts { margin-top: 16px; }
.cad-partpick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; min-width: 0; }
.cad-field { display: grid; gap: 4px; min-width: 0; }
.cad-field-k { font-size: 0.75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cad-select { max-width: 100%; }
.cad-field-part { flex: 0 1 520px; }
.cad-part-select { width: 100%; }
.cad-part-hint { flex-basis: 100%; margin: 0; font-size: var(--fs-small); color: var(--muted); }

/* body: input pane and the comparison */
.cad-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 20px; align-items: start; margin-top: 18px; }
.cad-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cad-pane-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; min-height: 36px; }
.cad-pane-hl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.cad-pane-title { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.03em; }
.cad-sub { font-size: var(--fs-small); color: var(--muted); }
.cad-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cad-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--sheet); cursor: pointer;
  color: var(--ink-2); font-size: 0.8125rem; font-weight: 560; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.cad-tool:hover { border-color: var(--accent); color: var(--ink); }
.cad-tool svg { width: 14px; height: 14px; flex: none; }
.cad-seg { padding: 2px; }
.cad-seg button { padding: 5px 11px; font-size: 0.8125rem; }

/* stages and views */
.cad-stage, .cad-view {
  position: relative; height: var(--cad-h); min-width: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--cad-view);
}
.cad-views-box { position: relative; }
.cad-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cad-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.cad-canvas:active { cursor: grabbing; }
.cad-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.cad-tag {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border-radius: 0; background: color-mix(in srgb, var(--cad-view) 82%, transparent); pointer-events: none;
  font-size: 0.75rem; font-weight: 600; color: var(--ink-2);
}
.cad-tag .cad-sw:not(:first-child) { margin-left: 6px; }
.cad-sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 0; }
.cad-sw-truth { background: var(--cad-truth); }
.cad-sw-out { background: var(--cad-out); }
.cad-sw-ghost { border: 1.5px solid var(--cad-line); background: color-mix(in srgb, var(--cad-truth) 30%, transparent); }
.cad-sw-dev { width: 18px; background: linear-gradient(90deg, var(--cad-dev-neg-2) 30%, var(--cad-dev-mid) 30% 70%, var(--cad-dev-pos-2) 70%); }
.cad-sw-pts { width: 10px; background: radial-gradient(circle, var(--cad-points) 1.2px, transparent 1.6px) 0 0 / 5px 5px; }
.cad-loading {
  position: absolute; right: 10px; top: 10px; padding: 3px 10px; border-radius: 0;
  background: var(--sheet); border: 1px solid var(--rule); font-size: 0.75rem; color: var(--muted);
}

.cad-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 24px; text-align: center; pointer-events: none; }
.cad-empty::before { content: ""; width: 30px; height: 30px; margin: 0 auto 8px; border: 1.5px dashed var(--rule-strong); border-radius: 0; }
.cad-empty b { font-weight: 640; color: var(--ink); }
.cad-empty span { max-width: 34ch; margin-inline: auto; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.cad-empty.is-badge {
  inset: auto 8px 8px 8px; display: block; padding: 8px 12px; text-align: left;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.cad-empty.is-badge::before { display: none; }
.cad-empty.is-badge b { margin-right: 8px; }
.cad-empty.is-badge span { margin: 0; max-width: none; }

/* drawing sheets and views: fit to the pane, zoom and pan */
.cad-sheet { cursor: zoom-in; touch-action: pan-x pan-y; }
.cad-sheet.is-zoomed { cursor: grab; touch-action: none; }
.cad-sheet:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cad-sheet.is-svg { background: var(--sheet); }
.cad-sheet.is-img { background: #FFFFFF; }  /* the rendered views come on white paper */
.cad-zimg {
  position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain;
  transform-origin: 50% 50%; pointer-events: none; user-select: none; -webkit-user-select: none;
}
/* Line drawings invert in dark mode (ink lines on the dark sheet); rendered views stay as they are. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cad-sheet.is-svg .cad-zimg { filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .cad-sheet.is-svg .cad-zimg { filter: invert(1) hue-rotate(180deg); }
.cad-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.cad-zoom button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 0; background: var(--sheet); color: var(--ink-2);
}
.cad-zoom button:hover { border-color: var(--accent); color: var(--ink); }
.cad-zoom svg { width: 14px; height: 14px; }
.cad-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: thin; }
.cad-thumb {
  flex: none; display: grid; gap: 3px; width: 76px; padding: 3px 3px 4px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 0; background: var(--sheet); color: var(--muted); font-size: 0.6875rem; line-height: 1.2;
}
.cad-thumb img { display: block; width: 100%; height: 54px; object-fit: contain; border-radius: 0; background: #FFFFFF; }
.cad-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.cad-thumb:hover { border-color: var(--accent); }
.cad-thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.cad-files { margin: 0; padding-left: 20px; font-size: var(--fs-small); }

/* under the views: the part and its score, then the deviation colour scale */
.cad-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; font-size: var(--fs-small); color: var(--muted); }
.cad-part-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); line-height: 1.4; }
.cad-foot-l { display: flex; flex-basis: 100%; min-width: 0; }
.cad-foot-l:empty { display: none; }
.cad-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cad-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.cad-dims { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cad-score { display: inline-flex; align-items: baseline; gap: 8px; }
.cad-score-v { font-family: var(--font-mono); font-size: 1rem; font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the deviation legend: a bar from −clamp to +clamp with the grey tolerance band in the middle */
.cad-ramp { display: inline-flex; align-items: center; gap: 8px; }
.cad-ramp-k { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.cad-ramp-s { display: inline-grid; gap: 2px; width: clamp(130px, 30cqi, 220px); }
.cad-ramp-bar { display: block; height: 10px; border-radius: 0; }
.cad-ramp-t { display: flex; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the Difference view (also on the Artifacts pages): the map switch in the pane head, the swatches, the legend's
   volumes and thickness rule, and the readout of what is under the pointer */
.cad-viewseg { flex: none; }
.cad-sw-exc { background: var(--cad-diff-exc); }
.cad-sw-mis { background: var(--cad-diff-mis); }
.cad-tag .cad-sw.cad-sw-mis { margin-left: 2px; }
.cad-diffkey { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; color: var(--ink-2); }
.cad-diffkey-i { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.cad-diffkey-i > .cad-sw { align-self: center; }
.cad-diffkey-i b { font-weight: 640; color: var(--ink); }
.cad-diffkey-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cad-diffkey-rule { color: var(--muted); }
.cad-readout {
  position: absolute; left: 8px; bottom: 8px; display: inline-block; max-width: calc(100% - 16px);
  padding: 4px 10px; border-radius: 0; pointer-events: none; font-size: 0.75rem; line-height: 1.4; color: var(--muted);
  background: color-mix(in srgb, var(--cad-view) 82%, transparent);
}
.cad-readout:empty { display: none; }
.cad-readout.is-on { background: var(--sheet); border: 1px solid var(--rule); color: var(--ink-2); font-size: 0.8125rem; }
.cad-readout b { font-family: var(--font-mono); font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; }
.cad-view:has(> .cad-empty.is-badge:not([hidden])) .cad-readout { top: 38px; bottom: auto; }  /* a badge holds the bottom edge */
.cad-rerun { margin: 0; padding: 7px 11px; border-radius: var(--radius-sm); background: var(--warn-wash); color: var(--warn-ink); font-size: var(--fs-small); line-height: 1.45; }
.cad-note { margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

/* narrower panels: the input above the comparison, then the two views stacked */
@container (max-width: 820px) {
  .cad-body { grid-template-columns: minmax(0, 1fr); }
  .cad-input { --cad-h: 300px; }
}
@container (max-width: 540px) {
  .cad-body { --cad-h: 280px; }
  .cad-input { --cad-h: 250px; }
  .cad-views { grid-template-columns: minmax(0, 1fr); }
  .cad-head { align-items: flex-start; }
  .cad-mean-v { font-size: 1.25rem; }
  .cad-pane-head { align-items: flex-start; }
  .cad-tool { padding: 6px 9px; }
}