/* ============================================================
   TwoTail app system (light)
   Layered on site.css, which holds the brand tokens: --paper,
   --surface, --ink, --blue, --blue-hover, --blue-soft, --line,
   --font-ui, --font-display, --mono, --radius-sm.
   This file adds the app tokens (measured from the Stripe
   reference, see plans/light-theme-parts.md) and, below them,
   the app components. Plan: plans/light-theme.md.
   Rule: no raw colours, sizes, gradients or blurs outside :root.
   scripts/check_css_tokens.py enforces it.
   ============================================================ */

:root {
    /* brand, mirrored from site.css. Kept in sync by hand: site.css also
       carries marketing element styles (.logo, nav) that collide with the
       app, so it is not linked here. */
    --paper:        #f4f6fb;
    --surface:      #ffffff;
    --ink:          #0d1420;
    --ink-2:        #454f63;
    --ink-3:        #737e95;
    --line:         #dde3ef;
    --line-soft:    #e8ecf5;
    --blue:         #2b4bc4;
    --blue-hover:   #21389a;
    --blue-soft:    #7194e6;
    --blue-pale:    #c6d5f7;
    --blue-deep:    #101a45;
    --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Source Serif 4', Georgia, serif;
    --mono:         'Geist Mono', ui-monospace, 'SF Mono', monospace;

    /* text ramp. --ink (brand navy) is for the page title only. */
    --text-strong:    #1e2c42;
    --text:           #404f66;
    --text-muted:     #69758e;
    --text-faint:     #98a3b8;
    --text-on-accent: #ffffff;

    /* surfaces */
    --page:           #ffffff;
    --band:           #f5f7fa;
    --tint-hover:     rgba(13, 20, 32, 0.05);
    --tint-selected:  rgba(13, 20, 32, 0.08);
    --scrim:          rgba(13, 20, 32, 0.45);

    /* lines */
    --rule:           #d6dee7;
    --border:         #e3e8ee;
    --border-card:    #ecf1f6;
    --border-strong:  #c8d0da;
    --grid:           #e3e8f0;
    --sidebar-rule:   #edf1f6;

    /* accent, from site.css */
    --accent:         var(--blue);
    --accent-hover:   var(--blue-hover);
    --accent-soft:    var(--blue-soft);
    --accent-tint:    rgba(43, 75, 196, 0.08);

    /* status */
    --ok:             #0b7a57;
    --ok-bg:          #e6f4ee;
    --warn:           #b4530a;
    --warn-bg:        #fdf1e6;
    --danger:         #b42318;
    --danger-bg:      #fdecea;
    --danger-rgb:     180, 35, 24;   /* for rgba(var(--danger-rgb), a) where alpha is computed */

    /* type scale. Only 28 / 20 / 14 / 12 appear on any one screen. */
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-28: 28px;

    /* radii */
    --r-4:   4px;
    --r-6:   6px;
    --r-8:   8px;
    --r-pill: 999px;

    /* spacing */
    --s-4:  4px;
    --s-8:  8px;
    --s-12: 12px;
    --s-16: 16px;
    --s-20: 20px;
    --s-24: 24px;
    --s-32: 32px;
    --s-40: 40px;
    --s-48: 48px;

    /* layout */
    --sidebar-w:   240px;
    --content-max: 1200px;
    --control-h:   32px;
    --row-h:       40px;

    /* shadows */
    --shadow-card:    0 2px 5px rgba(48, 49, 61, 0.06);
    --shadow-control: 0 1px 2px rgba(13, 20, 32, 0.08);
    --shadow-modal:   0 12px 40px rgba(13, 20, 32, 0.18);
}

/* ============================================================
   Shell: page, sidebar, workspace switcher, nav, user row, main.
   Measured from the Stripe dashboard (plans/light-theme-parts.md).
   ============================================================ */

body {
    background: var(--page);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-14);
    line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; }

.app-container { display: flex; height: 100vh; padding: 0; gap: 0; }

/* sidebar */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--surface);
    border: none;
    border-right: 1px solid var(--sidebar-rule);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.sidebar-header { padding: var(--s-16) var(--s-12) var(--s-8); display: flex; flex-direction: column; align-items: stretch; gap: var(--s-8); }
.logo-row { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-8); min-height: 24px; }
.logo { display: inline-flex; align-items: center; gap: var(--s-8); font-size: var(--fs-16); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.logo svg { height: 18px; width: auto; display: block; }

/* workspace switcher */
.account-switcher { position: relative; width: 100%; }
.account-switcher.hidden { display: none; }
.account-switcher-btn {
    width: 100%;
    height: var(--row-h);
    padding: 0 var(--s-8);
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    border-radius: var(--r-8);
    color: var(--text-strong);
    font-family: inherit;
    font-size: var(--fs-14);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.account-switcher-btn:hover { background: var(--band); }
.ws-avatar { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-6); background: var(--band); border: 1px solid var(--border); font-size: var(--fs-11); font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.ws-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; flex: 1; min-width: 0; }
.ws-text > span:first-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sub { font-size: var(--fs-12); font-weight: 400; color: var(--text-muted); text-transform: capitalize; }
.ws-sub:empty { display: none; }
.chev { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.account-switcher-dropdown {
    position: absolute;
    top: calc(100% + var(--s-4));
    left: 0;
    right: 0;
    z-index: 60;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-8);
    box-shadow: var(--shadow-card);
}
.account-switcher-dropdown.hidden { display: none; }
.account-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding: 0 var(--s-8); height: 36px; border: none; border-radius: var(--r-6); background: transparent; color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; }
.account-option:hover { background: var(--band); }
.account-option.active { color: var(--accent); font-weight: 600; }
.role-badge { font-size: var(--fs-11); font-weight: 500; color: var(--text-muted); background: var(--band); border: 1px solid var(--border); border-radius: var(--r-4); padding: 0 var(--s-4); text-transform: capitalize; }

