/* ============================================================================
 * workbench.css — OncoBalance v3.1 Research Workbench
 * Extends style.css (design tokens, palette, typography) with the new
 * 7-section SPA layout: tab navigation, instance form, variable cards,
 * results grid, longitudinal table, benchmark table, model card, legal.
 * Visual system (palette, fonts, theme toggle) is unchanged from style.css.
 * ==========================================================================*/

/* ---------- Tab navigation ---------- */
.tabnav{
  position:sticky; top:57px; z-index:15;
  background:var(--surface); background-image:var(--surface-grad); border-bottom:1px solid var(--divider);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tabnav-list{
  display:flex; list-style:none; max-width:1100px; margin:0 auto;
  padding:0 var(--sp4); gap:var(--sp1);
}
.tab-link{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:var(--sp3) var(--sp4); font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--muted); border-bottom:2px solid transparent; min-height:44px;
  transition:color var(--tr),border-color var(--tr);
}
.tab-link:hover{ color:var(--text); text-decoration:none; }
.tab-link.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- Tab page entrance animation ---------- */
.tabpage{ animation:onco-tab-in var(--tr-slow) both; }
@keyframes onco-tab-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){ .tabpage{ animation:none; } }

/* ---------- Section headers ---------- */
.section-head{ max-width:1100px; margin:var(--sp8) auto var(--sp6); padding:0 var(--sp6); }
.section-head h1{ font-size:var(--text-2xl); margin-bottom:var(--sp2); font-weight:600; }

main{ padding-top: var(--sp2); }
.tabpage{ max-width:1100px; margin:0 auto; padding:0 var(--sp6) var(--sp12); }
.tabpage .hero{ max-width:none; padding-left:0; padding-right:0; }

/* ---------- Model reference chip (Home) ---------- */
.model-ref-chip{ margin-top:var(--sp4); font-size:var(--text-sm); color:var(--muted); }
.model-ref-link{ color:var(--accent); }
.model-ref-link[aria-disabled="true"], .model-ref-link.disabled{ cursor:default; opacity:.75; text-decoration:underline dotted; }

/* ---------- Synthetic tag ---------- */
.synthetic-tag{
  display:inline-block; margin-top:var(--sp3); padding:var(--sp1) var(--sp3);
  border-radius:var(--r-full); background:color-mix(in oklab, var(--mod) 16%, transparent);
  color:var(--mod); font-weight:500; font-style:normal;
}

/* ---------- Explain grid (Demonstrator) ---------- */
.explain-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp5); margin-top:var(--sp4); }
.explain-cell{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp5); }
.explain-cell h3{ margin-bottom:var(--sp2); font-size:var(--text-base); }
@media(max-width:820px){ .explain-grid{ grid-template-columns:1fr; } }

/* ---------- Instance form ---------- */
.instance-form{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp4);
  margin-top:var(--sp5);
}
.instance-form[hidden]{ display:none; }
.field-select, .field-other{ display:flex; flex-direction:column; gap:var(--sp1); }
.field-other[hidden]{ display:none; }
.field-select label, .field-other label{
  font-size:var(--text-xs); font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em;
}
.field-select select, .field-select input, .field-other input{
  border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp3);
  background:var(--surface); color:var(--text); font-size:var(--text-sm); min-height:44px;
  color-scheme:dark; transition:border-color var(--tr);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; box-sizing:border-box; font-family:inherit;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
[data-theme="light"] .field-select select, [data-theme="light"] .field-select input, [data-theme="light"] .field-other input{ color-scheme:light; }
.field-select select:focus, .field-select input:focus, .field-other input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); outline:none; }
.field-select input[readonly], .field-other input[readonly]{
  background:var(--surface-2); color:var(--muted); cursor:default;
  box-shadow:none; outline:none;
}
.field-select input[readonly]:focus, .field-other input[readonly]:focus{ border-color:var(--border); box-shadow:none; }
.field-other{ grid-column:span 2; }
@media(max-width:600px){ .field-other{ grid-column:1 / -1; } }

