/* Compare, a step of the Digital Lab (this app's /cidx build). Loaded after the Lab's own theme.css, which gives
   every colour, the type, the stickers, the buttons and the dark/light roles. This file keeps layout only and
   names no colour: role tokens only (--text, --surface, --edge, ...), so the page changes with the Lab's one
   switch. The app's older token names are kept as aliases of the Lab's roles for the parts it shares with the
   standalone app (the checks panel, the Desk bar, the helper, the notices). */

html[data-theme] {
  --bg-primary: var(--bg); --bg-secondary: var(--surface); --bg-tertiary: var(--bg); --bg-elevated: var(--surface); --bg-surface: var(--surface);
  --glass-bg: var(--surface); --glass-bg-hover: var(--bg); --glass-border: var(--divider); --glass-border-hover: var(--control-edge); --glass-blur: 0px;
  --text-primary: var(--text); --text-secondary: var(--text); --text-tertiary: var(--text-dim); --text-disabled: var(--text-dim); --text-muted: var(--text-dim);
  --accent-emerald: var(--text); --accent-emerald-dim: var(--text-dim); --accent-blue: var(--text); --accent-blue-dim: var(--text-dim);
  --accent-magenta: var(--text); --accent-amber: var(--text); --accent-red: var(--danger); --accent-red-dim: var(--danger);
  --accent-emerald-glow: none; --accent-emerald-glow-strong: none; --accent-blue-glow: none; --accent-magenta-glow: none;
  --brand-1: var(--text); --brand-2: var(--text); --brand-3: var(--text); --brand-4: var(--text); --brand-5: var(--text); --brand-core: var(--text);
  --brand-accent: var(--text); --brand-accent-hover: var(--text); --brand-accent-solid: var(--accent); --brand-accent-solid-hover: var(--accent);
  --brand-on-accent: var(--on-accent); --brand-accent-soft: transparent; --brand-accent-border: var(--control-edge); --brand-selection: var(--c-lime);
  --ok: var(--text); --ok-soft: transparent; --danger-soft: transparent; --focus-ring-color: var(--focus);
  --font-display: var(--display); --font-mono: var(--mono); --font-brand: var(--display);
  --shadow-sm: none; --shadow-md: var(--pop-sm) var(--pop-sm) 0 var(--edge); --shadow-lg: var(--pop) var(--pop) 0 var(--edge); --shadow-xl: var(--pop-lg) var(--pop-lg) 0 var(--edge);
  --radius-sm: var(--r); --radius-md: var(--r); --radius-lg: var(--r-lg); --radius-xl: var(--r-lg); --radius-full: var(--pill);
}

html[data-theme] body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); }
[hidden] { display: none !important; }
.visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The way back: one quiet line above the header (the Lab's bar replaces it when a step is opened from the Lab). */
.lab-bar { padding: 6px max(16px, calc((100% - 1312px) / 2)) 0; }
.lab-bar-link {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px;
  color: var(--text-dim); font: 700 max(12px, 0.76rem)/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.lab-bar-link:hover { color: var(--text); text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em; }

/* The header: the step's tile and its name, the Lab's switch. */
.site-header {
  position: sticky; z-index: 20; top: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 4.65rem; padding: 0 max(16px, calc((100% - 1312px) / 2));
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 2.75rem; }
.wordmark strong { display: block; white-space: nowrap; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lab-main { min-height: 0; }

/* One column, as the Lab's guided steps. */
.cmp { width: min(46rem, 100% - 32px); margin: 0 auto; padding: 24px 0 72px; }
.cmp p { margin: 0; }
.cmp :is(ol, ul) { margin: 0; padding: 0; list-style: none; }
.cmp h1, .cmp h2, .cmp h3 { margin: 0; }

/* Your comparison: one quiet card. */
.cmp-context { margin: 0 0 22px; padding: 12px 16px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--surface); }
.cmp-context-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.cmp-context-line { margin: 2px 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.cmp-context-line strong { font-weight: 800; }
.cmp-context-state { color: var(--text-dim); font-size: 0.9rem; line-height: 1.45; }
.cmp-sep { color: var(--text-dim); }

/* The steps: numbered tabs. Done = solid, the one you are on = the picked sticker, later = dashed. */
.cmp-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 28px !important; scroll-margin-top: 90px; }
.cmp-steps button {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 48px; padding: 6px 8px;
  border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r);
  color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 700 0.9rem/1.2 var(--display); text-align: left; cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.cmp-steps .workflow-question-n { width: 1.7em; height: 1.7em; font-size: 0.82rem; transform: none; box-shadow: none; }
.cmp-steps button[data-state="done"] { color: var(--text-dim); box-shadow: none; }
.cmp-steps button[data-state="done"] .workflow-question-n { background: transparent; }
.cmp-steps button[data-state="later"] { border-style: dashed; box-shadow: none; color: var(--text-dim); }
.cmp-steps button[aria-current="step"] { border-color: var(--edge); color: var(--on-picked); background: var(--picked); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); font-weight: 800; }
.cmp-steps button[aria-current="step"] .workflow-question-n { border-color: var(--on-picked); color: var(--on-picked); background: transparent; }
@media (hover: hover) {
  .cmp-steps button:not([aria-current="step"]):hover { color: var(--text); transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge); }
}

