/* Six components, and every screen assembles from these. When a rule in screens.css
   starts wanting to be shared, it moves up here — that is what the split is for. */

/* 1. Panel. */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.panel > h2 { margin-bottom: var(--space-2); }

/* 2. Table. Hairlines, faint labels, figures right and tabular. */
table.grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
table.grid th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid td {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
}
table.grid tbody tr:hover td { background: var(--surface-raised); }
table.grid td.amount, table.grid th.amount, .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Wide tables scroll inside their own box; the page body never scrolls sideways. */
.table-scroll { overflow-x: auto; }

/* 3. Field card. Amber border means a person has to decide; settled ones step back. */
.field {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.field .label {
  display: block;
  padding-right: var(--space-6);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-muted);
  font-weight: 600;
}
.field .value {
  display: block;
  margin: 2px 0 0;
  padding-right: var(--space-6);
  font-size: var(--text-lg);
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.field.review { border-left: 3px solid var(--attention); }
.field .reason { margin: var(--space-1) 0 0; color: var(--attention-ink); font-size: var(--text-sm); }
.field.selected { border-color: var(--accent); background: var(--surface-raised); }
.field.corrected { border-left-color: var(--good); }
details.accepted .field { opacity: 0.62; }
/* Settled fields step back until she goes looking at one — and she can only correct what
   she can read, so attention brings the row back to full strength. */
details.accepted .field:hover,
details.accepted .field:focus-within,
details.accepted .field.selected { opacity: 1; }
details.accepted .field .value { font-size: var(--text-base); }
details.accepted summary {
  cursor: pointer;
  color: var(--ink-muted);
  margin: var(--space-3) 0 var(--space-2);
}

/* The request that did not arrive (§8.3). One region, above everything, because the
   failing request's own target is the thing that was about to be replaced. */
.request-error {
  margin: 0 auto var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--attention);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--attention-ink);
  font-weight: 500;
}

/* 4. Buttons. Three, and no fourth. */
button, .btn {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ink-strong);
  font-weight: 560;
  cursor: pointer;
}
button:hover, .btn:hover { filter: brightness(1.1); }
button.ghost, .btn.ghost, button.edit {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 400;
}
/* The edit control is a pencil, not a word: it sits on every field row now — flagged and
   auto-accepted alike — and eleven copies of the word "edit" down the side of the panel
   is noise the reviewer has to read past to find the value. */
button.edit {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1);
  line-height: 0;
  color: var(--ink-muted);
  opacity: 0.55;
}
button.edit svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.edit:hover, .field:focus-within button.edit, .field.selected button.edit {
  opacity: 1;
  color: var(--ink);
}
button.link, button.quiet, .btn.quiet {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-muted);
  text-decoration: underline;
  font-weight: 400;
}

/* 5. Figure block. A big tabular number and the population it came from. */
dl.figures, .figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin: var(--space-3) 0 0;
}
dl.figures dt, .figures dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--ink-faint);
}
dl.figures dd, .figures dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-figure);
  line-height: 1.1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
dl.figures dd.words { font-size: var(--text-base); line-height: 1.5; color: var(--ink); }
dl.figures dd .of, .figures .of {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: normal;
}

/* 6. Learned banner. The loudest thing in the product, because it is the sentence the
   product is about. */
.learned, .save-result .learned {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.learned b, .learned strong { color: var(--ink-strong); }

/* Notices and badges, shared by every screen. The four meanings and nothing else. */
.notice { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); margin: 0 0 var(--space-4); }
.notice.ok, .notice.error { border-left: 3px solid var(--line); }
.notice.ok { background: var(--good-bg); border-left-color: var(--good); }
.notice.error, .error { background: var(--bad-bg); border-left-color: var(--bad); color: var(--bad); }
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  background: var(--surface-raised);
  color: var(--ink-muted);
}
.badge.pending { background: var(--surface-raised); color: var(--ink-muted); }
.badge.claimed { background: var(--accent-bg); color: var(--accent-ink); }
.badge.done, .badge.ok { background: var(--good-bg); color: var(--good); }
.badge.dead { background: var(--bad-bg); color: var(--bad); }
.badge.warn { background: var(--attention-bg); color: var(--attention-ink); }
.caveat { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--attention-bg); color: var(--attention-ink); }
.low { color: var(--attention-ink); font-weight: 600; }