/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — THE TRUST & REPUTATION INTELLIGENCE CENTER (PHASE 8)

   Every selector in this file is prefixed `.mdp-tr-`. Nothing here reaches a class any other
   screen uses, so no completed stylesheet needs a line changed and removing this file removes
   this phase entirely (Rule 2, Rule 3).

   ── COLOUR COMES FROM TOKENS, ALWAYS ──────────────────────────────────────────
   No literal colour appears below. Every value is a `--mdp-*` token, so light and dark, and
   any future theme, are correct here for free — and a band that reads as "strong" in one theme
   cannot read as "adequate" 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.

   ── THE ONE THING THIS STYLESHEET IS ACTUALLY FOR ─────────────────────────────
   Keeping FACT and ADVICE visually separable at a glance. `.mdp-tr-ai` is the only fenced,
   tinted, accent-bordered region on these screens; everything else sits on the page surface.
   A customer scanning the page can see which paragraphs the platform is asserting and which
   ones the engine is advising, before reading a word of either.

   ── AND WHAT IT IS DELIBERATELY NOT ───────────────────────────────────────────
   No stars, no five-point scales, no medals, no ribbons, no progress-to-next-level, no
   confetti, no gradients that imply momentum, no leaderboard row treatment. This is a trust
   record read by a company deciding whether to trade, not a profile score. The one arc and the
   one set of bars are quantitative encodings of published figures, each printed as a number
   beside its shape, and both marked `aria-hidden` so no assistive technology is asked to
   describe geometry instead of reading a value.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ────────────────────────────────────────────────────────────────── */

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

/* Two even columns that become one below the tablet break. `min-inline-size: 0` on the grid
   items is what stops a long driver name or an Arabic sentence forcing a horizontal scrollbar,
   which is the single most common cause of overflow in a CSS grid. */
.mdp-tr-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-tr-two > * { min-inline-size: 0; }

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

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

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

.mdp-tr-plain {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  padding-inline-start: var(--mdp-sp-5);
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
}

.mdp-tr-more {
  align-self: flex-start;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-brand);
}

/* ── Absence ───────────────────────────────────────────────────────────────── */

/* An absence is drawn as an absence: lighter and italic, so a customer scanning a column can
   tell "not recorded" from a recorded value without reading either. */
.mdp-tr-none {
  font-style: italic;
  color: var(--mdp-text-faint);
}

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

/* ── THE STANDING BAND ─────────────────────────────────────────────────────────
   The score, the band, the confidence and the evidence, in one region and never apart. */

.mdp-tr-standing {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--mdp-sp-5);
  align-items: center;
  padding: var(--mdp-sp-5);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-surface);
  box-shadow: var(--mdp-shadow-sm);
  min-inline-size: 0;
}

/* The band's own colour on the leading edge only — a rule, not a fill. A tinted panel behind a
   score reads as a verdict on the whole screen; a leading rule marks the band without shouting
   it, which is the institutional register this platform is written in. */
.mdp-tr-standing[data-tone='success'] { border-inline-start: 4px solid var(--mdp-success); }
.mdp-tr-standing[data-tone='brand'] { border-inline-start: 4px solid var(--mdp-brand); }
.mdp-tr-standing[data-tone='info'] { border-inline-start: 4px solid var(--mdp-info); }
.mdp-tr-standing[data-tone='warn'] { border-inline-start: 4px solid var(--mdp-warn); }
.mdp-tr-standing[data-tone='danger'] { border-inline-start: 4px solid var(--mdp-danger); }
.mdp-tr-standing[data-tone='neutral'] { border-inline-start: 4px solid var(--mdp-border-strong); }