/* A step: kicker and its "i", the question, one line, the fields, one lime action. */
.cmp-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.cmp-title { margin: 6px 0 10px !important; font: 800 clamp(2rem, 4.4vw, 3.1rem)/1.04 var(--display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.cmp-title:focus, .cmp-title:focus-visible { outline: none; }
.cmp-line { margin: 0 0 24px !important; color: var(--text-dim); font-size: 1.1rem; line-height: 1.45; }
.cmp-h2 { margin: 30px 0 10px !important; font: 800 1.3rem/1.2 var(--display); letter-spacing: -0.02em; }
.cmp-h3 { margin: 18px 0 8px !important; font: 800 1.05rem/1.25 var(--display); }
.cmp-hint { margin: 8px 0 0 !important; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
.cmp-plain { line-height: 1.5; }
.cmp-status { margin: 12px 0 0 !important; font-weight: 700; }
.cmp-alert { margin: 12px 0 0 !important; padding: 10px 14px; border: var(--ol) solid var(--danger); border-radius: var(--r); background: var(--surface); font-weight: 600; }

/* The "i": one tap away, never inline. */
.cmp-info { position: relative; }
.cmp-info > summary { list-style: none; }
.cmp-info > summary::-webkit-details-marker { display: none; }
.lab-info-open { display: grid; flex: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cmp-info-text {
  position: absolute; z-index: 5; right: 0; width: min(24rem, calc(100vw - 32px)); margin-top: 6px; padding: 14px 16px;
  border: var(--ol) solid var(--edge); border-radius: var(--r); color: var(--text); background: var(--surface);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge); font-size: 0.95rem; line-height: 1.5;
}
.cmp-info-text p + p { margin-top: 0.6rem !important; }
.cmp-info-text ol { padding-left: 1.2rem !important; list-style: decimal !important; }
.cmp-info-text li + li { margin-top: 0.3rem; }

/* Fields: the Lab's, drawn with its roles. */
.cmp-field { margin: 0 0 18px; min-width: 0; }
.cmp-field > label, .cmp-label { display: block; margin: 0 0 8px; font-weight: 800; font-size: 1rem; }
.cmp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), textarea, select) {
  display: block; width: 100%; min-height: 3rem; padding: 10px 14px;
  border: var(--ol) solid var(--control-edge); border-radius: var(--r);
  color: var(--text); background-color: var(--surface); box-shadow: var(--pop) var(--pop) 0 var(--edge);
  font: 600 1rem/1.4 var(--display);
}
.cmp textarea { min-height: 6rem; resize: vertical; }
.cmp :is(input, textarea)::placeholder { color: var(--text-dim); opacity: 1; }
.cmp select {
  appearance: none; padding-right: 44px;
  background:
    linear-gradient(45deg, transparent 50%, var(--text) 50%) right 22px center / 7px 7px no-repeat,
    linear-gradient(135deg, var(--text) 50%, transparent 50%) right 15px center / 7px 7px no-repeat,
    var(--surface);
}
.cmp-field--small > label, .cmp-field--small .cmp-label { font-size: 0.9rem; margin-bottom: 6px; }
.cmp-field--small :is(input, select) { min-height: 44px; padding-block: 6px; box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); }

