/* ===========================================================================
   workbench.css — THE SHEET, transcribed.

   Geometry ported value-for-value from the shipped components so the hero demo
   is the product, not a drawing of it:

     SheetRail.tsx        rail 48h · padH 32 · gap 14 · wordmark 15h (AR 6.44)
     SheetSearchBar.tsx   880w · 54h · padH 18 · gap 12 · caret 19/22 intel
                          RUN key: hairline, r4, 8/4, console 12 ls 1.3
     AnswerMasthead.tsx   question Rubik-Med 23/30 · scope mono 16/21 dim
                          strip: padT 14 · rowGap 10 · colGap 40 · key w168
     ResultTable.tsx      budgeted: gap 8 · padB 9 · lead capped 300
     WorkbenchCell.tsx    budgeted: pill padH 9 padV 5 r4 minW 96 ·
                          value 14/19 · rank 12 faint
   =========================================================================== */

/* --- the rail ----------------------------------------------------------- */
.wb-rail {
  display: flex; align-items: center; gap: 14px;
  height: 48px; padding: 0 32px;
  border-bottom: 1px solid var(--divider);
}
.wb-rail img.wordmark { height: 15px; width: 96.6px; display: block; }
.wb-rail .sep { width: 1px; height: 14px; background: var(--divider); }
.wb-rail .item {
  font-family: var(--console); font-size: 12px; letter-spacing: 1.7px;
  color: var(--dim); text-transform: uppercase;
}
.wb-rail .spacer { flex: 1; }
.wb-rail .quiet {
  font-family: var(--console); font-size: 12px; letter-spacing: 1.7px;
  color: var(--faint); font-variant-numeric: tabular-nums; text-transform: uppercase;
}

/* --- the one search bar ------------------------------------------------- */
.wb-bar {
  width: 880px; max-width: 100%;
  background: var(--plate); border: 1px solid var(--seam); border-radius: var(--r-module);
  display: flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 18px;
}
.wb-bar .caret {
  font-family: var(--mono); font-size: 19px; line-height: 22px; color: var(--intel);
}
.wb-bar .q {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 20px; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.wb-bar .q.placeholder { color: var(--faint); }
.wb-bar .q::after {
  content: '_'; color: var(--intel); animation: wb-caret 1.06s steps(1) infinite;
}
.wb-bar .q.settled::after { content: ''; }
@keyframes wb-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.wb-run {
  font-family: var(--console); font-size: 12px; letter-spacing: 1.3px;
  color: var(--faint); border: 1px solid var(--divider); border-radius: var(--r-chip);
  padding: 4px 8px; white-space: nowrap;
}
.wb-run.live { color: var(--intel); border-color: var(--intel-dim); }

/* --- the answer masthead ------------------------------------------------ */
.wb-masthead {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 6px 0 16px; border-bottom: 1px solid var(--divider);
}
.wb-mast-left { flex: 1; min-width: 0; }
.wb-question {
  font-family: var(--body); font-weight: 500; font-size: 23px; line-height: 30px;
  color: var(--text);
}
.wb-scope {
  font-family: var(--mono); font-size: 16px; line-height: 21px; color: var(--dim);
  margin-top: 7px; font-variant-numeric: tabular-nums;
}
.wb-share {
  margin-top: 6px; border: 1px solid var(--divider); border-radius: var(--r-chip);
  padding: 6px 11px; font-family: var(--console); font-size: 12px;
  letter-spacing: 1.3px; color: var(--faint);
}
.wb-strip {
  display: flex; flex-wrap: wrap; padding: 14px 0 6px;
  row-gap: 10px; column-gap: 40px;
}
.wb-disc { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 400px; min-width: 0; }
.wb-disc-k {
  width: 168px; flex: none;
  font-family: var(--console); font-size: 12px; line-height: 18px; letter-spacing: 1.3px;
  color: var(--faint);
}
.wb-disc-v {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 16px; line-height: 22px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* --- the board ---------------------------------------------------------- */
.wb-table { padding: 6px 8px; }
.wb-thead {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 0 4px 9px; border-bottom: 1px solid var(--divider);
}
.wb-th {
  flex: 1; min-width: 0; padding: 0 9px;
  font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: .9px;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.wb-th.num { text-align: right; }
.wb-th.lead, .wb-td.lead { flex: 1; max-width: 300px; }
.wb-tr {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 4px; border-bottom: 1px solid var(--gridline);
}
.wb-td { flex: 1; min-width: 0; padding: 3px 0; }
.wb-td.num { display: flex; justify-content: flex-end; }
.wb-pill {
  display: inline-block; padding: 5px 9px; border-radius: var(--r-chip); min-width: 96px;
  font-family: var(--body); font-size: 14px; line-height: 19px; color: var(--text);
}
.wb-td.num .wb-pill {
  font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums;
}
.wb-pill.ent { min-width: 0; color: var(--sage); text-decoration: underline; }
.wb-rank {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: pre;
}

/* --- the processing state (Terminal.shimmerBand — system inks, never gold) */
.wb-pending { display: none; padding: 26px 8px 0; }
.wb-pending.on { display: block; }
.wb-pending .bone {
  height: 13px; border-radius: 2px; background: var(--raised);
  margin-bottom: 10px; position: relative; overflow: hidden;
}
.wb-pending .bone::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(226,230,238,.09), transparent);
  animation: wb-sweep 1.15s linear infinite;
}
@keyframes wb-sweep { from { transform: translateX(-100%) } to { transform: translateX(100%) } }
.wb-pending .line { font-family: var(--console); font-size: 12px; letter-spacing: 1.5px; color: var(--faint); margin-bottom: 16px; }

.demo-answer { opacity: 0; transform: translateY(6px); transition: opacity .34s ease, transform .34s ease; }
.demo-answer.on { opacity: 1; transform: none; }

/* --- the calibration board ---------------------------------------------
   Same cell grammar as the answer board, washed on the DISAGREEMENT ladder
   (heatScale.disagreementWash against WIN_PCT_STOPS = 3/6/10 pp) because the
   reference is the model's own claim, not the other rows. Under the first
   stop the wash is silence — which is the whole argument. */
.cal { padding: 8px 10px 10px; }
.cal-head, .cal-row { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.cal-head { padding-bottom: 9px; border-bottom: 1px solid var(--divider); }
.cal-row { padding: 6px 4px; border-bottom: 1px solid var(--gridline); }
.cal-row:last-child { border-bottom: none; }
.cal-c { flex: 1; min-width: 0; text-align: right; }
.cal-c.lead { flex: 1.25; text-align: left; }
.cal-head .cal-c {
  font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: .9px;
  color: var(--faint); padding: 0 9px;
}
.cal-row .v {
  display: inline-block; padding: 5px 9px; border-radius: var(--r-chip); min-width: 92px;
  font-family: var(--mono); font-size: 15px; line-height: 19px; color: var(--text);
  font-variant-numeric: tabular-nums; text-align: right;
}
.cal-row .cal-c.lead .v {
  font-family: var(--body); font-size: 14px; text-align: left; min-width: 0; color: var(--dim);
}
