/* Approved A workspace: shared surfaces, with the existing task controls intact. */
:root {
  color-scheme: light;
  --bg: #f5f7fb; --panel: #fff; --panel-2: #f3f5fa;
  --ink: #253148; --ink-2: #65738a; --ink-3: #75839a;
  --line: #e7ebf2; --accent: #526bd9; --accent-ink: #fff;
  --soft: #eef2ff; --radius: 11px;
  --hit: #23815f; --miss: #b25353; --warn: #936c24; --warn-bg: #fcf6e9;
}
body { font-size: 13px; }
.workspace-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100vh; }
.workspace-layout.signed-out { display: block; }
.workspace-main { min-width: 0; padding: 0 34px 24px; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--panel);
  border-right: 1px solid var(--line); padding: 29px 16px 20px; display: flex; flex-direction: column; }
.brand { padding: 0 8px; gap: 11px; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0;
  border-radius: 10px; color: white; font-size: 25px; line-height: 1; }
.brand-text { font-size: 25px; letter-spacing: -1px; }
.brand-text small { display: block; font-size: 8px; letter-spacing: 1.6px; margin-top: 3px; }
.nav-label { margin: 38px 14px 12px; font-size: 10px; letter-spacing: 1px; color: var(--ink-3); }
#nav { display: grid; gap: 5px; margin: 0; }
#nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  color: var(--ink-2); border-radius: 8px; transition: color 180ms ease, background-color 180ms ease; }
#nav a.active { color: var(--accent); background: var(--soft); font-weight: 600; }
#nav a[data-nav="admin"] { margin-top: 24px; }
.nav-icon { display: inline-flex; flex-shrink: 0; }
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.side-footer { margin-top: auto; padding: 28px 8px 0; overflow-wrap: anywhere; }
.side-footer .brand-instance { display: block; background: #f7f9fc; border-radius: 9px; padding: 13px; }
.brand-instance:empty { display: none; }
.side-footer #logout-btn { display: block; margin-top: 14px; font-size: 11px; }
.topbar { position: static; min-height: 73px; padding: 12px 0; background: transparent;
  justify-content: space-between; gap: 12px; }
.crumb { display: flex; gap: 13px; align-items: center; color: var(--ink-3); font-size: 11px; }
.crumb strong { font-weight: 500; color: var(--ink-2); }
.topbar-right { gap: 8px; }
.topbar-right button { font-size: 11px; }
.workspace-heading { padding: 29px 0 25px; }
.eyebrow { color: var(--ink-3); font-size: 9px; letter-spacing: 1.8px; margin: 0 0 8px; }
.workspace-heading h1 { font-size: 27px; font-weight: 650; letter-spacing: -.6px; margin: 0; }
.workspace-heading > p:last-child { margin: 10px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.7; }
.view { max-width: none; margin: 0; padding: 0; min-width: 0; }
input, select, textarea, button { border-radius: 7px; }
input, select { padding: 8px 10px; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.panel { padding: 20px; min-width: 0; margin-bottom: 18px; }
.panel > h2 { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 12px; }
.panel .hint { line-height: 1.7; }
.callout { max-width: none; border-radius: 8px; }
.callout.oneline { background: var(--soft); border-left-color: #b5c2f3; color: #53668b; }
.metrics { display: flex; flex-wrap: wrap; gap: 14px; }
.metric { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 18px 20px;
  display: flex; flex-direction: column; min-width: 115px; }
.metric .value { font-size: 29px; color: var(--ink); font-weight: 600; letter-spacing: -.7px; }
.metric .label { font-size: 11px; color: var(--ink-2); margin-top: 5px; }
.metric .small { font-size: 10px; margin-top: 10px; }
.library-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 25px; }
.library-metrics .metric { min-width: 0; }
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 22px 0 18px; }
.library-toolbar h2 { font-size: 14px; }
.library-toolbar input { width: 250px; max-width: 60%; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }
.video-card { background: white; border: 1px solid var(--line); border-radius: 11px; overflow: hidden;
  min-width: 0; transition: box-shadow 200ms ease, transform 200ms ease; }
.video-card:hover { transform: translateY(-2px); box-shadow: 0 7px 23px #263c6210; }
.library-preview { background: #eaf0f8; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; color: #687d9c; border-bottom: 1px solid #e1e8f2; }
.library-preview:hover { background: #e3ebf7; text-decoration: none; }
.library-preview .nav-icon { display: grid; place-items: center; width: 48px; height: 48px;
  background: #f6f9fd; border: 1px solid #d7e1ef; border-radius: 12px; color: #7d92b3; }
.library-preview .nav-icon svg { width: 24px; height: 24px; }
.library-preview > span { font-size: 12px; }
.library-preview small { font-size: 10px; color: #7385a1; }
.video-info { padding: 15px 16px 13px; }
.video-info h2 { font-size: 13px; margin: 0 0 8px; font-weight: 600; overflow-wrap: anywhere; }
.video-info p { font-size: 11px; }
.card-bottom { border-top: 1px solid #f0f2f7; margin-top: 14px; padding-top: 11px; font-size: 12px; }
.empty-state { grid-column: 1 / -1; padding: 55px 20px; text-align: center; border: 1px dashed #cbd5e5;
  background: white; border-radius: 11px; color: var(--ink-2); }
.workspace-tools { margin-top: 24px; }
.workspace-tools > summary, .reference-tools > summary { cursor: pointer; color: var(--ink-2); padding: 12px 0; }
th { background: #f8f9fc; color: var(--ink-2); font-size: 11px; padding: 12px 13px; text-transform: none; }
td { padding: 14px 13px; color: #526079; border-bottom-color: #edf0f5; }
tr:last-child td { border-bottom: 0; }
td input { max-width: 180px; }
.scroll-x { max-width: 100%; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.primary, a.primary { background: var(--accent); color: white; border: 1px solid transparent;
  border-radius: 8px; padding: 10px 14px; display: inline-flex; justify-content: center; align-items: center;
  text-decoration: none; font-size: 12px; }
.primary:hover { background: #455dc9; }
.review-layout { grid-template-columns: 115px minmax(0, 1fr) 300px; gap: 14px; }
.review-layout > *, .truth-workspace > * { min-width: 0; }
.review-layout > .panel { padding: 15px; }
#review-queue .panel { padding: 10px; }
.queue-item { flex-wrap: wrap; padding: 8px 6px; margin-bottom: 5px; border-radius: 7px; font-size: 11px; }
.queue-item .idx { min-width: 0; }
.queue { max-height: 68vh; }
.workspace-inspector .panel { padding: 17px; }
.workspace-inspector .field-pair { display: block; }
.workspace-inspector .choice { padding: 6px; font-size: 11px; flex: 1 1 auto; }
.workspace-inspector .choice .lab { font-size: 10px; }
.workspace-inspector .choice .key { font-size: 9px; }
.workspace-inspector .hint, .workspace-inspector .small { font-size: 11px; }
.workspace-inspector .reason-groups { gap: 8px; }
.workspace-inspector .field { margin-bottom: 14px; }
.workspace-inspector .field > label { font-size: 11px; }
.workspace-inspector .tag-picker { margin-top: 0; }
.workspace-inspector button.primary { width: 100%; }
.sidepanel { max-height: none; overflow: visible; }
.truth-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.player video { max-height: 52vh; }
.player.tall video { max-height: 58vh; }
.telemetry-status { font-size: 11px; }
.telemetry-status td, .telemetry-status th { padding: 6px; font-size: 10px; }
.export-scope-panel { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.export-scope-panel h2 { font-size: 14px; margin: 0 0 8px; }
.export-scope-panel .field { min-width: 200px; margin: 0; }
.export-range-note { padding: 0 2px 8px; color: var(--ink-2); }
.export-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.export-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 24px 23px;
  display: flex; flex-direction: column; min-width: 0; }
.file-icon { display: grid; place-items: center; width: 45px; height: 48px; margin-bottom: 20px;
  font-size: 11px; font-weight: 650; border-radius: 6px; background: #edf2fe; color: #5573b4; }
.file-icon.truth_csv { background: #ebf6f0; color: #397e61; }
.file-icon.reviews_jsonl { background: #f2eff9; color: #80639f; }
.export-card h2 { font-size: 17px; margin: 0 0 12px; }
.export-description { font-size: 12px; line-height: 1.9; color: var(--ink-2); min-height: 68px; }
.export-card .small { padding: 15px 0; border-top: 1px solid var(--line); font-size: 11px; }
.export-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 25px; }
.export-fields span { background: #f6f8fc; border: 1px solid #ecf0f6; color: var(--ink-2);
  border-radius: 4px; padding: 5px 7px; font-size: 10px; }
.export-download { margin-top: auto; width: 100%; }
.account-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 24px; }
#account-dialog .row { display: grid; grid-template-columns: 1fr 1fr; }
#account-dialog .field { display: grid; gap: 8px; }
#account-dialog > button { margin-top: 20px; }
.grade-distribution { display: flex; align-items: center; justify-content: center; gap: 40px;
  padding: 28px 0; flex-wrap: wrap; }
.grade-donut { position: relative; flex-shrink: 0; width: 151px; height: 151px; border-radius: 50%; }
.grade-donut-center { position: absolute; inset: 15px; background: white; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.grade-donut-center strong { font-size: 28px; font-weight: 600; }
.grade-donut-center small { font-size: 10px; color: var(--ink-2); }
.grade-legend { min-width: 190px; }
.grade-legend h3 { font-size: 13px; margin: 0 0 16px; }
.grade-legend-row { display: grid; grid-template-columns: 8px 1fr 25px 50px; gap: 10px; align-items: center;
  font-size: 11px; margin-top: 9px; color: var(--ink-2); }
.grade-swatch { width: 7px; height: 7px; border-radius: 2px; }
.export-guidance { margin: 23px 0; padding: 22px 24px; background: #eef2fa; border: 1px solid #e5eaf6; border-radius: 10px; }
.export-guidance h2 { font-size: 12px; color: #536b93; margin: 0 0 8px; }
.export-guidance p { font-size: 11px; color: #657b9e; line-height: 1.9; margin: 0; }
dialog { border-radius: 15px; box-shadow: 0 20px 80px #26334d33; padding: 28px; width: min(590px, calc(100vw - 30px)); }
dialog::backdrop { background: #23334d55; backdrop-filter: blur(3px); }
.signed-out .workspace-main { padding: 0; }
.login-page { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: white; }
.login-visual { padding: 48px; background: #ecf0f9; display: flex; flex-direction: column; overflow: hidden;
  position: relative; isolation: isolate; }
.login-visual::after { content: ""; width: 700px; height: 700px; position: absolute; z-index: -1;
  border: 1px solid #dce3f2; box-shadow: 0 0 0 60px #e6ecf7; border-radius: 50%; left: -110px; top: 35%; }
.login-visual .brand { font-size: 25px; font-weight: 750; padding: 0; }
.login-hero { margin: auto 0; padding: 58px 0; }
.login-hero h1 { white-space: pre-line; font-size: 38px; line-height: 1.5; letter-spacing: -1.3px; font-weight: 650; }
.login-hero > p:last-child { max-width: 360px; font-size: 12px; line-height: 1.9; color: #657b9e; }
.login-form-side { padding: 45px; display: grid; align-items: center; justify-content: center; }
.auth-panel { width: 330px; max-width: 100%; margin: 0; }
.auth-form h2 { font-size: 28px; font-weight: 650; margin: 0 0 12px; }
.auth-form > .hint { margin-bottom: 30px; font-size: 12px; }
.auth-form .field { margin-bottom: 19px; font-size: 12px; }
.auth-form input { width: 100%; padding: 12px; }
.auth-form button.primary { width: 100%; padding: 13px; }
@media (min-width: 1600px) { .workspace-main { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1250px) {
  .workspace-layout { grid-template-columns: 175px minmax(0, 1fr); }
  .workspace-main { padding-left: 22px; padding-right: 22px; }
  .sidebar { padding-left: 10px; padding-right: 10px; }
  .brand-text { font-size: 21px; }
  .review-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  #review-queue { grid-column: 1 / -1; grid-row: 2; }
  #review-queue .queue { display: flex; overflow-x: auto; max-height: 150px; }
  .queue-item { min-width: 95px; width: auto; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .export-card { padding: 20px 17px; }
}
@media (max-width: 1000px) {
  .export-cards { grid-template-columns: 1fr; }
  .export-description { min-height: 0; }
  .export-scope-panel { align-items: flex-start; flex-direction: column; gap: 14px; }
  .library-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: 1fr; }
  .truth-workspace { grid-template-columns: minmax(0, 1fr) 270px; }
  .login-visual { padding: 35px; }
  .login-hero h1 { font-size: 32px; }
}
@media (max-width: 780px) {
  .workspace-layout { grid-template-columns: 68px minmax(0, 1fr); }
  .sidebar { padding: 25px 9px; }
  .sidebar .brand { padding: 0; justify-content: center; }
  .sidebar .brand-text, .nav-label, .nav-text, .side-footer .brand-instance,
  .side-footer #account-identity, .side-footer #workspace-role { display: none; }
  #nav { margin-top: 32px; }
  #nav a { padding: 12px; justify-content: center; }
  .side-footer { padding: 20px 0 0; }
  .side-footer #logout-btn { font-size: 10px; padding: 6px 3px; }
  .workspace-main { padding: 0 18px 20px; }
  .topbar { min-height: 60px; }
  .crumb { flex-wrap: wrap; gap: 6px; }
  .topbar-right { flex-wrap: wrap; }
  #account-scope select { max-width: 190px; }
  .review-layout, .truth-workspace { display: flex; flex-direction: column; }
  .review-layout > *, .truth-workspace > * { width: 100%; }
  #review-queue { order: 1; }
  .workspace-inspector { order: 2; }
  .video-grid { grid-template-columns: 1fr; }
  .workspace-heading h1 { font-size: 24px; }
  .panel { padding: 16px; }
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-form-side { padding: 28px; min-height: 100vh; }
  .account-toolbar { align-items: flex-start; flex-direction: column; }
  #account-dialog .row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .library-metrics { gap: 10px; }
  .library-metrics .metric { padding: 13px; }
  .library-metrics .value { font-size: 23px; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  #nav a, .video-card { transition: none; }
  .video-card:hover { transform: none; }
}