/* A group: a heading word and its rows, a hairline under. */
.cmp-group { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.cmp-group > legend { padding: 0; margin: 0 0 10px; font-weight: 800; font-size: 1.05rem; }
.cmp-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp-group-head .cmp-hint { margin: 0 !important; }

/* Actions: back on the left, the one lime action on the right. */
.cmp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.cmp .primary-action, .cmp .quiet-action, .cmp .back-action { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 3rem; padding: 0 1.25rem; font-size: 1rem; cursor: pointer; text-decoration: none; }
.cmp .primary-action { padding: 0 24px; font-size: 1.05rem; }
.cmp .back-action { min-height: 44px; padding: 0 0.25rem; }
.cmp .lead-text { display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; padding: 0 0.35rem; font-size: 0.95rem; cursor: pointer; }
.cmp-add { margin-top: 4px; }
.cmp-remove { flex: none; }

/* Choices: chips that stay pressed (the Lab's answer chips: the picked one is the sticker). */
.cmp-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.cmp-choice {
  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-height: 44px; padding: 6px 16px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r);
  color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 700 0.98rem/1.2 var(--display); text-align: left; cursor: pointer;
  transition: transform var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.cmp-choice small { color: var(--text-dim); font-weight: 600; font-size: 0.86rem; line-height: 1.35; }
.cmp-choice[aria-pressed="true"] { border-color: var(--edge); color: var(--on-picked); background: var(--picked); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); font-weight: 800; }
.cmp-choice[aria-pressed="true"] small { color: var(--on-picked); }
.cmp-choice:disabled { border-style: dashed; color: var(--text-dim); box-shadow: none; cursor: not-allowed; }
@media (hover: hover) { .cmp-choice:not([aria-pressed="true"]):not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge); } }
.cmp-choices--wide { margin: 0 0 14px; }
.cmp-choices--stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmp-choices--stack .cmp-choice { padding: 10px 16px; }

/* Step 1: the parts. */
.cmp-parts { display: grid; gap: 10px; margin: 12px 0 12px !important; }
.cmp-parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; }
.cmp-parts input { min-height: 44px !important; padding-block: 6px !important; box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge) !important; }
.cmp-part-count { color: var(--text-dim); font-size: 0.9rem; white-space: nowrap; }

/* Step 2: one line per measure; the one being changed opens under its line. */
.cmp-mlist { margin: 0 0 16px !important; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--surface); }
.cmp-mlist > li + li { border-top: var(--ol-thin) solid var(--divider); }
.cmp-mrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 14px; }
.cmp-mrow .workflow-question-n { width: 1.8em; height: 1.8em; font-size: 0.85rem; transform: none; box-shadow: none; }
.cmp-mtext { flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.cmp-mtext strong { display: block; font-weight: 800; }
.cmp-mtext small { display: block; margin-top: 2px; color: var(--text-dim); font-size: 0.88rem; }
.cmp-mlist > li.open { background: var(--bg); }
.cmp-mlist > li.open:first-child { border-radius: calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0; }
.cmp-mlist > li.open:last-child { border-radius: 0 0 calc(var(--r) - 2px) calc(var(--r) - 2px); }
.cmp-medit { padding: 4px 16px 14px 16px; }
.cmp-medit-grid { display: grid; grid-template-columns: 9rem auto minmax(0, 1fr); gap: 0 16px; align-items: start; }
.cmp-medit .cmp-field { margin-bottom: 10px; }

/* Step 3: where the numbers come from. */
.cmp-panel { margin: 0 0 6px; padding: 16px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--surface); }
.cmp-panel > p + p { margin-top: 10px !important; }
.cmp-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.cmp-file { position: relative; }
.cmp-file:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.cmp-table-scroll { max-width: 100%; margin: 12px 0; overflow-x: auto; border: var(--ol-thin) solid var(--divider); border-radius: var(--r); }
.cmp-table { border-collapse: collapse; min-width: 100%; font-size: 0.92rem; }
.cmp-table :is(th, td) { padding: 6px 8px; border-bottom: var(--ol-thin) solid var(--divider); text-align: left; vertical-align: bottom; }
.cmp-table thead th { color: var(--text-dim); font: 700 0.82rem/1.25 var(--display); min-width: 7.5rem; }
.cmp-table thead th small { display: block; font-weight: 600; }
.cmp-table tbody th { min-width: 10rem; }
.cmp-table input { min-height: 44px !important; padding: 6px 10px !important; border-width: var(--ol-thin) !important; box-shadow: none !important; background-color: var(--bg) !important; font-variant-numeric: tabular-nums; }
.cmp-table tr:last-child :is(th, td) { border-bottom: 0; }

