@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root {
  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: #fff;
  font-synthesis: none;
  --green: #315846;
  --green-soft: #edf3ee;
  --ink: #242b28;
  --text: #3f4642;
  --text-2: #5d6460;
  --muted: #6c726e;
  --faint: #a1a6a3;
  --line: #e6e8e4;
  --sidebar: #f6f7f3;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --red: #a34f43;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: 0.45; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #587a65; outline-offset: 3px; }
button svg, a svg { flex-shrink: 0; }
button { background: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 550; letter-spacing: -0.025em; }
h1 { font-size: 30px; line-height: 1.3; }
h2 { font-size: 23px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
small { font-size: 12px; }
.caption { color: var(--muted); }
.caption { font-size: 12px; }
code, pre { font-family: var(--mono); }
.green { color: var(--green); }
.red { color: var(--red); }
.eyebrow { font-size: 11px; letter-spacing: 0.08em; font-weight: 600; color: var(--text-2); }
.icon-button { width: 29px; height: 29px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; color: var(--text-2); flex-shrink: 0; }
.icon-button:hover { background: #f0f2ed; color: #263e30; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #dedfdc; border-radius: 6px; padding: 8px 12px; font-size: 13px; font-weight: 500; background: #fff; white-space: nowrap; transition:
    background 0.15s,
    box-shadow 0.15s; }
.button:hover { background: #f7f8f5; box-shadow: 0 1px 3px #2030250a; }
.button.small { padding: 4px 9px; font-size: 12px; }
.text-button, .text-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text-2); font-size: 12px; }
.text-button:hover, .text-link:hover { color: var(--green); }
.text-link { color: var(--green); font-weight: 550; font-size: 13px; }
.boot { min-height: 100vh; display: flex; gap: 20px; align-items: center; justify-content: center; flex-direction: column; color: var(--text-2); }
.boot p { max-width: 500px; }
.brand-mark { width: 32px; height: 32px; background: #2d4a3b; color: white; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 27px; line-height: 1; font-weight: 700; letter-spacing: -3px; padding-right: 3px; }
.sidebar { width: 228px; position: fixed; inset: 0 auto 0 0; background: var(--sidebar); border-right: 1px solid #e7e8e6; display: flex; flex-direction: column; padding: 30px 16px 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 12px 32px; font-size: 23px; letter-spacing: -1.2px; font-weight: 650; line-height: 1; }
.brand-sub { display: block; font-size: 8px; letter-spacing: 2px; margin-top: 7px; font-weight: 500; color: var(--text-2); }
.sidebar-section { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 550; }
.sidebar-section.active { background: #e9ede3; color: #3b4b36; }
.count { padding: 1px 6px; border: 1px solid #dedfdc; border-radius: 4px; background: #f9faf7; font-size: 11px; font-weight: 400; }
.sidebar-section .count { margin-left: auto; }
.task-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d6dbcf transparent; margin: 0 -8px; padding: 18px 8px; }
.task-link { display: block; padding: 8px 12px; margin-bottom: 2px; border: 1px solid transparent; border-radius: 7px; color: var(--text-2); font-size: 13px; font-weight: 500; line-height: 1.4; transition: background 0.15s; }
.task-link:hover { background: #eeefe9; }
.task-link.selected { background: #fff; border-color: #e4e7de; box-shadow: 0 2px 5px #27331d04; color: #2a3b2c; }
.status-dot { display: inline-block; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
.main { margin-left: 228px; min-width: 0; }
.topbar { height: 62px; border-bottom: 1px solid #eeefed; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { font-size: 12px; display: flex; gap: 12px; align-items: center; color: var(--muted); }
.breadcrumb strong { font-weight: 500; color: var(--text); }
.breadcrumb .back-link { display: inline-flex; white-space: nowrap; align-items: center; gap: 6px; padding-right: 14px; margin-right: 2px; border-right: 1px solid #e4e6e3; color: var(--text); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.task-heading { padding: 31px 38px 26px; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.task-description { color: var(--text-2); font-size: 14px; max-width: 860px; line-height: 1.8; margin-top: 9px; }
.task-author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; font-size: 13px; color: var(--text); }
.author-label { color: var(--muted); }
.us-tag { padding: 2px 7px; border-radius: 999px; background: #e7efdf; color: #3f6334; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tabs { padding: 0 38px; display: flex; align-items: stretch; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { display: flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; padding: 13px 0 14px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s; }
.tab:hover { color: #445d44; }
.tab.active { border-color: #456446; color: #354e34; font-weight: 550; }
.tab-count { border-radius: 4px; background: #eff0ed; padding: 0 5px; font-size: 11px; color: var(--text-2); }
.content { padding: 29px 38px 45px; max-width: 1660px; min-height: calc(100vh - 380px); }
.mobile-menu { display: none; }
.instruction-layout { display: grid; grid-template-columns: minmax(0, 1fr) 258px; gap: 25px; align-items: start; }
.document-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px #29391d02; }
.document-toolbar { background: #fbfcf8; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 11px 19px; color: var(--muted); font-size: 11px; }
.document-toolbar > span { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; }
.prose { padding: 25px 29px 29px; font-size: 14px; line-height: 1.95; color: var(--text-2); }
.prose h2 { font-size: 24px; line-height: 1.45; color: var(--ink); letter-spacing: -0.6px; margin: 0 0 21px; }
.prose h3 { font-size: 18px; color: #35482e; margin: 25px 0 12px; }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose code, .event-message code { font-size: 0.9em; color: var(--text); background: #f1f2ef; padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose ul { padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose pre { overflow: auto; padding: 15px; background: #f8f9f5; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; line-height: 1.8; }
.document-foot { display: flex; gap: 7px; align-items: center; background: #fcfdf9; border-top: 1px solid #eeefec; padding: 12px 20px; color: var(--muted); font-size: 11px; }
.context-column { display: grid; gap: 19px; }
.panel { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: #fff; }
.panel dl { margin: 17px 0; }
.meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 12px 0; font-size: 12px; }
.meta-row dt { color: var(--muted); flex-shrink: 0; }
.meta-row dd { margin: 0; color: var(--text-2); text-align: right; font-size: 11px; overflow-wrap: anywhere; }
.verification-panel { background: #f8faf5; border-color: #e4e9da; }
.round-icon { width: 33px; height: 33px; display: grid; place-items: center; background: #ebf0e2; border: 1px solid #e0e7d5; border-radius: 8px; color: #779464; margin-bottom: 12px; }
.verification-panel h3 { font-size: 14px; color: #536347; }
.verification-panel p { font-size: 12px; color: #919c84; margin-top: 9px; line-height: 1.8; }
.baseline-line { display: flex; gap: 7px; align-items: center; font-size: 11px; color: #748d62; margin: 16px 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 23px; }
.section-heading h2 { font-size: 22px; }
.section-heading p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 5px; }
.compact-heading { margin-bottom: 18px; }
.compact-heading h3 { font-size: 14px; }
.run-dot:focus-visible, .model-filter-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.model-logo { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; background: #f5ede8; border: 1px solid #eee1d9; color: #b57b5f; }
.model-logo.openai { background: #eef2e9; border-color: #e1e7d9; color: #647d55; }
.model-logo.gemini { background: #eaf0f8; border-color: #dbe4f0; color: #4d6f9c; font-size: 17px; }
.effort { font-size: 11px; color: var(--text-2); background: #f5f6f3; border: 1px solid #e9eae7; padding: 1px 5px; border-radius: 4px; font-weight: 400; white-space: nowrap; }
.file-workspace { display: grid; grid-template-columns: 250px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; height: 680px; background: #fff; }
.file-sidebar { border-right: 1px solid var(--line); background: #fcfdf9; overflow: auto; padding: 0 0 15px; }
.file-search { display: flex; align-items: center; gap: 7px; margin: 13px 12px; padding: 6px 7px; border: 1px solid #e8e9e7; border-radius: 5px; background: #fff; color: var(--faint); }
.file-search input { width: 100%; min-width: 0; border: 0; outline: none; font-size: 11px; color: var(--text-2); background: transparent; }
.file-search input::placeholder { color: var(--faint); }
.tree-folder summary, .file-entry { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px calc(10px + var(--depth) * 13px); font-size: 11px; cursor: pointer; white-space: nowrap; color: var(--muted); min-width: 0; list-style: none; border: 0; width: 100%; text-align: left; background: transparent; }
.tree-folder summary::-webkit-details-marker { display: none; }
.tree-folder summary > svg:first-child { transition: transform 0.1s; }
.tree-folder[open] > summary > svg:first-child { transform: rotate(90deg); }
.file-entry { padding-left: calc(27px + var(--depth) * 13px); color: var(--muted); }
.file-entry span, .tree-folder summary span { overflow: hidden; text-overflow: ellipsis; }
.file-entry svg, .tree-folder svg { flex-shrink: 0; }
.file-entry:hover, .tree-folder summary:hover { background: #f3f6ed; }
.file-entry.selected { background: #eaf0e1; color: #587546; }
.file-body { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.code-toolbar { height: 43px; min-height: 43px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #fff; }
.code-toolbar > span { display: flex; gap: 7px; align-items: center; min-width: 0; color: var(--text-2); font: 11px var(--mono); }
.code-toolbar > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-toolbar > div { display: flex; gap: 6px; align-items: center; }
.code-scroll { overflow: auto; flex: 1; background: #fefefc; min-height: 0; padding: 14px 0; }
.code-lines { width: max-content; min-width: 100%; }
.code-line { display: flex; font: 12px/1.9 var(--mono); white-space: pre; min-height: 20.9px; }
.code-line code { padding-right: 20px; color: var(--text-2); }
.line-number { display: inline-block; width: 53px; min-width: 53px; padding-right: 17px; text-align: right; color: var(--faint); user-select: none; font-size: 11px; }
.code-footer { border-top: 1px solid #eff0ed; display: flex; justify-content: space-between; padding: 8px 15px; font-size: 11px; color: var(--faint); }
.empty-state { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; text-align: center; color: var(--faint); min-height: 260px; padding: 32px; }
.file-body > .empty-state { height: 100%; }
.empty-state h3 { font-size: 17px; color: var(--muted); }
.empty-state p { max-width: 340px; font-size: 12px; line-height: 1.9; }
.empty-small { font-size: 11px; line-height: 1.8; color: var(--faint); padding: 17px; }
.loading { display: grid; place-items: center; height: 250px; color: var(--faint); font-size: 13px; }
.test-inventory { padding: 22px; }
.search-field { display: flex; align-items: center; gap: 8px; color: var(--faint); }
.search-field input { border: 0; background: none; font-size: 13px; color: var(--ink); outline: none; min-width: 100px; width: 205px; }
.search-field input::placeholder { color: var(--muted); }
.test-inventory .search-field { border: 1px solid #e9eae7; border-radius: 5px; padding: 7px 10px; }
.suite-inventory { border-top: 1px solid #eaebe8; }
.suite-inventory summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; padding: 14px 2px; font-size: 14px; color: var(--text-2); }
.suite-inventory summary strong { font-weight: 550; color: var(--ink); }
.suite-inventory summary > span:not(.count) { font-size: 11px; color: var(--faint); }
.suite-inventory[open] > summary > svg { transform: rotate(90deg); }
.suite-inventory summary .count { margin-left: auto; }
.checks-back { margin-bottom: 20px; }
.run-count { display: flex; align-items: center; gap: 8px; font: 500 20px var(--mono); color: var(--muted); }
.run-count span { font:
    11px "DM Sans",
    sans-serif; color: var(--faint); }
.model-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 25px; }
.model-card { padding: 15px 17px; background: #fff; border: 1px solid #e7e9e6; border-radius: 7px; text-align: left; transition:
    border-color 0.15s,
    background 0.15s; }
.model-card:hover, .model-card.selected { background: #f8fbf3; border-color: #b9caa6; }
.model-card > div:first-child { display: flex; align-items: center; gap: 8px; }
.model-filter-button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.model-card strong { font-size: 14px; font-weight: 550; color: var(--text-2); }
.model-card .effort { margin-left: auto; }
.model-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.model-card-bottom > span { font: 500 18px var(--mono); color: var(--text-2); }
.model-card-bottom small { font:
    11px "DM Sans",
    sans-serif; color: var(--faint); }
.run-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.run-dot { display: grid; place-items: center; height: 24px; min-width: 24px; padding: 0 5px; border-radius: 4px; color: #293d22; font: 11px var(--mono); background: color-mix(in srgb, #9ab882 var(--score, 0%), #d4b09c); }
.run-dot:hover { box-shadow: 0 0 0 2px var(--green); }
select { background: #fff; border: 1px solid #e6e7e4; border-radius: 5px; padding: 6px 25px 6px 9px; color: var(--muted); font-size: 11px; max-width: 100%; }
.badge { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e9eae7; background: #f8f9f7; border-radius: 5px; font-size: 11px; line-height: 1.3; padding: 4px 6px; color: var(--faint); white-space: nowrap; }
.badge.score { color: color-mix(in srgb, #7c9a65 var(--score, 0%), #be9280); background: color-mix(in srgb, #f2f7ec var(--score, 0%), #fcf5ef); border-color: color-mix(in srgb, #e0ebd4 var(--score, 0%), #f1e4d9); }
.run-workspace { display: grid; grid-template-columns: 215px minmax(0, 1fr) 270px; height: 780px; max-height: calc(100vh - 115px); min-height: 560px; border-bottom: 1px solid #eaebe8; }
.trace-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.trace-controls { padding: 13px 15px 0; border-bottom: 1px solid #e8eae7; background: #fff; z-index: 2; }
.trace-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trace-title-row > strong { font-size: 13px; color: var(--text-2); font-weight: 550; white-space: nowrap; }
.trace-title-row > strong > span { font-size: 11px; font-weight: 400; color: var(--faint); margin-left: 5px; }
.trace-title-row > div { display: flex; align-items: center; gap: 4px; }
.trace-title-row .button, .trace-title-row .icon-button { color: var(--muted); }
/* Run metrics under the run title, and the summary line under each Main model card; both wrap at phone width. */
.run-metrics { display: flex; flex-wrap: wrap; gap: 3px 16px; margin: 6px 0 0; font-size: 11px; }
.run-metrics > div { display: flex; align-items: baseline; gap: 5px; }
.run-metrics dt { color: var(--faint); }
.run-metrics dd { margin: 0; font-family: var(--mono); color: var(--text-2); }
.run-card-metrics { margin: 9px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); font-family: var(--mono); }
.scrubber-row { padding: 13px 0 6px; }
.trace-minimap { height: 19px; display: flex; gap: 2px; border: 1px solid #e4ecd9; border-radius: 4px; padding: 2px; background: #f9fcf4; overflow: hidden; }
.minimap-event { height: 100%; min-width: 2px; flex: 1; border: 0; padding: 0; background: #cbd8e2; border-radius: 1px; }
.minimap-event.assistant { background: #b5c6a1; }
.minimap-event.user { background: #d4c5aa; }
.minimap-event.system { background: #d3d8cb; }
.minimap-event.current { background: #739454; outline: 1px solid #658542; outline-offset: 0; }
.step-controls { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); margin-bottom: 10px; }
.step-controls > span { white-space: nowrap; }
.step-controls label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.step-controls input[type="number"] { width: 41px; font-size: 11px; border: 1px solid #e7e8e5; border-radius: 4px; padding: 2px; color: var(--muted); background: #fff; }
.step-controls input[type="range"] { min-width: 30px; flex: 1; height: 3px; accent-color: #88a868; }
.step-controls .button { font-size: 11px; padding: 2px 6px; }
.trace-options { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; font-size: 11px; color: var(--faint); flex-wrap: wrap; }
.trace-options label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.trace-options input { width: 11px; height: 11px; accent-color: #779958; margin: 0 3px 0 0; }
.segmented { display: flex; gap: 2px; }
.segmented button { border: 0; border-radius: 4px; padding: 3px 6px; font-size: 11px; color: var(--faint); }
.segmented button.active { background: #edf4e3; color: #779955; }
.trace-search { display: flex; align-items: center; gap: 6px; padding: 7px 0 10px; color: var(--faint); }
.trace-search input { width: 100%; border: 0; background: none; outline: none; font-size: 11px; color: var(--muted); }
.trace-search input::placeholder { color: var(--faint); }
.trace-feed { overflow: auto; flex: 1; padding: 22px 15px 35px; scroll-behavior: smooth; scroll-padding-top: 16px; background: #fdfefb; }
.trace-event { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; position: relative; scroll-margin-top: 15px; }
.event-marker { width: 43px; flex-shrink: 0; display: flex; align-items: center; flex-direction: column; gap: 6px; padding-top: 7px; color: var(--faint); }
.event-marker > span { width: 24px; height: 24px; border: 1px solid #e4e5e2; background: #f4f5f2; border-radius: 6px; display: grid; place-items: center; }
.event-marker small { font: 11px var(--mono); color: var(--faint); }
.trace-event.tool .event-marker > span { background: #eef3f9; border-color: #dce6f0; color: var(--faint); }
.trace-event.user .event-marker > span { background: #faf5ea; border-color: #eee2ca; color: var(--faint); }
.event-card { flex: 1; min-width: 0; border: 1px solid #e8e9e7; border-radius: 7px; background: #fff; overflow: hidden; }
.trace-event.current .event-card { border-color: #c0d3a9; box-shadow: 0 0 0 2px #edf5e4; }
.event-header { padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f2ef; font-size: 11px; color: var(--muted); }
.event-header strong { font-weight: 550; overflow-wrap: anywhere; }
.event-header > span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.event-header > button { border: 0; padding: 0; color: var(--faint); font: 11px var(--mono); }
.tool-label { font-size: 11px; color: var(--faint); letter-spacing: 0.06em; white-space: nowrap; }
.event-message { padding: 13px 15px; font-size: 11px; line-height: 1.9; color: var(--muted); overflow-wrap: anywhere; }
.event-message p { margin: 0 0 10px; }
.event-message p:last-child { margin: 0; }
.event-message h2 { font-size: 16px; line-height: 1.5; margin: 0 0 12px; color: #344b27; }
.event-message h3 { font-size: 14px; margin: 14px 0 8px; }
.event-message ul { padding-left: 17px; }
.event-message pre { overflow: auto; font-size: 11px; background: #f9faf7; padding: 10px; line-height: 1.7; }
.event-message.long-message { max-height: 245px; overflow: hidden; mask-image: linear-gradient(black 75%, transparent); }
.expand-message { display: block; width: 100%; border: 0; padding: 9px; background: #fbfdfa; font-size: 11px; color: var(--faint); }
.tool-arguments, .tool-output pre { font: 11px/1.85 var(--mono); color: var(--muted); margin: 0; padding: 12px 14px; overflow: auto; max-height: 340px; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; background: #fdfefb; }
.tool-output { border-top: 1px solid #f0f1ee; }
.tool-output summary { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--faint); cursor: pointer; font-size: 11px; background: #fafbf8; list-style: none; }
.tool-output summary span { margin-left: auto; color: var(--faint); }
.tool-output[open] > summary > svg { transform: rotate(90deg); }
.tool-output pre { font-size: 11px; background: #fbfdfa; }
.run-file-body { height: 100%; }
.run-file-body .code-line { font-size: 11px; }
.run-file-body .code-toolbar { padding: 0 10px; }
.run-file-body .code-toolbar > span { font-size: 11px; }
.run-file-body .line-number { width: 36px; min-width: 36px; padding-right: 10px; }
.run-file-body .button { font-size: 11px; padding: 4px 6px; }
dialog { width: min(920px, calc(100vw - 40px)); max-height: 85vh; padding: 0; border: 1px solid #d5dfc7; border-radius: 11px; box-shadow: 0 20px 80px #1d351d25; color: var(--green); }
dialog::backdrop { background: #1e2f2445; backdrop-filter: blur(3px); }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); padding: 10px 20px; background: #2f493a; color: white; border-radius: 7px; font-size: 13px; opacity: 0; pointer-events: none; transition: 0.2s; z-index: 100; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
.task-description { color: var(--text-2); }
.prose { color: var(--text); }
.verification-panel p { color: #7b896e; }
.meta-row dt { color: var(--muted); }
.meta-row dd { color: var(--text); }
.file-entry, .tree-folder summary { color: var(--text-2); }
.code-line code { color: var(--text); }
.section-heading p { color: var(--muted); }
.model-card strong { color: var(--ink); }
.badge.score { color: color-mix(in srgb, #57803c var(--score, 0%), #a97258); }
.event-message { color: var(--text); }
.event-message h2 { color: #344b27; }
.tool-arguments, .tool-output pre { color: var(--text-2); }
.event-header { color: var(--muted); }
.trace-options { color: var(--muted); }
.step-controls { color: var(--muted); }
.model-card-bottom small { color: var(--muted); }
@media (min-width: 1700px) {
  .content { padding-top: 35px; }
  .instruction-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .prose { padding: 35px 40px; font-size: 14px; }
  .run-workspace { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  .event-message { font-size: 13px; }
  .tool-arguments, .tool-output pre { font-size: 12px; }
}
@media (max-width: 1250px) {
  .sidebar { width: 205px; padding-left: 12px; padding-right: 12px; }
  .main { margin-left: 205px; }
  .topbar, .task-heading { padding-left: 26px; padding-right: 26px; }
  .tabs { padding-left: 26px; padding-right: 26px; gap: 22px; }
  .content { padding-left: 26px; padding-right: 26px; }
  .instruction-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 18px; }
  .context-column .panel { padding: 16px; }
  .task-heading h1 { font-size: 26px; }
  .run-workspace { grid-template-columns: 175px minmax(0, 1fr) 225px; }
  .trace-title-row { flex-wrap: wrap; gap: 5px; }
  .trace-options { gap: 5px; }
  .trace-feed { padding-left: 8px; padding-right: 10px; }
  .event-marker { width: 34px; }
  .model-card { padding: 12px; }
  .model-card strong { font-size: 13px; }
  .model-card > div:first-child { gap: 5px; }
  .file-workspace { grid-template-columns: 215px minmax(0, 1fr); }
}
@media (max-width: 1050px) {
  .sidebar { width: 185px; padding-left: 8px; padding-right: 8px; }
  .brand { margin-left: 12px; font-size: 21px; }
  .task-link { gap: 7px; }
  .main { margin-left: 185px; }
  .instruction-layout { grid-template-columns: minmax(0, 1fr); }
  .context-column { grid-template-columns: 1fr 1fr; }
  .tabs { gap: 19px; }
  .tab { font-size: 12px; gap: 5px; }
  .tab svg { width: 14px; }
  .prose { padding: 25px; }
  .run-workspace { grid-template-columns: 160px minmax(0, 1fr) 195px; }
  .trace-title-row > strong { font-size: 12px; }
  .trace-title-row .button { font-size: 11px; padding: 3px 5px; }
  .trace-options { flex-direction: column; align-items: flex-start; gap: 8px; }
  .event-marker { width: 26px; }
  .event-marker small { font-size: 11px; }
  .trace-event { gap: 6px; }
  .event-message { padding: 11px; font-size: 11px; }
  .tool-arguments { font-size: 11px; }
  .model-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-workspace { grid-template-columns: 190px minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.2s; width: 225px; box-shadow: 10px 0 30px #24352015; }
  .sidebar.mobile-open { transform: translateX(0); }
  .main { margin: 0; }
  .mobile-menu { display: inline-flex; margin-right: 10px; }
  .topbar { justify-content: flex-start; padding: 0 20px; height: 54px; }
  .task-heading { padding: 25px 20px 21px; }
  .title-row h1 { font-size: 25px; }
  .title-row .button { font-size: 11px; padding: 6px 9px; }
  .task-description { font-size: 12px; }
  .tabs { padding: 0 20px; gap: 25px; }
  .content { padding: 24px 20px 35px; }
  .run-workspace { grid-template-columns: 150px minmax(0, 1fr) 195px; max-height: none; height: 760px; }
  .file-workspace { height: 600px; }
  .section-heading h2 { font-size: 20px; }
}
@media (max-width: 620px) {
  .task-heading { padding-top: 21px; }
  .title-row { align-items: flex-start; }
  .title-row h1 { font-size: 24px; }
  .title-row .button { width: 29px; height: 29px; font-size: 0; gap: 0; padding: 0; flex-shrink: 0; }
  .title-row .button svg { width: 14px; }
  .task-description { font-size: 12px; line-height: 1.8; }
  .tabs { gap: 23px; }
  .tab { padding: 13px 0; font-size: 12px; }
  .tab svg { display: none; }
  .content { padding: 20px 15px 30px; }
  .context-column { grid-template-columns: 1fr; }
  .document-toolbar { padding: 10px 13px; }
  .document-toolbar .text-button { font-size: 11px; }
  .prose { padding: 23px 19px; font-size: 13px; }
  .prose h2 { font-size: 22px; }
  .document-foot { padding: 12px 14px; font-size: 11px; }
  .panel { padding: 18px; }
  .section-heading { align-items: flex-start; gap: 10px; }
  .section-heading h2 { font-size: 19px; }
  .section-heading > .caption { display: none; }
  .section-heading > .button { font-size: 11px; padding: 7px; }
  .test-inventory .section-heading { flex-direction: column; align-items: stretch; }
  .test-inventory .search-field input { width: 100%; }
  .file-workspace { display: flex; flex-direction: column; height: 690px; }
  .file-sidebar { max-height: 200px; min-height: 120px; border-right: 0; border-bottom: 1px solid var(--line); }
  .file-body { flex: 1; min-height: 0; }
  .file-workspace .file-entry, .file-workspace .tree-folder summary { font-size: 11px; }
  .code-toolbar { padding: 0 12px; }
  .code-line { font-size: 11px; }
  .line-number { width: 37px; min-width: 37px; padding-right: 10px; }
  .code-toolbar > span { font-size: 11px; }
  .model-cards { gap: 9px; }
  .model-card > div:first-child { flex-wrap: wrap; gap: 6px; }
  .model-card .model-logo { width: 22px; height: 22px; font-size: 17px; }
  .model-card strong { font-size: 13px; }
  .model-card .effort { margin-left: 29px; margin-top: -4px; }
  .model-card-bottom { margin-top: 10px; }
  .model-card-bottom > span { font-size: 15px; }
  .model-card-bottom small { font-size: 11px; }
  .run-dot { height: 20px; min-width: 20px; padding: 0 4px; font-size: 11px; }
  .run-dots { gap: 3px; }
  .run-count { font-size: 20px; flex-direction: column; gap: 0; text-align: right; }
  .run-count > span { font-size: 11px; white-space: nowrap; }
  .run-workspace { display: flex; flex-direction: column; height: auto; max-height: none; min-height: 0; }
  .trace-pane { min-height: 600px; height: 720px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
  .trace-title-row { flex-wrap: wrap; }
  .trace-controls { padding: 13px 14px 0; }
  .trace-options { flex-direction: row; align-items: center; }
  .event-marker { width: 36px; }
  .event-marker small { font-size: 11px; }
  .event-message { font-size: 12px; }
  .event-header { font-size: 11px; }
  .tool-arguments, .tool-output pre { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
.main.is-run .task-heading { display: none; }
.main.is-run .run-workspace { height: calc(100dvh - 162px); max-height: none; min-height: 420px; }
.main.is-run .run-content { padding: 0; }
.trace-feed { background: #fdfdfb; }
.file-search input { font-size: 12px; color: var(--text-2); }
.file-search input::placeholder { color: var(--muted); }
.trace-title-row > strong { font-size: 14px; color: var(--ink); }
.trace-title-row > strong > span { font-size: 11px; color: var(--muted); }
.trace-title-row .button, .trace-title-row .icon-button { color: var(--text-2); }
.step-controls { font-size: 11px; color: var(--muted); }
.step-controls input[type="number"] { font-size: 11px; color: var(--text-2); }
.trace-options { font-size: 11px; color: var(--text-2); }
.segmented button { font-size: 11px; color: var(--muted); }
.segmented button.active { color: #52733b; }
.trace-search input { font-size: 11px; color: var(--text-2); }
.trace-search input::placeholder { color: var(--muted); }
.event-message { font-size: 13px; color: var(--text); padding: 15px 17px; line-height: 1.85; }
.event-message h2 { font-size: 19px; color: #344b27; }
.event-message h3 { font-size: 15px; color: #455c37; }
.event-header { font-size: 12px; color: var(--text-2); }
.event-header > button { font-size: 11px; color: var(--faint); }
.event-marker { width: 44px; }
.event-marker small { font-size: 11px; color: var(--muted); }
.tool-arguments, .tool-output pre { font-size: 12px; color: var(--text); line-height: 1.8; }
.tool-output summary { font-size: 11px; color: var(--muted); }
.tool-output summary span { color: var(--muted); }
.tool-label { font-size: 11px; color: var(--faint); }
.expand-message { font-size: 11px; color: var(--muted); }
.empty-state p { font-size: 13px; color: var(--muted); }
.empty-state h3 { color: var(--text); }
.run-file-body .code-line { font-size: 12px; }
.run-file-body .code-toolbar > span { font-size: 11px; }
.run-file-body .button { font-size: 11px; }
@media (max-width: 1100px) and (min-width: 801px) {
  .main.is-run { margin-left: 185px; }
  .main.is-run .run-workspace { grid-template-columns: 155px minmax(0, 1fr) 205px; }
  .event-message { font-size: 12px; }
  .tool-arguments, .tool-output pre { font-size: 11px; }
  .event-marker { width: 30px; }
  .event-marker small { font-size: 11px; }
  .trace-title-row { flex-wrap: wrap; }
  .trace-title-row .button { font-size: 11px; }
}
@media (max-width: 800px) {
  .main.is-run .run-workspace { grid-template-columns: 145px minmax(0, 1fr) 195px; height: calc(100dvh - 151px); }
  .trace-title-row { flex-wrap: wrap; }
  .event-marker { width: 29px; }
  .event-marker small { font-size: 11px; }
  .event-message { font-size: 12px; }
  .tool-arguments, .tool-output pre { font-size: 11px; }
}
@media (max-width: 620px) {
  .main.is-run .run-workspace { height: auto; min-height: 0; }
  .main.is-run .trace-pane { height: 680px; }
  .event-marker { width: 36px; }
  .event-marker small { font-size: 11px; }
  .event-message { font-size: 13px; }
}
.main.is-run .run-workspace { grid-template-columns: var(--files-width, 211px) 4px minmax(0, 1fr) 4px var(
      --details-width,
      266px
    ); }
@media (max-width: 1250px) {
  .main.is-run .run-workspace { --files-width: 170px; --details-width: 220px; }
}
@media (max-width: 1050px) {
  .main.is-run .run-workspace { --files-width: 145px; --details-width: 191px; }
}
@media (max-width: 800px) {
  .sidebar { visibility: hidden; }
  .sidebar.mobile-open { visibility: visible; }
}
.verifier-content .test-inventory { margin-top: 23px; }
.run-center { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:#fff; }
.run-center > .trace-pane { flex:1; min-height:0; }
.analysis-scroll { overflow:auto; padding:25px; min-height:0; color: var(--text); line-height:1.7; font-size:13px; }
.loss-finding { padding:18px; border:1px solid #e3e7dd; border-radius:7px; margin-bottom:14px; background:#fff; }
.finding-suite { font-size:11px; color:#9a8777; letter-spacing:.07em; }
/* Long test ids (snake_case, parametrised, URLs) wrap instead of running past the panel's edge. */
.finding-suite code, .loss-where p, .analysis-record code { overflow-wrap:anywhere; word-break:break-word; }
.loss-finding > p { margin:14px 0; }
.finding-locations { margin:17px 0; border-top:1px solid #eeefec; }
.finding-locations > div { display:grid; grid-template-columns:85px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid #eeefec; }
.finding-locations dt { font-size:11px; color: var(--muted); }
.finding-locations dd { margin:0; overflow-wrap:anywhere; }
.finding-locations code { font:11px/1.7 var(--mono); }
.finding-locations small { display:block; font-size:11px; line-height:1.6; color: var(--muted); margin-top:4px; }
.finding-locations pre { font:11px/1.6 var(--mono); white-space:pre-wrap; margin:7px 0 0; background:#f7f8f4; padding:8px; border-radius:4px; }
.finding-assertion { border-top:1px solid #eeefec; padding-top:12px; }
.finding-assertion summary { cursor:pointer; font-size:12px; color: var(--text-2); }
.finding-assertion > code { display:block; overflow-wrap:anywhere; font:11px/1.7 var(--mono); margin:12px 0; }
.finding-assertion pre { white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.7 var(--mono); max-height:360px; overflow:auto; background:#f8f7f3; padding:12px; border-radius:4px; }
.analysis-evidence-list { display:flex; flex-wrap:wrap; gap:7px 12px; margin-top:12px; }
.analysis-evidence { border:0; background:transparent; padding:0; cursor:pointer; text-align:left; color: var(--text-2); font:11px/1.7 var(--mono); overflow-wrap:anywhere; }
.analysis-evidence:hover { text-decoration:underline; }
@media(max-width:1050px) {
  .analysis-scroll { padding:18px; }
  .loss-finding { padding:14px; }
  .finding-locations > div { grid-template-columns:1fr; gap:3px; }
}
@media(max-width:620px) {
  .main.is-run .run-center { height:70dvh; min-height:450px; }
  .main.is-run .run-center > .trace-pane { height:auto; min-height:0; }
  .analysis-scroll { padding:16px; }
}
@media (min-width: 621px) {
  .main.is-run { display: flex; flex-direction: column; height: 100dvh; }
  .main.is-run > .topbar, .main.is-run > .tabs { flex-shrink: 0; }
  .main.is-run .run-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .main.is-run .run-workspace { height: auto; flex: 1; min-height: 320px; }
}
.event-card > summary.event-header { cursor: pointer; list-style: none; }
.event-card > summary.event-header::-webkit-details-marker { display: none; }
.event-card[open] > .event-header > span:first-child > svg { transform: rotate(90deg); }
.event-card:not([open]) > .event-header { border-bottom: 0; }
.event-header .event-step-number { flex-shrink: 0; font-family: var(--mono); }
.event-card > summary:focus-visible { outline: 2px solid #94ad7e; outline-offset: -2px; }
.main.is-run .run-workspace.with-analysis { grid-template-columns: minmax(0, 1fr) minmax(290px, 350px); }
.run-analysis { min-width:0; min-height:0; overflow:auto; border-left:1px solid #e6e7e4; background:#fafbf8; }
.run-analysis .analysis-scroll { padding:18px; overflow:visible; }
.run-analysis .finding-locations > div { grid-template-columns:1fr; gap:4px; }
.run-analysis .loss-finding { padding:12px; }
@media(max-width:800px) {
  .main.is-run .run-workspace.with-analysis { grid-template-columns:minmax(0,1fr); height:auto; }
  .with-analysis .run-center { height:70dvh; min-height:420px; }
  .run-analysis { max-height:55dvh; border-left:0; border-top:1px solid #e6e7e4; }
}
.analysis-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.analysis-panel-heading h2 { margin:0; font-size:17px; color: #34472b; }
.analysis-panel-heading > span { font-size:12px; color: var(--text-2); white-space:nowrap; }
.analysis-guidance { margin:0 0 16px; font-size:12px; color: var(--text-2); }
.analysis-compact .loss-finding h3 { margin:10px 0 8px; font-size:14px; line-height:1.5; color:#3e4d36; font-weight:550; }
.analysis-compact .loss-finding > p { margin:8px 0 12px; }
.analysis-record { margin-top:16px; }
.criterion summary { gap: 8px; }
.criterion summary strong { font-weight: 500; flex: 1; min-width: 0; }
.criterion-detail { margin: 6px 0 12px 30px; line-height: 1.55; white-space: pre-wrap; }
.verdict-group { font-size: 14px; margin: 14px 0 6px; }
.criterion-result h3 { font-size: 14px; }
.overview-nav { margin-bottom: 9px; }
.overview-nav:hover { background: #edf0e7; }
.overview-main { background: #fbfcf8; }
.overview-content { max-width: 1490px; margin: 0 auto; padding: 42px 38px 35px; }
.overview-hero { padding-bottom: 28px; border-bottom: 1px solid #e3e4e1; }
.overview-hero-copy { padding-top: 7px; }
.overview-hero h1 { font-size: clamp(31px, 3vw, 45px); max-width: 1000px; font-weight: 500; line-height: 1.13; letter-spacing: -.045em; color: #354c2b; margin: 0 0 20px; }
.overview-collection { margin-top: 36px; }
.overview-collection + .overview-collection { margin-top: 56px; }
.overview-group-label { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: #354c2b; }
.overview-group-label span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.overview-task-list { display: flex; flex-direction: column; gap: 17px; }
.overview-task { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); border: 1px solid #e2e3e0; border-radius: 11px; overflow: hidden; background: #fffefa; box-shadow: 0 3px 8px #3d522104; }
.overview-task-intro { padding: 25px 26px; }
.overview-task h3 { font-size: 20px; line-height: 1.35; font-weight: 500; color: #3b5330; margin: 0 0 10px; }
.overview-task-intro > p { font-size: 13px; line-height: 1.75; color: var(--text-2); max-width: 450px; }
.overview-task-metrics { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 25px 24px 0; border-left: 1px solid #e7e9e6; gap: 20px 24px; padding-left: 26px; }
.overview-task-metrics > div { min-width: 0; }
.overview-task-metrics dt { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.overview-task-metrics dd { margin: 5px 0; font-size: 24px; line-height: 1.1; color: #455e36; font-weight: 500; letter-spacing: -.03em; }
.overview-task-metrics small { font-size: 11px; line-height: 1.5; color: var(--muted); display: block; }
@media (max-width: 1150px) {
  .overview-task-metrics { gap: 20px 16px; padding-left: 20px; }
}
@media (max-width: 620px) {
  .overview-content { padding: 25px 18px; }
  .overview-hero h1 { font-size: 34px; }
  .overview-task { grid-template-columns: 1fr; }
  .overview-task-intro { padding: 21px; }
  .overview-task-metrics { border-left: 0; border-top: 1px solid #e7e9e6; margin: 0 21px 21px; padding: 19px 0 0; gap: 21px 18px; }
}
.overview-contents { margin: 10px 0 0; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.8; }
.overview-contents li + li { margin-top: 4px; }
.overview-contents strong { font-weight: 550; color: #405734; }
.overview-task:hover { border-color: #a5b795; box-shadow: 0 4px 14px #3d522110; }
.overview-task:focus-visible { outline: 2px solid #405c33; outline-offset: 4px; }
.task-group + .task-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e6df; }
.task-group-label { display: flex; justify-content: space-between; padding: 0 10px 8px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.task-group-items { margin-left: 10px; padding-left: 6px; border-left: 1px solid #dfe3d8; }
.task-group-items .task-link { padding: 6px 10px; margin-bottom: 1px; font-size: 12.5px; }
.task-group-label span { font-weight: 400; }

/* The system prompt under the instruction, and the pass/fail text of a rubric criterion. */
.system-prompt { border-top: 1px solid var(--line); padding: 14px 24px 18px; }
.system-prompt > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--muted); font-weight: 550; }
.system-prompt > summary::-webkit-details-marker { display: none; }
.system-prompt[open] > summary svg { transform: rotate(90deg); }
.system-prompt .prose { padding: 12px 0 0; }
.prose blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--line); color: var(--text); }
.criterion-detail p { margin: 0 0 8px; white-space: normal; }
.criterion-detail p:last-child { margin-bottom: 0; }
.model-card > div:first-child { flex-wrap: wrap; }
.model-card .run-batch-facts { flex-basis: 100%; margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* loss analysis: pattern banner over the trace, failure and error step in the side panel */
.loss-pattern { display:flex; gap:10px; align-items:flex-start; padding:12px 15px; border-bottom:1px solid #eadfd6; background:#fbf6f2; font-size:13px; line-height:1.6; color:#4a4038; }
.loss-pattern .eyebrow { display:block; color:var(--red); margin-bottom:3px; }
.loss-pattern strong { color:#3d2f27; font-weight:600; }
.loss-failure { margin:0 0 12px; font-size:13px; line-height:1.65; color:var(--text); }
.loss-count { display:inline-block; font:600 12px/1.6 var(--mono); color:var(--red); background:#f6ebe7; border-radius:4px; padding:0 6px; margin-right:4px; }
.loss-where { display:flex; gap:8px; align-items:flex-start; padding:10px 12px; margin-bottom:6px; border:1px solid #ecdcd5; border-radius:7px; background:#fff; color:#4f4a43; line-height:1.65; }
.loss-where > svg { color:var(--red); margin-top:3px; flex-shrink:0; }
.loss-where.human-review { border-color:#d5dfc7; }
.loss-where.human-review > svg { color:var(--green); }
.step-link { border:0; padding:0; background:none; color:#3f6b52; text-decoration:underline; text-underline-offset:2px; font:inherit; }
.step-link:hover { color:var(--green); }
.step-link.step-chip { font-weight:600; }
.rubric-lists .verdict-group { margin:14px 0 2px; }
.rubric-lists .caption { margin-bottom:6px; }
.rubric-item { border-bottom:1px solid #eeefec; }
.rubric-item > summary { display:flex; gap:7px; align-items:flex-start; padding:7px 0; cursor:pointer; list-style:none; color: var(--text); font-size:13px; line-height:1.5; }
.rubric-item > summary::-webkit-details-marker { display:none; }
.rubric-item > summary svg { margin-top:3px; flex-shrink:0; }
.rubric-item.fail > summary svg { color:var(--red); }
.rubric-item.pass > summary svg { color:var(--green); }
.rubric-item .criterion-detail { margin:0; padding:0 0 10px 20px; white-space:normal; }
.rubric-item .criterion-detail p { margin:0 0 8px; }
.rubric-item .finding-assertion { margin-top:8px; }
/* the step label makes the event header longer: wrap it under the title on narrow screens */
.event-card > summary.event-header { flex-wrap:wrap; gap:2px 10px; }
.event-header > span:first-child { flex-shrink:0; }

/* Main tab: the task at a glance */
.main-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 56px; margin: 0; }
.main-stats > div { min-width: 0; }
.main-stats dt { font-size: 13px; color: var(--text-2); }
.main-stats dd { margin: 6px 0 0; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: #2f4628; }
.main-section { margin-top: 28px; }
.main-heading { font-size: 18px; margin-bottom: 12px; }
/* one box per run: run number top left, score in the middle, red (0) to green (1) */
.main-run-card .run-dots { justify-content: flex-end; }
.run-dot.band-low { background: #c98a73; color: #2b1c16; }
.run-dot.band-mid { background: #ead27a; color: #2e2a14; }
.run-dot.band-good { background: #d3e6bf; color: #23331b; }
.run-dot.band-great { background: #a5cc8c; color: #1f2f17; }
.run-dot.band-full { background: #6f9f5a; color: #15210f; }
.main-loss { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border: 1px solid #eadfd6; border-radius: 9px; background: #fbf6f2; font-size: 14px; line-height: 1.7; color: #4a4038; max-width: 1100px; }
.main-loss > svg, .loss-pattern > svg { color: var(--red); flex-shrink: 0; margin-top: 2px; }
.main-loss .eyebrow { display: block; color: var(--red); margin-bottom: 2px; }
.main-loss strong { color: #3d2f27; font-weight: 600; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.check-card { padding: 14px 18px 16px; border: 1px solid var(--line); border-radius: 9px; background: #fdfdfb; min-width: 0; }
.check-top { display: flex; align-items: center; gap: 8px; }
.check-mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #4f7a45; color: #fff; flex-shrink: 0; }
.check-mark.flag { background: #d8a93c; }
.check-card h3 { font-size: 15px; font-weight: 550; color: #33452b; }
.check-evidence-list { display: flex; gap: 2px; margin-left: auto; }
.check-evidence { display: inline-flex; padding: 4px; border: 0; border-radius: 5px; color: var(--muted); }
.check-evidence:hover { color: var(--green); background: #f0f2ed; }
.check-finding { margin-top: 8px; font-size: 14px; line-height: 1.65; color: var(--text); }
@media (max-width: 620px) {
  .main-stats { gap: 16px 32px; }
  .check-grid { grid-template-columns: minmax(0, 1fr); }
  .model-cards.main-section { grid-template-columns: minmax(0, 1fr); }
  .main-run-card .effort { margin: 0 0 0 auto; }
}

/* top bar only holds the mobile menu button, except on a run page */
.topbar-mobile { display: none; }
@media (max-width: 800px) {
  .topbar-mobile { display: flex; }
  .topbar-mobile .breadcrumb { display: none; }
}
.instruction-card { position: relative; max-width: 980px; }
.instruction-card > .prose { padding-right: 56px; }
.copy-corner { position: absolute; top: 14px; right: 14px; }
.rubric-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; }
.rubric-toolbar p { color: var(--text-2); font-size: 13px; line-height: 1.7; max-width: 720px; }
.test-inventory h3 { font-size: 14px; }
.verifier-content .test-inventory + .test-inventory { margin-top: 16px; }
@media (max-width: 620px) {
  .rubric-toolbar { flex-direction: column; align-items: stretch; }
  .rubric-toolbar .search-field input { width: 100%; }
}
/* trace timestamps: one width at every screen size so "00:00:00" fits */
.event-marker { width: 50px; }
.event-marker small { font-size: 10px; }
.criterion-detail code { font-size: 12px; overflow-wrap: anywhere; }

.file-note { margin-top:10px; font-size:12px; color:#8a8378; max-width:46ch; }

/* Multi-turn task: the PM's and the requester's messages in the trace, and the notes under Main's sections. */
.minimap-event.pm { background: #d4c5aa; }
.minimap-event.requester { background: #c9b28a; }
.trace-event.pm .event-marker > span { background: #faf5ea; border-color: #eee2ca; color: var(--faint); }
.trace-event.requester .event-marker > span { background: #f6eedd; border-color: #e5d3ad; color: #8a6d3b; }
.trace-event.requester .event-card { border-color: #eadfc8; }
.overview-lead { max-width: 900px; margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--text); }
.main-note { margin: -4px 0 12px; font-size: 13px; color: var(--text-2); }
.check-summary { margin: 2px 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.verifier-rule { margin: 16px 2px 0; }