/* ClaimReady, the whole stylesheet.
   Mobile first. Light and dark come from prefers-color-scheme. System fonts only, no webfont
   request, so the judge path makes zero external calls. No inline styles anywhere, every visual
   state is a class so a strict Content Security Policy can stay strict. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #16202b;
  --ink-soft: #55636f;
  --ink-faint: #7b8894;
  --line: #dde3e9;
  --line-soft: #eaeff3;
  --accent: #1f5fa8;
  --accent-ink: #ffffff;
  --agent: #6b3fa0;
  --agent-bg: #f1ebf9;
  --you: #1a6b52;
  --you-bg: #e6f4ee;
  --ok: #17734f;
  --ok-bg: #e6f4ee;
  --warn: #8a5300;
  --warn-bg: #fdf1de;
  --stop: #a32020;
  --stop-bg: #fbeaea;
  --flash: #fff3c9;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 6px 18px rgba(16, 32, 48, .05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #18202a;
    --surface-2: #1e2732;
    --ink: #e7edf3;
    --ink-soft: #a9b6c3;
    --ink-faint: #8394a3;
    --line: #2b3643;
    --line-soft: #232d38;
    --accent: #6aa6ea;
    --accent-ink: #0d141c;
    --agent: #c3a7ec;
    --agent-bg: #2a2338;
    --you: #7fd6b4;
    --you-bg: #16302a;
    --ok: #7fd6b4;
    --ok-bg: #16302a;
    --warn: #e9bd77;
    --warn-bg: #33270f;
    --stop: #f0a0a0;
    --stop-bg: #381e1e;
    --flash: #3d3720;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.25; margin: 0; }

a { color: var(--accent); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: .6rem 1rem;
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* Header and session chip */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 0 .75rem;
}

.brand { display: flex; align-items: center; gap: .6rem; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
}

.brand-text { display: flex; flex-direction: column; }
.brand-name { font-weight: 650; font-size: 1.05rem; letter-spacing: -.01em; }
.brand-sub { color: var(--ink-faint); font-size: .8rem; }

.session {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .8rem;
  max-width: 100%;
}

.session-line {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.session-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
}

.session-policy { font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.session-note { margin: .2rem 0 0; font-size: .72rem; color: var(--ink-faint); }

/* Revision counter. The one number that tells a real write from a hopeful sentence, so it is
   deliberately the largest thing in the header. */

.revision {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: .55rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .4rem .75rem;
  transition: background-color .5s ease, border-color .5s ease;
}

.revision-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.revision-number {
  grid-row: 1 / 3;
  grid-column: 2;
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.revision-note { font-size: .68rem; color: var(--ink-faint); max-inline-size: 22ch; }

.revision.is-bumped { background: var(--flash); border-color: var(--warn); }

/* The polite live region. Kept out of sight but never display none, or it stops being announced. */

.live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lede, the one sentence */

.lede {
  max-width: 1400px;
  margin: .5rem auto 1rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  max-inline-size: 62ch;
}

/* Status strip */

.strip {
  max-width: 1400px;
  margin: 0 auto 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .9rem;
}
.strip.is-on { border-left-color: var(--ok); }
.strip.is-off { border-left-color: var(--warn); }
.strip-warn { border-left-color: var(--warn); }

.strip-line { margin: 0; display: flex; gap: .55rem; align-items: baseline; }

.dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
  transform: translateY(-1px);
}
.dot.dot-ok { background: var(--ok); }
.dot.dot-warn { background: var(--warn); }

.strip-text { font-size: .9rem; font-weight: 550; }
.strip-detail { margin: .3rem 0 0 1.15rem; font-size: .8rem; color: var(--ink-soft); }
.strip-detail:empty { display: none; }

.strip-help { margin: .45rem 0 0 1.15rem; }
.strip-help summary { font-size: .8rem; color: var(--accent); cursor: pointer; }
.strip-help-body p { margin: .4rem 0; font-size: .82rem; color: var(--ink-soft); max-inline-size: 68ch; }

/* The published tool surface.
   Drawn in both states, so a visitor with no agent still learns what this page hands one. Open by
   itself only where there is room for the claim draft underneath, folded everywhere else, because
   the claim draft is the point and nine rows above it would bury it. The summary carries the count
   either way, so the fact survives the fold. */

.tools {
  max-width: 1400px;
  margin: 0 auto 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .9rem;
}

.tools-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  cursor: pointer;
}
.tools-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A summary laid out as a flex box loses the browser's own triangle, and without it nothing says
   the block opens. Drawn back explicitly rather than left to the default. */