/* States by shape and a word (never a colour alone): solid = done or same, dashed = filled or moved, the picked
   sticker = a new leader, dotted = not counted. */
.cmp-state { display: inline-flex; align-items: center; flex: none; padding: 2px 10px; border-radius: var(--pill); font: 700 0.76rem/1.3 var(--display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.cmp-state[data-shape="solid"] { border: var(--ol-thin) solid var(--text); color: var(--text); }
.cmp-state[data-shape="dashed"] { border: var(--ol-thin) dashed var(--text); color: var(--text); }
.cmp-state[data-shape="dotted"] { border: var(--ol-thin) dotted var(--text-dim); color: var(--text-dim); }
.cmp-state[data-shape="picked"] { border: var(--ol-thin) solid var(--edge); color: var(--on-picked); background: var(--picked); }
.cmp-plain .cmp-state { margin-right: 6px; }
.cmp-filled { display: grid; gap: 0; margin: 12px 0 8px !important; }
.cmp-filled li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: var(--ol-thin) solid var(--divider); }
.cmp-filled li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.cmp-filled small { display: block; margin-top: 2px; color: var(--text-dim); font-size: 0.9rem; }
.cmp-notes { display: grid; gap: 6px; margin: 10px 0 0 !important; padding-left: 1.2rem !important; list-style: disc !important; color: var(--text); line-height: 1.5; }
.cmp-notes li::marker { color: var(--text-dim); }
.cmp-notes .cmp-error { font-weight: 700; text-decoration: underline 2px var(--danger); text-underline-offset: 0.25em; }

/* Step 4: weights as the Lab's sliders: a thick track, a round sticker thumb. */
.cmp-weigh { position: relative; }
.cmp-weight { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 3.4rem; align-items: center; gap: 4px 16px; padding: 4px 0; border-bottom: var(--ol-thin) solid var(--divider); }
.cmp-weight:last-child { border-bottom: 0; }
.cmp-weight > label { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cmp-weight > label small { display: block; color: var(--text-dim); font-weight: 600; font-size: 0.82rem; }
.cmp-share { font: 800 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.cmp-group--gap { margin-top: 26px; }
.cmp input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.cmp input[type="range"]::-webkit-slider-runnable-track { height: 12px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); background: linear-gradient(90deg, var(--text-dim) var(--fill, 0%), var(--bg) var(--fill, 0%)); }
.cmp input[type="range"]::-moz-range-track { height: 8px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); background: var(--bg); }
.cmp input[type="range"]::-moz-range-progress { height: 8px; border-radius: var(--pill); background: var(--text-dim); }
.cmp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border: var(--ol) solid var(--edge); border-radius: 50%; background: var(--picked); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); }
.cmp input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: var(--ol) solid var(--edge); border-radius: 50%; background: var(--picked); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); }
.cmp input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r); }
/* The order stays in sight under the header while the weights below it move. */
.cmp-order {
  position: sticky; z-index: 4; top: calc(4.65rem + 10px); margin: 0 0 22px; padding: 2px 16px 8px;
  border: var(--ol) solid var(--edge); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--pop) var(--pop) 0 var(--edge);
}
.cmp-order .cmp-h2 { margin: 10px 0 4px !important; font-size: 1.05rem; }
.cmp-order-list { display: grid; }
.cmp-order-list li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 0; border-bottom: var(--ol-thin) solid var(--divider); }
.cmp-order-list li:last-child { border-bottom: 0; }
.cmp-order-list .workflow-question-n { width: 1.8em; height: 1.8em; font-size: 0.85rem; transform: none; box-shadow: none; }
.cmp-order-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cmp-order-score { font: 800 1.1rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* Step 5: the test, its verdict and its grid. */
.cmp-run { margin: 6px 0 10px; }
.cmp-run .primary-action { margin-top: 6px; }
.cmp-verdict { margin: 10px 0 16px; padding: 14px 16px; border: var(--ol) solid var(--edge); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--pop) var(--pop) 0 var(--edge); }
.cmp-verdict--stale { border-style: dashed; box-shadow: none; }
.cmp-verdict-line { font-size: 1.2rem; line-height: 1.35; }
.cmp-grid { border-collapse: collapse; width: 100%; }
.cmp-grid :is(th, td) { padding: 8px 10px; border-bottom: var(--ol-thin) solid var(--divider); text-align: left; }
.cmp-grid thead th { color: var(--text-dim); font: 700 max(12px, 0.76rem)/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cmp-grid tbody th { font-weight: 700; overflow-wrap: break-word; hyphens: auto; }
.cmp-grid :is(td, thead th + th) { width: 7.5rem; }
.cmp-grid tr:last-child :is(th, td) { border-bottom: 0; }
.cmp-grid .cmp-state[data-shape="solid"] { border-color: var(--text-dim); color: var(--text-dim); }

/* Step 6: the ranking as stickers, the leader picked. */
.cmp-ranking { margin: 0 0 8px !important; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--surface); }
.cmp-ranking li { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.cmp-ranking li + li { border-top: var(--ol-thin) solid var(--divider); }
.cmp-ranking li.leader { margin: -2px -2px 6px; padding: 14px 16px; border: var(--ol) solid var(--edge); border-radius: var(--r); color: var(--on-picked); background: var(--picked); box-shadow: var(--pop) var(--pop) 0 var(--edge); }
.cmp-ranking li.leader + li { border-top: 0; }
.cmp-ranking .workflow-question-n { width: 1.8em; height: 1.8em; font-size: 0.85rem; transform: none; box-shadow: none; }
.cmp-ranking li.leader .workflow-question-n { width: 2em; height: 2em; border-color: var(--on-picked); color: var(--on-picked); background: transparent; }
.cmp-rank-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 13rem) 2.6rem; grid-template-areas: "name bar score" "meta bar score"; align-items: center; gap: 0 14px; }
.cmp-rank-name { grid-area: name; min-width: 0; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.cmp-rank-score { grid-area: score; font: 800 1.2rem/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.cmp-rank-meta { grid-area: meta; }
.cmp-ranking .cmp-bar { grid-area: bar; margin: 0; }
.cmp-ranking li.leader .cmp-rank-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name score" "bar bar" "meta meta"; }
.cmp-ranking li.leader .cmp-rank-name { font-size: 1.2rem; }
.cmp-ranking li.leader .cmp-rank-score { font-size: 2rem; }
.cmp-ranking li.leader .cmp-bar { margin: 8px 0 6px; }
.cmp-bar { height: 12px; margin: 8px 0 6px; overflow: hidden; border: var(--ol-thin) solid currentColor; border-radius: var(--pill); }
.cmp-bar span { display: block; height: 100%; background: currentColor; }
.cmp-ranking li:not(.leader) .cmp-bar { border-color: var(--control-edge); }
.cmp-ranking li:not(.leader) .cmp-bar span { background: var(--text-dim); }
.cmp-rank-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 700 max(12px, 0.76rem)/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.cmp-ranking li.leader .cmp-rank-meta { color: var(--on-picked); }

/* The chart: lines in the text's colour, the others dim, each with its own dash. */
.cmp-chart { width: 100%; margin: 6px 0 0; }
.cmp-chart svg { display: block; overflow: visible; }
.cmp-chart-grid { stroke: var(--divider); stroke-width: 2; }
.cmp-chart-tick { fill: var(--text-dim); font: 700 11px/1 var(--mono); }
.cmp-chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cmp-chart-line--other { stroke: var(--divider); stroke-width: 2; }
.cmp-chart-line--average { stroke: var(--text-dim); stroke-width: 2.5; stroke-dasharray: 7 6; }
.cmp-chart-line--focus { stroke: var(--text); stroke-width: 4.5; }
.cmp-chart-ring { fill: var(--bg); stroke: var(--text); stroke-width: 2.5; }
.cmp-chart-end { fill: var(--text); stroke: var(--bg); stroke-width: 3; }
.cmp-chart-pick { max-width: 24rem; margin: 0 0 8px; }
.cmp-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0 !important; color: var(--text-dim); font-size: 0.9rem; }
.cmp-key li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.cmp-key li:first-child { color: var(--text); font-weight: 700; }
.cmp-key svg { flex: none; overflow: visible; }
.cmp-ring { display: inline-block; width: 12px; height: 12px; border: var(--ol-thin) solid var(--text); border-radius: 50%; background: var(--bg); }

/* What to take back: a sticker card with its lines and the way back. */
.cmp-takeback { margin-top: 30px; padding: 4px 18px 18px; border: var(--ol) solid var(--edge); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--pop) var(--pop) 0 var(--edge); }
.cmp-takeback .cmp-h2 { margin-top: 14px !important; }
.cmp-takeback ul { display: grid; gap: 8px; padding-left: 1.2rem !important; list-style: disc !important; line-height: 1.5; }
.cmp-takeback li::marker { color: var(--text-dim); }
.cmp-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.cmp-next .primary-action { margin-left: auto; }

