/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — THE OPPORTUNITY DESK
   The twentieth stylesheet. Loaded last.

   The visual language of AI trade discovery: the opportunity pipeline, the opportunity
   card, the fact ledger, the fenced AI Match Insight region, the decision band, the
   one-sided waiting state, the confirmed match and the commercial next step.

   ONE PREFIX, AND THERE IS NO EXCEPTION

   Every selector in this file begins `.mdp-od-`. Not one of them is a bare component
   class, a descendant of a shared root, an element selector or an attribute selector on
   markup this phase did not emit. `.mdp-od-` is new vocabulary: no screen shipped before
   Phase 7 renders a single element carrying it, so every screen in the platform paints
   identically whether this file is loaded or absent, and there is no borrowed-selector
   inventory to state because nothing is borrowed.

   That is possible because the three new pages render inside `deskPage()`, whose root is
   `.mdp-td`. The mast, the rail, the panels, the empty and error grammar, the tab density
   and the responsive table are all `desk.css`'s already — this file is only what discovery
   ADDS on top: the lanes, the cards, the AI fence and the decision states.

   THE ONE VISUAL DECISION WORTH THE NAME

   The AI region is drawn as a bordered, tinted, explicitly-marked enclosure and the fact
   ledger as a plain ruled list on the page surface. That contrast is not decoration: §4 of
   the phase brief requires a customer to be able to tell AI MATCH INSIGHT from ACTUAL
   OPPORTUNITY DATA, and the fastest way anyone reads that distinction is that one of them
   is visibly inside something and the other is not. The `sparkles` mark, the eyebrow, the
   provenance chip and the boundary sentence are the labelled half of the same job; this is
   the half that works before the sentence is read.

   The decision band takes its tone from the SERVER's status via `data-tone`, so the waiting
   state is visually a hold — amber, unfilled, no confirmation glyph — and the confirmed
   match is visually a conclusion. A one-sided acceptance can never pick up the match
   treatment, because the tone comes from the same branch that chose the words.

   NO DATING-APP GRAMMAR (§9). There is no swipe affordance, no card stack, no drag, no
   gradient wash, no glow, no rounded-pill hero and no full-bleed photograph. The cards do
   not animate on hover beyond a border and a one-pixel lift, and they carry one control
   each, which opens the record rather than deciding it.

   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. No rule here sizes an `<svg>` outside a
   `.mdp-od-` element, so the illustration floor `enterprise.css` established is untouched.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1 — ABSENCE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* "Not stated" must never read as a value. It is the same weight as the data around it —
   dimming it to invisibility would hide the fact that a field is empty, which is the one
   thing a customer assessing an opportunity needs to notice. */
.mdp-od-none {
  color: var(--mdp-text-faint);
  font-style: italic;
}

.mdp-od-value { color: var(--mdp-text); }

/* ═══════════════════════════════════════════════════════════════════════════════
   2 — THE PIPELINE LANES
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-od-lanes { min-inline-size: 0; }

.mdp-od-lane-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-od-lane-item { min-inline-size: 0; }

/* A lane is a link, so it is addressable and opens in a new tab like anything else. */
.mdp-od-lane {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  color: var(--mdp-text-muted);
  text-decoration: none;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease),
              background-color var(--mdp-dur-fast) var(--mdp-ease),
              color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-od-lane:hover {
  border-color: var(--mdp-border-strong);
  color: var(--mdp-text);
}

.mdp-od-lane:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
}

/* The open lane. `aria-current="page"` carries the same fact to a screen reader, so this
   is reinforcement rather than the only signal. */
.mdp-od-lane[data-state='here'] {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
  color: var(--mdp-text-strong);
}

/* The response-required lane, marked at rest as well as when open: it is the lane the
   customer is meant to find first, and finding it should not require reading six labels. */
.mdp-od-lane[data-action='true'] {
  border-inline-start: 3px solid var(--mdp-warn);
}

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

.mdp-od-lane[data-state='here'] .mdp-od-lane-icon { color: var(--mdp-brand); }

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

.mdp-od-lane-label {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-tight);
}

.mdp-od-lane-note {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  line-height: var(--mdp-lh-tight);
}

.mdp-od-lane-count {
  flex: none;
  padding: 2px var(--mdp-sp-2);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-3);
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
}