.mdp-tr-standing-score {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

/* THE ARC. A conic sweep whose angle is the server's score over the engine's published scale,
   so its length IS the score. Decorative and `aria-hidden`: the figure inside it is the
   content, and a screen reader gets the number and the band rather than a description of a
   ring. It carries no ticks, no target marker and no "next level" segment — there is no next
   level on this platform, only a measured score. */
.mdp-tr-arc {
  position: relative;
  flex: none;
  inline-size: 92px;
  block-size: 92px;
  border-radius: var(--mdp-r-pill);
  background: conic-gradient(
    var(--mdp-tr-arc-color, var(--mdp-brand)) calc(var(--mdp-tr-arc-pct, 0) * 1%),
    var(--mdp-track) 0
  );
}

.mdp-tr-arc[data-tone='success'] { --mdp-tr-arc-color: var(--mdp-success); }
.mdp-tr-arc[data-tone='brand'] { --mdp-tr-arc-color: var(--mdp-brand); }
.mdp-tr-arc[data-tone='info'] { --mdp-tr-arc-color: var(--mdp-info); }
.mdp-tr-arc[data-tone='warn'] { --mdp-tr-arc-color: var(--mdp-warn); }
.mdp-tr-arc[data-tone='danger'] { --mdp-tr-arc-color: var(--mdp-danger); }
.mdp-tr-arc[data-tone='neutral'] { --mdp-tr-arc-color: var(--mdp-neutral); }

.mdp-tr-arc-hole {
  position: absolute;
  inset: 10px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface);
}

.mdp-tr-standing-figure { min-inline-size: 0; }

.mdp-tr-standing-eyebrow {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-tr-standing-value {
  display: flex;
  align-items: baseline;
  gap: var(--mdp-sp-1);
  margin: var(--mdp-sp-1) 0 0;
}

.mdp-tr-standing-num {
  font-size: var(--mdp-fs-3xl);
  font-weight: var(--mdp-fw-black);
  line-height: var(--mdp-lh-tight);
  color: var(--mdp-text-strong);
  /* Tabular figures so a repainted score does not shift the band label beside it. */
  font-variant-numeric: tabular-nums;
}

/* THE SCALE IS PART OF THE FIGURE, NOT A CAPTION. A score of 62 means nothing without the
   100 beside it, so the two are one line and cannot be separated by a layout change. */
.mdp-tr-standing-scale {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-faint);
}

.mdp-tr-standing-band {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text);
}

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

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

.mdp-tr-standing-fact[data-tone='success'] { border-inline-start-color: var(--mdp-success); }
.mdp-tr-standing-fact[data-tone='brand'] { border-inline-start-color: var(--mdp-brand); }
.mdp-tr-standing-fact[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }
.mdp-tr-standing-fact[data-tone='neutral'] { border-inline-start-color: var(--mdp-border-strong); }

.mdp-tr-standing-fact-label {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-tr-standing-fact-icon {
  display: inline-flex;
  flex: none;
  color: var(--mdp-text-faint);
}

.mdp-tr-standing-fact-value {
  font-size: var(--mdp-fs-base);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

/* THE QUALIFICATION IS NEVER OPTIONAL. A confidence without its percentage, or an evidence
   count without what it counts, is a figure a customer can misread — so the note line is part
   of the fact rather than a tooltip. */
.mdp-tr-standing-fact-note {
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
  overflow-wrap: break-word;
}

/* ── THE FACT LEDGER ───────────────────────────────────────────────────────────
   A ruled two-column register. The register form is deliberate: this is the platform's record
   about a company, and it should read like a statement rather than like a dashboard. */

.mdp-tr-ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  min-inline-size: 0;
}

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

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

.mdp-tr-ledger-label {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

.mdp-tr-ledger-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

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

/* ── EVIDENCE ──────────────────────────────────────────────────────────────── */

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

.mdp-tr-evidence-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
  min-inline-size: 0;
}

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

.mdp-tr-evidence-label {
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

/* ── COVERAGE ──────────────────────────────────────────────────────────────── */

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

.mdp-tr-coverage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
}

.mdp-tr-coverage-label {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}

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

.mdp-tr-coverage-track {
  block-size: 8px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-track);
  overflow: hidden;
}

.mdp-tr-coverage-fill {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--mdp-tr-bar-pct, 0) * 1%);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-brand);
}

