/* =====================================================================
   screamingface — widgets-view · widget-specific styling
   Layered on top of the brand base (style.css). Every value is a brand
   token from tokens.css — no raw colors, sizes, or fonts. Aesthetic:
   square, hairline, mono/gold-blue (infra-retro-modern).
   ===================================================================== */

/* ---- gallery scaffold -------------------------------------------- */
/* the page rides the FUSION GROUND (fusion-ground.js — the system's atmospheric
   background); opaque widget cells scroll over it */
.wv-wrap { max-width: 920px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-12); }
.wv-lede { color: var(--ink-2); max-width: 64ch; font-size: var(--text-lead); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
/* the mock-prototypes note uses the system terminal window (.note); local margin only */
.wv-hero .note { margin: var(--space-5) 0 0; }

.wv-group { margin: var(--space-10) 0 0; }
.wv-group > h2 { display: flex; align-items: baseline; gap: var(--space-3); }
.wv-group > h2 .n { color: inherit; }   /* section numbers match the headline */
.wv-groupsub { font-family: var(--f-sans); font-size: var(--text-sm); color: var(--ink-2); text-transform: none; letter-spacing: 0; margin: var(--space-2) 0 0; }

/* ---- notebook cell frame (In[] / Out[]) --------------------------- */
.nbcell { margin: var(--space-6) 0 0; border: var(--border-hairline) solid var(--line-2); background: var(--bg); }
.nbcell + .nbcell { margin-top: var(--space-7); }
/* slim notebook margin: a right-aligned prompt rail (JupyterLab-style), ~40px */
.nbcell-in { display: grid; grid-template-columns: 40px 1fr; align-items: stretch;
  border-bottom: var(--border-hairline) solid var(--line); background: var(--surface); }
.nbcell-gutter { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--accent-text-low);
  padding: var(--space-3) var(--space-2) 0 0; text-align: right; border-right: var(--border-hairline) solid var(--line); user-select: none; white-space: nowrap; }
.nbcell-in pre { margin: 0; border: 0; background: transparent; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: var(--leading-snug); overflow-x: auto; }
.nbcell-in .cm { color: var(--ink-2); }
.nbcell-in .fn { color: var(--accent-text-low); }
.nbcell-in .str { color: var(--ink-2); }
.nbcell-out { display: grid; grid-template-columns: 40px 1fr; align-items: stretch; }
.nbcell-outgutter { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2);
  padding: var(--space-4) var(--space-2) 0 0; text-align: right; border-right: var(--border-hairline) solid var(--line); user-select: none; white-space: nowrap; }
.nbcell-body { padding: var(--space-4); min-width: 0; }

/* ---- widget shell ------------------------------------------------- */
.w { font-family: var(--f-sans); font-size: var(--text-sm); color: var(--ink); }
.w .w-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-bottom: var(--space-4); }
/* product register: titles are Plex Sans semibold, never the display serif */
.w-title { font-family: var(--f-sans); font-weight: var(--weight-semibold); font-size: var(--text-lead); color: var(--ink); letter-spacing: var(--tracking-tight); }
/* the header sub is body copy under the headline — Plex Sans, sentence case (not all-caps mono) */
.w-sub { font-family: var(--f-sans); font-size: var(--text-sm); color: var(--ink-2); text-transform: none; letter-spacing: 0; line-height: var(--leading-snug); }
.w-grouplabel { font-family: var(--f-mono); font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--ink-2); margin: var(--space-4) 0 var(--space-2); }
.w-mono { font-family: var(--f-mono); }
.w-faint { color: var(--ink-2); }
/* a whisper: a non-actionable placeholder note, one step below muted-text and lowercase */
.w-note { color: color-mix(in oklch, var(--ink-2) 64%, transparent); }
.gainink { color: var(--gain-text-low); }
.w-accentink { color: var(--accent-text-low); }
.w-mid { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* footer .value contract line */
.w-footline { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: var(--border-hairline) solid var(--line);
  font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); }
.w-tag { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2);
  border: var(--border-hairline) solid var(--line-2); padding: 1px var(--space-2); white-space: nowrap; }

/* ---- controls: inputs, selects, buttons --------------------------- */
.w-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
/* underline inputs — a single blue-on-focus bottom rule, not a box */
.w-inp, .w-sel { font-family: var(--f-mono); font-size: var(--text-sm); color: var(--ink);
  background: transparent; border: 0; border-bottom: var(--border-hairline) solid var(--line-2); padding: var(--space-2) var(--space-1);
  border-radius: 0; outline: none; }
