/*
  Rectify — the flag board.

  A reviewer reads this for an hour, so it is paper-light with a cool cast,
  not cream. One accent only: the value arriving from the document. The
  standard is the status quo and needs no colour, or every line would look
  like a fight when most of them agree.

  Money at stake is the exception. It gets its own weight, because that is
  the number a reviewer is actually deciding about.

  The register is the Cloudflare dashboard's own: near-white, hairline rules,
  no shadows, dashed technical guides, and orange held back for the document's
  value and the one action that matters.
*/
:root {
  --ground: #fff;
  --paper: #fff;
  --paper-2: #fafafa;

  --ink: #1d1d1d;
  --ink-2: #595959;
  --ink-3: #767676; /* 4.54:1 on white. #8c8c8c measured 3.36 and failed. */
  --ink-4: #b3b3b3;

  --rule: #e5e5e5;   /* decorative separation only, 1.26:1 */
  --edge: #949494;   /* a control's own edge, 3.03:1 */
  --rule-2: #f0f0f0;

  /* Cloudflare orange. The document's value, and the one action that matters.
     --doc is for fills and rings; --doc-ink is the text-safe shade. */
  --doc: #f6821f;
  --doc-ink: #9c4a00;
  --doc-soft: #fef6ef;
  --doc-edge: #f6d3b0;

  --ok: #3a7d5c;
  --ok-soft: #f1f7f4;
  --ok-edge: #cfe3d8;

  --warn: #8a6417;
  --warn-soft: #fbf7ee;
  --warn-edge: #e8dcc2;

  --lost: #9c3a3a;
  --lost-soft: #fbf1f1;
  --lost-edge: #e8cfcf;

  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 20px; --s-5: 32px;
  --t-2xs: 11px; --t-xs: 12.5px; --t-sm: 13.5px; --t-md: 15px; --t-lg: 18px;

  --fast: 110ms; --ease: cubic-bezier(.32,.72,0,1);
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--ui); font-size: var(--t-md); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--doc); outline-offset: 2px; border-radius: 3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- the drawing layer ---- */

/*
  The dashboard's signature: dashed technical guides with a small square at
  each intersection, a drawing layer under the content rather than decoration
  on top of it. Purely decorative, so it is hidden from assistive tech and
  takes no pointer events.
*/
.guides {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.guides__v {
  position: absolute;
  inset-block: 0;
  border-inline-start: 1px dashed var(--rule);
}
.guides__h {
  position: absolute;
  inset-inline: 0;
  border-block-start: 1px dashed var(--rule);
}
.guides__node {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--paper);
  border: 1px solid var(--ink-4);
  transform: translate(-50%, -50%);
}
@media (max-width: 900px) { .guides { display: none; } }

/* Content sits above the drawing. */
.top, .shell, .bar { position: relative; z-index: 1; }

/* ---- chrome ---- */
.top { background: var(--paper); border-bottom: 1px solid var(--rule); }
.top__in {
  max-width: 1140px; margin: 0 auto; padding: var(--s-3) clamp(16px,4vw,32px);
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
}
.brand { font-weight: 600; letter-spacing: -.02em; font-size: var(--t-lg); display: flex; align-items: center; gap: var(--s-2); }
.brand__mark { width: 20px; height: 20px; color: var(--ink); flex: none; }
.brand span { color: var(--ink-3); font-weight: 400; font-size: var(--t-xs); font-family: var(--mono); margin-left: var(--s-1); }

/* A segmented control on white, not a pill on grey. */
.tabs { display: flex; margin-left: auto; border: 1px solid var(--edge); border-radius: var(--r-md); overflow: hidden; }
.tabs button {
  border: 0; background: transparent; color: var(--ink-2);
  font-size: var(--t-xs); font-weight: 500; padding: 6px 14px;
}
.tabs button + button { border-inline-start: 1px solid var(--rule); }
.tabs button[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }

.shell { max-width: 1140px; margin: 0 auto; padding: var(--s-4) clamp(16px,4vw,32px) 104px; }

/* ---- invoice header ---- */

/* A headline in two tones, the way the dashboard sets them. The meta belongs
   under it, not beside its first line: baseline alignment against a two-tone
   display size puts it in the wrong place. */
.inv { display: block; margin-block-end: var(--s-5); }
.inv h1 {
  margin: 0 0 var(--s-3);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
}
.inv h1 .dim { color: var(--ink-3); display: block; font-weight: 500; }
.inv__meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }

/* ---- summary ---- */
.summary {
  position: sticky; top: 0; z-index: 5; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center;
}
.prog { flex: 1 1 200px; min-width: 0; }
.prog__l { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-xs); color: var(--ink-2); margin-bottom: 6px; }
.prog__l b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.prog__t { height: 5px; background: var(--rule-2); border-radius: 999px; overflow: hidden; }
.prog__f { height: 100%; background: var(--ink); border-radius: 999px; transition: width 260ms var(--ease); }
.exposure {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2);
  background: var(--warn-soft); border: 1px solid var(--warn-edge); padding: 5px 11px; border-radius: var(--r-md);
}
.exposure b { color: var(--warn); font-weight: 600; }

/* ---- a line ---- */
.line { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); margin-bottom: var(--s-3); overflow: hidden; }
.line[data-res]:not([data-res="pending"]) { border-color: var(--ok-edge); }
.line__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule-2); background: var(--paper-2);
}
.line__id { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-4); }
.line__desc { font-weight: 600; font-size: var(--t-sm); }
.line__qty { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.line__done { margin-left: auto; font-size: var(--t-xs); font-weight: 500; color: var(--ok); }

.match { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-2xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.match--exact { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-edge); }
.match--alias { color: var(--doc-ink); background: var(--doc-soft); border-color: var(--doc-edge); }
.match--semantic { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-edge); }
.match--none { color: var(--lost); background: var(--lost-soft); border-color: var(--lost-edge); }
.match__score { font-family: var(--mono); opacity: .7; }

.raw { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-4); padding: var(--s-2) var(--s-4) 0; white-space: pre-wrap; word-break: break-word; }

