/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — THE TRADE DESK
   The sixteenth stylesheet. Loaded last.

   The visual language of the core commercial journey: Trade Network, Offers, the Offer
   desk, My Deals and the Deal Inbox. It is the Phase-3 Command Center's institutional
   system carried into the four screens where money is actually agreed — the same tokens,
   the same rhythm, the same status vocabulary, the same empty and loading grammar.

   ONE PREFIX, ONE EXCEPTION, AND THE EXCEPTION IS SCOPED

   Every selector this file writes either begins `.mdp-td-` — new vocabulary that no screen
   shipped before this phase renders — or is a DESCENDANT of `.mdp-td`, the root class the
   new desk pages put on their outermost element. There is no third kind. A rule of the
   second kind cannot reach a screen that is not a desk, because no other screen has an
   ancestor carrying `.mdp-td`; `console.css` set that precedent with `.mdp-op .mdp-tabs`
   and this follows it exactly.

   THE INVENTORY. Every borrowed selector this file restyles, always under `.mdp-td`:

     .mdp-td .mdp-tabs, .mdp-tab, .mdp-tab-count
        The shared tab strip, at desk density. Padding, size and the selected state only —
        no display mode, no order, no content. The tabs themselves are `routes.js`'s.

     .mdp-td .mdp-table-wrap, .mdp-table, .mdp-table th/td, .mdp-table thead th
        The shared `dataTable`, at desk density. THE COMPONENT IS NOT REIMPLEMENTED, on
        purpose: it already emits `data-label` on every cell and collapses to one stacked
        card per row below 768px, which is the whole of the "tables transform intelligently
        on mobile" requirement. A second table would be a second place to get that wrong.
        These rules change padding, weight, colour and the row hairline. They do not touch
        the stacking rules, the sticky header's mechanism, `data-align` or `data-numeric`.

        Two later additions, both overflow fixes found in browser QA and both explained at
        the rule: `td .mdp-td-line-title/-sub` take `overflow-wrap: break-word` instead of
        `anywhere`, because automatic table layout sizes a column from min-content and
        `anywhere` drops that to one character; and `th/td:first-child` take a
        `min-inline-size` floor, released again below 768px where the component has already
        stacked itself into cards and there is no column left to size.

     .mdp-td .mdp-field
        `min-inline-size: 0`. A grid item's default `min-width: auto` is what makes a form
        field refuse to shrink below its intrinsic width and push a horizontal scrollbar
        onto the page at 390px. This is an overflow fix, not a style.

     .mdp-td .mdp-op-facts, .mdp-op-fact
        The console fact grid, borrowed by the counterparty drawer. Gap and label colour
        only, so the drawer reads as part of the desk rather than as a console dropped
        inside one.

     .mdp-td .mdp-callout, .mdp-td .mdp-callout-text, .mdp-td .mdp-callout-actions,
     .mdp-td .mdp-callout-actions > .mdp-btn
        Below 560px only, and an overflow fix rather than a style. `.mdp-btn` is
        `white-space: nowrap`, which is right for a button and wrong for one whose label is
        a full sentence: the Arabic "Save draft and analyse with AI" measures 314px and at
        390px it left the callout, clipped, past the trailing edge (found in browser QA).
        The two `-actions` rules give it the full width and let the label wrap. Widening the
        actions alone then squeezed the text beside them to zero, because the callout is one
        flex row and `.mdp-callout-text` is `flex: 1 1 auto; min-width: 0` — so the row is
        told to wrap first and the text to take a full line of its own. Nothing above 560px
        changes, and no callout outside `.mdp-td` is reachable.

   Nothing else. No rule in this file sizes an `<svg>` outside `.mdp-td`, so the
   illustration floor `enterprise.css` established stays where it is. No rule touches the
   shell, the rail, the top bar, the drawer chrome, the toast layer or any component's
   markup — this is a stylesheet, and all of that is decided in JavaScript it does not run.

   EVERY COLOUR IS A TOKEN, so light mode, dark mode and `prefers-contrast: more` are
   inherited for free. EVERY DIRECTIONAL PROPERTY IS LOGICAL — `inline-start`, `block-end`,
   `padding-inline`, `border-inline-start` — so Arabic mirrors with no `[dir='rtl']` rule in
   this file, which is why there are none.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1 — THE PAGE AND ITS RHYTHM
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-5);
  /* A measure that runs the full width of a 27" monitor is a measure nobody finishes a
     sentence on. The same ceiling the Command Center uses, so the two feel like one product. */
  max-inline-size: var(--mdp-content-max);
  min-inline-size: 0;
}

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

/* A slot is not a box. `display: contents` makes whatever a loader fills it with the flex or
   grid item directly, so a skeleton and the panel that replaces it occupy the same cell. */
.mdp-td-slot { display: contents; }