/* nav */
.sidebar-content { flex: 1; overflow-y: auto; padding: var(--s-8) var(--s-12); display: flex; flex-direction: column; gap: 0; }
.sidebar-section { display: flex; flex-direction: column; gap: 0; }
.nav-section-label { font-size: var(--fs-12); color: var(--text-muted); padding: var(--s-24) var(--s-8) 6px; }
.sidebar-item {
    height: var(--row-h);
    padding: 0 var(--s-8);
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: var(--r-8);
    color: var(--text-strong);
    font-family: inherit;
    font-size: var(--fs-14);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
.sidebar-item .item-content { display: flex; align-items: center; gap: var(--s-12); flex: 1; min-width: 0; }
.sidebar-item .icon-wrapper { display: flex; color: var(--text-muted); }
.sidebar-item svg { width: 20px; height: 20px; stroke-width: 1.5; }
.sidebar-item:hover { background: var(--band); color: var(--text-strong); }
.sidebar-item.active { background: transparent; color: var(--accent); font-weight: 600; }
.sidebar-item.active .icon-wrapper { color: var(--accent); }
.sidebar-item .chevron { display: none; }
.sidebar-item.hidden { display: none; }
.nav-badge { margin-left: auto; font-size: var(--fs-12); font-weight: 500; line-height: 1.5; padding: 1px 7px; border-radius: var(--r-pill); background: var(--warn-bg); color: var(--warn); }

/* user row */
.sidebar-footer { min-height: 48px; padding: var(--s-4) var(--s-12); display: flex; align-items: center; background: var(--band); border-top: 1px solid var(--rule); }
.user-menu { position: relative; width: 100%; }
.user-menu-btn {
    width: 100%;
    height: var(--row-h);
    padding: 0 var(--s-8);
    display: flex;
    align-items: center;
    gap: var(--s-12);
    background: transparent;
    border: none;
    border-radius: var(--r-8);
    color: var(--text-strong);
    font-family: inherit;
    font-size: var(--fs-14);
    text-align: left;
    cursor: pointer;
}
.user-menu-btn:hover { background: var(--tint-hover); }
.user-menu-btn svg.lucide-user { width: 20px; height: 20px; stroke-width: 1.5; color: var(--text-muted); flex-shrink: 0; }
.um-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-dropdown {
    position: absolute;
    bottom: calc(100% + var(--s-4));
    left: 0;
    right: 0;
    z-index: 60;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-8);
    box-shadow: var(--shadow-card);
}
.user-menu-dropdown.hidden { display: none; }
.user-email { padding: var(--s-8) var(--s-8) var(--s-4); font-size: var(--fs-12); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--border-card); margin-bottom: var(--s-4); }
.user-email:empty { display: none; }
.user-menu-item { width: 100%; display: block; height: 36px; padding: 0 var(--s-8); border: none; border-radius: var(--r-6); background: transparent; color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; }
.user-menu-item:hover { background: var(--band); }
.user-menu-item.logout { color: var(--danger); border-top: 1px solid var(--border-card); border-radius: 0; margin-top: var(--s-4); }

/* main */
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--page); border: none; border-radius: 0; box-shadow: none; overflow: hidden; }
.chat-area { padding: var(--s-32) var(--s-40) var(--s-48); }

@media (max-width: 768px) {
    .sidebar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 100; }
}

/* ============================================================
   Page frame: title row, section header, banner.
   ============================================================ */

.page-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--s-16); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-24); }
.page-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }

.banner { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-12); background: var(--band); border-radius: var(--r-8); padding: 14px var(--s-16); margin-bottom: var(--s-32); font-size: var(--fs-14); color: var(--text); }
.banner .ico { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }
.banner-text { flex: 1; }
.banner-link { display: inline-flex; align-items: center; gap: var(--s-4); background: none; border: none; padding: 0; font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--accent); cursor: pointer; }
.banner-link:hover { color: var(--accent-hover); }
.banner-link svg { width: 14px; height: 14px; }
.banner-x { display: inline-flex; background: none; border: none; padding: 0; margin-left: var(--s-8); color: var(--text-muted); cursor: pointer; }
.banner-x svg { width: 16px; height: 16px; }

.home-zone-header { display: flex; align-items: center; justify-content: space-between; }
.home-zone-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); color: var(--ink); letter-spacing: -0.01em; }
.home-zone-link { display: inline-flex; align-items: center; gap: var(--s-4); background: none; border: none; padding: 0; font-family: inherit; font-size: var(--fs-14); color: var(--accent); cursor: pointer; }
.home-zone-link:hover { color: var(--accent-hover); }
.home-zone-link svg { width: 14px; height: 14px; }

/* page title row on the section pages (Evals, Annotation, Data, Autonomy, ...) */
.section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16); padding: 0 0 var(--s-16); margin: 0 0 var(--s-24); border-bottom: 1px solid var(--rule); }
.section-heading { display: flex; flex-direction: column; gap: 2px; }
.section-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; text-transform: none; }
.section-subtitle { font-size: var(--fs-14); color: var(--text-muted); }
/* when tabs follow the title, the rule belongs to the tabs (Stripe) */
.section-header:has(+ .annotate-tabs), .section-header:has(+ .data-tabs) { border-bottom: none; padding-bottom: var(--s-8); margin-bottom: 0; }
.evals-page { padding-top: 0; }

/* tabs: one style for every strip */
.annotate-tabs, .data-tabs, .evals-subtabs { display: flex; gap: var(--s-4); max-width: none; margin: 0 0 var(--s-24); padding: 0; border-bottom: 1px solid var(--rule); }
.annotate-tab, .data-tab, .evals-subtab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; padding: var(--s-8) var(--s-12); font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--text); cursor: pointer; }
.annotate-tab:hover, .data-tab:hover:not(.active), .evals-subtab:hover { color: var(--text-strong); background: none; border-color: transparent; }
.annotate-tab.active, .data-tab.active, .evals-subtab.active { color: var(--accent); border-bottom-color: var(--accent); background: none; }

/* section titles inside a page (Evals list groups) */
.evals-group { margin: 0 0 var(--s-40); }
.evals-group-header { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); color: var(--ink); letter-spacing: -0.01em; text-transform: none; padding: 0 0 var(--s-12); margin: 0; border-bottom: 1px solid var(--rule); }

/* buttons */
.btn-primary, .eval-new-btn { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-control); cursor: pointer; }
.btn-primary:hover, .eval-new-btn:hover { background: var(--accent-hover); }
.section-header .eval-new-btn { margin-left: auto; }

/* focused (detail) views keep the sidebar: they cover the main area, not the viewport */
.evals-focused-view, .autonomy-focused-view, .dashboard-focused-view, .chart-focused-view { position: absolute; inset: 0; z-index: 50; display: block; overflow-y: auto; }
.evals-focused-header { display: block; padding: var(--s-32) var(--s-40) 0; border: none; background: var(--page); }
.evals-focused-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.evals-focused-left > div { display: flex; flex-direction: column; gap: 2px; }
.dashboard-back-btn.crumb { width: auto; height: auto; display: inline-flex; align-items: center; gap: var(--s-4); background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--accent); cursor: pointer; }
.dashboard-back-btn.crumb:hover { color: var(--accent-hover); background: none; }
.dashboard-back-btn.crumb svg { width: 14px; height: 14px; }
.evals-focused-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.evals-focused-subtitle { font-size: var(--fs-14); color: var(--text-muted); }
.evals-focused-content { padding: var(--s-16) var(--s-40) var(--s-48); }
.evals-cat-select { height: 28px; border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--surface); color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); font-weight: 500; padding: 0 var(--s-32) 0 var(--s-12); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369758e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-8) center; cursor: pointer; }
.evals-cat-select:hover { background-color: var(--band); }
.evals-cat-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* ============================================================
   Table: one treatment for every list (Stripe measured).
   Header 12/600 strong on a rule, 48px rows on hairlines, body face
   with tabular figures, band on hover, no card around it.
   Applies to .glass-table (Data), table.cal-list (Calibration),
   table.table (Annotation queues) and the .eval-row list (Evals).
   ============================================================ */

