/*
  Components, ported from the prototype: page headers, buttons, status pills, the registration plate, key figures,
  row lists, tables, the settings form, sheets, the invoice paper and the rest. Colours, type and radii come from
  tokens.css.
*/

/* Page header and section header */
.vh {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-sub);
}

section {
  display: grid;
  gap: var(--section-gap);
  min-width: 0;
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sec-head .sub {
  margin: 0;
}

/* Buttons and links. The view-as banner's stop button is B2's markup and gets the small button look here. */
.btn,
.view-as-banner button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--fg);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.view-as-banner button:hover {
  border-color: var(--fg);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn.small,
.view-as-banner button {
  padding: 4px 9px;
  font-size: var(--fs-small);
}

.btn.ghost {
  border-color: transparent;
  background: none;
  color: var(--accent);
}

.btn.ghost:hover {
  background: var(--accent-soft);
}

.btn.danger {
  border-color: var(--bad);
  color: var(--bad);
}

.btn.danger:hover {
  background: var(--bad-soft);
}

.btn.big {
  padding: 10px 18px;
  font-size: var(--fs-body);
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Counts beside a navigation item */
.count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: center;
}

.count.quiet {
  background: var(--neutral-soft);
  color: var(--neutral);
}

.btn .count {
  margin-left: 2px;
}

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.pill.bad {
  background: var(--bad-soft);
  color: var(--bad);
}

.pill.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.pill.info {
  background: var(--info-soft);
  color: var(--info);
}

.pill.neutral {
  background: var(--neutral-soft);
  color: var(--neutral);
}

/* The Danish registration plate */
.plate {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 2px solid var(--plate-red);
  border-radius: 4px;
  background: var(--plate-bg);
  color: var(--plate-fg);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.plate .eu {
  display: flex;
  align-items: flex-end;
  padding: 0 3px 2px;
  background: var(--plate-eu);
  color: var(--plate-eu-fg);
  font-size: 8px;
  letter-spacing: .02em;
}

.plate .no {
  padding: 4px 7px 3px;
}

.plate.big {
  border-width: 3px;
  font-size: 22px;
}

.plate.big .eu {
  padding: 0 4px 3px;
  font-size: 10px;
}

.plate.big .no {
  padding: 6px 10px 5px;
}

.plate-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Key figures. No gap (the generic section rule would give one): the lines between the tiles meet. Each tile's rows
   start at the top, so a value stands level with its neighbours' whether or not they have a foot line. */
.stats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.stat {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-left: 1px solid var(--line);
}

/* A long code (the full git SHA) wraps inside its tile instead of running over the next one. */
.stat .mono {
  overflow-wrap: anywhere;
}

.stat:first-child {
  border-left: 0;
}

.stat .lbl {
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.stat .val {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat .foot {
  font-size: var(--fs-small);
  color: var(--muted);
}

.stat.hot .val {
  color: var(--warn);
}

/* Row lists */
.rows {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 16px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.row:first-child {
  border-top: 0;
}

.row:hover {
  background: var(--sunk);
}

.row .t {
  font-weight: 600;
}

.row .m {
  color: var(--muted);
  font-size: 13.5px;
}

.row .amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.row .amt small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 12.5px;
}

.row.static {
  cursor: default;
}

.row.static:hover {
  background: none;
}

.empty {
  padding: 16px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}

/* "How it works" strip */
.how {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.how div {
  display: grid;
  gap: 4px;
  align-content: start;
}

.how .k {
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.how p {
  font-size: var(--fs-sub);
  color: var(--muted);
}

/* Filter chips; also the language switch */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}

.chip.small {
  padding: 2px 9px;
  font-size: var(--fs-small);
}

.chip[aria-pressed="true"] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
  cursor: default;
}

.chip .c {
  margin-left: 4px;
  opacity: .7;
}

/* Tables. The wrapper is positioned so a visually hidden header (.sr, position: absolute) stays inside its scroll
   box; otherwise it escapes and widens the whole page on a phone. */
.tbl-wrap {
  position: relative;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tr:last-child td {
  border-bottom: 0;
}

td.r,
th.r {
  text-align: right;
}

td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tr.needs td:first-child {
  box-shadow: inset 3px 0 0 var(--warn);
}

tr.needs.badrow td:first-child {
  box-shadow: inset 3px 0 0 var(--bad);
}

tr.ask td:first-child {
  box-shadow: inset 3px 0 0 var(--info);
}

tr.clickable {
  cursor: pointer;
}

tr.clickable:hover td {
  background: var(--sunk);
}

tr.dimmed td {
  color: var(--muted);
}

.desc {
  font-weight: 500;
}

.raw {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-family: var(--f-mono);
}

.note {
  display: block;
  max-width: 34ch;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
}

.none {
  color: var(--muted);
}

/* A second line under a name: the address, say. */
.small-line {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

/* "(you)" after the person's own name. */
.self {
  margin-left: 4px;
  color: var(--muted);
}

.diff-up {
  color: var(--warn);
  font-weight: 600;
}

.diff-bad {
  color: var(--bad);
  font-weight: 600;
}

.ok-t {
  color: var(--ok);
  font-weight: 600;
}

.bad-t {
  color: var(--bad);
  font-weight: 600;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.flag {
  display: inline-block;
  margin-top: 3px;
  color: var(--bad);
  font-size: 12.5px;
  font-weight: 600;
}

/* Form controls */
select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea {
  max-width: 100%;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: .6;
  cursor: not-allowed;
}

input:is([type="text"], [type="email"], [type="number"], [type="search"], [type="date"]):disabled,
select:disabled,
textarea:disabled {
  background: var(--sunk);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--bad);
}

textarea {
  width: 100%;
  resize: vertical;
  line-height: var(--lh-body);
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

input.short {
  width: 110px;
}

input.wide {
  width: min(360px, 100%);
}

/* The settings form's addresses fill the control column, as in the prototype. */
input.full {
  width: 100%;
}

/* The settings form: label and help on the left, the control on the right */
.form {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.field {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 8px 24px;
  padding: 16px;
  border-top: 1px solid var(--line);
}

.field:first-child {
  border-top: 0;
}

.field .lbl {
  font-weight: 600;
}

.field .help {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13.5px;
}

.field .ctl {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

/* One setting's control inside a field: its options, its own address under them, its errors. */
.setting {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.field-error {
  display: block;
  color: var(--bad);
  font-size: var(--fs-small);
  font-weight: 500;
}

.radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* Only the choice itself: a number field inside the same kind of label keeps its own width (input.short). */
.radio input:is([type="radio"], [type="checkbox"]) {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

/* A choice that cannot be changed (a read-only view, an option not allowed) is drawn with the tokens: the browser's
   own disabled radio and check box are too faint to show which one is chosen (about 1.1:1). */
.radio input:is([type="radio"], [type="checkbox"]):disabled {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  border: 1.5px solid var(--line-strong);
  background: var(--sunk);
  opacity: 1;
}

.radio input[type="radio"]:disabled {
  border-radius: 50%;
}

.radio input[type="checkbox"]:disabled {
  border-radius: 3px;
}

.radio input:is([type="radio"], [type="checkbox"]):disabled:checked {
  border-color: var(--muted);
}

.radio input[type="radio"]:disabled:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.radio input[type="checkbox"]:disabled:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  border: solid var(--muted);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}

.radio.off {
  color: var(--muted);
  cursor: not-allowed;
}

.small-print {
  color: var(--muted);
  font-size: var(--fs-small);
}

/* Smaller forms: a stack of labelled fields */
.flds {
  display: grid;
  gap: 10px;
}

.fld {
  display: grid;
  gap: 4px;
}

.fld > label,
.fld > .fld-label {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fld-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.fld-row .fld {
  flex: 1 1 220px;
}

/* A row of four filters (the audit trail: trail, area, from, to) stays on one line on a desktop. */
.fld-row.filters .fld {
  flex-basis: 160px;
}

fieldset.fld {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.fld > legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* Notices */
.hint {
  padding: 8px 12px;
  border-radius: var(--r);
  background: var(--info-soft);
  color: var(--info);
  font-size: 13.5px;
}

.alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 14px;
  border-left: 4px solid var(--bad);
  border-radius: var(--r);
  background: var(--bad-soft);
  color: var(--fg);
  font-size: var(--fs-sub);
}

.alert p {
  max-width: 70ch;
}

.notice {
  padding: 10px 14px;
  border-left: 4px solid var(--ok);
  border-radius: var(--r);
  background: var(--ok-soft);
  color: var(--fg);
  font-size: var(--fs-sub);
}

/* The sticky bar at the bottom of the work area: a selection, or changes not yet saved */
.selbar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: env(safe-area-inset-bottom, 0px);
  padding: 10px 12px 10px 16px;
  border-radius: var(--r-card);
  background: var(--fg);
  color: var(--bg);
}

.selbar .btn.primary {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
}

.selbar .btn.ghost {
  color: var(--bg);
}

.selbar .btn.ghost:hover {
  background: transparent;
  text-decoration: underline;
}

/* Case view */
.back {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
}

.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.case-head .grow {
  flex: 1;
  min-width: 200px;
}

.meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 22px;
  margin: 0;
  padding: var(--card-pad-y) var(--card-pad-x);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.meta.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.meta dt {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.meta dd {
  min-width: 0;
  margin: 2px 0 0;
  font-size: var(--fs-sub);
  overflow-wrap: anywhere;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.log {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.log li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sub);
}

.log li:first-child {
  border-top: 0;
}

.log .d {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.assign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.matched {
  display: grid;
  gap: 3px;
  justify-items: start;
}

.matched small {
  color: var(--muted);
  font-size: 12.5px;
}

.desc-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.desc-btn:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Sheets (dialogs) over a scrim */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: calc(24px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--scrim);
}

.sheet {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 700px;
  padding: 20px;
  border-radius: var(--r-sheet);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-sheet);
}

.sheet.wide {
  max-width: 1080px;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.sheet .meta dd .pill {
  margin-left: 4px;
}

.head-acts {
  display: flex;
  align-items: center;
  gap: 4px;
}

.x {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.x:hover {
  background: var(--sunk);
  color: var(--fg);
}

.attach {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.att {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--sunk);
  font-size: var(--fs-small);
}

/* The invoice and the assessment report as paper */
.paper-wrap {
  overflow-x: auto;
}

/* On a phone the full paper is narrower than its table: it is at least as wide as what it holds, so the white paper
   scrolls with its content and no dark ink stands on the sheet beside it (D1). Its texts wrap as before. */
.paper-wrap > .paper {
  min-width: min-content;
}

.paper {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 13.5px;
}

.paper .top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.paper .sup {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
}

.paper .pm {
  color: var(--paper-muted);
  font-size: 12.5px;
}

.paper .doc {
  text-align: right;
}

.paper .doc .h {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .04em;
}

.paper table {
  min-width: 520px;
}

.paper th {
  background: var(--paper);
  color: var(--paper-muted);
  border-bottom: 1px solid var(--paper-line);
  font-size: 11px;
}

.paper td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--paper-line);
}

.paper .tot td {
  padding: 3px 10px;
  border-bottom: 0;
}

.paper mark {
  padding: 0 2px;
  border-radius: 2px;
  background: var(--hl);
  color: var(--paper-ink);
}

.paper tr.hit td {
  background: var(--hl);
}

.paper tr.dim td {
  color: var(--paper-muted);
}

.paper .sec {
  margin: 4px 0 -6px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.paper .missing {
  padding: 8px 10px;
  border: 1px dashed var(--paper-red);
  border-radius: 4px;
  font-size: var(--fs-small);
}

.paper .missing strong {
  color: var(--paper-red);
}

.paper .unread {
  margin-left: 4px;
  padding: 0 4px;
  border: 1px dashed var(--paper-red);
  border-radius: 3px;
  color: var(--paper-red);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.paper.compact {
  gap: 12px;
  padding: 16px 18px;
}

.paper.compact table {
  min-width: 400px;
}

.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

.legend mark {
  padding: 0 4px;
  border-radius: 2px;
  background: var(--hl);
  color: var(--paper-ink);
}

/* Side-by-side comparison */
.cmp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.pane {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pane .empty {
  background: var(--sunk);
  border-style: dashed;
}

.pane-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 10px;
}

.pane-h .k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.src {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--neutral);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.why {
  color: var(--muted);
  font-size: 13.5px;
}

.mail {
  display: grid;
  gap: 8px;
  padding: var(--card-pad-y) var(--card-pad-x);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font-size: var(--fs-sub);
}

.mail ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding-left: 20px;
}

/* A short confirmation at the bottom of the screen */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--fs-sub);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meta.five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(3) {
    border-left: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .how {
    grid-template-columns: 1fr;
  }

  .field {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .cmp {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .paper.compact {
    padding: 12px;
  }

  .paper.compact table {
    min-width: 0;
  }

  .paper.compact td,
  .paper.compact th {
    padding: 6px 5px;
  }

  .paper.compact .mono {
    font-size: 11.5px;
    overflow-wrap: anywhere;
  }

  .sheet {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .row .plate-cell {
    grid-column: 1 / -1;
  }

  .row .chev {
    display: none;
  }

  .meta,
  .meta.five {
    grid-template-columns: 1fr;
  }

  .stat .val {
    font-size: 26px;
  }
}

/* The supplement check's lists and shell (phase 1, B3a). */

/* A row that is a link (the overview's rows open a claim or link an invoice). */
a.row {
  text-decoration: none;
  color: inherit;
}

/* One width for the first column of a row list (a plate or a pill), so the rows of a list line up (F11); a wider
   plate than the token still fits. */
.rows .row {
  grid-template-columns: minmax(var(--row-lead), auto) minmax(0, 1fr) auto auto;
}

/* A page with an open sheet does not scroll behind it (the prototype did this with a script). */
body:has(.overlay) {
  overflow: hidden;
}

/* The toast stands above a claim's selection bar, which sits at the bottom too (F9). */
body:has(.selbar.lines) .toast {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

/* "Show more", "show all" and a button under a setting stand at the start of their column, not across it. */
.more,
.start {
  justify-self: start;
}

/* A plate in a choice (linking an invoice to a claim) keeps its width on a phone; the text beside it wraps instead. */
.radio .plate {
  flex: none;
}

@media (max-width: 520px) {
  .rows .row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* A claim's page and its sheets (phase 1, B3b). */

/* "Back to all claims" is a link drawn as the prototype's text button: underlined only under the pointer. */
a.back {
  text-decoration: none;
}

a.back:hover {
  text-decoration: underline;
}

/* The line table's check box column (the prototype's 34 px). */
th.col-select {
  width: 34px;
}

/* A claim's lines as cards on a phone (KC 31/10): the line table's own rows, one card per line, so each check box,
   link and button exists once and keeps its order. The markup keeps the table's roles, since rows drawn as blocks
   lose their table semantics in some browsers. An amount's label is its column header's text: hidden here, where
   the header row stands over the column, and shown on a phone, where the header row is not drawn. */
.claim-lines .cell-label {
  display: none;
}

@media (max-width: 560px) {
  /* The cards stand on the page; a line's stripe becomes its card's left edge. */
  .tbl-wrap.claim-lines {
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .claim-lines table {
    display: block;
    min-width: 0;
  }

  .claim-lines thead {
    display: none;
  }

  .claim-lines tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .claim-lines tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 12px;
    padding: var(--card-pad-y) var(--card-pad-x);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
  }

  .claim-lines tr.needs {
    box-shadow: inset 3px 0 0 var(--warn);
  }

  .claim-lines tr.needs.badrow {
    box-shadow: inset 3px 0 0 var(--bad);
  }

  .claim-lines tr.ask {
    box-shadow: inset 3px 0 0 var(--info);
  }

  .claim-lines td,
  .claim-lines tr.needs > td:first-child,
  .claim-lines tr.needs.badrow > td:first-child,
  .claim-lines tr.ask > td:first-child {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  /* The card's head: the check box, the part number (and the invoice's number for it) and the pill, which goes under
     a number too long to share the line. A line without a check box or buttons has no empty space for them. */
  .claim-lines td.line-select:not(:has(input)),
  .claim-lines td.line-actions:not(:has(button)) {
    display: none;
  }

  .claim-lines td.line-part {
    flex: 1 1 auto;
  }

  .claim-lines td.line-part .raw {
    white-space: nowrap;
  }

  .claim-lines td.line-status {
    margin-left: auto;
  }

  /* Under the head, in this order: the part with its note, the three amounts side by side, and the buttons. */
  .claim-lines td.line-desc,
  .claim-lines td.line-amount,
  .claim-lines td.line-actions {
    order: 1;
  }

  .claim-lines td.line-desc,
  .claim-lines td.line-actions {
    flex: 1 0 100%;
  }

  .claim-lines td.line-amount {
    flex: 1 1 0;
    text-align: left;
  }

  /* The list price less the deduction may take two lines under a narrow amount; balanced, it breaks before the minus. */
  .claim-lines td.line-amount .raw {
    white-space: normal;
    text-wrap: balance;
  }

  .claim-lines .note {
    max-width: none;
  }

  .claim-lines .cell-label {
    display: block;
    color: var(--muted);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .claim-lines .acts {
    justify-content: flex-start;
  }

  /* A thumb's target: on a phone a line's buttons are 44 px high, not the desktop's small ones. */
  .claim-lines .acts .btn {
    min-height: 44px;
  }
}

/* The report's totals: the amount column (the prototype's 130 px). */
.paper td.col-total {
  width: 130px;
}

/* A history with a date of another year ("25.10.2025", "25 Oct 2025") needs a wider date column than 52 px. */
.log.dated li {
  grid-template-columns: 84px minmax(0, 1fr);
}

/* A saved draft's text keeps its line breaks. */
.mail-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* An identifier (a claim number, a part number) is one word on the screen and never breaks at its hyphen (D4): in the
   claim's head, in the tables (which scroll sideways on a phone anyway) and on the full paper. The compact paper of
   side by side lets a part number break on purpose, so it fits. In running text the component puts the number in a
   span of its own with the nowrap class. */
.case-head .sub .mono,
.tbl-wrap td.mono,
.tbl-wrap td > .mono,
.paper:not(.compact) td.mono,
.nowrap {
  white-space: nowrap;
}