/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — COMMAND CENTER & SHELL REFINEMENT
   The fifteenth stylesheet. Loaded last.

   TWO PARTS, AND THE DIVISION BETWEEN THEM IS DELIBERATE.

   PART A refines chrome that already exists — the brand block, the top bar, the rail and
   its section headings. Those selectors are not new and this sheet does not own them, so
   every rule in Part A is listed in the inventory below with the reason it is there. Each
   one adjusts a value the chrome already sets (a padding, a weight, a colour, a border) and
   none of them introduces a new box, changes a display mode, moves an element between grid
   areas, or alters anything a script reads. The shell's markup, its grid, its collapse
   behaviour and its drawer are untouched — this sheet cannot change them, because it is a
   stylesheet and the shell's geometry is decided in `layout.css`, which it does not edit.

   `enterprise.css` set the precedent for a sheet carrying deliberate unprefixed rules and
   for documenting each of them. This follows it.

   PART B is the command center's own vocabulary. Every selector in it begins `.mdp-cc-`,
   without exception, so it matches nothing any screen shipped before this phase renders,
   and every one of those screens paints identically with this file loaded or absent.

   NO RULE IN THIS FILE SIZES AN `<svg>` OUTSIDE `.mdp-cc-`. The illustration floor
   `enterprise.css` established above stays exactly where it was.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   PART A — SHELL REFINEMENT
   ═══════════════════════════════════════════════════════════════════════════════

   THE INVENTORY. Every unprefixed selector this file writes, and why:

     .mdp-brandbar          deeper background, so the brand column reads as the spine of
                            the shell rather than as another panel
     .mdp-brand-mark        squarer radius and tighter tracking — an institutional mark
                            rather than a rounded app icon
     .mdp-brand-name        tighter tracking at the same size
     .mdp-brand-sub         a touch more letter-spacing, so the descriptor reads as a
                            descriptor and not as a second line of the name
     .mdp-topnav            the same deeper background, so the header is one continuous
                            band across the brand column and the bar
     .mdp-sidenav           the same, and a hairline that matches
     .mdp-nav-section       more space above a heading than below it, so a heading groups
                            with what follows it rather than floating between two groups
     .mdp-nav-section-label wider tracking and a dimmer colour — a label, not a link
     .mdp-nav-item          slightly tighter vertical rhythm so seven sections fit a laptop
                            viewport without a scrollbar
     .mdp-nav-item[aria-current='page']  a firmer selected state
     .mdp-platform-back-label            hidden across one measured band — a bug fix, below
     .mdp-search-launcher                narrower across the same band — the other half of it

   Nothing here changes a size, a position or a display mode that the shell's collapse, its
   drawer or its RTL mirroring depends on. The last two entries are the exception, and they
   are a verified bug fix rather than a refinement; the rule they belong to documents itself. */

.mdp-brandbar,
.mdp-topnav {
  /* One continuous header band. The bar and the brand column already carried two shades of
     the same idea; this settles them on the deeper one so the seam between them disappears
     and the rail below reads as the second plane rather than the third. */
  background: var(--mdp-bg);
}

.mdp-topnav {
  /* The hairline under the header is what separates it from the workspace. Softened, because
     at the new background it was the strongest line on the screen. */
  border-block-end-color: var(--mdp-border-subtle);
}

.mdp-sidenav {
  background: var(--mdp-bg);
  border-inline-end-color: var(--mdp-border-subtle);
}

.mdp-brand-mark {
  /* Squarer. A pill-radiused monogram reads as a consumer app; a 6px corner reads as a mark
     on a document. */
  border-radius: var(--mdp-r-sm);
  letter-spacing: 0.02em;
}

.mdp-brand-name { letter-spacing: -0.01em; }

.mdp-brand-sub {
  letter-spacing: 0.1em;
  color: var(--mdp-text-muted);
}

.mdp-nav-section { margin-block-start: var(--mdp-sp-5); }
.mdp-nav-section:first-child { margin-block-start: var(--mdp-sp-2); }

.mdp-nav-section-label {
  letter-spacing: 0.11em;
  color: var(--mdp-text-faint);
  font-size: var(--mdp-fs-2xs);
}

