/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — THE SMART DEAL PASSPORT
   The nineteenth stylesheet. Loaded last.

   The visual language of the authoritative customer-facing record of one deal: the passport
   header and its two references, the deal journey, the commercial term ledger, the offer
   origin block, the three negotiation buckets, the document register, the attributed history
   and the readiness readout.

   IT IS A DOCUMENT, NOT A DASHBOARD, AND THAT IS THE WHOLE DESIGN ARGUMENT

   The brief asks for a Digital Trade Passport that a corporate treasurer, a trade-finance
   officer or a senior commercial manager would accept as a record — and explicitly asks to
   avoid generic cards everywhere. So the arrangement is a document's:

     · ONE MASTHEAD, with the two references set in the mono face beneath it and six header
       facts on a ruled strip below that. Not six cards.
     · TERMS AS A RULED LEDGER — `<dl>` rows on hairlines, label left, value right, the total
       and the Incoterm in the strong weight. Not a grid of tiles.
     · A NUMBERED JOURNEY, drawn as a connected track rather than as status pills, because
       the reader's question is "how far has this got" and a row of pills does not answer it.
     · THE HISTORY AS A SPINE — one continuous rule with attributed nodes on it, tinted by
       who acted. Not a stack of bordered rows.

   Hierarchy comes from weight, rule and space; colour is reserved for status. Panels are
   `desk.css`'s, borrowed whole, so the record sits inside the same institutional frame as
   the Trade Desk and the Negotiation Desk rather than inventing a third one.

   ONE PREFIX, ONE EXCEPTION, AND THE EXCEPTION IS SCOPED

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

   The record component renders `deskPage()` INSIDE `.mdp-dp`, so every rule `desk.css`
   already scopes to `.mdp-td` — the mast, the rail, the panels, the tab strip, the callout
   wrap fix — applies here unchanged and is not restated. That is the point of nesting the two
   roots rather than choosing between them.

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

     .mdp-dp .mdp-td-rail
        `grid-template-columns` only. The desk rail is built for four figures at a 150px
        floor; deal readiness publishes five, and at 150px the fifth wraps to a second row on
        a 1280px laptop and reads as an afterthought rather than as part of the readout. The
        floor drops to 138px — the same adjustment, for the same reason, that
        `negotiation.css` makes for the same five-figure readout. Nothing else about the rail
        changes: the cells, their tones, their padding and their link behaviour stay
        `desk.css`'s.

     .mdp-dp .mdp-td-panel-foot
        `display: block` only. The passport's panel feet hold a single full-width navigation
        link rather than a row of buttons, and the desk foot's flex row centres one link
        against nothing and refuses to let it stretch.

     .mdp-dp .mdp-td-mast
        `border-block-end` and its padding, turning the masthead into a ruled document head.
        Geometry only — no colour beyond a token border, no change to the title, the eyebrow,
        the lead or the action slot.

     .mdp-dp .mdp-td-lead
        `white-space` only. The lead on this one screen is the deal's own summary, which the
        server writes as paragraphs — "Specifications:\n…\n\nNamed place / port: …". Collapsed
        to a single run they read as one sentence running into the next ("Port of Rotterdam
        Created from accepted offer"). No other screen passes a multi-line lead, so this
        changes the rendering of nothing else.

     .mdp-dp-item .mdp-badge, .mdp-dp-item .mdp-badge > span
        Wrapping only. The shared badge is one nowrap line with an ellipsis, which is right
        for a badge in a table cell and wrong for the one badge on this record that carries a
        distinction: "Awaiting confirmation" truncated to "Awaiting confirma…" inside a
        negotiation bucket. Only badges INSIDE a passport item are affected — the stage badge
        in the masthead, the bucket counts and every badge elsewhere on the page keep the
        shared behaviour.

   Nothing else. No rule in this file sizes an `<svg>` outside `.mdp-dp`, so the illustration
   floor `enterprise.css` established stays where it is. No rule touches the shell, the side
   rail, the top bar, the modal layer, the toast layer or any component's markup.

   WHAT THIS STYLESHEET IS RESPONSIBLE FOR SAYING

   1. THAT A TERM ONE PARTY HAS CONFIRMED IS NOT A TERM BOTH PARTIES HAVE AGREED.
      The three buckets are drawn as three separate headed regions with three different
      stripe colours, and PENDING CONFIRMATIONS sits BETWEEN the other two rather than beside
      either. `bucketItems` decides membership from the engine's own state column; this file
      makes the middle bucket impossible to read as the right-hand one.

   2. THAT AN UNREACHED JOURNEY STAGE IS NOT A REACHED ONE.
      `[data-reached='false']` is a dashed, unfilled marker on a dashed connector, and the
      step also carries the word "Not yet" — so the distinction survives monochrome print,
      forced-colours mode and a customer who cannot distinguish the two greens.

   3. THAT AN UNSTATED TERM IS AN ABSENCE, NOT A RENDERING FAILURE.
      `[data-empty='true']` sets the value in the muted colour and the italic face. "Not
      stated" must never look like a value, and a blank must never look like a bug.

   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 ROOT AND THE THREE BORROWED SELECTORS
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-dp {
  display: block;
  /* Every flex and grid ancestor of a long product name, a long file name or a wide term
     ledger needs this or the child's intrinsic width wins and the page scrolls sideways. */
  min-inline-size: 0;
}

/* Five figures, not four. See the inventory. */
.mdp-dp .mdp-td-rail {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

/* One full-width link, not a button row. See the inventory. */
.mdp-dp .mdp-td-panel-foot {
  display: block;
}

/* A ruled document head. See the inventory. */
.mdp-dp .mdp-td-mast {
  padding-block-end: var(--mdp-sp-4);
  border-block-end: 1px solid var(--mdp-border);
}

/* The fourth borrow. See THE INVENTORY: an item's badge is the sentence that separates
   "one side has confirmed" from "both sides have agreed", so it wraps rather than truncates.
   Scoped to `.mdp-dp-item`, so no other badge on the page changes. */
/* The fifth borrow. The lead is the deal summary and the summary has paragraphs; see THE
   INVENTORY. `pre-line`, not `pre`: the server's line breaks are kept, its indentation and
   its trailing spaces are not, and the text still wraps to the column. */
.mdp-dp .mdp-td-lead {
  white-space: pre-line;
}

.mdp-dp-item .mdp-badge {
  white-space: normal;
}

.mdp-dp-item .mdp-badge > span {
  overflow: visible;
  text-overflow: clip;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   2 — THE PASSPORT HEADER

   The masthead, the two references, and six facts on one ruled strip. A customer who prints
   this page or forwards it must be able to answer WHO / WHAT / HOW MUCH / WHEN / WHAT NEXT
   without scrolling, which is why the strip is a single band and not six cards.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-dp-refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2) var(--mdp-sp-5);
  min-inline-size: 0;
}

.mdp-dp-ref {
  display: flex;
  align-items: baseline;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-dp-ref-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);
  white-space: nowrap;
}

