/* Imentiv AI design tokens — sampled from imentiv.ai */
:root{
  --blue:#1A73E8;
  --blue-soft:rgba(26,115,232,.10);
  --bg:#EAEDF5;
  --card:#FFFFFF;
  --table-head:#FAFBFD;
  --ink:#333333;
  --ink-2:#555555;
  --ink-3:#5F6878;
  --line:#DCE1EC;
  --line-soft:#EDF0F7;
  --green:#12A150;
  --green-soft:rgba(18,161,80,.10);
  --amber:#E8A21A;
  --amber-soft:rgba(232,162,26,.12);
  --red:#E5484D;
  --red-soft:rgba(229,72,77,.10);
  --purple:#7C5CFF;
  --purple-soft:rgba(124,92,255,.10);
  --focus:var(--blue);
  --focus-ring:rgba(26,115,232,.35);
  --green-text:#09722F;
  --red-text:#B3262B;
  --amber-text:#8A5F00;
  --blue-text:#1459B8;
  --purple-text:#5B3FD6;
  --surface-2:#F4F6FB;
  --surface-3:#EEF1F7;
  --radius:14px;
  --shadow:0 1px 2px rgba(20,30,60,.04),0 8px 24px rgba(20,30,60,.06);
  --tbl-frame:#D4E3F7;
  --tbl-frame-line:#C7DAF3;
  --tbl-frame-pad:0px;
  --tbl-head:linear-gradient(180deg,#3573CF,#2560BD);
  --tbl-head-ink:#FFFFFF;
  --tbl-body:#FFFFFF;
  --tbl-body-alt:#EEF4FC;
  --tbl-line:#DCE7F5;
  --tbl-ink:#1F2A3D;
  --tbl-link:#1F5FC4;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-width:320px}
body{
  font-family:Inter,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit}
button,input,select{font:inherit}
.screen{width:100%;min-height:100vh;position:relative}
#root .screen > .header-wrap{position:sticky;top:0;z-index:40}
#root .screen > .body{padding-top:0;min-height:calc(100vh - 56px)}
#root .screen > .body > .side{top:56px;height:calc(100vh - 56px)}
#root .screen .app-header-actions .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:var(--color-ink);cursor:pointer}
#root .screen .app-header-actions .theme-toggle svg{width:22px;height:22px;display:block}
#root .screen .app-header-actions .theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- top nav ---------- */
.nav{
  height:64px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:28px;padding:0 28px;position:fixed;top:0;left:0;width:100%;z-index:20;
}
.logo{font-size:22px;font-weight:800;letter-spacing:-.5px}
.logo span{color:var(--blue)}
.nav .tag,
.nav a.tag{
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--blue);background:var(--blue-soft);padding:5px 10px;border-radius:6px;
  text-decoration:none !important;cursor:pointer;display:inline-flex;align-items:center;
  border:1px solid transparent;transition:all .15s ease;user-select:none;
}
.nav .tag:hover,
.nav a.tag:hover{
  background:rgba(37, 99, 235, 0.18);color:var(--blue);border-color:rgba(37, 99, 235, 0.25);
}
.nav .tag:focus-visible,
.nav a.tag:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
.nav .links{display:none}
.nav .links a{font-size:14px;color:var(--ink-2);text-decoration:none;font-weight:500}
.nav .links a.on{color:var(--blue);font-weight:600}
.nav .links a[href]:hover{color:var(--blue)}
.nav .links a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
/* Sun/moon control, same corner as app-dev's header actions. Pages without a nav pin it there. */
.nav .theme-toggle,.theme-toggle.is-fixed{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;
  margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;
}
.nav .theme-toggle:hover,.theme-toggle.is-fixed:hover{color:var(--blue);background:transparent}
.nav .theme-toggle:focus-visible,.theme-toggle.is-fixed:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav .theme-toggle svg,.theme-toggle.is-fixed svg{width:22px;height:22px;display:block}
.theme-toggle.is-fixed{position:fixed;top:16px;right:28px;z-index:30}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700}

/* ---------- layout ---------- */
.body{display:flex;min-height:100vh;padding-top:64px}
.side{position:sticky;top:64px;align-self:flex-start;flex:0 0 236px;height:calc(100vh - 64px);overflow-y:auto;background:var(--card);border-right:1px solid var(--line);padding:22px 14px}
.side .lbl{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--ink-3);
  text-transform:uppercase;padding:0 10px;margin:18px 0 8px}
.side .lbl:first-child{margin-top:0}
.side .item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  font-size:13.5px;color:var(--ink-2);font-weight:500;margin-bottom:2px}
.side .item.on{background:var(--blue-soft);color:var(--blue-text);font-weight:600}
.side .item[role="link"]:hover{background:var(--blue-soft);color:var(--blue)}
.side .item[role="link"]:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.side .item .ic{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;color:currentColor}
.side .item .ic svg{width:16px;height:16px;display:block}
.side .item small{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:500}
.main{flex:1;min-width:0;padding:30px 34px}

/* ---------- type ---------- */
h1{font-size:29px;font-weight:700;letter-spacing:-.6px}
h2{font-size:18px;font-weight:700;letter-spacing:-.2px}
h3{font-size:15px;font-weight:650}
.sub{font-size:14px;color:var(--ink-2);line-height:1.62;max-width:760px;margin-top:8px}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px}
.mono{font-family:"SF Mono",Consolas,monospace}

