/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — TRADE FINANCE ANALYSIS DESK (PHASE 10)

   Every selector in this file is prefixed `.mdp-tf-`. Nothing here reaches a class any other
   screen uses — `instruments.css` and its `.mdp-ins-` vocabulary are untouched and still style
   the two superseded pages on disk — so removing this file and re-pointing two `load:` thunks
   removes this phase's presentation entirely (Rule 2, Rule 3).

   The page frame, the panels, the masthead, the two-column split, the empty and error states
   and the skeletons all come from `desk.css` unchanged. This sheet styles only what a trade
   finance analysis record adds on top of them.

   ── COLOUR COMES FROM TOKENS, ALWAYS ──────────────────────────────────────────
   No literal colour appears below. Every value is a `--mdp-*` token, so light, dark and any
   future theme are correct here for free — and a finding that reads as "discrepancy" in one
   theme cannot read as "complying" in another.

   ── LOGICAL PROPERTIES, ALWAYS ────────────────────────────────────────────────
   `inline-size`, `inset-inline-start`, `padding-inline`, `border-inline-start`, `margin-block`.
   There is not one `[dir='rtl']` rule in this file and there must never be: Arabic mirrors
   because the geometry is written in reading order rather than in left and right. The two
   directional glyphs on the desk — the recommended-action arrow and the record-index chevron —
   are flipped by the icon layer's own `flipRtl`, not here.

   ── WHAT THIS STYLESHEET IS ACTUALLY FOR ──────────────────────────────────────
   Four things, in this order of importance.

   1. MAKING THE ANALYSIS DOMINATE. The heaviest elements on the page are the conclusion, the
      findings and the recommended action — prose at reading size, on the page surface, with
      the room to be read. §5 asks that the analysis dominate and that decorative dashboards
      and generic AI visuals stay out; the weight below is how that is enforced.

   2. MAKING A DISCREPANCY VISIBLE WITHOUT MAKING THE PAGE AN ALARM. A discrepant finding
      carries a coloured inline edge, a coloured status mark with its own glyph and its own
      word, and a place in the discrepancy register. It does NOT tint its whole card, and the
      panel around it does not change colour. An examination that is mostly complying with two
      discrepancies has to READ as mostly complying with two discrepancies, or a desk that uses
      this screen daily stops seeing the marks at all. §3 asks for exactly that balance.

   3. KEEPING RULE, FACT, FINDING AND ADVICE SEPARABLE AT A GLANCE. Four distinct treatments
      that never borrow each other's: the rule basis is a bordered informational region, the
      instrument's terms are a plain record grid, findings are edged articles, and the
      recommended action is the one accent-fenced block on the page. A reader can tell what
      kind of statement they are looking at before reading a word of it.

   4. NOT OVERFLOWING. `min-inline-size: 0` on every grid and flex item that holds text, and
      `overflow-wrap: anywhere` on the fields that carry engine prose. A URDG article reference,
      an eighty-word onerous clause, an Arabic beneficiary name and a long discrepancy
      explanation must wrap, never widen the page — horizontal scroll on an examination record
      is the defect §9 tests for at three widths in two directions.

   ── AND WHAT IT IS DELIBERATELY NOT ───────────────────────────────────────────
   No charts, no gauges, no donuts, no progress bars, no percentage of a total, no gradient
   that implies momentum and no decorative KPI tiles. The four counts on an examination are
   typographic because each one is a single integer the engine returned, and a shape drawn
   around a single integer is decoration pretending to be analysis. The procedure rail is not a
   progress bar either: nothing on this desk is ever marked "done", because whether an
   instrument was read and whether a presentation complies are findings, not steps.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   1 — SHARED TEXT
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-prose {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-label {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-tf-note {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

/*
   ABSENCE, DRAWN AS ABSENCE.

   A value the engine did not establish is set in the muted colour and in italics, so a reader
   skimming a record can see at a glance which lines are the instrument's and which are the
   platform saying it could not read one. It is never drawn as a warning: "not stated in the
   document" is an accurate professional answer, not a fault.
*/
.mdp-tf-absent {
  font-style: italic;
  color: var(--mdp-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   2 — THE PROCEDURE RAIL

   A map of the work, full width, above the record. Horizontally scrollable on a narrow screen
   rather than wrapped into an unreadable stack of seven or eight lines — and the scroll is on
   the rail alone, never on the page.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-proc-wrap {
  min-inline-size: 0;
  padding-block: var(--mdp-sp-3);
  padding-inline: var(--mdp-sp-4);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
}

.mdp-tf-proc {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--mdp-sp-1) var(--mdp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-tf-proc-step {
  min-inline-size: 0;
  display: flex;
}

.mdp-tf-proc-cell {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  padding-block: var(--mdp-sp-1);
  padding-inline: var(--mdp-sp-2);
  border: 1px solid transparent;
  border-radius: var(--mdp-r-md);
  background: none;
  font: inherit;
  text-align: start;
  color: var(--mdp-text-muted);
}

/* The rail's own buttons: real controls, so they get a real hover, a real focus ring and a
   real pointer. A stage with nowhere to go is a `<span>` and gets none of them. */
button.mdp-tf-proc-cell {
  cursor: pointer;
  transition: background var(--mdp-dur-fast) var(--mdp-ease),
              border-color var(--mdp-dur-fast) var(--mdp-ease);
}

button.mdp-tf-proc-cell:hover {
  background: var(--mdp-surface-2);
  border-color: var(--mdp-border);
  color: var(--mdp-text);
}

button.mdp-tf-proc-cell:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
}

.mdp-tf-proc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
}

.mdp-tf-proc-n {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
}

.mdp-tf-proc-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.mdp-tf-proc-label {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  line-height: var(--mdp-lh-snug);
  overflow-wrap: anywhere;
}

.mdp-tf-proc-here {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-brand);
}

/* The stage in hand. The ONLY stage that carries weight — no stage is ever marked complete. */
.mdp-tf-proc-step[data-state='here'] .mdp-tf-proc-cell {
  background: var(--mdp-brand-soft);
  border-color: var(--mdp-brand-border);
  color: var(--mdp-text-strong);
}

.mdp-tf-proc-step[data-state='here'] .mdp-tf-proc-mark {
  background: var(--mdp-brand);
  border-color: var(--mdp-brand);
}

.mdp-tf-proc-step[data-state='here'] .mdp-tf-proc-n {
  color: var(--mdp-brand-contrast);
}

.mdp-tf-proc-step[data-state='ready'] .mdp-tf-proc-cell {
  color: var(--mdp-text);
}

.mdp-tf-proc-step[data-state='idle'] .mdp-tf-proc-cell {
  color: var(--mdp-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   3 — STATUS MARKS AND CHIPS

   Colour is never the only carrier. Every mark is glyph + word, so the record survives
   monochrome printing, forced colours and a reader who cannot separate red from green.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  flex: none;
  padding-block: 0.125rem;
  padding-inline: var(--mdp-sp-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-muted);
  /* Deliberately NOT `nowrap`: the Arabic for "unable to determine" is half again the length
     of the English, and a pill that refuses to wrap is a pill that widens the page. */
  min-inline-size: 0;
}

.mdp-tf-mark[data-strong='true'] {
  padding-block: var(--mdp-sp-1);
  padding-inline: var(--mdp-sp-3);
  font-size: var(--mdp-fs-xs);
}

.mdp-tf-mark-glyph {
  display: inline-flex;
  flex: none;
}

/* The word beside the glyph. It wraps rather than clips, because the Arabic for
   "unable to determine" is longer than the English and a clipped status is a wrong status. */
.mdp-tf-mark-text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-mark[data-tone='success'] {
  background: var(--mdp-success-soft);
  border-color: var(--mdp-success);
  color: var(--mdp-success);
}

.mdp-tf-mark[data-tone='danger'] {
  background: var(--mdp-danger-soft);
  border-color: var(--mdp-danger);
  color: var(--mdp-danger);
}

.mdp-tf-mark[data-tone='warn'] {
  background: var(--mdp-warn-soft);
  border-color: var(--mdp-warn);
  color: var(--mdp-warn);
}

.mdp-tf-mark[data-tone='info'] {
  background: var(--mdp-info-soft);
  border-color: var(--mdp-info);
  color: var(--mdp-info);
}

.mdp-tf-mark[data-tone='brand'] {
  background: var(--mdp-brand-soft);
  border-color: var(--mdp-brand-border);
  color: var(--mdp-brand);
}

.mdp-tf-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  min-inline-size: 0;
  padding-block: 0.125rem;
  padding-inline: var(--mdp-sp-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-tf-chip-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   4 — THE EXECUTIVE CONCLUSION

   The first thing on the record and the heaviest block above the findings.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-conc {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-conc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-conc-heading {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  min-inline-size: 0;
}

.mdp-tf-conc-eyebrow {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-tf-conc-title {
  margin: 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

/* The engine's summary, at reading size. The largest body text on the page, deliberately. */
.mdp-tf-conc-summary {
  margin: 0;
  font-size: var(--mdp-fs-base);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-conc-reasoning {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  min-inline-size: 0;
  padding-inline-start: var(--mdp-sp-3);
  border-inline-start: 2px solid var(--mdp-border);
}

/* ══════════════════════════════════════════════════════════════════════════════
   5 — THE RULE BASIS

   ONE TREATMENT FOR BOTH STATES. "Unable to determine applicable rules." is drawn in the same
   informational weight as a determined basis, not as a warning: an instrument that incorporates
   no uniform rules is a perfectly ordinary instrument, and colouring the sentence amber would
   teach a reader it is defective.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-rules {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
}

.mdp-tf-rules-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-rules-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-muted);
}

.mdp-tf-rules[data-determined='true'] .mdp-tf-rules-icon {
  color: var(--mdp-brand);
}

.mdp-tf-rules-heading {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.mdp-tf-rules-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

.mdp-tf-rules-state {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

/* The rulebooks the engine READ FROM THE INSTRUMENT. Never the candidates it retrieved. */
.mdp-tf-rulebooks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-tf-rulebook {
  padding-block: var(--mdp-sp-1);
  padding-inline: var(--mdp-sp-3);
  border: 1px solid var(--mdp-brand-border);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-brand-soft);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  font-family: var(--mdp-font-mono);
  color: var(--mdp-brand);
  overflow-wrap: anywhere;
}

.mdp-tf-rules-basis {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

/* The engine's own sentence, printed exactly and given weight because it is a finding. */
.mdp-tf-rules-undetermined {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-rules-note {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   6 — THE INSTRUMENT'S OWN TERMS

   A record grid, not a dashboard of cards. Every term the engine reported is here, including
   the ones the instrument is silent on.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-structure {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-6);
  min-inline-size: 0;
}

.mdp-tf-factgroup {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-factgroup-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding-block-end: var(--mdp-sp-2);
  border-block-end: 1px solid var(--mdp-border-subtle);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
  min-inline-size: 0;
}

.mdp-tf-factgroup-icon {
  display: inline-flex;
  flex: none;
}

.mdp-tf-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-tf-fact {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  padding-inline-start: var(--mdp-sp-3);
  border-inline-start: 2px solid var(--mdp-border-subtle);
}

.mdp-tf-fact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-fact-label {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-fact-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-fact-points {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  margin: 0;
  padding-inline-start: var(--mdp-sp-4);
  min-inline-size: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
}

.mdp-tf-fact-points li {
  overflow-wrap: anywhere;
}

.mdp-tf-fact-silent {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-style: italic;
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

/* A term the engine could not determine keeps its edge quiet; a term it raised does not. */
.mdp-tf-fact[data-status='issue'] {
  border-inline-start-color: var(--mdp-warn);
}

.mdp-tf-fact[data-status='discrepancy'],
.mdp-tf-fact[data-status='discrepant'] {
  border-inline-start-color: var(--mdp-danger);
}

.mdp-tf-fact[data-status='complying'],
.mdp-tf-fact[data-status='ok'] {
  border-inline-start-color: var(--mdp-success);
}

/* ══════════════════════════════════════════════════════════════════════════════
   7 — FINDINGS

   THE CENTRE OF AN EXAMINATION RECORD. One article per document, edged by its status, with the
   seven fields set as a definition list so requirement, finding, reference, reasoning and
   action stay individually addressable — a customer disputing a discrepancy with their bank
   needs to point at the requirement and the reasoning separately.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-findings {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-tf-findings-cell {
  min-inline-size: 0;
}

.mdp-tf-finding {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border-subtle);
  border-inline-start: 3px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
}

/*
   THE ONLY PLACE A STATUS CHANGES A CARD.

   The edge, not the fill. A tinted discrepancy card beside a white complying one turns a
   twelve-document presentation into a warning screen; the edge marks it just as unambiguously
   and lets the record still read as a record.
*/
.mdp-tf-finding[data-tone='success'] { border-inline-start-color: var(--mdp-success); }
.mdp-tf-finding[data-tone='danger'] { border-inline-start-color: var(--mdp-danger); }
.mdp-tf-finding[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }
.mdp-tf-finding[data-tone='info'] { border-inline-start-color: var(--mdp-info); }
.mdp-tf-finding[data-tone='neutral'] { border-inline-start-color: var(--mdp-neutral); }

/* A discrepancy gets one extra degree of weight and no more: a faint tint behind the card,
   enough to find it while scrolling, not enough to shout. */
.mdp-tf-finding[data-status='discrepancy'] {
  background: var(--mdp-danger-soft);
}

.mdp-tf-finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-finding-id {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-finding-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
}

.mdp-tf-finding-naming {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.mdp-tf-finding-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-tf-finding-kind {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

/* ── The fields ────────────────────────────────────────────────────────────── */

.mdp-tf-fields {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  margin: 0;
  min-inline-size: 0;
}

.mdp-tf-field {
  display: contents;
}

.mdp-tf-field-label {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-field-value {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* The rule reference is set in the mono face: an article number is a citation, and a citation
   that looks like prose is easier to misread and harder to check. */
.mdp-tf-field[data-kind='reference'] .mdp-tf-field-value {
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

/* What to do about this document carries the weight of an instruction. */
.mdp-tf-field[data-kind='action'] .mdp-tf-field-value {
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
}

.mdp-tf-fields[data-compact='true'] {
  gap: var(--mdp-sp-1) var(--mdp-sp-3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   8 — RISKS AND ISSUES
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-issues {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-tf-issues-cell {
  min-inline-size: 0;
}

.mdp-tf-issue {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border-subtle);
  border-inline-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-md);
}

.mdp-tf-issue[data-tone='danger'] { border-inline-start-color: var(--mdp-danger); }
.mdp-tf-issue[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }

.mdp-tf-issue-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-issue-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-issue-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-sev,
.mdp-tf-cat {
  padding-block: 0.125rem;
  padding-inline: var(--mdp-sp-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-muted);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-sev[data-severity='high'] {
  background: var(--mdp-danger-soft);
  border-color: var(--mdp-danger);
  color: var(--mdp-danger);
}

.mdp-tf-sev[data-severity='medium'] {
  background: var(--mdp-warn-soft);
  border-color: var(--mdp-warn);
  color: var(--mdp-warn);
}

.mdp-tf-issue-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

/*
   THE CLAUSE, AS WRITTEN.

   Verbatim, unabridged, and visually separated from the analysis of it so the two can never be
   confused. A customer arguing an onerous condition with their bank needs the wording, not a
   paraphrase — so it wraps, it is never clipped, and it never gets a line clamp.
*/
.mdp-tf-clause {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  margin: 0;
  min-inline-size: 0;
  padding: var(--mdp-sp-3);
  background: var(--mdp-surface-inset);
  border-inline-start: 2px solid var(--mdp-border-strong);
  border-radius: var(--mdp-r-sm);
}

.mdp-tf-clause-label {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-tf-clause-text {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-family: var(--mdp-font-mono);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   9 — REGISTERS AND TALLIES
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-registers {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-5);
  min-inline-size: 0;
}

.mdp-tf-register {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-register-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  min-inline-size: 0;
}

.mdp-tf-register-icon {
  display: inline-flex;
  flex: none;
}

.mdp-tf-register-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-inline-size: 1.25rem;
  padding-inline: var(--mdp-sp-1);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
}

.mdp-tf-register-list {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding-inline-start: var(--mdp-sp-5);
  min-inline-size: 0;
}

.mdp-tf-register-item {
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-register-note {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-tf-register[data-tone='danger'] .mdp-tf-register-title { color: var(--mdp-danger); }
.mdp-tf-register[data-tone='danger'] .mdp-tf-register-count {
  background: var(--mdp-danger-soft);
  color: var(--mdp-danger);
}

.mdp-tf-register[data-tone='warn'] .mdp-tf-register-title { color: var(--mdp-warn); }
.mdp-tf-register[data-tone='warn'] .mdp-tf-register-count {
  background: var(--mdp-warn-soft);
  color: var(--mdp-warn);
}

/* ── The tally ─────────────────────────────────────────────────────────────── */

/*
   FOUR INTEGERS THE ENGINE COUNTED, TYPOGRAPHICALLY.

   No bar, no ring, no share of a whole. Each is a single stored count; a shape drawn around it
   would be inventing a relationship the engine never reported.
*/
.mdp-tf-tally {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-tally-cell {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
  padding: var(--mdp-sp-3);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
}

.mdp-tf-tally-value {
  font-size: var(--mdp-fs-xl);
  font-weight: var(--mdp-fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--mdp-lh-tight);
  color: var(--mdp-text-strong);
}

.mdp-tf-tally-none {
  font-size: var(--mdp-fs-sm);
  font-style: italic;
  color: var(--mdp-text-faint);
}

.mdp-tf-tally-label {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-tf-tally-cell[data-tone='success'] .mdp-tf-tally-value { color: var(--mdp-success); }
.mdp-tf-tally-cell[data-tone='danger'] .mdp-tf-tally-value { color: var(--mdp-danger); }
.mdp-tf-tally-cell[data-tone='warn'] .mdp-tf-tally-value { color: var(--mdp-warn); }

/* ══════════════════════════════════════════════════════════════════════════════
   10 — THE RECOMMENDED ACTION

   The one accent-fenced block on the page, and the last thing in the record. It carries no
   control: this desk recommends and never acts.
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-action {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  padding: var(--mdp-sp-5);
  background: var(--mdp-accent-soft);
  border: 1px solid var(--mdp-accent-border);
  border-inline-start: 3px solid var(--mdp-accent);
  border-radius: var(--mdp-r-lg);
}

.mdp-tf-action-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-action-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-accent);
}

.mdp-tf-action-title {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-accent);
}

.mdp-tf-action-body {
  margin: 0;
  font-size: var(--mdp-fs-base);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════════════════
   11 — THE EVIDENCE LEDGER
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-evidence {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-evlist {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  overflow: hidden;
}

.mdp-tf-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding-block: var(--mdp-sp-3);
  padding-inline: var(--mdp-sp-4);
  border-block-end: 1px solid var(--mdp-border-subtle);
}

.mdp-tf-ev:last-child {
  border-block-end: none;
}

.mdp-tf-ev-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-faint);
}

.mdp-tf-ev-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.mdp-tf-ev-name {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-ev-role {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-tf-ev-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-ev-size {
  font-size: var(--mdp-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
}

.mdp-tf-ev-note {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  padding-block: 0.125rem;
  padding-inline: var(--mdp-sp-2);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-2);
  color: var(--mdp-text-muted);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-evfoot {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   12 — NOTICES, FAILURE, WORK IN FLIGHT AND THE STANDING LINE
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
}

.mdp-tf-notice-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-muted);
}

.mdp-tf-notice-text {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.mdp-tf-notice-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-tf-notice-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-notice[data-tone='warn'] {
  background: var(--mdp-warn-soft);
  border-color: var(--mdp-warn);
}

.mdp-tf-notice[data-tone='warn'] .mdp-tf-notice-icon { color: var(--mdp-warn); }

.mdp-tf-notice[data-tone='danger'] {
  background: var(--mdp-danger-soft);
  border-color: var(--mdp-danger);
}

.mdp-tf-notice[data-tone='danger'] .mdp-tf-notice-icon { color: var(--mdp-danger); }

.mdp-tf-notice[data-tone='info'] {
  background: var(--mdp-info-soft);
  border-color: var(--mdp-info);
}

.mdp-tf-notice[data-tone='info'] .mdp-tf-notice-icon { color: var(--mdp-info); }

/* ── A run that produced nothing ───────────────────────────────────────────── */

/*
   THE ONE PLACE ON THE DESK THAT IS ALLOWED TO LOOK LIKE A FAILURE.

   It replaces the record entirely — there is no heading above it and no empty region below it,
   because a failed run produced nothing at all and a page that framed it as a report would be
   implying otherwise.
*/
.mdp-tf-fail {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding: var(--mdp-sp-5);
  background: var(--mdp-danger-soft);
  border: 1px solid var(--mdp-danger);
  border-radius: var(--mdp-r-lg);
}

.mdp-tf-fail-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-fail-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-danger);
}

.mdp-tf-fail-title {
  margin: 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-fail-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-fail-hint {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-tf-fail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

/* ── Work in flight ────────────────────────────────────────────────────────── */

.mdp-tf-working {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-working-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-working-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-brand);
}

.mdp-tf-working-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

.mdp-tf-working-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-tf-working-lines {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

/* ── The standing line ─────────────────────────────────────────────────────── */

.mdp-tf-standing {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  margin: 0;
  min-inline-size: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-tf-standing-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 0.125rem;
  color: var(--mdp-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   13 — THE UPLOAD DOCK
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-docks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-tf-dock {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
}

.mdp-tf-dock-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-dock-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-tf-dock-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-tf-dock-count {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
}

/*
   THE DROP TARGET.

   Dashed, because a dashed edge is the one shape a customer already reads as "put something
   here". The native file input inside it is a real, visible, focusable control: the drag
   gesture is an addition, never the only way in, so the dock works from the keyboard and on a
   touch screen with no pointer at all.
*/
.mdp-tf-dock-drop {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface);
  border: 1px dashed var(--mdp-border-strong);
  border-radius: var(--mdp-r-md);
  transition: background var(--mdp-dur-fast) var(--mdp-ease),
              border-color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-tf-dock-drop[data-drag='true'] {
  background: var(--mdp-brand-soft);
  border-color: var(--mdp-brand);
}

.mdp-tf-dock-drop[data-full='true'] {
  border-style: solid;
  opacity: 0.72;
}

.mdp-tf-dock-dropnote {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-faint);
}

.mdp-tf-docs {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-tf-doc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  padding-block: var(--mdp-sp-2);
  padding-inline: var(--mdp-sp-3);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
}

.mdp-tf-doc-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-faint);
}

.mdp-tf-doc-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 10rem;
  min-inline-size: 0;
}

.mdp-tf-doc-name {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
  font-size: var(--mdp-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
}

/* The customer's own order, stated: it is the order the engine reads the documents in and the
   order the findings come back in. */
.mdp-tf-doc-n {
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-tf-dock-empty {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-style: italic;
  color: var(--mdp-text-faint);
}

.mdp-tf-dock-busy {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-brand);
}

/* ══════════════════════════════════════════════════════════════════════════════
   14 — THE SETUP COLUMN AND THE RECORD INDEX
   ══════════════════════════════════════════════════════════════════════════════ */

.mdp-tf-setup {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-6);
  min-inline-size: 0;
}

.mdp-tf-stepblock {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-tf-steplabel {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  min-inline-size: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-tf-stepn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-brand-soft);
  border: 1px solid var(--mdp-brand-border);
  font-size: var(--mdp-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-brand);
}

.mdp-tf-typenote {
  min-inline-size: 0;
}

.mdp-tf-result {
  min-inline-size: 0;
}

.mdp-tf-cross {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--mdp-sp-5);
  min-inline-size: 0;
}

.mdp-tf-principles {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-tf-principle {
  position: relative;
  padding-inline-start: var(--mdp-sp-4);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-tf-principle::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.5em;
  inline-size: 0.3125rem;
  block-size: 0.3125rem;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-border-strong);
}

/* ── The examples list ─────────────────────────────────────────────────────── */

.mdp-tf-kinds {
  min-inline-size: 0;
  padding: var(--mdp-sp-3);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
}

.mdp-tf-kinds-summary {
  cursor: pointer;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}

.mdp-tf-kinds-summary:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
  border-radius: var(--mdp-r-xs);
}

.mdp-tf-kinds-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--mdp-sp-1) var(--mdp-sp-4);
  margin-block: var(--mdp-sp-3) var(--mdp-sp-2);
  padding-inline-start: var(--mdp-sp-5);
  min-inline-size: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-tf-kinds-list li {
  overflow-wrap: anywhere;
}

/* ── The record index ──────────────────────────────────────────────────────── */

.mdp-tf-recs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  overflow: hidden;
}

.mdp-tf-rec {
  min-inline-size: 0;
  border-block-end: 1px solid var(--mdp-border-subtle);
}

.mdp-tf-rec:last-child {
  border-block-end: none;
}

.mdp-tf-rec-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
  /* A comfortable touch target on a phone without a separate mobile rule. */
  min-block-size: 2.75rem;
  padding-block: var(--mdp-sp-3);
  padding-inline: var(--mdp-sp-4);
  color: inherit;
  text-decoration: none;
  transition: background var(--mdp-dur-fast) var(--mdp-ease);
}

a.mdp-tf-rec-row:hover {
  background: var(--mdp-surface-2);
}

a.mdp-tf-rec-row:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: calc(var(--mdp-focus-offset) * -1);
}

.mdp-tf-rec-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 10rem;
  min-inline-size: 0;
}

.mdp-tf-rec-title {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-tf-rec-when {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* Why a failed record has no link. */
.mdp-tf-rec-note {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-tf-rec-side {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex: none;
  min-inline-size: 0;
}

.mdp-tf-rec-go {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════════
   15 — NARROW WIDTHS

   834 and 390. The record does not change shape — an examination reads the same on a phone as
   on a desk — but the grids collapse to one column, the field list stops being two columns so a
   long Arabic label cannot squeeze the value into a ribbon, and the rail scrolls.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .mdp-tf-proc-wrap {
    padding-inline: var(--mdp-sp-3);
  }

  .mdp-tf-proc {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* The rail alone scrolls; the page never does. */
    scrollbar-width: thin;
    padding-block-end: var(--mdp-sp-1);
  }

  .mdp-tf-proc-step {
    flex: none;
  }

  /* Stacked: the caption above its value, so neither is compressed. */
  .mdp-tf-fields {
    grid-template-columns: 1fr;
    gap: var(--mdp-sp-1);
  }

  .mdp-tf-field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
    padding-block-start: var(--mdp-sp-2);
  }

  .mdp-tf-field:first-child {
    padding-block-start: 0;
  }

  .mdp-tf-facts,
  .mdp-tf-cross,
  .mdp-tf-docks,
  .mdp-tf-kinds-list {
    grid-template-columns: 1fr;
  }

  .mdp-tf-tally {
    grid-template-columns: repeat(2, 1fr);
  }

  .mdp-tf-finding,
  .mdp-tf-issue,
  .mdp-tf-dock {
    padding: var(--mdp-sp-3);
  }

  .mdp-tf-action {
    padding: var(--mdp-sp-4);
  }

  .mdp-tf-conc-summary,
  .mdp-tf-action-body {
    font-size: var(--mdp-fs-sm);
  }
}

@media (max-width: 420px) {
  .mdp-tf-tally {
    grid-template-columns: 1fr;
  }

  .mdp-tf-tally-cell {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mdp-sp-3);
  }

  .mdp-tf-tally-value {
    font-size: var(--mdp-fs-lg);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   16 — REDUCED MOTION AND FORCED COLOURS
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mdp-tf-proc-cell,
  .mdp-tf-dock-drop,
  .mdp-tf-rec-row {
    transition: none;
  }
}

/*
   Under forced colours the tints disappear, so every status mark, every finding edge and every
   register keeps a real border rather than relying on a background that will not be painted.
*/
@media (forced-colors: active) {
  .mdp-tf-mark,
  .mdp-tf-chip,
  .mdp-tf-sev,
  .mdp-tf-cat,
  .mdp-tf-rulebook,
  .mdp-tf-tally-cell,
  .mdp-tf-finding,
  .mdp-tf-issue,
  .mdp-tf-action,
  .mdp-tf-fail,
  .mdp-tf-notice {
    border: 1px solid;
  }

  .mdp-tf-finding,
  .mdp-tf-issue,
  .mdp-tf-action {
    border-inline-start-width: 3px;
  }

  .mdp-tf-proc-step[data-state='here'] .mdp-tf-proc-cell {
    border: 1px solid;
  }
}