/* ── SIGNALS ───────────────────────────────────────────────────────────────── */

.mdp-tr-signals {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  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;
}

/* The two columns differ by a leading rule and an icon colour, not by a fill. A red panel
   beside a green one turns "two drivers scored lower" into a verdict about the company. */
.mdp-tr-signals[data-tone='success'] { border-inline-start: 3px solid var(--mdp-success); }
.mdp-tr-signals[data-tone='warn'] { border-inline-start: 3px solid var(--mdp-warn); }

.mdp-tr-signals-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

.mdp-tr-signals-icon { display: inline-flex; flex: none; }
.mdp-tr-signals[data-tone='success'] .mdp-tr-signals-icon { color: var(--mdp-success); }
.mdp-tr-signals[data-tone='warn'] .mdp-tr-signals-icon { color: var(--mdp-warn); }

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

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

.mdp-tr-signal-list {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  margin: var(--mdp-sp-1) 0 0;
  padding: 0;
  list-style: none;
}

.mdp-tr-signal {
  display: flex;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

/* The engine's own rank. Decorative in the accessibility tree — the order of the list already
   carries it — but useful on screen because it says the engine ordered these deliberately. */
.mdp-tr-signal-rank {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-3);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  color: var(--mdp-text-muted);
  font-variant-numeric: tabular-nums;
}

.mdp-tr-signal-text { min-inline-size: 0; }

.mdp-tr-signal-name {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

.mdp-tr-signal-factor {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

.mdp-tr-signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin: var(--mdp-sp-2) 0 0;
}

/* ── DRIVERS ───────────────────────────────────────────────────────────────── */

.mdp-tr-drivers,
.mdp-tr-unmeasureds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--mdp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

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

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

.mdp-tr-driver-name {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

.mdp-tr-driver-figure {
  flex: none;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
}

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

/* Again the scale travels with the figure. A bare 74 on a driver row invites a customer to
   read it as a percentage of something, and it is not. */
.mdp-tr-driver-scale {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* THE BAR IS THE SCORE OVER THE ENGINE'S SCALE AND NOTHING ELSE. It is not scaled by the
   component's weight — weights are reserved — so no row is drawn wider because it matters
   more. Eighteen bars on one screen are eighteen scores, not eighteen contributions. */
.mdp-tr-driver-bar {
  block-size: 6px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-track);
  overflow: hidden;
}

.mdp-tr-driver-fill {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--mdp-tr-bar-pct, 0) * 1%);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-brand);
}

.mdp-tr-driver-bar[data-tone='success'] .mdp-tr-driver-fill { background: var(--mdp-success); }
.mdp-tr-driver-bar[data-tone='brand'] .mdp-tr-driver-fill { background: var(--mdp-brand); }
.mdp-tr-driver-bar[data-tone='warn'] .mdp-tr-driver-fill { background: var(--mdp-warn); }
.mdp-tr-driver-bar[data-tone='neutral'] .mdp-tr-driver-fill { background: var(--mdp-neutral); }

.mdp-tr-driver-measures {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

.mdp-tr-driver-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin: 0;
}

/* A DRIVER WITH NO EVIDENCE IS NOT A BAR AT ZERO. It has no bar at all, sits on the sunken
   surface and carries a dash — because "not measured" and "measured as nothing" are different
   answers, and only one of them is something a company should act on. */
.mdp-tr-unmeasured {
  display: flex;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border: 1px dashed var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-sunken);
  min-inline-size: 0;
}

.mdp-tr-unmeasured-mark {
  display: inline-flex;
  flex: none;
  margin-block-start: 2px;
  color: var(--mdp-text-faint);
}

.mdp-tr-unmeasured-text { min-inline-size: 0; }

.mdp-tr-unmeasured-name {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text);
  overflow-wrap: break-word;
}