.tools-summary::-webkit-details-marker { display: none; }
.tools-summary::before {
  content: "\25B8";
  color: var(--ink-faint);
  font-size: .72rem;
  flex: none;
}
.tools[open] .tools-summary::before { content: "\25BE"; }

.tools-title { font-size: .84rem; font-weight: 700; }

.tools-count {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
  min-width: 0;
}

.tools-body { margin-top: .5rem; }

.tools-note { margin: 0 0 .45rem; font-size: .76rem; line-height: 1.45; color: var(--ink-soft); max-inline-size: 92ch; }

.tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .tools-list { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
}

/* Three wide columns rather than four narrow ones. A grid row is as tall as its tallest cell, so a
   column too narrow for one name and its markers costs every cell in that row a second line. Three
   columns fit the longest row on one line and the whole block is shorter for it. */
@media (min-width: 1240px) {
  .tools-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tool {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: .4rem .5rem;
  min-width: 0;
}
.tool.is-live { border-left-color: var(--agent); }
.tool.is-conditional { border-left-style: dashed; }

.tool-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .4rem; }

.tool-name {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--agent);
  overflow-wrap: anywhere;
  min-width: 0;
}
.tool.is-idle .tool-name { color: var(--ink-soft); }

.tool-tag {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .05rem .32rem;
  border-radius: 99px;
  white-space: nowrap;
  flex: none;
}
.tag-read { background: var(--ok-bg); color: var(--ok); }
.tag-write { background: var(--warn-bg); color: var(--warn); }
.tag-untrusted { background: var(--stop-bg); color: var(--stop); }
.tag-live { background: var(--agent-bg); color: var(--agent); }
.tag-idle { background: var(--line-soft); color: var(--ink-faint); }

/* Clamped to two lines, for the reason the requirement reasons are clamped: nine sentences at full
   length is a wall of text sitting on top of the claim draft. An agent is handed the whole
   sentence, and more, because it reads the tool itself. */
.tool-purpose {
  margin: .2rem 0 0;
  font-size: .73rem;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.tool-when { margin: .2rem 0 0; font-size: .69rem; color: var(--warn); overflow-wrap: anywhere; }

.tools-foot { margin: .5rem 0 0; font-size: .74rem; color: var(--ink-soft); max-inline-size: 92ch; }

/* Demonstration controls. Small, out of the way, and never confused with the claim itself. */

.demo-bar {
  max-width: 1400px;
  margin: 0 auto 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .9rem;
}

.demo-control { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.demo-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.demo-select {
  font: inherit;
  font-size: .82rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .3rem .4rem;
  max-width: 100%;
}
.demo-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.demo-note {
  margin: 0;
  font-size: .72rem;
  color: var(--ink-faint);
  flex: 1 1 16rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* What the reset button just did. Empty until it is pressed, so it costs no space until it has
   something to say, and highlighted briefly so a press on an untouched draft is still visibly a
   press. */
.demo-flash {
  margin: 0;
  font-size: .72rem;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: .2rem .4rem;
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: background-color .5s ease, border-color .5s ease;
}
.demo-flash:empty { display: none; }
.demo-flash.is-flash { background: var(--flash); border-color: var(--warn); }

/* Layout */

main {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.col { display: grid; gap: 1rem; align-content: start; }

@media (min-width: 900px) {
  main { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .panel-ledger { grid-column: 1 / -1; }
}

@media (min-width: 1240px) {
  main { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1fr); }
  .panel-ledger { grid-column: auto; }
}

/* Panels */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .95rem 1rem 1rem;
  min-width: 0;
}

.panel-head { margin-bottom: .75rem; }
.panel h2 { font-size: .95rem; letter-spacing: .01em; }
.panel-sub { margin: .25rem 0 0; font-size: .78rem; color: var(--ink-soft); max-inline-size: 60ch; }
.panel-body { min-width: 0; }
.panel-foot { margin-top: .75rem; }

.empty {
  margin: 0;
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: .6rem .7rem;
}
.hidden { display: none; }

/* Claim fields */

.fields { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.field-row {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: .55rem .65rem;
  background: var(--surface-2);
  transition: background-color .5s ease;
  min-width: 0;
}

.field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .3rem;
}

.field-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); flex: 1 1 auto; min-width: 0; }

/* The pin. A human only control: there is no tool for it, which is exactly why it is here. */

.pin {
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  flex: none;
  padding: .12rem .45rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-faint);
  cursor: pointer;
}
.pin:hover { color: var(--ink); }
.pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-icon { font-size: .8rem; line-height: 1; }
.pin[aria-pressed="true"] { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.pin[disabled] { opacity: .5; cursor: not-allowed; }

.field-row.is-pinned { border-color: var(--warn); }

.field-hint {
  margin: .3rem 0 0;
  font-size: .72rem;
  color: var(--warn);
  overflow-wrap: anywhere;
}
.field-hint:empty { display: none; }

.claim-note {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-bg);
  border-radius: 6px;
  padding: .45rem .6rem;
}
.claim-note:empty { display: none; }