.w-inp { flex: 1 1 160px; min-width: 0; }
/* typed values read medium-weight everywhere (like the dropdown values); placeholders stay a light hint */
.w-inp, .w-winp { font-weight: var(--weight-medium); }
.w-inp::placeholder { font-weight: var(--weight-regular); }
.w-inp.num { flex: none; width: 72px; }
.w-inp:focus { border-color: var(--accent-solid); }               /* typing = active */
.w-sel:focus-visible { border-color: var(--accent-solid); }      /* selects: keyboard focus only */
.w-sel { cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-7); }
.w-pricewrap { display: flex; align-items: center; gap: var(--space-2); }
/* clean slider — no native gray track/outline; blue fill via gradient (--fill set in JS) + blue thumb */
/* differentiate the two parts: muted-blue filled track vs bright-blue thumb, plus a bg-gap
   ring so the handle reads as a distinct knob instead of blending into the fill */
.w-range { -webkit-appearance: none; appearance: none; accent-color: var(--accent-solid); width: 120px; height: 4px; cursor: pointer; border-radius: var(--radius-none);
  --sf-fill: color-mix(in oklch, var(--accent-solid) 55%, var(--line-2));
  background: linear-gradient(var(--sf-fill), var(--sf-fill)) 0 / var(--fill, 100%) 100% no-repeat, var(--line-2); }
.w-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 0 2px var(--bg); cursor: pointer; }
.w-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 0 2px var(--bg); cursor: pointer; }
.w-range::-moz-range-track { height: 4px; background: var(--line-2); }
.w-range::-moz-range-progress { height: 4px; background: var(--sf-fill); }

/* copy actions use the system primary-small button; .w-copy only positions it */
.w-copy { margin-left: var(--space-2); }
.w-copy.ok { color: var(--success-text-low); border-color: var(--success-border); }

.w-empty { font-family: var(--f-mono); font-size: var(--text-sm); color: var(--ink-2); padding: var(--space-5); text-align: center; }

/* ---- status dot / chip / badge ------------------------------------ */
.w-dot { width: 7px; height: 7px; flex: 0 0 auto; background: var(--line-2); display: inline-block; }
.w-dot.on { background: var(--success-solid); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success-solid) 24%, transparent); }
.w-chip { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2);
  border: var(--border-hairline) solid var(--line-2); padding: 0 var(--space-2); text-transform: lowercase; }

/* ---- 01 setup: provider ROWS -------------------------------------- */
.w-tilegrid { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.w-tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--line); background: var(--bg); }
.w-tile + .w-tile { border-top: 0; }               /* collapse into one list */
.w-tile.on { border-left: var(--border-strong) solid var(--success-solid); }
/* provider mark = the system .model-ico; setup rows recede to ink-3 until connected */
.w-tile .model-ico { background: var(--ink-3); }
.w-tile.on .model-ico { background: var(--ink); }
.w-tile-id { flex: 0 0 auto; width: 168px; display: flex; flex-direction: column; gap: 1px; }
.w-tile-name { font-family: var(--f-sans); font-weight: var(--weight-semibold); }
.w-tile-env { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); }
.w-tile-status { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
.w-mask { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--f-mono); font-size: var(--text-micro);
  color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-keyico { flex: 0 0 auto; width: 13px; height: 13px; background: var(--ink-2);
  -webkit-mask: url(/assets/remix/Others/key-2-line.svg) center / contain no-repeat; mask: url(/assets/remix/Others/key-2-line.svg) center / contain no-repeat; }
.w-act { flex: 0 0 auto; margin-left: auto; }
/* subtle disconnect: an × icon only (tooltip "disconnect" on hover), gray → blue */
.w-disco { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  padding: 0; background: none; border: 0; cursor: pointer; }
.w-disco::before { content: ""; width: 14px; height: 14px; background: var(--ink-3); transition: background .12s;
  -webkit-mask: url(/assets/remix/System/close-line.svg) center / contain no-repeat; mask: url(/assets/remix/System/close-line.svg) center / contain no-repeat; }
.w-disco:hover::before { background: var(--accent-text-low); }
.w-inp.key { flex: 1 1 auto; min-width: 0; font-size: var(--text-micro); padding: var(--space-1) var(--space-2); }
.w-inp.err { border-color: var(--danger-solid); background: color-mix(in oklch, var(--danger-solid) 15%, transparent); }
.w-connact { display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; margin-left: auto; }
/* the connected badge sizes to match the connect/authorize buttons (same height, same right edge);
   left padding is tightened to var(--space-2) so the leading square sits with equal margin to the
   top, bottom, and left borders (optically balanced) */
.w-connact .badge { padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); line-height: var(--leading-snug); }
/* neutral hairline at rest; the success rule + tint arrive only once AUTHORIZED */
.w-om { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3);
  border: var(--border-hairline) solid var(--line-2); padding: var(--space-3) var(--space-4); }