.mdp-nav-item {
  /* 2px off each side of a rail row, recovered across seven sections, is the difference
     between a rail that fits a 768px-tall laptop viewport and one that scrolls. */
  padding-block: calc(var(--mdp-sp-2) - 1px);
}

.mdp-nav-item[aria-current='page'] {
  /* The selected row already carried a gold wash and an accent bar. Both are kept — this only
     firms the label, so the current location is legible at a glance across the whole rail. */
  font-weight: 600;
  color: var(--mdp-text);
}

/* ── A verified bug: the header did not fit between 1024px and 1127px ──────────

   REPRODUCED, not suspected. At 1024x768 — an iPad in landscape, and one of the viewports
   this phase was required to test — the document scrolled sideways by 66px:
   `documentElement.scrollWidth` 1090 against a `clientWidth` of 1024. The nodes past the
   edge were all header chrome: the popover, the icon buttons, the user menu, its trigger
   and the avatar. Sweeping the width in 4px steps put the band at 1024px through 1127px in
   English and 1024px through 1087px in Arabic, worst at its narrow end and shrinking to
   nothing by 1128px.

   NOT INTRODUCED BY THIS PHASE. Served with this stylesheet replaced by a comment, the same
   sweep returns the same numbers — 1090 at 1024px, the same ten nodes, the same four
   children in the bar at the same four widths. The header has always overflowed here.

   WHY IT HAPPENS. The bar is a flex row of four things: the platform-back chip, the search
   launcher, a spacer and the control group. The chip does not shrink and the control group
   cannot — it is icon buttons at their intrinsic size. So the whole squeeze falls on the
   search launcher, and once it reaches its own floor there is nowhere left for the excess
   to go. Below 1024px this never surfaces because the shell already hides the chip's label
   and narrows the launcher there; the band is simply the stretch above that breakpoint where
   the same pressure exists and nothing relieves it.

   THE FIX IS THE SHELL'S OWN. Rather than invent a behaviour, this applies the two
   declarations the shell already applies below 1024px across the measured band as well, so
   the top of the band behaves like the pixel under it. 1128px is where the sweep came back
   clean in the longer of the two shipped locales; the chip's frozen `max-width: 16rem`
   bounds how much a future translation could move that.

   Rule 2 permits modifying completed behaviour to fix a verified bug. This is one, and it is
   written here rather than in `layout.css`, which stays untouched. */

@media (max-width: 1128px) {
  .mdp-platform-back-label { display: none; }
  .mdp-search-launcher { flex: 1 1 12rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PART B — THE COMMAND CENTER
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-cc {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-6);
  /* Every screen in this application is read at a desk, and a measure that runs the full
     width of a 27" monitor is a measure nobody finishes a sentence on. */
  max-inline-size: var(--mdp-content-max);
}

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

/* ── The masthead ──────────────────────────────────────────────────────────── */

.mdp-cc-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mdp-sp-4);
  padding-block-end: var(--mdp-sp-5);
  border-block-end: 1px solid var(--mdp-border-subtle);
}

.mdp-cc-masthead-text { min-inline-size: 0; }

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

.mdp-cc-title {
  margin: 0;
  font-size: var(--mdp-fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--mdp-text);
}

.mdp-cc-lead {
  margin: var(--mdp-sp-2) 0 0;
  max-inline-size: 62ch;
  font-size: var(--mdp-fs-sm);
  line-height: 1.6;
  color: var(--mdp-text-muted);
}

.mdp-cc-masthead-meta { flex: 0 0 auto; }

.mdp-cc-standing {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface);
  font-size: var(--mdp-fs-xs);
  font-weight: 500;
  color: var(--mdp-text-muted);
  white-space: nowrap;
}

.mdp-cc-led {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--mdp-text-faint);
}

.mdp-cc-led[data-tone='success'] { background: var(--mdp-success); }
.mdp-cc-led[data-tone='warn']    { background: var(--mdp-warn); }
.mdp-cc-led[data-tone='danger']  { background: var(--mdp-danger); }
.mdp-cc-led[data-tone='info']    { background: var(--mdp-info); }

/* ── Rows of panels ────────────────────────────────────────────────────────── */

