/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — THE WEEKLY TRADE INTELLIGENCE BRIEF (PHASE 9)

   Every selector in this file is prefixed `.mdp-wb-`. Nothing here reaches a class any other
   screen uses, so no completed stylesheet needs a line changed and removing this file removes
   this phase's presentation entirely (Rule 2, Rule 3). The panel chrome, the masthead and the
   stack come from `desk.css` unchanged — this sheet styles only what a weekly brief adds.

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

   ── LOGICAL PROPERTIES, ALWAYS ────────────────────────────────────────────────
   `inline-size`, `inset-inline-start`, `padding-inline`, `border-inline-start`, `margin-block`.
   There is not one `[dir='rtl']` rule in this file and there must never be: Arabic mirrors
   because the geometry is written in reading order rather than in left and right.

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

   1. MAKING ATTENTION DOMINATE. `.mdp-wb-q` is the heaviest element on the page: full-bleed
      rows, a coloured rank edge, a large tally and a visible destination. §7 asks that
      attention and commercial activity dominate the interface, and weight is how a reader's
      eye is told which section that is before they have read a word.

   2. KEEPING FACT AND ADVICE SEPARABLE AT A GLANCE. `.mdp-wb-ai` is the ONLY fenced, tinted,
      accent-bordered region on this screen. Everything else — figures, queue, ledger, market
      signals — sits on the page surface. A reader scanning the brief can see which paragraphs
      the platform is asserting and which the engine is advising before reading either.

   3. NOT OVERFLOWING. `min-inline-size: 0` on every grid and flex item that holds text. An
      Arabic company name, a long product label or a stored digest title must wrap, never widen
      the page — horizontal scroll on a brief is the defect §8 tests for at three widths.

   ── AND WHAT IT IS DELIBERATELY NOT ───────────────────────────────────────────
   No charts, no sparklines, no gauges, no donuts, no gradients that imply momentum, no
   decorative KPI tiles and no percentage of a total this screen did not receive. The figures
   are typographic because each one is a single stored number, and a shape drawn around a
   single number is decoration pretending to be analysis. §7 rules it out and there is nothing
   here to draw one with.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Section scaffolding ───────────────────────────────────────────────────── */

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

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

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

.mdp-wb-link {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-brand);
}

/* ── Text ──────────────────────────────────────────────────────────────────── */

.mdp-wb-lede {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

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

/* WHERE A REGION'S NUMBERS CAME FROM. Quieter than the content it qualifies and never hidden
   behind a tooltip: a count whose window is only discoverable on hover is a count a keyboard
   or touch reader cannot verify. */
.mdp-wb-source {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
  min-inline-size: 0;
}

.mdp-wb-source-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 1px;
  color: var(--mdp-text-faint);
}

/* An absence, drawn as an absence. Never the same weight as a value, so a scan of the column
   separates "nothing to report" from a figure without reading the words. */
.mdp-wb-none {
  font-style: italic;
  color: var(--mdp-text-faint);
}

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

.mdp-wb-time {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  white-space: nowrap;
}

/* ── The executive figures ─────────────────────────────────────────────────── */

/* `auto-fit` with a floor rather than a fixed column count: eight figures reflow from four
   columns to two to one as the container narrows, without a breakpoint per width. */
.mdp-wb-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-wb-figs-cell { min-inline-size: 0; }

.mdp-wb-fig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  block-size: 100%;
  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;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease),
              background-color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-wb-fig[data-link='true'] {
  text-decoration: none;
  color: inherit;
}

.mdp-wb-fig[data-link='true']:hover {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
}

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

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

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

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

/* A SUPPRESSED OR MISSING FIGURE IS NOT A BIG ZERO. It is set at reading size, in the absence
   treatment, because a 30px "—" in a figure slot reads as a value the eye then tries to
   compare against its neighbours. */
.mdp-wb-fig-none {
  font-size: var(--mdp-fs-sm);
  font-style: italic;
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

.mdp-wb-fig-note {
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

/* ── What the report was built from ────────────────────────────────────────── */

.mdp-wb-basis {
  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-inset);
  min-inline-size: 0;
}

.mdp-wb-basis-summary {
  cursor: pointer;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-muted);
}

.mdp-wb-basis-summary:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
}

.mdp-wb-basis-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--mdp-sp-1) var(--mdp-sp-4);
  margin: var(--mdp-sp-3) 0 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-wb-basis-row {
  display: flex;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  font-size: var(--mdp-fs-xs);
  min-inline-size: 0;
}

