/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — COMPONENT LIBRARY

   One stylesheet for the whole reusable component set, in the same order as
   `app/components/`. Every component here is authored exactly once; a page that
   needs a variant adds a `data-` attribute, never a second block of CSS. That rule
   is what the requirement "no duplicated components" actually costs, and it is the
   reason the pages contain no styles of their own.

   Every colour, radius, space and duration is a token. There is no hex value below
   this line except inside a `box-shadow` alpha, where a token would be ignored.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-4);
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--mdp-r-sm);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--mdp-dur-fast) var(--mdp-ease),
              border-color var(--mdp-dur-fast) var(--mdp-ease),
              color var(--mdp-dur-fast) var(--mdp-ease),
              transform var(--mdp-dur-instant) var(--mdp-ease);
}
.mdp-btn:hover { text-decoration: none; }
.mdp-btn:active:not([disabled]):not([aria-disabled='true']) { transform: translateY(1px); }
.mdp-btn[disabled], .mdp-btn[aria-disabled='true'] { opacity: .5; }
.mdp-btn svg { width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.9; }

.mdp-btn[data-variant='primary'] { background: var(--mdp-brand); color: var(--mdp-brand-contrast); }
.mdp-btn[data-variant='primary']:hover:not([disabled]):not([aria-disabled='true']) { background: var(--mdp-brand-hover); }

.mdp-btn[data-variant='secondary'] {
  background: var(--mdp-surface-2);
  border-color: var(--mdp-border);
  color: var(--mdp-text);
}
.mdp-btn[data-variant='secondary']:hover:not([disabled]):not([aria-disabled='true']) {
  background: var(--mdp-surface-3);
  border-color: var(--mdp-border-strong);
}

.mdp-btn[data-variant='ghost'] { color: var(--mdp-text-muted); }
.mdp-btn[data-variant='ghost']:hover:not([disabled]):not([aria-disabled='true']) {
  background: var(--mdp-surface-inset);
  color: var(--mdp-text);
}

.mdp-btn[data-variant='danger'] {
  background: var(--mdp-danger-soft);
  border-color: var(--mdp-danger);
  color: var(--mdp-danger);
}
.mdp-btn[data-variant='danger']:hover:not([disabled]):not([aria-disabled='true']) {
  background: var(--mdp-danger);
  color: var(--mdp-text-inverse);
}

/* A control that READS as text and BEHAVES as a button.
   The company name in a table row opens a detail drawer. That is an action, not a
   navigation, so it has to be a real `<button>` to be focusable and announced as something
   that opens — but drawing it as a pill would put one pill in every row of every table.
   The box is reset because the padding, height and border are what make a button look like
   a button; `white-space` is released too, so a long legal name wraps inside its cell
   instead of widening the column. */
.mdp-btn[data-variant='link'] {
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--mdp-brand);
  font-weight: var(--mdp-fw-medium);
  text-align: start;
  white-space: normal;
}
.mdp-btn[data-variant='link']:hover:not([disabled]):not([aria-disabled='true']) {
  color: var(--mdp-brand-hover);
  text-decoration: underline;
}
/* No `translateY` on press: a text control that moves looks like a rendering glitch, and
   the underline already answers "did that register". */
.mdp-btn[data-variant='link']:active:not([disabled]) { transform: none; }

.mdp-btn[data-size='sm'] { min-height: 30px; padding: var(--mdp-sp-1) var(--mdp-sp-3); font-size: var(--mdp-fs-xs); }
.mdp-btn[data-size='lg'] { min-height: 44px; padding: var(--mdp-sp-3) var(--mdp-sp-6); font-size: var(--mdp-fs-base); }
.mdp-btn[data-full='true'] { width: 100%; }
.mdp-btn[data-busy='true'] { pointer-events: none; }