.glass-table-container { background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; }
.glass-table-container::before { display: none; }
.glass-table, table.cal-list, table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); color: var(--text); }
.glass-table thead { position: static; }
.glass-table th, table.cal-list th, table.table th { padding: 0 var(--s-12) var(--s-8); height: 36px; text-align: left; vertical-align: bottom; background: none; color: var(--text-strong); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.glass-table td, table.cal-list td, table.table td { padding: 0 var(--s-12); height: 48px; color: var(--text); border-bottom: 1px solid var(--border); vertical-align: middle; }
.glass-table th:first-child, .glass-table td:first-child, table.cal-list th:first-child, table.cal-list td:first-child, table.table th:first-child, table.table td:first-child { padding-left: var(--s-8); }
.glass-table th:last-child, .glass-table td:last-child, table.cal-list th:last-child, table.cal-list td:last-child, table.table th:last-child, table.table td:last-child { padding-right: var(--s-8); }
.glass-table tbody tr, table.cal-list tbody tr, table.table tbody tr { background: transparent; border: none; transition: background 0.12s ease; transform: none; box-shadow: none; }
.glass-table tbody tr:hover, table.cal-list tbody tr:hover, table.table tbody tr:hover, tr.cal-row:hover td { background: var(--band); box-shadow: none; transform: none; }
.glass-table tbody tr:last-child td, table.cal-list tbody tr:last-child td, table.table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.glass-table td:first-child, table.table td:first-child { color: var(--text-strong); font-weight: 500; }
th.num, td.num, th[style*="text-align: right"], td[style*="text-align: right"] { text-align: right; font-variant-numeric: tabular-nums; }
.glass-table .mono-cell { font-family: inherit; font-variant-numeric: tabular-nums; }
.glass-table .trace-id-cell { font-family: var(--mono); font-size: var(--fs-13); color: var(--accent); cursor: pointer; }
.glass-table .trace-id-cell:hover { color: var(--accent-hover); }
.table-count { margin-top: var(--s-12); font-size: var(--fs-13); color: var(--text-muted); }

/* status badge: Stripe's tinted rectangle, no dot */
.status-pill { display: inline-flex; align-items: center; gap: 0; padding: 2px var(--s-8); border: none; border-radius: var(--r-4); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.status-pill.success { background: var(--ok-bg); color: var(--ok); border: none; }
.status-pill.error { background: var(--danger-bg); color: var(--danger); border: none; }
.status-dot { display: none; }

/* Evals list: the div list gets the same bones */
.eval-row { display: flex; align-items: center; gap: var(--s-24); height: 48px; padding: 0 var(--s-8); border-bottom: 1px solid var(--border); border-radius: 0; cursor: pointer; transition: background 0.12s ease; }
.eval-row:hover { background: var(--band); }
.eval-row-head { height: 36px; cursor: default; border-bottom: 1px solid var(--rule); }
.eval-row-head:hover { background: none; }
.eval-row-head span { font-size: var(--fs-12); font-weight: 600; color: var(--text-strong); }
.eval-row-name { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); }
.eval-row-score { min-width: 100px; text-align: right; font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.eval-row-meta { min-width: 120px; text-align: right; font-size: var(--fs-13); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.evals-group-header { border-bottom: none; padding-bottom: var(--s-8); }

/* ============================================================
   Eval detail: full-width content under the tabs, case rows as a
   hairline list, section cards with serif titles, and the modal.
   ============================================================ */

.evals-cases { max-width: none; margin: var(--s-8) 0 0; }
.evals-cases-header { display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); flex-wrap: wrap; margin-bottom: var(--s-16); }
.evals-detail-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-24); max-width: none; margin: 0; }
.evals-detail-grid.two-col { grid-template-columns: 1fr 1fr; max-width: none; }

/* case rows: list, not cards. The left padding keeps the annotated marker's slot. */
.evals-case-row { position: relative; background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: var(--s-16) 0 var(--s-16) 2.6rem; margin: 0; }
.evals-case-row:first-child { border-top: none; }
.evals-case-annotated { border-color: var(--border); }
.evals-case-top { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; }
.evals-verdict-pill { display: inline-block; padding: 2px var(--s-8); border-radius: var(--r-4); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.evals-case-meta { font-size: var(--fs-13); color: var(--text-muted); }
.evals-case-trace { margin-left: auto; padding: 0; display: inline-flex; align-items: center; gap: var(--s-4); background: none; border: none; font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--accent); cursor: pointer; }
.evals-case-trace svg { width: 14px; height: 14px; }
.evals-case-trace:hover { color: var(--accent-hover); }
.evals-case-reason { font-size: var(--fs-14); color: var(--text); margin-top: var(--s-8); line-height: 1.5; }
.evals-case-quote { font-size: var(--fs-13); color: var(--text-muted); font-style: italic; margin-top: var(--s-4); padding-left: var(--s-12); border-left: 2px solid var(--rule); }

/* section cards on the Charts and Config tabs */
.evals-card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-8); box-shadow: var(--shadow-card); padding: var(--s-20) var(--s-24); }
.evals-card-label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); color: var(--ink); letter-spacing: -0.01em; text-transform: none; margin: 0 0 var(--s-12); }
.evals-prompt-text { white-space: pre-wrap; margin: 0; font-family: var(--mono); font-size: var(--fs-13); color: var(--text); line-height: 1.6; }

/* modal: white, 8px radius, a real shadow, 16/600 title, square close */
.trace-modal { background: var(--scrim); }
.trace-modal-content { background: var(--surface); border: none; border-radius: var(--r-8); width: 95%; max-width: 1200px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-modal); }
.trace-modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--s-16) var(--s-24); border-bottom: 1px solid var(--border); }
.trace-modal-title { display: flex; align-items: center; gap: var(--s-12); font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); }
.trace-modal-title code { font-family: var(--mono); font-size: var(--fs-13); color: var(--text-strong); background: var(--band); border-radius: var(--r-4); padding: 2px var(--s-8); }
.trace-modal-close { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-6); background: var(--surface); color: var(--text-muted); font-size: var(--fs-20); line-height: 1; cursor: pointer; }
.trace-modal-close:hover { color: var(--text-strong); border-color: var(--border-strong); }
.trace-modal-tabs { display: flex; gap: var(--s-4); padding: 0 var(--s-24); border-bottom: 1px solid var(--rule); }
.trace-modal-body { flex: 1; overflow: auto; padding: var(--s-24); }

/* ============================================================
   Buttons: outlined and primary (primary is above with the frame).
   ============================================================ */

.btn-outline, .ec-btn-secondary, .ec-bail, .sandbox-btn-secondary { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); box-shadow: var(--shadow-control); cursor: pointer; }
.btn-outline:hover, .ec-btn-secondary:hover, .ec-bail:hover, .sandbox-btn-secondary:hover { background: var(--band); border-color: var(--border-strong); color: var(--text-strong); }
.btn-outline svg { width: 14px; height: 14px; }
.ec-btn-primary, .sandbox-btn-primary { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-control); cursor: pointer; }
.ec-btn-primary:hover, .sandbox-btn-primary:hover { background: var(--accent-hover); }
.ec-btn-primary:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   Controls: inputs, textareas, selects.
   ============================================================ */

.ec-input, .ec-textarea, .settings-input, .inline-anno-cat, .inline-anno-reason { width: 100%; min-height: var(--control-h); padding: 6px var(--s-12); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); box-shadow: var(--shadow-control); }
.ec-input:focus, .ec-textarea:focus, .settings-input:focus, .inline-anno-cat:focus, .inline-anno-reason:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.ec-textarea { font-family: var(--mono); font-size: var(--fs-13); line-height: 1.5; }
.ec-input::placeholder, .ec-textarea::placeholder, .settings-input::placeholder { color: var(--text-faint); }

/* ============================================================
   Eval create flow: keeps the sidebar, breadcrumb header, serif step
   titles, row-style choices.
   ============================================================ */