.mdp-wb-basis-key {
  color: var(--mdp-text-muted);
  min-inline-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ATTENTION REQUIRED — THE HEAVIEST THING ON THE PAGE

   The rank edge is a colour AND a position, never a colour alone: `data-rank` sets the border
   width as well as the hue, so the ordering survives forced-colours mode, greyscale printing
   and colour-blindness. The ranks are also drawn in order, which is the primary encoding —
   colour is confirmation, not information.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-wb-q-item {
  border: 1px solid var(--mdp-border);
  border-inline-start: 3px solid var(--mdp-border-strong);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

.mdp-wb-q-item[data-tone='danger'] {
  border-color: var(--mdp-danger);
  border-inline-start-width: 5px;
  background: var(--mdp-danger-soft);
}

.mdp-wb-q-item[data-tone='warn'] {
  border-color: var(--mdp-warn);
  border-inline-start-width: 4px;
  background: var(--mdp-warn-soft);
}

.mdp-wb-q-item[data-tone='brand'] {
  border-color: var(--mdp-brand-border);
  border-inline-start-color: var(--mdp-brand);
}

.mdp-wb-q-item[data-tone='neutral'] {
  border-color: var(--mdp-border-subtle);
  border-inline-start-color: var(--mdp-neutral);
}

/* THE WHOLE ROW IS THE LINK. One keyboard stop per obligation, not three — a queue that costs
   a keyboard user four tabs to skip is a queue they stop using. */
.mdp-wb-q-row {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  text-decoration: none;
  color: inherit;
  min-inline-size: 0;
}

a.mdp-wb-q-row:hover .mdp-wb-q-title { text-decoration: underline; }

a.mdp-wb-q-row:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: calc(var(--mdp-focus-offset) * -1);
  border-radius: var(--mdp-r-md);
}

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

.mdp-wb-q-item[data-tone='danger'] .mdp-wb-q-mark { color: var(--mdp-danger); }
.mdp-wb-q-item[data-tone='warn'] .mdp-wb-q-mark { color: var(--mdp-warn); }
.mdp-wb-q-item[data-tone='brand'] .mdp-wb-q-mark { color: var(--mdp-brand); }

.mdp-wb-q-text {
  display: flex;
  /* BASIS ZERO, NOT AUTO. With `auto` the column's basis is its longest unbreakable content,
     so on a narrow row the text block asks for more than the line has and wraps BELOW the
     icon — which on a phone left some queue rows with the mark on a line of its own and
     others with it inline, for no reason a reader could see. Zero plus `min-inline-size: 0`
     makes the text take whatever is left beside the mark, always. */
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

.mdp-wb-q-sub,
.mdp-wb-q-note {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-wb-q-note { color: var(--mdp-text-faint); }

.mdp-wb-q-side {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--mdp-sp-3);
}

.mdp-wb-q-count {
  font-size: var(--mdp-fs-xl);
  font-weight: var(--mdp-fw-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-strong);
}

.mdp-wb-q-none {
  font-size: var(--mdp-fs-xs);
  font-style: italic;
  color: var(--mdp-text-faint);
}

/* THE DESTINATION, NAMED. §2 asks that every actionable item navigate to the workspace that
   owns it; saying which one before the click is what makes that a promise rather than a
   surprise. */
.mdp-wb-q-go {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-brand);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE WEEKLY ACTIVITY LEDGER
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-wb-evgroup { min-inline-size: 0; }

.mdp-wb-evgroup-head {
  display: flex;
  align-items: baseline;
  gap: var(--mdp-sp-3);
  padding-block-end: var(--mdp-sp-2);
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-inline-size: 0;
}

/* The section label is the DIGEST'S OWN, stored when the period closed. It is a heading and not
   a badge, because it is what a reader navigates the ledger by. */
.mdp-wb-evgroup-title {
  flex: 1 1 auto;
  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);
  min-inline-size: 0;
}

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

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

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

.mdp-wb-ev:last-child { border-block-end: 0; }

.mdp-wb-ev-row {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-2);
  text-decoration: none;
  color: inherit;
  min-inline-size: 0;
}

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

a.mdp-wb-ev-row:hover .mdp-wb-ev-title { text-decoration: underline; }

a.mdp-wb-ev-row:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: calc(var(--mdp-focus-offset) * -1);
  border-radius: var(--mdp-r-sm);
}

.mdp-wb-ev-dot {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-block-start: 6px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-border-strong);
}

a.mdp-wb-ev-row .mdp-wb-ev-dot { background: var(--mdp-brand); }