/* ---- flags ---- */
.flags { padding: var(--s-3) var(--s-4) 0; display: grid; gap: var(--s-2); }
.flag { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.flag--match { border-color: var(--rule-2); }
.flag__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 7px var(--s-3); background: var(--paper-2); }
.flag__field { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; }
.st { font-size: var(--t-2xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; }
.st--match { color: var(--ok); background: var(--ok-soft); }
.st--mismatch { color: var(--warn); background: var(--warn-soft); }
.st--unmatched { color: var(--lost); background: var(--lost-soft); }
.conf { margin-left: auto; font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-4); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-2); }
@media (max-width: 660px) { .pair { grid-template-columns: 1fr; } }
.side { background: var(--paper); padding: var(--s-2) var(--s-3); min-width: 0; }
.side__l { font-size: var(--t-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.side__v { font-family: var(--mono); font-size: var(--t-sm); word-break: break-word; white-space: pre-wrap; }
.side--doc { background: var(--doc-soft); }
.side--doc .side__l { color: var(--doc-ink); }
.side__none { color: var(--ink-4); font-style: italic; font-family: var(--ui); }
.side--won { background: var(--ok-soft); }
.side--won .side__l { color: var(--ok); }
.side--lost { opacity: .5; }
.side--lost .side__v { text-decoration: line-through; text-decoration-thickness: 1px; }
.why { font-size: var(--t-xs); color: var(--ink-2); padding: var(--s-2) var(--s-3); border-top: 1px solid var(--rule-2); background: var(--paper); }

/* ---- resolution ---- */

/* A hairline is right between surfaces and wrong on a control: a button's own
   edge is what says it is a button, and --rule measures 1.26:1 against white. */
.res { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--s-4); }
.act { border: 1px solid var(--edge); background: var(--paper); color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; padding: 7px 12px; border-radius: var(--r-md); transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.act:hover:not(:disabled) { border-color: var(--ink-4); color: var(--ink); }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act--doc { border-color: var(--doc-edge); color: var(--doc-ink); background: var(--doc-soft); }
.act--doc:hover:not(:disabled) { border-color: var(--doc); }
.act--undo { margin-left: auto; border-style: dashed; color: var(--ink-3); }
.hint { font-size: var(--t-xs); color: var(--ink-3); flex-basis: 100%; }
.hint b { color: var(--lost); font-weight: 600; }

/* Orange is the accent, so the primary action is the only orange fill. */
.act--primary {
  border-color: var(--doc);
  background: var(--doc);
  color: #1d1d1d;
  font-weight: 600;
}
.act--primary:hover:not(:disabled) { border-color: #e0741a; background: #e0741a; color: #1d1d1d; }

/* Editing is a different mode, so it gets its own shape rather than floating
   in the card. Inset to the same edge the flag cards sit on: a stray edge here
   reads as a bug. */
.editor {
  margin: var(--s-3) var(--s-4) var(--s-4);
  padding: var(--s-3);
  background: var(--doc-soft);
  border: 1px solid var(--doc-edge);
  border-radius: var(--r-md);
}

.editor__lead {
  margin: 0 0 var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-2);
  max-width: 64ch;
}

/* 10px within the group. The action row below sits 20px away, so the split
   between "the fields" and "what to do with them" carries without a rule. */
.editor__fields { display: grid; gap: 10px; }

.editor__row {
  display: grid;
  grid-template-columns: minmax(88px, 132px) 1fr;
  gap: var(--s-3);
  align-items: center;
}
@media (max-width: 560px) {
  .editor__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

.editor__row label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.editor__req {
  font-family: var(--ui);
  font-size: var(--t-2xs);
  color: var(--doc-ink);
  font-weight: 500;
}

.editor input {
  font-family: var(--mono);
  font-size: var(--t-sm);
  padding: 7px 10px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
  width: 100%;
}
.editor input::placeholder { color: var(--ink-4); }
.editor input:focus { outline: 2px solid var(--doc); outline-offset: -1px; border-color: transparent; }

/* Width says what the field is. A four-character price in a full-width box
   reads as a mistake. */
.editor input[data-w="xs"] { max-width: 10ch; }
.editor input[data-w="sm"] { max-width: 20ch; }
.editor input[data-w="full"] { max-width: 52ch; }

.editor__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: 20px;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--doc-edge);
}

/* ---- standard tab ---- */
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-4); margin-bottom: var(--s-3); }
.panel h2 { margin: 0 0 var(--s-1); font-size: var(--t-md); font-weight: 600; }
.panel p { margin: 0 0 var(--s-3); color: var(--ink-2); font-size: var(--t-sm); max-width: 68ch; }
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: var(--t-sm); }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
th { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
td { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
td.n { color: var(--ink); }
.empty { color: var(--ink-3); font-size: var(--t-sm); font-style: italic; }

/* ---- bottom bar ---- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 1px solid var(--rule); padding: var(--s-3) clamp(16px,4vw,32px); }
.bar__in { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.bar__n { font-size: var(--t-xs); color: var(--ink-3); flex: 1 1 auto; }
.bar__n b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cta { border: 1px solid var(--doc); background: var(--doc); color: #1d1d1d; font-size: var(--t-sm); font-weight: 600; padding: 9px 18px; border-radius: var(--r-md); }
.cta:hover:not(:disabled) { border-color: #e0741a; background: #e0741a; }
.cta:disabled { background: var(--rule-2); border-color: var(--rule); color: var(--ink-4); cursor: not-allowed; }

/* ---- agreements, folded ---- */
.agrees { border: 1px dashed var(--rule); border-radius: var(--r-md); background: var(--paper-2); }
.agrees summary {
  cursor: pointer; list-style: none; padding: 6px var(--s-3);
  font-size: var(--t-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--s-2);
}
.agrees summary::-webkit-details-marker { display: none; }
.agrees summary::before { content: "▸"; font-size: 10px; transition: transform var(--fast) var(--ease); }
.agrees[open] summary::before { transform: rotate(90deg); }
.agrees summary:hover { color: var(--ink-2); }
.agrees__list { padding: 0 var(--s-3) var(--s-2); display: grid; gap: 2px; }
.agrees__row {
  display: grid; grid-template-columns: minmax(90px,26%) 1fr; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); padding: 1px 0;
}
.agrees__row b { color: var(--ink-2); font-weight: 500; }

/* ---- publish confirmation ---- */
.cf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-block: var(--s-3); }
@media (max-width: 720px) { .cf { grid-template-columns: 1fr; } }

.cf__half {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  background: var(--paper-2);
}
/* Teaching the standard reaches past this invoice, so it is the half that
   carries weight. */
.cf__half--teach { border-color: var(--doc-edge); background: var(--doc-soft); }

.cf__half h3 { margin: 0 0 var(--s-1); font-size: var(--t-sm); font-weight: 600; }
.cf__half--teach h3 { color: var(--doc-ink); }
.cf__note { margin: 0 0 var(--s-3); font-size: var(--t-xs); color: var(--ink-3); max-width: 46ch; }

