* { box-sizing: border-box; }
:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.55; }
body { margin: 0; background: Canvas; color: CanvasText; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 20; background: Canvas; padding: .6rem; }
.human-report-header, main { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.human-report-header { padding: 3rem 0 1.5rem; }
.human-report-header h1 { max-width: 30ch; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; margin: .25rem 0 .75rem; }
.report-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0 0 1.1rem; font-size: .88rem; }
.report-meta div { display: flex; gap: .45rem; }
.report-meta dt { color: GrayText; }
.report-meta dd { margin: 0; }
.lede { max-width: 70ch; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.4; margin: 0 0 1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: GrayText; }
main { display: grid; gap: 1rem; padding-bottom: 3rem; }
section { padding: 1.4rem; border: 1px solid color-mix(in srgb, CanvasText 14%, transparent); border-radius: 16px; background: color-mix(in srgb, Canvas 94%, CanvasText 6%); }
h2 { margin-top: 0; font-size: 1.45rem; }
h3 { margin-bottom: .35rem; }
/* The report opens with what it holds. It scrolls away with the rest rather
   than sticking: on a phone a pinned index of a dozen sections is the page. */
nav.report-index { padding: 1.2rem 1.4rem; border: 1px solid color-mix(in srgb, CanvasText 14%, transparent); border-radius: 16px; background: color-mix(in srgb, Canvas 94%, CanvasText 6%); }
nav.report-index h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: GrayText; margin-bottom: .6rem; }
nav.report-index ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2.5rem; }
nav.report-index li { margin: .2em 0; break-inside: avoid; }
nav.report-index a { color: inherit; }
/* One card per row. Fitting three across left each body about sixteen
   characters wide — a third of what reads comfortably — and turned every card
   into a narrow vertical strip. These carry paragraphs, not labels. */
.summary-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.summary-card { padding: 1rem; border-radius: 12px; background: color-mix(in srgb, Highlight 8%, Canvas); border-left: 4px solid color-mix(in srgb, Highlight 55%, GrayText); }
.tone-high, .tone-important { border-left-color: #d94b4b; }
.tone-medium { border-left-color: #d79b25; }
.evidence-refs { color: GrayText; font-size: .85rem; }
figure { margin: 1rem 0 0; }
figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .7rem; }
.visualization { overflow-x: auto; border-radius: 12px; background: color-mix(in srgb, CanvasText 4%, Canvas); }
svg { max-width: 100%; min-width: 520px; height: auto; }
svg .edge { stroke: GrayText; stroke-width: 2; }
svg .edge-arrow-head { fill: GrayText; }
svg .node rect { fill: color-mix(in srgb, Highlight 14%, Canvas); stroke: Highlight; }
svg .node-leading rect { fill: color-mix(in srgb, Highlight 32%, Canvas); stroke-width: 2; }
svg .node text { fill: CanvasText; font-size: 13px; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
/* Korean takes a line break between any two syllables, so an auto-layout
   column squeezed by a prose neighbour stacked "일부만 검증" one character per
   line. keep-all wraps at word boundaries instead, and the floor keeps the
   id / status / kind columns from collapsing to a single glyph. anywhere is
   the release valve: a path too long for its column breaks rather than
   widening the table until the right-hand columns run off the page. */
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, CanvasText 18%, transparent); padding: .55rem; min-width: 6em; word-break: keep-all; overflow-wrap: anywhere; }
.visualization-fallback { margin-top: .8rem; }
/* A hint, not a cap — auto layout still widens it when a value needs more.
   Without it a two-column table split the width evenly and gave a stack of
   short labels as much room as the prose beside it. */
.row-key { width: 11em; }
.row-key dl { margin: 0; }
.row-key div + div { margin-top: .2rem; }
/* Name and value share a line so a labelled stack costs no extra height;
   the name is dimmed because the value is what the reader came for. */
.row-key dt { display: inline; color: GrayText; }
.row-key dt::after { content: " "; }
.row-key dd { display: inline; margin: 0; }
/* The legend for a vocabulary whose members are judgements. A cell fits the
   label; the claim behind it has to live somewhere the reader can reach. */
.enum-legend { margin: .8rem 0 0; font-size: .9rem; }
.enum-legend dt { display: inline; font-weight: 600; }
.enum-legend dt::after { content: " — "; }
.enum-legend dd { display: inline; margin: 0; color: GrayText; }
.enum-legend dd::after { content: ""; display: block; margin-bottom: .3rem; }
/* Each entry is two blocks of prose and a citation. As table rows they shared
   the width three ways and every one of them wrapped into a narrow ribbon. */