/* The commercial work on the left, the standing facts on the right. One column below the
   breakpoint, main first — which is also the DOM order, so nothing is reordered visually
   away from the order a screen reader reads. */
.mdp-td-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mdp-sp-4);
  align-items: start;
  min-inline-size: 0;
}

.mdp-td-col-main,
.mdp-td-col-aside {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-4);
}

@media (min-width: 1100px) {
  .mdp-td-cols { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  /* The aside follows the reader down a long term sheet. `align-self: start` and a max height
     keep it from ever being taller than the viewport, which would trap its own overflow. */
  .mdp-td-col-aside {
    position: sticky;
    inset-block-start: calc(var(--mdp-topnav-h) + var(--mdp-sp-4));
    max-block-size: calc(100vh - var(--mdp-topnav-h) - var(--mdp-sp-8));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2 — THE MASTHEAD
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-mast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-4);
  flex-wrap: wrap;
  min-inline-size: 0;
}

.mdp-td-mast-text { min-inline-size: 0; flex: 1 1 320px; }

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

.mdp-td-mast-line {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  min-inline-size: 0;
}

.mdp-td-title {
  margin: 0;
  font-size: var(--mdp-fs-2xl);
  font-weight: var(--mdp-fw-bold);
  line-height: var(--mdp-lh-tight);
  letter-spacing: -0.015em;
  color: var(--mdp-text-strong);
  min-inline-size: 0;
  /* A product name or an offer reference can be long. It wraps rather than truncating,
     because a commercial identifier that is cut off is an identifier that cannot be read
     back to a counterparty on the telephone. */
  overflow-wrap: anywhere;
}

.mdp-td-mast-meta {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

.mdp-td-lead {
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  max-inline-size: 78ch;
}

.mdp-td-mast-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3 — THE PRIMARY JOURNEY

   FIND & CONNECT → REQUEST / RECEIVE OFFER → AI ANALYZE → DECIDE → CREATE / MANAGE DEAL.
   The current stage is marked and the other four are drawn quietly. NOTHING IS TICKED:
   the rail states where the customer is standing, never what they have finished, because
   what they have finished is a fact about the deal and lives on the server.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-journey-wrap {
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-bg-raised);
  padding: var(--mdp-sp-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.mdp-td-journey {
  display: flex;
  align-items: stretch;
  gap: var(--mdp-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: max-content;
  inline-size: 100%;
}

.mdp-td-journey-step {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex: 1 1 0;
  min-inline-size: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-md);
  position: relative;
}

/* The chevron between stages is a border, not a glyph: a border mirrors in Arabic by
   itself, and a rotated chevron that has to be flipped by hand is a chevron that will one
   day point the wrong way. */
.mdp-td-journey-step + .mdp-td-journey-step::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--mdp-sp-1) * -1);
  inline-size: 1px;
  block-size: 56%;
  background: var(--mdp-border-subtle);
}

.mdp-td-journey-mark {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  flex: 0 0 26px;
  border-radius: var(--mdp-r-sm);
  border: 1px solid var(--mdp-border);
  background: var(--mdp-surface);
  color: var(--mdp-text-faint);
}

/* The number and the icon share the cell; the icon replaces the number on the active step,
   which is the one place a glyph earns its space. */
.mdp-td-journey-mark > * { grid-area: 1 / 1; }
.mdp-td-journey-n {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
}
.mdp-td-journey-icon { display: none; }

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

.mdp-td-journey-label {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
  white-space: nowrap;
}

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

.mdp-td-journey-step[data-state='here'] {
  background: var(--mdp-brand-soft);
  box-shadow: inset 0 0 0 1px var(--mdp-brand-border);
}
.mdp-td-journey-step[data-state='here'] .mdp-td-journey-mark {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand);
  color: var(--mdp-brand-contrast);
}
.mdp-td-journey-step[data-state='here'] .mdp-td-journey-n { display: none; }
.mdp-td-journey-step[data-state='here'] .mdp-td-journey-icon { display: grid; place-items: center; }
.mdp-td-journey-step[data-state='here'] .mdp-td-journey-label {
  color: var(--mdp-text-strong);
  font-weight: var(--mdp-fw-semibold);
}

/* Below the laptop breakpoint the rail keeps all five stages but drops the labels of the
   four the customer is not on — the numbers still carry the sequence, and five wrapped
   labels would cost three lines of a phone screen to say what the marked step already says. */