.mdp-btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--mdp-sp-2); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-spinner {
  display: inline-block;
  width: 15px; height: 15px;
  flex: 0 0 auto;
  border: 2px solid var(--mdp-track);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: mdp-spin 0.7s linear infinite;
}
.mdp-spinner[data-size='lg'] { width: 24px; height: 24px; border-width: 2.5px; }
@keyframes mdp-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════════
   BADGES · TAGS · AVATARS

   Status, score and risk are three separate components with three separate
   vocabularies, and they are NOT one badge with a colour prop. A status badge takes
   a backend status string; a score badge takes a number and a band; a risk badge
   takes a risk level. Collapsing them would mean a page choosing a colour, which is
   exactly where "the UI decided what this number means" bugs come from.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: 2px var(--mdp-sp-3);
  border-radius: var(--mdp-r-pill);
  border: 1px solid transparent;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
  max-width: 100%;
}
.mdp-badge > span { overflow: hidden; text-overflow: ellipsis; }
.mdp-badge[data-tone='neutral'] { background: var(--mdp-neutral-soft); color: var(--mdp-text-muted); border-color: var(--mdp-border); }
.mdp-badge[data-tone='brand'] { background: var(--mdp-brand-soft); color: var(--mdp-brand); border-color: var(--mdp-brand-border); }
.mdp-badge[data-tone='accent'] { background: var(--mdp-accent-soft); color: var(--mdp-accent); border-color: var(--mdp-accent-border); }
.mdp-badge[data-tone='info'] { background: var(--mdp-info-soft); color: var(--mdp-info); border-color: var(--mdp-info); }
.mdp-badge[data-tone='success'] { background: var(--mdp-success-soft); color: var(--mdp-success); border-color: var(--mdp-success); }
.mdp-badge[data-tone='warn'] { background: var(--mdp-warn-soft); color: var(--mdp-warn); border-color: var(--mdp-warn); }
.mdp-badge[data-tone='danger'] { background: var(--mdp-danger-soft); color: var(--mdp-danger); border-color: var(--mdp-danger); }
.mdp-badge-led { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Score badge — a number and its band label, never a bare number. */
.mdp-score {
  display: inline-flex;
  align-items: baseline;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-1) var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  border: 1px solid var(--mdp-border);
  background: var(--mdp-surface-inset);
}
.mdp-score-value {
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-strong);
}
.mdp-score-scale { font-size: var(--mdp-fs-2xs); color: var(--mdp-text-faint); }
.mdp-score-band { font-size: var(--mdp-fs-xs); font-weight: var(--mdp-fw-semibold); }
.mdp-score[data-tone='success'] { border-color: var(--mdp-success); }
.mdp-score[data-tone='success'] .mdp-score-band { color: var(--mdp-success); }
.mdp-score[data-tone='brand'] { border-color: var(--mdp-brand-border); }
.mdp-score[data-tone='brand'] .mdp-score-band { color: var(--mdp-brand); }
.mdp-score[data-tone='warn'] { border-color: var(--mdp-warn); }
.mdp-score[data-tone='warn'] .mdp-score-band { color: var(--mdp-warn); }
.mdp-score[data-tone='danger'] { border-color: var(--mdp-danger); }
.mdp-score[data-tone='danger'] .mdp-score-band { color: var(--mdp-danger); }
.mdp-score[data-tone='neutral'] .mdp-score-band { color: var(--mdp-text-muted); }

.mdp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  padding: 2px var(--mdp-sp-2);
  border-radius: var(--mdp-r-xs);
  border: 1px solid var(--mdp-border-subtle);
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-xs);
  max-width: 100%;
}
.mdp-tag[data-removable='true'] { padding-inline-end: var(--mdp-sp-1); }
.mdp-tag-remove {
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: var(--mdp-r-xs);
  color: var(--mdp-text-faint);
}
.mdp-tag-remove:hover { background: var(--mdp-danger-soft); color: var(--mdp-danger); }
.mdp-taglist { display: flex; flex-wrap: wrap; gap: var(--mdp-sp-2); }

.mdp-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-3);
  border: 1px solid var(--mdp-border-subtle);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow: hidden;
}
.mdp-avatar[data-size='sm'] { width: 24px; height: 24px; font-size: var(--mdp-fs-2xs); }
.mdp-avatar[data-size='lg'] { width: 44px; height: 44px; font-size: var(--mdp-fs-base); border-radius: var(--mdp-r-md); }
.mdp-avatar[data-size='xl'] { width: 64px; height: 64px; font-size: var(--mdp-fs-xl); border-radius: var(--mdp-r-lg); }
.mdp-avatar[data-tone='brand'] { background: var(--mdp-brand-soft); color: var(--mdp-brand); border-color: var(--mdp-brand-border); }

/* ═══════════════════════════════════════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-progress { display: block; }
.mdp-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mdp-sp-3);
  margin-block-end: var(--mdp-sp-2);
  font-size: var(--mdp-fs-xs);
}
.mdp-progress-label { color: var(--mdp-text-muted); }
.mdp-progress-value { font-weight: var(--mdp-fw-semibold); color: var(--mdp-text); font-variant-numeric: tabular-nums; }
.mdp-progress-track {
  height: 6px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-track);
  overflow: hidden;
}
.mdp-progress-bar {
  height: 100%;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-brand);
  transition: inline-size var(--mdp-dur-slow) var(--mdp-ease-out);
}
.mdp-progress[data-tone='success'] .mdp-progress-bar { background: var(--mdp-success); }
.mdp-progress[data-tone='warn'] .mdp-progress-bar { background: var(--mdp-warn); }
.mdp-progress[data-tone='danger'] .mdp-progress-bar { background: var(--mdp-danger); }
.mdp-progress[data-tone='accent'] .mdp-progress-bar { background: var(--mdp-accent); }

/* ═══════════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  box-shadow: var(--mdp-shadow-sm);
}
.mdp-card[data-flat='true'] { box-shadow: none; background: var(--mdp-surface-2); }
.mdp-card[data-interactive='true'] {
  text-align: start;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease), transform var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-card[data-interactive='true']:hover { border-color: var(--mdp-border-strong); transform: translateY(-1px); }
.mdp-card[data-tone='brand'] { border-color: var(--mdp-brand-border); }
.mdp-card[data-tone='warn'] { border-color: var(--mdp-warn); }
.mdp-card[data-tone='danger'] { border-color: var(--mdp-danger); }

.mdp-card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-width: 0;
}
.mdp-card-head-text { flex: 1 1 auto; min-width: 0; }
.mdp-card-title {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  letter-spacing: 0;
}
.mdp-card-sub { margin-block-start: 2px; font-size: var(--mdp-fs-xs); color: var(--mdp-text-faint); }
.mdp-card-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--mdp-sp-2); }
.mdp-card-body { padding: var(--mdp-sp-5); flex: 1 1 auto; min-width: 0; }
/* A card's opening sentence when the server wrote it — an AI headline, a summary verdict.
   Heavier than body copy but NOT a heading: the card title is already the heading, and a
   second one would break the document outline a screen reader walks. */