/* THE ONLY TWO LAYOUT DECISIONS ON THIS SCREEN.

   Attention leads and takes the wider column, because it is the question the screen exists to
   answer. Below 1080px both rows become one column, and — because the DOM order already IS
   the required reading order — nothing needs re-ordering to get there. */

.mdp-cc-lead-row,
.mdp-cc-lower-row {
  display: grid;
  gap: var(--mdp-sp-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1080px) {
  .mdp-cc-lead-row  { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  .mdp-cc-lower-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
}

/* ── A panel ───────────────────────────────────────────────────────────────── */

.mdp-cc-panel {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-surface);
  /* One shadow, low and wide. Institutional depth is a plane sitting on another plane, not a
     halo — there is no glow anywhere in this file. */
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
}

/* The gold rule at the top of a panel is the whole accent vocabulary of this screen: it marks
   the two panels that carry importance and intelligence, and nothing else uses it. */
.mdp-cc-panel[data-tone='brand'] { border-color: var(--mdp-border); }

.mdp-cc-panel[data-tone='brand']::before {
  content: '';
  display: block;
  block-size: 2px;
  border-radius: var(--mdp-r-lg) var(--mdp-r-lg) 0 0;
  background: linear-gradient(90deg, var(--mdp-brand), transparent 62%);
}

.mdp-cc-panel-head {
  padding: var(--mdp-sp-4) var(--mdp-sp-5) var(--mdp-sp-3);
  border-block-end: 1px solid var(--mdp-border-subtle);
}

.mdp-cc-panel-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: 600;
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text);
}

.mdp-cc-panel-icon {
  display: inline-flex;
  color: var(--mdp-text-muted);
}

.mdp-cc-panel-icon svg {
  inline-size: 15px;
  block-size: 15px;
}

.mdp-cc-panel[data-tone='brand'] .mdp-cc-panel-icon { color: var(--mdp-brand); }

.mdp-cc-panel-note {
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: 1.55;
  color: var(--mdp-text-muted);
}

.mdp-cc-panel-body {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: var(--mdp-sp-4) var(--mdp-sp-5) var(--mdp-sp-5);
}

/* ── Needs your attention ──────────────────────────────────────────────────── */

.mdp-cc-attn-wrap,
.mdp-cc-feed-wrap { min-inline-size: 0; }

.mdp-cc-attn,
.mdp-cc-feed,
.mdp-cc-actions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mdp-cc-attn > li + li,
.mdp-cc-feed > li + li { border-block-start: 1px solid var(--mdp-border-subtle); }

.mdp-cc-attn-row {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-4);
  /* A 44px-tall target at the smallest text size in the design system, which is the
     accessibility floor for a touch target and not a coincidence. */
  min-block-size: 44px;
  padding: var(--mdp-sp-3) var(--mdp-sp-2);
  margin-inline: calc(var(--mdp-sp-2) * -1);
  border-radius: var(--mdp-r-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--mdp-dur-fast) var(--mdp-ease-out);
}

.mdp-cc-attn-row:hover { background: var(--mdp-surface-2); }

.mdp-cc-attn-value {
  flex: 0 0 auto;
  min-inline-size: 2.4ch;
  font-size: var(--mdp-fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--mdp-text);
}

/* Gold means "this is waiting on a decision by you". Teal means "this is live and available".
   Red appears nowhere on this row, because a pending decision is not an error. */
.mdp-cc-attn-value[data-tone='brand']  { color: var(--mdp-brand); }
.mdp-cc-attn-value[data-tone='accent'] { color: var(--mdp-accent); }

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

.mdp-cc-attn-label {
  font-size: var(--mdp-fs-sm);
  font-weight: 500;
  color: var(--mdp-text);
}

.mdp-cc-attn-note {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-cc-attn-go {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--mdp-text-faint);
  transition: transform var(--mdp-dur-fast) var(--mdp-ease-out), color var(--mdp-dur-fast) var(--mdp-ease-out);
}

.mdp-cc-attn-go svg {
  inline-size: 16px;
  block-size: 16px;
}

.mdp-cc-attn-row:hover .mdp-cc-attn-go {
  color: var(--mdp-brand);
  /* Logical, so the nudge follows the reading direction and points the right way in Arabic. */
  transform: translateX(2px);
}