.eval-create-page { position: absolute; inset: 0; z-index: 50; overflow-y: auto; }
.eval-create-page > * { max-width: none; margin-left: 0; margin-right: 0; }
.ec-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16); }
.ec-progress { height: 2px; margin: var(--s-16) var(--s-40) var(--s-24); background: var(--border); }
.ec-progress-bar { height: 2px; background: var(--accent); transition: width 0.2s; }
.ec-body { padding: 0 var(--s-40); max-width: 960px; }
.ec-step h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); color: var(--ink); letter-spacing: -0.01em; margin: 0 0 var(--s-12); }
.ec-step p { color: var(--text); }
.ec-label { color: var(--text-strong); font-weight: 500; }
.ec-choice, .ec-span { border: 1px solid var(--border); border-radius: var(--r-8); background: var(--surface); }
.ec-choice:hover, .ec-span:hover { border-color: var(--border-strong); background: var(--band); }
.ec-choice.ec-chosen, .ec-span.ec-chosen { border-color: var(--accent); background: var(--accent-tint); }
.ec-span-name { font-family: var(--mono); font-size: var(--fs-13); }
.ec-footer { margin: var(--s-32) var(--s-40) var(--s-48); padding-top: var(--s-16); border-top: 1px solid var(--rule); }
.ec-error { color: var(--danger); }
.ec-stat-num { font-size: var(--fs-20); }

/* ============================================================
   Calibration detail: breadcrumb head, stat tile, sentence-case
   labels, badge chips, hairline case rows.
   ============================================================ */

.cal-lead { display: none; }
.cal-detail-head { gap: var(--s-12); margin-bottom: var(--s-24); }
.cal-eval { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); color: var(--ink); letter-spacing: -0.01em; }
.cal-meta { font-size: var(--fs-13); color: var(--text-muted); }
.cal-chip { display: inline-block; text-transform: none; letter-spacing: 0; font-size: var(--fs-12); font-weight: 600; padding: 2px var(--s-8); border-radius: var(--r-4); border: none; line-height: 1.5; }
.cal-chip::first-letter { text-transform: uppercase; }
.cal-chip.ok, .cal-chip.good, .cal-chip.calibrated { background: var(--ok-bg); color: var(--ok); }
.cal-chip.thin, .cal-chip.none, .cal-chip.na { background: var(--warn-bg); color: var(--warn); border: none; }
.cal-chip.neutral { background: var(--band); color: var(--text); border: none; }
.cal-chip.bad { background: var(--danger-bg); color: var(--danger); border: none; }
.cal-sec, .cal-stat-label { color: var(--text-strong); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0; text-transform: none; }
.cal-count { color: var(--text-muted); font-weight: 400; }
.cal-sub { font-size: var(--fs-13); }
.cal-kappa { font-size: var(--fs-28); font-weight: 600; color: var(--text-strong); }
.cal-kappa-label { font-size: var(--fs-13); color: var(--text-muted); }
.cal-lean-track { background: var(--band); border-radius: var(--r-4); }
.cal-lean-mid { background: var(--border-strong); }
.cal-more summary, .cal-detail-fold summary { font-size: var(--fs-14); color: var(--accent); }
.cal-more summary:hover, .cal-detail-fold summary:hover { color: var(--accent-hover); }
.cal-block { border-top: 1px solid var(--rule); padding-top: var(--s-16); margin-top: var(--s-24); }
.cal-case { padding: var(--s-12) 0; }
.cal-quote { font-size: var(--fs-14); color: var(--text-strong); border-left: 2px solid var(--rule); }
.cal-who { font-size: var(--fs-12); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.cal-cat { font-size: var(--fs-12); border-radius: var(--r-4); background: var(--band); color: var(--text); }

/* ============================================================
   Queue review: breadcrumb, serif title, stat tiles.
   ============================================================ */

.review-crumb { margin-bottom: var(--s-8); }
.review-head { margin-bottom: var(--s-16); }
.review-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.review-desc { margin: var(--s-4) 0 0; font-size: var(--fs-14); color: var(--text); }
.review-meta { margin: var(--s-4) 0 0; font-size: var(--fs-14); color: var(--text-muted); }
.stat-row { display: flex; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-24); }
.stat { min-width: 120px; padding: var(--s-12) var(--s-16); background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-8); box-shadow: var(--shadow-card); }
.stat-value { font-size: var(--fs-20); font-weight: 600; color: var(--text-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: var(--fs-12); color: var(--text-muted); margin-top: 2px; }

/* ============================================================
   Home: layout, metric card, setup panel.
   ============================================================ */

.chat-area:has(.prompt-container) { align-items: stretch; justify-content: flex-start; }
.chat-area .prompt-container { width: 100%; max-width: var(--content-max); margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; column-gap: var(--s-40); row-gap: 0; align-items: start; }
.chat-area .prompt-container.has-setup { grid-template-columns: minmax(0, 1fr) 400px; }
.prompt-container.hidden { display: none; }

.home-evals { grid-column: 1; width: 100%; display: flex; flex-direction: column; gap: var(--s-16); margin-bottom: var(--s-40); }
.home-eval-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); padding: var(--s-16); background: var(--band); border-radius: var(--r-8); }
.has-setup .home-eval-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* metric card, Stripe's skeleton: title row, value, comparison line, chart, footer */
.home-eval-card { display: flex; flex-direction: column; gap: 0; width: 100%; text-align: left; padding: var(--s-20); background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-8); box-shadow: var(--shadow-card); font-family: inherit; color: var(--text); cursor: pointer; }
.home-eval-card:hover { border-color: var(--border-strong); }
.card-head { display: flex; align-items: center; gap: 6px; }
.home-eval-card-label { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head .info { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.home-eval-card-value { font-size: var(--fs-20); font-weight: 600; line-height: 1.2; margin-top: 6px; }
.card-value { font-size: var(--fs-20); font-weight: 600; line-height: 1.2; margin-top: 6px; color: var(--text-faint); }
.home-eval-card-meta { font-size: var(--fs-14); color: var(--text); margin-top: 2px; }
.home-eval-spark-slot { display: block; margin-top: var(--s-16); min-height: 96px; }
.spark { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); }
.home-eval-spark { display: block; width: 100%; height: 96px; }
.home-eval-spark line.grid { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home-eval-spark line.base { stroke: var(--text-faint); stroke-dasharray: 2 3; }
.home-eval-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark-y { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-12); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.spark-x { grid-column: 1; display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--s-4); }
.home-eval-card-empty { display: flex; align-items: center; justify-content: center; min-height: 96px; margin-top: var(--s-16); border: 1px dashed var(--rule); border-radius: var(--r-6); }
.pill { font-size: var(--fs-14); color: var(--text); background: var(--band); padding: 10px 14px; border-radius: var(--r-6); }

/* setup panel, Stripe's Recommendations panel with the Setup guide ring */
/* Alone on the page the card is capped so four steps do not stretch across the content width; beside eval tiles it takes the 400px column. */
.onboarding-card { width: 100%; max-width: 640px; background: var(--band); border-radius: var(--r-8); padding: var(--s-24); }
.has-setup .onboarding-card { grid-column: 2; grid-row: span 2; margin-top: 44px; max-width: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.onboarding-card-title { font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); }
.panel-ring { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--text-muted); white-space: nowrap; }
.panel-ring:empty { display: none; }
.panel-ring svg { width: 20px; height: 20px; }
.panel-ring .ring-track { stroke: var(--rule); }
.panel-ring .ring-arc { stroke: var(--accent); }
.onboarding-card-sub { font-size: var(--fs-14); color: var(--text); margin: var(--s-4) 0 var(--s-12); }
.onboarding-steps { display: flex; flex-direction: column; }
.onboarding-step { display: flex; align-items: flex-start; gap: var(--s-12); width: 100%; text-align: left; padding: 14px 0; background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; font-family: inherit; cursor: pointer; }
.onboarding-step:first-child { border-top: none; }
.onboarding-step.done { cursor: default; }
.onboarding-step-check { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: var(--fs-11); }
.onboarding-step.done .onboarding-step-check { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.onboarding-step-check svg { width: 12px; height: 12px; }
.onboarding-step-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.onboarding-step-title { font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); }
.onboarding-step-title.link { color: var(--accent); display: inline-flex; align-items: center; gap: var(--s-4); }
.onboarding-step-title.link svg { width: 14px; height: 14px; }
.onboarding-step.done .onboarding-step-title { color: var(--text-muted); font-weight: 400; }
.onboarding-step-desc { font-size: var(--fs-13); color: var(--text-muted); }
.onboarding-step.done .onboarding-step-desc { color: var(--text-faint); }
.onboarding-step-action { display: none; }