.mdp-card-lead { font-size: var(--mdp-fs-md); font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-card-body[data-pad='none'] { padding: 0; }
.mdp-card-body[data-pad='sm'] { padding: var(--mdp-sp-3); }
.mdp-card-foot {
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  border-block-start: 1px solid var(--mdp-border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-3);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-faint);
}

/* Stat card — one number and its meaning. */
.mdp-stat { padding: var(--mdp-sp-5); }
.mdp-stat-label {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}
.mdp-stat-value {
  margin-block-start: var(--mdp-sp-2);
  font-size: var(--mdp-fs-3xl);
  font-weight: var(--mdp-fw-bold);
  line-height: 1;
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.mdp-stat-value[data-tone='brand'] { color: var(--mdp-brand); }
.mdp-stat-value[data-tone='success'] { color: var(--mdp-success); }
.mdp-stat-value[data-tone='warn'] { color: var(--mdp-warn); }
.mdp-stat-value[data-tone='danger'] { color: var(--mdp-danger); }
.mdp-stat-note { margin-block-start: var(--mdp-sp-2); font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); }
.mdp-stat-foot { margin-block-start: var(--mdp-sp-3); display: flex; flex-wrap: wrap; gap: var(--mdp-sp-3); }
.mdp-stat-split { display: flex; align-items: baseline; gap: var(--mdp-sp-1); font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); }
.mdp-stat-split strong { color: var(--mdp-text); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════════
   KEY / VALUE
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-kv { display: grid; gap: var(--mdp-sp-3) var(--mdp-sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mdp-kv[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mdp-kv[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mdp-kv-row { min-width: 0; }
.mdp-kv-key {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}
.mdp-kv-val { margin-block-start: 3px; font-size: var(--mdp-fs-sm); color: var(--mdp-text); min-width: 0; }
.mdp-kv-val[data-empty='true'] { color: var(--mdp-text-faint); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLES

   Below 768px each row becomes a stacked block and every cell grows a label from
   its `data-label`. That is why `DataTable` requires a `header` on every column: the
   header is the mobile label, so a column without one cannot be rendered at all.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mdp-table { width: 100%; font-size: var(--mdp-fs-sm); }
.mdp-table caption { text-align: start; }
.mdp-table th, .mdp-table td {
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--mdp-border-subtle);
}
.mdp-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mdp-z-sticky);
  background: var(--mdp-surface-2);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}
.mdp-table tbody tr { transition: background var(--mdp-dur-fast) var(--mdp-ease); }
.mdp-table tbody tr:hover { background: var(--mdp-surface-inset); }
.mdp-table tbody tr:last-child td { border-block-end: 0; }
.mdp-table td[data-align='end'], .mdp-table th[data-align='end'] { text-align: end; }
.mdp-table td[data-numeric='true'] { font-variant-numeric: tabular-nums; }

.mdp-th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.mdp-th-sort:hover { color: var(--mdp-text); }
.mdp-sort-arrow { opacity: .35; transition: opacity var(--mdp-dur-fast) var(--mdp-ease); }
.mdp-th-sort[aria-sort='ascending'] .mdp-sort-arrow,
.mdp-th-sort[aria-sort='descending'] .mdp-sort-arrow { opacity: 1; }
.mdp-th-sort[aria-sort='descending'] .mdp-sort-arrow { transform: rotate(180deg); }

@media (max-width: 767px) {
  .mdp-table[data-stack='true'] thead { display: none; }
  .mdp-table[data-stack='true'] tbody tr {
    display: block;
    padding: var(--mdp-sp-3) 0;
    border-block-end: 1px solid var(--mdp-border-subtle);
  }
  .mdp-table[data-stack='true'] tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--mdp-sp-4);
    padding: var(--mdp-sp-1) var(--mdp-sp-4);
    border: 0;
    text-align: end;
  }
  .mdp-table[data-stack='true'] tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--mdp-fs-2xs);
    font-weight: var(--mdp-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--mdp-tracking-caps);
    color: var(--mdp-text-faint);
    text-align: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-list { display: flex; flex-direction: column; }
.mdp-list-item {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-width: 0;
  text-align: start;
  width: 100%;
  color: inherit;
}
/* Each item is a <li> wrapping the real element (an <a>, a <button> or a <div>), so the
   list keeps its list semantics whatever the item turns out to be. The separator is
   therefore dropped from the last <li>, not from the last `.mdp-list-item` — every item is
   the only child of its own <li>, so `.mdp-list-item:last-child` would match all of them. */
.mdp-list > li:last-child > .mdp-list-item { border-block-end: 0; }
.mdp-list-item[data-interactive='true'] { transition: background var(--mdp-dur-fast) var(--mdp-ease); }
.mdp-list-item[data-interactive='true']:hover { background: var(--mdp-surface-inset); text-decoration: none; }
.mdp-list-item[data-unread='true'] { background: var(--mdp-brand-soft); }
.mdp-list-item[data-align='start'] { align-items: flex-start; }
.mdp-list-lead { flex: 0 0 auto; }
.mdp-list-text { flex: 1 1 auto; min-width: 0; }
/* `display: block` on these two, and on the switch and quick-action equivalents below,
   because they sit inside an <a>, <button> or <label>, which may only contain phrasing
   content — so they are spans, and a span ignores the block margin above. */
.mdp-list-title { display: block; font-size: var(--mdp-fs-sm); font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-list-sub { display: block; margin-block-start: 2px; font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); }
.mdp-list-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .mdp-list-item { flex-wrap: wrap; }
  .mdp-list-meta { width: 100%; padding-inline-start: calc(30px + var(--mdp-sp-3)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-timeline { display: flex; flex-direction: column; gap: var(--mdp-sp-5); padding: var(--mdp-sp-2) 0; }
.mdp-timeline-item { position: relative; padding-inline-start: var(--mdp-sp-8); min-width: 0; }
.mdp-timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  inset-block-start: 14px;
  bottom: calc(-1 * var(--mdp-sp-5) - 4px);
  width: 1px;
  background: var(--mdp-border);
}
.mdp-timeline-item:last-child::before { display: none; }
.mdp-timeline-dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 5px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--mdp-surface);
  border: 2px solid var(--mdp-border-strong);
}
.mdp-timeline-item[data-tone='brand'] .mdp-timeline-dot { border-color: var(--mdp-brand); }
.mdp-timeline-item[data-tone='success'] .mdp-timeline-dot { border-color: var(--mdp-success); }
.mdp-timeline-item[data-tone='warn'] .mdp-timeline-dot { border-color: var(--mdp-warn); }
.mdp-timeline-item[data-tone='danger'] .mdp-timeline-dot { border-color: var(--mdp-danger); }
.mdp-timeline-title { font-size: var(--mdp-fs-sm); font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-timeline-body { margin-block-start: 2px; font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); }
.mdp-timeline-at { margin-block-start: var(--mdp-sp-1); font-size: var(--mdp-fs-2xs); color: var(--mdp-text-faint); }