.w-om.on { border-left: var(--border-strong) solid var(--success-solid); background: color-mix(in oklch, var(--success-solid) 8%, transparent); }
.w-omico { flex: 0 0 auto; width: 20px; height: 20px; background: var(--ink);
  -webkit-mask: url(/assets/model-logos/openmined/icon.svg) center / contain no-repeat; mask: url(/assets/model-logos/openmined/icon.svg) center / contain no-repeat; }
.w-om-id { min-width: 0; }
.w-om-title { font-family: var(--f-sans); font-weight: var(--weight-semibold); }

/* ---- 02 connections table ----------------------------------------- */
.w-conn-tbl { border: var(--border-hairline) solid var(--line); }
/* fixed action column (not auto) so every row — including the empty-action header — resolves its
   fr columns identically; otherwise each row is its own grid and the columns drift out of line */
.w-conn-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr 80px; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); text-align: left; }
.w-conn-row > *:last-child { justify-self: end; }
.w-conn-row:last-child { border-bottom: 0; }
.w-conn-row.head { background: var(--surface); font-family: var(--f-mono); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-2); }
/* rows are not click targets (only the action button is) — no whole-row hover */
/* inline status uses the system .status component (square = the state signal) */
.w-mask, .w-mono, .w-tile-env { font-weight: var(--weight-medium); }
/* provider cell: mark + bold name, matching the setup rows */
.w-conn-prov { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

/* ---- 03 browse list ----------------------------------------------- */
.w-list { border: var(--border-hairline) solid var(--line); max-height: 280px; overflow-y: auto; }
/* fixed columns (not flex) so bars share one track and price/ctx/action line up row-to-row */
.w-mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) 80px 72px 52px 26px; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline) solid var(--line); cursor: pointer; }
.w-mrow:last-child { border-bottom: 0; }
.w-mrow:hover { background: var(--surface); }
.w-mrow.on { background: var(--surface); }
/* model name is the row title → sans; the numbers beside it stay mono */
.w-browse .w-mid { font-family: var(--f-sans); }
/* search + sort are UI text, not code → sans (key-paste inputs elsewhere stay mono) */
.w-browse .w-inp, .w-browse .w-sel { font-family: var(--f-sans); }
/* labeled controls = the system .field / .field.dd (label + control on one underline,
   dropdowns as one click target) — only widget-specific sizing lives here */
.field .w-inp.num { width: 3.25rem; }
.w-pricelbl { flex: none; display: inline-block; min-width: 9ch; text-align: right; white-space: nowrap; }
/* the live value is emphasized (ink), the ≤ / out framing stays muted — mirrors sort: (muted) + ability (ink) */
.w-pricenum { color: var(--ink); }
/* breathing room between the ability bar and the price column */
.w-mrow .w-abilbar { margin-right: var(--space-2); }
/* lead cell groups the pick dot + provider icon so they sit tight, not gapped apart */
.w-mrow-lead { display: inline-flex; align-items: center; gap: var(--space-3); }
/* pure geometric check (Remix mask), not the font's calligraphic ✓; inherits the green .w-add.on color */
.w-chk { width: 13px; height: 13px; background: currentColor;
  -webkit-mask: url(/assets/remix/System/check-line.svg) center / contain no-repeat; mask: url(/assets/remix/System/check-line.svg) center / contain no-repeat; }
.w-mrow .model-ico { background: var(--ink-2); }
.w-mrow.on .model-ico { background: var(--ink); }
/* a selected row's ability bar turns green too, matching its status square + check */
.w-mrow.on .w-abilfill { background: var(--success-solid); }
.w-abilbar { flex: 0 0 70px; height: 5px; background: var(--line); overflow: hidden; }
.w-abilbar.big { flex: 1 1 auto; height: 8px; }
.w-abilfill { display: block; height: 100%; background: var(--data-blue); }  /* series blue = the family solid; gold is the win */
.w-price { flex: 0 0 auto; }
.w-ctx { flex: 0 0 auto; }
/* add = primary square (blue "+"); once added it flips to the success-tint chip ("✓") */
.w-add { width: 24px; height: 24px; justify-self: end; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: var(--text-sm); line-height: 1; border-radius: var(--radius-none);
  background: var(--accent-solid); color: var(--accent-contrast-text); border: var(--border-hairline) solid var(--accent-solid); }