:root[dir='rtl'] .mdp-cc-attn-row:hover .mdp-cc-attn-go { transform: translateX(-2px); }

/* ── Quick actions ─────────────────────────────────────────────────────────── */

.mdp-cc-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--mdp-sp-2);
}

.mdp-cc-action {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-block-size: 44px;
  block-size: 100%;
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
  text-decoration: none;
  color: var(--mdp-text);
  transition:
    border-color var(--mdp-dur-fast) var(--mdp-ease-out),
    background var(--mdp-dur-fast) var(--mdp-ease-out);
}

.mdp-cc-action:hover {
  border-color: var(--mdp-border-strong);
  background: var(--mdp-surface-3);
}

.mdp-cc-action[data-primary='true'] {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
}

.mdp-cc-action-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--mdp-text-muted);
}

.mdp-cc-action[data-primary='true'] .mdp-cc-action-icon { color: var(--mdp-brand); }

.mdp-cc-action-icon svg {
  inline-size: 16px;
  block-size: 16px;
}

.mdp-cc-action-label {
  font-size: var(--mdp-fs-xs);
  font-weight: 500;
  line-height: 1.4;
}

/* ── The deal journey ──────────────────────────────────────────────────────── */

.mdp-cc-journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mdp-sp-3);
  /* 9.5rem, not a wider floor: six steps are one pipeline, and a pipeline that wraps after
     the fifth step reads as two unrelated groups. Measured across the tested widths, this
     track keeps all six on one line down to 1366px — the narrowest laptop in the set — and
     then folds to three, three and two rather than to five and one. */
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.mdp-cc-step-wrap { min-inline-size: 0; }

.mdp-cc-step {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  block-size: 100%;
  padding: 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;
  transition:
    border-color var(--mdp-dur-fast) var(--mdp-ease-out),
    background var(--mdp-dur-fast) var(--mdp-ease-out);
}

a.mdp-cc-step:hover {
  border-color: var(--mdp-border-strong);
  background: var(--mdp-surface-3);
}

.mdp-cc-step[data-tone='brand']  { border-color: var(--mdp-brand-border); }
.mdp-cc-step[data-tone='accent'] { border-color: var(--mdp-accent-border); }

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

.mdp-cc-step-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--mdp-r-xs);
  background: var(--mdp-surface-3);
  font-size: var(--mdp-fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-faint);
}

.mdp-cc-step-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--mdp-text-muted);
}

.mdp-cc-step-icon svg {
  inline-size: 15px;
  block-size: 15px;
}

.mdp-cc-step[data-tone='brand'] .mdp-cc-step-icon  { color: var(--mdp-brand); }
.mdp-cc-step[data-tone='accent'] .mdp-cc-step-icon { color: var(--mdp-accent); }

.mdp-cc-step-name {
  min-inline-size: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: 600;
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-cc-step-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-4);
  margin-block-start: auto;
}

.mdp-cc-step-figure {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
}

.mdp-cc-step-value {
  font-size: var(--mdp-fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--mdp-text);
}

.mdp-cc-step-label,
.mdp-cc-step-note {
  font-size: var(--mdp-fs-2xs);
  line-height: 1.5;
  color: var(--mdp-text-faint);
}

.mdp-cc-step-prose {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin-block-start: auto;
}

.mdp-cc-step-lead,
.mdp-cc-step-note { margin: 0; }

.mdp-cc-step-lead {
  font-size: var(--mdp-fs-xs);
  font-weight: 500;
  line-height: 1.5;
  color: var(--mdp-text);
}

/* ── Commercial activity ───────────────────────────────────────────────────── */

.mdp-cc-feed-row {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  min-block-size: 44px;
  padding: var(--mdp-sp-3) var(--mdp-sp-2);
  margin-inline: calc(var(--mdp-sp-2) * -1);
  border-radius: var(--mdp-r-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--mdp-dur-fast) var(--mdp-ease-out);
}

.mdp-cc-feed-row:hover { background: var(--mdp-surface-2); }

.mdp-cc-feed-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--mdp-text-faint);
}

.mdp-cc-feed-icon svg {
  inline-size: 15px;
  block-size: 15px;
}

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