.field-value {
  margin: .35rem 0 0;
  font-size: .9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.field-row.is-missing .field-value { color: var(--ink-faint); font-weight: 500; font-style: italic; }

.field-control {
  width: 100%;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .35rem .45rem;
  min-width: 0;
}
textarea.field-control { resize: vertical; min-height: 3.4rem; line-height: 1.4; }
.field-control:focus-visible, .btn:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-row.is-changed { background: var(--flash); }

/* The reduced motion rules for the whole page live at the very bottom of this file, because a
   media query adds no specificity and only source order would settle a tie. */

.badge {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .12rem .4rem;
  border-radius: 99px;
  flex: none;
  white-space: nowrap;
}
.badge-agent { background: var(--agent-bg); color: var(--agent); }
.badge-you { background: var(--you-bg); color: var(--you); }
.badge-policy { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line); }
.badge-derived { background: var(--surface); color: var(--ink-faint); border: 1px dashed var(--line); }
.badge-none { background: var(--line-soft); color: var(--ink-faint); }

.optional-block { margin-top: .75rem; }
.optional-block summary {
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: .35rem 0;
}
.optional-note { margin: .1rem 0 .5rem; font-size: .74rem; color: var(--ink-faint); max-inline-size: 60ch; }
.optional-block .fields { margin-bottom: .25rem; }

.field-error {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--stop);
  background: var(--stop-bg);
  border-radius: 6px;
  padding: .45rem .6rem;
}
.field-error:empty { display: none; }

/* Requirements. The deterministic half of the loop: an answer changes on the draft and this list
   is worked out again, with the reason attached to whatever just arrived. */