@media (max-width: 900px) {
  .mdp-td-journey-step { flex: 0 0 auto; }
  .mdp-td-journey-step[data-state='idle'] .mdp-td-journey-text { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4 — THE FIGURE RAIL
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-td-rail-cell {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease),
              background var(--mdp-dur-fast) var(--mdp-ease);
}

a.mdp-td-rail-cell:hover {
  border-color: var(--mdp-border-strong);
  background: var(--mdp-surface);
}

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

.mdp-td-rail-label > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
.mdp-td-rail-icon { display: inline-flex; flex: 0 0 auto; }

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

.mdp-td-rail-note {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
}

.mdp-td-rail-cell[data-tone='brand'] .mdp-td-rail-value { color: var(--mdp-brand); }
.mdp-td-rail-cell[data-tone='warn'] { border-color: var(--mdp-warn-soft); }
.mdp-td-rail-cell[data-tone='warn'] .mdp-td-rail-value { color: var(--mdp-warn); }
.mdp-td-rail-cell[data-tone='warn'] .mdp-td-rail-note { color: var(--mdp-warn); }
.mdp-td-rail-cell[data-tone='danger'] .mdp-td-rail-value { color: var(--mdp-danger); }
.mdp-td-rail-cell[data-tone='success'] .mdp-td-rail-value { color: var(--mdp-success); }

/* ═══════════════════════════════════════════════════════════════════════════════
   5 — THE PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-panel {
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-surface);
  min-inline-size: 0;
  overflow: hidden;
}

.mdp-td-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  border-block-end: 1px solid var(--mdp-border-subtle);
  background: var(--mdp-surface-2);
}

.mdp-td-panel-heading { min-inline-size: 0; flex: 1 1 240px; }

.mdp-td-panel-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  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);
  min-inline-size: 0;
}

.mdp-td-panel-title > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
.mdp-td-panel-icon { display: inline-flex; flex: 0 0 auto; color: var(--mdp-text-faint); }

.mdp-td-panel-note {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-muted);
  max-inline-size: 76ch;
}

.mdp-td-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

.mdp-td-panel-figure {
  font-size: var(--mdp-fs-lg);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-warn);
}

.mdp-td-panel-body { padding: var(--mdp-sp-5); min-inline-size: 0; }
.mdp-td-panel[data-dense='true'] .mdp-td-panel-head { padding: var(--mdp-sp-3) var(--mdp-sp-4); }
.mdp-td-panel[data-dense='true'] .mdp-td-panel-body { padding: var(--mdp-sp-4); }

/* A ledger fills its panel edge to edge: a table inset inside a padded box wastes the two
   columns of width that a commercial row needs most. */
.mdp-td-panel-body > .mdp-td-ledger { margin: calc(var(--mdp-sp-5) * -1); }
.mdp-td-panel[data-dense='true'] .mdp-td-panel-body > .mdp-td-ledger { margin: calc(var(--mdp-sp-4) * -1); }

.mdp-td-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  border-block-start: 1px solid var(--mdp-border-subtle);
  background: var(--mdp-surface-2);
}

.mdp-td-panel[data-tone='brand'] { border-color: var(--mdp-brand-border); }
.mdp-td-panel[data-tone='warn'] { border-color: color-mix(in srgb, var(--mdp-warn) 42%, transparent); }
.mdp-td-panel[data-tone='danger'] { border-color: color-mix(in srgb, var(--mdp-danger) 42%, transparent); }
.mdp-td-panel[data-tone='success'] { border-color: color-mix(in srgb, var(--mdp-success) 42%, transparent); }
.mdp-td-panel[data-tone='info'] { border-color: color-mix(in srgb, var(--mdp-info) 42%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════════
   6 — THE ACTION BAND

   What makes the Private AI Analysis prominent BEFORE `Send offer` and BEFORE `Accept`
   without moving either control: a full-width band at the width of the column, read on the
   way to the decision rather than found beside it.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-band {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  border: 1px solid var(--mdp-brand-border);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-brand-soft);
  min-inline-size: 0;
}

.mdp-td-band-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-block-start: 1px;
  color: var(--mdp-brand);
}

.mdp-td-band-text { flex: 1 1 auto; min-inline-size: 0; }

.mdp-td-band-eyebrow {
  margin: 0 0 2px;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-brand);
}

.mdp-td-band-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);
}

.mdp-td-band-body {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  max-inline-size: 74ch;
}

.mdp-td-band-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.mdp-td-band[data-tone='warn'] {
  border-color: color-mix(in srgb, var(--mdp-warn) 48%, transparent);
  background: var(--mdp-warn-soft);
}
.mdp-td-band[data-tone='warn'] .mdp-td-band-icon,
.mdp-td-band[data-tone='warn'] .mdp-td-band-eyebrow { color: var(--mdp-warn); }

.mdp-td-band[data-tone='info'] {
  border-color: color-mix(in srgb, var(--mdp-info) 44%, transparent);
  background: var(--mdp-info-soft);
}
.mdp-td-band[data-tone='info'] .mdp-td-band-icon,
.mdp-td-band[data-tone='info'] .mdp-td-band-eyebrow { color: var(--mdp-info); }

.mdp-td-band[data-tone='success'] {
  border-color: color-mix(in srgb, var(--mdp-success) 44%, transparent);
  background: var(--mdp-success-soft);
}
.mdp-td-band[data-tone='success'] .mdp-td-band-icon,
.mdp-td-band[data-tone='success'] .mdp-td-band-eyebrow { color: var(--mdp-success); }