.w-add.on { background: color-mix(in oklch, var(--success-solid) 15%, transparent); color: var(--success-text-low); border-color: color-mix(in oklch, var(--success-solid) 55%, transparent); }
/* hovering a selected (green ✓) swaps it to a grayscale × — signalling that a click removes it */
.w-add.on:hover { background: color-mix(in oklch, var(--ink) 8%, transparent); color: var(--ink-2); border-color: var(--line-2); }
.w-add.on:hover .w-chk { -webkit-mask-image: url(/assets/remix/System/close-line.svg); mask-image: url(/assets/remix/System/close-line.svg); }

/* ---- 04 model card ------------------------------------------------ */
.w-card-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.w-card-id { font-size: var(--text-body); font-weight: var(--weight-semibold); }
.w-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--border-hairline) solid var(--line); }
.w-card-head .model-ico { flex: 0 0 auto; width: 22px; height: 22px; background: var(--ink); }
.w-cardstat { padding: var(--space-3); border-right: var(--border-hairline) solid var(--line); }
.w-cardstat:last-child { border-right: 0; }
.w-cardstat-k { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-cardstat-v { font-size: var(--text-lead); margin-top: var(--space-1); }
.w-card-abil { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
/* ability label matches the stat keys (uppercase mono label device) — ability lives here, not in the grid */
.w-abil-k { flex: 0 0 auto; font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* ---- 05 compose --------------------------------------------------- */
/* the fusion members share one continuous SF fusion-gradient spine down their left edge —
   suggesting the models are fused together (vertical form of --fusion-grad; width = the earlier accent) */
.w-members { position: relative; display: flex; flex-direction: column; }
.w-members::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--border-strong); z-index: 1;
  background: var(--fusion-grad-y); }
.w-member { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border: var(--border-hairline) solid var(--line); border-bottom: 0; }
.w-member:last-child { border-bottom: var(--border-hairline) solid var(--line); }
.w-weight { flex: 0 0 auto; }
/* square cancel button, matching the small button's height (25px) */
.w-x { flex: 0 0 auto; align-self: center; width: 25px; height: 25px; box-sizing: border-box; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: var(--border-hairline) solid var(--line-2); background: var(--bg); }
.w-x::before { content: ""; width: 12px; height: 12px; background: var(--ink-2); transition: background .12s;
  -webkit-mask: url(/assets/remix/System/close-line.svg) center / contain no-repeat; mask: url(/assets/remix/System/close-line.svg) center / contain no-repeat; }
.w-x:hover::before { background: var(--ink); }
.w-x:hover { border-color: var(--ink-2); }
.w-addrow { margin: var(--space-2) 0; display: flex; gap: var(--space-2); }
.w-addrow .w-sel, .w-addrow .w-inp { flex: 1 1 auto; }
.w-recipe { display: flex; align-items: flex-start; gap: var(--space-2); background: var(--surface);
  border: var(--border-hairline) solid var(--line); padding: var(--space-3); margin-top: var(--space-3); }
/* the recipe wraps (no horizontal scrollbar); tag + copy stay top-aligned and out of the flow */
.w-recipe > .w-tag, .w-recipe .w-copy { flex: 0 0 auto; }
.w-url { flex: 1 1 auto; min-width: 0; font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink); background: transparent; border: 0; padding: 0;
  white-space: normal; overflow-wrap: anywhere; line-height: var(--leading-body); }
/* compose: names/labels are text → sans (weights/numbers stay mono); member icons prominent */
.w-compose .w-inp, .w-compose .w-sel { font-family: var(--f-sans); }
/* member name matches the weight of provider/model names elsewhere (semibold) and sits content-width
   so the judge chip can follow it directly; the weight/remove get pushed to the right */
.w-compose .w-mid { font-family: var(--f-sans); font-weight: var(--weight-semibold); flex: 0 1 auto; }
.w-nameinp { flex: none; width: 16rem; }
/* prompt = a labeled field like the dropdowns: fixed "shared prompt:" + a field whose example
   placeholder clears on type; wrapper owns the underline so label + input share one line */
.w-promptwrap { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--line-2); }
.w-promptwrap:focus-within { border-color: var(--accent-solid); }
.w-promptwrap .field-lbl { flex: 0 0 auto; }
.w-promptinp { flex: 1 1 auto; border-bottom: 0; padding-left: 0; font-weight: var(--weight-medium); }
.w-promptinp::placeholder { font-weight: var(--weight-regular); }
.w-member .model-ico { background: var(--ink); }
/* a flex spacer pushes the fixed weight+remove cluster to the right so it lines up on every row
   (dueling margin:auto split the free space by the variable name width — that was the "random" look) */