/* ===== Settings pages (API Keys, Team Settings) ===== */
.settings-page { padding: 0 var(--s-16); max-width: 832px; }
.settings-page h2 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-28); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.settings-page > p { margin: var(--s-4) 0 var(--s-24); padding-bottom: var(--s-16); border-bottom: 1px solid var(--rule); font-size: var(--fs-14); color: var(--text-muted); }
.settings-section { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-8); box-shadow: var(--shadow-card); padding: var(--s-20) var(--s-24); margin-bottom: var(--s-24); }
.settings-section h3 { margin: 0 0 var(--s-16); font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); }
.settings-section.success { background: var(--ok-bg); border-color: transparent; box-shadow: none; }
.settings-section.success h3 { color: var(--ok); }
.settings-form-row { gap: var(--s-12); }
.settings-field label { display: block; margin-bottom: 6px; font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); }
select.settings-input { appearance: none; -webkit-appearance: none; padding-right: var(--s-32); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369758e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-8) center; }
.settings-btn { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-control); cursor: pointer; white-space: nowrap; }
.settings-btn:hover { background: var(--accent-hover); }
.settings-btn.success { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border-strong); font-weight: 500; }
.settings-btn.success:hover { background: var(--band); }
.settings-code { flex: 1; min-width: 0; padding: 6px var(--s-12); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); font-family: var(--mono); font-size: var(--fs-13); color: var(--text-strong); word-break: break-all; }
.settings-code.success { color: var(--text-strong); }
.settings-hint { margin: 0 0 var(--s-12); font-size: var(--fs-14); color: var(--text); }
.settings-rows { display: flex; flex-direction: column; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--border); }
.settings-row:first-child { border-top: none; padding-top: 0; }
.settings-row:last-child { padding-bottom: 0; }
.settings-row-main { flex: 1; min-width: 0; }
.settings-row-title { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); }
.settings-row-meta { display: flex; align-items: center; gap: var(--s-8); margin-top: var(--s-4); font-size: var(--fs-13); color: var(--text-muted); }
.settings-row code { font-family: var(--mono); font-size: var(--fs-13); color: var(--text); }
.settings-row-actions { display: flex; align-items: center; gap: var(--s-8); flex-shrink: 0; }
.settings-invite-link { display: flex; align-items: center; gap: var(--s-8); margin-top: var(--s-8); }
.settings-invite-link input { flex: 1; min-width: 0; min-height: 28px; padding: 4px var(--s-8); font-family: var(--mono); font-size: var(--fs-12); }
.settings-invite-link .btn-outline { flex-shrink: 0; white-space: nowrap; }
.settings-empty { margin: 0; font-size: var(--fs-14); color: var(--text-muted); }
.settings-error { margin: 0; font-size: var(--fs-14); color: var(--danger); }
.badge { display: inline-flex; align-items: center; padding: 2px var(--s-8); border-radius: var(--r-4); font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap; text-transform: capitalize; background: var(--band); color: var(--text); }
.badge.accent { background: var(--accent-tint); color: var(--accent); }
.btn-outline.danger { color: var(--danger); }
.btn-outline.danger:hover { background: var(--danger-bg); }
.btn-outline.sm { height: 28px; padding: 0 var(--s-8); font-size: var(--fs-13); }

/* ===== Data inner tabs (Context, Integration) ===== */
.context-tabs { display: flex; gap: var(--s-8); margin-bottom: var(--s-24); padding: 0; border-bottom: none; }
.context-tab { height: 28px; padding: 0 var(--s-12); display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-pill); color: var(--text); font-family: inherit; font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.context-tab:hover:not(.active) { background: var(--band); color: var(--text-strong); }
.context-tab.active { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent); }
.context-section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-16); margin-bottom: var(--s-16); }
.context-section-info h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.context-section-info p { margin: var(--s-4) 0 0; font-size: var(--fs-14); color: var(--text-muted); }
.context-textarea { width: 100%; min-height: 300px; padding: var(--s-12); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: var(--mono); font-size: var(--fs-13); line-height: 1.6; resize: vertical; box-shadow: var(--shadow-control); }
.context-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.context-refresh-btn { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); font-weight: 500; box-shadow: var(--shadow-control); cursor: pointer; }
.context-refresh-btn:hover { background: var(--band); color: var(--text-strong); border-color: var(--border-strong); }
.context-actions { margin-top: var(--s-16); padding-top: var(--s-16); gap: var(--s-12); }
.context-save-btn, .northstar-save-btn { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-control); cursor: pointer; }
.context-save-btn:hover, .northstar-save-btn:hover { background: var(--accent-hover); }
.integration-section { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-8); box-shadow: var(--shadow-card); padding: var(--s-20) var(--s-24); margin-bottom: var(--s-24); }
.integration-section h3 { margin: 0 0 var(--s-12); font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); }
.integration-section p { font-size: var(--fs-14); color: var(--text); }
.integration-code-block { font-family: var(--mono); font-size: var(--fs-13); line-height: 1.6; background: var(--band); border: none; border-radius: var(--r-6); padding: var(--s-12) var(--s-16); color: var(--text-strong); }