/* ═══════════════════════════════════════════════════════════════════════════════
   EMPTY · ERROR STATES

   An empty state is not a failure and must not look like one: the icon is muted, the
   copy explains what would appear here, and the action — when there is one — is the
   thing that would fill it. An error state is the opposite: it names the problem and
   offers exactly one recovery.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-10) var(--mdp-sp-6);
  min-width: 0;
}
.mdp-state[data-compact='true'] { padding: var(--mdp-sp-6) var(--mdp-sp-4); }
.mdp-state-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-faint);
}
.mdp-state-icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.mdp-state[data-kind='error'] .mdp-state-icon { background: var(--mdp-danger-soft); color: var(--mdp-danger); }
.mdp-state-title { font-size: var(--mdp-fs-md); font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-state-body { font-size: var(--mdp-fs-sm); color: var(--mdp-text-muted); max-width: 46ch; }
.mdp-state-actions { display: flex; flex-wrap: wrap; gap: var(--mdp-sp-2); justify-content: center; margin-block-start: var(--mdp-sp-2); }
.mdp-state-code {
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SKELETONS

   The shimmer is a background animation rather than a pseudo-element sweep, so a
   skeleton costs one paint layer and no layout. `prefers-reduced-motion` stops the
   animation via the duration tokens and the block stays as a static grey bar, which
   is still a correct loading affordance.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-skel {
  display: block;
  border-radius: var(--mdp-r-xs);
  background: linear-gradient(90deg, var(--mdp-skeleton) 25%, var(--mdp-skeleton-shine) 37%, var(--mdp-skeleton) 63%);
  background-size: 400% 100%;
  animation: mdp-shimmer 1.4s ease-in-out infinite;
  height: 12px;
}
@keyframes mdp-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.mdp-skel[data-shape='title'] { height: 20px; width: 45%; }
.mdp-skel[data-shape='line'] { height: 11px; }
.mdp-skel[data-shape='pill'] { height: 22px; width: 5.5rem; border-radius: var(--mdp-r-pill); }
.mdp-skel[data-shape='block'] { height: 76px; border-radius: var(--mdp-r-sm); }
.mdp-skel[data-shape='avatar'] { height: 30px; width: 30px; border-radius: var(--mdp-r-sm); }
.mdp-skel-stack { display: flex; flex-direction: column; gap: var(--mdp-sp-3); }
.mdp-skel-row { display: flex; align-items: center; gap: var(--mdp-sp-3); padding: var(--mdp-sp-3) var(--mdp-sp-5); }
.mdp-skel-row > .mdp-skel[data-shape='line'] { flex: 1 1 auto; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FIELDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-field { display: flex; flex-direction: column; gap: var(--mdp-sp-2); min-width: 0; }
/* The field grid every editable card body uses. `auto-fit` rather than a fixed two
   columns so the same markup is two columns on a laptop and one on a phone without a
   media query, and `min(100%, …)` so a narrow container never produces a track wider
   than itself — which is what would cause the horizontal scroll this phase forbids. */