.cf__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  padding-block: 6px;
  border-block-start: 1px solid var(--rule-2);
  font-size: var(--t-xs);
  align-items: baseline;
}
.cf__row b { font-weight: 500; color: var(--ink); }
.cf__row span { font-family: var(--mono); font-size: var(--t-2xs); color: var(--ink-3); text-align: end; }

/* The publish outcome. Warn by default — something answered wrong — and green
   only when it actually landed. */
.cf__result {
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  border: 1px solid var(--warn-edge);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.cf__result--ok { background: var(--ok-soft); border-color: var(--ok-edge); }

.cf__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: 20px;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}

/* ---- keyboard triage ---- */

/* The line the keyboard is pointed at. A rail on the leading edge rather than
   a full outline: it has to be findable while scrolling without competing with
   the flags inside it. */
.line[data-cursor="true"] {
  border-color: var(--edge);
  box-shadow: inset 3px 0 0 var(--doc);
}
.line[data-cursor="true"] .line__head { background: var(--doc-soft); }

kbd {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border: 1px solid var(--edge);
  border-block-end-width: 2px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink-2);
  margin-inline-start: 6px;
  vertical-align: middle;
}
.act--doc kbd { border-color: var(--doc-edge); }

/* A key that cannot apply has to say so. Silence reads as a broken keyboard. */
.hint--blocked {
  color: var(--lost);
  background: var(--lost-soft);
  border: 1px solid var(--lost-edge);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  margin: 0;
}

/* ---- source badge + starting a review ---- */

.src {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.src--live { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-edge); }
.src--off { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-edge); }
.src--sample { color: var(--ink-2); background: var(--paper-2); border-color: var(--rule); }

.start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-block-end: var(--s-3);
  padding: var(--s-3);
  border: 1px dashed var(--edge);
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.start__lead { font-size: var(--t-sm); color: var(--ink-2); margin-inline-end: auto; }
.start__lead b { color: var(--ink); font-weight: 600; display: block; }
.start__file { cursor: pointer; }
/* The file input inside is sr-only, so its focus has to show on the label. */
.start__file:focus-within { outline: 2px solid var(--doc); outline-offset: 2px; }
.start__msg { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--mono); flex-basis: 100%; }
.start[data-msg=""] .start__msg { display: none; }

/* A file held over the strip. The dashed border is already the drop-zone
   idiom; it only has to answer. */
.start--drag {
  border-color: var(--doc);
  background: var(--doc-soft);
}
.start--drag .start__lead { color: var(--doc-ink); }

/* ---- extraction status ---- */

.extract h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: var(--t-lg);
  font-weight: 600;
}
.extract h2 b { font-family: var(--mono); font-weight: 500; font-size: var(--t-md); }

.extract__spin {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid var(--doc-edge);
  border-block-start-color: var(--doc);
  border-radius: 50%;
  animation: extract-spin 900ms linear infinite;
}
@keyframes extract-spin { to { transform: rotate(360deg); } }

.extract__steps {
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.extract__step {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.extract__step::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--ink-4);
  background: var(--paper);
  transform: translateY(-1px);
}
.extract__step--done { color: var(--ok); }
.extract__step--done::before { background: var(--ok); border-color: var(--ok); }
.extract__step--busy::before {
  border-color: var(--doc);
  animation: extract-pulse 1.4s ease-in-out infinite;
}
@keyframes extract-pulse {
  0%, 100% { background: var(--paper); }
  50% { background: var(--doc); }
}

.extract__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.extract__meta code { word-break: break-all; }

.extract__slow {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--warn-edge);
  border-radius: var(--r-md);
  background: var(--warn-soft);
  font-size: var(--t-xs);
  color: var(--warn);
  max-width: 62ch;
}

.extract__acts {
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule-2);
}

/* Motion here is only reassurance; a still page must still read as working. */
@media (prefers-reduced-motion: reduce) {
  .extract__spin, .extract__step--busy::before { animation: none; }
  .extract__step--busy::before { background: var(--doc-soft); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- publish receipt ---- */
.rc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: var(--s-3) 0 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.rc > div { background: var(--paper); padding: var(--s-3); }
.rc dt {
  font-size: var(--t-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.rc dd {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-md);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rc__now { color: var(--ok); font-weight: 600; }
.rc__delta { color: var(--doc-ink); font-weight: 600; }

/* An action styled as a button should not also read as a link. */
a.act { text-decoration: none; display: inline-flex; align-items: center; }