/* Verdict - stylesheet Extracted from index.html. The reset block comes first because it did when both were inline (reset in , app styles in ), and the app styles rely on winning ties against it. */ /* ---------- Base reset ---------- */ :root{ padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px); } body{ margin:0; } img{ max-width:100%; } [hidden]{ display:none !important; } /* ---------- App ---------- */ /* ---------- Tokens ---------- "Graphite & Sapphire" — an enterprise palette built around one rule: colour carries meaning, never decoration. The chrome is a near-monochrome graphite ramp that recedes; sapphire appears only on things you can act on (primary actions, selection, focus, links); and the status hues are reserved for outcomes. "Running" is deliberately neutral — it is a state, not a verdict — which also keeps every status hue clear of the interactive blue. */ :root{ --bg:#F6F8FA; --surface:#FFFFFF; --surface-2:#F0F3F7; --sidebar:#0E1620; --sidebar-ink:#A3B0BF; --sidebar-ink-dim:#758190; --sidebar-active:#1C2836; --border:#E1E6EC; --border-soft:#EDF1F5; --ink:#131B26; --ink-secondary:#4A5665; --ink-tertiary:#616D7C; --accent:#1F5FD8; /* Sapphire — interactive only */ --accent-hover:#1A4FB5; --accent-ink:#1A4FB5; --accent-soft:rgba(31,95,216,.09); --accent-line:rgba(31,95,216,.22); --accent-on:#FFFFFF; --good:#0E714D; --good-soft:rgba(15,123,84,.11); --warning:#8C5910; --warning-soft:rgba(198,138,26,.15); --critical:#B3261E; --critical-soft:rgba(179,38,30,.10); --info:#55616F; /* in-progress: neutral by design */ --info-soft:rgba(85,97,111,.11); --shadow-sm:none; --shadow-md:0 4px 14px rgba(19,27,38,.08); --radius-sm:8px; /* buttons & inputs */ --radius-md:12px; /* content cards */ --radius-lg:16px; /* bento containers */ --radius-pill:9999px; --font-mono:'JetBrains Mono','Geist Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace; --font-display:inherit; /* themes may override the headline face */ color-scheme: light; } :root[data-theme="dark"]{ --bg:#0A0F15; --surface:#141B24; --surface-2:#1C2531; --sidebar:#101720; --sidebar-ink:#94A3B4; --sidebar-ink-dim:#8892A0; --sidebar-active:#1E2938; --border:#2A3644; --border-soft:#1C2531; --ink:#F2F5F8; --ink-secondary:#A3B0BF; --ink-tertiary:#8794A2; --accent:#2F6FE0; --accent-hover:#4C8DFF; --accent-ink:#8FB8FA; --accent-soft:rgba(47,111,224,.18); --accent-line:rgba(96,150,240,.32); --accent-on:#FFFFFF; --good:#34D399; --good-soft:rgba(52,211,153,.14); --warning:#FBBF24; --warning-soft:rgba(251,191,36,.14); --critical:#FB7185; --critical-soft:rgba(251,113,133,.14); --info:#94A3B4; --info-soft:rgba(148,163,180,.14); --shadow-sm:none; --shadow-md:0 8px 24px rgba(0,0,0,.5); color-scheme: dark; } /* ---------- ThirdAct ---------- The house palette from sa-cricket-nlp: a near-black ramp, gold as the only accent, and square corners — the design there uses no border radius at all. Fraunces carries the headlines; Inter and JetBrains Mono are unchanged. */ :root[data-theme="thirdact"]{ --bg:#0A0E13; --surface:#0C1117; --surface-2:#131820; --sidebar:#070A0E; --sidebar-ink:#8B94A3; --sidebar-ink-dim:#6B7480; --sidebar-active:#1F2630; --border:#2A3140; --border-soft:#1F2630; --ink:#E8EAED; --ink-secondary:#8B94A3; --ink-tertiary:#6B7480; --accent:#D4A574; --accent-hover:#E2BA8E; --accent-ink:#D4A574; --accent-soft:rgba(212,165,116,.12); --accent-line:rgba(212,165,116,.30); --accent-on:#1A2030; /* gold is light: ink on top of it, not white */ --good:#8AB169; --good-soft:rgba(107,142,78,.18); --warning:#D9A441; --warning-soft:rgba(217,164,65,.15); --critical:#D96060; --critical-soft:rgba(201,79,79,.16); --info:#8B94A3; --info-soft:rgba(139,148,163,.14); --shadow-sm:none; --shadow-md:0 8px 24px rgba(0,0,0,.6); --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-pill:0; --font-display:'Fraunces',Georgia,serif; color-scheme: dark; } /* Page and sidebar sit within 4 points of each other on this ramp, so the sidebar needs a drawn edge rather than a tonal one. */ :root[data-theme="thirdact"] .sidebar{ border-right:1px solid var(--border-soft); } :root[data-theme="thirdact"] .sidebar .brand-mark{ --mark-accent:var(--accent); } :root[data-theme="thirdact"] .sidebar :focus-visible{ outline-color:var(--accent); } /* Micro-labels are set in wide-tracked caps in the house style. */ :root[data-theme="thirdact"] .t-meta{ text-transform:uppercase; letter-spacing:.18em; font-size:11px; } /* Gold is scarce here: it marks what you can act on and what is selected. Descriptor badges repeat several times per card, so they go neutral. */ :root[data-theme="thirdact"] .badge.apptype{ background:transparent; color:var(--ink-secondary); border-color:var(--border); } /* Initial tiles are the only round chrome left in a square system. Status dots and radio controls stay round — those read as shapes, not tiles. */ :root[data-theme="thirdact"] .avatar, :root[data-theme="thirdact"] .ws-members span{ border-radius:0; } /* ---------- ThirdAct Light ---------- Straight from the brand guide: muted canvas, pure white cards, electric indigo on anything interactive, slate neutrals, ambient borders over shadows. Radii already match the guide (8 / 12 / 16 / full), so the base scale carries over unchanged. Three guide colours are dark-mode values that fail on white as text — body #94A3B8 (2.6:1), success #10B981 (2.5:1) and warning #F59E0B (2.2:1) — so the text tokens take the darker step of the same hue and the originals stay on fills. */ :root[data-theme="thirdact-light"]{ --bg:#F8FAFC; /* color-canvas-light */ --surface:#FFFFFF; /* color-surface-light */ --surface-2:#F1F5F9; --sidebar:#0B0F17; /* color-bg-noir */ --sidebar-ink:#94A3B8; /* color-text-body, on dark where it belongs */ --sidebar-ink-dim:#64748B; --sidebar-active:#1E293B; /* color-surface-card */ --border:#E2E8F0; /* color-border-light */ --border-soft:#F1F5F9; --ink:#0B0F17; --ink-secondary:#475569; --ink-tertiary:#64748B; /* color-text-muted */ --accent:#4F46E5; /* color-accent-primary */ --accent-hover:#4338CA; /* color-accent-hover */ --accent-ink:#4338CA; --accent-soft:rgba(79,70,229,.10); /* bg-indigo/10 */ --accent-line:rgba(79,70,229,.20); /* border-indigo/20 */ --accent-on:#FFFFFF; --good:#047857; --good-soft:rgba(16,185,129,.12); /* color-status-success as a fill */ --warning:#B45309; --warning-soft:rgba(245,158,11,.16); /* color-status-warning as a fill */ --critical:#DC2626; /* not in the guide; slate-family red */ --critical-soft:rgba(220,38,38,.10); --info:#64748B; --info-soft:rgba(100,116,139,.12); --shadow-sm:none; --shadow-md:0 4px 14px rgba(11,15,23,.07); /* guide: ambient borders over heavy shadows */ --font-display:inherit; color-scheme: light; } /* Links and secondary highlights get color-accent-sky, per the guide. */ :root[data-theme="thirdact-light"] .menu-item.action, :root[data-theme="thirdact-light"] .link{ color:#2563EB; } /* ---------- Light Gold ---------- The prototype's first palette, restored from db988eb: brass on cream with a slate-green sidebar and Georgia headlines, before the Graphite & Sapphire restyle. Values are the originals but for --accent-on; see the note below. Headline sizes and the monospace data face belong to the current layout, so this theme carries the original's typeface but not its 26px/700 scale. */ :root[data-theme="light-gold"]{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F8F6F2; --sidebar:#2A3439; --sidebar-ink:#C9C0B4; --sidebar-ink-dim:#7C8489; --sidebar-active:#3A4750; --border:#E3DDD1; --border-soft:#ECE7DC; --ink:#2A3439; --ink-secondary:#5B6770; --ink-tertiary:#8A9298; --accent:#B8935A; --accent-hover:#93733F; --accent-ink:#6E5327; --accent-soft:#F1E5CE; --accent-line:#E0CFA8; /* the original had no line token; derived from accent-soft */ /* The one value not restored as it shipped: the original's white on this brass measures 2.85:1 — the very figure the restyle commit cited when it dropped the palette. This theme is now the default, so the button label goes dark brown (4.75:1). The brass itself is untouched. */ --accent-on:#3A2C12; --good:#65733A; --good-soft:#E7EBDA; --warning:#B67A22; --warning-soft:#F5E7CE; --critical:#A34526; --critical-soft:#F4DDD3; --info:#2F6F8F; --info-soft:#DCEAF0; --shadow-sm:0 1px 2px rgba(42,52,57,.06); --shadow-md:0 4px 16px rgba(42,52,57,.08); --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --font-display:Georgia,'Iowan Old Style','Times New Roman',serif; color-scheme: light; } /* The original set the wordmark in Georgia too. */ :root[data-theme="light-gold"] .brand-word b{ font-family:var(--font-display); } *{box-sizing:border-box;} html,body{margin:0;padding:0;background:var(--bg);} body{ background:var(--bg); color:var(--ink); font-family:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* Type hierarchy (brand scale): H1 36/1.2/-0.02em/600 · H2 24/1.3/-0.015em/600 H3 18/1.4/-0.01em/500 · Caption 12.5/1.5/+0.01em/500 */ .t-h1{ font-family:var(--font-display); font-size:36px; line-height:1.2; letter-spacing:-.02em; font-weight:600; } .t-h2{ font-family:var(--font-display); font-size:24px; line-height:1.3; letter-spacing:-.015em; font-weight:600; } .t-h3{ font-size:18px; line-height:1.4; letter-spacing:-.01em; font-weight:500; } .t-meta{ font-size:12.5px; line-height:1.5; letter-spacing:.01em; font-weight:500; } @media (max-width:640px){ .t-h1{ font-size:28px; } .t-h2{ font-size:21px; } } /* Monospace carries system data: model names, token counts, run ids, scores, latencies. */ .mono, .tnum{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } .tnum{ letter-spacing:-.01em; } a{ color:inherit; } button{ font-family:inherit; } /* Accent hover/focus state for every interactive element (brand: color-accent-hover). */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; } .sidebar :focus-visible{ outline-color:#8FB8FA; } /* ---------- App shell ---------- */ /* background is set explicitly here (not just inherited from body) so the app's own canvas always paints var(--bg) regardless of any base page reset supplied outside this stylesheet. */ .app{ display:flex; min-height:100vh; background:var(--bg); } .standalone-view[hidden], #view-home[hidden]{ display:none; } /* Two chrome modes. Destinations (Home, the libraries, lists, results) keep the sidebar and topbar, so no screen is a dead end. Focused flows — the eval wizard and the create forms — hide both so people finish the task, and carry their own full-bleed header with an explicit exit. Which mode a view gets is declared by data-chrome in the HTML. */ #app-shell.focus .sidebar, #app-shell.focus .topbar{ display:none; } #app-shell.focus .content{ padding:0; max-width:none; } /* Inside the shell these are ordinary sections, not standalone pages. */ #app-shell:not(.focus) .standalone-content{ max-width:none; padding:0; } /* Workspaces and Projects sit above project context, where the project crumb is a lie. */ #app-shell[data-scope="above"] #crumb-project, #app-shell[data-scope="above"] .crumb-sep, #app-shell[data-scope="above"] .badge.phase{ display:none; } /* Sidebar */ .sidebar{ width:216px; flex:0 0 216px; background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column; padding:20px 14px; gap:22px; } .brand{ display:flex; align-items:center; gap:10px; padding:0 6px; } .brand-mark{ width:24px; height:24px; flex:0 0 24px; display:block; --mark-accent:var(--accent); color:var(--ink-tertiary); } .brand-mark path{ fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .brand-mark .mark-stem{ stroke:currentColor; } .brand-mark .mark-rise{ stroke:var(--mark-accent); } /* On the dark sidebar the mark needs a lighter sapphire to stay legible. */ .sidebar .brand-mark{ --mark-accent:#5B8DEF; color:var(--sidebar-ink); } .brand-word{ display:flex; flex-direction:column; line-height:1.05; } .brand-word b{ font-size:18px; font-weight:600; color:#fff; letter-spacing:-.02em; } .brand-word span{ font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--sidebar-ink-dim); margin-top:3px; } .sidebar-ws{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; font-family:inherit; padding:8px 9px; border-radius:var(--radius-sm); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#fff; cursor:pointer; } .sidebar-ws:hover{ background:rgba(255,255,255,.1); } .sidebar-ws .sw-icon{ width:24px; height:24px; border-radius:var(--radius-sm); flex:0 0 24px; background:var(--accent); color:var(--accent-on); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; } .sidebar-ws .sw-name{ flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar-ws svg{ width:13px; height:13px; flex:0 0 13px; color:var(--sidebar-ink-dim); } .nav{ display:flex; flex-direction:column; gap:2px; margin-top:4px; } .nav-group-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--sidebar-ink-dim); padding:10px 10px 4px; } .nav-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--sidebar-ink); cursor:pointer; position:relative; border:none; background:none; width:100%; text-align:left; } .nav-item svg{ width:16px; height:16px; flex:0 0 16px; opacity:.85; } .nav-item:hover{ background:rgba(255,255,255,.06); } .nav-item.active{ background:var(--sidebar-active); color:#fff; } .nav-item.active::before{ content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; background:var(--accent); border-radius:0 3px 3px 0; } .nav-item.disabled{ color:var(--sidebar-ink-dim); cursor:default; } .nav-item.disabled:hover{ background:none; } .soon-tag{ margin-left:auto; font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--sidebar-ink-dim); border:1px solid rgba(255,255,255,.14); padding:2px 6px; border-radius:var(--radius-pill); } .sidebar-foot{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:8px 6px; border-top:1px solid rgba(255,255,255,.08); padding-top:14px; } .avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; flex:0 0 28px; } .sidebar-foot .avatar{ background:rgba(255,255,255,.12); color:#FFFFFF; } .sidebar-foot .who{ display:flex; flex-direction:column; line-height:1.2; overflow:hidden; } .sidebar-foot .who b{ font-size:12.5px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .sidebar-foot .who span{ font-size:11px; color:var(--sidebar-ink-dim); } /* Main column */ .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .topbar{ display:flex; align-items:center; gap:14px; padding:14px 28px; border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; } .crumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); cursor:pointer; color:var(--ink); } .crumb:hover{ border-color:var(--ink-tertiary); } .crumb svg{ width:12px; height:12px; color:var(--ink-tertiary); } .crumb-sep{ color:var(--ink-tertiary); } /* ---------- Workspace / project switcher ---------- */ .switcher{ position:relative; } .switcher.open .crumb{ border-color:var(--accent-line); background:var(--accent-soft); } .menu{ position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:248px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-md); } /* Menus on right-aligned topbar buttons open inward. */ .menu.right{ left:auto; right:0; min-width:212px; } .switcher.open .icon-btn{ background:var(--surface-2); border-color:var(--border); } .menu-item .mi-swatch{ flex:0 0 24px; height:24px; border-radius:var(--radius-sm); border:1px solid var(--border); display:block; } .menu-label{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-tertiary); padding:8px 10px 6px; } .menu-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; padding:8px 10px; border:0; border-radius:var(--radius-sm); background:none; font:inherit; font-size:13.5px; color:var(--ink); } .menu-item:hover{ background:var(--surface-2); } .menu-item .mi-icon{ flex:0 0 24px; height:24px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:#fff; letter-spacing:.02em; } .menu-item .mi-body{ flex:1; min-width:0; } .menu-item .mi-name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .menu-item .mi-sub{ display:block; font-size:12px; line-height:1.4; color:var(--ink-tertiary); } .menu-item .mi-check{ flex:0 0 14px; color:var(--accent); opacity:0; } .menu-item.current .mi-check{ opacity:1; } .menu-item .mi-check svg{ width:14px; height:14px; } .menu-sep{ height:1px; margin:6px 4px; background:var(--border-soft); } .menu-item.action{ color:var(--accent-ink); font-weight:500; } .menu-item.action .mi-name{ display:flex; align-items:center; gap:8px; } .menu-item.action svg{ width:14px; height:14px; flex:0 0 14px; } .badge{ font-size:12px; font-weight:500; letter-spacing:.01em; padding:3px 10px; border-radius:var(--radius-pill); } .badge.type{ background:var(--info-soft); color:var(--info); } .badge.phase{ background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent-line); } .topbar-spacer{ flex:1; } .icon-btn{ width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid transparent; background:none; display:flex; align-items:center; justify-content:center; color:var(--ink-secondary); cursor:pointer; } .icon-btn:hover{ background:var(--surface-2); border-color:var(--border); } .icon-btn svg{ width:17px; height:17px; } .content{ padding:26px 28px 60px; max-width:1240px; width:100%; margin:0 auto; } .page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .page-head h1{ font-family:var(--font-display); font-size:36px; line-height:1.2; letter-spacing:-.02em; font-weight:600; margin:0 0 8px; text-wrap:balance; } .page-head p{ margin:0; color:var(--ink-secondary); font-size:13.5px; } .btn{ display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer; font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:var(--radius-sm); transition:background .12s ease; } .btn svg{ width:15px; height:15px; } .btn.primary{ background:var(--accent); color:var(--accent-on); box-shadow:var(--shadow-sm); } .btn.primary:hover{ background:var(--accent-hover); } .btn.ghost{ background:var(--surface-2); color:var(--ink); border:1px solid var(--border); } .btn.ghost:hover{ border-color:var(--ink-tertiary); } /* Stat tiles */ .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; } .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm); } .stat-card .label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-tertiary); font-weight:600; margin-bottom:10px; } .stat-card .value{ font-size:28px; font-weight:700; letter-spacing:-.01em; } .stat-card .stat-meta{ font-size:11.5px; color:var(--ink-tertiary); margin-top:3px; } .stat-card .delta{ margin-top:6px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; } .delta.up{ color:var(--good); } .delta.flat{ color:var(--ink-tertiary); } .stat-card .delta svg{ width:11px; height:11px; } /* Panels */ .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); min-width:0; } .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 4px; } .panel-head h2{ font-size:18px; line-height:1.4; letter-spacing:-.01em; font-weight:500; margin:0; } .panel-head .sub{ font-size:12px; color:var(--ink-tertiary); margin-top:2px; } .panel-link{ font-size:12.5px; font-weight:600; color:var(--accent-ink); cursor:pointer; white-space:nowrap; } .panel-link:hover{ text-decoration:underline; } /* Chart */ .chart-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:start; } .chart-row .panel{ min-width:0; } @media (max-width:880px){ .chart-row{ grid-template-columns:1fr; } } .chart-wrap{ padding:6px 18px 16px; } .chart-wrap svg{ width:100%; height:auto; display:block; overflow:visible; } .chart-grid line{ stroke:var(--border); stroke-width:1; } .chart-axis-label{ fill:var(--ink-tertiary); font-size:10px; font-family:var(--font-mono); } .chart-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .chart-area{ fill:url(#pr-grad); } .chart-dot{ fill:var(--surface); stroke:var(--accent); stroke-width:2; } .chart-dot.end{ fill:var(--accent); stroke:var(--surface); stroke-width:2; } .chart-hit{ fill:transparent; cursor:pointer; } .chart-tooltip{ position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); font-size:11.5px; padding:7px 10px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md); opacity:0; transform:translate(-50%,-100%); transition:opacity .1s ease; white-space:nowrap; z-index:5; } .chart-tooltip b{ font-weight:700; } .chart-tooltip.show{ opacity:1; } .chart-tag{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.01em; color:var(--good); background:var(--good-soft); border:1px solid var(--good); padding:2px 9px; border-radius:var(--radius-pill); } /* Metric scores bar chart (Project overview, side by side with pass rate trend) */ .metric-bar-list{ display:flex; flex-direction:column; gap:14px; } .metric-bar-row{ display:flex; align-items:center; gap:12px; } .metric-bar-label{ flex:0 0 132px; font-size:12.5px; font-weight:500; letter-spacing:.01em; color:var(--ink-secondary); line-height:1.4; } .metric-bar-track{ flex:1; min-width:0; height:9px; border-radius:var(--radius-pill); background:var(--surface-2); position:relative; overflow:hidden; } .metric-bar-fill{ height:100%; border-radius:var(--radius-pill); background:var(--accent); } .metric-bar-value{ flex:0 0 72px; text-align:right; white-space:nowrap; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } @media (max-width:520px){ .metric-bar-label{ flex-basis:96px; font-size:11.5px; } .metric-bar-value{ flex-basis:64px; font-size:11px; } } /* Table */ .table-wrap{ overflow-x:auto; } table{ width:100%; border-collapse:collapse; font-size:13px; } thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-tertiary); font-weight:600; padding:10px 18px; border-bottom:1px solid var(--border); white-space:nowrap; } tbody td{ padding:12px 18px; border-bottom:1px solid var(--border-soft); vertical-align:middle; } tbody tr:last-child td{ border-bottom:none; } tbody tr:hover{ background:var(--surface-2); } .run-id{ font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--ink); } .run-name{ display:block; color:var(--ink-tertiary); font-size:11.5px; margin-top:1px; } .method-tag{ font-family:var(--font-mono); font-size:12.5px; line-height:1.5; color:var(--ink-secondary); } .score{ font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; } .verdict{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12px; padding:4px 11px; border-radius:var(--radius-pill); } .verdict .dot{ width:6px; height:6px; border-radius:50%; } .verdict.pass{ background:var(--good-soft); color:var(--good); } .verdict.pass .dot{ background:var(--good); } .verdict.fail{ background:var(--critical-soft); color:var(--critical); } .verdict.fail .dot{ background:var(--critical); } .verdict.partial{ background:var(--warning-soft); color:var(--warning); } .verdict.partial .dot{ background:var(--warning); } .verdict.running{ background:var(--info-soft); color:var(--info); } .verdict.running .dot{ background:var(--info); animation:pulse 1.6s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .date-cell{ color:var(--ink-secondary); white-space:nowrap; } /* Mobile navigation drawer */ .nav-toggle{ display:none; } .nav-scrim{ position:fixed; inset:0; background:rgba(10,15,21,.6); z-index:39; opacity:0; pointer-events:none; transition:opacity .18s ease; } .nav-scrim.open{ opacity:1; pointer-events:auto; } /* Stacked data tables (<=640px) */ @media (max-width:640px){ .stack-wrap{ overflow-x:visible; } .stack-table thead{ display:none; } .stack-table, .stack-table tbody, .stack-table tr, .stack-table td{ display:block; width:100%; } .stack-table{ border-collapse:separate; border-spacing:0; } .stack-table tr{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); margin:0 0 10px; padding:5px 0; overflow:hidden; } .stack-table tr:last-child{ margin-bottom:2px; } .stack-table td[data-label=""]{ justify-content:flex-end; } .stack-table td{ display:flex; align-items:center; justify-content:space-between; gap:14px; border:none; padding:7px 14px; text-align:right; } .stack-table td::before{ content:attr(data-label); flex:0 0 auto; text-align:left; font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-tertiary); } .stack-table td[data-label=""]::before{ content:none; } .stack-table td.stack-empty{ display:none; } .stack-table td[colspan]{ display:block; text-align:center; } .stack-table td[colspan]::before{ content:none; } .stack-table .run-name{ display:inline; margin-left:6px; } .stack-table .method-tag{ white-space:normal; word-break:break-word; } } @media (max-width:880px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } .content{ padding:20px 16px 48px; } .topbar{ padding:12px 16px; } .nav-toggle{ display:flex; } .sidebar{ position:fixed; top:0; bottom:0; left:0; z-index:40; width:264px; flex-basis:264px; padding-top:calc(20px + env(safe-area-inset-top, 0px)); padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto; } .sidebar.open{ transform:translateX(0); } .nav-item.active::before{ left:-14px; } } @media (min-width:881px){ .nav-scrim{ display:none; } } /* Standalone views (above workspace/project context) */ .standalone-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--border); background:var(--surface); } .standalone-back{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-secondary); cursor:pointer; border:none; background:none; padding:7px 10px 7px 6px; border-radius:var(--radius-sm); } .standalone-back:hover{ background:var(--surface-2); color:var(--ink); } .standalone-back svg{ width:15px; height:15px; } .standalone-content{ max-width:920px; margin:0 auto; padding:44px 28px 60px; } .ws-head h1{ font-family:var(--font-display); font-size:36px; line-height:1.2; letter-spacing:-.02em; font-weight:600; margin:0 0 8px; text-wrap:balance; } .ws-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin-top:26px; } .ws-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:16px; font-family:inherit; width:100%; } .ws-card:hover{ border-color:var(--accent); } .ws-top{ display:flex; align-items:center; gap:11px; } .ws-icon{ width:38px; height:38px; border-radius:var(--radius-md); flex:0 0 38px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; } .ws-name{ font-weight:700; font-size:14.5px; color:var(--ink); } .ws-projects{ font-size:11.5px; color:var(--ink-tertiary); margin-top:1px; } .ws-current{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent-line); padding:3px 8px; border-radius:var(--radius-pill); margin-left:auto; white-space:nowrap; } .ws-meta{ display:flex; align-items:center; justify-content:space-between; } .ws-members{ display:flex; } .ws-members span{ width:22px; height:22px; border-radius:50%; background:var(--surface-2); border:2px solid var(--surface); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:var(--ink-secondary); margin-left:-7px; } .ws-members span:first-child{ margin-left:0; } .ws-active{ font-size:11.5px; color:var(--ink-tertiary); } .ws-card.new{ align-items:center; justify-content:center; flex-direction:row; gap:8px; border-style:dashed; color:var(--ink-tertiary); font-weight:600; font-size:13.5px; min-height:96px; } .ws-card.new svg{ width:16px; height:16px; } .ws-card.new:hover{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); } /* Projects list */ .eyebrow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-tertiary); margin-bottom:6px; } .proj-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; } .proj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:26px; } .proj-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:14px; font-family:inherit; width:100%; } .proj-card:hover{ border-color:var(--accent); } .proj-name{ font-weight:700; font-size:15px; color:var(--ink); margin-bottom:9px; } .proj-badges{ display:flex; flex-wrap:wrap; gap:6px; } .badge.apptype{ display:inline-flex; align-items:center; gap:5px; background:var(--accent-soft); color:var(--accent-ink); border:1px solid var(--accent-line); font-size:12px; font-weight:500; letter-spacing:.01em; padding:3px 10px 3px 8px; border-radius:var(--radius-pill); } .badge.apptype svg{ width:12px; height:12px; } .proj-meta{ font-size:12px; color:var(--ink-tertiary); } .proj-card.current{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; } /* New project form */ .form-card{ max-width:640px; } .field{ margin-bottom:24px; } .field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:8px; } .field-label .opt{ font-weight:500; color:var(--ink-tertiary); text-transform:none; letter-spacing:0; } .field input[type="text"], .field textarea{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-family:inherit; font-size:13.5px; line-height:1.4; } .field input[type="text"]:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .field textarea{ resize:vertical; min-height:64px; } .field .hint{ font-size:11.5px; color:var(--ink-tertiary); margin-top:6px; } .choice-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .choice-row.cols-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:880px){ .choice-row.cols-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .choice-row.cols-4{ grid-template-columns:1fr; } } .custom-override-row{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-2); } .custom-override-name{ flex:0 0 auto; min-width:140px; font-size:12.5px; font-weight:700; color:var(--ink); } .custom-override-row .pill-row{ flex:1; min-width:200px; } .custom-override-passes{ width:70px; flex:0 0 70px; } .choice-card{ border:1px solid var(--border); border-radius:var(--radius-md); padding:13px; background:var(--surface); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:9px; font-family:inherit; width:100%; } .choice-card:hover{ border-color:var(--ink-tertiary); } .choice-card .ci-top{ display:flex; align-items:center; justify-content:space-between; } .choice-card .ci-icon{ width:30px; height:30px; border-radius:var(--radius-sm); background:var(--surface-2); flex:0 0 30px; display:flex; align-items:center; justify-content:center; color:var(--ink-secondary); } .choice-card .ci-icon svg{ width:16px; height:16px; } .choice-card .ci-check{ width:17px; height:17px; border-radius:50%; border:1.5px solid var(--border); flex:0 0 17px; position:relative; } .choice-card .ci-name{ font-weight:700; font-size:13px; color:var(--ink); } .choice-card .ci-desc{ font-size:11.5px; color:var(--ink-tertiary); } .choice-card.selected{ border-color:var(--accent); background:var(--accent-soft); } .choice-card.selected .ci-icon{ background:var(--accent); color:var(--accent-on); } .choice-card.selected .ci-check{ border-color:var(--accent); background:var(--accent); } .choice-card .ci-meta{ display:flex; flex-wrap:wrap; gap:10px 12px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-tertiary); } .choice-card .ci-meta span{ display:flex; align-items:center; gap:4px; } .choice-card .ci-meta svg{ width:12px; height:12px; } .choice-card.selected .ci-check::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--accent-on); border-width:0 2px 2px 0; transform:rotate(45deg); } .form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; padding-top:22px; border-top:1px solid var(--border); } /* Wizard step progress (dataset / metric / eval methods / ...) */ .wizard-steps{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-bottom:28px; } .wizard-step{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ink-tertiary); white-space:nowrap; } .wizard-step .ws-num{ width:21px; height:21px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--ink-tertiary); flex:0 0 21px; } .wizard-step.active{ color:var(--ink); } .wizard-step.active .ws-num{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); } .wizard-step.done{ color:var(--ink-secondary); } .wizard-step.done .ws-num{ background:var(--surface); border-color:var(--accent); color:var(--accent-ink); } /* Completed steps are the way back through the wizard; steps ahead stay inert. */ #view-dataset-select .wizard-step.done, #view-metric-select .wizard-step.done, #view-rubric-strategy .wizard-step.done, #view-test-plan .wizard-step.done{ cursor:pointer; } #view-dataset-select .wizard-step.done:hover, #view-metric-select .wizard-step.done:hover, #view-rubric-strategy .wizard-step.done:hover, #view-test-plan .wizard-step.done:hover{ color:var(--ink); } .wizard-arrow{ width:13px; height:13px; flex:0 0 13px; color:var(--border); margin:0 2px; } /* Pill single-select (e.g. metric scoring scale) */ .pill-row{ display:flex; flex-wrap:wrap; gap:8px; } .pill-btn{ padding:8px 15px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); font-family:inherit; font-weight:600; font-size:12.5px; color:var(--ink-secondary); cursor:pointer; } .pill-btn:hover{ border-color:var(--ink-tertiary); } .pill-btn.selected{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); } /* Dataset selection: tabs */ .tab-row{ display:flex; gap:0; border-bottom:1px solid var(--border); margin:26px 0 0; } .tab-btn{ background:none; border:none; font-family:inherit; font-weight:600; font-size:13px; color:var(--ink-tertiary); padding:11px 4px; margin-right:24px; cursor:pointer; position:relative; } .tab-btn:hover:not(.active){ color:var(--ink-secondary); } .tab-btn.active{ color:var(--ink); } .tab-btn.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); border-radius:2px 2px 0 0; } .tab-panel{ padding-top:26px; } /* File drop zone */ .file-drop{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; border:1.5px dashed var(--border); border-radius:var(--radius-md); padding:26px 18px; background:var(--surface-2); cursor:pointer; } .file-drop:hover{ border-color:var(--accent); } .file-drop.dragover{ border-color:var(--accent); background:var(--accent-soft); } .file-drop svg{ width:22px; height:22px; color:var(--ink-tertiary); } .fd-text{ font-size:12.5px; color:var(--ink-secondary); } .fd-browse{ color:var(--accent-ink); font-weight:700; text-decoration:underline; } .fd-hint{ font-size:11px; color:var(--ink-tertiary); } .fd-filename{ font-size:12px; font-weight:700; color:var(--ink); margin-top:2px; } .fd-filename:empty{ display:none; } /* Dataset selection: grid of existing datasets */ .dataset-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:26px; } .dataset-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:13px; font-family:inherit; width:100%; } .dataset-card:hover{ border-color:var(--ink-tertiary); } .dataset-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; } .dataset-card .dc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .dataset-card .dc-name{ font-weight:700; font-size:14px; color:var(--ink); line-height:1.35; } .dataset-card .dc-check{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border); flex:0 0 18px; position:relative; margin-top:1px; } .dataset-card .dc-check.multi{ border-radius:5px; } .dataset-card.selected .dc-check{ border-color:var(--accent); background:var(--accent); } .dataset-card.selected .dc-check::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--accent-on); border-width:0 2px 2px 0; transform:rotate(45deg); } .dataset-card .dc-meta{ display:flex; flex-wrap:wrap; gap:11px; font-size:11.5px; color:var(--ink-tertiary); } .dataset-card .dc-meta span{ display:flex; align-items:center; gap:4px; } .dataset-card .dc-meta svg{ width:12px; height:12px; } .dataset-card.new{ align-items:center; justify-content:center; flex-direction:row; gap:8px; border-style:dashed; color:var(--ink-tertiary); font-weight:600; font-size:13.5px; min-height:128px; } .dataset-card.new svg{ width:16px; height:16px; } .dataset-card.new:hover{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); } /* Eval methods: one panel per selected metric */ .method-list{ display:flex; flex-direction:column; gap:14px; margin-top:26px; } .mrc-body{ padding:4px 18px 18px; } .mrc-body .field-label{ margin-bottom:8px; } .mrc-config{ display:flex; flex-direction:column; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); } .mrc-config-row{ display:flex; flex-direction:column; gap:6px; } .mrc-config-label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-secondary); } .mrc-config-label svg{ width:14px; height:14px; flex:0 0 14px; color:var(--ink-tertiary); } .mrc-input, .mrc-select, .mrc-textarea{ width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font-family:inherit; font-size:13px; } .mrc-textarea{ resize:vertical; min-height:60px; line-height:1.45; } .mrc-input:focus, .mrc-select:focus, .mrc-textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); } .mrc-empty-hint{ font-size:12px; color:var(--ink-tertiary); margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); } .mrc-subhead{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-tertiary); padding-top:14px; border-top:1px solid var(--border-soft); } .mrc-rubric-row{ display:flex; flex-direction:column; gap:8px; } .mrc-rubric-row .mrc-config-label{ justify-content:space-between; } .algo-row{ display:flex; flex-wrap:wrap; gap:8px; } .algo-pill{ display:flex; align-items:center; gap:7px; padding:6px 13px 6px 7px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--surface); cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-secondary); } .algo-pill:hover{ border-color:var(--ink-tertiary); } .algo-pill-icon{ width:21px; height:21px; border-radius:50%; background:var(--surface-2); flex:0 0 21px; display:flex; align-items:center; justify-content:center; color:var(--ink-tertiary); } .algo-pill-icon svg{ width:12px; height:12px; } .algo-pill.selected{ background:var(--accent-soft); border-color:var(--accent); color:var(--ink); } .algo-pill.selected .algo-pill-icon{ background:var(--accent); color:var(--accent-on); } .rubric-card .rubric-toggle{ align-items:flex-start; } .rubric-card .rubric-toggle .accordion-chevron{ margin-top:2px; } .rubric-card .mrc-body{ display:flex; flex-direction:column; gap:16px; padding:16px 18px 20px; border-top:1px solid var(--border-soft); } /* Test plan: collapsible sections (assign methods / plan / run) */ .accordion{ margin-top:22px; } .accordion:first-of-type{ margin-top:26px; } .accordion-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; } .accordion-toggle h2{ font-size:15px; font-weight:700; margin:0; color:var(--ink); } .accordion-toggle .acc-sub{ font-size:12px; color:var(--ink-tertiary); margin-top:2px; font-weight:500; } .accordion-chevron{ width:16px; height:16px; color:var(--ink-tertiary); transition:transform .15s ease; flex:0 0 16px; } .accordion.open .accordion-chevron{ transform:rotate(180deg); } .accordion-body{ padding:16px 18px 20px; border-top:1px solid var(--border-soft); } .accordion-body[hidden]{ display:none; } .accordion-body .method-list{ margin-top:0; } @media (max-width:640px){ .choice-row{ grid-template-columns:1fr; } } /* Toast */ .toast-stack{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:50; } .toast{ background:var(--ink); color:var(--bg); font-size:13px; padding:11px 16px; border-radius:var(--radius-md); box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; max-width:300px; } .toast.show{ opacity:1; transform:translateY(0); } .toast svg{ width:15px; height:15px; flex:0 0 15px; color:inherit; opacity:.7; }