.mdp-tr-unmeasured-measures {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

.mdp-tr-unmeasured-note {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-2xs);
  font-style: italic;
  color: var(--mdp-text-faint);
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE AI TRUST INSIGHT FENCE

   The only tinted, accent-bordered region on these screens. Everything the platform ASSERTS
   sits on the page surface outside it; everything the engine INTERPRETS sits inside. That is
   the whole visual contract of §4, and it holds without a caption because the boundary is
   geometric.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-tr-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;
}

/* The compact form, for a tab where the insight sits beside the record rather than being the
   subject of the screen. It loses padding — never the boundary sentence, the provenance chip
   or the "cannot" line, because those three are the guarantee. */
.mdp-tr-ai[data-compact='true'] {
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-4);
}

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

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

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

.mdp-tr-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-tr-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 reputation engine has no model call:
   its recommendations come from a fixed catalogue keyed to the component that triggers them.
   Letting a customer believe a paragraph was reasoned when it was selected would be exactly
   the small dishonesty this chip exists to prevent. */
.mdp-tr-ai-source {
  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);
}

/* 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-tr-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);
}

.mdp-tr-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-tr-ai-block { min-inline-size: 0; }

.mdp-tr-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-tr-ai-blockicon { display: inline-flex; flex: none; }

/* Five different things the engine is saying — what is working, what needs attention, what to
   do, what it could not see, and what limits its own conclusion. Merging their treatment would
   merge their meaning. */
.mdp-tr-ai-block[data-kind='strengths'] .mdp-tr-ai-blockicon { color: var(--mdp-success); }
.mdp-tr-ai-block[data-kind='attention'] .mdp-tr-ai-blockicon { color: var(--mdp-warn); }
.mdp-tr-ai-block[data-kind='reco'] .mdp-tr-ai-blockicon { color: var(--mdp-accent); }
.mdp-tr-ai-block[data-kind='missing'] .mdp-tr-ai-blockicon { color: var(--mdp-text-faint); }
.mdp-tr-ai-block[data-kind='limits'] .mdp-tr-ai-blockicon { color: var(--mdp-info); }

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

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

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

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

.mdp-tr-ai-loading {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
}

/* The engine's own basis sentence, printed verbatim. Quieter than the advice it justifies,
   because it is the footnote to it and not a second recommendation. */
.mdp-tr-ai-basis {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

/* WHAT THE ENGINE CANNOT DO, inside the region that carries what it says — so a customer who
   reads only this box still learns the boundary. Ruled off above, because it is a statement
   about the whole fence rather than another item in it. */
.mdp-tr-ai-cannot {
  margin: 0;
  padding-block-start: var(--mdp-sp-2);
  border-block-start: 1px solid var(--mdp-accent-border);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-muted);
}

/* ── RECOMMENDATIONS (inside the fence) ────────────────────────────────────── */

.mdp-tr-recos {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
}

.mdp-tr-reco {
  display: flex;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-accent-border);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

/* The engine's priority. "Do this one first" is the useful half of a recommendation list, and
   it is the engine's ordering rather than one this screen chose. */
.mdp-tr-reco-priority {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-accent-soft);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  color: var(--mdp-accent);
  font-variant-numeric: tabular-nums;
}

.mdp-tr-reco-text { min-inline-size: 0; }

.mdp-tr-reco-driver {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

.mdp-tr-reco-body {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  overflow-wrap: break-word;
}

/* ── THE RECORD: MOVEMENTS AND EVENTS ──────────────────────────────────────── */

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

.mdp-tr-entry {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  gap: var(--mdp-sp-3);
  padding-block: var(--mdp-sp-3);
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-inline-size: 0;
}

.mdp-tr-entry:last-child { border-block-end: 0; }

/* A movement's direction as a rule on the leading edge. Green for a rise and amber for a fall,
   and no red anywhere: a score that went down is a measurement, not an alarm. */
.mdp-tr-entry-rule {
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-border-strong);
}

.mdp-tr-entry[data-tone='success'] .mdp-tr-entry-rule { background: var(--mdp-success); }
.mdp-tr-entry[data-tone='warn'] .mdp-tr-entry-rule { background: var(--mdp-warn); }