.mdp-formgrid {
  display: grid;
  gap: var(--mdp-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  align-items: start;
  min-width: 0;
}
/* A field that spans the whole form grid — a long address, a description, a tag picker.
   Harmless outside a grid, so a component may set it without knowing its container. */
.mdp-field[data-wide='true'] { grid-column: 1 / -1; }
.mdp-label {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-muted);
}
.mdp-label-req { color: var(--mdp-danger); margin-inline-start: 2px; }
.mdp-hint { font-size: var(--mdp-fs-xs); color: var(--mdp-text-faint); }
.mdp-error-text { font-size: var(--mdp-fs-xs); color: var(--mdp-danger); font-weight: var(--mdp-fw-medium); }

.mdp-input, .mdp-select, .mdp-textarea {
  width: 100%;
  min-width: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  min-height: 36px;
  background: var(--mdp-field-bg);
  border: 1px solid var(--mdp-field-border);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text);
  font-size: var(--mdp-fs-sm);
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease), background var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-input::placeholder, .mdp-textarea::placeholder { color: var(--mdp-text-faint); }
.mdp-input:hover, .mdp-select:hover, .mdp-textarea:hover { border-color: var(--mdp-border-strong); }
.mdp-input:focus-visible, .mdp-select:focus-visible, .mdp-textarea:focus-visible {
  background: var(--mdp-field-bg-focus);
  border-color: var(--mdp-brand);
}
.mdp-input[aria-invalid='true'], .mdp-select[aria-invalid='true'], .mdp-textarea[aria-invalid='true'] { border-color: var(--mdp-danger); }
.mdp-input[disabled], .mdp-select[disabled], .mdp-textarea[disabled] { opacity: .55; cursor: not-allowed; }
.mdp-textarea { min-height: 84px; resize: vertical; line-height: var(--mdp-lh-snug); }
.mdp-select { appearance: none; padding-inline-end: var(--mdp-sp-8); cursor: pointer; }
.mdp-select-wrap { position: relative; min-width: 0; }
.mdp-select-caret {
  position: absolute;
  inset-inline-end: var(--mdp-sp-3);
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--mdp-text-faint);
}
.mdp-select-caret svg { width: 14px; height: 14px; }

.mdp-search-field { position: relative; min-width: 0; }
.mdp-search-field .mdp-input { padding-inline-start: var(--mdp-sp-8); }
.mdp-search-field-icon {
  position: absolute;
  inset-inline-start: var(--mdp-sp-3);
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--mdp-text-faint);
}
.mdp-search-field-icon svg { width: 15px; height: 15px; }

/* Switch — a real checkbox with a drawn track, so it is keyboard-operable and
   announced as a checkbox without a single ARIA attribute. */
.mdp-switch { display: flex; align-items: flex-start; gap: var(--mdp-sp-3); cursor: pointer; min-width: 0; }
.mdp-switch input {
  position: absolute;
  opacity: 0;
  width: 40px; height: 22px;
  margin: 0;
  cursor: pointer;
}
.mdp-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 40px; height: 22px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-track);
  border: 1px solid var(--mdp-border);
  transition: background var(--mdp-dur-fast) var(--mdp-ease), border-color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-switch-track::after {
  content: '';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mdp-text-muted);
  transition: transform var(--mdp-dur-fast) var(--mdp-ease), background var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-switch input:checked + .mdp-switch-track { background: var(--mdp-brand-soft); border-color: var(--mdp-brand); }
.mdp-switch input:checked + .mdp-switch-track::after { transform: translateX(18px); background: var(--mdp-brand); }
:root[dir='rtl'] .mdp-switch input:checked + .mdp-switch-track::after { transform: translateX(-18px); }
.mdp-switch input:focus-visible + .mdp-switch-track {
  outline: var(--mdp-focus-w) solid var(--mdp-focus-ring);
  outline-offset: var(--mdp-focus-offset);
}
.mdp-switch input[disabled] + .mdp-switch-track { opacity: .5; }
.mdp-switch-text { min-width: 0; }
.mdp-switch-label { display: block; font-size: var(--mdp-fs-sm); font-weight: var(--mdp-fw-medium); color: var(--mdp-text); }
.mdp-switch-hint { display: block; margin-block-start: 2px; font-size: var(--mdp-fs-xs); color: var(--mdp-text-faint); }