.mdp-wb-ev-text {
  display: flex;
  /* BASIS ZERO, NOT AUTO. With `auto` the column's basis is its longest unbreakable content,
     so on a narrow row the text block asks for more than the line has and wraps BELOW the
     icon — which on a phone left some queue rows with the mark on a line of its own and
     others with it inline, for no reason a reader could see. Zero plus `min-inline-size: 0`
     makes the text take whatever is left beside the mark, always. */
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

.mdp-wb-ev-title {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

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

.mdp-wb-ev-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.mdp-wb-ev-go {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-brand);
  white-space: nowrap;
}

/* ── Market signals ────────────────────────────────────────────────────────── */

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

.mdp-wb-siggroup {
  padding: 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-wb-siggroup-title {
  margin: 0 0 var(--mdp-sp-3);
  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-wb-sigs {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.mdp-wb-sig {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-wb-sig-label {
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.mdp-wb-sig-value {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: var(--mdp-sp-1);
}

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

/* THE UNIT IS PRINTED BECAUSE THE FOUR LISTS COUNT FOUR DIFFERENT THINGS — distinct companies,
   distinct companies, opportunities, verified companies. A bare number in four adjacent panels
   would invite a comparison that is not valid. */
.mdp-wb-sig-unit {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE ONE ADVISORY REGION

   Tinted, accent-bordered, fenced. It is the only element on this screen with this treatment,
   and that is the point: the fence is the boundary between what the platform measured and what
   an engine concluded. It is also stated in words inside the region, so the boundary survives
   a theme, a printer and a forced-colours mode that drops the tint.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-wb-ai {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-5);
  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;
}

.mdp-wb-ai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

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

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

.mdp-wb-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-wb-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, ON THE SCREEN RATHER THAN IN THE CODE. The scheduled batch always writes a
   deterministic narrative; a read with AI budget rewrites the prose from the same stored
   facts. Which of the two a reader is looking at is not an implementation detail to them. */
.mdp-wb-ai-source,
.mdp-wb-ai-engine {
  flex: none;
  padding: 2px var(--mdp-sp-2);
  border: 1px solid var(--mdp-accent-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-accent);
  white-space: nowrap;
}

.mdp-wb-ai-engine {
  border-color: var(--mdp-border);
  color: var(--mdp-text-muted);
}

/* ADVISORY, said as a word and not only as a colour — for print, for forced-colours mode, and
   for anyone reading the page aloud. */
.mdp-wb-ai-advisory {
  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-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  white-space: nowrap;
}

.mdp-wb-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-wb-ai-body,
.mdp-wb-ai-loading {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-wb-ai-headline {
  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-wb-ai-narrative {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

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

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

.mdp-wb-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-wb-ai-blockicon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-accent);
}

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

.mdp-wb-ai-reco {
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-accent-border);
  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);
  overflow-wrap: anywhere;
}

.mdp-wb-ai-basis,
.mdp-wb-ai-cannot {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-wb-ai-cannot {
  padding-block-start: var(--mdp-sp-2);
  border-block-start: 1px solid var(--mdp-accent-border);
}

/* ── Where to go next ──────────────────────────────────────────────────────── */

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

.mdp-wb-dests-cell { min-inline-size: 0; }

.mdp-wb-dest {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  block-size: 100%;
  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);
  text-decoration: none;
  color: inherit;
  min-inline-size: 0;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease),
              background-color var(--mdp-dur-fast) var(--mdp-ease);
}

a.mdp-wb-dest:hover {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
}

a.mdp-wb-dest:hover .mdp-wb-dest-title { text-decoration: underline; }

a.mdp-wb-dest:focus-visible {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
}

/* A DESTINATION WITHOUT A DOOR. The Negotiation Desk and the Smart Deal Passport open from a
   specific deal and have no standalone route, so their cards are drawn quieter and carry the
   sentence that says where they open from — rather than being a dead link or a disabled
   button, both of which promise something the architecture does not offer. */
.mdp-wb-dest[data-muted='true'] {
  background: var(--mdp-surface-inset);
  border-style: dashed;
}

.mdp-wb-dest-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 1px;
  color: var(--mdp-brand);
}

.mdp-wb-dest[data-muted='true'] .mdp-wb-dest-icon { color: var(--mdp-text-faint); }

.mdp-wb-dest-text {
  display: flex;
  /* BASIS ZERO, NOT AUTO. With `auto` the column's basis is its longest unbreakable content,
     so on a narrow row the text block asks for more than the line has and wraps BELOW the
     icon — which on a phone left some queue rows with the mark on a line of its own and
     others with it inline, for no reason a reader could see. Zero plus `min-inline-size: 0`
     makes the text take whatever is left beside the mark, always. */
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

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

.mdp-wb-dest-note {
  font-size: var(--mdp-fs-2xs);
  font-style: italic;
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
  overflow-wrap: anywhere;
}

.mdp-wb-dest-go {
  display: inline-flex;
  flex: none;
  align-self: center;
  color: var(--mdp-text-faint);
}

/* ── Deliberate states ─────────────────────────────────────────────────────── */

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

.mdp-wb-empty[data-tone='success'] {
  border-style: solid;
  border-color: var(--mdp-success);
  background: var(--mdp-success-soft);
}

.mdp-wb-empty-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 1px;
  color: var(--mdp-text-muted);
}

.mdp-wb-empty[data-tone='success'] .mdp-wb-empty-icon { color: var(--mdp-success); }

.mdp-wb-empty-text {
  display: flex;
  /* BASIS ZERO, NOT AUTO. With `auto` the column's basis is its longest unbreakable content,
     so on a narrow row the text block asks for more than the line has and wraps BELOW the
     icon — which on a phone left some queue rows with the mark on a line of its own and
     others with it inline, for no reason a reader could see. Zero plus `min-inline-size: 0`
     makes the text take whatever is left beside the mark, always. */
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

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

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

/* A FAILED REGION, DRAWN WHERE ITS CONTENT WOULD HAVE BEEN. The rest of the brief survives —
   which is the whole reason the three loads are independent. */
.mdp-wb-fail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-danger);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-danger-soft);
  min-inline-size: 0;
}

.mdp-wb-fail-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 1px;
  color: var(--mdp-danger);
}