.w-member-sp { flex: 1 1 auto; min-width: 0; }
/* weights are editable — a compact right-aligned number field */
.w-winp { flex: 0 0 auto; width: 3.5rem; text-align: right; font-family: var(--f-mono); font-size: var(--text-sm); color: var(--ink);
  background: transparent; border: 0; border-bottom: var(--border-hairline) solid var(--line-2); padding: var(--space-1); border-radius: 0; outline: none; }
.w-winp:focus { border-color: var(--accent-solid); }
/* shares total: green when they sum to 100, orange otherwise; normalize link shows only when off */
.w-wtotalrow { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--space-3); padding: var(--space-2) var(--space-3) 0; }
.w-wtotal { font-family: var(--f-mono); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-wtotal.ok { color: var(--success-text-high); }
.w-wtotal.off { color: var(--warning-text-low); }   /* off-sum is a warning, not a win */
/* weight column header, aligned over the weight values (the x-placeholder reserves the remove column) */
.w-members-head { display: flex; align-items: center; padding: 0 var(--space-3) var(--space-1) var(--space-3); }
.w-col-head { margin-left: auto; margin-right: var(--space-3); font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-x-ph { flex: 0 0 25px; width: 25px; }
/* judge = a quiet GRAY outline role chip with a scales icon, medium weight to match other badges */
.w-judge { display: inline-flex; align-items: center; gap: var(--space-1); flex: 0 0 auto;
  font-family: var(--f-mono); font-size: var(--text-micro); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-label);
  background: transparent; color: var(--ink-2); border: var(--border-hairline) solid var(--line-2); padding: 0 var(--space-2); border-radius: var(--radius-none); line-height: 1.6; }
/* just the icon is orange (a gavel — clearer than the tiny scales); text + border stay gray */
.w-judge-ico { flex: 0 0 auto; width: 13px; height: 13px; background: var(--gain-solid);
  -webkit-mask: url(/assets/remix/Finance/auction-line.svg) center / contain no-repeat; mask: url(/assets/remix/Finance/auction-line.svg) center / contain no-repeat; }

/* ---- 06 run panel ------------------------------------------------- */
.w-runform { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; margin-bottom: var(--space-4); }
/* hide number spinners so inputs match the selects' height → every underline shares one plane */
.w-runform .w-inp[type=number] { -moz-appearance: textfield; appearance: textfield; }
.w-runform .w-inp[type=number]::-webkit-inner-spin-button, .w-runform .w-inp[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* full-set deactivates the "first n" chooser it modifies */
.w-disabled { opacity: 0.4; pointer-events: none; }
/* the estimate is a figure table (reuses the card-grid), not an inline sentence */
.w-costline { margin: var(--space-2) 0; }
/* "full" uses the shared .checkbox component; only the runform baseline alignment is local */
.w-fullchk { align-items: baseline; gap: var(--space-1); }
.w-fullchk .checkbox-box { align-self: center; }   /* box centers on the label's text line */
/* toggle label (wrong only · mine only) matches the "full" checkbox: sans, sentence case */
.w-toggle-lbl { font-family: var(--f-sans); font-size: var(--text-sm); color: var(--ink-2); }
.w-runaction { margin-top: var(--space-3); }
.w-fuse-row { display: flex; justify-content: flex-end; }   /* run fusion button right-aligns */
/* the gradient fades in as an overlay so the button box never changes size (no squatter); text stays above */
.w-fusebtn { position: relative; overflow: hidden; border: 0; transition: color .5s ease; }
.w-fusebtn::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--fusion-grad-flow) 0 0 / 700px 100% repeat-x; opacity: 0; transition: opacity .55s ease; }
.w-fusebtn-t { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.w-fusebtn-play { font-size: 0.8em; line-height: 1; }
.w-fusebtn:hover, .w-fusebtn:focus-visible { color: #141414; }
.w-fusebtn:hover::before, .w-fusebtn:focus-visible::before { opacity: 0.85; animation: w-fuseflow 7s linear infinite; }
/* light mode: the standard primary hover (darker blue, light text) — a translucent
   gradient over blue muddies, and the full-bright one demands dark text; the
   gradient-flow hover is a dark-mode signature */
[data-theme="light"] .w-fusebtn:hover, [data-theme="light"] .w-fusebtn:focus-visible { color: var(--accent-contrast-text); background: var(--accent-solid-hover); }
[data-theme="light"] .w-fusebtn:hover::before, [data-theme="light"] .w-fusebtn:focus-visible::before { opacity: 0; animation: none; }
@keyframes w-fuseflow { from { background-position-x: 0; } to { background-position-x: 700px; } }
/* on completion the estimate collapses to a row: green box check (left) + timestamp + estimate */
.w-costdone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border: var(--border-hairline) solid var(--line); }
/* just a plain checkmark (no box) so it doesn't compete with the result card below it */
.w-costcheck { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.w-costcheck::after { content: ""; width: 16px; height: 16px; background: var(--ink);
  -webkit-mask: url(/assets/remix/System/check-line.svg) center / contain no-repeat; mask: url(/assets/remix/System/check-line.svg) center / contain no-repeat; }
/* result header truncates to one row: fusion identity + muted context */
.w-runname { font-family: var(--f-sans); font-weight: var(--weight-medium); }
.w-runctx { font-family: var(--f-sans); }
/* progress "pushes": the gradient (gold → white → BLUE) is anchored to the fill's right edge and
   sized to the full track (background-size set inline = 10000/prog%). So the leading edge is always
   blue, and as the fill grows the whiteish middle then the gold reveal on the LEFT (trailing) side. */
.w-progress { position: relative; height: 8px; background: var(--line); overflow: hidden; }
.w-progfill { display: block; height: 100%; background-repeat: no-repeat; background-position: right center; transition: width .11s linear;
  background-image: linear-gradient(90deg,#d8860e 0%,#dc9544 8%,#de9f5b 16%,#e2b280 27%,#e7c3a0 34%,#ebd4be 40%,#edddcd 43%,#f2e3df 46%,#eeebf3 49%,#e7edf5 52%,#dde6f4 56%,#d2dff2 60%,#bfd4f2 65%,#abc8f2 71%,#97bcf3 77%,#83b0f3 84%,#6fa4f3 90%,#5a98f3 96%,#4f91f2 100%); }
.w-runmeta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
/* result card: neutral hairline surface — the fusion-gradient band lives on the SCORE cell */
.w-runresult { display: flex; flex-direction: column; gap: var(--space-3); border: var(--border-hairline) solid var(--line); padding: var(--space-3); }
/* the score cell carries the win: a fusion-gradient band as its left edge, flowing
   through the gradient on a slow loop (seamless vertical palindrome tile scrolled
   by background-position-y) */
/* margin -1px: the band overlays the grid's gray border — the band IS the left edge */
.w-rescell-score { position: relative; padding-left: calc(var(--space-3) + 3px); margin-left: -1px; }
.w-rescell-score::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--fusion-grad-y-flow) 0 0 / 100% 600px repeat-y;
  animation: w-ruleflow 9s linear infinite; }
@keyframes w-ruleflow { from { background-position-y: 0; } to { background-position-y: 600px; } }
@media (prefers-reduced-motion: reduce) { .w-rescell-score::before { animation: none; background: var(--fusion-grad-y); } }
/* collapsed done-strip: ✓ · model identity (sans, primary) · when (faint) · receipt (faint, right) */
.w-runmodel { font-family: var(--f-sans); font-weight: var(--weight-medium); color: var(--ink); }
.w-costmetrics { margin-left: auto; }
/* SOTA badge (.badge-sota, a system component) sits after the score — enlarge the score
   and tighten the badge so the number's height matches the badge and they sit nicely together */
/* score is bolder and its color pulses gold↔blue IN SYNC with the SOTA badge's outline */
.w-score-v { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); animation: sota-pulse 7s ease-in-out infinite; }
.w-score-v .badge-sota { padding: .12em .5em; font-size: var(--text-sm); }
.w-score-v .badge-sota .gt-wave { height: 1em; width: 1em; }
@media (prefers-reduced-motion: reduce) { .w-score-v { animation: none; color: var(--gold-11); } }
/* ghost buttons (reset · cancel) = the system .btn.ghost (muted outline promoted 2026-08-05) */
.w-runresult-head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.w-resgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: var(--border-hairline); background: var(--line); border: var(--border-hairline) solid var(--line); }
.w-rescell { background: var(--bg); padding: var(--space-2) var(--space-3); }
.w-rescell-k { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-rescell-v { font-size: var(--text-lead); margin-top: var(--space-1); font-variant-numeric: tabular-nums; }

/* ---- 07 stats ----------------------------------------------------- */
.w-stats-tbl, .w-board-tbl { border: var(--border-hairline) solid var(--line); }
.w-stats-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); }
.w-stats-row:last-child { border-bottom: 0; }
.w-stats-row.head { background: var(--surface); }
/* column headers = the system .th-sort (+ --static for the non-sortable model column) */
/* stats table = left-aligned throughout (system consistent); rows aren't clickable → no hover */
.w-stats-tbl .num { text-align: left; }
/* model cell: provider icon + sans name (keys/numbers stay mono), like the other tables */
.w-stats-model { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.w-stats-name { font-family: var(--f-sans); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-stats-model .model-ico { background: var(--ink-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.left { text-align: left; }
/* contribution = the system .score-cell; the fill reads as magnitude → data-viz hue (gold is the win) */
.w-stats-tbl .score-fill { background: var(--data-blue); }

/* ---- 08 inspect --------------------------------------------------- */
/* the split's LEFT line is drawn INSIDE the master (inset shadow) instead of as a border,
   so a selected row's theme rule paints ON TOP of it — no gray visible beside the color */
.w-split { display: grid; grid-template-columns: 260px 1fr; border: var(--border-hairline) solid var(--line); border-left: 0; }
.w-master { border-right: var(--border-hairline) solid var(--line); max-height: 340px; overflow-y: auto;
  box-shadow: inset var(--border-hairline) 0 0 var(--line); }
.w-qrow { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline) solid var(--line); cursor: pointer;
  box-shadow: inset var(--border-hairline) 0 0 var(--line); }   /* per-row left line (see board note) */
.w-qrow:hover { background: var(--surface); }
/* selection highlights in the question's OWN theme: green for correct, red for wrong.
   Tint stays QUIET (8%) so muted text reads fine on it; the LEFT rule replaces the
   master's gray line at the same edge (rows paint above the master's inset line);
   top/bottom keep the normal gray hairlines */
.w-qrow.sel.ok { background: color-mix(in oklch, var(--success-solid) 8%, transparent); box-shadow: inset var(--border-strong) 0 0 var(--success-solid); }
.w-qrow.sel.bad { background: color-mix(in oklch, var(--danger-solid) 8%, transparent); box-shadow: inset var(--border-strong) 0 0 var(--danger-solid); }
.w-qnum { flex: 0 0 auto; white-space: nowrap; }
.w-qprev { flex: 1 1 auto; min-width: 0; font-family: var(--f-sans); font-size: var(--text-micro); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-detail { padding: var(--space-4); min-width: 0; }
/* detail header: question id + the fusion verdict for this question */
.w-detail-head { display: flex; align-items: center; gap: var(--space-3); }
/* verdict = one themed system badge (icon + word), .badge--ok / .badge--bad */
.w-qprompt { font-family: var(--f-sans); font-size: var(--text-body); line-height: var(--leading-snug); margin: var(--space-3) 0 var(--space-4); }
.w-answers { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.w-ans { display: flex; flex-direction: column; gap: 2px; border: var(--border-hairline) solid var(--line-2); padding: var(--space-2) var(--space-3); flex: 1 1 140px; }
/* theme-colored cards follow the system status-theme recipe (see components/style.css):
   text = *-text-low · border = 55% solid mix · tint = 15% solid mix */
.w-ans.gold { border-color: color-mix(in oklch, var(--gain-solid) 55%, transparent); background: color-mix(in oklch, var(--gain-solid) 15%, transparent); }
.w-ans.gold .w-anslbl { color: var(--gain-text-low); }
.w-ans.ok { border-color: color-mix(in oklch, var(--success-solid) 55%, transparent); background: color-mix(in oklch, var(--success-solid) 15%, transparent); }
.w-ans.ok .w-anslbl { color: var(--success-text-low); }
.w-ans.bad { border-color: color-mix(in oklch, var(--danger-solid) 55%, transparent); background: color-mix(in oklch, var(--danger-solid) 15%, transparent); }
.w-ans.bad .w-anslbl { color: var(--danger-text-low); }
.w-anslbl { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
/* the ✓/✗ is the row's icon, ALIGNED WITH THE TITLE line (not row-centered) so it stays
   put when the reasoning expands; title + reasoning left-align in a body column beside it */
.w-part { display: flex; align-items: flex-start; gap: var(--space-3); border: var(--border-hairline) solid var(--line); border-bottom: 0; padding: var(--space-2) var(--space-3); cursor: pointer; transition: background .12s; }
.w-part > .markbox { margin-top: 3px; }   /* optically centers on the title line */
.w-part.static { cursor: default; }       /* nothing to expand → not an interactive row */
.w-part:last-of-type { border-bottom: var(--border-hairline) solid var(--line); }
.w-part:hover { background: var(--surface); }
.w-part.open { background: var(--surface); }
.w-part-body { flex: 1 1 auto; min-width: 0; }
.w-part-top { display: flex; align-items: center; gap: var(--space-2); }
/* participant identity = provider icon + sans model name, like the browse/stats tables */
.w-part-model { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.w-part-name { font-family: var(--f-sans); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-part-model .model-ico { background: var(--ink-2); }
.w-part-ans { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* caret = a small filled triangle matching the dropdowns' caret (ink-3), rotates on expand */
.w-part-caret { flex: 0 0 auto; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent var(--ink-3); transition: transform .12s ease; }
.w-part.open .w-part-caret { transform: rotate(90deg); border-left-color: var(--accent-text-low); }
.w-part-why { font-family: var(--f-sans); font-size: var(--text-micro); color: var(--ink-2); line-height: var(--leading-snug); margin-top: var(--space-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-part.open .w-part-why { display: block; overflow: visible; -webkit-line-clamp: unset; }

/* ---- 09 leaderboard ----------------------------------------------- */
/* single-row widget header: title · labeled control · toggle pushed right */
.w .w-head.w-head-row { flex-direction: row; align-items: baseline; gap: var(--space-4); }
/* controls row UNDER the headline: labeled select left, toggle right */
.w-head-controls { display: flex; align-items: baseline; gap: var(--space-4); align-self: stretch; margin-top: var(--space-2); }
/* intentional columns: rank · entry (icon+name, flex) · kind · score (number + a fixed
   COMPARABLE band, the stats-table pattern — no more text-over-band) · $ · fork.
   Headers left-align with their column content (system table convention). */
.w-board-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 60px minmax(176px, 1.1fr) 56px 58px; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); }
.w-board-row:last-child { border-bottom: 0; }
.w-board-row.head { background: var(--surface); font-family: var(--f-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-2); }
.w-board-tbl .num { text-align: left; }
/* rows aren't click targets (only fork is) → no row hover; "mine" is marked by the chip
   alone (no row highlight — only the WINNER gets emphasis) */
/* left line drawn per-ROW (inset, above the row's own bg — a table-level line gets
   covered by header/tinted-row backgrounds); the winner's theme rule replaces it */
.w-board-tbl { border-left: 0; box-shadow: inset var(--border-hairline) 0 0 var(--line); }
.w-board-row { box-shadow: inset var(--border-hairline) 0 0 var(--line); }
.w-board-row.w-lead { box-shadow: inset var(--border-strong) 0 0 var(--brand, var(--accent-solid)); }
.w-board-row.w-lead .model-ico { background: var(--brand, var(--ink)); }
/* entry = kind icon (😱 for fusions, provider mark for singles) + sans-medium name + chip */
.w-board-entry { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.w-board-entry .model-ico { background: var(--ink-2); }
/* the 😱 stays full-color only on the WINNING fusion; the rest go grayscale */
.w-bfico { flex: 0 0 auto; font-size: 15px; line-height: 1; filter: grayscale(1); opacity: .8; }
.w-lead .w-bfico { filter: none; opacity: 1; }
.w-board-label { font-family: var(--f-sans); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* score = the system .score-cell (number + comparable band; non-leaders grayscale,
   leading fusion = .grad, leading single = .brand via the row's inline --brand) */
.w-board-act .w-copy { margin-left: 0; }

/* ---- 10 script ---------------------------------------------------- */
/* language switcher = the system .tabs segmented control */
.w-code { margin: 0; font-family: var(--f-mono); font-size: var(--text-sm); line-height: var(--leading-snug);
  background: var(--surface); border: var(--border-hairline) solid var(--line); padding: var(--space-4); overflow-x: auto; color: var(--ink); }
.w-scriptfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }

/* ---- responsive --------------------------------------------------- */
@media (max-width: 680px) {
  .w-tilegrid { grid-template-columns: 1fr 1fr; }
  .w-card-grid { grid-template-columns: 1fr; }   /* 3-stat figure tables stack cleanly, no orphan cell */
  .w-split { grid-template-columns: 1fr; }
  .w-master { border-right: 0; border-bottom: var(--border-hairline) solid var(--line); max-height: 200px; }
  .nbcell-in, .nbcell-out { grid-template-columns: 34px 1fr; }
  .nbcell-gutter, .nbcell-outgutter { padding-right: var(--space-1); }
  .w-conn-row { grid-template-columns: 1fr 1fr 80px; }
  .w-conn-row span:nth-child(3), .w-conn-row span:nth-child(4) { display: none; }
}

/* ============================================================
   PRODUCT-REGISTER DECISIONS (merged into the base rules above,
   2026-07-30 consolidation — one rule, one place):
   · type — Plex Sans everywhere, never the display serif
   · GREEN = success/connected/correct (on the indicator, not the word)
   · RED = error/incorrect · BLUE = interaction/focus/selection/ownership
   · magnitude bars = data-viz blue
   · GOLD is rationed to the WIN only: the SOTA badge + score pulse, the
     fusion progress/rule gradients' warm half, the leading board row,
     and the fusion score bars. Nothing else is gold.
   ============================================================ */