/* ---------- Demonstrator scenario confirmation message ---------- */
#demoScenarioStatus:not(:empty){
  margin-top:var(--sp3); padding:var(--sp3) var(--sp4);
  border-radius:var(--r-md); font-size:var(--text-sm); line-height:1.5;
  background:color-mix(in oklab, var(--accent) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  color:var(--text);
}
.instance-form .btn-primary{ grid-column:1 / -1; justify-self:start; margin-top:var(--sp2); }

.btn-primary{
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 100%,white 4%),var(--accent));
  color:#fff; border-radius:var(--r-md); padding:var(--sp3) var(--sp6);
  font-size:var(--text-sm); font-weight:var(--fw-semibold); min-height:44px; border:1px solid color-mix(in oklab,var(--accent) 70%,black 10%);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 14px rgba(var(--accent-rgb),.28);
  transition:filter var(--tr),transform var(--tr),box-shadow var(--tr);
}
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 20px rgba(var(--accent-rgb),.34); }
.btn-primary:active{ transform:translateY(0); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.active-instance{
  margin-top:var(--sp5); padding:var(--sp3) var(--sp4); border-radius:var(--r-md);
  background:color-mix(in oklab, var(--accent) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  font-size:var(--text-sm); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp3);
}
.active-instance[hidden]{ display:none; }
.active-instance .mono{ font-family:var(--mono); color:var(--accent-2); }
.active-instance .btn-ghost2{ margin-inline-start:auto; }

/* ---------- Scientific variable cards ---------- */
.var-group{ display:grid; gap:var(--sp3); margin-bottom:var(--sp2); }
.var-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp4); display:grid; gap:var(--sp2); transition:border-color var(--tr);
}
.var-card:focus-within{ border-color:color-mix(in oklab,var(--accent) 45%,var(--border)); }
.var-card-top{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp3); flex-wrap:wrap; }
.var-name{ font-weight:600; font-size:var(--text-sm); }
.var-symbol{ font-family:var(--mono); color:var(--accent); font-size:var(--text-sm); }
.var-symbol sub{ font-size:.7em; }
.var-meta{ display:flex; flex-wrap:wrap; gap:var(--sp2) var(--sp4); font-size:var(--text-xs); color:var(--muted); }
.var-meta b{ color:var(--text); font-weight:600; }
.var-help{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; border:1px solid var(--border); color:var(--muted); font-size:11px; font-weight:700;
  cursor:help; flex-shrink:0;
}
.var-help:hover, .var-help:focus-visible{ border-color:var(--accent); color:var(--accent); }
.var-card input[type=range]{ width:100%; accent-color:var(--accent); cursor:pointer; }
.var-card .field-top{ display:flex; justify-content:space-between; margin-bottom:var(--sp1); }
.var-card .field-val{ font-family:var(--mono); color:var(--accent); font-weight:600; font-size:var(--text-sm); }
.var-oob-badge{
  display:inline-block; padding:1px var(--sp2); border-radius:var(--r-full); font-size:10px; font-weight:700;
  background:color-mix(in oklab, var(--high) 20%, transparent); color:var(--high); text-transform:uppercase;
  letter-spacing:.04em; margin-inline-start:var(--sp2);
}
.var-quality-row{ display:flex; align-items:center; gap:var(--sp2); font-size:var(--text-xs); color:var(--muted); }
.var-quality-row input[type=range]{ width:80px; accent-color:var(--accent-2); }

/* ---------- Data completeness bar ---------- */
.data-quality-bar{ margin:var(--sp5) 0; }
.dq-label{ display:flex; justify-content:space-between; font-size:var(--text-sm); margin-bottom:var(--sp1); font-weight:500; }
.dq-track{ height:8px; border-radius:var(--r-full); background:var(--track); overflow:hidden; }
.dq-fill{ height:100%; background:var(--accent); border-radius:var(--r-full); transition:width .3s ease; width:0%; }