/* ---------- crumbs ---------- */
.crumb{font-size:12.5px;color:var(--ink-3);margin-bottom:14px}
.crumb b{color:var(--ink-2);font-weight:600}
.crumb i{font-style:normal;margin:0 7px;opacity:.55}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow)}
.pad{padding:20px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ---------- banner ---------- */
.banner{background:linear-gradient(96deg,rgba(26,115,232,.09),rgba(124,92,255,.08));
  border:1px solid rgba(26,115,232,.18);border-radius:var(--radius);
  padding:20px 22px;display:flex;align-items:center;gap:20px;margin:22px 0 26px}
.banner .t{font-size:15.5px;font-weight:700}
.banner .d{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.7}
.banner .d code{background:rgba(255,255,255,.8);border:1px solid var(--line);
  padding:2px 7px;border-radius:5px;font-size:11.5px}
.banner .act{margin-left:auto;display:flex;gap:10px}

/* ---------- buttons ---------- */
.btn,.table-nav-btn,.pill.ui-clickable{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;
  font-size:12.5px;font-weight:600;padding:0 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);white-space:nowrap;cursor:pointer;
  line-height:1;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover,.table-nav-btn:hover,.pill.ui-clickable:hover{
  background:var(--blue-soft);border-color:rgba(26,115,232,.28);color:var(--blue);
}
.btn.p{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.p:hover{background:#1768D2;border-color:#1768D2;color:#fff}
.btn.s{padding:7px 13px;font-size:12px}
.btn[role="link"]:hover,.pill[role="link"]:hover,.hl[role="link"]:hover{text-decoration:underline}
.table-model-btn{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;height:32px;width:240px;padding:0 10px 0 12px;
  border-radius:10px;border:1px solid #9FC2FF;background:#EAF2FF;color:#1459B8;
  font-size:13px;font-weight:700;line-height:1;cursor:pointer;
}
.table-model-btn:hover{background:#DDEBFF;border-color:#88B2F9}
.table-model-btn .table-model-btn-text{line-height:1;white-space:nowrap;text-align:left}
.table-model-btn span[aria-hidden="true"]{margin-left:auto}
.capability-nav-btn{
  width:190px;
  min-height:34px;
  justify-content:center;
  border-color:#9FC2FF;
  background:#EAF2FF;
  color:#1459B8;
  font-weight:700;
}
.capability-nav-btn:hover{
  background:#DDEBFF;
  border-color:#88B2F9;
  color:#1459B8;
}
.btn:focus-visible,
.pill:focus-visible,
.hl:focus-visible,
.input-button:focus-visible,
.modal-close:focus-visible,
.table-nav-btn:focus-visible,
.table-model-btn:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--focus-ring);
}
.test-panel{margin-top:26px}
.test-form{display:grid;grid-template-columns:1.2fr 1.2fr 1.3fr auto;gap:12px;align-items:end;margin-top:20px}
.test-form label{display:flex;flex-direction:column;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.test-form select,.input-button{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink-2);font:inherit;font-size:12px;letter-spacing:0;text-transform:none;padding:0 11px}
.input-button{text-align:left;cursor:pointer}.input-button span{float:right;color:var(--blue);font-weight:700}
.upload-field .input-button{cursor:text}
.file-picker{height:40px;border:1px solid var(--line);border-radius:9px;background:var(--card);display:flex;align-items:center;gap:10px;padding:4px 9px}
.file-picker .btn{padding:6px 11px;font-size:12px;border-radius:7px}
.file-name{font-size:12px;font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.test-status{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:12px}
.test-status.error{background:var(--red-soft);color:var(--red)}.test-status.success{background:var(--green-soft);color:var(--green)}
.test-result{display:flex;align-items:center;gap:24px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.result-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;flex:1}
.result-metrics .stat{box-shadow:none}
.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(20,30,60,.4)}
.modal-backdrop[hidden]{display:none}
.modal{position:relative;width:min(520px,calc(100vw - 40px));padding:26px;background:var(--card);border-radius:var(--radius);box-shadow:0 20px 60px rgba(20,30,60,.22)}
.modal-close{position:absolute;top:12px;right:15px;border:0;background:none;font-size:24px;color:var(--ink-3);cursor:pointer}
.modal .sub{max-width:none}.format-list{margin-top:18px;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;font-size:12.5px;line-height:2;color:var(--ink-2)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}

/* ---------- workspace card ---------- */
.ws{padding:20px;display:flex;flex-direction:column;min-height:228px}
.ws .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  font-size:19px;margin-bottom:14px}
.ws h3{font-size:16.5px;margin-bottom:7px}
.ws p{font-size:12.8px;color:var(--ink-2);line-height:1.65;flex:1}
.ws .foot{display:flex;align-items:center;gap:8px;margin-top:15px;
  padding-top:13px;border-top:1px solid var(--line-soft);
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.ws .live{color:var(--green)} .ws .live .dot{background:var(--green)}
.ws .soon{color:var(--ink-3)} .ws .soon .dot{background:var(--ink-3)}
.ws .n{margin-left:auto;font-size:11px;color:var(--ink-3);
  letter-spacing:0;text-transform:none;font-weight:500}

/* ---------- stat / KPI ---------- */
.stat{
  padding:16px 18px;
  min-height:132px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.stat .k{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.85px;
  text-transform:uppercase;
  line-height:1.3;
  min-height:28px;
  color:var(--ink-3);
}
.stat .v{
  width:100%;
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.4px;
  margin:2px 0 0;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stat .m{
  margin-top:10px;
  min-height:30px;
  font-size:11.5px;
  line-height:1.35;
  color:var(--ink-3);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.up{color:var(--green);font-weight:650} .down{color:var(--red);font-weight:650}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;font-weight:700;letter-spacing:.85px;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  background:var(--table-head)}
td{font-size:13px;padding:12px 14px;border-bottom:1px solid var(--line-soft);
  color:var(--ink-2);vertical-align:middle}
tr:last-child td{border-bottom:none}
td b{color:var(--ink);font-weight:650}
tr.err{background:rgba(229,72,77,.035)}
tr.sel{background:var(--blue-soft)}
.num{font-family:"SF Mono",Consolas,monospace;font-size:12.5px}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;
  padding:4px 9px;border-radius:20px;white-space:nowrap}
.pill.g{background:var(--green-soft);color:var(--green-text)}
.pill.r{background:var(--red-soft);color:var(--red-text)}
.pill.a{background:var(--amber-soft);color:var(--amber-text)}
.pill.b{background:var(--blue-soft);color:var(--blue-text)}
.pill.p{background:var(--purple-soft);color:var(--purple-text)}
.pill.n{background:var(--surface-3);color:var(--ink-2)}

/* ---------- chips / meta ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:11.5px;padding:5px 10px;border-radius:7px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-2);font-weight:500}
.chip b{color:var(--ink);font-weight:650}

/* ---------- section head ---------- */
.sh{display:flex;align-items:center;margin-bottom:13px}
.sh .r{margin-left:auto;display:flex;gap:8px;align-items:center}

/* footnote */
.note{font-size:11.5px;color:var(--ink-3);margin-top:11px;line-height:1.7}
.hl{color:var(--blue-text);font-weight:600}

/* step badge */
.step{display:none;position:absolute;top:16px;right:20px;z-index:20;background:rgba(20,28,45,.92);
  color:#fff;font-size:11px;font-weight:650;letter-spacing:.6px;padding:7px 14px;
  border-radius:20px}

/* ---------- release workflow ---------- */
.release-workflow,.current-versions{margin:0;overflow:hidden;border-color:#E3EBF7}
.release-workflow-header,.current-versions-header{display:flex;align-items:center;gap:14px;padding:22px 24px;background:linear-gradient(115deg,#F8FBFF,#EEF5FF)}
.release-workflow-icon,.current-versions-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:12px;background:#E3EDFF;color:#2874ED;font-size:27px;font-weight:700}
.current-versions-header{background:#FFF}.current-versions-icon{background:#F0EBFF;color:#6352ED}
.release-workflow-header h2,.current-versions-header h2{font-size:21px;color:#102957}
.release-workflow-header p,.current-versions-header p{margin-top:4px;color:#4A6490;font-size:13px}
.release-stages{position:relative;padding:10px 14px 0}.release-stages::before{content:"";position:absolute;top:52px;bottom:42px;left:48px;width:2px;background:#D9E5F8}
.release-stage{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:start;column-gap:14px;row-gap:12px;margin:7px 0;padding:16px 18px;border:1px solid #E1EAF8;border-radius:13px;background:#FFF}
.release-stage-number{z-index:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#3184F6,#145DDD);color:#FFF;font-size:17px;font-weight:700}
.release-stage:not(#releaseSubmitStage) .release-stage-number{background:linear-gradient(135deg,#91A9CF,#617B9F)}
.release-stage-copy h3{font-size:15px;color:#102957}.release-stage-copy p{margin-top:5px;color:#4F6A94;font-size:11.5px;line-height:1.4}
.release-stage-progress{grid-column:2 / 4;display:flex;align-items:center;gap:12px;color:#4A6490;font-size:12px;font-weight:700}
.release-progress-bar{flex:1;height:9px;border-radius:999px;background:#E4EBF6;overflow:hidden}.release-progress-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2879EE,#246CE6)}
.release-state{justify-self:end;min-width:122px;padding:9px 13px;border-radius:999px;text-align:center;font-size:11.5px;font-weight:700;white-space:nowrap}
.release-state.pending{background:#EEF2F7;color:#566782}.release-state.not-started{background:#EAF2FF;color:#1F5BB8}.release-state.waiting{background:#F1F4F8;color:#566782}.release-state.complete{background:#EAF8EF;color:#0F7436}
.release-workflow-note{display:flex;align-items:center;gap:12px;margin:16px 14px 18px;padding:14px 16px;border:1px solid #D5E5FF;border-radius:12px;background:#F2F7FF;color:#2A5DB0;font-size:11.5px;line-height:1.5}.release-workflow-note::first-letter{font-size:20px}
.current-versions-table{margin:0 20px 20px;border:1px solid #E4ECF7;border-radius:12px;overflow:hidden}.current-versions table th{padding:13px 20px;background:#F5F8FE}.current-versions table td{padding:16px 20px}.current-versions .pill{font-size:10.5px}.model-icon{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:11px;border-radius:9px;background:#EAF1FF;color:#216EEA;font-size:18px;vertical-align:middle}
.capability-metric-select{height:34px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-2);font:inherit;font-size:12px;padding:0 10px}
.capability-compare-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:650;letter-spacing:.2px;color:var(--ink-3)}
.capability-kpi-grid{grid-template-columns:repeat(6,minmax(180px,1fr))}
.capability-variant-card{
  width:100%;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.capability-variant-card:hover{
  border-color:rgba(26,115,232,.28);
  background:#FAFCFF;
}
.capability-variant-card.active{
  border-color:rgba(26,115,232,.45);
  box-shadow:0 0 0 3px rgba(26,115,232,.12);
}
.capability-variant-toggle{
  min-width:150px;
  border-color:#9FC2FF;
  background:#EAF2FF;
  color:#1459B8;
  font-weight:700;
}
.capability-variant-toggle.active{
  background:#DDEBFF;
  border-color:#88B2F9;
  color:#1459B8;
}
.trend-chart{width:100%;overflow:auto;max-width:100%;min-width:0}
.trend-chart-svg{width:100%;min-width:0;max-width:100%;height:auto}
.trend-axis{stroke:#DCE1EC;stroke-width:1}
.trend-line{fill:none;stroke:#1A73E8;stroke-width:2.5}
.trend-point{fill:#1A73E8}
.trend-label{fill:#6F7890;font-size:11px;font-weight:600;text-anchor:middle}
.capability-current-row{background:rgba(26,115,232,.05)}

@media (max-width:1100px){
  .side{flex-basis:210px}
  .main{padding:26px 28px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .release-stage{grid-template-columns:42px minmax(0,1fr) auto}
  .release-stage-progress{grid-column:2 / 4}
  .release-state{grid-column:auto;justify-self:end}
  .capability-kpi-grid{grid-template-columns:repeat(3,minmax(180px,1fr))}
}

@media (max-width:1000px){
  .nav{padding:0 20px}
  .nav .links{display:none}
  .main{padding:24px 20px}
  .sh{align-items:flex-start;gap:14px;flex-wrap:wrap}
  .sh .r{margin-left:0}
  .g3,.g2{grid-template-columns:1fr}
  .test-form{grid-template-columns:1fr 1fr !important}
  .test-form .btn{grid-column:1 / -1;justify-self:start}
}

@media (max-width:540px){
  .nav{height:56px;padding:0 16px;gap:12px}
  .logo{font-size:19px}
  .nav .tag{font-size:9px;padding:4px 7px}
  .body{min-height:100vh;padding-top:56px}
  .side{top:56px;height:calc(100vh - 56px)}
  .main{padding:20px 16px}
  h1{font-size:25px}
  .sub{font-size:13px}
  .g4{grid-template-columns:1fr}
  .test-form{grid-template-columns:1fr !important}
  .result-metrics{grid-template-columns:1fr}
  .release-workflow-header{padding:20px}
  .release-workflow-header h2{font-size:20px}
  .release-stage{margin:8px 12px;padding:18px}
  .release-stage-progress{gap:10px}
  .release-workflow-note{margin:14px 12px 12px;padding:15px}
  .banner{align-items:flex-start;flex-direction:column}
  .banner .act{margin-left:0;flex-wrap:wrap}
  .capability-kpi-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
  .stat .v{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Connected dataset workspace uses shared design tokens. */
.dataset-page {min-width:0}
.dataset-page .card {margin-top:20px;padding:20px;min-width:0}
.dataset-page h2,.dataset-page h3,.dataset-page p,.dataset-page pre,.dataset-page fieldset {margin:12px 0}
.dataset-page label {display:inline-flex;align-items:center;gap:8px;margin:8px 14px 8px 0;flex-wrap:wrap}
.dataset-page input,.dataset-page select {max-width:100%;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.dataset-page fieldset {padding:12px;border:1px solid var(--line);border-radius:8px}
.dataset-page pre {white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;background:var(--bg);padding:12px;border-radius:8px}
.dataset-page small {display:block;min-width:160px;color:var(--ink-2)}
.dataset-page details {border-bottom:1px solid var(--line);padding:8px 0}
.dataset-page summary {cursor:pointer}
.dataset-page button {color:var(--ink);background:var(--card)}
.dataset-page button:disabled {opacity:.55;cursor:wait}
.dataset-scroll {max-width:100%;overflow-x:auto;margin:16px 0}
.dataset-scroll td {white-space:normal;overflow-wrap:anywhere;min-width:100px;max-width:420px;vertical-align:top}
.dataset-page :focus-visible {outline:3px solid var(--focus);outline-offset:3px}
#dataset-message {min-height:24px}
/* Explicit theme from the header switcher (`imentiv-theme` / `html[data-theme]`), matching app-dev. */
:root[data-theme="dark"]{color-scheme:dark;--table-head:#293448;--bg:#161b25;--card:#202735;--ink:#edf1f7;--ink-2:#c3ccda;--ink-3:#a4afc2;--line:#424e63;--line-soft:#303b4e;--blue:#75b1ff;--green:#5ad18b;--red:#ff868b;--amber:#f1c261;--green-text:#5ad18b;--red-text:#ff868b;--amber-text:#f1c261;--blue-text:#75b1ff;--purple-text:#b4a1ff;--surface-2:#293448;--surface-3:#2b3446;--tbl-frame:#0B1428;--tbl-frame-line:#1D2C4D;--tbl-frame-pad:0px;--tbl-head:linear-gradient(180deg,#1F3B6C,#19325D);--tbl-head-ink:#E3EBF8;--tbl-body:#0E1830;--tbl-body-alt:#132039;--tbl-line:#22335A;--tbl-ink:#E6ECF7;--tbl-link:#6FA8FF}
@media(max-width:600px) {
  .dataset-page .card {padding:12px}
  .dataset-page label {display:flex}
  .dataset-page input[type=password] {width:100%}
}

/* Live registry and public task definitions. */
.registry-page { min-width: 0; }
.registry-page .card { padding: 20px; margin-block: 16px; }
.registry-page p, .registry-page dd, .registry-page code { overflow-wrap: anywhere; }
/* Published dataset names are identifiers and may have no word boundaries. */
[aria-label="Labeled dataset"] > h1, .report-view > h2, .served-model-title, [aria-label="Dataset viewer"] > h2 { overflow-wrap: anywhere; }
.registry-page dl { margin-block: 12px; }
.registry-page dt { font-weight: 600; margin-top: 10px; }
.registry-page dd { margin-left: 0; }
.registry-page fieldset { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 16px; border: 1px solid var(--line); }
.registry-page label { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.registry-page input, .registry-page select, .registry-page button { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-width: 100%; }
.registry-page button { cursor: pointer; margin-block: 4px; }
.registry-page button:disabled { opacity: .55; cursor: default; }

.scenario-dataset-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 12px; }
#scenario-annotators .annotators-candidates { max-height: 16rem; overflow: auto; }
.scenario-dataset-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px; }
.scenario-dataset-chip { display: inline-flex; gap: 4px; align-items: center; padding: 2px 6px; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
#gt-progress { width: 100%; max-width: 320px; }
.registry-page .muted { color: var(--ink-2); font-size: 13px; }

.registry-page input[type="checkbox"] { align-self: flex-start; }
.registry-page small { display: block; max-width: 32ch; }
.registry-page [aria-invalid="true"] { outline: 2px solid #cf5252; }
.registry-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.registry-page td { vertical-align: top; min-width: 110px; }
/* No width floor: a floor makes a <details> in a narrow grid column (the Scorecard's Trend disclosure) stick out of its card. */
.registry-page details { min-width: 0; }
.registry-page [hidden] { display: none; }
@media (max-width: 600px) { .registry-page fieldset { flex-direction: column; } }

/* Authenticated evidence pages */
.evidence-page .main { min-width: 0; }
.evidence-page form, .evidence-page #evidence-workspaces { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 16px; }
.evidence-page input, .evidence-page button { font: inherit; padding: 8px 12px; border: 1px solid var(--line, #888); border-radius: 6px; color: inherit; background: var(--panel, transparent); }
.evidence-page button { cursor: pointer; }
.evidence-page :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.evidence-page section { margin-block: 28px; }
.evidence-page .evidence-table-scroll { overflow-x: auto; max-width: 100%; }
.evidence-page table { width: 100%; min-width: 900px; border-collapse: collapse; }
.evidence-page th, .evidence-page td { padding: 12px; border: 1px solid var(--line, #888); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.evidence-page td { min-width: 120px; }
.evidence-page td:nth-last-child(2) { min-width: 260px; }
.evidence-page td button { font-size: 12px; margin: 4px; }
.evidence-page summary { cursor: pointer; padding-block: 8px; }
.evidence-page dialog { color: inherit; background: var(--bg, #fff); max-width: min(850px, 90vw); max-height: 85vh; overflow: auto; border-radius: 10px; }
.evidence-page dialog::backdrop { background: #0009; }
.evidence-page pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-page a { color: inherit; text-decoration: underline; }
@media (max-width: 700px) {
  .evidence-page .body { display: block; }
  .evidence-page .side { width: auto; height: auto; position: static; display: flex; flex-wrap: wrap; }
  .evidence-page .main { padding: 16px; }
  .evidence-page input { max-width: 100%; }
}
.evidence-page th { color: var(--ink); background: var(--card); text-transform: none; font-size: 14px; letter-spacing: normal; }
.evidence-page .nav .tag,
.evidence-page .nav a.tag { color: var(--blue); text-decoration: none !important; }
.evidence-page th[scope="rowgroup"], .evidence-page thead th:first-child { min-width: 160px; }

/* Stored capability evidence: tables preserve exact operands on small screens. */
.evidence-page #evidence-content > section { margin-block: 1.5rem; min-width: 0; }
.evidence-page #history-rows, .evidence-page #history-trend { overflow-x: auto; position: relative; }
.evidence-page #history-trend svg { display: block; width: 100%; min-width: 300px; max-height: 320px; }
.evidence-page #history-trend svg text { fill: currentColor; font-size: 10px; }
.evidence-page #history-trend svg circle { fill: currentColor; }
.evidence-page #history-compare label { display: block; margin-block: .75rem; }
.evidence-page #history-compare select, .evidence-page #cohort-selection { max-width: 100%; }
.evidence-page .model-focus { border-inline-start: 4px solid currentColor; padding-inline-start: .75rem; }
.evidence-page .comparison-Improved { border-inline-start: 4px solid #278448; padding-inline-start: .75rem; }
.evidence-page .comparison-Regressed { border-inline-start: 4px solid #b54b43; padding-inline-start: .75rem; }
.evidence-page #evidence-content nav a { display: inline-block; margin: .5rem 1rem .5rem 0; }
.evidence-page #selected-evidence p { overflow-wrap: anywhere; }
.evidence-page #evidence-content { overflow-wrap: anywhere; }

.command-search {
  width: min(42rem, calc(100vw - 2rem));
  max-height: 85vh;
  overflow: auto;
  color: var(--ink);
  background: var(--card);
}
.command-search input { width: 100%; box-sizing: border-box; }
.command-search [role="option"] { padding: .75rem; cursor: pointer; overflow-wrap: anywhere; }
.command-search [aria-selected="true"], .search-destination { outline: 2px solid var(--focus); outline-offset: -2px; }
.command-search button { margin: .5rem .5rem 0 0; }
.command-search::backdrop { background: rgb(0 0 0 / 45%); }

#evidence-search { margin-left: auto; }
@media (max-width: 600px) { #evidence-search kbd { display: none; } .evidence-page .nav { gap: .5rem; padding-inline: .75rem; } }
.evidence-page .command-search { margin: auto; padding: 1rem; background: var(--card); }
.command-search h2, .command-search p { margin-bottom: .75rem; }

/* Run admission uses the registry's shared light/dark tokens. */
.run-wizard { max-width: 1100px; margin-inline: auto; min-width: 0; }
.run-wizard fieldset { display: block; min-width: 0; padding: 16px; }
.run-wizard label { margin-top: 12px; }
.run-wizard select, .run-wizard input:not([type="checkbox"]) { width: 100%; }
.run-wizard pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.run-wizard p, .run-wizard h3 { overflow-wrap: anywhere; }
.run-wizard article { padding: 16px; margin-block: 12px; min-width: 0; }
.run-wizard legend { font-weight: 600; }
@media (max-width: 600px) {
  .run-wizard { padding: 12px; }
  .run-wizard fieldset, .run-wizard article { padding: 10px; }
  .run-wizard button { white-space: normal; }
}

/* Run metadata remains usable while reports load independently. */
.runs-page { max-width: 1500px; }
.runs-page label { display: inline-flex; flex-direction: column; gap: 6px; margin: 8px; }
.runs-page button, .runs-page a { margin: 4px; }
/* position: relative makes each scroller the containing block of absolutely positioned content (.visually-hidden), which it then clips. */
.runs-scroll { overflow-x: auto; position: relative; }
.runs-scroll table { width: 100%; border-collapse: collapse; }
.runs-scroll th, .runs-scroll td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid var(--line); min-width: 140px; }
.runs-scroll th.runs-actions, .runs-scroll td.runs-actions { min-width: 3rem; width: 3rem; text-align: right; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.runs-page pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.runs-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.runs-page [hidden] { display: none !important; }
@media (max-width: 600px) { .runs-page { padding: 12px; } .runs-page label { display: flex; } }

.runs-page .run-headlines { max-height: 28rem; overflow: auto; min-width: 220px; }

.model-releases > #release-private > section,
.model-releases > #release-private > .grid { margin-top: 20px; }
.model-releases label { display: block; margin: 10px 0; }
.model-releases input, .model-releases select, .model-releases textarea { display: block; max-width: 100%; }
.model-releases textarea { width: 100%; min-height: 64px; }
.model-releases .test-form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.filter-label{display:inline-flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3);margin:12px 16px 12px 0;vertical-align:bottom}
.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tabs-bar-wrap,
.workspace-tabs-container{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.tabs-bar-wrap .page-menu,
.workspace-tabs-container .page-menu,
.page-heading .page-menu{margin-left:auto;flex:0 0 auto;align-self:center}
.page-menu{position:relative}
#page-menu-host{min-width:40px;min-height:40px}
.page-menu-toggle{
  width:40px;height:40px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.page-menu-kebab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.page-menu-kebab span{
  display:block;width:3px;height:6px;border-radius:1px;background:currentColor;
}
.page-menu-list{position:absolute;right:0;top:calc(100% + 4px);min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;z-index:30}
.page-menu-list button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--ink);opacity:1}
.page-menu-list button:hover{background:var(--blue-soft)}
.page-menu-list button:disabled{opacity:.5;cursor:not-allowed}
.catalog-dl{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:6px 16px;margin:16px 0}
.catalog-dl dt{color:var(--ink-3);font-size:12px;font-weight:700}
.catalog-dl dd{margin:0;font-size:13px}
.catalog-tree{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:pre-wrap;overflow:auto}
.filter-label select{height:40px;min-width:160px;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:0 11px}
.model-releases #release-comparison { overflow-wrap: anywhere; }
.model-releases #release-actions { display: flex; gap: 12px; margin-top: 16px; }

/* Private aligned evidence and schema review use text nodes and bounded scroll areas. */
.unit-table-scroll { overflow-x: auto; max-width: 100%; }
.unit-table-scroll td { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 8rem; max-width: 28rem; vertical-align: top; }
#test-modal { max-width: min(90vw, 850px); max-height: 85vh; overflow: auto; color: var(--ink); background: var(--bg); }
#test-modal pre { white-space: pre-wrap; overflow-wrap: anywhere; }
#test-form label, #test-mapping label, #run-units label { display: block; margin: 12px 0; }
#test-bindings { display: block; width: 100%; box-sizing: border-box; }
#test-form { display: block; min-width: 0; }
#test-form input, #test-form select { max-width: 100%; box-sizing: border-box; }
#test-form p, #test-destination { overflow-wrap: anywhere; }

.report-view {
  min-width: 0;
}
.report-view button,
.report-view input {
  margin: 0.3rem;
}
.report-view table {
  border-collapse: collapse;
}
.report-view th,
.report-view td {
  padding: 0.65rem;
  border: 1px solid var(--border, #888);
  text-align: left;
  overflow-wrap: anywhere;
}
.report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}
.report-summary section {
  border: 1px solid var(--border, #888);
  border-radius: 0.5rem;
  padding: 1rem;
}
.report-warnings span {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 1rem;
  padding: 0.3rem 0.6rem;
  margin: 0.3rem;
}
.report-view [role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-block: 1rem;
}
.report-view [aria-selected="true"] {
  font-weight: bold;
  text-decoration: underline;
}
.report-view textarea {
  width: 100%;
  min-height: 6rem;
}
.report-view pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.report-view img {
  max-width: 100%;
  max-height: 400px;
}
.report-view :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- landing page (index.html) ---------- */
.landing-page{padding-top:64px}
.landing-hero{
  max-width:760px;margin:0 auto;padding:88px 28px 56px;text-align:center;
}
.landing-hero h1{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1.12}
.landing-lede{
  max-width:none;margin:16px auto 0;font-size:16px;line-height:1.7;color:var(--ink-2);
}
.landing-actions{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.landing-actions .btn{font-size:14px;padding:11px 22px}
.landing-features{
  max-width:1040px;margin:0 auto;padding:0 28px 88px;
}
.landing-feature-title{font-size:15.5px;font-weight:700;margin:6px 0 8px}
.landing-features .card{height:100%}
.landing-footer{
  border-top:1px solid var(--line);padding:22px 28px;display:flex;justify-content:center;
  gap:8px;font-size:12.5px;color:var(--ink-3);
}
.landing-footer a{color:var(--blue);text-decoration:none;font-weight:600}
.landing-footer a:hover{text-decoration:underline}
@media (max-width:720px){
  .landing-hero{padding:56px 20px 40px}
  .landing-hero h1{font-size:32px}
  .landing-features{grid-template-columns:1fr}
}

/* ---------- Workspace Tabs & Enhanced Overview UI ---------- */
.workspace-tabs-container,
.tabs-bar-wrap {
  margin: 18px 0 24px 0;
  border-bottom: 1px solid var(--line);
}
.workspace-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 !important;
  padding: 0;
}
.workspace-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  margin-bottom: -1px;
}
.workspace-tab:hover {
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 8px 8px 0 0;
}
.workspace-tab.active,
.workspace-tab[aria-selected="true"] {
  color: var(--blue);
  font-weight: 700;
  border-bottom-color: var(--blue);
  background: transparent;
}
.workspace-tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-radius: 6px;
}
.workspace-tab .ic {
  font-size: 15px;
  line-height: 1;
}
.workspace-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  background: var(--line-soft);
  color: var(--ink-3);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.workspace-tab.active .tab-badge {
  background: var(--blue-soft);
  color: var(--blue);
}

.workspace-section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-block: 20px !important;
}
.workspace-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.workspace-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}
.workspace-title-group {
  flex: 1;
  min-width: 0;
}
.workspace-title-group h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.workspace-desc {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------- Dedicated Profile Screen UI ---------- */
.profile-page {
  max-width: 1200px;
}
.profile-sh {
  margin-bottom: 24px;
}
.profile-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-tag {
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.profile-grid {
  display: grid;
  gap: 20px;
}
.profile-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.profile-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A73E8, #0E285B);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(26,115,232,.25);
  flex-shrink: 0;
}
.profile-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.profile-card-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-3);
}
.form-control {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control[readonly] {
  background: #F8FAFD;
  color: var(--ink-2);
  cursor: default;
}
.form-control:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--blue);
}
.input-action-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-action-group input {
  flex: 1;
}
.profile-cap-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.profile-cap-section .chips {
  margin-top: 8px;
}
.profile-card-actions {
  margin-top: 18px;
}
.btn-copied {
  background: var(--green-soft) !important;
  color: var(--green) !important;
  border-color: var(--green) !important;
}

@media (max-width: 540px) {
  .profile-card {
    padding: 16px;
  }
  .profile-form-grid {
    grid-template-columns: 1fr;
  }
  }

:root[data-theme="dark"] .form-control[readonly] {
  background: #1b2230;
  color: var(--ink);
}


#workspace-notice .workspace-notice:not(:empty){display:block;margin:8px 16px}
/* Placement notice beside a create form; held means nothing can be created yet. */
.placement-notice{margin:8px 0;font-size:13px;color:var(--ink-2)}
.placement-notice[data-held]{color:var(--red)}
[data-placement-held]{opacity:.55;cursor:not-allowed}

/* Scenario runs: the run-type badge, the report's warning banner and its tables. */
.scenario-run-badge {
  display: inline-block;
  border: 1px solid var(--blue);
  border-radius: 1rem;
  padding: 0.1rem 0.6rem;
  background: var(--blue-soft);
  color: var(--blue);
}
.scenario-banner {
  border: 1px solid var(--amber);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--amber-soft);
}
.run-warning + .run-warning { margin-top: 0.5rem; }
.run-warning p { margin: 0.25rem 0; }
.run-warning details { margin: 0.25rem 0 0.5rem; }
.run-warning ul { margin: 0.25rem 0; padding-left: 1.25rem; }
.failed-clips { margin: 0.75rem 0; }
.failed-clips h4 { margin: 0 0 0.25rem; }
.failed-clips .muted { color: var(--ink-2); }
/* Scenario tabs share keyboard behavior with other tabs, with their own visual treatment. */
.scenario-report-tabs { position: sticky; top: 56px; z-index: 4; min-width: 0; background: var(--card); }
.main .scenario-report-tabs .tabs { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; border-bottom: 1px solid var(--line); gap: 0; padding: 3px; }
.main .scenario-report-tabs .tabs [role="tab"] { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.main .scenario-report-tabs .tabs [role="tab"][aria-selected="true"] { color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.report-section { scroll-margin-top: 8rem; }
.report-section > details > summary { cursor: pointer; }
.report-section > details > summary > h3 { display: inline; }
.report-section h3:focus, .report-section summary:focus, .scenario-report-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.scenario-dataset { min-width: 0; }
.run-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.run-breadcrumb li + li::before { content: "/"; margin-right: 0.25rem; color: var(--ink-3); }
.run-actions-bar { margin: 8px 0; }
.run-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.run-actions-note { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.run-actions-note:empty { display: none; }
.run-share-url { width: min(100%, 36rem); }
.run-coverage { color: var(--ink-2); font-size: 13px; }
.run-how { margin: 6px 0; font-size: 13px; }
.run-how ul { margin: 4px 0; padding-left: 1.25rem; }
.scenario-dataset table {
  border-collapse: collapse;
}
.scenario-dataset th,
.scenario-dataset td {
  padding: 0.5rem;
  border: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}
.scenario-run-panel select {
  max-width: 100%;
}

/* A piece of work in progress: the Start run button's label and the scenario run page's live banner. */
@keyframes bench-spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:.9em;height:.9em;margin-right:.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.12em;animation:bench-spin .8s linear infinite}
button.is-busy{cursor:progress}
#scenario-run-reason{min-height:1.4em}
.scenario-run-panel #scenario-run-error:not(:empty){color:var(--red)}
/* Run page: the status hero, for a scenario run and a dataset run. */
.run-hero{margin:14px 0;padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.run-hero[data-state="active"]{border-color:var(--blue);background:var(--blue-soft)}
.run-hero[data-state="ok"]{border-color:var(--green);background:var(--green-soft)}
.run-hero[data-state="failed"]{border-color:var(--red);background:var(--red-soft)}
.run-hero[data-state="stopped"]{border-color:var(--amber);background:var(--amber-soft)}
.run-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.run-hero h2{margin:0;font-size:20px}
.run-hero p{margin:6px 0}
.run-sub{color:var(--ink-2);font-size:13px;overflow-wrap:anywhere}
.run-steps{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px;padding:0;list-style:none}
.run-steps li{flex:1 1 110px;padding:6px 2px 0;border-top:3px solid var(--line);font-size:13px;color:var(--ink-2)}
.run-steps li[data-s="done"]{border-top-color:var(--green);color:var(--ink)}
.run-steps li[data-s="current"]{border-top-color:var(--blue);color:var(--ink);font-weight:650}
.run-steps li[data-s="stopped"]{border-top-color:var(--red);color:var(--ink);font-weight:650}
.run-phase{font-weight:650}
.run-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0}
.run-progress progress{flex:1 1 220px;max-width:460px;height:10px}
.run-meta,.run-progress span{font-size:13px;color:var(--ink-2)}
.live-dot{display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--green);animation:bench-pulse 1.6s ease-in-out infinite}
@keyframes bench-pulse{50%{opacity:.25}}
.run-report-link{display:inline-block;margin-top:4px;font-weight:650}
.run-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;align-items:baseline;margin:12px 0;font-size:14px;min-width:0;max-width:100%}
.run-facts dt{color:var(--ink-2);font-weight:600;min-width:0;overflow-wrap:anywhere}
.run-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.run-technical{margin:12px 0}
.run-technical summary{cursor:pointer;color:var(--ink-2);font-size:13px}

/* Scenario report: the results scorecard (scenario-report.js). */
.scenario-scorecard{margin:16px 0}
.score-group{margin:18px 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.score-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.score-card{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.score-card h4{margin:0 0 4px;font-size:14px;color:var(--ink)}
.score-card p{margin:4px 0}
.score-card.is-diagnostic{border-style:dashed}
.accuracy-breakdown{margin:12px 0 16px}.accuracy-breakdown h2{margin:0 0 6px;font-size:14px}.accuracy-breakdown dl{display:grid;gap:6px;margin:0}.accuracy-breakdown dt{font-weight:600}.accuracy-breakdown dd{margin:0}.accuracy-value{font-size:18px;font-weight:700}
.score-diagnostics{margin-top:24px;padding-top:4px;border-top:1px solid var(--line)}
.score-value{font-size:30px;font-weight:700;line-height:1.1}
.score-value small{font-size:13px;font-weight:500;color:var(--ink-2)}
.score-missing{font-size:15px;font-weight:600;color:var(--ink-2)}
.score-what,.score-ci,.score-n,.score-note{font-size:12.5px;color:var(--ink-2)}
.score-baseline,.score-labelled,.score-few-windows,.score-answered{font-size:13px}
/* The three-state mood card's reading (imentiv/benchmark mood states): the balanced figure against chance, then each state's hits. */
.score-reading{font-size:13px}
.score-card.is-headline .score-reading{margin-top:2px;line-height:1.3}
.score-reading strong{font-weight:650}
.score-states{font-size:12.5px;color:var(--ink-2)}
.score-delta{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-weight:650;font-size:12px;white-space:nowrap}
.score-skips{font-size:12.5px;color:var(--ink-2)}
.score-skips summary{cursor:pointer}
.not-measured{margin:6px 0;font-size:13px;color:var(--ink-2)}
.not-measured summary{cursor:pointer}
.not-measured ul{margin:4px 0 0;padding-left:20px}
.not-measured li .question-link{display:block;margin-top:2px}
.not-measured-dash{color:var(--ink-2)}
.score-delta.better{background:var(--green-soft);color:var(--green)}
.score-delta.worse{background:var(--red-soft);color:var(--red)}
.score-delta.even{background:var(--amber-soft);color:var(--amber-text)}
:root[data-theme="dark"] .score-delta.even { color: var(--amber); }
.score-coverage{font-weight:600}
/* Overview headline row (imentiv/benchmark#555): one compact card per group, with the way into its tab. Theme tokens only. */
.nowrap{white-space:nowrap}
.score-eyebrow{display:block;margin:0 0 2px;font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.score-card.is-headline{display:flex;flex-direction:column;padding:10px 12px}
.score-card.is-headline .score-value{font-size:24px;margin:2px 0}
.score-card.is-headline .score-card-head{min-height:0}
.score-card.is-headline h4{margin:0}
.score-card.is-headline p{margin:2px 0}
.score-card.is-headline :is(.score-what,.score-ci,.score-ceiling,.score-baseline,.score-labelled,.score-few-windows,.score-answered,.score-note){font-size:13px;line-height:1.35}
.score-headline-link{align-self:flex-start;margin-top:auto;padding-top:6px;font-size:13px;font-weight:650}
@media (max-width:768px){.score-headline-link{display:inline-flex;align-items:center;min-height:44px}}

/* Method dialog (imentiv/benchmark#527): a quiet "i" on each card and group header, one modal reading page. Theme tokens only. */
.score-card-head,.score-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.score-card-head h4{flex:1 1 auto;min-width:0}
.score-group-head{align-items:center;justify-content:flex-start}
/* Questions put to Imentiv Insights: where it was right and where it was wrong (QuestionResults). */
.question-filter{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.question-chip{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.question-chip[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue-text);border-color:var(--blue);font-weight:650}
.question-chip:disabled{opacity:.5;cursor:default}
.question-chip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.question-table td{vertical-align:top}
.question-text{display:block}
.question-context,.question-options,.question-confidence{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink-2)}
.question-row.verdict-wrong td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.question-row.verdict-right td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.question-row.verdict-unanswered td:first-child,.question-row.verdict-not_asked td:first-child,.question-row.verdict-unscored td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
.question-verdict::before{margin-right:4px}
.verdict-wrong .question-verdict{color:var(--red-text);font-weight:650}
.verdict-wrong .question-verdict::before{content:"\2717"}
.verdict-right .question-verdict{color:var(--green-text);font-weight:650}
.verdict-right .question-verdict::before{content:"\2713"}
.verdict-unanswered .question-verdict,.verdict-not_asked .question-verdict,.verdict-unscored .question-verdict{color:var(--amber-text)}
.verdict-unanswered .question-verdict::before,.verdict-not_asked .question-verdict::before,.verdict-unscored .question-verdict::before{content:"\2013"}
.question-evidence td{padding-top:0;border-top:0;font-size:13px;line-height:1.4;color:var(--ink-2)}
.question-evidence.verdict-wrong td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.question-evidence.verdict-right td:first-child{box-shadow:inset 3px 0 0 var(--green)}
.question-evidence-label{margin-right:4px;font-weight:650;color:var(--ink)}
.question-link{display:inline-block;margin-top:6px;font-size:13px}
.method-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer;opacity:0}
.score-card:hover .method-btn,.score-card:focus-within .method-btn,.score-group-head:hover .method-btn,.score-group-head:focus-within .method-btn,.method-btn:focus-visible{opacity:1}
.method-btn:hover{color:var(--ink);background:var(--surface-3)}
.method-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
@media (hover:none),(pointer:coarse){.method-btn{opacity:1}}
.method-dialog{box-sizing:border-box;margin:auto;width:min(30rem,calc(100vw - 2rem));max-width:calc(100vw - 2rem);max-height:min(80vh,40rem);padding:0;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);overflow:hidden;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.method-dialog[open]{display:flex;flex-direction:column;animation:method-in .12s ease-out}
.method-dialog::backdrop{background:rgba(0,0,0,.45)}
@keyframes method-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.method-dialog[open]{animation:none}}
@supports (height:1dvh){.method-dialog{max-height:min(80dvh,40rem)}}
.method-sheet{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.method-head{position:relative;display:flex;flex:none;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:0 12px;padding:10px 12px 2px 20px}
.method-head h2{flex:1 1 0;min-width:0;margin:0;font-size:17px;line-height:1.3}
.method-head h2:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.method-eyebrow{display:block;font-size:11.5px;font-weight:600;letter-spacing:.04em;font-variant:small-caps;text-transform:lowercase;color:var(--ink-2)}
.method-tools{display:flex;flex:none;gap:2px}
.method-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.method-icon:hover{color:var(--ink);background:var(--surface-3)}
.method-icon:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.method-copy-note{margin:0}
.method-copy-note:not(:empty){position:absolute;top:calc(100% - 6px);right:12px;z-index:1;padding:3px 9px;border-radius:8px;background:var(--ink);color:var(--card);font-size:12px;line-height:1.4}
.method-copy-note.is-block:not(:empty){position:static;flex:1 1 100%;margin-top:4px;padding:0;background:none;color:var(--ink-2);font-size:12.5px}
.method-copy-field{box-sizing:border-box;flex:none;width:calc(100% - 40px);margin:0 20px 8px;font:inherit;font-size:12.5px}
.method-strip{display:flex;flex:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;max-height:30vh;padding:2px 20px 6px;overflow-y:auto}
.method-strip-main{flex:1 1 11rem;min-width:0}
.method-strip p{margin:0}
.method-strip-value{font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.method-strip-value small{font-size:13px;font-weight:500;color:var(--ink-2)}
.method-strip-value.is-missing{font-size:14px;font-weight:600;line-height:1.4;color:var(--ink)}
.method-strip-ci{display:flex;flex-wrap:wrap;gap:0 10px;font-size:12.5px;color:var(--ink-2)}
.method-strip-chips{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:4px 12px}
.method-strip .score-delta{margin-left:0;white-space:normal}
.method-bar{flex:none;max-width:100%}
.method-bar svg{display:block;max-width:100%}
.method-bar-ends{display:flex;justify-content:space-between;padding:0 3px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.method-bar-track{stroke:var(--line);stroke-width:2;stroke-linecap:round}
.method-bar-band{fill:var(--blue);fill-opacity:.35;stroke:var(--blue-text);stroke-width:1}
.method-bar-baseline{stroke:var(--ink-2);stroke-width:2}
.method-bar-ceiling{stroke:var(--green-text);stroke-width:2;stroke-dasharray:3 2}
.method-bar-score{fill:var(--blue-text);stroke:var(--card);stroke-width:1.5}
.method-dialog .method-sheet .tabs{position:relative;flex-wrap:nowrap;flex:none;gap:2px;margin:0;padding:0 12px;overflow-x:auto;border-bottom:1px solid var(--line)}
.method-dialog .method-sheet .tabs [role="tab"]{min-height:0;margin:0 0 -1px;padding:7px 12px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;cursor:pointer}
.method-dialog .method-sheet .tabs [role="tab"]:hover{background:var(--blue-soft);color:var(--ink)}
.method-dialog .method-sheet .tabs [role="tab"][aria-selected="true"]{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:650;box-shadow:inset 0 -3px 0 var(--blue)}
.method-dialog .method-sheet .tabs [role="tab"]:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.method-panel{flex:1 1 auto;min-height:0;padding:4px 20px 10px;overflow-y:auto;font-size:13px;line-height:1.38}
.method-panel:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.method-panel p,.method-panel ul,.method-panel dl{margin:3px 0}
.method-panel ul{padding-left:20px}
.method-section{margin-top:8px}
.method-label{margin:0 0 2px;font-size:11.5px;font-weight:700;letter-spacing:.06em;font-variant:small-caps;text-transform:lowercase;color:var(--ink-2)}
.method-panel .method-sentence{font-size:14px;line-height:1.5}
.method-formula{margin:8px 0;padding:6px 14px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink)}
.method-formula .method-formula-figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:0 0 4px;font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.method-formula-figure small{font-size:12px;font-weight:400;line-height:1.4;color:var(--ink-2)}
.method-formula-statistic code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.method-formula-unavailable{font-weight:600}
.method-muted{font-size:12px;color:var(--ink-2)}
.method-facts div{display:grid;grid-template-columns:8.5rem 1fr;align-items:baseline;gap:8px;margin:3px 0}
.method-facts dt{margin:0;color:var(--ink-2)}
.method-facts dd{margin:0}
.method-versions{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.method-note{margin:4px 0 8px;padding:8px 12px;border-left:3px solid var(--amber);border-radius:0 8px 8px 0;background:var(--amber-soft);color:var(--ink)}
.method-panel .method-note ul{margin:0;padding-left:18px}
.method-panel .method-rows{margin:4px 0;padding:0;list-style:none}
.method-panel .method-rows li{padding:5px 0;border-top:1px solid var(--line-soft)}
.method-panel .method-rows li:first-child{border-top:0}
.method-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.method-row .score-delta{margin-left:0}
.method-rows .method-muted{margin:1px 0 0}
.method-scope{margin:8px 0 2px;font-size:12.5px;color:var(--ink-2)}
.method-provenance{font-size:12.5px;font-style:italic;color:var(--ink-2)}
.method-diagnostic{color:var(--ink-2)}
.method-fold{margin:12px 0 0;border:1px solid var(--line);border-radius:8px}
.method-fold summary{padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
.method-fold summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.method-fold>:not(summary){margin:0 12px 10px}
.method-dialog .method-link{padding:0;border:0;border-radius:0;background:none;color:var(--blue-text);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.method-dialog .method-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.method-components{font-size:13px}
@media (max-width:600px){
  .method-dialog{width:100%;max-width:100%;max-height:85vh;margin:auto 0 0;border-bottom:0;border-radius:14px 14px 0 0}
  @supports (height:1dvh){.method-dialog{max-height:85dvh}}
  .method-head{padding:20px 8px 6px 16px}
  .method-head::before{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line)}
  .method-copy-field{width:calc(100% - 32px);margin-inline:16px}
  .method-strip{padding-inline:16px}
  .method-dialog .method-sheet .tabs{padding-inline:8px}
  .method-panel{padding:8px 16px calc(18px + env(safe-area-inset-bottom))}
  .method-facts div{grid-template-columns:1fr;gap:0}
}
.confusion-matrix td.cm-hit,.confusion-matrix td.cm-miss{text-align:center;min-width:3.2em}
.class-stats td:nth-child(n+2){text-align:right}
.score-macro{font-weight:650}
.scenario-fold{margin:14px 0}
.scenario-fold>summary{cursor:pointer;font-weight:650}
.registry-page button.danger { color: var(--red); border-color: var(--red); }
.run-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; color: var(--ink-2); font-size: 13px; }
.run-id code { overflow-wrap: anywhere; }
.run-id button { padding: 2px 10px; font-size: 12px; }
.run-id-note:empty { display: none; }
.report-section[data-unmeasured] > details > summary > h3 { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.run-foot { margin-top: 32px; padding-top: 12px; border-top: 1px solid var(--line); }
.run-foot #run-delete { background: none; border: 0; padding: 4px 0; font-size: 13px; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.run-foot #run-delete:hover { color: var(--red-text); }
#run-delete-review { border: 1px solid var(--red); border-radius: 8px; padding: 4px 14px 10px; margin-block: 8px; max-width: 520px; }
#run-delete-review h2 { margin-block: 8px 4px; }
.run-why { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--red); background: var(--red-soft); border-radius: 0 8px 8px 0; }
.run-why p { margin: 2px 0; }
.run-why .run-fix { font-weight: 600; }

.skip{position:absolute;left:8px;top:8px;z-index:30;transform:translateY(-200%);background:var(--card);color:var(--ink);padding:8px 12px}
.skip:focus{transform:none}
.main h1:focus-visible,.main:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.side a.item{text-decoration:none;color:inherit}
.account{position:relative}
.account-menu{position:absolute;right:0;top:100%;z-index:25;display:flex;flex-direction:column;gap:6px;min-width:12rem;padding:8px;background:var(--card);border:1px solid var(--line)}
.tier-badge{font-size:12px;color:var(--ink-2)}

/* Reference clips (imentiv/benchmark#404): the set dialog and the pull preview drawer. Theme tokens only. */
.ref-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,30,60,.45)}
.ref-overlay[data-side="right"]{align-items:stretch;justify-content:flex-end;padding:0}
.ref-sheet{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;overflow:auto;max-height:100%;width:min(640px,100%)}
.ref-overlay[data-side="right"] .ref-sheet{width:min(560px,100%);border-radius:var(--radius) 0 0 var(--radius);max-height:none}
.ref-sheet h2:focus-visible,.ref-sheet [tabindex="-1"]:focus-visible,#reference-clips-title:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ref-sheet input,.ref-sheet select,.ref-sheet button{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px;max-width:100%}
.ref-sheet button{cursor:pointer;margin-block:4px}
.ref-sheet button:disabled{opacity:.55;cursor:default}
.ref-sheet label{display:flex;flex-direction:column;gap:6px;max-width:100%}
.ref-sheet fieldset label,.ref-sheet td label,.ref-sheet th label{flex-direction:row;align-items:center;gap:8px;display:inline-flex}
.ref-sheet fieldset{display:flex;flex-wrap:wrap;gap:16px;margin-block:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.ref-sheet fieldset legend{font-weight:600;padding-inline:4px}
.ref-sheet fieldset p{flex:1 0 100%}
.ref-sheet table{width:100%;border-collapse:collapse}
.ref-sheet th,.ref-sheet td{padding:.5rem;border:1px solid var(--line);text-align:left;overflow-wrap:anywhere}
.ref-sheet :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ref-items{list-style:none;padding:0;margin:12px 0}
.ref-items>li.card{padding:14px 16px;margin-block:10px}
.ref-items h3{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ref-items ul{padding-left:1.2em;margin-block:6px}
.ref-problem{color:var(--red);padding:8px 12px;border-left:3px solid var(--red);background:var(--red-soft);border-radius:0 8px 8px 0}
.ref-problem:empty{display:none}
#reference-clips .pill.n{background:var(--line-soft);color:var(--ink-2)}
#reference-clips .pill.a{color:var(--ink)}
:root[data-theme="dark"] #reference-clips .pill.a,:root[data-theme="dark"] .ref-sheet .pill.a{color:var(--amber)}
@media (max-width:600px){.ref-sheet{padding:14px}.ref-overlay[data-side="right"] .ref-sheet{border-radius:0}}

/* Phone shell: drawer below 900px, table scrollports, tiles, and 40px targets.
   A new table belongs in .table-scroll (or an existing scroller) so the page
   does not grow with it. */
.card{min-width:0;max-width:100%}
.registry-page pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.trend-svg{display:block;width:100%;height:auto;max-width:100%}
.search-trigger{display:inline-flex;align-items:center;gap:6px}
.search-trigger-icon{display:none;width:20px;height:20px}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center}
.menu-toggle svg{width:20px;height:20px;display:block}
.side-tools{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 10px 0}
.dataset-scroll,
.unit-table-scroll,
.runs-scroll,
.evidence-table-scroll,
.table-scroll{
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  position:relative;
}
.table-scroll:not(.table-scroll-fit) > table{
  width:max-content;
  min-width:100%;
  border-collapse:collapse;
}
.table-scroll-fit > table{width:100%;min-width:0}
.table-scroll:not(.table-scroll-fit) > table :is(th, td){white-space:nowrap}
.table-scroll-fit > table :is(th, td),
.score-evidence{white-space:normal;overflow-wrap:anywhere}
/* The deleted nowrap lived at max-width:540px. Above that, report cells wrap.
   width stays 100% there too: max-content is the unwrapped line, so dropping
   nowrap alone would still stretch a sentence across the page. */
@media (min-width:541px){
  .report-view .table-scroll:not(.table-scroll-fit) > table{
    width:100%;
    min-width:0;
  }
  .report-view .table-scroll:not(.table-scroll-fit) > table :is(th, td){
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media (min-width:600px){
  .runs-scroll > table > :is(thead, tbody) > tr > :is(th, td):first-child,
  .evidence-table-scroll > table > :is(thead, tbody) > tr > :is(th, td):first-child,
  .table-scroll:not(.table-scroll-fit):not([data-sticky="off"]) > table > :is(thead, tbody) > tr > :is(th, td):first-child{
    position:sticky;
    left:0;
    z-index:1;
    background-color:var(--card);
    box-shadow:1px 0 0 var(--line);
  }
  .runs-scroll > table > thead > tr > :is(th, td):first-child,
  .evidence-table-scroll > table > thead > tr > :is(th, td):first-child,
  .table-scroll:not(.table-scroll-fit):not([data-sticky="off"]) > table > thead > tr > :is(th, td):first-child{
    z-index:2;
    background-color:var(--table-head);
  }
  .runs-scroll > table > tbody > tr.err > :is(th, td):first-child,
  .evidence-table-scroll > table > tbody > tr.err > :is(th, td):first-child,
  .table-scroll:not(.table-scroll-fit):not([data-sticky="off"]) > table > tbody > tr.err > :is(th, td):first-child{
    background-color:var(--card);
    background-image:linear-gradient(rgba(229,72,77,.035),rgba(229,72,77,.035));
  }
  .runs-scroll > table > tbody > tr.sel > :is(th, td):first-child,
  .evidence-table-scroll > table > tbody > tr.sel > :is(th, td):first-child,
  .table-scroll:not(.table-scroll-fit):not([data-sticky="off"]) > table > tbody > tr.sel > :is(th, td):first-child{
    background-color:var(--card);
    background-image:linear-gradient(var(--blue-soft),var(--blue-soft));
  }
}

@media (max-width:600px){
  .score-row{grid-template-columns:1fr}
  .run-facts{grid-template-columns:1fr}
}

@media (min-width:900px){
  .menu-toggle,.nav-scrim{display:none}
}

@media (max-width:899px){
  #root .screen > .body > nav.side{
    position:fixed;
    z-index:35;
    top:56px;
    left:0;
    bottom:0;
    width:min(280px,100%);
    height:auto;
    flex:none;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    margin:0;
    transform:translateX(-105%);
    visibility:hidden;
  }
  #root .screen > .body > nav.side[data-open="true"]{
    transform:none;
    visibility:visible;
  }
  .nav-scrim{
    position:fixed;
    z-index:30;
    top:56px;
    right:0;
    bottom:0;
    left:0;
    margin:0;
    padding:0;
    border:0;
    background:rgba(20,30,60,.45);
    cursor:pointer;
  }
  #root .screen .app-header-actions .menu-toggle,
  #root .screen .app-header-actions .search-trigger{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--ink);
  }
  .search-trigger-text{display:none}
  .search-trigger-icon{display:block}
}

.btn:not(.s),.table-nav-btn,.side .item,.main [role="tab"],.registry-page button:not(.s),.menu-toggle,.side .theme-toggle,.search-trigger{min-height:40px}
.main [role="tab"]{display:inline-flex;align-items:center;box-sizing:border-box}
.main [role="tablist"]{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.report-view [role="tablist"]{gap:0.3rem;margin-block:1rem}
.menu-toggle{min-width:40px}
.side .theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;min-width:40px;padding:0;
  border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;
}
.side .theme-toggle svg{width:22px;height:22px;display:block}
.side .theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* End to end landing: one card per dataset. Group rows are a five-column grid where the content is wide enough (about 1080px and up, since the side nav takes room from 900px), two columns below that, and stack below 700px. */
.dataset-card{padding:14px 20px;margin-bottom:16px}
.dataset-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dataset-title{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.dataset-card-head h2{font-size:18px;margin:0}
.dataset-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.dataset-verdict{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap;margin:8px 0 4px}
.dataset-headline{margin:8px 0 4px}
.dataset-verdict .dataset-headline{margin:0}
.dataset-headline .pill{font-size:14px;padding:6px 12px;white-space:normal}
.dataset-how{margin:0}
.dataset-how summary,.dg-trend summary{cursor:pointer;font-size:12px;color:var(--ink-3)}
.dataset-groups{list-style:none;margin:6px 0 0;padding:0}
.dataset-group{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,.9fr) minmax(190px,1.5fr) minmax(160px,1.2fr) minmax(90px,.6fr);gap:4px 16px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:13px;min-width:0}
.dataset-group > *{min-width:0;overflow-wrap:anywhere}
.dg-extra{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:12px}
.dg-trend{display:block;min-width:0;max-width:100%}
.dg-trend svg{max-width:100%;height:auto}
.dg-verdict{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.dg-verdict .pill{white-space:normal}
.dg-change{font-size:12px;color:var(--ink-2)}
.dataset-foot{margin-top:8px}
/* The five columns need about 774px of card content (their minimums plus gaps). Narrower than that they would overflow the card. */
@media (max-width:1080px){
  .dataset-group{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .dataset-card{padding:14px}
  .dataset-group{grid-template-columns:minmax(0,1fr)}
}
.dataset-card .note{margin-top:0;line-height:1.4}
.dataset-card .dataset-foot{margin-top:8px}

/* Datasets list (#437): a row is the name and facts, the last-run verdict, and Run / Open. Wide: three columns. Narrow: stacked. */
.dataset-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) auto;align-items:center;gap:6px 16px;padding:12px 16px;margin-bottom:10px}
.dataset-row > *{min-width:0;overflow-wrap:anywhere}
.dataset-row h2,.dataset-row h3{font-size:16px;margin:0 0 2px}
.dataset-row p{margin:0}
.dataset-row-verdict .pill{white-space:normal}
.dataset-row-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.new-dataset-panel{margin:12px 0;padding:12px 16px}
.new-dataset-modes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.new-dataset-modes button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.dataset-head{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.dataset-head h1{margin:0}
.advanced-runner{margin:8px 0}
.advanced-runner summary{cursor:pointer;font-size:12px;color:var(--ink-3)}
@media (max-width:700px){
  .dataset-row{grid-template-columns:minmax(0,1fr);padding:12px}
  .dataset-row-actions{justify-content:flex-start}
}

/* ---------- tabs: one look for every view switcher (components/Tabs.tsx). Not the report's task tabs. ---------- */
.main .tabs{gap:2px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.main .tabs [role="tab"]{margin:0 0 -1px;padding:8px 16px;border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;background:transparent;color:var(--ink-2);font-size:14px;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer}
.main .tabs [role="tab"]:hover{background:var(--blue-soft);color:var(--ink)}
.main .tabs [role="tab"][aria-selected="true"]{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:650;box-shadow:inset 0 -3px 0 var(--blue)}
.tab-panel{min-width:0}
.datasets-type-switch{
  padding:12px 14px 10px;
  margin:0 0 14px;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(120% 160% at 90% 10%, rgba(124,92,255,.14) 0%, rgba(124,92,255,0) 62%),
    linear-gradient(102deg, var(--surface-2), var(--card));
}
.datasets-type-switch .datasets-type-copy{margin:0 0 8px}
.datasets-type-switch .tabs{
  margin:0;
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb, var(--surface-2) 68%, transparent);
}
.datasets-type-switch .tabs [role="tab"]{
  margin:0;
  min-height:34px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:999px;
  box-shadow:none;
  font-size:13px;
}
.datasets-type-switch .tabs [role="tab"][aria-selected="true"]{
  border-color:color-mix(in srgb, var(--blue) 28%, var(--line));
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue-soft) 85%, white), var(--blue-soft));
  color:var(--blue-text);
  box-shadow:0 4px 14px rgba(26,115,232,.2);
}
/* `table.` and the `.table-scroll >` form outrank the generic collapse rules (`.runs-scroll table`,
   `.evidence-page table`, `.report-view table`, `.table-scroll:not(.table-scroll-fit) > table`). */
table.table-elevated,
.table-scroll > table.table-elevated{
  border-collapse:separate;
  border-spacing:0 10px;
}
.table-elevated thead th{
  border-bottom:0;
  color:var(--ink-3);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.45px;
  padding:0 14px 4px;
}
.table-elevated tbody td{
  background:
    radial-gradient(145% 180% at 100% 0%, rgba(124,92,255,.12) 0%, rgba(124,92,255,0) 60%),
    linear-gradient(108deg, color-mix(in srgb, var(--surface-2) 90%, var(--card)), var(--card));
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:12px 14px;
}
.table-elevated tbody tr td:first-child{
  border-left:1px solid var(--line-soft);
  border-radius:12px 0 0 12px;
}
.table-elevated tbody tr td:last-child{
  border-right:1px solid var(--line-soft);
  border-radius:0 12px 12px 0;
}
.table-elevated tbody tr:hover td{
  border-top-color:color-mix(in srgb, var(--blue) 26%, var(--line-soft));
  border-bottom-color:color-mix(in srgb, var(--blue) 26%, var(--line-soft));
}
.table-elevated tbody tr:hover td:first-child{
  border-left-color:color-mix(in srgb, var(--blue) 26%, var(--line-soft));
}
.table-elevated tbody tr:hover td:last-child{
  border-right-color:color-mix(in srgb, var(--blue) 26%, var(--line-soft));
}
.tasks-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  margin:0 0 14px;
}
.tasks-toolbar .muted{margin:0}
.tasks-scroll .tasks-catalog-table details summary{
  cursor:pointer;
  color:var(--blue-text);
  font-weight:600;
}
.tasks-scroll .tasks-catalog-table details[open]{
  padding-bottom:2px;
}
.labeled-datasets-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
/* Published dataset names may have no word boundaries; the heading must shrink and wrap inside the flex row. */
.labeled-datasets-head :is(h1,h2){margin:0;min-width:0;overflow-wrap:anywhere}
.labeled-datasets-head .btn{margin:0}
.labeled-datasets-status:empty{margin:0}

/* ---------- runs: one compact filter toolbar, a labelled field per filter ---------- */
.runs-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:14px 16px;margin:12px 0}
.runs-toolbar .runs-field{display:flex;flex-direction:column;gap:4px;margin:0;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.runs-toolbar .runs-field input,.runs-toolbar .runs-field select{width:100%;min-width:9rem;max-width:16rem;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-size:14px;font-weight:400}
.runs-toolbar .runs-toolbar-actions{display:flex;gap:8px;margin-left:auto}
.runs-toolbar .runs-toolbar-actions button{margin:0}
.runs-pager{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.runs-pager button{margin:0}
@media (max-width:600px){.runs-toolbar .runs-field{flex:1 1 100%}.runs-toolbar .runs-field input,.runs-toolbar .runs-field select{max-width:none}.runs-toolbar .runs-toolbar-actions{margin-left:0}}

/* ---------- sidebar: the column stretches the full height of the page, its links stay pinned under the header ---------- */
.side-inner{display:flex;flex-direction:column;flex:1;min-height:0}
/* 56px is the rendered height of the kit AppHeader that sits above .body in this shell (the legacy fixed .nav, 64px, is a
   different shell and does not apply to nav.side). If the kit header's height changes, change both values here. */
@media (min-width:900px){
  #root .screen > .body > nav.side{position:static;align-self:stretch;height:auto;overflow:visible;padding:0}
  #root .screen > .body > nav.side .side-inner{position:sticky;top:56px;display:block;flex:none;max-height:calc(100vh - 56px);overflow-y:auto;padding:22px 14px}
}
@media (max-width:899px){
  #root .screen > .body > nav.side .side-inner{overflow-y:auto}
}

/* ---------- failed-run sentence, Overview header and Sources (imentiv/benchmark#460). Theme tokens only. ---------- */
.run-failure{display:block;margin-top:2px;max-width:60ch;color:var(--ink-2);font-size:13px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.evidence-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0 0}
.evidence-head p{margin:0}
.evidence-head .btn{margin:0}
.main .muted{color:var(--ink-2);font-size:13px}
.activity-list{list-style:none;margin:8px 0 12px;padding:0}
.activity-list li{padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.overview-v2{display:flex;flex-direction:column;gap:12px}
.overview-v2 > .section-hero{margin:0}
.overview-v2-headline .muted{margin:6px 0 0}
.overview-v2-status{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.overview-v2-status::before{content:"◉";font-size:12px;color:var(--blue)}
.overview-v2-refresh{border-color:var(--blue);color:var(--blue-text);background:var(--card)}
.overview-v2-media{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.overview-v2-media-card{margin:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:34px;background:var(--card);color:var(--ink);text-align:left;min-height:248px}
.overview-v2-media-card:hover{border-color:color-mix(in srgb, var(--blue) 38%, var(--line));box-shadow:var(--shadow)}
.overview-v2-media-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.overview-v2-media-card.is-selected{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent)}
.overview-v2-media-card-all{min-height:260px}
.overview-v2-media-card-head{display:flex;align-items:center;gap:10px;width:100%}
.overview-v2-media-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--ink-3);flex:none}
.overview-v2-media-icon svg{width:22px;height:22px;display:block}
.overview-v2-media-title{font-size:15px;line-height:1.2;color:var(--ink);font-weight:700;white-space:nowrap}
.overview-v2-media-heading{width:100%;font-size:16px;line-height:1.3;color:var(--blue-text);font-weight:700}
.overview-v2-media-description{width:100%;font-size:14px;line-height:1.45;color:var(--ink-2)}
.overview-v2-media-footer{width:100%;margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-3)}
.overview-v2-media-card.is-selected .overview-v2-media-footer{color:var(--blue-text)}
.overview-v2-media-card:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;border-color:var(--line)}
.overview-v2-toggle{display:flex;justify-content:flex-end;margin:2px 0 0}
.overview-v2-toggle button{margin:0;padding:0 16px;min-height:36px;border-radius:999px}
.overview-v2-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber-text)}
.overview-v2-lower{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:12px;align-items:stretch}
.overview-v2-section{padding:14px 16px}
.overview-v2-section h2{margin:0 0 8px}
.section-hero{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:0 0 14px;border:1px solid var(--line-soft);background:
  radial-gradient(120% 170% at 100% 110%, rgba(43,120,255,.18) 0%, rgba(43,120,255,0) 62%),
  linear-gradient(102deg, var(--surface-2), var(--card))}
.section-hero h1{margin:0}
.section-hero .sub{margin:6px 0 0;max-width:none;font-size:13px}
.section-hero-icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--blue-soft);border:1px solid color-mix(in srgb, var(--blue) 35%, transparent);color:var(--blue)}
.section-hero-icon svg{width:26px;height:26px;display:block}
/* Opt-in: only elements marked `std-action` inside a refreshed page get the action style. Prose and table links stay links. */
.std-clickables .std-action{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 12px;
  border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease
}
.std-clickables .std-action:hover{
  background:var(--blue-soft);border-color:rgba(26,115,232,.28);color:var(--blue);text-decoration:none
}
.std-clickables .std-action:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px
}
.std-clickables .std-action:where([disabled],[aria-disabled="true"]){opacity:.55;cursor:not-allowed}
.sources{margin:6px 0}
.sources>summary{cursor:pointer;color:var(--ink-2);font-size:13px}
.sources-title{margin:10px 0 2px;font-size:12px;font-weight:650;color:var(--ink-2)}
.sources ul{margin:2px 0;padding-left:20px}
.sources .source-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0}
.sources .source-list button{font:inherit;font-size:12px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer}

/* ---------- start page: one summary card, one primary action, and the confirm dialog (imentiv/benchmark#460) ---------- */
.registry-page .run-summary{max-width:760px;padding:20px;margin-block:16px}
.run-summary-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.run-summary-head h2{margin:0;font-size:18px;line-height:1.3;overflow-wrap:anywhere}
.registry-page .run-summary-head .btn{margin:0}
.registry-page .run-summary dl,.run-confirm-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:16px 0 0}
.registry-page .run-summary dt,.run-confirm-facts dt{margin:0;font-weight:600;font-size:13px;color:var(--ink-2)}
.registry-page .run-summary dd,.run-confirm-facts dd{margin:0;overflow-wrap:anywhere}
.run-notice{margin:12px 0 0;padding:8px 12px;border-left:3px solid var(--amber);background:var(--amber-soft);color:var(--ink);border-radius:0 8px 8px 0}
.run-actions{max-width:760px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;margin-block:16px}
.registry-page .run-actions .btn,.ref-sheet .run-actions .btn{margin:0;padding:0 18px;min-height:40px;font-size:14px}
.run-confirm-facts{margin-bottom:8px}
@media (max-width:600px){
  .overview-v2-media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview-v2-media-card-all{grid-column:1 / -1}
  .overview-v2-media-card{min-height:0;padding:12px}
  .section-hero{padding:14px 16px}
  .section-hero-icon{width:46px;height:46px}
  .section-hero-icon svg{width:22px;height:22px}
  .overview-v2-media-title{font-size:15px}
  .overview-v2-media-heading{font-size:14px}
  .overview-v2-media-description{font-size:13px}
  .overview-v2-media-footer{font-size:14px}
  .overview-v2-toggle{justify-content:stretch}
  .overview-v2-toggle button{width:100%}
  .registry-page .run-summary dl,.run-confirm-facts{grid-template-columns:minmax(0,1fr);gap:2px}
  .registry-page .run-summary dd,.run-confirm-facts dd{margin-bottom:10px}
  .run-actions{justify-content:stretch}
  .run-actions .btn{flex:1 1 100%}
}

/* ---------- keyboard focus: one colour (--focus), also for an element no scoped rule above reaches ---------- */
:where(a, button, input, select, textarea, summary, [role="tab"], [tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* The dark theme's blue is light, so white text on it fails AA: dark ink on the filled blue controls. */
:root[data-theme="dark"] .btn.p,:root[data-theme="dark"] .avatar,:root[data-theme="dark"] .new-dataset-modes button[aria-pressed="true"]{color:#0b1220}
:root[data-theme="dark"] .btn.p:hover{color:#fff}

/* ---------- scenario page (#459): header, control bar, grouped metric table ----------
   Scoped to .scenario-performance. .registry-page is on every signed-in route, so it would reach the report tables too. */
.scenario-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin-bottom:12px}
.scenario-head-main{min-width:0;flex:1 1 320px}
.scenario-head h1{margin:0 0 4px}
.scenario-head p{margin:4px 0}
.scenario-head details{margin-top:4px;min-width:0}
.scenario-head details summary{cursor:pointer;font-size:12px;color:var(--ink-3)}
.scenario-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.scenario-head > .note{flex:1 0 100%;margin-top:0}
.scenario-head > .note p{margin:0}
.control-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;padding:10px 12px;margin-block:16px 8px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px}
.control-bar > label{font-size:11.5px;font-weight:600;color:var(--ink-2);min-width:160px}
.control-bar > .note{flex:1 0 100%;margin:0}
.segmented{display:inline-flex}
.segmented button{margin:0;border-radius:0}
.segmented button + button{margin-left:-1px}
.segmented button:first-child{border-radius:6px 0 0 6px}
.segmented button:last-child{border-radius:0 6px 6px 0}
.segmented button[aria-pressed="true"]{background:var(--blue-soft);color:var(--blue-text);border-color:var(--blue-text);font-weight:600;position:relative}
.trend-empty{margin-block:12px}
.scenario-performance .trend-svg{max-height:220px}
.trend-help{margin-block:4px 8px}
.trend-help summary{cursor:pointer;font-size:12px;color:var(--ink-3)}
.trend-help p{text-align:left;margin:6px 0}
/* A group heading row. It is a rowgroup header, so it must not take the sticky first-column treatment. */
.scenario-performance .metric-group th{text-align:left;background:var(--table-head);font-size:11.5px;color:var(--ink-2)}
@media (min-width:600px){
  .scenario-performance .table-scroll:not(.table-scroll-fit):not([data-sticky="off"]) > table > tbody > tr > th[scope="rowgroup"]:first-child{
    position:static;
    box-shadow:none;
    background-color:var(--table-head);
  }
}
/* Cells wrap from 541px, so Metric, Value and Versus baseline are in view at desktop widths. Narrower, the region scrolls. */
@media (min-width:541px){
  .scenario-performance .table-scroll.scenario-table > table{width:100%;min-width:0}
  .scenario-performance .table-scroll.scenario-table > table td{white-space:normal;overflow-wrap:anywhere}
  /* A heading breaks at spaces only: `anywhere` would let the narrow Metric column split AVERAGE MISS as AVERAG / E MISS (#469). */
  .scenario-performance .table-scroll.scenario-table > table th{white-space:normal;overflow-wrap:normal;word-break:normal}
}
/* The runs table (#485): an id or a model name is one token and never wraps inside it. It is shortened in the cell, with the full value in a
   title and a copy button; only the opened detail breaks a value anywhere. */
@media (min-width:541px){
  .scenario-performance .table-scroll.scenario-runs > table td.id-cell{white-space:nowrap;overflow-wrap:normal}
  .scenario-performance .table-scroll.scenario-runs > table td.row-actions{white-space:nowrap;overflow-wrap:normal}
}
.scenario-runs .clip-text{display:inline-block;max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.scenario-runs .wrap-anywhere{overflow-wrap:anywhere}
.scenario-runs .run-detail dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0}
.scenario-runs .run-detail dt{color:var(--ink-2)}
.scenario-runs .run-detail dd{margin:0}
.run-clips > details > summary{cursor:pointer}
.run-clips > details > summary > h2{display:inline;font-size:inherit;margin:0 8px 0 0}
.run-clips-counts{color:var(--ink-2)}
.copy-id{display:inline-flex;align-items:center;gap:4px}
.copy-id-button{font-size:11px;padding:0 6px}
.trend-rule text{font-size:10px}
/* A shadow at the edge that still has content behind it: the covers (local, in the page colour) hide it when the region is scrolled to that end or does not scroll. */
.scenario-performance .table-scroll{
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(20,30,60,.22), transparent) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, rgba(20,30,60,.22), transparent) right center / 12px 100% no-repeat scroll;
}
:root[data-theme="dark"] .scenario-performance .table-scroll{
  background:
    linear-gradient(to right, var(--bg) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg) 30%, transparent) right center / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(0,0,0,.55), transparent) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, rgba(0,0,0,.55), transparent) right center / 12px 100% no-repeat scroll;
}
/* Clips tab (ScenarioClips). It sits inside .registry-page, whose generic label, button, small and td rules these override. Theme tokens only. */
.scenario-clips { max-width: 100%; min-width: 0; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.scenario-clips > p { margin: 0 20px 12px; }
.scenario-clips button, .scenario-clips select { min-height: 36px; margin: 0; padding: 0 12px; border-radius: 8px; }
.scenario-clips input[type="checkbox"] { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: var(--blue); align-self: center; }
.scenario-clips small { max-width: none; }
.scenario-clips .muted { color: var(--ink-3); }
.scenario-clips kbd { font: inherit; font-size: 11px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-3); }
.clips-count { display: inline-block; min-width: 1.6em; padding: 1px 7px; border-radius: 10px; background: var(--surface-3); color: var(--ink-3); font-size: 11.5px; font-weight: 600; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.scenario-clips .clips-primary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue); color: var(--card); font-weight: 600; text-decoration: none; }
.scenario-clips .clips-primary:disabled { opacity: .55; }
.scenario-clips .clips-link { min-height: 0; padding: 0; border: 0; background: none; color: var(--blue-text); text-decoration: underline; text-underline-offset: 2px; }

.clips-heading { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 4px 20px 0; border-bottom: 1px solid var(--line-soft); }
.clips-views { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 480px; }
.scenario-clips .clips-views button { min-height: 46px; margin-bottom: -1px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--ink-2); font-weight: 500; }
.scenario-clips .clips-views button:hover { color: var(--ink); }
.scenario-clips .clips-views button[aria-current="page"] { border-bottom-color: var(--blue); color: var(--blue-text); font-weight: 600; }
.clips-views [aria-current="page"] .clips-count { background: var(--blue-soft); color: var(--blue-text); }
.clips-heading-actions { display: flex; gap: 8px; margin-left: auto; padding-bottom: 8px; }

.clips-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px; }
.scenario-clips .clips-filter-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.scenario-clips .clips-filter-toggle[aria-expanded="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-text); }
.clips-filter-toggle .clips-count { background: var(--blue); color: var(--card); }
.scenario-clips .clips-search { flex: 1 1 260px; max-width: 460px; flex-direction: row; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.scenario-clips .clips-search:focus-within { border-color: var(--blue); }
.scenario-clips .clips-search input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; }
.clips-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.scenario-clips .clips-inline { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--ink-3); font-size: 13px; }
.scenario-clips .clips-inline select { color: var(--ink); font-size: 14px; }
.scenario-clips .clips-order { min-width: 36px; padding: 0; }
.clips-menu { position: relative; }
.clips-menu > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); list-style: none; cursor: pointer; }
.clips-menu > summary::-webkit-details-marker { display: none; }
.clips-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,60,.16); }
.scenario-clips .clips-menu-panel button { min-height: 0; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; white-space: nowrap; }
.scenario-clips .clips-menu-panel button:hover:not(:disabled) { background: var(--surface-2); }
.clips-menu-panel .clips-option { padding: 6px 8px; white-space: nowrap; }
.scenario-clips .clips-option { display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
.scenario-clips .clips-outcomes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -4px 20px 12px; padding: 0; border: 0; font-size: 13px; }
.clips-outcomes legend { float: left; margin-right: 4px; color: var(--ink-3); }

.scenario-clips .clips-banner, .scenario-clips .clips-health { margin: 0 20px 12px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.scenario-clips .clips-health { background: var(--amber-soft); color: var(--amber-text); }
.scenario-clips .clips-health strong { font-weight: 600; }
.scenario-clips .clips-health .clips-link { color: inherit; font-weight: 600; }
.clips-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 12px; }
.scenario-clips .clips-chips > button:not(.clips-link) { min-height: 28px; padding: 0 10px; border: 1px solid var(--blue); border-radius: 14px; background: var(--blue-soft); color: var(--blue-text); font-size: 12.5px; }
.scenario-clips .clips-chips > .clips-link { font-size: 12.5px; color: var(--ink-3); }
.clips-run-filter { margin-left: auto; font-size: 13px; font-weight: 600; }

.clips-layout { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border-top: 1px solid var(--line-soft); }
.clips-layout.filters-open { grid-template-columns: 13.5rem minmax(0, 1fr); }
.clips-filters { min-width: 0; padding: 4px 16px 16px 20px; border-right: 1px solid var(--line-soft); font-size: 13px; }
.clips-filters > summary { display: none; }
.clips-facet { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.clips-facet > summary { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 600; list-style: none; cursor: pointer; }
.clips-facet > summary::-webkit-details-marker { display: none; }
.clips-facet > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); font-weight: 400; }
.clips-facet[open] > summary::after { content: "▴"; }
.scenario-clips .clips-facet .clips-option { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; }
.clips-option-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.clips-share { display: block; height: 3px; border-radius: 2px; background: var(--surface-3); }
.clips-share > span { display: block; height: 100%; border-radius: 2px; background: var(--blue); opacity: .5; }
.scenario-clips .clips-facet label:not(.clips-option) { gap: 4px; margin-top: 8px; color: var(--ink-3); font-size: 12px; }
.scenario-clips .clips-facet input:not([type="checkbox"]), .scenario-clips .clips-facet select { width: 100%; min-height: 32px; padding: 4px 8px; color: var(--ink); font-size: 13px; }
.clips-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.clips-quiet { margin-top: 12px; font-size: 12px; line-height: 1.5; }
.clips-histogram { display: flex; align-items: end; gap: 2px; height: 2.5rem; margin: .4rem 0; }
.clips-histogram span { flex: 1; min-width: 0; background: var(--blue); border-radius: 2px 2px 0 0; }

.clips-results { min-width: 0; }
.clips-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px; background: var(--blue-soft); border-bottom: 1px solid var(--line-soft); }
.clips-selection strong { color: var(--blue-text); font-weight: 600; }
.clips-selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.scenario-clips .clips-empty { margin: 0; padding: 24px 20px; color: var(--ink-3); }
.clips-table-wrap { position: relative; min-width: 0; overflow-x: auto; }
.clips-results table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.clips-results th, .clips-results td { min-width: 0; padding: 10px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.clips-results thead th { padding-block: 10px; background: var(--table-head); color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.clips-results .clips-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clips-results tbody th { background: none; color: var(--ink); font-size: 13.5px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.scenario-clips .clips-sort { display: inline-flex; align-items: center; gap: 4px; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.clips-sort span { font-size: 10px; opacity: .6; }
.clips-results th[aria-sort] .clips-sort { color: var(--blue-text); }
.clips-results th[aria-sort] .clips-sort span { opacity: 1; }
.clips-results .clips-check-cell { width: 1%; padding-left: 20px; padding-right: 4px; }
/* Zero width with a full minimum lets the clip column shrink and truncate instead of widening the table. */
.clips-results th.clips-clip { width: 34%; min-width: 10rem; }
.clips-clip-title { display: block; width: 0; min-width: 100%; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.scenario-clips .clips-clip small { display: block; width: 0; min-width: 100%; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.clips-clip small:empty { display: none; }
.clips-clip small span + span::before { content: " · "; }
.clips-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 11rem; }
.scenario-clips .clips-status small { display: inline; color: var(--ink-3); }
.clips-results tbody tr:hover > * { background: var(--surface-2); }
.clips-results tbody tr.is-selected > * { background: var(--blue-soft); }
.clips-results tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.clips-results .clips-actions-cell { width: 1%; padding-right: 20px; white-space: nowrap; }
.clips-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.clips-row-actions > a { padding: 6px 8px; border-radius: 8px; color: var(--blue-text); font-weight: 500; text-decoration: none; }
.clips-row-actions > a:hover { background: var(--blue-soft); }
.scenario-clips .clips-row-menu > summary { justify-content: center; width: 32px; min-height: 32px; padding: 0; border-color: transparent; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; }
.clips-row-menu > summary:hover, .clips-row-menu[open] > summary { background: var(--surface-2); }
.clips-popover { position: relative; display: inline-flex; }
.scenario-clips .clips-popover > .clips-link { color: var(--ink-3); font-size: 12px; text-decoration-color: var(--line); white-space: nowrap; }
.clips-popover-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(360px, 80vw); max-height: 320px; overflow: auto; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,60,.16); font-size: 13px; }
.clips-popover-panel ul { margin: 0 0 8px; padding-left: 18px; }
.clips-popover-panel li a { margin-left: 6px; }
.clips-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 20px; color: var(--ink-3); font-size: 13px; }
.clips-keys { font-size: 12px; }
.clips-pages { display: flex; gap: 4px; margin-left: auto; }
.scenario-clips .clips-pages button { min-width: 32px; min-height: 32px; padding: 0 8px; }
.scenario-clips .clips-pages button[aria-current="page"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-text); font-weight: 600; }
.ref-sheet .clips-textarea { width: 100%; min-height: 120px; margin-block: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }
.clips-choices { display: flex; flex-direction: column; gap: 6px; margin-block: 12px; }
.ref-sheet .clips-choices button { text-align: left; }
.ref-sheet .clips-choices button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
@media (min-width: 651px) { .clips-filters:not([open]) { display: none; } }
@media (max-width: 650px) {
  .clips-heading, .clips-toolbar { padding-inline: 12px; }
  .clips-views { position: relative; flex-wrap: nowrap; overflow-x: auto; }
  .scenario-clips .clips-views button { white-space: nowrap; }
  .scenario-clips .clips-filter-toggle { display: none; }
  .scenario-clips .clips-search { flex-basis: 100%; max-width: none; }
  .clips-toolbar-end { margin-left: 0; }
  .clips-layout, .clips-layout.filters-open { display: block; }
  .clips-filters { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; max-height: 70vh; overflow-y: auto; padding: .25rem 1rem .75rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 -3px 12px #0002; }
  .clips-filters > summary { display: list-item; padding: .6rem 0; font-weight: 600; cursor: pointer; }
  .clips-results { padding-bottom: 3.5rem; }
  .clips-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .clips-table-wrap tbody, .clips-table-wrap tr, .clips-table-wrap td, .clips-table-wrap th[scope="row"] { display: block; }
  .clips-table-wrap tr { position: relative; margin: 10px 12px; padding: 10px 12px 10px 40px; border: 1px solid var(--line); border-radius: 12px; }
  .clips-results .clips-table-wrap td, .clips-results .clips-table-wrap th[scope="row"] { max-width: 100%; padding: 2px 0; border: 0; text-align: left; }
  .clips-table-wrap td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); }
  .clips-results .clips-table-wrap td:is([data-label="Scene"], [data-label="Length"], [data-label="Moments"]) { display: inline-block; margin-right: 14px; }
  .clips-results tbody tr:hover > *, .clips-results tbody tr.is-selected > * { background: none; }
  .clips-results tbody tr.is-selected { background: var(--blue-soft); border-color: var(--blue); }
  .clips-results .clips-table-wrap .clips-check-cell { position: absolute; top: 14px; left: 12px; width: auto; padding: 0; }
  .clips-row-actions { justify-content: flex-start; }
  .clips-pager { padding-inline: 12px; }
  .clips-pages { margin-left: 0; }
}

/* Dataset Overview tab (ScenarioOverview). Inside .registry-page, whose generic rules these override. Theme tokens only. */
.ov { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.registry-page .ov .card { margin: 0; padding: 20px 22px; }
.ov h2 { margin: 0 0 12px; font-size: 16px; font-weight: 650; }
.ov h3 { margin: 0; font-size: 13px; font-weight: 600; }
.ov-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.ov .ov-card-head h2 { margin: 0; }
.ov-card-head > a, .ov-card-head > p { margin: 0; font-size: 13px; }

.ov-hero-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.ov .ov-eyebrow { margin: 0 0 8px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ov-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 7px; border-radius: 999px; font-size: 16px; font-weight: 650; }
.ov-badge-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--card); font-size: 13px; font-weight: 700; }
.ov-badge.is-ready { background: var(--green-soft); color: var(--green-text); }
.ov-badge.is-ready .ov-badge-icon { background: var(--green); }
.ov-badge.is-blocked { background: var(--red-soft); color: var(--red-text); }
.ov-badge.is-blocked .ov-badge-icon { background: var(--red); }
.ov-facts { display: flex; flex-wrap: wrap; margin: 10px 0 0; color: var(--ink-2); font-size: 13px; }
.ov-facts > * + *::before { content: "·"; display: inline-block; margin: 0 8px; color: var(--ink-3); }
.ov-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.registry-page .ov-hero-actions button { margin: 0; padding: 8px 16px; border-radius: 8px; }
.registry-page .ov-hero-actions button[data-annotate] { border-color: var(--blue); background: var(--blue); color: var(--card); font-weight: 600; }
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.ov-tile > a, .ov-tile > span { box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.ov-tile > a:hover { border-color: var(--blue); }
.ov-tile-value { font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ov-tile-label { color: var(--ink-2); font-size: 12.5px; line-height: 1.3; }
.ov-tile.is-zero .ov-tile-value { color: var(--ink-3); }
.ov-tile.is-warn > a { border-color: transparent; background: var(--amber-soft); }
.ov-tile.is-warn .ov-tile-value { color: var(--amber-text); }
.ov-tile.is-bad > a { border-color: transparent; background: var(--red-soft); }
.ov-tile.is-bad .ov-tile-value { color: var(--red-text); }
.ov-tile.is-warn > a:hover, .ov-tile.is-bad > a:hover { border-color: currentColor; }
.ov-notes { margin-top: 14px; color: var(--ink-3); font-size: 12.5px; }
.ov-notes > summary { width: fit-content; cursor: pointer; }
.ov .ov-notes p { margin: 6px 0 0; }
.ov .ov-warn { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--amber-soft); color: var(--amber-text); font-size: 13px; }

.ov-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ov-grid > .ov-side:only-child { grid-column: 1 / -1; }
.ov-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1000px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
.ov-block + .ov-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.ov-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.ov .ov-block > p { margin: 0; font-size: 13px; }
.ov .ov-big { margin: 0; color: var(--ink-2); font-size: 13px; }
.ov-big strong { margin-right: 2px; color: var(--ink); font-size: 20px; font-weight: 700; }
.ov-segments { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 6px; background: var(--surface-3); }
.ov-seg { min-width: 4px; }
.ov-seg.tone-g, .ov-dot.tone-g { background: var(--green); }
.ov-seg.tone-p, .ov-dot.tone-p { background: var(--purple); }
.ov-seg.tone-b, .ov-dot.tone-b { background: var(--blue); }
.ov-seg.tone-a, .ov-dot.tone-a { background: var(--amber); }
.ov-seg.tone-n, .ov-dot.tone-n { background: var(--line); }
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.ov-legend li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.ov-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.ov-legend-name { color: var(--ink-2); }

.ov .ov-latest-head, .ov .ov-empty-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.ov .ov-empty-title { color: var(--ink-2); }
.ov .ov-latest .muted { margin: 0 0 12px; }
.ov-latest .btn { display: inline-flex; }
.ov-timeline { margin: 0; padding: 0; list-style: none; }
.ov-timeline li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-size: 13px; text-decoration: none; }
.ov-timeline li:last-child a { border-bottom: 0; }
.ov-timeline li a:hover .ov-when { color: var(--blue-text); text-decoration: underline; }

.ov-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ov-panel { min-width: 0; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface-2); }
.ov .ov-panel h3 { margin-bottom: 10px; }
.ov .ov-panel-note { margin: -6px 0 10px; font-size: 12px; }
.ov .ov-single, .ov .ov-panel > p { margin: 0; color: var(--ink-2); font-size: 13px; }
/* One grid for the whole list, so labels, bars and numbers line up from row to row. */
.ov-bars { display: grid; grid-template-columns: fit-content(68%) minmax(32px, 1fr) auto auto; align-items: center; gap: 7px 10px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.ov-bars li { display: contents; }
.ov-bars-head > span { color: var(--ink-3); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.ov-bar-label { overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.ov-bar-track { height: 8px; overflow: hidden; border-radius: 4px; background: var(--line); }
.ov-bar-track > span { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.ov-bar-share { min-width: 0; color: var(--ink-3); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.ov-bar-count { min-width: 2em; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ov .ov-subhead { margin: 20px 0 10px; font-size: 14px; }
.ov .ov-same { margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }
.ov-same strong { color: var(--ink); font-weight: 600; }
.ov-panels { align-items: start; }
#scenario-annotators .card h2 { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
#scenario-annotators .card > p { margin: 0 0 8px; max-width: 75ch; color: var(--ink-2); font-size: 13px; }
#scenario-annotators .card > p:has(#annotators-q) { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin-top: 12px; }
#scenario-annotators #annotators-q { flex: 1 1 220px; max-width: 360px; }

.registry-page details.ov-disclosure { margin-block: 16px; padding: 0; }
.ov-disclosure > summary { padding: 16px 22px; font-size: 15px; font-weight: 650; cursor: pointer; }
.ov-disclosure[open] > summary { border-bottom: 1px solid var(--line-soft); }
.ov-disclosure > :not(summary) { margin: 16px 22px; }
@media (max-width: 650px) {
  .registry-page .ov .card { padding: 16px; }
  .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-panels { grid-template-columns: minmax(0, 1fr); }
}

.health-populations { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; list-style: none; padding: 0; }
.health-populations li { max-width: 100%; overflow-wrap: anywhere; }
.health-stack { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 2rem; }
.health-stack a { color: var(--blue-text); background: var(--card); border: 1px solid currentColor; padding: .4rem; min-width: 5rem; text-align: center; }
#scenario-dataset-detail details code { overflow-wrap: anywhere; }

.health-mini-bar { display: block; height: .2rem; background: var(--blue-text); max-width: 10rem; margin: .25rem 0; }
/* Exact bulk event links remain visible after History has loaded. */
.hist-item:target > .hist-row { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Scenario History tab: revisions under day headings, each line opening its details in place. */
.registry-page .hist .card { margin-block: 0 16px; }
.hist-head h2 { margin: 0 0 4px; font-size: 18px; }
.hist .hist-head > p.muted { max-width: 80ch; margin: 0; font-size: 13px; }
.hist-facts { display: flex; flex-wrap: wrap; margin: 12px 0 0; color: var(--ink-2); font-size: 13px; }
.hist-facts > * + *::before { content: "·"; display: inline-block; margin: 0 8px; color: var(--ink-3); }
.hist-facts strong { color: var(--ink); font-weight: 650; }
.registry-page .hist-card { padding: 6px 20px 14px; }
.hist .hist-day { margin: 14px 0 4px; color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hist-list { margin: 0; padding: 0; list-style: none; }
.hist-list > li { border-bottom: 1px solid var(--line-soft); }
.hist-list > li:last-child { border-bottom: 0; }
.hist-nested { margin: 0 0 8px 18px; padding-left: 12px; border-left: 2px solid var(--line-soft); }
.registry-page button.hist-row { display: grid; grid-template-columns: 11.5em 9.5em minmax(0, 1fr) auto 14px; align-items: center; gap: 4px 14px; width: 100%; margin: 0; padding: 10px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; }
.registry-page button.hist-row:hover { background: var(--surface-2); }
.hist-item.is-open > .hist-row, .hist-group.is-open > .hist-row { background: var(--surface-2); }
.hist-time { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-chip { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hist-chip.tone-b { background: var(--blue-soft); color: var(--blue-text); }
.hist-chip.tone-p { background: var(--purple-soft); color: var(--purple-text); }
.hist-chip.tone-a { background: var(--amber-soft); color: var(--amber-text); }
.hist-chip.tone-g { background: var(--green-soft); color: var(--green-text); }
.hist-chip.tone-n { background: var(--surface-3); color: var(--ink-2); }
.hist-what { min-width: 0; }
.hist-who { color: var(--ink-3); }
.hist-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hist-badge { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.hist-badge.is-current { border-color: transparent; background: var(--green-soft); color: var(--green-text); font-weight: 600; }
.hist-badge.is-scored { border-color: transparent; background: var(--blue-soft); color: var(--blue-text); }
.hist-chevron { color: var(--ink-3); font-size: 18px; line-height: 1; transition: transform .15s; }
.hist-row[aria-expanded="true"] > .hist-chevron { transform: rotate(90deg); }
.hist-detail { margin: 4px 8px 14px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card); }
.hist-linked h3 { margin: 0 0 10px; font-size: 15px; }
.hist-linked .hist-detail { margin: 0; padding: 0; border: 0; }
.hist-modes { display: inline-flex; margin-bottom: 10px; padding: 3px; border-radius: 9px; background: var(--surface-3); }
.registry-page .hist-modes button { min-height: 0; margin: 0; padding: 5px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: 13px; }
.registry-page .hist-modes button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.hist .hist-mode-title { margin: 0 0 8px; font-weight: 600; }
.hist .hist-detail p { margin: 0 0 8px; font-size: 13px; }
.hist .hist-status { font-weight: 600; }
.hist-diff { width: 100%; margin: 4px 0 8px; border-collapse: collapse; font-size: 13px; }
.registry-page .hist-diff td, .registry-page .hist-diff th { min-width: 0; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.hist-diff thead th { color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hist-diff tbody th { background: transparent; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.hist-diff thead th { background: transparent; }
.hist-diff td:last-child { text-align: right; white-space: nowrap; }
.hist-changes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.hist-changes li { padding: 1px 8px; border-radius: 6px; background: var(--surface-3); color: var(--ink-2); }
.hist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: 13px; }
.registry-page .hist-actions button { margin: 0; padding: 6px 12px; border-radius: 8px; }
.registry-page button.hist-restore { border-color: var(--amber-text); color: var(--amber-text); }
.hist-confirm { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--amber-soft); }
.registry-page .hist-confirm button { margin: 0 6px 0 0; padding: 6px 12px; border-radius: 8px; }
.registry-page .hist-confirm button.hist-restore { border-color: var(--amber-text); background: var(--amber-text); color: var(--card); font-weight: 600; }
.registry-page button.hist-more { margin: 12px 0 0; padding: 6px 14px; border-radius: 8px; }
@media (max-width: 760px) {
  .hist-facts { flex-direction: column; gap: 2px; }
  .hist-facts > * + *::before { content: none; }
  .registry-page button.hist-row { grid-template-columns: auto minmax(0, 1fr) 14px; }
  .hist-time { grid-column: 1; }
  .hist-chip { grid-column: 2; }
  .hist-chevron { grid-column: 3; grid-row: 1; }
  .hist-what, .hist-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .hist-detail { margin-inline: 0; padding: 12px; }
  .hist-diff thead { display: none; }
  .hist-diff tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
  .registry-page .hist-diff td, .registry-page .hist-diff th { border: 0; padding: 2px 0; }
  .hist-diff td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
.ref-sheet fieldset input:not([type="checkbox"]), .ref-sheet fieldset select, .ref-sheet fieldset textarea { max-width: 100%; box-sizing: border-box; }

/* Keep report navigation scoped above the generic kit tab rules. */
.main .scenario-report-tabs .tabs { margin: 0; }

/* Organization page: the owner's mood buckets (components/MoodBuckets.tsx). */
.mood-buckets td, .mood-buckets-editor td { vertical-align: top; }
.mood-buckets-editor input { width: 100%; min-width: 10rem; box-sizing: border-box; }
.mood-buckets-editor td:first-child input { min-width: 8rem; }

/* The three-dot row menu: a vertical ⋮ button; the panel is placed against the viewport so a table that scrolls sideways cannot clip it. */
.row-kebab { position: relative; display: inline-block; }
.row-kebab > summary { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; list-style: none; cursor: pointer; }
.row-kebab > summary::-webkit-details-marker { display: none; }
.row-kebab > summary:hover, .row-kebab[open] > summary { background: var(--surface-2); }
.row-kebab > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.row-kebab-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; display: flex; flex-direction: column; min-width: 190px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,60,.16); }
.row-kebab-panel button { min-height: 0; padding: 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; white-space: nowrap; }
.row-kebab-panel button:hover:not(:disabled) { background: var(--surface-2); }

/* Framed tables: a rounded frame, a tinted header row, and column and row rules, in each theme's own palette.
   `data-flow` comes from ConsoleLayout (`inEndToEndFlow` in routes.ts): every page of the End to end flow keeps its own table styles. */
#main:not([data-flow="end-to-end"]) table{
  border-collapse:separate;
  border-spacing:0;
  padding:var(--tbl-frame-pad);
  border:1px solid var(--tbl-frame-line);
  border-radius:calc(13px + var(--tbl-frame-pad));
  background:var(--tbl-frame);
}
#main:not([data-flow="end-to-end"]) table :is(th, td){
  border:0;
  border-radius:0;
}
#main:not([data-flow="end-to-end"]) table > thead > tr > :is(th, td){
  padding:14px 16px;
  background:var(--tbl-head);
  color:var(--tbl-head-ink);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#main:not([data-flow="end-to-end"]) table > :is(tbody, tfoot) > tr > :is(th, td){
  background:var(--tbl-body);
  color:var(--tbl-ink);
  border-top:1px solid var(--tbl-line);
}
#main:not([data-flow="end-to-end"]) table > tbody > tr:nth-child(even) > :is(th, td){
  background-color:var(--tbl-body-alt);
}
#main:not([data-flow="end-to-end"]) table > thead + tbody > tr:first-child > :is(th, td),
#main:not([data-flow="end-to-end"]) table > tbody:first-child > tr:first-child > :is(th, td){
  border-top:0;
}
#main:not([data-flow="end-to-end"]) table tr > :is(th, td) + :is(th, td){
  border-left:1px solid var(--tbl-line);
}
#main:not([data-flow="end-to-end"]) table > tbody > tr.err > :is(th, td){
  background-image:linear-gradient(var(--red-soft), var(--red-soft));
}
#main:not([data-flow="end-to-end"]) table > tbody > tr.sel > :is(th, td){
  background-image:linear-gradient(var(--blue-soft), var(--blue-soft));
}
#main:not([data-flow="end-to-end"]) table :is(th, td) a:not([class]),
#main:not([data-flow="end-to-end"]) table :is(th, td) summary{
  color:var(--tbl-link);
}
#main:not([data-flow="end-to-end"]) table :is(th, td) a:not([class]){
  text-decoration:underline;
  text-underline-offset:3px;
}
/* Inner corners follow the frame. */
#main:not([data-flow="end-to-end"]) table > :first-child > tr:first-child > :first-child{border-top-left-radius:12px}
#main:not([data-flow="end-to-end"]) table > :first-child > tr:first-child > :last-child{border-top-right-radius:12px}
#main:not([data-flow="end-to-end"]) table > :last-child > tr:last-child > :first-child{border-bottom-left-radius:12px}
#main:not([data-flow="end-to-end"]) table > :last-child > tr:last-child > :last-child{border-bottom-right-radius:12px}
/* The phone layouts that turn rows into cards keep their own look. */
@media (max-width: 650px){
  #main:not([data-flow="end-to-end"]) .clips-table-wrap table{padding:0;border:0;border-radius:0;background:none}
  #main:not([data-flow="end-to-end"]) .clips-table-wrap table :is(th, td){border:0;border-radius:0;background:none}
}
@media (max-width: 760px){
  #main:not([data-flow="end-to-end"]) table.hist-diff{padding:0;border:0;border-radius:0;background:none}
  #main:not([data-flow="end-to-end"]) table.hist-diff :is(th, td){border:0;border-radius:0;background:none}
}

/* Models -> Weights: the Add weight action sits above the table, right-aligned, beside the page menu. */
.weights-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.weights-head #models-status{margin:0;min-width:0}
.weights-head-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.registry-page .weights-head-actions .btn{margin:0}
.weights-registered-note{color:var(--green-text);font-weight:600}
/* An uploaded model's row in the one Models table: how it is served and who added it, under its provenance. */
.weights-upload-meta{display:block;margin-top:2px;font-size:12px}

/* Add weight (pages/AddWeight.tsx) */
/* Full width, so the form card lines up with the page's heading card. */
.add-weight-form{display:flex;flex-direction:column;gap:18px;width:100%;box-sizing:border-box}
.registry-page .add-weight > .card{margin-block:0 16px}
.add-weight-form > p.muted{margin:0}
.add-weight-label{font-weight:600;color:var(--ink)}
.registry-page .add-weight-form input:not([type="checkbox"]):not([type="radio"]),
.registry-page .add-weight-form select,
.registry-page .add-weight-form textarea{width:100%;box-sizing:border-box}
.registry-page .add-weight-form textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px;resize:vertical;min-height:110px}
.registry-page .add-weight-form fieldset{display:flex;flex-direction:column;gap:8px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.registry-page .add-weight-choice{flex-direction:row;align-items:center;gap:8px;cursor:pointer;align-self:flex-start;font-weight:600;color:var(--ink)}
.registry-page .add-weight-choice input{margin:0;padding:0;width:16px;height:16px;accent-color:var(--blue)}
.add-weight-error{color:var(--red-text);font-size:13px;font-weight:600}
.add-weight-progress progress{width:100%;max-width:420px}
.add-weight-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.registry-page .add-weight-actions .btn{margin:0}
.add-weight-note{margin:0 0 12px}

/* Add weight: the task dropdown (TaskPicker). One task; theme tokens only, so it follows light and dark. */
.add-weight-field{display:flex;flex-direction:column;gap:10px}
.add-weight-field-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.task-picker{position:relative}
.registry-page .task-picker-control{
  display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:8px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer;
}
.registry-page .task-picker-control:hover:not(:disabled){border-color:color-mix(in srgb, var(--blue) 45%, var(--line))}
.registry-page .task-picker.is-open .task-picker-control{border-color:var(--blue)}
.registry-page .task-picker-control[aria-invalid="true"]{outline:2px solid #cf5252}
.task-picker-icon{flex:0 0 auto;display:inline-flex;width:18px;height:18px;color:var(--blue-text)}
.task-picker-icon svg{width:18px;height:18px;display:block}
.task-picker-value{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.task-picker-placeholder{color:var(--ink-3)}
.task-picker-chip{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border:1px solid color-mix(in srgb, var(--blue) 45%, transparent);border-radius:7px;background:var(--blue-soft);color:var(--blue-text);font-weight:600}
.task-picker-chip code{font-family:"SF Mono",Consolas,monospace;font-size:12.5px;color:inherit;background:none}
.task-picker.has-value .task-picker-value{padding-right:32px}
.registry-page button.task-picker-clear{
  position:absolute;top:50%;right:42px;transform:translateY(-50%);display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0;
  border:0;border-radius:6px;background:transparent;color:var(--ink-2);font-size:16px;line-height:1;cursor:pointer;
}
.registry-page button.task-picker-clear:hover{background:var(--blue-soft);color:var(--blue-text)}
.registry-page button.task-picker-clear:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.task-picker-chevron{flex:0 0 auto;width:18px;height:18px;color:var(--ink-2);transition:transform .15s ease}
.task-picker.is-open .task-picker-chevron{transform:rotate(180deg)}
.task-picker-panel{
  position:absolute;z-index:40;top:calc(100% + 8px);left:0;right:0;max-height:340px;overflow-y:auto;padding:6px 16px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:0 14px 34px rgba(10,15,30,.22);
}
.task-picker-group + .task-picker-group{margin-top:6px}
.task-picker-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 8px;border-bottom:1px solid var(--line-soft);margin-bottom:4px}
.task-picker-family{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.task-picker-family.tone-b{color:var(--blue-text)}
.task-picker-family.tone-p{color:var(--purple-text)}
.task-picker-family.tone-g{color:var(--green-text)}
.task-picker-family.tone-a{color:var(--amber-text)}
.task-picker-family.tone-r{color:var(--red-text)}
.task-picker-family.tone-n{color:var(--ink-2)}
.task-picker-count{font-size:11.5px;color:var(--ink-3)}
.task-picker-option{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:7px;color:var(--ink);cursor:pointer}
.task-picker-option.is-active{background:var(--blue-soft)}
.task-picker-option[aria-selected="true"] .task-picker-label{font-weight:650}
.task-picker-check{flex:0 0 auto;width:15px;height:15px;border:1.5px solid var(--ink-3);border-radius:3px;background:var(--card);display:grid;place-items:center}
.task-picker-option[aria-selected="true"] .task-picker-check{border-color:var(--blue);background:var(--blue)}
.task-picker-option[aria-selected="true"] .task-picker-check::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg)}
.task-picker-label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.task-picker-id{flex:0 0 auto;padding:2px 8px;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);color:var(--ink-2);font-family:"SF Mono",Consolas,monospace;font-size:11.5px}
.task-picker-option[aria-selected="true"] .task-picker-id{color:var(--blue-text);border-color:color-mix(in srgb, var(--blue) 40%, var(--line))}
@media (max-width:540px){
  .task-picker-id{display:none}
}

/* Add model for testing: the weight file drop zone and the fixed tier. */
.registry-page .add-weight-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px;padding:20px;
  border:1.5px dashed var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);text-align:center;cursor:pointer;
}
.registry-page .add-weight-drop:hover,
.registry-page .add-weight-drop.is-dragging{border-color:var(--blue);background:var(--blue-soft)}
.registry-page .add-weight-drop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.registry-page .add-weight-drop.has-file{border-style:solid;border-color:color-mix(in srgb, var(--blue) 45%, var(--line))}
.registry-page .add-weight-drop.is-invalid{border-color:#cf5252}
.add-weight-drop-icon{display:inline-flex;color:var(--ink-2)}
.add-weight-drop-icon svg{width:22px;height:22px}
.add-weight-drop-title{font-weight:650;overflow-wrap:anywhere}
.add-weight-drop-sub{font-size:12px;color:var(--ink-3)}
.registry-page .add-weight-tier{display:flex;align-items:center;gap:8px;margin:0}