/* =====================================================================
   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 -------------------------------------------- */
.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); }
.wv-note { border: var(--border-hairline) solid var(--line); border-left: var(--border-strong) solid var(--gain);
  background: var(--surface); padding: var(--space-3) var(--space-4); margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--ink-2); }
.wv-note code { font-size: 0.9em; }

.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: var(--gain); }
.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); }
.nbcell-in { display: grid; grid-template-columns: 54px 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(--gain);
  padding: var(--space-3) 0 0 var(--space-3); 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-3); }
.nbcell-in .fn { color: var(--gain); }
.nbcell-in .str { color: var(--ink-2); }
.nbcell-out { display: grid; grid-template-columns: 54px 1fr; align-items: stretch; }
.nbcell-outgutter { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3);
  padding: var(--space-4) 0 0 var(--space-3); 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; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.w-title { font-family: var(--f-display); font-size: var(--text-lead); color: var(--ink); letter-spacing: var(--tracking-tight); }
.w-sub { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-grouplabel { font-family: var(--f-mono); font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--ink-3); margin: var(--space-4) 0 var(--space-2); }
.w-mono { font-family: var(--f-mono); }
.w-faint { color: var(--ink-3); }
.gainink { color: var(--gain); }
.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-3); }
.w-tag { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--gain);
  border: var(--border-hairline) solid var(--gain); 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); }
.w-inp, .w-sel { font-family: var(--f-mono); font-size: var(--text-sm); color: var(--ink);
  background: var(--bg); border: var(--border-hairline) solid var(--line-2); padding: var(--space-2) var(--space-3);
  border-radius: 0; outline: none; }
.w-inp { flex: 1 1 160px; min-width: 0; }
.w-inp.inline { flex: 0 0 auto; width: 140px; }
.w-inp.num { flex: none; width: 72px; }
.w-inp:focus, .w-sel:focus { border-color: var(--gain); }
.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); }
.w-range { accent-color: var(--gain); width: 120px; }

.w-btn { font-family: var(--f-mono); font-size: var(--text-sm); cursor: pointer; border-radius: 0;
  border: var(--border-hairline) solid var(--ink); background: var(--bg); color: var(--ink);
  padding: var(--space-2) var(--space-4); transition: background .15s, color .15s, border-color .15s; }
.w-btn:hover { background: var(--ink); color: var(--bg); }
.w-btn.tiny { padding: var(--space-1) var(--space-3); font-size: var(--text-micro); }
.w-btn.gain { border-color: var(--gain); color: var(--gain); }
.w-btn.gain:hover { background: var(--gain); color: var(--bg); }
.w-btn.ghost { border-color: var(--line-2); color: var(--ink-2); }
.w-btn.ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); }

.w-copy { font-family: var(--f-mono); font-size: var(--text-micro); cursor: pointer; border-radius: 0;
  border: var(--border-hairline) solid var(--line-2); background: var(--bg); color: var(--ink-2);
  padding: 1px var(--space-2); margin-left: var(--space-2); }
.w-copy:hover { border-color: var(--ink-3); color: var(--ink); }
.w-copy.ok { color: var(--gain); border-color: var(--gain); }

.w-check { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-check input { accent-color: var(--gain); }

.w-empty { font-family: var(--f-mono); font-size: var(--text-sm); color: var(--ink-3); 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(--gain); box-shadow: 0 0 0 3px var(--gain-bg); }
.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; }
.w-chip.gain { color: var(--gain); border-color: var(--gain); }
.w-badge { font-family: var(--f-mono); font-size: var(--text-micro); width: 16px; height: 16px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; border: var(--border-hairline) solid; }
.w-badge.sm { width: 14px; height: 14px; }
.w-badge.ok { color: var(--gain); border-color: var(--gain); background: var(--gain-bg); }
.w-badge.bad { color: var(--blind); border-color: var(--blind); background: var(--blind-bg); }

/* ---- 01 setup: provider tiles ------------------------------------- */
.w-tilegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.w-tile { border: var(--border-hairline) solid var(--line-2); padding: var(--space-3); background: var(--bg); }
.w-tile.on { border-left: var(--border-strong) solid var(--gain); }
.w-tile-top { display: flex; align-items: center; gap: var(--space-2); }
.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-3); margin: var(--space-1) 0 var(--space-2); }
.w-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.w-mask { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-keyrow { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }
.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(--blind); background: var(--blind-bg); }
.w-connact { display: inline-flex; align-items: center; gap: var(--space-1); }
.w-om { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4);
  border: var(--border-hairline) solid var(--line-2); border-left: var(--border-strong) solid var(--cat-blue); padding: var(--space-3); }
.w-om.on { border-left-color: var(--gain); background: var(--gain-bg); }
.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); }
.w-conn-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--line); }
.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-3); }
.w-conn-row:not(.head):hover { background: var(--surface); }
.w-status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); }
.w-status.on { color: var(--gain); }

/* ---- 03 browse list ----------------------------------------------- */
.w-list { border: var(--border-hairline) solid var(--line); max-height: 280px; overflow-y: auto; }
.w-mrow { display: flex; align-items: center; gap: var(--space-3); padding: 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(--gain-bg); }
.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(--gain); }
.w-price { flex: 0 0 auto; }
.w-ctx { flex: 0 0 auto; }
.w-add { flex: 0 0 18px; text-align: center; font-family: var(--f-mono); color: var(--ink-3); border: var(--border-hairline) solid var(--line-2); }
.w-add.on { color: var(--gain); border-color: var(--gain); }