/* ===== Queue review item ===== */
.review-item { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-8); box-shadow: var(--shadow-card); padding: var(--s-20) var(--s-24); }
.review-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-16); flex-wrap: wrap; }
.review-item-title { font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); }
.review-item-subject { font-weight: 400; font-size: var(--fs-14); color: var(--text); margin-left: var(--s-8); }
.review-item-when { font-size: var(--fs-13); color: var(--text-muted); margin-top: 2px; }
.review-item-tools { display: flex; gap: var(--s-12); align-items: center; }
.review-trace { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-14); font-weight: 500; color: var(--accent); text-decoration: none; }
.review-trace:hover { color: var(--accent-hover); }
.review-trace svg { width: 14px; height: 14px; }
.pager { display: inline-flex; align-items: center; gap: var(--s-4); }
.pager-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text); box-shadow: var(--shadow-control); cursor: pointer; padding: 0; }
.pager-btn:hover:not(:disabled) { background: var(--band); color: var(--text-strong); }
.pager-btn:disabled { color: var(--text-faint); cursor: default; box-shadow: none; }
.pager-btn svg { width: 16px; height: 16px; }
.pager-count { font-size: var(--fs-13); color: var(--text-muted); min-width: 96px; text-align: center; }
.review-block { margin-top: var(--s-16); }
.review-label { font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.review-payload { margin: 0; padding: var(--s-12) var(--s-16); background: var(--band); border: none; border-radius: var(--r-6); font-family: var(--mono); font-size: var(--fs-13); line-height: 1.5; color: var(--text-strong); white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
.review-empty { font-size: var(--fs-14); color: var(--text-muted); }
.review-allclear { padding: var(--s-40) var(--s-16); border: 1px dashed var(--rule); border-radius: var(--r-8); text-align: center; font-size: var(--fs-14); color: var(--text); }
.review-meta-row { margin-top: var(--s-16); display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; font-size: var(--fs-13); color: var(--text-muted); }
.review-meta-row b { font-weight: 500; color: var(--text-strong); }
.judge { margin-top: var(--s-16); background: var(--warn-bg); border-radius: var(--r-8); padding: var(--s-12) var(--s-16); }
.judge-label { font-size: var(--fs-12); font-weight: 600; color: var(--warn); margin-bottom: var(--s-8); }
.judge-bits { display: flex; gap: var(--s-12); align-items: center; flex-wrap: wrap; }
.judge-sev { font-size: var(--fs-14); font-weight: 600; color: var(--text-strong); }
.judge .badge { background: var(--surface); color: var(--text); }
.judge-reason { margin-top: var(--s-8); font-size: var(--fs-14); color: var(--text-strong); white-space: pre-wrap; }
.judge-quote { margin-top: var(--s-8); padding-left: 10px; border-left: 2px solid var(--warn); font-size: var(--fs-14); font-style: italic; color: var(--text-strong); }
.review-controls { display: flex; gap: var(--s-20); align-items: flex-start; margin-top: var(--s-16); flex-wrap: wrap; }
.review-controls-main { flex: 1 1 380px; min-width: 320px; }
.review-input { width: 100%; min-height: var(--control-h); padding: 6px var(--s-12); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); box-shadow: var(--shadow-control); }
.review-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.review-input::placeholder { color: var(--text-faint); }
textarea.review-input { resize: vertical; line-height: 1.5; margin-bottom: var(--s-12); }
select.review-input { width: auto; min-width: 200px; appearance: none; -webkit-appearance: none; padding-right: var(--s-32); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369758e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-8) center; }
input.review-input.score { width: 110px; }
.review-row { display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-12); }
.review-row:last-child { margin-bottom: 0; }
.sev-btn.is-on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.btn-outline.ok { color: var(--ok); }
.btn-outline.ok:hover { background: var(--ok-bg); }
.kbd { display: inline-block; font-family: var(--mono); font-size: var(--fs-11); line-height: 1.4; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: var(--s-8); opacity: 0.6; }
.review-error { color: var(--danger); font-size: var(--fs-14); margin-top: var(--s-8); }
.rubric-panel { flex: 0 1 300px; min-width: 260px; background: var(--band); border-radius: var(--r-8); padding: var(--s-16); }
.rubric-label { font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); margin-bottom: var(--s-8); }
.rubric-row { margin-bottom: var(--s-8); }
.rubric-row:last-child { margin-bottom: 0; }
.rubric-row-title { font-size: var(--fs-13); font-weight: 500; color: var(--text-strong); }
.rubric-row-title b { font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.rubric-hint { font-size: var(--fs-12); line-height: 1.4; color: var(--text-muted); margin-top: 2px; }

/* ===== Auth modal, no-access screen, privacy modal, toast ===== */
.auth-modal-content { background: var(--surface); border: none; border-radius: var(--r-8); padding: var(--s-32); width: 100%; max-width: 400px; box-shadow: var(--shadow-modal); }
.auth-modal-title { margin: 0 0 var(--s-4); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; text-align: center; }
.auth-modal-subtitle { margin: 0 0 var(--s-24); font-size: var(--fs-14); color: var(--text-muted); text-align: center; }
.auth-tabs { display: flex; gap: 0; margin-bottom: var(--s-24); border-bottom: 1px solid var(--rule); }
.auth-tab { flex: 1; height: 36px; padding: 0; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; color: var(--text); font-family: inherit; font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.auth-tab:hover:not(.active) { color: var(--text-strong); background: transparent; border-color: transparent; }
.auth-tab.active { color: var(--accent); background: transparent; border-color: transparent; border-bottom-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: var(--s-12); }
.auth-input { width: 100%; height: 36px; padding: 0 var(--s-12); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); box-shadow: var(--shadow-control); }
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.auth-input::placeholder { color: var(--text-faint); }
.auth-btn { height: 36px; padding: 0 var(--s-16); display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 600; box-shadow: var(--shadow-control); cursor: pointer; }
.auth-btn:hover { background: var(--accent-hover); }
.auth-btn.secondary { background: var(--surface); color: var(--text-strong); border: 1px solid var(--border-strong); font-weight: 500; }
.auth-btn.secondary:hover { background: var(--band); }
.auth-error { background: var(--danger-bg); border: none; border-radius: var(--r-6); padding: var(--s-8) var(--s-12); color: var(--danger); font-size: var(--fs-14); margin-bottom: var(--s-12); }
.auth-error.notice { background: var(--ok-bg); border: none; color: var(--ok); }
.auth-link { background: none; border: none; padding: 0; align-self: center; color: var(--text-muted); font-family: inherit; font-size: var(--fs-13); cursor: pointer; }
.auth-link:hover { color: var(--accent); text-decoration: none; }
.no-access { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding: var(--s-32); }
.no-access-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-8); background: var(--band); color: var(--text-muted); margin-bottom: var(--s-16); }
.no-access-icon svg { width: 20px; height: 20px; }
.no-access h1 { margin: 0 0 var(--s-8); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.no-access p { margin: 0 0 var(--s-8); max-width: 400px; font-size: var(--fs-14); color: var(--text); }
.no-access p b { font-weight: 600; color: var(--text-strong); }
.no-access p.muted { color: var(--text-muted); margin-bottom: var(--s-24); }
.no-access-actions { display: flex; gap: var(--s-8); }
.privacy-modal-content { background: var(--surface); border: none; border-radius: var(--r-8); padding: var(--s-24); width: 100%; max-width: 420px; box-shadow: var(--shadow-modal); }
.privacy-modal-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-20); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; margin-bottom: var(--s-4); }
.privacy-modal-desc { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--s-16); }
.privacy-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) 0; background: transparent; border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 0; }
.privacy-setting-row:last-of-type { border-bottom: 1px solid var(--border); }
.privacy-setting-label { font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); white-space: nowrap; }
.privacy-setting-row select { height: var(--control-h); padding: 0 var(--s-32) 0 var(--s-12); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: inherit; font-size: var(--fs-14); box-shadow: var(--shadow-control); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369758e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-8) center; cursor: pointer; }
.privacy-setting-row select:hover { border-color: var(--border-strong); }
.privacy-setting-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.privacy-gear-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: none; border-radius: var(--r-6); background: transparent; color: var(--text-muted); cursor: pointer; vertical-align: middle; }
.privacy-gear-btn:hover { background: var(--band); color: var(--text-strong); }
.privacy-gear-btn svg { width: 16px; height: 16px; }
.dialog-actions { display: flex; gap: var(--s-8); justify-content: flex-end; margin-top: var(--s-16); }
.toast { position: fixed; bottom: var(--s-32); left: 50%; transform: translateX(-50%); background: var(--text-strong); color: var(--text-on-accent); padding: 10px var(--s-16); border-radius: var(--r-8); font-size: var(--fs-14); font-weight: 500; z-index: 10000; box-shadow: var(--shadow-modal); animation: fadeIn 0.2s ease; }
.invite-body { text-align: center; padding: var(--s-8) 0 0; }
.invite-lead { margin: 0 0 var(--s-8); font-size: var(--fs-14); color: var(--text); }
.invite-name { margin: 0 0 var(--s-8); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.invite-meta { margin: 0 0 var(--s-12); font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted); }
.invite-meta b { font-weight: 600; color: var(--text-strong); }
.invite-warn { margin: 0 0 var(--s-16); padding: var(--s-8) var(--s-12); background: var(--warn-bg); border-radius: var(--r-6); font-size: var(--fs-14); color: var(--warn); text-align: left; }
.invite-actions { display: flex; flex-direction: column; gap: var(--s-8); margin-top: var(--s-20); }
.invite-actions .auth-btn { width: 100%; }
.invite-done { width: 40px; height: 40px; margin: 0 auto var(--s-12); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok); }
.invite-done svg { width: 20px; height: 20px; }

