/* ============================================================
   WIZARD PRIMITIVES STYLES — Decision Inputs
   Companion to wizard-primitives.jsx + sensitivity-grid.jsx.
   Tokens only (tokens.css). Single amber accent, density modes,
   light/dark inherited. No hard-coded hex.
   ============================================================ */

/* ---------- WizardNav / Stepper ---------- */
.wz-nav { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.wz-nav__step { display: flex; align-items: center; flex: 1; min-width: 0; }
.wz-nav__btn {
  display: flex; align-items: center; gap: var(--space-3);
  background: transparent; border: none; cursor: pointer;
  padding: var(--space-2) var(--space-2); min-width: 0; width: 100%;
  font: inherit; color: var(--ink-tertiary); text-align: left;
  border-radius: var(--radius-md);
  transition: color var(--dur-state) var(--ease-enter);
}
.wz-nav__btn:disabled { cursor: not-allowed; }
.wz-nav__btn:hover:not(:disabled) { color: var(--ink-primary); }
.wz-nav__num {
  flex-shrink: 0; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-default); background: var(--surface-raised);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-tertiary);
  transition: background var(--dur-state) var(--ease-enter), border-color var(--dur-state) var(--ease-enter);
}
.wz-nav__label { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.wz-nav__kicker { letter-spacing: 0.06em; text-transform: uppercase; line-height: 14px; }
.wz-nav__title { font-size: 14px; font-weight: 600; color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-nav__step.is-active .wz-nav__title { color: var(--ink-primary); }
.wz-nav__step.is-active .wz-nav__num { background: var(--ink-primary); color: var(--surface-raised); border-color: var(--ink-primary); }
.wz-nav__step.is-done .wz-nav__num { background: var(--accent-primary); color: #fff; border-color: var(--accent-primary); }
[data-theme="dark"] .wz-nav__step.is-done .wz-nav__num { color: var(--surface-canvas); }
.wz-nav__step.is-done .wz-nav__title { color: var(--ink-secondary); }
.wz-nav__rule { flex: 1; height: 1px; background: var(--line-default); min-width: 12px; margin: 0 var(--space-1); }
.wz-nav__step.is-done .wz-nav__rule { background: var(--accent-primary); opacity: 0.5; }
.wz-nav--compact .wz-nav__num { width: 22px; height: 22px; font-size: 11px; }
.wz-nav--compact .wz-nav__title { font-size: 12px; }
.wz-nav--compact .wz-nav__btn { gap: var(--space-2); padding: var(--space-1); }

/* ---------- FileDropzone ---------- */
.wz-drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-7) var(--space-5);
  border: 1.5px dashed var(--line-default); border-radius: var(--radius-lg);
  background: var(--surface-sunk); color: var(--ink-secondary);
  cursor: pointer; text-align: center;
  transition: border-color var(--dur-state) var(--ease-enter), background var(--dur-state) var(--ease-enter);
}
.wz-drop:hover, .wz-drop.is-over { border-color: var(--accent-primary); background: var(--accent-primary-soft); }
.wz-drop.is-over { color: var(--ink-primary); }
.wz-drop__icon { color: var(--accent-primary); }
.wz-drop__title { margin: 0; font-weight: 500; color: var(--ink-primary); }
.wz-drop__hint { margin: 0; }
.wz-drop--compact { padding: var(--space-5) var(--space-4); }

/* ---------- MappingTable ---------- */
.wz-map { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; }
.wz-map__head, .wz-map__row {
  display: grid; grid-template-columns: 1fr 24px 1.2fr; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}
.wz-map__head { background: var(--surface-sunk); border-bottom: 1px solid var(--line-soft); }
.wz-map__head .t-meta { text-transform: uppercase; letter-spacing: 0.04em; }
.wz-map__row { border-bottom: 1px solid var(--line-soft); }
.wz-map__row:last-child { border-bottom: none; }
.wz-map__rawcell { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.wz-map__raw { color: var(--ink-primary); background: var(--surface-sunk); padding: 2px var(--space-2); border-radius: var(--radius-sm); justify-self: start; }
.wz-map__type { flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--accent-data); background: var(--accent-data-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1px var(--space-2); white-space: nowrap; }
.wz-map__arrow { color: var(--ink-tertiary); text-align: center; }
.wz-map__select, .sg-shelf__select {
  background: var(--surface-canvas); border: 1px solid var(--line-default);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
  color: var(--ink-primary); font: inherit; font-size: 13px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' stroke='%237C766C' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right var(--space-2) center; padding-right: var(--space-6);
}
.wz-map__select:focus, .sg-shelf__select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---------- MiniComparisonChart ---------- */
.wz-mini {
  margin: 0; padding: var(--space-3); background: var(--surface-raised);
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.wz-mini__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.wz-mini__legend { display: flex; gap: var(--space-2); }
.wz-mini__key { font-size: 10px; display: inline-flex; align-items: center; gap: 3px; color: var(--ink-tertiary); }
.wz-mini__key::before { content: ""; width: 10px; height: 2px; border-radius: 1px; display: inline-block; }
.wz-mini__key--actual::before { background: var(--accent-primary); }
.wz-mini__key--plan::before { background: var(--accent-data); }
.wz-mini__key--ly::before { background: var(--ink-disabled); }
.wz-mini__svg { width: 100%; height: 56px; display: block; }
.wz-mini__actual { stroke: var(--accent-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wz-mini__plan { stroke: var(--accent-data); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wz-mini__ly { stroke: var(--ink-disabled); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ---------- WhatIfParameter ---------- */
.wz-whatif { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.wz-whatif__modes { display: flex; flex-wrap: wrap; gap: 2px; row-gap: 3px; background: var(--surface-sunk); padding: 3px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); align-self: flex-start; max-width: 100%; }
.wz-whatif__mode {
  background: transparent; border: none; cursor: pointer; white-space: nowrap;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-tertiary);
  transition: background var(--dur-state) var(--ease-enter), color var(--dur-state) var(--ease-enter);
}
.wz-whatif__mode:hover { color: var(--ink-primary); }
.wz-whatif__mode.is-on { background: var(--surface-raised); color: var(--ink-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.wz-whatif--compact .wz-whatif__modes { width: 100%; }
.wz-whatif--compact .wz-whatif__mode { padding: var(--space-1) var(--space-2); font-size: 11px; }
.wz-whatif__discrete { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.wz-chipval { display: inline-flex; align-items: center; gap: 2px; background: var(--accent-primary-soft); border-radius: var(--radius-md); padding: 2px 2px 2px var(--space-1); }
.wz-chipval__x { background: transparent; border: none; cursor: pointer; color: var(--accent-primary); font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 50%; }
.wz-chipval__x:hover { background: color-mix(in oklab, var(--accent-primary) 18%, transparent); }
.wz-chipval__add { background: transparent; border: 1px dashed var(--line-default); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); cursor: pointer; color: var(--ink-secondary); font: inherit; font-size: 12px; }
.wz-chipval__add:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
.wz-whatif__triple { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wz-whatif__field { display: flex; flex-direction: column; gap: var(--space-1); }
.wz-whatif__field .t-meta { text-transform: capitalize; }
.wz-whatif__resolved { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--line-soft); }
.wz-whatif__vals { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.wz-whatif__val { background: var(--surface-sunk); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1px var(--space-2); font-size: 12px; }
.wz-whatif__count { margin-left: auto; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--accent-primary); background: var(--accent-primary-soft); padding: 1px var(--space-2); border-radius: 999px; }

/* ---------- NumField ---------- */
.wz-num { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--surface-canvas); border: 1px solid var(--line-default); border-radius: var(--radius-sm); padding: 0 var(--space-2); }
.wz-num:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.wz-num__input { width: 72px; border: none; background: transparent; color: var(--ink-primary); font: inherit; padding: var(--space-1) 0; text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.wz-num__input::-webkit-outer-spin-button, .wz-num__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wz-num__input:focus { outline: none; }
.wz-num__input[readonly] { color: var(--ink-secondary); cursor: default; }
.wz-num__unit { white-space: nowrap; }
.wz-num--compact .wz-num__input { width: 56px; font-size: 12px; }

/* ---------- DriverCard ---------- */
.wz-driver {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-state) var(--ease-enter), box-shadow var(--dur-state) var(--ease-enter);
}
.wz-driver.is-variable { border-color: color-mix(in oklab, var(--accent-primary) 40%, var(--line-soft)); }
.wz-driver.is-required { border-left: 3px solid var(--state-warning); }
.wz-driver.is-confirmed { border-left: 3px solid var(--state-positive); }
.wz-driver__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.wz-driver__titlewrap { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-driver__titlerow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.wz-driver__title { margin: 0; }
.wz-driver__note { margin: 0; max-width: 60ch; text-wrap: pretty; }
.wz-driver__id { color: var(--ink-tertiary); background: var(--surface-sunk); padding: 1px var(--space-2); border-radius: var(--radius-sm); flex-shrink: 0; }
.wz-tag { font-size: 10px; line-height: 16px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 var(--space-2); border-radius: 999px; font-weight: 600; }
.wz-tag--req { background: var(--state-warning-soft); color: var(--state-warning); }
.wz-tag--opt { background: var(--surface-sunk); color: var(--ink-tertiary); }
.wz-tag--var { background: var(--accent-primary-soft); color: var(--accent-primary); }
.wz-driver__foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-3); margin-top: var(--space-1); border-top: 1px solid var(--line-soft); }
.wz-driver__conf { display: flex; flex-direction: column; gap: 2px; min-width: 160px; flex: 1; }
.wz-driver__src { display: flex; align-items: center; gap: var(--space-2); }
.wz-driver__srctext { color: var(--ink-tertiary); }
.wz-driver__confirm {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface-sunk); border: 1px solid var(--line-default); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-secondary);
  min-height: 32px;
  transition: background var(--dur-state) var(--ease-enter), border-color var(--dur-state) var(--ease-enter), color var(--dur-state) var(--ease-enter);
}
.wz-driver__confirm:hover { border-color: var(--state-positive); color: var(--ink-primary); }
.wz-driver__confirm.is-on { background: var(--state-positive-soft); border-color: transparent; color: var(--state-positive); font-weight: 600; }
.wz-driver__check { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; }
.wz-driver__confirm.is-on .wz-driver__check { background: var(--state-positive); color: var(--surface-raised); }
.wz-driver--compact { padding: var(--space-3) var(--space-4); gap: var(--space-1); border-radius: var(--radius-md); }
.wz-driver--compact .wz-driver__title { font-size: 13px; }
.wz-driver--compact .wz-driver__note { font-size: 11px; }

/* ---------- SpreadsheetGrid (+ matrix/ranked share these) ---------- */
.wz-sheet { overflow: auto; border: 1px solid var(--line-default); border-radius: var(--radius-md); max-height: 460px; background: var(--surface-raised); }
.wz-sheet:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -1px; }
.wz-sheet__table { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.wz-sheet__table th, .wz-sheet__table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); white-space: nowrap; }
.wz-sheet__table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-sunk);
  text-align: left; font-weight: 600; vertical-align: bottom;
  border-bottom: 1px solid var(--line-default);
}
.wz-sheet__table th.is-numeric, .wz-sheet__table td.is-numeric { text-align: right; }
.wz-sheet__table .is-frozen { position: sticky; left: 0; z-index: 1; background: var(--surface-raised); border-right: 1px solid var(--line-default); }
.wz-sheet__table thead th.is-frozen { z-index: 3; background: var(--surface-sunk); }
.wz-sheet__unit { display: block; font-weight: 400; opacity: 0.7; font-size: 10px; }
.wz-sheet__sort { margin-left: 4px; color: var(--accent-primary); font-size: 10px; }
.wz-sheet__table tbody tr:hover td { background: color-mix(in oklab, var(--accent-data-soft) 30%, transparent); }
.wz-sheet__table tbody tr.is-recommended td { box-shadow: inset 0 0 0 9999px color-mix(in oklab, var(--accent-primary-soft) 30%, transparent); }
.wz-sheet__table tbody tr.is-recommended .is-frozen { border-left: 3px solid var(--accent-primary); }
.wz-sheet__recdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-primary); margin-left: var(--space-1); vertical-align: middle; }
.wz-sheet__totals td { position: sticky; bottom: 0; background: var(--surface-sunk); font-weight: 600; border-top: 1px solid var(--line-default); z-index: 2; }
.wz-sheet--compact .wz-sheet__table th, .wz-sheet--compact .wz-sheet__table td { padding: var(--space-1) var(--space-3); font-size: 12px; }