.mdp-wb-fail-text {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

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

.mdp-wb-fail-action { flex: none; }

/* PARTLY LOADED IS NOT FAILED, AND NOT FINE EITHER. Its own treatment, quieter than the error
   and louder than a note. */
.mdp-wb-shortfall {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-warn);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-warn-soft);
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  min-inline-size: 0;
}

.mdp-wb-shortfall-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 1px;
  color: var(--mdp-warn);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NARROW WIDTHS

   Two breaks, both where the content stops fitting rather than at a device name. Every collapse
   is to a single column and NOTHING IS HIDDEN: a brief a customer can only read on a desktop is
   a brief half this platform's users cannot act on.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .mdp-wb-siggrid,
  .mdp-wb-dests {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .mdp-wb-figs {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .mdp-wb-fig { padding: var(--mdp-sp-3); }

  .mdp-wb-fig-value { font-size: var(--mdp-fs-xl); }

  /* THE QUEUE ROW STACKS RATHER THAN SQUEEZING. At 390px a tally, a destination phrase and a
     two-line title on one line leave the title about 90px, which wraps to five lines. Stacking
     keeps every part at a readable size and keeps the row one tap target. */
  .mdp-wb-q-row {
    flex-wrap: wrap;
    padding: var(--mdp-sp-3);
  }

  .mdp-wb-q-side {
    inline-size: 100%;
    justify-content: space-between;
    padding-inline-start: calc(var(--mdp-sp-4) + var(--mdp-sp-3));
  }

  .mdp-wb-q-count { font-size: var(--mdp-fs-lg); }

  .mdp-wb-ev-row {
    flex-wrap: wrap;
    padding-inline: 0;
  }

  .mdp-wb-ev-side {
    inline-size: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-inline-start: calc(var(--mdp-sp-3) + 7px);
  }

  .mdp-wb-ai { padding: var(--mdp-sp-4); }

  .mdp-wb-basis-list { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORCED COLOURS, REDUCED MOTION AND PRINT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* In forced-colours mode the browser drops the tint that fences the advisory region, so the
   fence is restored as a border the mode does honour. The boundary must never depend on a
   colour a user has switched off — which is also why it is stated in words inside the region.
   The queue's rank edge is restored the same way, because the ordering it encodes is
   operational rather than decorative. */
@media (forced-colors: active) {
  .mdp-wb-ai {
    border: 2px solid CanvasText;
    border-inline-start: 4px solid CanvasText;
  }

  .mdp-wb-q-item,
  .mdp-wb-fig,
  .mdp-wb-siggroup,
  .mdp-wb-dest,
  .mdp-wb-empty,
  .mdp-wb-fail,
  .mdp-wb-shortfall {
    border: 1px solid CanvasText;
  }

  .mdp-wb-q-item[data-tone='danger'],
  .mdp-wb-q-item[data-tone='warn'] {
    border-inline-start: 4px solid CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mdp-wb-fig,
  .mdp-wb-dest {
    transition: none;
  }
}

@media print {
  .mdp-wb-ai,
  .mdp-wb-q-item,
  .mdp-wb-evgroup,
  .mdp-wb-siggroup,
  .mdp-wb-fig {
    break-inside: avoid;
    box-shadow: none;
  }

  /* The doorways are the one section a printed brief cannot use. Everything else — the
     figures, the queue, the ledger, the insight — prints as the record it is. */
  .mdp-wb-dests { display: none; }
}