/* ===== Empty notes ===== */
.empty-note { padding: var(--s-16) 0; font-size: var(--fs-14); color: var(--text-muted); }

/* ===== Empty CTA (no queues yet) ===== */
.empty-cta { text-align: center; padding: var(--s-48) var(--s-32); max-width: 520px; margin: 0 auto; }
.empty-cta-title { font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); margin-bottom: var(--s-4); }
.empty-cta-body { font-size: var(--fs-14); line-height: 1.6; color: var(--text-muted); margin-bottom: var(--s-16); }
.empty-cta-btn { height: var(--control-h); padding: 0 var(--s-12); display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); box-shadow: var(--shadow-control); cursor: pointer; }
.empty-cta-btn:hover { background: var(--band); }

/* ===== Trace modal: header actions, waterfall, span panel ===== */
.ai-action-btn { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text); box-shadow: var(--shadow-control); overflow: visible; cursor: pointer; }
.ai-action-btn:hover { background: var(--band); border-color: var(--border-strong); color: var(--text-strong); }
.ai-action-btn svg { width: 14px; height: 14px; }
.waterfall-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-12); padding-bottom: var(--s-12); border-bottom: 1px solid var(--border); }
.waterfall-stats { display: flex; gap: var(--s-24); font-size: var(--fs-14); color: var(--text-muted); }
.waterfall-stat-value { color: var(--text-strong); font-weight: 600; }
.waterfall-span { padding: 6px 0; border-bottom: 1px solid var(--border-card); }
.waterfall-span:hover { background: var(--band); }
.waterfall-span.selected { background: var(--accent-tint); }
.waterfall-span-type { font-size: var(--fs-11); font-weight: 600; padding: 1px 6px; border-radius: var(--r-4); text-transform: uppercase; letter-spacing: 0.02em; border: none; background: var(--band); color: var(--text-muted); }
.waterfall-span-type.run, .waterfall-span-type.llm { background: var(--accent-tint); color: var(--accent); }
.waterfall-span-type.tool { background: var(--ok-bg); color: var(--ok); }
.waterfall-bar-container { height: 20px; background: var(--band); border: none; border-radius: var(--r-4); }
.waterfall-bar { border-radius: var(--r-4); }
.span-detail-panel { width: 480px; border-left: 1px solid var(--border); box-shadow: var(--shadow-modal); }
.span-detail-header { padding: var(--s-16) var(--s-24); }
.span-detail-title { font-size: var(--fs-16); font-weight: 600; color: var(--text-strong); }
.span-detail-close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-muted); font-size: var(--fs-16); line-height: 1; box-shadow: var(--shadow-control); cursor: pointer; }
.span-detail-close:hover { background: var(--band); color: var(--text-strong); }
.span-detail-body { padding: var(--s-20) var(--s-24); }
.span-detail-section { margin-bottom: var(--s-24); }
.span-detail-section-title { font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin-bottom: var(--s-8); }
.span-detail-json { background: var(--band); border: none; border-radius: var(--r-6); padding: var(--s-12) var(--s-16); font-family: var(--mono); font-size: var(--fs-13); line-height: 1.5; color: var(--text-strong); overflow-x: auto; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; }
.span-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: var(--s-8) var(--s-16); font-size: var(--fs-14); }
.span-detail-label { color: var(--text-muted); }
.span-detail-value { color: var(--text-strong); }

/* ===== Incident modal (the conversation behind one case) ===== */
.incident-head code { font-family: var(--font-ui); font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); background: none; border: none; padding: 0; }
.incident-copy { height: 28px; padding: 0 var(--s-8); display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-6); color: var(--text-strong); font-family: inherit; font-size: var(--fs-13); font-weight: 500; box-shadow: var(--shadow-control); cursor: pointer; }
.incident-copy:hover { background: var(--band); color: var(--text-strong); border-color: var(--border-strong); }
.incident-reason { font-size: var(--fs-14); line-height: 1.5; color: var(--text-strong); background: var(--band); border: none; border-radius: var(--r-8); padding: var(--s-12) var(--s-16); margin-bottom: var(--s-16); }
.incident-divider { display: flex; align-items: center; gap: var(--s-12); font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; margin: var(--s-16) 0 var(--s-12); }
.incident-divider::before, .incident-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.incident-context-toggle { display: flex; align-items: center; gap: var(--s-8); width: 100%; background: none; border: none; cursor: pointer; padding: var(--s-8) 0; font-size: var(--fs-13); color: var(--text-muted); font-family: inherit; text-align: left; }
.incident-exchange { border-left: 2px solid var(--border); padding: var(--s-4) 0 var(--s-4) var(--s-12); margin-bottom: var(--s-12); }
.incident-exchange.evidence { border-left-color: var(--warn); background: var(--warn-bg); border-radius: 0 var(--r-8) var(--r-8) 0; }
.incident-exchange-head { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-12); color: var(--text-muted); margin-bottom: var(--s-4); }
.incident-evidence-tag { color: var(--warn); background: var(--surface); border: none; border-radius: var(--r-4); padding: 1px 6px; font-size: var(--fs-11); font-weight: 600; }
.incident-turn { font-size: var(--fs-14); line-height: 1.5; margin-bottom: var(--s-8); white-space: pre-wrap; border-radius: var(--r-6); padding: var(--s-8) var(--s-12); }
.incident-turn .who { display: block; margin-bottom: 2px; font-size: var(--fs-11); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.incident-turn.agent { background: var(--band); }

/* ===== Northstar panel (inside the setup panel and the Context tab) ===== */
.northstar-help { font-size: var(--fs-14); color: var(--text-muted); margin: 0 0 var(--s-12); line-height: 1.5; }
.northstar-label { display: block; font-size: var(--fs-14); font-weight: 500; color: var(--text-strong); margin: var(--s-16) 0 6px; }
.northstar-prompt { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--r-6); padding: var(--s-12) var(--s-48) var(--s-12) var(--s-16); margin: 0; font-family: var(--mono); font-size: var(--fs-13); line-height: 1.6; color: var(--text-strong); white-space: pre-wrap; }
.northstar-copy-btn { top: var(--s-8); right: var(--s-8); }
.northstar-option { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-14); color: var(--text-strong); cursor: pointer; padding: 6px var(--s-8); border-radius: var(--r-6); border: 1px solid transparent; }
.northstar-option:hover { background: var(--surface); border-color: var(--border-card); }
.northstar-actions { display: flex; align-items: center; gap: var(--s-12); margin-top: var(--s-16); }
.northstar-modal-content { max-width: 760px; }
.northstar-modal-content .northstar-panel { padding-top: 0; }
.northstar-sublabel { font-weight: 400; color: var(--text-muted); margin-left: var(--s-8); }
.northstar-slots { display: flex; flex-direction: column; gap: var(--s-8); }
.northstar-slot { display: flex; align-items: center; gap: var(--s-8); }
.northstar-slot .settings-input { flex: 1; min-width: 0; }
.northstar-slot-n { flex: 0 0 1.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-13); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.northstar-slot-guardrail svg { width: 14px; height: 14px; color: var(--text-muted); }

