/* OATR · board.css — AI-indicator idea board (OT-234)
   Loaded after tokens.css (cascade order). Restyle from tokens only —
   no raw hex/px beyond layout scaffolding. */

body { overflow: auto; }

#app { min-height: 100%; display: flex; flex-direction: column; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 5;
}
.brand { font-family: var(--brand); font-size: var(--fs-h4); font-weight: var(--fw-bold); white-space: nowrap; }
.muted { color: var(--text-2); }
.tb-actions { display: flex; gap: 8px; }
/* header nav — switch between the two pages (idea board · catalog) */
.tb-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.tb-nav { display: flex; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
  min-height: 30px; padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.on { color: var(--on-accent); background: var(--accent); }
.tab .cc {
  font-variant-numeric: tabular-nums; font-size: 10px; padding: 0 6px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 8%, transparent); color: inherit;
}
.tab.on .cc { background: color-mix(in srgb, var(--on-accent) 22%, transparent); }

.btn {
  min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- board columns (group band) ---- */
/* Wrap into rows at 4 columns max (desktop-priority) instead of flowing endlessly sideways —
   the 5th group starts a new row. Same RAM cap as .cat-grid: each column is at least the larger
   of 260px and a quarter-row, so a 5th column never fits; narrower windows drop to fewer. */
.board {
  flex: 1; display: grid; align-items: start; gap: 16px; padding: 20px;
  grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 3 * 16px) / 4)), 1fr));
}
.col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
/* the always-present Unsorted lane reads as a staging inbox, not a formal group */
.col-unsorted { background: var(--surface-2); border-style: dashed; }
.col-unsorted > .col-head h2 { color: var(--text-2); font-weight: var(--fw-semibold); }
.col-head {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}
/* the title takes all the room and truncates, so the small action buttons never crowd it */
.col-head h2 { font-size: var(--fs-h5); font-weight: var(--fw-semibold);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-head .count {
  font-size: var(--fs-caption); color: var(--text-2); background: var(--chip);
  border-radius: var(--radius-pill); padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.col-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pad { padding: 20px; }

/* ---- catalog browser (the 2,400-idea pool) ---- */
/* groups become a top band (sized to content); the catalog browser takes the rest */
.board { flex: 0 0 auto; }
.catalog { flex: 1; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 14px; }
.cat-head {
  position: sticky; top: 54px; z-index: 4;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
}
.cat-head-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cat-head-top h2 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); white-space: nowrap; }
.cat-search { flex: 1; min-width: 200px; }
.cat-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.catchip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  min-height: 30px; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.catchip:hover { border-color: var(--accent); color: var(--text); }
.catchip.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.catchip .cc {
  font-variant-numeric: tabular-nums; font-size: 10px; padding: 0 6px;
  border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 8%, transparent); color: inherit;
}
.catchip.on .cc { background: color-mix(in srgb, var(--on-accent) 22%, transparent); }
/* browse grid — capped at 4 columns (desktop-priority: this is an internal desktop tool),
   still drops to fewer columns as the window narrows. RAM pattern: each column is at least the
   larger of 240px and a quarter-row, so a 5th column can never fit; on a wide desktop it settles
   at 4 roomy columns instead of sprawling to 6–7 narrow ones. */
