/* OpenWorldEngineer: the three CAD Artifacts pages (assets/artifacts.js). Builds on styles.css (tokens, .card, .seg,
   .select) and cadview.css (the --cad-* colour tokens, the part picker, tools, stages, tags, legend); adds only cad-
   classes. */

.cad-cmp {
  container-type: inline-size;
  --cad-view: var(--bg); --cad-truth: #C5C9CF; --cad-out: var(--cad-dev-mid);  /* output grey where it has no distance colours */
  --cad-edge: var(--ink-2); --cad-points: var(--muted);
  --cad-vp-h: clamp(420px, calc(100svh - 260px), 760px);
  display: grid; gap: 16px; min-width: 0; color: var(--ink); font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cad-cmp { --cad-truth: var(--line-on); --cad-edge: var(--bg); --cad-points: var(--ink-2); }
}
:root[data-theme="dark"] .cad-cmp { --cad-truth: var(--line-on); --cad-edge: var(--bg); --cad-points: var(--ink-2); }
.cad-art-head p { max-width: 82ch; }

/* the panel: run picker, viewer */
.cad-art-panel { display: grid; gap: 16px; min-width: 0; }
.cad-art-none { margin: 8px 0 0; }

/* run picker: parts set, model and run, then whose run it is and its reward, then the part dropdown (cadview.css) */
.cad-cmp-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 18px 18px; min-width: 0; }
.cad-cmp-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.cad-field-run { min-width: 0; flex: 0 1 auto; }
.cad-run-a { color: var(--muted); font-weight: 500; }
.cad-runseg.is-attempts { flex-wrap: wrap; }
.cad-runseg.is-attempts button { display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 46px; padding: 4px 8px; line-height: 1.15; }
.cad-run-n { font-weight: 640; }
.cad-runseg.is-attempts .cad-run-a { font-family: var(--font-mono); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.cad-runseg button.is-nodata { color: var(--muted); background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--rule-strong) 55%, transparent) 5px 6px); }
.cad-runseg button.is-nodata[aria-checked="true"] { color: var(--ink-2); }
.cad-runseg button:disabled { cursor: default; opacity: 0.6; }
.cad-cmp-trial { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding-top: 14px; border-top: 1px solid var(--rule); }
.cad-cmp-trial .cad-trial { margin: 0; }
.cad-reward-note { margin: -4px 0 0; font-size: var(--fs-small); color: var(--muted); }
.cad-cmp-main > .cad-reward-note { margin: 0; padding: 0 2px; }
.cad-cmp-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.cad-cmp-parts { padding-top: 14px; border-top: 1px solid var(--rule); }

/* the viewer card: truth and output side by side, the legend and the part's score; the input beside (below when narrow) */
.cad-cmp-viewer { display: flex; flex-direction: column; min-width: 0; padding: 12px; }
.cad-cmp-body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.6fr); grid-template-areas: "in main"; gap: 12px 16px; min-width: 0; }
.cad-cmp-main { grid-area: main; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cad-cmp-main > .cad-pane-head > .cad-tools { margin-left: auto; }
.cad-cmp-input { grid-area: in; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cad-cmp-input .cad-pane-title { font-size: 0.9375rem; }
.cad-cmp-input .cad-stage { height: auto; aspect-ratio: 4 / 3.4; }
.cad-cmp-vp {
  position: relative; height: var(--cad-vp-h); min-width: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--cad-view);
}
.cad-cmp-split { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; pointer-events: none; background: var(--rule); }
.cad-tag-b { left: calc(50% + 8px); }
.cad-cmp-vp.is-stacked .cad-cmp-split { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
.cad-cmp-vp.is-stacked .cad-tag-b { left: 8px; top: calc(50% + 8px); }
/* the readout (cadview.css) under the output half; under its tag while a badge holds the bottom edge */
.cad-cmp-vp:not(.is-stacked) .cad-readout { left: calc(50% + 8px); max-width: calc(50% - 16px); }
.cad-cmp-vp:has(> .cad-empty.is-badge:not([hidden])) .cad-readout { top: 40px; bottom: auto; }
.cad-cmp-vp.is-stacked:has(> .cad-empty.is-badge:not([hidden])) .cad-readout { top: calc(50% + 40px); }

.cad-cmp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 2px 2px 0; font-size: var(--fs-small); color: var(--muted); }
.cad-cmp-foot-r { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 14px; min-width: 0; margin-left: auto; text-align: right; }
.cad-cmp-foot-r .cad-part-name { flex-basis: 100%; }
.cad-cmp-legend .cad-ramp-s { width: clamp(160px, 26cqi, 280px); }

/* the Difference view's switch, swatches, legend and readout are shared with the Output panel (cadview.css) */

/* full screen: the card fills the screen and the viewport takes what is left */
.cad-cmp-viewer:fullscreen { padding: 14px; border-radius: 0; overflow: auto; background: var(--sheet); }
/* the fixed overlay where the Fullscreen API is missing (iPhone Safari) or refuses: opaque, since styles.css makes
   .card transparent, and above the sticky site header */
.cad-cmp-viewer.is-max { position: fixed; inset: 0; z-index: 1000; padding: 12px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border: 0; border-radius: 0; overflow: auto; background: var(--sheet); }
.cad-cmp-maxed, .cad-cmp-maxed body { overflow: hidden; }
.cad-cmp-viewer:is(:fullscreen, .is-max) .cad-cmp-body { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.cad-cmp-viewer:is(:fullscreen, .is-max) .cad-cmp-vp { flex: 1 1 auto; height: auto; min-height: 320px; }

/* narrower: the input under the viewer (left out in full screen, which is for the solids), shorter views */
@container (max-width: 860px) {
  .cad-cmp-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "in"; }
  .cad-cmp-input .cad-stage { aspect-ratio: auto; height: 260px; }
  .cad-cmp-viewer:is(:fullscreen, .is-max) .cad-cmp-input { display: none; }
}
@container (max-width: 560px) {
  .cad-cmp-vp { height: clamp(340px, 62svh, 520px); }
  .cad-cmp-pick { padding: 14px; }
  .cad-cmp-row > .cad-field { flex: 1 1 140px; }
  .cad-cmp-row .select { width: 100%; }
  .cad-cmp-viewer { padding: 10px; }
  .cad-cmp-row > .cad-field:first-child { flex-basis: 100%; }
  .cad-cmp-row > .cad-field:first-child .seg { display: flex; }
  .cad-cmp-row > .cad-field:first-child .seg button { flex: 1; white-space: nowrap; }
  .cad-cmp-row > .cad-field-run { flex-basis: 100%; }
  .cad-runseg { display: flex; }
  .cad-runseg button { flex: 1; white-space: nowrap; }
  .cad-runseg.is-attempts button { flex: 1 1 calc(25% - 2px); }
  .cad-cmp-pick .seg button { padding-inline: 8px; letter-spacing: 0.02em; }  /* two uppercase labels fit a phone */
  .cad-tool-t { display: none; }
  .cad-cmp-main .cad-tools .cad-tool { padding-inline: 9px; }
  .cad-mean-v { font-size: 1.25rem; }
  .cad-cmp-stats { gap: 10px 16px; }
  .cad-cmp-foot-r { justify-content: flex-start; margin-left: 0; text-align: left; }
  .cad-viewseg { order: -1; }
}

/* a task page's frame (styles.css pins the viewport height there, since svh follows the frame): a fixed height on a
   phone too */
@container (max-width: 560px) {
  .embed .cad-cmp-vp { height: 520px; }
}