/* calibration detail back link reads as a breadcrumb, like every other detail page */
.cal-back { display: inline-flex; align-items: center; gap: var(--s-4); height: auto; padding: 0; margin: 0; background: none; border: none; box-shadow: none; font-family: inherit; font-size: var(--fs-14); font-weight: 500; color: var(--accent); cursor: pointer; }
.cal-back:hover { color: var(--accent-hover); background: none; }

/* ===== Severity badge: number square + level word, five-step tint (colours painted from JS) ===== */
.sev { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--s-8) 0 3px; border-radius: var(--r-4); font-size: var(--fs-12); font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.sev-n { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-style: normal; font-size: var(--fs-11); font-weight: 700; line-height: 1; }
.sev.you { box-shadow: inset 0 0 0 1px var(--accent); }
.evals-verdict-pill.you { box-shadow: inset 0 0 0 1px var(--accent); }
.sev-btn .sev-n { margin-right: 2px; }
.rubric-row-title .sev-n { margin-right: 6px; vertical-align: -3px; }
.cal-lean-row { grid-template-columns: 108px 1fr 3rem; gap: var(--s-12); }
/* Binary flag rate: who, bar, rate. The who column matches the disagreement rows. */
.cal-rate-row { display: grid; grid-template-columns: 3rem 1fr 3.6rem; gap: var(--s-8); align-items: center; margin-bottom: 0.32rem; }
.cal-rate-row .cal-lean-n { text-align: left; }
.cal-side { grid-template-columns: 3rem 108px 1fr; gap: var(--s-8); }
/* Patterns and Proposed changes rows share the disagreement rows' text
   column: one chip column as wide as who + badge, same gap, so the prose in
   every section of the detail starts on the same vertical line. */
.cal-pat { grid-template-columns: calc(3rem + 108px + var(--s-8)) minmax(0, 72ch); gap: var(--s-8); }
/* The row's tags (cause + count, or target + verdict) share the first column
   and wrap onto a second line when the words are long. */
.cal-pat-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); }
/* The count is a tag like the chip beside it: same size and shape, outlined rather than filled. */
.cal-pat-n { white-space: nowrap; font-size: var(--fs-11); padding: 0.08rem 0.4rem; border-radius: 3px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.evals-rubric-row { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-8); }
.evals-rubric-row .sev { min-width: 108px; }
.evals-rubric-desc { font-size: var(--fs-14); color: var(--text); }

/* ===== Inline annotation popover (from a case badge) ===== */
.inline-anno { border: none; border-radius: var(--r-8); padding: var(--s-12); box-shadow: var(--shadow-modal); }
.inline-anno-head { font-size: var(--fs-12); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-bottom: var(--s-8); }
.inline-anno-levels { gap: 2px; margin-bottom: var(--s-8); }
.inline-anno-lvl { gap: var(--s-8); padding: 6px var(--s-8); border-radius: var(--r-6); font-family: inherit; font-size: var(--fs-14); font-weight: 500; }
.inline-anno-lvl:hover { background: var(--band); }
.inline-anno-lvl.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }

/* ===== Filter chips: "Label | value" around a native select ===== */
.chip { display: inline-flex; align-items: center; height: 28px; padding-left: var(--s-12); border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--surface); font-size: var(--fs-14); color: var(--text); white-space: nowrap; }
.chip:hover { background: var(--band); }
.chip:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.chip-label { padding-right: var(--s-8); border-right: 1px solid var(--rule); }
.chip .evals-cat-select { height: 26px; border: none; border-radius: 0 var(--r-pill) var(--r-pill) 0; background-color: transparent; box-shadow: none; padding: 0 var(--s-32) 0 var(--s-8); color: var(--accent); font-weight: 500; }
.chip .evals-cat-select:hover { background-color: transparent; }
.chip .evals-cat-select:focus { border: none; box-shadow: none; }

/* ===== Chart type toggle (Stacked / Lines) ===== */
.evals-chart-toggle { display: flex; gap: var(--s-4); }
.evals-chart-toggle button { height: 28px; padding: 0 var(--s-12); border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--surface); color: var(--text); font-family: inherit; font-size: var(--fs-14); font-weight: 500; cursor: pointer; }
.evals-chart-toggle button:hover { background: var(--band); }
.evals-chart-toggle button.active { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent); }

/* ===== Buttons with a leading icon ===== */
.btn-primary svg, .eval-new-btn svg, .settings-btn svg, .ec-bail svg { width: 14px; height: 14px; }
.settings-btn { gap: 6px; }

/* ===== Change log row ===== */
.changelog-add-row { display: flex; gap: var(--s-8); margin-bottom: var(--s-16); align-items: center; }
.changelog-date { flex: 0 0 160px; color-scheme: light; }
input[type="date"].settings-input { height: var(--control-h); padding: 0 var(--s-8) 0 var(--s-12); }

/* ===== Create flow: select chevron, error row ===== */
select.ec-input { appearance: none; -webkit-appearance: none; padding-right: var(--s-32); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369758e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-8) center; cursor: pointer; }
.ec-error { flex: 1; }

/* ===== Reason text, all surfaces =====
   What the judge or a person SAID, wherever it appears (annotate card, case
   list, incident modal, calibration disagreements): prose, not chrome. One
   size, regular weight, regular colour, and a reading measure where the text
   is not already boxed. Evidence keeps italic and the left rule; labels keep
   600. The "you" tag carries the human side, so a human reason is no longer
   a darker colour than the judge's. */
.judge-reason, .evals-case-reason, .incident-reason, .cal-said { font-size: var(--fs-14); line-height: 1.5; font-weight: 400; color: var(--text); }
.judge-reason, .evals-case-reason, .cal-said { max-width: 72ch; }