/* Optional depth: a text link that opens. */
.cmp-more { margin: 28px 0 0; }
.cmp-more > summary, .cmp-report > summary {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; list-style: none; cursor: pointer;
  color: var(--text); font-weight: 700; text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em;
}
.cmp-more > summary::-webkit-details-marker, .cmp-report > summary::-webkit-details-marker { display: none; }
.cmp-more > summary::after { content: "+"; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border: var(--ol-thin) solid var(--control-edge); border-radius: 50%; font-weight: 800; line-height: 1; text-decoration: none; }
.cmp-more[open] > summary::after { content: "\2013"; }
.cmp-more-body { margin-top: 12px; padding: 16px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--surface); }
.cmp-report p { margin: 6px 0 0 !important; line-height: 1.5; }

/* The checks panel (the app's own, in the Lab's roles): flat on the card, its controls the Lab's. */
.cmp-pilot { margin-top: 14px; height: min(36rem, 75vh); }
#compare .cmp-pilot .pilot-panel { border: var(--ol-thin) solid var(--divider); border-radius: var(--r); background: var(--bg); color: var(--text); font-family: var(--display); }
#compare .cmp-pilot :is(button, textarea, input) { font-family: var(--display); }
#compare .cmp-pilot :is(.workflow-card, .launcher-toggle, .suggestion-chip, .launcher-footer button, .example-browser button) {
  border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: none;
}
#compare .cmp-pilot :is(.send-btn, .stop-btn) { border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); }
#compare .cmp-pilot .pilot-input { border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); }
#compare .cmp-pilot :is(.engine-badge, .workflow-tag, .tool-call-badge) { border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); color: var(--text-dim); background: transparent; }
#compare .cmp-pilot .status-dot { background: var(--text-dim); box-shadow: none; }
#compare .cmp-pilot .status-dot.active { background: var(--text); }
#compare .cmp-pilot :is(.panel-title, b, strong, h3, h4) { color: var(--text); }
#compare .cmp-pilot :is(small, .panel-context, .workflow-description, .workflow-outcome, .launcher-footer span) { color: var(--text-dim); }
#compare .cmp-pilot :is(.verification-run, .finding-card) { border: var(--ol-thin) solid var(--divider); border-radius: var(--r); color: var(--text); background: var(--surface); }
#compare .cmp-pilot .verification-launcher { border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); background: var(--surface); box-shadow: none; backdrop-filter: none; }
#compare .cmp-pilot :is(.example-group button, .event-chip, .suggestion-chip:hover, .send-btn:hover:not(:disabled), .workflow-icon) { color: var(--text); background: var(--surface); }
#compare .cmp-pilot :is(.composer-notice, .tool-call-badge) { color: var(--text); }
#compare .cmp-pilot :is(.workflow-description, .workflow-outcome, .launcher-footer span, .example-group button span, .example-group > strong) { font-size: 0.8rem; line-height: 1.4; }
#compare .cmp-pilot .example-group button small { font-size: 0.72rem; }