/* The reference wraps rather than truncating: one that is cut off cannot be read back over a
   telephone, which is the single most likely thing a customer will do with it. */
.mdp-dp-ref-value {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-dp-ref-value[data-empty='true'] {
  font-weight: var(--mdp-fw-normal);
  font-style: italic;
  color: var(--mdp-text-muted);
}

/* The fact strip. `auto-fit` with a 168px floor so six facts sit on one line on a desk
   monitor, three on a tablet and one on a phone — without a breakpoint deciding which. */
.mdp-dp-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--mdp-sp-4);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-bg-sunken);
  min-inline-size: 0;
}

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

.mdp-dp-fact-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);
}

/* Monetary values and long product names both live here. `anywhere` rather than an ellipsis:
   a truncated deal value on a record a bank reads is worse than a wrapped one. */
.mdp-dp-fact-value {
  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;
  min-inline-size: 0;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   3 — THE DEAL JOURNEY

   A connected track, not a row of pills. The reader's question is "how far has this got",
   and the answer is carried by the CONNECTOR: a solid line between two reached stages, a
   dashed one into a stage that has not happened.

   The `<ol>` is horizontal on a wide screen and vertical on a narrow one, and the connector
   is a border on the marker rather than a pseudo-element between items, so it mirrors in
   Arabic by itself and survives forced-colours mode.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-dp-journey-wrap {
  min-inline-size: 0;
}

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

.mdp-dp-journey-step {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-dp-journey-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface);
  color: var(--mdp-text-faint);
}