.mdp-od-lane[data-state='here'] .mdp-od-lane-count {
  background: var(--mdp-brand);
  color: var(--mdp-brand-contrast);
}

/* Below 560px the notes are dropped and the lanes become a scrolling strip of labels. A
   six-item wrap of two-line links is most of a phone screen before any opportunity shows. */
@media (max-width: 560px) {
  .mdp-od-lane-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--mdp-sp-1);
    scrollbar-width: thin;
  }

  .mdp-od-lane-item { flex: none; }
  .mdp-od-lane-note { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3 — THE DISCOVERY JOURNEY
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-od-journey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-1) var(--mdp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-od-journey-step {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  color: var(--mdp-text-faint);
  font-size: var(--mdp-fs-xs);
}

/* No connector line between the steps, deliberately. A rail drawn as a progress bar
   invites the reading that everything before the marked stage is done, and this rail makes
   no such claim — it says where you are and nothing about where you have been. */
.mdp-od-journey-step[data-state='here'] { color: var(--mdp-text-strong); }

.mdp-od-journey-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  flex: none;
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
}

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

/* The number is the resting state and the glyph replaces it on the marked step: two marks
   in one 22px circle would be illegible, and the glyph is what carries the meaning. */
.mdp-od-journey-icon { display: none; }
.mdp-od-journey-step[data-state='here'] .mdp-od-journey-n { display: none; }
.mdp-od-journey-step[data-state='here'] .mdp-od-journey-icon { display: inline-flex; }

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

.mdp-od-journey-label { font-weight: var(--mdp-fw-medium); }

.mdp-od-journey-step[data-state='here'] .mdp-od-journey-label {
  font-weight: var(--mdp-fw-semibold);
}

.mdp-od-journey-here {
  padding: 1px var(--mdp-sp-2);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-brand-soft);
  color: var(--mdp-brand);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* On a phone the journey collapses to the stage the customer is on. Six stages wrapped
   over three lines is navigation furniture where the screen should be showing work. */
@media (max-width: 640px) {
  .mdp-od-journey-step[data-state='idle'] { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4 — THE OPPORTUNITY CARD
   ═══════════════════════════════════════════════════════════════════════════════ */

/* `auto-fill` rather than `auto-fit`: with one opportunity in a lane, `auto-fit` collapses
   the empty tracks and stretches that single card across a 27" monitor, which reads as a
   different component from the same card in a full lane. */
.mdp-od-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

@media (max-width: 720px) {
  .mdp-od-grid { grid-template-columns: 1fr; }
}

.mdp-od-card {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-surface);
  min-inline-size: 0;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease),
              box-shadow var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-od-card:hover {
  border-color: var(--mdp-border-strong);
  box-shadow: var(--mdp-shadow-sm);
}

/* The one card that wants an answer, marked on its leading edge. A single hairline rather
   than a filled card: a lane of twenty tinted cards is a lane with no emphasis in it. */
.mdp-od-card[data-action='true'] {
  border-inline-start: 3px solid var(--mdp-warn);
}

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

.mdp-od-card-id { min-inline-size: 0; }

.mdp-od-card-product {
  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);
  /* `break-word` rather than `anywhere`: a long product name should wrap at a word, not be
     chopped mid-syllable, and the card is a grid item with a floor rather than a table
     column sized from min-content. */
  overflow-wrap: break-word;
}

.mdp-od-card-link {
  color: inherit;
  text-decoration: none;
}

.mdp-od-card-link:hover { text-decoration: underline; }

.mdp-od-card-link:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
  border-radius: var(--mdp-r-xs);
}

/* The reference is the only name an unrevealed opportunity has. Bidi-isolated so an ASCII
   reference inside an Arabic paragraph keeps its own reading order. */
.mdp-od-card-ref {
  margin: 2px 0 0;
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  unicode-bidi: isolate;
}

.mdp-od-card-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex: none;
}

.mdp-od-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mdp-sp-2) var(--mdp-sp-3);
  margin: 0;
  padding-block: var(--mdp-sp-3);
  border-block: 1px solid var(--mdp-border-subtle);
}

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

.mdp-od-card-fact { min-inline-size: 0; }

.mdp-od-card-term {
  margin: 0;
  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-faint);
}

.mdp-od-card-def {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text);
  overflow-wrap: break-word;
}