/* The helper ("Help with this comparison"): a drawer, as the Lab's. Its Ask stays a quiet sticker; the step
   keeps the one lime. */
.cmp-helper { margin-top: 40px; }
#compare .lab-workbench { margin: 0; padding: 0; border: 0; background: transparent; }
#compare .lab-workbench > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px;
  border: var(--ol) solid var(--edge); border-radius: var(--r-lg); color: var(--text); background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge); font-weight: 800; font-size: 1.05rem; list-style: none; cursor: pointer;
}
#compare .lab-workbench > summary::-webkit-details-marker { display: none; }
#compare .lab-workbench > summary::after { content: "+"; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: var(--ol-thin) solid var(--control-edge); border-radius: 50%; font-weight: 800; }
#compare .lab-workbench[open] > summary { box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--edge); }
#compare .lab-workbench[open] > summary::after { content: "\2013"; }
#compare .lab-workbench > div { margin-top: 14px; }
#compare .lab-workbench pre { color: var(--text); font: 700 0.78rem/1.5 var(--mono); white-space: pre-wrap; }
#compare .lab-assist { color: var(--text); background: var(--surface); border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); font: 500 1rem/1.5 var(--display); }
#compare .lab-assist .la-eyebrow { color: var(--text-dim); font: 700 max(12px, 0.76rem)/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
#compare .lab-assist h3 { font: 800 1.25rem/1.2 var(--display); letter-spacing: -0.02em; }
#compare .lab-assist :is(input:not([type=checkbox]), textarea, select) { border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: none; font-weight: 600; }
#compare .lab-assist input[type=checkbox] { accent-color: var(--text); }
#compare .lab-assist button { border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font-weight: 800; }
#compare .lab-assist button:hover:not(:disabled) { border-color: var(--control-edge); }
#compare .lab-assist [type=submit], #compare .lab-assist button[type=submit]:is(:hover, :focus-visible):not(:disabled) { border-color: var(--edge); color: var(--text); background: var(--surface); }
#compare .lab-assist button:disabled { border-style: dashed; color: var(--text-dim); box-shadow: none; opacity: 1; }
#compare .lab-assist :is(details, article) { border-color: var(--divider); }
#compare .lab-assist :is(.la-status, .la-confirm) { border-color: var(--control-edge); }
#compare :is(.lab-assist, .lab-workspace) :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#compare .lab-workspace { --lw-blue: var(--text-dim); --lw-ink: var(--text); --lw-bg: var(--surface); border-color: var(--control-edge); border-top-color: var(--control-edge); border-radius: var(--r-lg); font-family: var(--display); }
#compare .lab-workspace :is(input, textarea, select) { border: var(--ol) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: none; }
#compare .lab-workspace :is(button, .lw-link) { border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font-family: var(--display); font-weight: 800; }
#compare .lab-workspace :is([data-lw-review], [data-lw-active]) { border-left-color: var(--picked); background: var(--bg); }
#compare .lab-workspace [data-lw-status] { color: var(--text-dim); }
#compare .lab-workspace :is(details, article, .lw-result-grid article, [data-lw-note-options] label) { border-color: var(--divider); background: transparent; }
#compare .lab-workspace :is(small, .lw-result-grid dt) { color: var(--text-dim); }
#compare .lab-workspace .lw-result-grid h5 { font-family: var(--display); }