.req-summary {
  margin: 0 0 .6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.req-summary.is-blocked {
  font-weight: 500;
  color: var(--warn);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: .45rem .6rem;
}

.reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

.req {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: .45rem .6rem;
  min-width: 0;
}
.req.is-open { border-left-color: var(--warn); }
.req.is-answered { border-left-color: var(--ok); }
.req.is-human { border-left-color: var(--you); }

.req-head { display: flex; align-items: baseline; gap: .4rem; }

.req-mark { font-size: .7rem; flex: none; color: var(--warn); }
.req.is-answered .req-mark { color: var(--ok); }
.req.is-human .req-mark { color: var(--you); }

.req-label { font-size: .84rem; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.req-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .1rem .35rem;
  border-radius: 99px;
  flex: none;
  white-space: nowrap;
  background: var(--warn-bg);
  color: var(--warn);
}
.req.is-answered .req-tag { background: var(--ok-bg); color: var(--ok); }
.req.is-human .req-tag { background: var(--you-bg); color: var(--you); }

/* Two lines normally, which is the whole clause for most rules. src/core appends the "asked for
   here because" clause at the end, so a settled row shows what the insurer asks for and a row that
   has just appeared runs on and shows why it appeared. Four causal sentences at full length on
   screen at once and the one that just arrived is lost among them. */
.req-why {
  margin: .25rem 0 0;
  font-size: .74rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.req-human-note {
  margin: .25rem 0 0;
  font-size: .74rem;
  color: var(--you);
  overflow-wrap: anywhere;
}

.req-new {
  margin: .3rem 0 0;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warn);
}

.req.is-new {
  border-color: var(--warn);
  border-left-color: var(--warn);
  background: var(--flash);
  animation: req-arrive .6s ease-out;
}
.req.is-new .req-why {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  color: var(--ink);
}

@keyframes req-arrive {
  from { opacity: .35; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Verdict blocks, shared by cover and band */

.verdict {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 6px;
  margin-bottom: .5rem;
}
.verdict-yes { background: var(--ok-bg); color: var(--ok); }
.verdict-no { background: var(--stop-bg); color: var(--stop); }
.verdict-info { background: var(--warn-bg); color: var(--warn); }

/* A yes that still depends on something the claim has not said is not drawn in the colour of a
   settled yes. The word says provisionally and the colour has to agree with the word. */
.verdict-yes.is-provisional { background: var(--warn-bg); color: var(--warn); }

.kv { margin: 0; display: grid; grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr); gap: .2rem .6rem; font-size: .82rem; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.amount { font-family: var(--mono); font-weight: 600; }

.lines { list-style: none; margin: .6rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: .2rem; }
.lines li { display: flex; justify-content: space-between; gap: .75rem; font-size: .8rem; }
.lines .part { color: var(--ink-soft); overflow-wrap: anywhere; }

.note { margin: .6rem 0 0; font-size: .74rem; color: var(--ink-faint); }
.source-tag { margin: .5rem 0 0; font-size: .72rem; color: var(--ink-faint); }

/* Buttons */

.btn {
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  border-radius: 8px;
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.btn + .reason + .btn, .btn + .btn { margin-top: .5rem; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-plain { background: transparent; border-style: dashed; color: var(--ink-soft); font-weight: 500; }
.btn-inline { width: auto; font-size: .8rem; padding: .32rem .7rem; }

.btn[disabled] { opacity: .55; cursor: not-allowed; }

.reason { margin: .35rem 0 .85rem; font-size: .76rem; color: var(--ink-soft); }
.reason.is-blocked { color: var(--warn); }

.filed { margin: 0 0 .85rem; font-size: .82rem; font-weight: 600; color: var(--ok); background: var(--ok-bg); border-radius: 6px; padding: .5rem .6rem; }
.filed:empty { display: none; }

/* Ledger */

.ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }

.ledger-item {
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--agent);
  border-radius: 8px;
  background: var(--surface-2);
  padding: .5rem .6rem;
  min-width: 0;
}
.ledger-item.is-error { border-left-color: var(--stop); }

/* A refusal is drawn as loudly as a success. It is the security beat of the demonstration, and a
   quiet refusal would read as a change that landed. */
.ledger-item.is-refused { border-left-color: var(--warn); background: var(--warn-bg); }

.ledger-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; }

.ledger-flag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1rem .35rem;
  border-radius: 99px;
  background: var(--stop-bg);
  color: var(--stop);
  white-space: nowrap;
  flex: none;
}

.ledger-refusal {
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: baseline;
  font-size: .74rem;
  min-width: 0;
}

.ledger-code {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--stop);
  overflow-wrap: anywhere;
}

.ledger-reason { color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.ledger-time { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.ledger-name { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--agent); overflow-wrap: anywhere; }

.ledger-args, .ledger-result {
  margin: .25rem 0 0;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.ledger-args { color: var(--ink-soft); }
.ledger-result { color: var(--ink); }
.ledger-item.is-error .ledger-result { color: var(--stop); }

/* Footer */

.site-footer {
  max-width: 1400px;
  margin: 1.5rem auto 0;
  font-size: .74rem;
  color: var(--ink-faint);
}
.site-footer p { margin: 0; }

/* Reduced motion. Last in the file on purpose: a media query adds no specificity, so these have to
   come after every rule they turn off. Nothing here removes information, only movement. */

@media (prefers-reduced-motion: reduce) {
  .field-row, .revision, .demo-flash { transition: none; }
  .req.is-new { animation: none; }
}