.mdp-od-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-2);
}

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

/* The score badge is `desk.css`'s own component; this wrapper only stops it stretching when
   the meta row wraps onto a second line. */
.mdp-od-card-score {
  display: inline-flex;
  flex: none;
}

.mdp-od-card-when {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}

.mdp-od-card-actions { flex: none; }

/* The per-card line restating that row's own state. Amber for "you owe an answer", plain
   for "you are waiting" — the second is a fact, not an alert. */
.mdp-od-card-note {
  margin: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  line-height: var(--mdp-lh-normal);
}

.mdp-od-card[data-action='true'] .mdp-od-card-note {
  background: var(--mdp-warn-soft);
  color: var(--mdp-text);
}

/* ── The counterparty line, at whichever resolution the server authorised ────────── */

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

.mdp-od-cp-sealed {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  padding: 1px var(--mdp-sp-2);
  border: 1px dashed var(--mdp-border-strong);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-xs);
}

/* A dashed enclosure and a padlock, because "identity sealed" is a deliberate platform
   state and must not read as a company whose name failed to load. */
.mdp-od-cp-lock {
  display: inline-flex;
  color: var(--mdp-text-faint);
}

.mdp-od-cp-name {
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

.mdp-od-cp-where {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5 — THE FACT LEDGER — WHAT THE PLATFORM RECORDED
   ═══════════════════════════════════════════════════════════════════════════════ */

/* A ruled list on the page surface: no enclosure, no tint, no mark. The visual opposite of
   the AI region below, which is the point (§4). */
.mdp-od-ledger {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-inline-size: 0;
}

.mdp-od-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-2);
  border-block-end: 1px solid var(--mdp-border-subtle);
}

.mdp-od-ledger-row:last-child { border-block-end: 0; }

@media (max-width: 480px) {
  .mdp-od-ledger-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.mdp-od-ledger-term {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}

.mdp-od-ledger-def {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text);
  overflow-wrap: break-word;
  min-inline-size: 0;
}

.mdp-od-ledger-mono {
  font-family: var(--mdp-font-mono);
  unicode-bidi: isolate;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6 — AI MATCH INSIGHT — WHAT THE ENGINE SAID ABOUT THOSE FACTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* THE FENCE. A bordered, tinted enclosure with its own leading rule, so the boundary
   between assessment and record is legible before a word of either is read. */
.mdp-od-ai {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-accent-border);
  border-inline-start: 3px solid var(--mdp-accent);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-accent-soft);
  min-inline-size: 0;
}

/* The compact form, for a context that shows the insight beside other panels rather than as
   the column's subject. It loses padding and the component bars — never the boundary
   sentence, the provenance chip or the "cannot" line, because those are the guarantee. */
.mdp-od-ai[data-compact='true'] {
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-3);
}

.mdp-od-ai-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

.mdp-od-ai-mark {
  display: inline-flex;
  flex: none;
  color: var(--mdp-accent);
}

.mdp-od-ai-heading {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.mdp-od-ai-eyebrow {
  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-accent);
}

.mdp-od-ai-title {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
}

/* PROVENANCE. Whether the paragraph is the model's or the deterministic fallback, said on
   the screen rather than assumed. Presenting a template as reasoning would be exactly the
   small dishonesty an enterprise customer is entitled to be protected from. */
.mdp-od-ai-source {
  flex: none;
  padding: 2px var(--mdp-sp-2);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}

.mdp-od-ai-source[data-tone='ai'] {
  border-color: var(--mdp-accent-border);
  color: var(--mdp-accent);
}

/* The boundary sentence. Said in words as well as in geometry, because a customer who
   turns off colour, prints the page or reads it aloud gets the same guarantee. */
.mdp-od-ai-boundary {
  margin: 0;
  padding-block-end: var(--mdp-sp-2);
  border-block-end: 1px solid var(--mdp-accent-border);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-od-ai-block { min-inline-size: 0; }

.mdp-od-ai-blocktitle {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0 0 var(--mdp-sp-2);
  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);
}

.mdp-od-ai-blockicon {
  display: inline-flex;
  flex: none;
}

/* Reasons read as confirmations, gaps as cautions, limitations as notes — three different
   things the engine is saying, and merging their treatment would merge their meaning. */