/* Save to Desk (a Desk scene opened here): the Lab's card, its save a quiet sticker, its words by shape. */
#compare .desk-return {
  position: relative; top: auto; z-index: 1; width: 100%; margin: 0 0 22px; padding: 12px 16px;
  border: var(--ol) solid var(--edge); border-radius: var(--r); color: var(--text); background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge); backdrop-filter: none; font-family: var(--display);
}
#compare .desk-return strong { font-size: 1rem; font-weight: 800; }
#compare .desk-return span, #compare .desk-return[data-outcome] span { color: var(--text-dim); font-size: 0.92rem; }
#compare .desk-return[data-outcome="rejected"] span, #compare .desk-return[data-outcome="disconnected"] span, #compare .desk-return[data-outcome="error"] span { color: var(--text); font-weight: 700; text-decoration: underline 2px var(--danger); text-underline-offset: 0.25em; }
#compare .desk-return[data-outcome="recorded"] span { color: var(--text); font-weight: 700; }
#compare .desk-return button { min-height: 44px; padding: 0 18px; border: var(--ol) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 0.95rem/1.2 var(--display); }
#compare .desk-return button:disabled { border-style: dashed; color: var(--text-dim); box-shadow: none; opacity: 1; }

/* Notices: in the page, under the course bar, never floating over it. */
#compare .cmp-toasts .toast-container { position: static; display: grid; gap: 10px; margin: 0 0 16px; pointer-events: auto; }
#compare .cmp-toasts .toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 10px 16px; border: var(--ol) solid var(--edge); border-radius: var(--r); color: var(--text); background: var(--surface); box-shadow: none; font: 600 0.95rem/1.4 var(--display); animation: none; }
#compare .cmp-toasts .toast.error { border-color: var(--danger); }
#compare .cmp-toasts .toast-dismiss { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); }