/* ---------- ProvenanceChip ---------- */
.wz-prov { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--space-2); border-radius: 999px; font-size: 11px; line-height: 16px; font-weight: 500; cursor: help; border: 1px solid transparent; }
.wz-prov.is-user { background: var(--accent-primary-soft); color: var(--accent-primary); }
.wz-prov.is-signal { background: var(--accent-data-soft); color: var(--accent-data); }
.wz-prov__label { white-space: nowrap; }

/* ============================================================
   SensitivityGrid
   ============================================================ */
.sg { display: flex; flex-direction: column; gap: var(--space-4); }
.sg__toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sg__views { display: inline-flex; gap: 2px; background: var(--surface-sunk); padding: 3px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); }
.sg__view { background: transparent; border: none; cursor: pointer; padding: var(--space-1) var(--space-4); border-radius: var(--radius-sm); font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-tertiary); transition: background var(--dur-state) var(--ease-enter), color var(--dur-state) var(--ease-enter); }
.sg__view:hover:not(:disabled) { color: var(--ink-primary); }
.sg__view.is-on { background: var(--surface-raised); color: var(--ink-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.sg__view:disabled { opacity: 0.4; cursor: not-allowed; }
.sg__metric { display: inline-flex; align-items: center; gap: var(--space-2); }
.sg__kcount { margin-left: auto; display: inline-flex; align-items: baseline; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--surface-sunk); border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.sg__kval { font-size: 18px; font-weight: 700; color: var(--accent-primary); font-family: var(--font-serif); }
.sg__kwarn { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--state-warning); color: #fff; font-size: 11px; font-weight: 700; }

/* PivotAxisShelf */
.sg-shelf { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-sunk); border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.sg-shelf__axes { display: flex; align-items: flex-end; gap: var(--space-3); }
.sg-shelf__pick { display: flex; flex-direction: column; gap: var(--space-1); }
.sg-shelf__pick .t-meta { text-transform: uppercase; letter-spacing: 0.05em; }
.sg-shelf__x { color: var(--ink-tertiary); padding-bottom: var(--space-1); font-size: 16px; }
.sg-shelf__slicers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--line-default); }
.sg-shelf__slicelbl { text-transform: uppercase; letter-spacing: 0.05em; }
.sg-slicer { display: inline-flex; align-items: center; gap: var(--space-2); }
.sg-slicer__name { white-space: nowrap; }
.sg-slicer__chips { display: inline-flex; gap: 2px; background: var(--surface-raised); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 2px; }
.sg-slicer__chip { background: transparent; border: none; cursor: pointer; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 12px; color: var(--ink-secondary); }
.sg-slicer__chip.is-on { background: var(--accent-data); color: #fff; }

/* Matrix */
.sg-matrix-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-matrix__corner-note { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
.sg-matrix .sg-matrix__axhdr { color: var(--ink-tertiary); font-size: 11px; }
.sg-matrix__rowhdr { text-align: right !important; font-weight: 600; background: var(--surface-sunk) !important; }
.sg-cell { position: relative; font-weight: 500; }
.sg-cell.is-recommended { box-shadow: inset 0 0 0 2px var(--accent-primary); font-weight: 700; }
.sg-cell__rec { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-primary); font-weight: 700; }

/* Ranked extras */
.sg-prune { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-default); background: var(--surface-raised); cursor: pointer; color: var(--ink-tertiary); font-size: 13px; line-height: 1; display: grid; place-items: center; }
.sg-prune:hover { border-color: var(--state-negative); color: var(--state-negative); }
.sg-prune.is-pruned { border-color: var(--state-positive); color: var(--state-positive); }
.sg-dim { opacity: 0.4; text-decoration: line-through; }
.wz-sheet__table tbody tr.is-pruned-row td { background: var(--surface-sunk); }