/* A reached stage is filled and carries its glyph; an unreached one is a dashed outline
   carrying a dot. Three signals — fill, border style and glyph — plus the word beneath. */
.mdp-dp-journey-step[data-reached='true'] .mdp-dp-journey-mark {
  border-color: var(--mdp-success);
  background: var(--mdp-success-soft);
  color: var(--mdp-success);
}

.mdp-dp-journey-step[data-reached='false'] .mdp-dp-journey-mark {
  border-style: dashed;
  background: var(--mdp-bg-sunken);
}

.mdp-dp-journey-step[data-here='true'] .mdp-dp-journey-mark {
  border-color: var(--mdp-brand);
  background: var(--mdp-brand-soft);
  color: var(--mdp-brand);
}

/* The ordinal, shown only when the glyph is absent — an unreached stage. It keeps the
   sequence readable when nothing else in the marker says where in the order this sits. */
.mdp-dp-journey-n {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
}

.mdp-dp-journey-step[data-reached='true'] .mdp-dp-journey-n { display: none; }
.mdp-dp-journey-step[data-reached='false'] .mdp-dp-journey-icon { display: none; }

.mdp-dp-journey-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mdp-dp-journey-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-start: 2px;
  min-inline-size: 0;
}

.mdp-dp-journey-label {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-dp-journey-step[data-reached='false'] .mdp-dp-journey-label {
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}

.mdp-dp-journey-state {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  overflow-wrap: anywhere;
}

/* Horizontal from the tablet up. `flex: 1 1 0` gives every stage the same width, so the
   track reads as an even progression rather than as stages of varying importance. */
@media (min-width: 720px) {
  .mdp-dp-journey {
    flex-direction: row;
    align-items: flex-start;
  }

  .mdp-dp-journey-step {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mdp-sp-2);
    padding-inline-end: var(--mdp-sp-3);
    /* The connector: a rule along the top of every step but the first, dashed when the step
       it leads INTO has not been reached. A border on the item mirrors in Arabic with no
       extra rule, which a pseudo-element positioned with `left` would not. */
    border-block-start: 2px solid var(--mdp-success);
    padding-block-start: var(--mdp-sp-3);
  }

  .mdp-dp-journey-step[data-reached='false'] {
    border-block-start-style: dashed;
    border-block-start-color: var(--mdp-border);
  }

  .mdp-dp-journey-text {
    padding-block-start: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4 — THE COMMERCIAL TERM LEDGER

   A ruled ledger, not a grid of tiles. Label and value on one line, separated by a hairline,
   in the arrangement a term sheet has used since long before software: the reader scans the
   labels down the left and the figures down the right.

   `<dl>` with `<dt>`/`<dd>` because these are definitions and a screen reader should say so.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-dp-term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--mdp-sp-5);
  min-inline-size: 0;
}

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

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

.mdp-dp-terms {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  min-inline-size: 0;
}

.mdp-dp-term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mdp-sp-4);
  padding-block: var(--mdp-sp-2);
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-inline-size: 0;
}

.mdp-dp-term:last-child {
  border-block-end: 0;
}

.mdp-dp-term-label {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  /* NOT `anywhere`, and NO zero minimum. Both together let the label shrink below its
     min-content width and break inside a word — "Payment terms" rendered as "Paymen t
     terms". The label holds its intrinsic minimum and the value does the wrapping. */
  overflow-wrap: break-word;
}