/* The Lab's course bar (course-handoff.css draws it in an older look): the Lab's card, its "i" and its way back. */
#compare .course-task-guide {
  margin: 0 0 22px; padding: 4px 8px 4px 16px;
  border: var(--ol) solid var(--edge); border-radius: var(--r); color: var(--text); background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge); font: 500 0.95rem/1.45 var(--display);
}
#compare .course-task-guide__heading { background: transparent; }
#compare .course-task-guide__line strong { color: var(--text); font-weight: 800; }
#compare .course-task-guide__title, #compare .course-task-guide--lab .course-task-guide__line .course-task-guide__title { color: var(--text-dim); font-weight: 600; }
#compare .course-task-guide__back {
  min-height: 44px; padding: 0 0.6rem; border: 0; color: var(--text); background: transparent; box-shadow: none;
  font: 700 0.95rem/1.2 var(--display); text-decoration: none;
}
#compare .course-task-guide__back:hover { text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em; background: transparent; transform: none; box-shadow: none; }
#compare .course-task-guide__back:focus-visible, #compare .course-task-guide__more:focus-visible, #compare .course-task-guide__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; background: transparent; }
#compare .course-task-guide__more { color: var(--text); }
#compare .course-task-guide__more > span {
  width: 32px; height: 32px; border: var(--ol-thin) solid var(--control-edge); color: var(--text); background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 1rem/1 var(--display); font-style: normal;
}
#compare .course-task-guide__more[aria-expanded="true"] > span { border-color: var(--edge); color: var(--on-picked); background: var(--picked); }
#compare .course-task-guide__body, #compare .course-task-guide--lab .course-task-guide__body { border-top: var(--ol-thin) solid var(--divider); color: var(--text); }
#compare :is(.course-task-guide__detail, .course-task-guide__count, .course-task-guide__audience, .course-task-guide__label) { color: var(--text-dim); font-size: 0.9rem; }
#compare :is(.course-task-guide__testing, .course-task-guide__note, .course-task-guide--lab .course-task-guide__note, .course-task-guide__notes label) { color: var(--text); font-size: 0.95rem; }
#compare .course-task-guide__steps { padding-left: 20px; list-style: decimal; }
#compare .course-task-guide__status { color: var(--text); font-weight: 700; }
#compare .course-task-guide__notes summary, #compare .course-task-guide__toggle { color: var(--text); background: transparent; border-color: var(--control-edge); }
#compare .course-task-guide textarea { border: var(--ol-thin) solid var(--control-edge); border-radius: var(--r); color: var(--text); background: var(--bg); font: 600 0.95rem/1.4 var(--display); }
#compare .course-task-guide a:not(.course-task-guide__back) { color: var(--text); }

/* A phone: the tabs keep their numbers and words, three to a row; rows stack. */
@media (max-width: 639px) {
  .site-header { min-height: 62px; }
  .cmp { padding-top: 16px; }
  .cmp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
  .cmp-steps button { min-height: 44px; padding: 4px 6px; font-size: 0.86rem; }
  .cmp-medit-grid { grid-template-columns: 1fr auto; }
  .cmp-medit-grid > :nth-child(3) { grid-column: 1 / -1; }
  .cmp-weight { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label share" "range range"; padding: 8px 0 2px; }
  .cmp-weight > label { grid-area: label; }
  .cmp-weight > .cmp-share { grid-area: share; }
  .cmp-weight > input { grid-area: range; }
  .cmp-order { top: 70px; padding-bottom: 6px; }
  .cmp-order-list li:nth-child(n + 4) { display: none; }
  .cmp-rank-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name score" "bar bar" "meta meta"; }
  .cmp-ranking .cmp-bar { margin: 6px 0 4px; }
  .cmp-choices--stack { grid-template-columns: 1fr; }
  .cmp-actions { flex-wrap: nowrap; }
  .cmp-actions .primary-action, .cmp-actions .quiet-action { flex: 1 1 auto; padding: 0 16px; }
  .cmp-next .primary-action { flex: 1 1 100%; margin-left: 0; }
  .cmp-parts li { grid-template-columns: minmax(0, 1fr) auto; }
  .cmp-parts .cmp-part-count { grid-row: 2; }
  .cmp-rank-score { font-size: 1.3rem; }
  .cmp-grid :is(th, td) { padding: 8px 6px; }
  .cmp-grid :is(td, thead th + th) { width: 6.2rem; }
  .cmp-grid tbody th { font-size: 0.92rem; }
}
@media (max-width: 374px) {
  .cmp-steps button { gap: 4px; padding: 4px; font-size: 0.8rem; }
  .cmp-medit-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-steps button, .cmp-choice { transition: none; transform: none !important; }
  html { scroll-behavior: auto; }
}