.mdp-od-ai-block[data-kind='why'] .mdp-od-ai-blockicon { color: var(--mdp-success); }
.mdp-od-ai-block[data-kind='gaps'] .mdp-od-ai-blockicon { color: var(--mdp-warn); }
.mdp-od-ai-block[data-kind='limits'] .mdp-od-ai-blockicon { color: var(--mdp-info); }

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

.mdp-od-ai-item {
  position: relative;
  padding-inline-start: var(--mdp-sp-4);
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: break-word;
}

/* A logical-property bullet, so the marker sits on the leading edge in both directions
   without an `[dir='rtl']` rule. */
.mdp-od-ai-item::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--mdp-sp-1);
  inset-block-start: 0.55em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-accent);
}

.mdp-od-ai-empty {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-style: italic;
  color: var(--mdp-text-faint);
}

.mdp-od-ai-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding-block: var(--mdp-sp-2);
}

.mdp-od-ai-scorenote {
  flex: 1 1 14rem;
  min-inline-size: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  line-height: var(--mdp-lh-snug);
}

.mdp-od-ai-narrative {
  margin: 0;
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface);
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  /* The engine writes paragraphs; a single line of text collapsed out of them would read
     as one run-on sentence. */
  white-space: pre-line;
  overflow-wrap: break-word;
}

.mdp-od-ai-components { min-inline-size: 0; }

.mdp-od-ai-componentnote {
  margin: 0 0 var(--mdp-sp-2);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

.mdp-od-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* What the engine may NOT do, at the foot of the region where the engine speaks. Small,
   permanent, and not dismissible. */
.mdp-od-ai-limitline {
  margin: 0;
  padding-block-start: var(--mdp-sp-2);
  border-block-start: 1px solid var(--mdp-accent-border);
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7 — THE DECISION, THE WAIT AND THE MATCH
   ═══════════════════════════════════════════════════════════════════════════════ */

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

/* THE TONE COMES FROM THE SERVER'S STATUS, through the same branch that chose the words.
   A one-sided acceptance is `wait` and cannot pick up the `match` treatment, because there
   is no code path that assigns `match` without a status from `MATCHED_STATES`. */
.mdp-od-decide[data-tone='brand'] {
  border-color: var(--mdp-brand-border);
  border-inline-start-color: var(--mdp-brand);
  background: var(--mdp-brand-soft);
}

.mdp-od-decide[data-tone='wait'] {
  border-color: var(--mdp-warn);
  border-inline-start-color: var(--mdp-warn);
  background: var(--mdp-warn-soft);
}

.mdp-od-decide[data-tone='match'] {
  border-color: var(--mdp-success);
  border-inline-start-color: var(--mdp-success);
  background: var(--mdp-success-soft);
}

.mdp-od-decide[data-tone='warn'] {
  border-inline-start-color: var(--mdp-warn);
  background: var(--mdp-surface-2);
}

.mdp-od-decide[data-tone='closed'] {
  border-inline-start-color: var(--mdp-neutral);
  background: var(--mdp-surface-2);
}

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

.mdp-od-decide-mark {
  display: inline-flex;
  flex: none;
  padding: var(--mdp-sp-2);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  color: var(--mdp-text-muted);
}

.mdp-od-decide[data-tone='brand'] .mdp-od-decide-mark { color: var(--mdp-brand); }
.mdp-od-decide[data-tone='wait'] .mdp-od-decide-mark { color: var(--mdp-warn); }
.mdp-od-decide[data-tone='match'] .mdp-od-decide-mark { color: var(--mdp-success); }

.mdp-od-decide-text {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.mdp-od-decide-eyebrow {
  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);
}

.mdp-od-decide-title {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-lg);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
}

.mdp-od-decide-body {
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
}

/* The sentence that keeps a waiting state from being misread as a match. Set apart from
   the body so it is not skimmed past. */
.mdp-od-decide-note {
  margin: 0;
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-od-decide-locked {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-od-decide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* ── What each answer does, before either is chosen ──────────────────────────────── */

.mdp-od-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mdp-sp-3);
}

@media (max-width: 640px) {
  .mdp-od-outcomes { grid-template-columns: 1fr; }
}

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

.mdp-od-outcome-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 2px;
}

.mdp-od-outcome[data-kind='accept'] .mdp-od-outcome-icon { color: var(--mdp-success); }
.mdp-od-outcome[data-kind='decline'] .mdp-od-outcome-icon { color: var(--mdp-text-muted); }