.mdp-td-band[data-tone='neutral'] {
  border-color: var(--mdp-border);
  background: var(--mdp-surface-2);
}
.mdp-td-band[data-tone='neutral'] .mdp-td-band-icon,
.mdp-td-band[data-tone='neutral'] .mdp-td-band-eyebrow { color: var(--mdp-text-muted); }

@media (max-width: 640px) {
  .mdp-td-band { flex-wrap: wrap; }
  .mdp-td-band-actions { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7 — THE TERM SHEET

   §14: the commercial terms must dominate the interface. They do it here, and this is the
   block that decides it — the headline figures are the largest type on the screen after the
   page title, and nothing decorative is allowed to be larger.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-termsheet { min-inline-size: 0; }

.mdp-td-headline {
  display: grid;
  /* The floor is set by the widest figure this row can hold, not by how many cells there
     are. Four figures fit side by side when there is room; below that the row folds to
     three, then two, then one — and the price stays whole at every step. See the
     `[data-num]` rule below for why that matters. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  margin-block-end: var(--mdp-sp-5);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
}

.mdp-td-headline-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}

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

.mdp-td-headline-value {
  font-size: var(--mdp-fs-lg);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

/* A FIGURE MUST NEVER BREAK ACROSS LINES. FOUND IN BROWSER QA.
   `overflow-wrap: anywhere` above exists for the descriptive value — "CIF — Cost, Insurance
   and Freight" has to be allowed to fold. Applied to a number it also lets the grid track
   shrink below the figure and split it: at 1440px the total rendered as "USD 2,214,00" over
   "0.00", which is a price a reader can only misread. The numeric cells opt back out, and
   the track floor above is what keeps them from overflowing instead. "Not stated" is not a
   figure, so it keeps the folding behaviour. */
.mdp-td-headline-cell[data-num='true'] .mdp-td-headline-value {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Unit price and total. The two figures a trader reads first. */
.mdp-td-headline-cell[data-lead='true'] .mdp-td-headline-value {
  font-size: var(--mdp-fs-xl);
  font-weight: var(--mdp-fw-bold);
  color: var(--mdp-brand);
}

/* "Not stated" is never dressed as a value. It is quieter and italic in every place it
   appears, so a missing term cannot be mistaken for an agreed one. */
.mdp-td-headline-cell[data-empty='true'] .mdp-td-headline-value {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-normal);
  font-style: italic;
  color: var(--mdp-text-faint);
}

.mdp-td-termgroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mdp-sp-5);
  align-items: start;
}

.mdp-td-termgroup { min-inline-size: 0; }

.mdp-td-termgroup-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0 0 var(--mdp-sp-2);
  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-bold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-muted);
}

.mdp-td-termgroup-icon { display: inline-flex; color: var(--mdp-brand); }

.mdp-td-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--mdp-sp-3) var(--mdp-sp-4);
  margin: 0;
}

.mdp-td-term { min-inline-size: 0; }
.mdp-td-term[data-wide='true'] { grid-column: 1 / -1; }

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

.mdp-td-term-value {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
  /* A specification or a payment term is a paragraph the counterparty wrote. Its own line
     breaks are meaningful and are kept. */
  white-space: pre-wrap;
}

.mdp-td-term[data-strong='true'] .mdp-td-term-value {
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-strong);
}

.mdp-td-term[data-empty='true'] .mdp-td-term-value {
  font-style: italic;
  font-weight: var(--mdp-fw-normal);
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text-faint);
}

/* The offer REQUEST, deliberately a different object from the commercial offer: a quieter
   inset panel with no headline row and no price, because a request has no price. §3 turns on
   a customer being able to tell these two apart at a glance. */
.mdp-td-termsheet[data-kind='request'] {
  padding: var(--mdp-sp-4);
  border: 1px dashed var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-inset);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 — THE COUNTERPARTY BLOCK
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-td-party-mark {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  flex: 0 0 34px;
  border-radius: var(--mdp-r-sm);
  border: 1px solid var(--mdp-border);
  background: var(--mdp-surface-2);
  color: var(--mdp-text-muted);
}

.mdp-td-party-text { min-inline-size: 0; }

.mdp-td-party-name {
  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;
}

.mdp-td-party-facts {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  margin: 3px 0 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-td-party-role {
  padding: 1px var(--mdp-sp-2);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-muted);
}

.mdp-td-party-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--mdp-success);
  font-weight: var(--mdp-fw-medium);
}
.mdp-td-party-tick { display: inline-flex; }
.mdp-td-party-unverified { color: var(--mdp-text-faint); font-style: italic; }

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