/* ---------- Safety card (INSUFFICIENT_DATA / OOD) ---------- */
.safety-card{ border-color:var(--warn-bd); background:var(--warn-bg); }
.safety-status{ font-weight:700; font-family:var(--mono); color:var(--warn-tx); margin-bottom:var(--sp2); display:block; }
.safety-reason{ font-size:var(--text-sm); color:var(--warn-tx); margin-bottom:var(--sp1); }
.safety-note{ font-size:var(--text-xs); color:var(--warn-tx); opacity:.9; }
.safety-ok{ color:var(--ok); font-weight:600; }
.safety-versions{ margin-top:var(--sp3); display:flex; gap:var(--sp5); flex-wrap:wrap; font-size:var(--text-xs); color:var(--muted); font-family:var(--mono); }

/* ---------- Results grid (6 differentiated cards) ---------- */
.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp4); margin-top:var(--sp4); }
.result-tile{
  background:var(--surface); background-image:var(--surface-grad); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:var(--sp5); display:flex; flex-direction:column; gap:var(--sp2); box-shadow:var(--shadow-sm);
  animation:onco-tab-in var(--tr-slow) both;
}
.result-tile .rt-label{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.result-tile .rt-value{ font-family:var(--mono); font-size:var(--text-xl); font-weight:600; }
.result-tile .rt-desc{ font-size:var(--text-xs); color:var(--muted); }
.result-tile.uncalibrated .rt-value{ font-size:var(--text-sm); font-family:var(--font); color:var(--warn-tx); font-weight:600; }
.result-tile.unavailable .rt-value{ font-size:var(--text-sm); font-family:var(--font); color:var(--faint); font-weight:500; }
@media(max-width:900px){ .results-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .results-grid{ grid-template-columns:1fr; } }

/* ---------- Threshold control ---------- */
.thresh-control{ margin:var(--sp4) 0; }
.thresh-control label{ font-size:var(--text-sm); color:var(--muted); display:block; margin-bottom:var(--sp2); }
.thresh-control strong{ color:var(--accent); font-family:var(--mono); }
.thresh-control input[type=range]{ width:100%; accent-color:var(--accent); }

/* ---------- Contribution / waterfall list ---------- */
.contrib-list{ display:grid; gap:var(--sp2); margin-top:var(--sp4); }
.contrib-row{ display:grid; grid-template-columns:180px 1fr 70px; align-items:center; gap:var(--sp3); }
.contrib-row .cr-label{ font-size:var(--text-sm); }
.contrib-row .cr-bar-wrap{ height:10px; border-radius:var(--r-full); background:var(--track); overflow:hidden; position:relative; }
.contrib-row .cr-bar{ height:100%; border-radius:var(--r-full); background:var(--accent); }
.contrib-row .cr-bar.negative{ background:var(--high); }
.contrib-row .cr-val{ font-family:var(--mono); font-size:var(--text-xs); text-align:right; color:var(--muted); }
.contrib-dominant{ margin-top:var(--sp4); font-weight:600; font-size:var(--text-sm); color:var(--accent-2); }
@media(max-width:600px){ .contrib-row{ grid-template-columns:120px 1fr 60px; } }

/* ---------- Longitudinal table ---------- */
.lon-table-wrap{ overflow-x:auto; }
.lon-table-wrap input{
  width:100%; border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--sp2);
  background:var(--surface); color:var(--text); font-family:var(--mono); font-size:var(--text-sm); min-height:36px;
}
.lon-remove-btn{ color:var(--high); font-size:var(--text-xs); font-weight:600; padding:var(--sp1) var(--sp2); }

/* ---------- Benchmark table ---------- */
.bench-table-wrap{ overflow-x:auto; margin-top:var(--sp4); }
.bench-table-wrap table.batch-table{ min-width:960px; }
.bench-table-wrap td.best{ color:var(--accent-2); font-weight:600; }