/* Multi-select — a labelled fieldset of checkboxes, scrollable at height. A native
   `<select multiple>` is unusable on a phone and unlabelled in most screen readers. */
.mdp-multi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  max-height: 13rem;
  overflow-y: auto;
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-field-border);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-field-bg);
}
.mdp-multi-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-1) var(--mdp-sp-3);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-inset);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  cursor: pointer;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease), color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-multi-opt:hover { border-color: var(--mdp-border-strong); color: var(--mdp-text); }
.mdp-multi-opt input { accent-color: var(--mdp-brand); width: 13px; height: 13px; margin: 0; }
.mdp-multi-opt:has(input:checked) {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
  color: var(--mdp-text-strong);
}

/* A field the server refused (§50). NEW SELECTORS ONLY — the existing error tone is
   unchanged, and `[aria-invalid='true']` above already draws the danger border on an input,
   a select and a textarea. What it cannot reach is a checkbox GROUP, whose invalidity
   belongs to the fieldset and not to any one of its eleven checkboxes: without this the one
   multi-select the customer has to fix would carry a message and no visible mark. The label
   is tinted with it so the field reads as invalid from the top down, which is the direction
   the eye scans a form in either writing direction. */
.mdp-field[data-invalid='true'] > .mdp-label { color: var(--mdp-danger); }
.mdp-field[data-invalid='true'] > .mdp-multi { border-color: var(--mdp-danger); }

/* ═══════════════════════════════════════════════════════════════════════════════
   FILTER PANEL · DATE RANGE · PAGINATION
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-filters {
  display: grid;
  gap: var(--mdp-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: end;
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  background: var(--mdp-surface-2);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
}
.mdp-filters-actions { display: flex; flex-wrap: wrap; gap: var(--mdp-sp-2); }

.mdp-daterange { display: grid; gap: var(--mdp-sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }

.mdp-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-2);
}
.mdp-segmented-opt {
  padding: var(--mdp-sp-1) var(--mdp-sp-3);
  border-radius: var(--mdp-r-xs);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
  white-space: nowrap;
  transition: background var(--mdp-dur-fast) var(--mdp-ease), color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-segmented-opt:hover { color: var(--mdp-text); }
.mdp-segmented-opt[aria-selected='true'], .mdp-segmented-opt[aria-pressed='true'] {
  background: var(--mdp-surface);
  color: var(--mdp-text-strong);
  box-shadow: var(--mdp-shadow-sm);
}
.mdp-segmented-count { margin-inline-start: var(--mdp-sp-1); opacity: .7; font-variant-numeric: tabular-nums; }

.mdp-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-5);
  border-block-start: 1px solid var(--mdp-border-subtle);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-faint);
}
.mdp-pagination-controls { display: flex; align-items: center; gap: var(--mdp-sp-2); }

/* ═══════════════════════════════════════════════════════════════════════════════
   MODAL · DRAWER · CONFIRM
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--mdp-z-backdrop);
  background: var(--mdp-overlay);
  display: grid;
  place-items: center;
  padding: var(--mdp-sp-4);
  animation: mdp-fade-in var(--mdp-dur-fast) var(--mdp-ease);
  overflow-y: auto;
}
.mdp-modal {
  position: relative;
  z-index: var(--mdp-z-modal);
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 2 * var(--mdp-sp-6));
  display: flex;
  flex-direction: column;
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-lg);
  box-shadow: var(--mdp-shadow-lg);
  animation: mdp-modal-in var(--mdp-dur-normal) var(--mdp-ease-out);
}
.mdp-modal[data-size='lg'] { max-width: 52rem; }
.mdp-modal[data-size='sm'] { max-width: 25rem; }
@keyframes mdp-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.mdp-modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-5) var(--mdp-sp-5) var(--mdp-sp-4);
  border-block-end: 1px solid var(--mdp-border-subtle);
}
.mdp-modal-title { flex: 1 1 auto; min-width: 0; font-size: var(--mdp-fs-lg); font-weight: var(--mdp-fw-semibold); }
.mdp-modal-body { padding: var(--mdp-sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.mdp-modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

.mdp-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--mdp-z-backdrop);
  background: var(--mdp-overlay);
  animation: mdp-fade-in var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--mdp-z-drawer);
  width: min(30rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--mdp-surface);
  border-inline-start: 1px solid var(--mdp-border);
  box-shadow: var(--mdp-shadow-lg);
  animation: mdp-drawer-in var(--mdp-dur-normal) var(--mdp-ease-out);
}
.mdp-drawer[data-side='start'] {
  inset-inline-end: auto;
  inset-inline-start: 0;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--mdp-border);
  animation-name: mdp-drawer-in-start;
}
@keyframes mdp-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes mdp-drawer-in-start { from { transform: translateX(-100%); } to { transform: none; } }
:root[dir='rtl'] .mdp-drawer { animation-name: mdp-drawer-in-start; }
:root[dir='rtl'] .mdp-drawer[data-side='start'] { animation-name: mdp-drawer-in; }
.mdp-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-5);
  border-block-end: 1px solid var(--mdp-border-subtle);
}
.mdp-drawer-title { flex: 1 1 auto; min-width: 0; font-size: var(--mdp-fs-lg); font-weight: var(--mdp-fw-semibold); }
.mdp-drawer-body { padding: var(--mdp-sp-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.mdp-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOASTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-toast-host {
  position: fixed;
  inset-block-end: var(--mdp-sp-5);
  inset-inline-end: var(--mdp-sp-5);
  z-index: var(--mdp-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  width: min(24rem, calc(100vw - 2 * var(--mdp-sp-4)));
  pointer-events: none;
}
.mdp-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border);
  border-inline-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-sm);
  box-shadow: var(--mdp-shadow-md);
  font-size: var(--mdp-fs-sm);
  animation: mdp-toast-in var(--mdp-dur-normal) var(--mdp-ease-out);
}
@keyframes mdp-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mdp-toast[data-tone='success'] { border-inline-start-color: var(--mdp-success); }
.mdp-toast[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }
.mdp-toast[data-tone='danger'] { border-inline-start-color: var(--mdp-danger); }
.mdp-toast[data-tone='info'] { border-inline-start-color: var(--mdp-info); }
.mdp-toast-text { flex: 1 1 auto; min-width: 0; }
.mdp-toast-title { font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-toast-body { margin-block-start: 2px; font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); }
@media (max-width: 560px) {
  .mdp-toast-host { inset-inline: var(--mdp-sp-4); width: auto; inset-block-end: calc(var(--mdp-sp-4) + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH OVERLAY
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-gsearch-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--mdp-z-backdrop);
  background: var(--mdp-overlay);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--mdp-sp-6) var(--mdp-sp-4);
  animation: mdp-fade-in var(--mdp-dur-fast) var(--mdp-ease);
  overflow-y: auto;
}
/* Stated here as well as in `base.css`, and deliberately not left to the global rule
   alone: the `display: flex` two lines above is exactly the declaration that used to beat
   the browser's `[hidden]` rule, and this is a full-screen fixed layer — the one element
   in the application where getting it wrong costs the customer every click on the page
   behind it rather than a stray pixel. The overlay also detaches itself on close
   (`features/global-search.js`), so its absence is a fact about the document too. */