/* ═══════════════════════════════════════════════════════════════════════════════
   9 — STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  border: 1px dashed var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-inset);
  text-align: start;
  min-inline-size: 0;
}

.mdp-td-empty-icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-block-start: 1px;
  color: var(--mdp-text-faint);
}

.mdp-td-empty-text { min-inline-size: 0; }

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

.mdp-td-empty-body {
  margin: 3px 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  max-inline-size: 72ch;
}

.mdp-td-empty-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--mdp-sp-3);
}

/* An error is an interruption. It keeps a full border and a tone, for the reason
   `console.css` gives about exempting error states from its density correction: the one
   state that must be noticed should not be the one drawn most quietly. */
.mdp-td-empty[data-tone='danger'] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--mdp-danger) 46%, transparent);
  background: var(--mdp-danger-soft);
}
.mdp-td-empty[data-tone='danger'] .mdp-td-empty-icon { color: var(--mdp-danger); }

.mdp-td-empty[data-tone='success'] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--mdp-success) 40%, transparent);
  background: var(--mdp-success-soft);
}
.mdp-td-empty[data-tone='success'] .mdp-td-empty-icon { color: var(--mdp-success); }

.mdp-td-empty[data-tone='warn'] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--mdp-warn) 40%, transparent);
  background: var(--mdp-warn-soft);
}
.mdp-td-empty[data-tone='warn'] .mdp-td-empty-icon { color: var(--mdp-warn); }

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

/* The scope line: "showing 8 of 24", "capped at 50", "this is what the server counted". It
   is small and quiet everywhere it appears, because it is a qualification of the thing above
   it and never a claim of its own. */