/* Tornado */
.sg-tornado { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }
.sg-tornado__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.sg-tornado__base { color: var(--ink-secondary); }
.sg-tornado__rows { display: flex; flex-direction: column; gap: var(--space-3); }
.sg-tornado__row { display: grid; grid-template-columns: 180px 1fr 72px; align-items: center; gap: var(--space-3); }
.sg-tornado__label { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.sg-tornado__range { font-family: var(--font-mono); font-size: 11px; }
.sg-tornado__track { background: var(--surface-sunk); border-radius: var(--radius-sm); height: 28px; position: relative; }
.sg-tornado__bar { height: 100%; background: linear-gradient(90deg, var(--state-negative-soft), var(--state-positive-soft)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2); min-width: 64px; border: 1px solid var(--line-soft); }
.sg-tornado__lo, .sg-tornado__hi { font-size: 11px; color: var(--ink-secondary); }
.sg-tornado__swing { text-align: right; font-weight: 600; font-size: 12px; color: var(--accent-primary); }

/* SensitivityGrid footer */
.sg__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.sg__recap { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sg__recap-val { color: var(--ink-primary); background: var(--accent-primary-soft); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 12px; }
.sg__lock { min-width: 160px; }

/* disabled buttons (gating affordance) */
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn--ghost:disabled:hover { background: transparent; }