.mdp-gsearch-backdrop[hidden],
.mdp-gsearch-scopes[hidden] { display: none; }
.mdp-gsearch {
  position: relative;
  z-index: var(--mdp-z-modal);
  width: 100%;
  max-width: 42rem;
  margin-block-start: min(8vh, var(--mdp-sp-16));
  display: flex;
  flex-direction: column;
  background: var(--mdp-surface);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-lg);
  box-shadow: var(--mdp-shadow-lg);
  overflow: hidden;
  animation: mdp-modal-in var(--mdp-dur-normal) var(--mdp-ease-out);
}
.mdp-gsearch-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border-block-end: 1px solid var(--mdp-border-subtle);
}
.mdp-gsearch-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  font-size: var(--mdp-fs-md);
  color: var(--mdp-text);
}
.mdp-gsearch-input::placeholder { color: var(--mdp-text-faint); }
/* Reserved by Phase 6B Slice 1 and taken up by Slice 3, which made deals, the deal inbox and
   opportunities searchable — one query can now return five kinds of row, which is the point at
   which a scope filter earns its place. The rule is unchanged from the one reserved then, so the
   strip landed with the same padding and divider as the head above it. */
.mdp-gsearch-scopes { display: flex; flex-wrap: wrap; gap: var(--mdp-sp-2); padding: var(--mdp-sp-3) var(--mdp-sp-4); border-block-end: 1px solid var(--mdp-border-subtle); }
.mdp-gsearch-results { max-height: min(58vh, 30rem); overflow-y: auto; }
.mdp-gsearch-group-label {
  padding: var(--mdp-sp-3) var(--mdp-sp-4) var(--mdp-sp-1);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}
.mdp-gsearch-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-4);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border-block-start: 1px solid var(--mdp-border-subtle);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}
.mdp-gsearch-results .mdp-list-item[data-active='true'] { background: var(--mdp-brand-soft); }