.mdp-tr-entry-body { min-inline-size: 0; }

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

.mdp-tr-entry-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

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

.mdp-tr-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin: var(--mdp-sp-2) 0 0;
}

/* THE ENGINE'S OWN SENTENCES, PRINTED UNCHANGED. This is an audit record; rewording an entry
   would defeat the point of keeping one. */
.mdp-tr-entry-reasons {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  margin: var(--mdp-sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.mdp-tr-entry-reason {
  position: relative;
  padding-inline-start: var(--mdp-sp-4);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

.mdp-tr-entry-reason::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--mdp-sp-1);
  inset-block-start: 0.55em;
  inline-size: 4px;
  block-size: 4px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-border-strong);
}

.mdp-tr-entry-noreason {
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-xs);
  font-style: italic;
  color: var(--mdp-text-faint);
}

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

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

.mdp-tr-event-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-neutral-soft);
  color: var(--mdp-text-muted);
}

.mdp-tr-event-mark[data-tone='success'] { background: var(--mdp-success-soft); color: var(--mdp-success); }
.mdp-tr-event-mark[data-tone='warn'] { background: var(--mdp-warn-soft); color: var(--mdp-warn); }

.mdp-tr-event-text { min-inline-size: 0; }

.mdp-tr-event-name {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
  overflow-wrap: break-word;
}

.mdp-tr-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: var(--mdp-sp-1) 0 0;
}

.mdp-tr-event-when {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ── THE TRAJECTORY ────────────────────────────────────────────────────────── */

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

.mdp-tr-trendline {
  margin: 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
}

.mdp-tr-trendwindow {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-tr-sparkwrap {
  position: relative;
  display: flex;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-2);
  min-inline-size: 0;
}

.mdp-tr-spark {
  flex: 1 1 auto;
  inline-size: 100%;
  block-size: 120px;
  min-inline-size: 0;
  /* The SVG is authored left-to-right in time order. Mirroring it in Arabic is correct: time
     reads in the direction the language reads, and the accompanying table carries the dates
     either way. */
  overflow: visible;
}

.mdp-tr-spark-line {
  fill: none;
  stroke: var(--mdp-brand);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mdp-tr-spark-area {
  fill: var(--mdp-brand-soft);
  stroke: none;
}

/* THE AXIS IS THE ENGINE'S 0–100 AND IS PRINTED. An auto-fitted axis turns a two-point drift
   into a cliff, which on a trust screen is a lie told with geometry. */
.mdp-tr-sparkscale {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ── THE SERIES TABLE ──────────────────────────────────────────────────────── */

.mdp-tr-tablewrap {
  inline-size: 100%;
  overflow-x: auto;
  min-inline-size: 0;
}

.mdp-tr-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--mdp-fs-sm);
}

.mdp-tr-table th,
.mdp-tr-table td {
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-block-end: 1px solid var(--mdp-border-subtle);
  text-align: start;
  vertical-align: middle;
}

.mdp-tr-table th {
  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-tr-table td { color: var(--mdp-text); }

.mdp-tr-num { font-variant-numeric: tabular-nums; }

/* ── VISIBILITY ────────────────────────────────────────────────────────────── */

.mdp-tr-vis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mdp-sp-4);
  min-inline-size: 0;
}

.mdp-tr-vis-col {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  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;
}

/* Shared and private read differently at a glance, because confusing the two columns is the
   one mistake this panel exists to prevent. */
.mdp-tr-vis-col[data-kind='shared'] { border-inline-start: 3px solid var(--mdp-info); }
.mdp-tr-vis-col[data-kind='private'] { border-inline-start: 3px solid var(--mdp-brand); }

.mdp-tr-vis-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

.mdp-tr-vis-icon { display: inline-flex; flex: none; }
.mdp-tr-vis-col[data-kind='shared'] .mdp-tr-vis-icon { color: var(--mdp-info); }
.mdp-tr-vis-col[data-kind='private'] .mdp-tr-vis-icon { color: var(--mdp-brand); }

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