.mdp-dp-term-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  text-align: end;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
  /* Figures line up column-wise: a ledger a reader compares down the page needs the digits
     to sit above one another, which proportional numerals do not do. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

/* The figures a treasury reader looks for first. */
.mdp-dp-term[data-emphasis='true'] .mdp-dp-term-value {
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-bold);
}

/* An unstated term is an ABSENCE, not a value and not a failure. Muted and italic, so it can
   never be mistaken for something the parties actually agreed. */
.mdp-dp-term[data-empty='true'] .mdp-dp-term-value {
  font-weight: var(--mdp-fw-normal);
  font-style: italic;
  color: var(--mdp-text-muted);
}

/* Specifications and additional terms are paragraphs, and a paragraph crushed into a value
   column is unreadable. These rows stack and run the full width of the ledger. */
.mdp-dp-term[data-block='true'] {
  flex-direction: column;
  align-items: stretch;
  gap: var(--mdp-sp-1);
}

.mdp-dp-term[data-block='true'] .mdp-dp-term-value {
  align-items: flex-start;
  text-align: start;
  font-weight: var(--mdp-fw-normal);
  line-height: var(--mdp-lh-normal);
  white-space: pre-wrap;
}

/* The value's own text, beside its provenance note. A flex item of the value column, so it
   needs the floor of its own: `overflow-wrap` inherits, an intrinsic minimum does not. */
.mdp-dp-term-text {
  min-inline-size: 0;
}

.mdp-dp-term-note {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-normal);
  color: var(--mdp-text-faint);
}

/* What makes the ledger above authoritative, said in words above it. */
.mdp-dp-authority {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-accent-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-accent-soft);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
  min-inline-size: 0;
}

.mdp-dp-authority-mark {
  display: flex;
  flex: 0 0 auto;
  color: var(--mdp-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5 — NOTES AND STATED ABSENCES

   Every empty region on this screen is a deliberate sentence. On a record a bank reads, the
   difference between "no documents were filed" and "the documents failed to load" is the
   whole value of the document, so neither is ever a collapsed gap.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-dp-note {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-inline-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-sunken);
  min-inline-size: 0;
}

.mdp-dp-note[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }
.mdp-dp-note[data-tone='accent'] { border-inline-start-color: var(--mdp-accent); }

.mdp-dp-note-icon {
  display: flex;
  flex: 0 0 auto;
  padding-block-start: 1px;
  color: var(--mdp-text-faint);
}

.mdp-dp-note-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

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

.mdp-dp-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-bg-sunken);
  min-inline-size: 0;
}

.mdp-dp-empty-icon {
  display: flex;
  flex: 0 0 auto;
  color: var(--mdp-text-faint);
}

.mdp-dp-empty-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

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

/* ═══════════════════════════════════════════════════════════════════════════════
   6 — NEGOTIATION AND AGREEMENT

   THREE BUCKETS, AND THE MIDDLE ONE IS THE POINT. A term one party has confirmed and the
   other has not is neither open nor agreed, and it gets its own headed region — between the
   other two, in its own colour — so it cannot be read as either.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

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

.mdp-dp-thread-name {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-dp-buckets {
  display: grid;
  /* 200px, not 240px: the three buckets must sit on ONE row in the desk's main column, or
     the open → awaiting → agreed progression stops reading in order. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-dp-bucket {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-block-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-sunken);
  min-inline-size: 0;
}

/* Amber open, blue awaiting, green agreed — the same three colours the Negotiation Desk uses
   for the same three states, so a customer moving between the two screens is reading one
   vocabulary rather than two. */
.mdp-dp-bucket[data-tone='warn'] { border-block-start-color: var(--mdp-warn); }
.mdp-dp-bucket[data-tone='accent'] { border-block-start-color: var(--mdp-accent); }
.mdp-dp-bucket[data-tone='success'] { border-block-start-color: var(--mdp-success); }

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

.mdp-dp-bucket-title {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-dp-bucket-count {
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-strong);
}

.mdp-dp-bucket-empty {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-style: italic;
  color: var(--mdp-text-muted);
}

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

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