/* ═══════════════════════════════════════════════════════════════════════════════
   BANNERS · CALLOUTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4) var(--mdp-sp-5);
  border: 1px solid var(--mdp-border);
  border-inline-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
  min-width: 0;
}
.mdp-callout[data-tone='brand'] { border-inline-start-color: var(--mdp-brand); background: var(--mdp-brand-soft); }
.mdp-callout[data-tone='info'] { border-inline-start-color: var(--mdp-info); background: var(--mdp-info-soft); }
.mdp-callout[data-tone='success'] { border-inline-start-color: var(--mdp-success); background: var(--mdp-success-soft); }
.mdp-callout[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); background: var(--mdp-warn-soft); }
.mdp-callout[data-tone='danger'] { border-inline-start-color: var(--mdp-danger); background: var(--mdp-danger-soft); }
.mdp-callout-text { flex: 1 1 auto; min-width: 0; }
.mdp-callout-title { font-size: var(--mdp-fs-sm); font-weight: var(--mdp-fw-semibold); color: var(--mdp-text-strong); }
.mdp-callout-body { margin-block-start: var(--mdp-sp-1); font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); }
.mdp-callout-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--mdp-sp-2); }
.mdp-callout-list { margin-block-start: var(--mdp-sp-2); display: flex; flex-direction: column; gap: var(--mdp-sp-1); }
.mdp-callout-list li { font-size: var(--mdp-fs-xs); color: var(--mdp-text-muted); padding-inline-start: var(--mdp-sp-4); position: relative; }
.mdp-callout-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--mdp-sp-1);
  inset-block-start: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-quickactions { display: grid; gap: var(--mdp-sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.mdp-quickaction {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-2);
  color: var(--mdp-text);
  text-align: start;
  min-width: 0;
  transition: border-color var(--mdp-dur-fast) var(--mdp-ease), background var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-quickaction:hover { border-color: var(--mdp-brand-border); background: var(--mdp-brand-soft); text-decoration: none; }
.mdp-quickaction[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.mdp-quickaction-icon { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--mdp-r-sm); background: var(--mdp-surface-inset); color: var(--mdp-brand); }
.mdp-quickaction-icon svg { width: 16px; height: 16px; }
.mdp-quickaction-text { min-width: 0; }
.mdp-quickaction-title { display: block; font-size: var(--mdp-fs-sm); font-weight: var(--mdp-fw-semibold); }
.mdp-quickaction-sub { display: block; font-size: var(--mdp-fs-2xs); color: var(--mdp-text-faint); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-tabs { display: flex; gap: var(--mdp-sp-1); overflow-x: auto; border-block-end: 1px solid var(--mdp-border-subtle); }
.mdp-tab {
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border-block-end: 2px solid transparent;
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  white-space: nowrap;
  transition: color var(--mdp-dur-fast) var(--mdp-ease), border-color var(--mdp-dur-fast) var(--mdp-ease);
}
.mdp-tab:hover { color: var(--mdp-text); }
/* A tab that changes the URL is a link, and a link may not carry `aria-selected` — it
   carries `aria-current="page"`. Both are styled so the strip looks the same whether a
   screen paints its tabs as navigation (the trade network) or as in-page tabs. */
.mdp-tab[aria-selected='true'], .mdp-tab[aria-current='page'] { color: var(--mdp-text-strong); border-block-end-color: var(--mdp-brand); font-weight: var(--mdp-fw-semibold); }
.mdp-tab-count { margin-inline-start: var(--mdp-sp-2); font-variant-numeric: tabular-nums; opacity: .7; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FIGURES AND SPARKLINES — PHASE 6B SLICE 3

   Added for the reputation trend, which needs a shape a reader can take in at a glance
   without the page acquiring a charting library. Three rules, no dependency, no canvas:
   one flex row of columns whose heights are set inline from the engine's own series.

   THE CHART IS NEVER THE ONLY COPY OF THE DATA. `pages/reputation.js` marks the bars
   `aria-hidden` and renders the same readings as a table beneath, so the figure is a
   summary for people who read shapes and the table is the accessible record. That is why
   there are no tooltips and no labels here — a bar carries no information of its own.

   COLOUR COMES FROM THE BAND, NOT FROM THE VALUE. Each column carries the tone of the
   band the engine published for that reading, so the colour says what the platform said
   rather than what a threshold in this stylesheet decided.
   ═══════════════════════════════════════════════════════════════════════════════ */
.mdp-figure { margin: 0; display: grid; gap: var(--mdp-sp-2); min-width: 0; }

.mdp-spark {
  display: flex;
  align-items: flex-end;
  gap: var(--mdp-sp-1);
  /* A definite height, because each column's height is an inline percentage of it. */
  block-size: 96px;
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-inset);
}
.mdp-spark-col {
  flex: 1 1 0;
  min-inline-size: 3px;
  border-radius: var(--mdp-r-xs) var(--mdp-r-xs) 0 0;
  background: var(--mdp-track);
  transition: block-size var(--mdp-dur-slow) var(--mdp-ease-out);
}
.mdp-spark-col[data-tone='brand'] { background: var(--mdp-brand); }
.mdp-spark-col[data-tone='accent'] { background: var(--mdp-accent); }
.mdp-spark-col[data-tone='info'] { background: var(--mdp-info); }
.mdp-spark-col[data-tone='success'] { background: var(--mdp-success); }
.mdp-spark-col[data-tone='warn'] { background: var(--mdp-warn); }
.mdp-spark-col[data-tone='danger'] { background: var(--mdp-danger); }

/* Narrow screens: fewer pixels per column, so the row keeps its shape instead of the
   columns collapsing into a single band of colour. */
@media (max-width: 640px) {
  .mdp-spark { block-size: 72px; gap: 1px; padding: var(--mdp-sp-2); }
}