.mdp-od-outcome-text { min-inline-size: 0; }

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

.mdp-od-outcome-body {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

/* ── The match stamps ────────────────────────────────────────────────────────────── */

.mdp-od-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-od-stamp {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
}

.mdp-od-stamp-term {
  font-size: var(--mdp-fs-2xs);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-od-stamp-when {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 — THE COUNTERPARTY PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-od-cp-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

.mdp-od-cp-mark {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-muted);
}

.mdp-od-cp[data-state='named'] .mdp-od-cp-mark { color: var(--mdp-success); }

.mdp-od-cp-title {
  margin: 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

.mdp-od-cp-sub {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

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

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

.mdp-od-cp-term {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-od-cp-def {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text);
  overflow-wrap: break-word;
}

/* The disclosure rule, stated on the panel it governs. */
.mdp-od-cp-rule {
  margin: 0;
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9 — THE COMMERCIAL NEXT STEP
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-od-next-steps {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-od-next-step {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

/* Done and pending come from the server's own stamps — `connectedAt`,
   `connectionRequestedAt`, `deal` — never from what the customer just clicked. */
.mdp-od-next-step[data-state='done'] {
  border-color: var(--mdp-success);
  background: var(--mdp-success-soft);
}

.mdp-od-next-step[data-state='pending'] {
  border-color: var(--mdp-warn);
  background: var(--mdp-warn-soft);
}

.mdp-od-next-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-3);
  color: var(--mdp-text-strong);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
}

.mdp-od-next-text {
  flex: 1 1 auto;
  min-inline-size: 0;
}

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

.mdp-od-next-body {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-od-next-state {
  margin: var(--mdp-sp-2) 0 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-muted);
}

.mdp-od-next-action { flex: none; }

@media (max-width: 560px) {
  /* The control drops beneath the text rather than squeezing it: a button and a sentence
     sharing 390px leaves neither legible. */
  .mdp-od-next-step { flex-wrap: wrap; }
  .mdp-od-next-action { inline-size: 100%; }
}

.mdp-od-next-rule {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

.mdp-od-next-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10 — THE MATCHING PROFILE
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-od-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mdp-sp-4);
  align-items: start;
  min-inline-size: 0;
}

/* `min-inline-size: 0` on the field wrapper for the reason `desk.css` documents on its
   own: a grid item's default `min-width: auto` is what makes a form control refuse to
   shrink below its intrinsic width and push a horizontal scrollbar onto a 390px screen. */
.mdp-od-field {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

/* Whether this control EXCLUDES or merely INFLUENCES — the server's own hard/preference
   policy, per field. Confusing the two is how a customer ends up with an empty pipeline
   and no idea which control caused it. */
.mdp-od-field-chip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11 — EMPTY, LOADING AND FOOT
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-od-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-6) var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-od-empty-icon {
  display: inline-flex;
  flex: none;
  padding: var(--mdp-sp-2);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
  color: var(--mdp-text-muted);
}

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

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

.mdp-od-empty-body {
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

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

/* The pipeline loads into its own geometry rather than into a bar, so the layout does not
   jump when the cards arrive. */
.mdp-od-skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--mdp-sp-4);
}

@media (max-width: 720px) {
  .mdp-od-skel { grid-template-columns: 1fr; }
}

.mdp-od-skel-card {
  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);
  block-size: 168px;
}

.mdp-od-skel-line {
  block-size: 12px;
  border-radius: var(--mdp-r-xs);
  background: var(--mdp-skeleton);
}

.mdp-od-skel-line[data-w='lg'] { inline-size: 70%; }
.mdp-od-skel-line[data-w='md'] { inline-size: 50%; }
.mdp-od-skel-line[data-w='sm'] { inline-size: 30%; }

.mdp-od-foot {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
}

.mdp-od-foot-note {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* The mast meta row on the record screen, which carries the status and confidence badges. */
.mdp-od-mast-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
}

/* Motion is a courtesy, not a signal: every transition above is a colour or a shadow, and
   a customer who has asked for less of it loses nothing but the fade. */
@media (prefers-reduced-motion: reduce) {
  .mdp-od-lane,
  .mdp-od-card {
    transition: none;
  }
}