/* ---- 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(4, 1fr); border: var(--border-hairline) solid var(--line); }
.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-3); 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); }

/* ---- 05 compose --------------------------------------------------- */
.w-members { display: flex; flex-direction: column; }
.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; }
.w-x { font-family: var(--f-mono); cursor: pointer; border: var(--border-hairline) solid var(--line-2); background: var(--bg); color: var(--ink-3); width: 20px; height: 20px; line-height: 1; padding: 0; }
.w-x:hover { color: var(--blind); border-color: var(--blind); }
.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: center; gap: var(--space-2); background: var(--surface);
  border: var(--border-hairline) solid var(--line); padding: var(--space-3); margin-top: var(--space-3); overflow-x: auto; }
.w-url { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink); background: transparent; border: 0; padding: 0; white-space: nowrap; }

/* ---- 06 run panel ------------------------------------------------- */
.w-runform { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-3); }
.w-field { display: flex; flex-direction: column; gap: var(--space-1); }
.w-fieldlabel { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-costline { padding: var(--space-3); background: var(--surface); border: var(--border-hairline) solid var(--line); font-size: var(--text-sm); }
.w-runaction { margin-top: var(--space-3); }
.w-progress { height: 8px; background: var(--line); overflow: hidden; }
.w-progfill { display: block; height: 100%; background: var(--gain-grad); transition: width .09s linear; }
.w-runmeta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.w-runresult { display: flex; flex-direction: column; gap: var(--space-3); border: var(--border-hairline) solid var(--gain); border-left: var(--border-strong) solid var(--gain); background: var(--gain-bg); padding: var(--space-3); }
.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(5, 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-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-rescell-v { font-size: var(--text-body); 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); }
.w-stats-row:not(.head):hover { background: var(--surface); }
.w-th { font-family: var(--f-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--ink-3); cursor: pointer; text-align: right; }
.w-th.left { text-align: left; cursor: default; }
.w-th.active { color: var(--gain); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.left { text-align: left; }
.w-contribcell { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.w-contribbar { flex: 1 1 auto; height: 6px; background: var(--line); overflow: hidden; }
.w-contribfill { display: block; height: 100%; background: var(--gain); }

/* ---- 08 inspect --------------------------------------------------- */
.w-split { display: grid; grid-template-columns: 260px 1fr; border: var(--border-hairline) solid var(--line); }
.w-master { border-right: var(--border-hairline) solid var(--line); max-height: 340px; overflow-y: auto; }
.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; }
.w-qrow:hover { background: var(--surface); }
.w-qrow.sel { background: var(--gain-bg); box-shadow: inset var(--border-strong) 0 0 var(--gain); }
.w-qprev { 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; }
.w-qprompt { font-family: var(--f-sans); font-size: var(--text-body); line-height: var(--leading-snug); margin: var(--space-2) 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; }
.w-ans.gold { border-left: var(--border-strong) solid var(--ink); }
.w-ans.ok { border-left: var(--border-strong) solid var(--gain); background: var(--gain-bg); }
.w-ans.bad { border-left: var(--border-strong) solid var(--blind); background: var(--blind-bg); }
.w-anslbl { font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.w-part { border: var(--border-hairline) solid var(--line); border-bottom: 0; padding: var(--space-2) var(--space-3); cursor: pointer; transition: background .12s; }
.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-top { display: flex; align-items: center; gap: var(--space-2); }
.w-part-ans { flex: 0 0 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-part-caret { flex: 0 0 auto; font-family: var(--f-mono); font-size: var(--text-micro); color: var(--ink-3); width: 12px; text-align: center; }
.w-part.open .w-part-caret { color: var(--gain); }
.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 ----------------------------------------------- */
.w-board-row { display: grid; grid-template-columns: 28px 1fr 90px 60px 56px auto; 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-3); }
.w-board-row:not(.head):hover { background: var(--surface); }
.w-board-row.mine { background: var(--gain-bg); }
.w-board-row.w-lead { box-shadow: inset var(--border-strong) 0 0 var(--gain); }
.w-board-name { position: relative; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.w-scorebar { position: absolute; inset: 0; z-index: 0; background: var(--line); opacity: .25; }
.w-scorefill { display: block; height: 100%; background: var(--ink-3); }
.w-scorefill.fusion { background: var(--gain); }
.w-scorefill.grad { background: var(--gain-grad); }
.w-board-label { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-board-act .w-copy { margin-left: 0; }

/* ---- 10 script ---------------------------------------------------- */
.w-tabs { display: inline-flex; border: var(--border-hairline) solid var(--line-2); }
.w-tab { font-family: var(--f-mono); font-size: var(--text-micro); cursor: pointer; background: var(--bg); color: var(--ink-2);
  border: 0; border-right: var(--border-hairline) solid var(--line-2); padding: var(--space-1) var(--space-3); text-transform: lowercase; }
.w-tab:last-child { border-right: 0; }
.w-tab.on { background: var(--gain); color: var(--bg); }
.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, .w-card-grid { grid-template-columns: 1fr 1fr; }
  .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-left: var(--space-2); }
  .w-conn-row { grid-template-columns: 1fr 1fr auto; }
  .w-conn-row span:nth-child(3), .w-conn-row span:nth-child(4) { display: none; }
}