.mdp-dp-item[data-stage='proposed'] { border-inline-start-color: var(--mdp-warn); }
.mdp-dp-item[data-stage='awaiting'] { border-inline-start-color: var(--mdp-accent); }
.mdp-dp-item[data-stage='agreed'] { border-inline-start-color: var(--mdp-success); }
.mdp-dp-item[data-stage='withdrawn'] { border-inline-start-color: var(--mdp-neutral); }

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

.mdp-dp-item-label {
  flex: 1 1 auto;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

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

/* The two signatures, in words. The third redundancy after the stripe and the badge — it is
   what survives a monochrome print and a customer who cannot distinguish blue from green. */
.mdp-dp-item-sign {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-accent);
  overflow-wrap: anywhere;
}

.mdp-dp-item-when {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7 — THE DOCUMENT REGISTER
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-dp-docgroup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mdp-sp-2);
  padding-block-end: var(--mdp-sp-1);
  border-block-end: 1px solid var(--mdp-border);
  min-inline-size: 0;
}

.mdp-dp-docgroup-title {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-dp-docgroup-count {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-faint);
}

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

.mdp-dp-doc {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-3);
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-inline-size: 0;
}

.mdp-dp-doc:last-child {
  border-block-end: 0;
}

/* A withdrawn or superseded document keeps its row — the register is a record — but recedes,
   so the current filing is what the eye lands on. */
.mdp-dp-doc[data-state='removed'],
.mdp-dp-doc[data-state='superseded'] {
  opacity: 0.72;
}

.mdp-dp-doc-icon {
  display: flex;
  flex: 0 0 auto;
  padding-block-start: 2px;
  color: var(--mdp-text-faint);
}

.mdp-dp-doc-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.mdp-dp-doc-name {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  /* A file name is an identifier and wraps rather than truncating, for the same reason a
     deal reference does. */
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

a.mdp-dp-doc-name {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  color: var(--mdp-brand);
  text-decoration: none;
}

a.mdp-dp-doc-name:hover {
  text-decoration: underline;
}

/* The focus ring is the token's, unmodified — the platform's one focus treatment, so a
   keyboard user sees the same ring here as everywhere else. */
a.mdp-dp-doc-name: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-dp-doc-mark {
  display: inline-flex;
  flex: 0 0 auto;
}

.mdp-dp-doc-meta {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-dp-doc-note {
  font-size: var(--mdp-fs-2xs);
  font-style: italic;
  color: var(--mdp-text-faint);
  overflow-wrap: anywhere;
}

.mdp-dp-doc-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mdp-sp-1);
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 — THE DEAL HISTORY

   A spine, not a stack of cards. One continuous rule down the inline-start edge with a node
   per event, tinted by who acted — so the shape of the record (a busy week, a quiet month, a
   burst of counterparty activity) is legible before a single line is read.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-dp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  margin: 0;
  min-inline-size: 0;
}

.mdp-dp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
}

.mdp-dp-legend-item::before {
  content: '';
  inline-size: 9px;
  block-size: 9px;
  flex: 0 0 auto;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-neutral);
}

.mdp-dp-legend-item[data-origin='you']::before { background: var(--mdp-brand); }
.mdp-dp-legend-item[data-origin='them']::before { background: var(--mdp-accent); }
.mdp-dp-legend-item[data-origin='system']::before { background: var(--mdp-neutral); }

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

.mdp-dp-event {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-3);
  padding-inline-start: var(--mdp-sp-1);
  /* The spine. A border on the item rather than a positioned pseudo-element, so it mirrors
     in Arabic by itself and does not vanish in forced-colours mode. */
  border-inline-start: 2px solid var(--mdp-border);
  min-inline-size: 0;
}

.mdp-dp-event:first-child { padding-block-start: var(--mdp-sp-1); }
.mdp-dp-event:last-child { padding-block-end: var(--mdp-sp-1); }

.mdp-dp-event-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 auto;
  /* Pulled onto the spine so the node sits ON the line rather than beside it. A negative
     logical margin, so Arabic mirrors without a rule. */
  margin-inline-start: calc(-1 * var(--mdp-sp-4));
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface);
  color: var(--mdp-text-faint);
}