.cat-grid {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 3 * 12px) / 4)), 1fr));
}
.cat-empty { grid-column: 1 / -1; text-align: center; padding: 44px 20px; }
.cat-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 0 4px; }
.pg-info { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---- indicator card ---- */
.card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-enter);
}
.card:hover { border-color: var(--accent); }
.card-top { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
/* product-widget head (ported from output/ .w-*): sig-dot + name + a "what it tells" line */
.w-head { display: flex; align-items: center; gap: 6px; }
.w-dot { flex: none; width: 14px; text-align: center; font-size: 11px; line-height: 1; }
.w-name { flex: 1; min-width: 0; font: var(--fw-bold) var(--fs-sm)/1.25 var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-sub { margin-top: 3px; font: var(--fw-semibold) 11px/1.3 var(--font); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip {
  font-size: var(--fs-caption); padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--chip); color: var(--text-2); white-space: nowrap;
}
.chip.mono { font-family: var(--mono); color: var(--text); }
.chip.cat { color: var(--text); }
.chip.idea { color: var(--accent); background: var(--accent-soft); font-weight: var(--fw-semibold); }
/* "ship to product" toggle — sits at the end of the card-top chip row */
.ship { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap;
  padding: 2px 8px; border-radius: var(--radius-pill); border: 1px dashed var(--border);
  background: transparent; color: var(--text-2); }
.ship:hover { border-color: var(--accent); color: var(--accent); }
.ship.on { border-style: solid; border-color: transparent; background: var(--up); color: var(--on-accent); }
/* a shipped card is scannable at a glance — an accent edge, no layout shift */
.card.shipped { box-shadow: inset 3px 0 0 var(--up); }
.card-name { font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.card-en { font-size: var(--fs-caption); color: var(--text-2); margin-top: 2px; }
.card-img {
  width: 100%; height: 96px; object-fit: cover; margin-top: 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.card-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pdots { display: inline-flex; gap: 3px; }
.pdot {
  font-size: 10px; width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); display: inline-flex;
  align-items: center; justify-content: center; font-weight: var(--fw-semibold);
}
.flag {
  font-size: var(--fs-caption); color: var(--secondary); font-weight: var(--fw-semibold);
  background: var(--secondary-soft); border-radius: var(--radius-pill); padding: 1px 8px;
}
.card-free { cursor: default; opacity: .7; }

/* ---- the visualization preview on each card (the chosen "animation") ---- */
.card-viz {
  margin-top: 10px; min-height: 62px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  overflow: hidden;
}
.card-viz.empty {
  align-items: center; justify-content: center; color: var(--text-2);
  font-size: var(--fs-caption); border-style: dashed; cursor: pointer; text-align: center;
}
.card-viz.empty:hover { border-color: var(--accent); color: var(--text); }
.viz-kind {
  margin-top: 6px; font-size: var(--fs-caption); color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px;
}
.viz-kind .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* render bodies (ported from the product prototype's viz vocabulary) */
.mini { width: 100%; display: block; }
.gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge svg { width: auto; max-width: 100%; max-height: 58px; }
.g-needle { transform-box: view-box; transform-origin: 60px 54px; }
.gv { font: var(--fw-extrabold) 15px/1 var(--mono); margin-top: -4px; }
.gv small { font-size: 9px; color: var(--text-2); font-weight: var(--fw-semibold); }
.num { font: var(--fw-extrabold) 26px/1 var(--mono); display: flex; align-items: baseline; gap: 5px; justify-content: center; }
.num small { font-size: 11px; color: var(--text-2); font-weight: var(--fw-semibold); }
.num-sub { font: var(--fw-semibold) 10px/1.2 var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pill { align-self: center; font: var(--fw-bold) 11px/1 var(--mono); padding: 5px 10px; border-radius: var(--radius-pill); }
.spark { height: 24px; flex: 1; }
.spark-row { display: flex; align-items: center; gap: 8px; }
.spark-v { font: var(--fw-bold) 13px/1 var(--mono); white-space: nowrap; }
.chart { height: 100%; min-height: 48px; }
.heat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100%; }
.heat i { aspect-ratio: 1; border-radius: 3px; display: block; }
.light { display: flex; align-items: center; gap: 11px; justify-content: center; flex: 1; }
.light-lamps { display: flex; flex-direction: column; gap: 4px; background: var(--chip); border: 1px solid var(--border); border-radius: 8px; padding: 5px; }
.lamp { width: 11px; height: 11px; border-radius: 50%; background: var(--lc); opacity: .18; }
.lamp.on { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc) 26%, transparent); }
.light-v { font: var(--fw-extrabold) 14px/1.15 var(--font); }
.countdown { display: flex; align-items: center; gap: 11px; justify-content: center; flex: 1; }
.cd-ring { width: 40px; height: 40px; flex: none; }
.cd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-v { font: var(--fw-extrabold) 16px/1 var(--mono); }
.arrows { display: flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; flex: 1; }
.arrow-row { display: flex; gap: 7px; align-items: center; }
.arw { font: var(--fw-extrabold) 22px/1 var(--mono); }
.viz-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; position: relative; }
.candles { height: 100%; min-height: 48px; }
.profile { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex: 1; padding: 1px 0; width: 100%; }
.pf-row { flex: 1; min-height: 5px; display: flex; align-items: center; position: relative; }
.pf-bar { display: block; height: 72%; min-height: 4px; border-radius: 2px; opacity: .8; }
.pf-row.poc .pf-bar { opacity: 1; }
.pf-row.here::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px dashed var(--text-2); opacity: .7; }
.quad { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; justify-content: center; min-height: 0; }
.q-plot { position: relative; width: 54px; height: 54px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--chip); }
.q-plot::before, .q-plot::after { content: ""; position: absolute; background: var(--border); }
.q-plot::before { left: 50%; top: 8%; bottom: 8%; width: 1px; margin-left: -.5px; }
.q-plot::after { top: 50%; left: 8%; right: 8%; height: 1px; margin-top: -.5px; }
.q-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.q-lbl { font: var(--fw-bold) 10.5px/1.15 var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.curve-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.curve { flex: 1; min-height: 34px; }
.curve-x { display: flex; justify-content: space-between; font: var(--fw-semibold) 8px/1 var(--mono); color: var(--text-2); opacity: .75; }
.band { height: 100%; min-height: 48px; }
.histo { height: 100%; min-height: 40px; }
.h-zero { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* verdict: headline + reason line (text-forward; the biggest output family) */
.verdict { display: flex; flex-direction: column; gap: 4px; align-self: stretch; width: 100%; text-align: start; }
.vd-head { display: flex; align-items: center; gap: 6px; font: var(--fw-bold) var(--fs-sm)/1.25 var(--font); color: var(--text); }
.vd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vd-reason { font-size: 11px; color: var(--text-2); line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* checklist: rule pass/fail rows + k/n summary */
.check { display: flex; align-items: center; gap: 10px; width: 100%; }
.ck-list { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ck-row { display: flex; align-items: center; gap: 6px; }
.ck-ic { font-size: 11px; font-weight: var(--fw-bold); width: 12px; text-align: center; flex: none; }
.ck-row.pass .ck-ic { color: var(--up); }
.ck-row.fail .ck-ic { color: var(--text-2); }
.ck-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--chip); }
.ck-row.pass .ck-bar { background: color-mix(in srgb, var(--up) 40%, var(--chip)); }
.ck-sum { font: var(--fw-extrabold) 16px/1 var(--mono); display: flex; align-items: baseline; flex: none; }
.ck-sum small { font-size: 10px; color: var(--text-2); font-weight: var(--fw-semibold); }
/* stage: phase marker on an ordered track */
.stage { display: flex; flex-direction: column; gap: 7px; width: 100%; align-items: center; }
.st-track { display: flex; align-items: center; width: 100%; }
.st-node { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 2px solid var(--border); background: var(--chip); }
.st-node.done { background: var(--text-2); border-color: var(--text-2); }
.st-node.now { background: var(--sc); border-color: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 24%, transparent); }
.st-seg { flex: 1; height: 2px; background: var(--border); }
.st-lbl { font: var(--fw-bold) 12px/1 var(--mono); }
/* proximity: distance-to-trigger meter */
.prox { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.px-bar { position: relative; height: 8px; border-radius: 4px; background: var(--chip); }
.px-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .35; }
.px-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.px-trig { position: absolute; right: -3px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-2); }
.px-lbl { font: var(--fw-extrabold) 15px/1 var(--mono); display: flex; align-items: baseline; justify-content: flex-end; }
.px-lbl small { font-size: 10px; color: var(--text-2); }
/* flowmap: node/edge map */
.flowmap { height: 100%; min-height: 48px; }
/* rangebox: price position inside a box */
.rbox { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.rb-frame { position: relative; width: 44px; height: 48px; border: 1.5px solid var(--text-2); border-radius: 4px; background: var(--chip); }
.rb-dot { position: absolute; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
.rb-lbl { font: var(--fw-bold) 16px/1 var(--font); }
/* statetoken: one emoji / colour state */
.stoken { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.tk-emoji { font-size: 34px; line-height: 1; }
.tk-dot { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--text) 8%, transparent); }
/* thermometer: temperature / fever level */
.thermo { display: flex; align-items: flex-end; gap: 8px; justify-content: center; flex: 1; min-height: 48px; }
.th-tube { position: relative; width: 10px; height: 46px; border-radius: 6px; background: var(--chip); overflow: hidden; }
.th-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; }
.th-bulb { width: 16px; height: 16px; border-radius: 50%; margin-left: -13px; }
.th-v { font: var(--fw-extrabold) 15px/1 var(--mono); display: flex; align-items: baseline; }
.th-v small { font-size: 10px; color: var(--text-2); }
/* pulse: heartbeat / rhythm line */
.pulse { height: 100%; min-height: 40px; }
/* tugbar: balance between two poles */
.tug { display: flex; align-items: center; gap: 6px; width: 100%; }
.tg-pole { font-size: 11px; flex: none; }
.tg-bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--down) 22%, var(--chip)), var(--chip), color-mix(in srgb, var(--up) 22%, var(--chip))); }
.tg-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border); }
.tg-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent); }
/* compass: directional needle */
.compass { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.compass svg { width: auto; max-height: 54px; }
/* ring: proportion */
.ring-w { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.ring-w svg { width: auto; max-height: 54px; }
.ring-v { position: absolute; font: var(--fw-extrabold) 13px/1 var(--mono); }
/* cycle: phase around a cycle */
.cycle { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.cycle svg { width: auto; max-height: 54px; }
/* radar: multi-factor across axes */
.radar { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.radar svg { width: auto; max-height: 54px; }
/* scale: tilting balance of power */
.scale-w { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.scale-w svg { width: auto; max-height: 52px; }
/* funnel: narrowing tiers */
.funnel { height: 100%; min-height: 44px; }
/* ---- family variants (more pickable visuals) ---- */
.mini.vln { height: 50px; }
/* spectrum: bipolar gradient + marker */
.spectrum { display: flex; align-items: center; flex: 1; width: 100%; }
.sp-bar { position: relative; flex: 1; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--down), var(--warn), var(--up)); }
.sp-mk { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--text); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 0 2px var(--surface); }
/* seesaw: tilting balance beam */
.seesaw { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.seesaw svg { width: auto; max-height: 48px; }
/* battery: segmented charge */
.battery { display: flex; align-items: center; gap: 9px; justify-content: center; flex: 1; min-height: 48px; }
.battery svg { width: auto; max-height: 34px; }
.bt-v { font: var(--fw-extrabold) 14px/1 var(--mono); display: flex; align-items: baseline; }
.bt-v small { font-size: 9px; color: var(--text-2); }
/* meter: horizontal linear gauge */
.meter { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.mt-track { position: relative; height: 9px; border-radius: 5px; background: var(--chip); }
.mt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; opacity: .85; }
.mt-mk { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; transform: translateX(-50%); }
.mt-v { font: var(--fw-extrabold) 15px/1 var(--mono); display: flex; align-items: baseline; justify-content: flex-end; }
.mt-v small { font-size: 10px; color: var(--text-2); }
/* depth: bid/ask staircase · ribbon: MA lines */
.depth { height: 34px; }
.ribbon { height: 40px; }
/* ladder: price rungs */
.ladder-w { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.ladder-w svg { width: auto; max-height: 50px; }
/* sonar: concentric ping rings */
.sonar { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.sonar svg { width: auto; max-height: 52px; }
/* ---- batch 2 variants ---- */
.segs { display: flex; gap: 3px; flex: 1; align-items: center; width: 100%; }
.seg { flex: 1; height: 12px; border-radius: 3px; background: var(--chip); }
.seg.on { background: var(--sc); }
.grade { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.gr-l { font: var(--fw-extrabold) 34px/1 var(--brand, var(--font)); letter-spacing: -.02em; }
.matrix2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 44px; height: 44px; margin: auto; }
.mx-c { border-radius: 4px; background: var(--chip); }
.mx-c.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 12%, transparent); }
.bubble-w { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.bb-plot { position: relative; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 6px; background: var(--chip); }
.bb-dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); opacity: .8; }
.sigb { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.sigb svg { width: auto; max-height: 36px; }
.beacon { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.bc-lamp { width: 16px; height: 16px; border-radius: 50%; }
.hourglass { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.hourglass svg { width: auto; max-height: 48px; }
.zones { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; justify-content: center; }
.zn-band { height: 9px; border-radius: 2px; position: relative; }
.zn-mk { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 3px; border-radius: 2px; }
.clock, .spiral, .orbit { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.clock svg, .spiral svg, .orbit svg { width: auto; max-height: 52px; }
/* ---- batch 3 variants ---- */
.speedo { display: flex; flex-direction: column; align-items: center; gap: 0; flex: 1; min-height: 48px; }
.speedo svg { width: auto; max-height: 46px; }
.sd-v { font: var(--fw-extrabold) 14px/1 var(--mono); margin-top: -7px; }
.waterlvl { display: flex; align-items: center; gap: 8px; justify-content: center; flex: 1; min-height: 48px; }
.waterlvl svg { width: auto; max-height: 40px; }
.wl-v { font: var(--fw-extrabold) 14px/1 var(--mono); display: flex; align-items: baseline; }
.wl-v small { font-size: 9px; color: var(--text-2); }
.waffle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 44px; height: 44px; margin: auto; }
.waffle i { aspect-ratio: 1; border-radius: 2px; display: block; }
.bullet { display: flex; align-items: center; gap: 8px; width: 100%; }
.bl-track { position: relative; flex: 1; height: 11px; border-radius: 4px; background: var(--chip); }
.bl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .85; }
.bl-tgt { position: absolute; top: -3px; bottom: -3px; width: 3px; background: var(--text); transform: translateX(-50%); }
.bl-v { font: var(--fw-extrabold) 14px/1 var(--mono); flex: none; }
.pie, .wheel, .venn, .tree, .pendulum { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.pie svg, .wheel svg, .venn svg, .tree svg, .pendulum svg { width: auto; max-height: 52px; }
.crosshair { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.ch-plot { position: relative; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 6px; background: var(--chip); }
.ch-h { position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: var(--border); }
.ch-v { position: absolute; top: 8%; bottom: 8%; left: 50%; width: 1px; background: var(--border); }
.ch-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 10%, transparent); }
.dumbbell { display: flex; align-items: center; flex: 1; width: 100%; }
.db-track { position: relative; flex: 1; height: 14px; }
.db-line { position: absolute; top: 50%; height: 3px; background: var(--text-2); transform: translateY(-50%); border-radius: 2px; }
.db-a, .db-b { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); }
.db-a { background: var(--text-2); }
.stack-w { display: flex; align-items: center; flex: 1; width: 100%; }
.stk-bar { display: flex; flex: 1; height: 14px; border-radius: 4px; overflow: hidden; }
.stk-seg { height: 100%; }
/* ---- batch 4 variants ---- */
.bullseye, .polar, .knob, .flame, .iceberg { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.bullseye svg, .polar svg, .knob svg { width: auto; max-height: 52px; }
.flame svg, .iceberg svg { width: auto; max-height: 44px; }
.slope-w { display: flex; align-items: center; flex: 1; min-height: 44px; }
.slope-w svg { width: 100%; max-height: 44px; }
.flip { display: flex; gap: 3px; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.fp-d { font: var(--fw-extrabold) 19px/1 var(--mono); background: var(--chip); border-radius: 4px; padding: 5px 6px; position: relative; }
.fp-d::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1px; background: var(--border); }
/* ---- batch 5 variants ---- */
.radialbar, .sunburst, .treemap, .packed { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.radialbar svg, .sunburst svg, .packed svg { width: auto; max-height: 52px; }
.treemap svg { width: auto; max-height: 40px; }
.lolli { display: flex; align-items: center; flex: 1; min-height: 44px; }
.lolli svg { width: 100%; max-height: 44px; }
.calheat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: 100%; max-width: 92px; margin: auto; }
.calheat i { aspect-ratio: 1; border-radius: 2px; display: block; }
.winrate { display: flex; gap: 3px; flex: 1; align-items: center; justify-content: center; }
.wl { width: 9px; height: 16px; border-radius: 2px; }
.heatstrip { display: flex; align-items: center; flex: 1; width: 100%; }
.hs-bar { position: relative; display: flex; flex: 1; height: 12px; border-radius: 4px; overflow: hidden; }
.hs-mk { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--text); border-radius: 2px; transform: translateX(-50%); box-shadow: 0 0 0 1px var(--surface); }
.delta { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.dl-track { position: relative; height: 12px; background: var(--chip); border-radius: 4px; }
.dl-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border); }
.dl-bar { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.dl-v { font: var(--fw-extrabold) 15px/1 var(--mono); text-align: center; }
/* ---- batch 6 variants ---- */
.hexbin, .chord, .nightingale, .magnitude { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.hexbin svg { width: auto; max-height: 44px; }
.chord svg, .nightingale svg, .magnitude svg { width: auto; max-height: 52px; }
.pictograph { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; max-width: 108px; margin: auto; justify-content: center; }
.pic-i { width: 12px; height: 12px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.orderbook { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; justify-content: center; }
.ob-row { display: flex; height: 5px; justify-content: center; gap: 1px; }
.ob-bid { background: var(--up); opacity: .6; border-radius: 2px 0 0 2px; }
.ob-ask { background: var(--down); opacity: .6; border-radius: 0 2px 2px 0; }
.likert { display: flex; gap: 2px; flex: 1; align-items: center; width: 100%; }
.lk-seg { flex: 1; height: 11px; background: var(--chip); }
.lk-seg:first-child { border-radius: 5px 0 0 5px; }
.lk-seg:last-child { border-radius: 0 5px 5px 0; }
.lk-seg.on { background: var(--sc); transform: scaleY(1.4); border-radius: 3px; }
.stoplight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 42px; margin: auto; }
.stl { aspect-ratio: 1; border-radius: 50%; }
/* ---- batch 7 variants ---- */
.starrating { display: flex; gap: 2px; align-items: center; justify-content: center; flex: 1; font-size: 17px; }
.sevenseg { position: relative; font: var(--fw-extrabold) 24px/1 var(--mono); letter-spacing: 3px; background: #14161c; padding: 7px 10px; border-radius: 5px; margin: auto; }
.ss-off { color: rgba(255, 255, 255, .07); }
.ss-on { position: absolute; left: 10px; top: 7px; }
.dotmatrix { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.5px; width: 58px; margin: auto; }
.dotmatrix span { aspect-ratio: 1; border-radius: 50%; display: block; }
.wifi, .dialticks, .moon, .sunmoon, .abacus { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.wifi svg, .sunmoon svg { width: auto; max-height: 40px; }
.dialticks svg, .moon svg, .abacus svg { width: auto; max-height: 48px; }
.slider-w { display: flex; align-items: center; flex: 1; width: 100%; }
.sl-track { position: relative; flex: 1; height: 7px; border-radius: 4px; background: var(--chip); }
.sl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .8; }
.sl-thumb { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--surface), 0 1px 3px rgba(0, 0, 0, .3); }
.heatcol { display: flex; align-items: center; gap: 9px; justify-content: center; flex: 1; min-height: 48px; }
.hc-bar { position: relative; width: 12px; height: 44px; border-radius: 6px; background: linear-gradient(to top, var(--up), var(--warn), var(--down)); }
.hc-mk { position: absolute; left: -3px; right: -3px; height: 3px; border-radius: 2px; background: var(--text); transform: translateY(50%); }
.hc-v { font: var(--fw-extrabold) 15px/1 var(--mono); }

/* ---- batch 8 variants ---- */
.pressure, .windrose { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.pressure svg { width: auto; max-height: 44px; }
.windrose svg { width: auto; max-height: 48px; }
.odo { display: flex; gap: 3px; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.odo-d { font: var(--fw-extrabold) 17px/1.35 var(--mono); background: var(--chip); border-radius: 3px; padding: 3px 5px; min-width: 15px; text-align: center; }
.odo-d.lead { box-shadow: 0 0 0 1px currentColor inset; }
.plotbox, .netbox { display: flex; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 48px; }
.plotbox svg, .netbox svg { width: 100%; max-height: 56px; }
.griddots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; place-items: center; padding: 4px; flex: 1; min-height: 48px; align-content: center; }
.griddots i { border-radius: 50%; display: block; }
.magnet { display: flex; align-items: center; flex: 1; width: 100%; }
.mg-track { position: relative; flex: 1; height: 8px; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--down) 25%, var(--chip)), var(--chip), color-mix(in srgb, var(--up) 25%, var(--chip))); }
.mg-pole { font: var(--fw-bold) 11px/1 var(--mono); color: var(--text-2); }
.mg-ball { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--surface); }
.footprint { display: flex; flex-direction: column; gap: 2px; flex: 1; justify-content: center; padding: 2px 0; }
.fp-row { display: flex; gap: 2px; height: 7px; }
.fp-row.poc { outline: 1px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.fp-b { flex: 1; background: var(--down); border-radius: 2px; }
.fp-a { flex: 1; background: var(--up); border-radius: 2px; }
.ledbar { display: flex; gap: 2px; padding: 4px 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; flex: 1; align-items: center; }
.led { flex: 1; height: 14px; border-radius: 1px; background: var(--chip); }

/* ---- batch 9 variants (radial/dial need centred aspect; rest reuse viz-wrap+vln) ---- */
.barometer, .gyro, .protractor, .weathervane { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.gyro svg, .weathervane svg { width: auto; max-height: 48px; }
.barometer svg, .protractor svg { width: auto; max-height: 44px; }

/* ---- batch 10 variants (centred renders; rest reuse viz-wrap+vln) ---- */
.ripple, .gears, .sprout, .valve, .pinwheel, .anchor { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.ripple svg, .pinwheel svg { width: auto; max-height: 48px; }
.gears svg, .sprout svg, .valve svg, .anchor svg { width: auto; max-height: 46px; }

/* ---- batch 11 variants (centred renders; rest reuse viz-wrap+vln / plotbox) ---- */
.fishbone, .molecule, .elevator, .stopwatch, .windsock, .metronome { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.stopwatch svg, .metronome svg { width: auto; max-height: 48px; }
.fishbone svg, .molecule svg, .windsock svg { width: auto; max-height: 44px; }
.elevator svg { width: auto; max-height: 48px; }

/* ---- batch 12 variants (centred renders; rest reuse viz-wrap+vln / plotbox) ---- */
.lever, .dam, .bridge, .thermostat, .kaleidoscope, .maze, .pulley, .prism { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.thermostat svg, .kaleidoscope svg { width: auto; max-height: 48px; }
.lever svg, .dam svg, .pulley svg, .prism svg { width: auto; max-height: 44px; }
.bridge svg { width: 100%; max-height: 46px; }
.maze svg { width: auto; max-height: 44px; }

/* ---- batch 13 variants (centred renders; rest reuse viz-wrap+vln) ---- */
.lightning, .snowflake, .treerings, .dice { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.snowflake svg, .treerings svg, .dice svg { width: auto; max-height: 48px; }
.lightning svg { width: auto; max-height: 44px; }

/* ---- batch 14 variants (centred renders; rest reuse viz-wrap+vln) ---- */
.ternary, .fingerprint, .qrcode, .gaugecluster { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.fingerprint svg, .qrcode svg { width: auto; max-height: 48px; }
.ternary svg { width: auto; max-height: 44px; }
.gaugecluster svg { width: 100%; max-height: 40px; }

/* ---- batch 15 variants (centred renders; rest reuse viz-wrap+vln) ---- */
.galaxy, .eclipse, .anvil, .turnstile, .shutter, .lens { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 48px; }
.galaxy svg, .eclipse svg, .turnstile svg, .shutter svg, .lens svg { width: auto; max-height: 48px; }
.anvil svg { width: auto; max-height: 44px; }

/* ---- animation picker (gallery of render types) ---- */
.rp-tones { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.rp-tone {
  min-height: 30px; padding: 3px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.rp-tone.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rp-group-h { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); margin: 18px 0 9px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.rp-group-h:first-child { margin-top: 4px; }
.rp-toolrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-toolrow .rp-tones { margin-bottom: 0; }
.rp-fit { min-height: 30px; padding: 3px 13px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-caption); font-weight: var(--fw-semibold); white-space: nowrap; }
.rp-fit.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.rp-cell {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px;
  background: var(--surface-2); text-align: center; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.rp-cell:hover { border-color: var(--accent); }
.rp-cell.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rp-prev {
  min-height: 56px; display: flex; flex-direction: column; justify-content: center;
  align-items: stretch; overflow: hidden;
}
.rp-name { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text); }
.rp-hint { font-size: 10px; color: var(--text-2); line-height: var(--lh-snug); }

/* output-type row (the spine) — same pills as tones, sits above them */
.rp-otypes { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.rp-otype {
  min-height: 30px; padding: 3px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer;
}
.rp-otype:hover { border-color: var(--accent); color: var(--text); }
.rp-otype.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
/* dishonest-for-this-output render: dimmed + not selectable, reason shown in hint */
.rp-cell.dim { opacity: .45; cursor: not-allowed; }
.rp-cell.dim:hover { border-color: var(--border); box-shadow: none; }
.rp-cell.dim .rp-hint { color: var(--warn); }

/* image body (card visual = image, and standalone image cards) */
.card-viz.card-viz-img { padding: 0; border: 0; min-height: 0; }
.card-viz-img .card-img { margin-top: 0; height: 110px; }

/* a card can stack all of its visuals (animation + image + drawing); each panel carries a
   hover/focus ✕ to remove just that one. */
.viz-stack { display: flex; flex-direction: column; gap: 10px; }
.viz-panel { position: relative; }
.viz-x {
  position: absolute; top: 4px; inset-inline-end: 4px; z-index: 2;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-pill); cursor: pointer; font-size: 11px; line-height: 1;
  background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--text-2);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-enter);
}
.viz-panel:hover .viz-x, .viz-x:focus-visible { opacity: 1; }
.viz-x:hover { color: var(--down); }
@media (prefers-reduced-motion: reduce) { .viz-x { transition: none; } }

/* mini action buttons in the card foot */
.mini {
  min-height: 26px; padding: 2px 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-size: var(--fs-caption); line-height: 1;
}
.mini:hover { border-color: var(--accent); color: var(--text); }
/* action row: the .mini class is shared with the full-width viz line-svg (`.mini{width:100%}`),
   which would otherwise force each footer button onto its own row. Restore inline sizing so the
   card actions (vote · image · ⋯) sit in a single left-aligned row inside .card-foot's flex. */
.card-foot .mini { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.card-foot .vote { color: var(--text-2); font-weight: var(--fw-bold); }
/* all actions sit in the row (vote · animation · image · draw · move); the destructive
   remove (✕) is pushed to the far right so it's separated from the rest. */
.card-foot .rm { margin-left: auto; }
.card-foot .rm:hover { color: var(--down); border-color: var(--down); }
.card-foot .vote.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
/* group header actions are secondary — keep them small so the title reads clearly.
   MUST reset width/display: the shared `.mini{width:100%;display:block}` (viz line-svg) would
   otherwise blow each button to full width and crush the flex title to nothing. */
.col-head .mini { width: auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 20px; min-width: 20px; padding: 0 4px; font-size: 11px; color: var(--text-2);
  border-color: transparent; background: transparent; flex: none; }
.col-head .mini:hover { background: var(--surface-2); border-color: var(--border); }
/* who voted — name chips beneath a card's actions */
.card-voters { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.voter {
  font-size: 10px; line-height: 1.4; font-weight: var(--fw-semibold); color: var(--text-2);
  background: var(--chip); border-radius: var(--radius-pill); padding: 1px 8px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voter[data-me="1"] { color: var(--on-accent); background: var(--accent); }

/* mode badge (live vs local) */
.badge {
  font-size: var(--fs-caption); color: var(--text-2); background: var(--chip);
  border-radius: var(--radius-pill); padding: 3px 10px; align-self: center;
}
.badge.live { color: var(--up); }
/* identity chip — a button styled as a badge; `unset` nudges the user to add a name */
.badge.who { border: 0; cursor: pointer; font-family: inherit; font-weight: var(--fw-semibold); }
.badge.who:hover { background: var(--accent-soft); }
.badge.who.unset { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

/* drag target */
.col-body { min-height: 40px; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease-enter); }
.col-body.drop-hot { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -4px; }

/* dialogs (on the overlay primitive) */
.ov-title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin-bottom: 12px; }
.in {
  width: 100%; min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
}
.ov-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.pick-list, .menu { display: flex; flex-direction: column; gap: 8px; }
/* group footer add-buttons + the indicator picker list */
.col-foot { padding: 8px 12px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-caption); }
.ip-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; margin-top: 12px; }
.ip-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; text-align: start;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ip-row:hover { border-color: var(--accent); }
/* "create a new idea" row — an authored, non-catalog idea; visually set apart from catalog rows */
.ip-new { color: var(--accent); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  border-style: dashed; background: var(--accent-soft); margin-top: 4px; }
.ip-nm { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-list .btn, .menu .btn { justify-content: flex-start; text-align: start; }
.btn.danger { color: var(--down); }
@media (prefers-reduced-motion: reduce) { .col-body { transition: none; } }

/* ---- anatomy overlay ---- */
.an-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.an-title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.an-body { margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.an-row dt { font-size: var(--fs-caption); color: var(--accent); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .03em; }
.an-row dd { font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-normal); margin-top: 2px; }
.an-picks { border-top: 1px solid var(--border); padding-top: 12px; }
.an-picks h4 { font-size: var(--fs-h6); color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.an-picks ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.an-picks li { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-normal); }
.an-picks strong { color: var(--text); }
.ov.modal { max-height: 84vh; overflow-y: auto; }
.ov.sheet { max-height: 84vh; overflow-y: auto; }

/* ---- drawing modal (openDrawDialog) ---- */
.ov.modal:has(.draw) { width: min(820px, 94vw); }
.draw { display: flex; flex-direction: column; gap: 10px; }
.draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt-grp { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.dt {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; color: var(--text-2);
  border-radius: var(--radius-pill); font-family: inherit; font-size: var(--fs-sm); line-height: 1; cursor: pointer;
}
.dt:hover { color: var(--text); background: var(--surface); }
.dt.on { color: var(--on-accent); background: var(--accent); }
.dt.sw { width: 28px; min-width: 28px; padding: 0; }
.dt.sw::after { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }
.dt.sw.on { background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.dt.szb i { display: block; background: currentColor; border-radius: 50%; }
.draw-stage { line-height: 0; }
.draw-stage canvas {
  width: 100%; height: auto; display: block; touch-action: none; cursor: crosshair;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
/* drawing / image caption on a card */
.card-note { margin-top: 6px; font: var(--fw-semibold) 11px/1.3 var(--font); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- scaffold note ---- */
.scaffold-note {
  padding: 10px 20px; border-top: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-caption); text-align: center;
}

/* ---- overlay primitive (D-008/D-012) ---- */
.ov-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-enter);
}
.ov-back.in { opacity: 1; }
.ov { background: var(--surface); border: 1px solid var(--border); position: relative; }
.ov-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-2);
  font-size: 15px; line-height: 1; border-radius: var(--radius-pill); cursor: pointer; z-index: 2; }
.ov-x:hover { background: var(--chip); color: var(--text); }
.ov.modal { width: min(460px, 92vw); border-radius: var(--radius); padding: 20px; }
.ov.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
  border-radius: var(--radius) var(--radius) 0 0; padding: 20px 16px 24px;
}
@media (prefers-reduced-motion: reduce) { .ov-back { transition: none; } }