.mdp-tr-vis-list {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: var(--mdp-sp-1) 0 0;
  padding: 0;
  list-style: none;
}

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

.mdp-tr-vis-item::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--mdp-sp-1);
  inset-block-start: 0.55em;
  inline-size: 4px;
  block-size: 4px;
  border-radius: var(--mdp-r-pill);
  background: currentColor;
  opacity: 0.4;
}

/* ── STATES ────────────────────────────────────────────────────────────────── */

.mdp-tr-empty {
  display: flex;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-5) var(--mdp-sp-4);
  border: 1px dashed var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-sunken);
  min-inline-size: 0;
}

.mdp-tr-empty-icon {
  display: inline-flex;
  flex: none;
  margin-block-start: 2px;
  color: var(--mdp-text-faint);
}

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

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

.mdp-tr-empty-body {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  overflow-wrap: break-word;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE

   Two breaks, both of them where the content stops fitting rather than at a device name. Every
   collapse is to a single column — nothing is hidden at a narrow width, because a trust record
   a customer can only read on a desktop is a trust record half this platform's users cannot
   audit.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .mdp-tr-two,
  .mdp-tr-vis {
    grid-template-columns: minmax(0, 1fr);
  }

  .mdp-tr-standing {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mdp-sp-4);
  }
}

@media (max-width: 640px) {
  .mdp-tr-standing { padding: var(--mdp-sp-4); }

  .mdp-tr-arc {
    inline-size: 72px;
    block-size: 72px;
  }

  .mdp-tr-standing-num { font-size: var(--mdp-fs-2xl); }

  /* The register becomes label-over-value rather than shrinking the label column. A 200px
     label column at 390px leaves 100px for a date, which wraps to four lines. */
  .mdp-tr-ledger-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

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

  .mdp-tr-entry-head { flex-direction: column; }

  .mdp-tr-entry-when { white-space: normal; }

  /* THE SERIES TABLE BECOMES CARDS. A four-column table at 390px either scrolls sideways —
     the horizontal overflow §7 forbids — or crushes every column. Each row becomes a stacked
     block whose cells carry their own header text from `data-label`, so the data is complete
     and nothing is dropped at a narrow width. */
  .mdp-tr-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mdp-tr-table tr {
    display: block;
    padding-block: var(--mdp-sp-2);
    border-block-end: 1px solid var(--mdp-border-subtle);
  }

  .mdp-tr-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--mdp-sp-3);
    padding-inline: 0;
    padding-block: 2px;
    border-block-end: 0;
  }

  .mdp-tr-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: var(--mdp-fs-2xs);
    font-weight: var(--mdp-fw-semibold);
    letter-spacing: var(--mdp-tracking-caps);
    text-transform: uppercase;
    color: var(--mdp-text-muted);
  }

  .mdp-tr-spark { block-size: 96px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORCED COLOURS AND PRINT

   In forced-colours mode the tint that fences the AI region is dropped by the browser, so the
   fence is restored as a border the mode does honour. The boundary must not depend on a colour
   a user has switched off — which is also why it is stated in words inside the region.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (forced-colors: active) {
  .mdp-tr-ai {
    border: 2px solid CanvasText;
    border-inline-start: 4px solid CanvasText;
  }

  .mdp-tr-standing,
  .mdp-tr-driver,
  .mdp-tr-signals,
  .mdp-tr-vis-col {
    border: 1px solid CanvasText;
  }

  .mdp-tr-arc,
  .mdp-tr-driver-bar,
  .mdp-tr-coverage-track {
    forced-color-adjust: none;
  }
}

@media print {
  .mdp-tr-standing,
  .mdp-tr-driver,
  .mdp-tr-signals,
  .mdp-tr-vis-col,
  .mdp-tr-ai {
    break-inside: avoid;
    box-shadow: none;
  }

  /* The chart is decorative and the table beneath it carries the same series, so the printed
     record loses nothing by dropping it. */
  .mdp-tr-sparkwrap { display: none; }
}