.mdp-dp-event[data-origin='you'] .mdp-dp-event-mark {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
  color: var(--mdp-brand);
}

.mdp-dp-event[data-origin='them'] .mdp-dp-event-mark {
  border-color: var(--mdp-accent-border);
  background: var(--mdp-accent-soft);
  color: var(--mdp-accent);
}

.mdp-dp-event-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.mdp-dp-event-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

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

/* YOU / COUNTERPARTY / SYSTEM in words, beside the tinted node. Colour alone would leave the
   attribution unreadable in print and to a colour-blind reader. */
.mdp-dp-event-who {
  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);
  white-space: nowrap;
}

.mdp-dp-event[data-origin='you'] .mdp-dp-event-who { color: var(--mdp-brand); }
.mdp-dp-event[data-origin='them'] .mdp-dp-event-who { color: var(--mdp-accent); }

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

.mdp-dp-event-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-1) var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-dp-event-at,
.mdp-dp-event-actor {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9 — READINESS, PARTIES AND NAVIGATION OUT
   ═══════════════════════════════════════════════════════════════════════════════ */

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

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

.mdp-dp-action-mark {
  display: flex;
  flex: 0 0 auto;
  padding-block-start: 2px;
  color: var(--mdp-text-faint);
}

/* The NEXT action — the server's own first entry. Weighted, not boxed: it is a sentence
   about what to do next, and a box around it would read as a control. */
.mdp-dp-action[data-next='true'] .mdp-dp-action-mark { color: var(--mdp-brand); }

.mdp-dp-action-text {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-dp-action[data-next='true'] .mdp-dp-action-text {
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

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

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

.mdp-dp-party-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-dp-party-name {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-dp-party-meta {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-dp-party-note {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

/* Full-width stacked links. §10: the passport reports, and every control on it is a door to
   the workspace that owns the act. */
.mdp-dp-go {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10 — NARROW SCREENS

   The ledger, the buckets and the fact strip all collapse to a single column by their own
   `auto-fit` floors. What needs a breakpoint is DENSITY: on a phone the padding that gives a
   desk document its authority costs a third of the reading width.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .mdp-dp-facts {
    gap: var(--mdp-sp-3);
    padding: var(--mdp-sp-3);
  }

  .mdp-dp-thread {
    padding: var(--mdp-sp-3);
  }

  .mdp-dp-term-grid {
    gap: var(--mdp-sp-4);
  }
}

@media (max-width: 560px) {
  /* The term row stacks: at this width a label and a right-aligned value leave neither
     enough room, and a wrapped Incoterm beside a wrapped place name is unreadable. */
  .mdp-dp-term {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .mdp-dp-term-value {
    align-items: flex-start;
    text-align: start;
  }

  .mdp-dp-doc {
    flex-wrap: wrap;
  }

  .mdp-dp-doc-tags {
    padding-inline-start: calc(var(--mdp-sp-4) + var(--mdp-sp-2));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11 — CONTRAST AND FORCED COLOURS

   Both modes must preserve the two distinctions this record is responsible for: reached
   versus not reached, and awaiting versus agreed. Neither may survive on colour alone.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: more) {
  .mdp-dp-facts,
  .mdp-dp-thread,
  .mdp-dp-bucket,
  .mdp-dp-item,
  .mdp-dp-note,
  .mdp-dp-empty {
    border-color: var(--mdp-border-strong);
  }

  .mdp-dp-term {
    border-block-end-color: var(--mdp-border-strong);
  }
}

@media (forced-colors: active) {
  /* Soft backgrounds are dropped by the mode, so the stripes and markers are re-stated as
     borders, which it keeps. */
  .mdp-dp-journey-mark,
  .mdp-dp-event-mark,
  .mdp-dp-item,
  .mdp-dp-bucket {
    border-width: 2px;
  }

  .mdp-dp-journey-step[data-reached='false'] .mdp-dp-journey-mark {
    border-style: dashed;
  }
}