/* ---------- Model Card ---------- */
.mc-list{ display:grid; gap:var(--sp4); }
.mc-list > div{ display:grid; grid-template-columns:200px 1fr; gap:var(--sp4); padding-bottom:var(--sp3); border-bottom:1px solid var(--divider); }
.mc-list > div:last-child{ border-bottom:none; }
.mc-list dt, .mc-list .mc-k{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.mc-list dd, .mc-list .mc-v{ font-size:var(--text-sm); color:var(--text); margin:0; }
@media(max-width:640px){ .mc-list > div{ grid-template-columns:1fr; gap:var(--sp1); } }

/* ---------- Legal + References accordion (footer, all 6 tabs) ----------
 * Premium disclosure component: hairline borders, no heavy shadows, smooth
 * expand/collapse with fade+height via grid-template-rows trick (no JS
 * height measurement needed), accessible via native <button aria-expanded>. */
.legal-accordion{
  max-width:1100px; margin:var(--sp6) auto 0; display:grid; gap:var(--sp2);
}
.legal-item{
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  background-image:var(--surface-grad); overflow:hidden; transition:border-color var(--tr);
}
.legal-item:hover{ border-color:color-mix(in oklab,var(--accent) 20%,var(--border)); }
.legal-item-h{ margin:0; }
.legal-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--sp3);
  padding:var(--sp4) var(--sp5); font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--text); text-align:left; min-height:44px;
}
.legal-toggle::after{
  content:""; width:9px; height:9px; flex-shrink:0; margin-inline-start:var(--sp3);
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform var(--tr),border-color var(--tr);
}
.legal-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg); border-color:var(--accent); }
.legal-toggle:hover{ color:var(--accent); background:color-mix(in oklab,var(--accent) 4%,transparent); }
.legal-panel{
  padding:0 var(--sp5) var(--sp5); font-size:var(--text-sm); color:var(--muted);
  animation:onco-panel-in var(--tr-slow) both;
}
.legal-panel[hidden]{ display:none; }
@keyframes onco-panel-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){ .legal-panel{ animation:none; } }
.legal-panel h2{ font-size:var(--text-base); margin-bottom:var(--sp2); color:var(--text); }
.legal-updated{ font-size:var(--text-xs); color:var(--faint); margin-bottom:var(--sp4); }
.legal-ol, .legal-ul{ display:grid; gap:var(--sp3); padding-inline-start:var(--sp6); }
.legal-ol li, .legal-ul li{ font-size:var(--text-sm); color:var(--text); line-height:1.6; }
.legal-ul{ list-style:disc; }
.legal-panel a{ color:var(--accent); }

/* ---------- Misc ---------- */
.code-block{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp4); overflow-x:auto; font-size:var(--text-xs); white-space:pre-wrap; word-break:break-word; }

/* RTL not needed (ES/EN only, both LTR) but kept harmless if dir changes */
[dir="rtl"] .contrib-row{ direction:ltr; }

/* ---------- Audit corrections 2026-07-29 ---------- */
.model-ref-link.disabled{ cursor:default; opacity:.75; text-decoration:underline dotted; }
.instance-compat{ grid-column:1/-1; padding:10px 12px; border-radius:var(--r-sm); font-size:var(--text-xs); line-height:1.45; }
.instance-compat.compatible{ background:color-mix(in oklab,var(--ok) 10%,var(--surface)); border:1px solid color-mix(in oklab,var(--ok) 45%,var(--border)); color:var(--ok); }
.instance-compat.incompatible{ background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn-tx); }
.normalized-number{ width:100%; min-height:42px; border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--sp2) var(--sp3); background:var(--surface); color:var(--text); font-family:var(--mono); transition:border-color var(--tr); }
.normalized-number:focus{ outline:3px solid color-mix(in oklab,var(--accent) 25%,transparent); border-color:var(--accent); }
.field-top label{ font-size:var(--text-xs); color:var(--muted); font-weight:600; }
.lon-actions{ display:flex; flex-wrap:wrap; gap:var(--sp2); margin:var(--sp3) 0; }
.lon-comparable-check{ display:flex; gap:var(--sp2); align-items:flex-start; font-size:var(--text-sm); color:var(--muted); margin:var(--sp3) 0 var(--sp4); }
.lon-comparable-check input{ margin-top:.2em; accent-color:var(--accent); }
.chart-alt{ margin-top:var(--sp2); }
table caption{ text-align:left; padding:0 0 var(--sp3); color:var(--muted); font-size:var(--text-xs); font-weight:600; }
.result-tile.exploratory{ border-style:dashed; }
.field-select small{ display:block; margin-top:var(--sp1); line-height:1.35; }

.lon-table input[readonly]{background:var(--surface-2);color:var(--muted);cursor:not-allowed;}