.ledger { list-style: none; margin: 1rem 0 0; padding: 0; }
.ledger-item { padding: 1rem 0; border-top: 1px solid color-mix(in srgb, CanvasText 14%, transparent); }
.ledger-item:first-child { border-top: 0; padding-top: 0; }
.ledger-item p { margin: 0 0 .4rem; }
.ledger-item p:last-child { margin-bottom: 0; }
.ledger-key { display: flex; flex-wrap: wrap; gap: .6rem; font-weight: 600; }
.ledger-kind { font-weight: 400; color: GrayText; }
.ledger-text { max-width: 78ch; }
.ledger-source, .ledger-confidence { font-size: .9rem; color: GrayText; }
.ledger-source > span:first-child::after,
.ledger-confidence > span:first-child::after { content: ":"; }
.status { display: inline-block; white-space: nowrap; border-radius: 999px; padding: .1rem .5rem; background: color-mix(in srgb, GrayText 15%, Canvas); }
.status-gap, .status-risk, .status-error, .status-timeout { background: color-mix(in srgb, #d94b4b 18%, Canvas); }
/* Figures are read by comparing them down the column, which only works when
   the digits line up: tabular-nums stops a 1 from being narrower than a 7, and
   the right edge is the one they share. */
.run-usage-lede { max-width: 78ch; }
.figure { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Five nowrap number columns need almost none of the width, and the default
   even split spent it on them while the agent names wrapped mid-word. */
[data-report-section="run-usage"] .row-key { width: 40%; }
.cli-extra { display: block; color: GrayText; font-size: .85em; }
tfoot th { font-weight: 600; }
tfoot tr:first-child > * { border-top: 2px solid color-mix(in srgb, CanvasText 30%, transparent); }
tfoot .grand-total > * { font-weight: 700; }
/* The task total counts runs this report is not about, so it is ruled off from
   the run's own figures rather than reading as one more line of them. */
tfoot .task-cumulative > * { border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent); color: GrayText; }
.human-report-footer { width: min(1120px, calc(100% - 2rem)); margin: 0 auto 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.human-report-footer pre { flex-basis: 100%; white-space: pre-wrap; max-height: 14em; overflow: auto; }
fieldset, label { display: block; margin: .7rem 0; }
textarea, select { width: 100%; max-width: 60rem; padding: .55rem; font: inherit; }
.clarification-lede, .clarification-item p { max-width: 78ch; }
.clarification-item { padding: 1.2rem 0; border-top: 1px solid color-mix(in srgb, CanvasText 14%, transparent); }
.clarification-item:first-of-type { border-top: 0; }
.clarification-expected { padding: .7rem .9rem; border-radius: 10px; background: color-mix(in srgb, CanvasText 6%, Canvas); }
.clarification-expected dt { font-weight: 600; margin-bottom: .3rem; }
.clarification-expected dd { margin: 0; }
.clarification-item label { font-weight: 600; margin-bottom: .3rem; }
.activity-list { display: grid; gap: .4rem; }
.activity-card { padding: .55rem .8rem; border: 1px solid color-mix(in srgb, CanvasText 14%, transparent); border-radius: 12px; }
.activity-card h3 { font-size: 1rem; margin: 0 0 .15rem; }
.clarification-item.is-closed { padding: .35rem 0; }
.clarification-item.is-closed summary { cursor: pointer; font-weight: 600; }
.activity-card > :first-child, .approval-context > :first-child { margin-top: 0; }
.activity-card > :last-child, .approval-context > :last-child { margin-bottom: 0; }
.activity-card details { margin-top: .8rem; }
.approval-context { margin: .8rem 0; padding: .8rem 1rem; border-left: 4px solid color-mix(in srgb, Highlight 55%, GrayText); background: color-mix(in srgb, Highlight 7%, Canvas); }
.clarification-option-disposition { color: GrayText; font-size: .85rem; }
.user-response-hint { flex-basis: 100%; margin: 0; color: GrayText; font-size: .9rem; }
button { padding: .5rem 1rem; border-radius: 8px; border: 1px solid color-mix(in srgb, CanvasText 28%, transparent); background: color-mix(in srgb, CanvasText 5%, Canvas); color: CanvasText; font: inherit; cursor: pointer; }
button:hover { background: color-mix(in srgb, CanvasText 12%, Canvas); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
button[data-action="export-user-response"] { background: Highlight; border-color: Highlight; color: HighlightText; font-weight: 600; }
button[data-action="export-user-response"]:hover { background: color-mix(in srgb, Highlight 82%, CanvasText); }
.back-to-top-wrap {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
}
.back-to-top {
  padding: .55rem .9rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, CanvasText 40%, transparent);
  background: Canvas;
  color: CanvasText;
  text-decoration: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.back-to-top:hover { background: color-mix(in srgb, CanvasText 12%, Canvas); }
.back-to-top:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.back-to-top-index {
  display: none;
  box-sizing: border-box;
  width: min(22rem, calc(100vw - 2.4rem));
  max-height: min(70vh, 32rem);
  overflow: auto;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
  background: Canvas;
  box-shadow: 0 8px 24px color-mix(in srgb, CanvasText 22%, transparent);
}
.back-to-top-index ol { margin: 0; padding-left: 1.2rem; }
.back-to-top-index li { margin: .25em 0; }
.back-to-top-index a { color: inherit; }
@media (hover: hover) {
  .back-to-top-wrap:hover .back-to-top-index { display: block; }
}
.clarification-option { cursor: pointer; border-radius: 10px; padding: .6rem .7rem; }
.clarification-option.is-selected { background: color-mix(in srgb, Highlight 12%, Canvas); }
.clarification-item.is-closed .clarification-option { cursor: default; }
/* A seven-column table needs 42em of floor, more than a phone can give. */
@media (max-width: 640px) { section { padding: 1rem; } .visualization { display: none; } th, td { min-width: 4.5em; } nav.report-index ol { columns: 1; } }
@media print { .skip-link, .back-to-top-wrap, script { display: none !important; } body { color: #000; background: #fff; } section { break-inside: avoid; border-color: #bbb; } .visualization-fallback { display: table; } }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; padding: .1em .3em; border-radius: 4px; background: color-mix(in srgb, CanvasText 8%, Canvas); }