.mdp-cc-feed-title {
  font-size: var(--mdp-fs-sm);
  font-weight: 500;
  color: var(--mdp-text);
  /* A product line or a deal title typed by another company can be any length. It is clipped
     to one line here and shown in full on the screen the row links to. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdp-cc-feed-sub {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdp-cc-feed-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}

/* ── The AI trade pulse ────────────────────────────────────────────────────── */

.mdp-cc-pulse {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-4);
}

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

.mdp-cc-block + .mdp-cc-block {
  padding-block-start: var(--mdp-sp-4);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

.mdp-cc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

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

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

.mdp-cc-block-lead {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--mdp-text);
}

.mdp-cc-block-body {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: 1.65;
  color: var(--mdp-text-muted);
  /* The engine writes as many sentences as the evidence supports. Four lines of it belong on
     a command center; the rest belongs on the report screen the footer links to. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mdp-cc-block-hint {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

.mdp-cc-block-foot { margin-block-start: var(--mdp-sp-1); }

/* ── Empty, partial and failed states ──────────────────────────────────────── */

.mdp-cc-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-2);
}

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

.mdp-cc-empty[data-tone='accent'] .mdp-cc-empty-icon { color: var(--mdp-accent); }
/* The one place red appears on this screen, and only for a request that genuinely failed. */
.mdp-cc-empty[data-tone='danger'] .mdp-cc-empty-icon { color: var(--mdp-danger); }

.mdp-cc-empty-icon svg {
  inline-size: 14px;
  block-size: 14px;
}

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

.mdp-cc-empty-body {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: 1.55;
  color: var(--mdp-text-muted);
}

.mdp-cc-foot-note {
  margin: var(--mdp-sp-3) 0 0;
  font-size: var(--mdp-fs-2xs);
  line-height: 1.5;
  color: var(--mdp-text-faint);
}

.mdp-cc-skel {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-2);
}

/* ── Narrow viewports ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .mdp-cc { gap: var(--mdp-sp-5); }

  .mdp-cc-title { font-size: var(--mdp-fs-xl); }

  .mdp-cc-panel-head { padding-inline: var(--mdp-sp-4); }
  .mdp-cc-panel-body { padding-inline: var(--mdp-sp-4); }

  /* Two per row rather than one, because six full-width bars is a screen of scrolling before
     the journey below them is reached. */
  .mdp-cc-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdp-cc-journey { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }

  .mdp-cc-attn-value { font-size: var(--mdp-fs-lg); }
}

@media (max-width: 480px) {
  /* On a phone the status badge and the timestamp together claim about 150px of a 390px row,
     and what they take comes out of the title — the one part of the row that identifies the
     deal. Below 480px they move to a second line, indented to the text column, so the title
     gets the full width and stops being clipped after four words. */
  .mdp-cc-feed-row {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: var(--mdp-sp-1);
  }

  .mdp-cc-feed-icon { padding-block-start: 2px; }

  .mdp-cc-feed-meta {
    flex: 1 0 100%;
    padding-inline-start: calc(15px + var(--mdp-sp-3));
  }
}

@media (max-width: 400px) {
  /* At 390px a two-column action grid puts "Analyze LC/Guarantee" on three lines. One column
     is the honest answer at this width. */
  .mdp-cc-actions,
  .mdp-cc-journey { grid-template-columns: minmax(0, 1fr); }
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* The chevron nudge is the only movement this screen has, and it is removed rather than
     slowed: a customer who asked for no motion asked for none. */
  .mdp-cc-attn-row:hover .mdp-cc-attn-go,
  :root[dir='rtl'] .mdp-cc-attn-row:hover .mdp-cc-attn-go { transform: none; }

  .mdp-cc-attn-row,
  .mdp-cc-feed-row,
  .mdp-cc-action,
  .mdp-cc-step,
  .mdp-cc-attn-go { transition: none; }
}

/* ── Print ─────────────────────────────────────────────────────────────────── */

@media print {
  /* A command center is a screen somebody will print for a meeting. Panels open flat, hover
     depth is dropped, and the clamped narrative prints in full. */
  .mdp-cc-panel {
    box-shadow: none;
    break-inside: avoid;
  }

  .mdp-cc-block-body {
    display: block;
    overflow: visible;
  }
}