.mdp-td-scope {
  display: block;
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

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

.mdp-td-foot-row {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  min-inline-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10 — THE LEDGER
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-ledger { min-inline-size: 0; }

.mdp-td-ledger-foot {
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  border-block-start: 1px solid var(--mdp-border-subtle);
  background: var(--mdp-surface-2);
}

.mdp-td-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.mdp-td-line-title {
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-td-line-sub {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

/* A LEDGER'S IDENTITY COLUMN COLLAPSED TO ONE CHARACTER PER LINE. FOUND IN BROWSER QA.
   `overflow-wrap: anywhere` drops an element's min-content contribution to a single
   character. Inside a flex or a grid cell that is harmless, because the track has a floor of
   its own — but a table's automatic layout sizes every column from exactly that
   contribution, so the first column of My Deals shrank to about 40px and "Urea 46% prilled —
   12,000 MT FOB Ruwais" rendered one or two characters per line, over twenty of them.
   `break-word` still breaks an over-long token when it would otherwise overflow, and leaves
   min-content at the longest word, which is the width the column actually needs. Table cells
   only: the same two classes keep `anywhere` in the cards and the drawer, where the
   container, not the text, decides the width. */
.mdp-td .mdp-table td .mdp-td-line-title,
.mdp-td .mdp-table td .mdp-td-line-sub {
  overflow-wrap: break-word;
}

/* The identity column carries the row's name over its reference. It is the column a reader
   scans first and the one automatic layout starves, because every other column holds a short
   badge, a date or a figure and therefore asks for more. A floor gives it a fair share and
   sends the surplus into the horizontal scroll the ledger already has, instead of into
   seven-line rows. Same floor on every desk ledger, so Offers, My Deals and the Inbox
   answer "which row is this" at the same width (§9). */
.mdp-td .mdp-table th:first-child,
.mdp-td .mdp-table td:first-child { min-inline-size: 200px; }

/* Except once the table has stacked itself into cards, where there are no columns left to
   size and every cell is already the full width of the row. `data-stack` is the component's
   static opt-in, not a live state — the stacking itself happens at 767px in
   `components.css:400`, so the release has to be keyed on the same width. */
@media (max-width: 767px) {
  .mdp-td .mdp-table[data-stack='true'] th:first-child,
  .mdp-td .mdp-table[data-stack='true'] td:first-child { min-inline-size: 0; }
}

.mdp-td-none { color: var(--mdp-text-faint); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════════
   11 — THE ACTION QUEUE

   "What requires my response?" — the Deal Inbox's lane, the Offers decision queue and the
   Trade Network's incoming requests, all the same row, so the three screens answer the same
   question the same way (§8, §9).
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-td-queue-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-4);
  flex-wrap: wrap;
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-inline-start: 3px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
  min-inline-size: 0;
}

.mdp-td-queue-row[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }
.mdp-td-queue-row[data-tone='info'] { border-inline-start-color: var(--mdp-info); }
.mdp-td-queue-row[data-tone='brand'] { border-inline-start-color: var(--mdp-brand); }
.mdp-td-queue-row[data-tone='danger'] { border-inline-start-color: var(--mdp-danger); }
.mdp-td-queue-row[data-tone='success'] { border-inline-start-color: var(--mdp-success); }
.mdp-td-queue-row[data-tone='neutral'] { border-inline-start-color: var(--mdp-neutral); }

.mdp-td-queue-text { flex: 1 1 260px; min-inline-size: 0; }

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

.mdp-td-queue-sub {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-td-queue-meta {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--mdp-sp-2);
}

.mdp-td-queue-figure {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  font-variant-numeric: tabular-nums;
}

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

.mdp-td-queue-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12 — THE COUNTERPARTY CARD (Trade Network)

   Name, where, verification, relationship, actions — in that order, and nothing invented.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--mdp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-td-cp {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
  min-inline-size: 0;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-td-cp:hover { border-color: var(--mdp-border-strong); }
.mdp-td-cp[data-tone='danger'] { border-color: color-mix(in srgb, var(--mdp-danger) 34%, transparent); }

.mdp-td-cp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

/* The name is a control because it opens a drawer. A link that does not change the address
   is a lie to anyone who middle-clicks it, so this is a button that looks like a heading. */
.mdp-td-cp-name {
  font: inherit;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  text-align: start;
  color: var(--mdp-text-strong);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-td-cp-name:hover { color: var(--mdp-brand); text-decoration: underline; }

.mdp-td-cp-chips {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.mdp-td-cp-where {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-td-cp-state {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  flex-wrap: wrap;
  min-block-size: 20px;
}

.mdp-td-cp-norel {
  font-size: var(--mdp-fs-xs);
  font-style: italic;
  color: var(--mdp-text-faint);
}

.mdp-td-cp-facts {
  display: grid;
  /* The floor is the widest word a fact can hold, not an arbitrary small number. At 74px the
     track was narrower than "petrochemicals" and the value below broke mid-word, leaving a lone
     "s" on its own line (found in browser QA). `auto-fit` folds four facts to three, then two,
     then one as the card narrows, so raising the floor costs nothing but the fold happening a
     little sooner. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  gap: var(--mdp-sp-2) var(--mdp-sp-3);
  margin: var(--mdp-sp-1) 0 0;
  padding-block-start: var(--mdp-sp-3);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

.mdp-td-cp-fact { min-inline-size: 0; }

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

.mdp-td-cp-fact-value {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text);
  font-variant-numeric: tabular-nums;
  /* `break-word`, not `anywhere`: it still breaks a token that would otherwise overflow — a long
     unspaced industry code, say — but leaves the min-content contribution at the longest word, so
     an ordinary label folds between its words instead of inside one. Paired with the track floor
     above; changing either alone reopens the mid-word break or lets a long word out of the card. */
  overflow-wrap: break-word;
}

.mdp-td-cp-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--mdp-sp-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13 — FILTERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
  min-inline-size: 0;
}

.mdp-td-filters-fields {
  display: flex;
  align-items: flex-end;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  flex: 1 1 320px;
  min-inline-size: 0;
}

.mdp-td-filters-fields > * { flex: 1 1 180px; min-inline-size: 0; }

.mdp-td-filters-end {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14 — THE TERMS FORM

   The provider's side of the term sheet: the same five groups, as fieldsets. A `<fieldset>`
   and a `<legend>` rather than a heading and a div, because that is the element pairing a
   screen reader announces as "group, Commercial" before every field inside it.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-td-fieldgroup {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.mdp-td-fieldgroup-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  inline-size: 100%;
  margin: 0 0 var(--mdp-sp-3);
  padding: 0 0 var(--mdp-sp-2);
  border-block-end: 1px solid var(--mdp-border-subtle);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-muted);
}

.mdp-td-fieldgroup-icon { display: inline-flex; color: var(--mdp-brand); }

.mdp-td-fieldgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15 — THE VERSION CHAIN AND THE EVENT LOG

   Version 1 → Changes requested → Version 2 → … Every version ever made, none overwritten.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-td-versionline-sum {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-td-chain {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-td-chain-item {
  position: relative;
  padding-inline-start: var(--mdp-sp-6);
  min-inline-size: 0;
}

/* The spine. A single border on the item, so the line is continuous down the chain and
   stops at the last step rather than running past it. */
.mdp-td-chain-item::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 7px;
  inline-size: 1px;
  background: var(--mdp-border);
}
.mdp-td-chain-item:last-child::before { block-size: 14px; }

.mdp-td-chain-mark {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 9px;
  inline-size: 15px;
  block-size: 15px;
  border-radius: 50%;
  border: 2px solid var(--mdp-border-strong);
  background: var(--mdp-surface);
}

.mdp-td-chain-link {
  display: block;
  inline-size: 100%;
  font: inherit;
  text-align: start;
  color: inherit;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--mdp-r-sm);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  cursor: pointer;
  min-inline-size: 0;
}

.mdp-td-chain-link[data-static='true'] { cursor: default; }
button.mdp-td-chain-link:hover { background: var(--mdp-surface-inset); }

.mdp-td-chain-link[data-active='true'] {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
}

.mdp-td-chain-text { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }

.mdp-td-chain-title {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

.mdp-td-chain-badges {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  flex-wrap: wrap;
}

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

.mdp-td-chain-note {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* The state of a version, on its own marker. `superseded` is deliberately the quietest and
   `accepted` the loudest: a customer scanning the chain is looking for the one that counts. */
.mdp-td-chain-item[data-state='draft'] .mdp-td-chain-mark { border-color: var(--mdp-text-faint); border-style: dashed; }
.mdp-td-chain-item[data-state='current'] .mdp-td-chain-mark { border-color: var(--mdp-brand); background: var(--mdp-brand); }
.mdp-td-chain-item[data-state='accepted'] .mdp-td-chain-mark { border-color: var(--mdp-success); background: var(--mdp-success); }
.mdp-td-chain-item[data-state='declined'] .mdp-td-chain-mark { border-color: var(--mdp-danger); }
.mdp-td-chain-item[data-state='superseded'] .mdp-td-chain-mark { border-color: var(--mdp-border); }
.mdp-td-chain-item[data-state='superseded'] .mdp-td-chain-title { color: var(--mdp-text-muted); font-weight: var(--mdp-fw-medium); }

.mdp-td-chain-item[data-state='decision'] .mdp-td-chain-mark {
  inline-size: 11px;
  block-size: 11px;
  inset-block-start: 12px;
  inset-inline-start: 2px;
  border-width: 1px;
  border-color: var(--mdp-border-strong);
  background: var(--mdp-surface-3);
}
.mdp-td-chain-item[data-state='decision'] .mdp-td-chain-title {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}
.mdp-td-chain-item[data-decision='accepted'] .mdp-td-chain-mark { border-color: var(--mdp-success); }
.mdp-td-chain-item[data-decision='declined'] .mdp-td-chain-mark { border-color: var(--mdp-danger); }
.mdp-td-chain-item[data-decision='changes'] .mdp-td-chain-mark { border-color: var(--mdp-warn); }

/* The event log under the chain. The server filtered it by side; this only draws it. */
.mdp-td-events {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: var(--mdp-sp-3) 0 0;
  border-block-start: 1px solid var(--mdp-border-subtle);
  list-style: none;
  min-inline-size: 0;
}

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

.mdp-td-event-mark {
  flex: 0 0 6px;
  inline-size: 6px;
  block-size: 6px;
  margin-block-start: 6px;
  border-radius: 50%;
  background: var(--mdp-border-strong);
}

.mdp-td-event-text { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }

.mdp-td-event-title {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-td-event-sub,
.mdp-td-event-when {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16 — THE DECISION ROW

   Accept / Request changes / Decline. Given its own row at the foot of the decision panel,
   after the analysis band, because that is the order §3 puts them in.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-td-decide {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  inline-size: 100%;
  min-inline-size: 0;
}

@media (max-width: 560px) {
  /* On a phone the three decisions stack full width. A 30%-wide "Request changes" beside two
     others is three targets nobody can hit and three labels nobody can read. */
  .mdp-td-decide > * { flex: 1 1 100%; }
}

/* The counterparty drawer. Scoped so the borrowed console pieces inside it inherit the
   desk's rhythm rather than the console's. */
.mdp-td-drawer { gap: var(--mdp-sp-4); }

/* ═══════════════════════════════════════════════════════════════════════════════
   17 — THE BORROWED COMPONENTS

   Every rule below is a descendant of `.mdp-td` and therefore cannot reach a screen that is
   not a desk. See the inventory in this file's header for why each one is here.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The tab strip, at desk density. The same treatment `console.css` gives it under `.mdp-op`. */
.mdp-td .mdp-tabs {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
  overflow-x: auto;
  scrollbar-width: thin;
}

.mdp-td .mdp-tab {
  padding: 6px var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  font-size: var(--mdp-fs-xs);
  white-space: nowrap;
}

.mdp-td .mdp-tab[aria-current='page'] {
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-strong);
  font-weight: var(--mdp-fw-semibold);
}

/* The shared `dataTable`, at desk density. Padding, weight, colour and the row hairline —
   the stacking rules below 768px are the component's own and are not touched here. */
.mdp-td .mdp-table-wrap { border-radius: 0; }

.mdp-td .mdp-table th,
.mdp-td .mdp-table td {
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  vertical-align: top;
}

.mdp-td .mdp-table thead th {
  background: var(--mdp-surface-2);
  border-block-end-color: var(--mdp-border);
  color: var(--mdp-text-muted);
}

.mdp-td .mdp-table tbody tr:hover { background: var(--mdp-surface-inset); }

/* A grid item's default `min-width: auto` is what pushes a horizontal scrollbar onto a
   390px viewport when a field's intrinsic width exceeds its column. An overflow fix. */
.mdp-td .mdp-field { min-inline-size: 0; }

/* The console fact grid, borrowed by the counterparty drawer. */
.mdp-td .mdp-op-facts { gap: var(--mdp-sp-3) var(--mdp-sp-4); }
.mdp-td .mdp-op-fact > dt { color: var(--mdp-text-faint); }

/* ═══════════════════════════════════════════════════════════════════════════════
   18 — RESPONSIVE

   The desk is built from `auto-fit` grids and wrapping flex rows, so most of the responsive
   behaviour is already in the rules above and there is very little left to state here. What
   remains is the density step: at a phone width the padding that reads as composure on a
   monitor reads as wasted space.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .mdp-td { gap: var(--mdp-sp-4); }
  .mdp-td-title { font-size: var(--mdp-fs-xl); }
  .mdp-td-panel-head { padding: var(--mdp-sp-3) var(--mdp-sp-4); }
  .mdp-td-panel-body { padding: var(--mdp-sp-4); }
  .mdp-td-panel-foot { padding: var(--mdp-sp-3) var(--mdp-sp-4); }
  .mdp-td-panel-body > .mdp-td-ledger { margin: calc(var(--mdp-sp-4) * -1); }
  .mdp-td-ledger-foot { padding: var(--mdp-sp-3) var(--mdp-sp-4); }
  .mdp-td-termgroups { gap: var(--mdp-sp-4); }
  .mdp-td-headline { padding: var(--mdp-sp-3); margin-block-end: var(--mdp-sp-4); }
  .mdp-td-cards { grid-template-columns: minmax(0, 1fr); }
  .mdp-td-rail { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

  /* A stacked table cell puts its label and its value on one line. A two-line composite in
     the value column then reads as a hanging fragment, so it goes back to a block. */
  .mdp-td .mdp-table[data-stack='true'] tbody td { padding: var(--mdp-sp-1) var(--mdp-sp-4); }
  .mdp-td .mdp-table[data-stack='true'] tbody td .mdp-td-line { align-items: flex-end; }
}

/* TWO TEXT TARGETS THAT WERE UNDER 24px, FOUND IN BROWSER QA.
   `base.css` sets a 40px minimum on `.mdp-btn`, but neither of these is a button-shaped
   control: the ledger row's title is a bare `<a>` inside a stacked table cell and measured
   15px tall at 390px, and the counterparty card's name is an unstyled `<button>` that
   measured 21px. Both are the primary target of their row or card, so both are given a
   hit area rather than a larger typeface — the line still reads at the same size, and the
   inline-flex box simply grows the box the finger has to land in. Applied at the pointer
   widths only; on a monitor a 15px text link is a text link. */
.mdp-td-line-title > a,
.mdp-td-line-title > button {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  /* The hit area grows, the line box does not. 12.5px text at `--mdp-lh-snug` measures
     about 15px, so `min-block-size` adds nine and the negative margin gives eight back —
     the ledger keeps its density and the target clears 24px. */
  margin-block: -4px;
}

.mdp-td-cp-name { display: flex; align-items: center; min-block-size: 26px; }

@media (max-width: 560px) {
  /* The callout is a single flex row of text-then-actions. Widening the actions alone made them
     demand the whole row and squeezed `.mdp-callout-text` — `flex: 1 1 auto` with `min-width: 0`,
     see `components.css:1018` — down to nothing, which set the analysis facts one character per
     line. FOUND IN BROWSER QA. The row has to wrap first, so the text keeps a full line of its own
     and the button takes the next one. */
  .mdp-td .mdp-callout { flex-wrap: wrap; }

  .mdp-td .mdp-callout-text { flex: 1 1 100%; }

  .mdp-td .mdp-callout-actions { inline-size: 100%; }

  .mdp-td .mdp-callout-actions > .mdp-btn {
    inline-size: 100%;
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .mdp-td-mast-actions,
  .mdp-td-queue-actions { inline-size: 100%; }
  /* A control a thumb has to find on a moving train. 40px is the platform's own minimum and
     is enforced by `base.css`; this only stops a wrapped row from crowding two together. */
  .mdp-td-queue-actions > * { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   19 — MOTION AND CONTRAST

   `base.css` already zeroes every duration under `prefers-reduced-motion`, because every
   duration in this file is one of its tokens. What is left is the transitions declared with
   a literal property list, which are stated again here so the sheet is self-contained.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mdp-td-rail-cell,
  .mdp-td-cp { transition: none; }
}

@media (prefers-contrast: more) {
  /* Tone is carried by a border colour in several places above. At high contrast the token
     resolves to `currentColor`, so the tone would be lost; the left edge of a queue row and
     the marker of a version are the two places that matters, and both get a width instead. */
  .mdp-td-queue-row { border-inline-start-width: 4px; }
  .mdp-td-chain-mark { border-width: 3px; }
  .mdp-td-empty { border-style: solid; }
}