/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — OFFER REQUEST & COMMERCIAL OFFER

   The fourteenth stylesheet, added for the Offers workspace — which is what the manifest in
   `index.html` asks a new module to do rather than editing a shared blob.

   EVERY SELECTOR IN THIS FILE IS PREFIXED `.mdp-ofr-`. No exceptions. Nothing here matches an
   element any earlier screen renders, so every screen that shipped before this one paints
   identically with this file loaded or absent. That is the property `developer.css`
   established and every sheet since has kept: a new sheet may only add, and a sheet that
   reached `.mdp-badge`, `.mdp-card` or `.mdp-kv` would be a refactor of the component library
   wearing a stylesheet's clothes.

   WHAT THIS FILE IS NOT

   It is not a second design. The three Offers screens are built from the existing component
   library — cards, fields, badges, callouts, tables, tabs, segmented controls, timelines,
   empty states, dialogs — and what is defined below is only the vocabulary that library has no
   element for: the workflow rail, and the parts of a private AI report.

   NO ILLUSTRATIONS AND NO OVERSIZED GLYPHS. There is not one rule in this file that sizes an
   `<svg>`, sets a decorative background, or draws a shape for its own sake. The largest text
   here is the analysis score at `--mdp-fs-2xl`, which is a figure a customer reads rather than
   a graphic, and the rail's markers are 10px dots.

   THE SEVERITY COLOURS ARE A RAIL, NOT A FILL

   Every finding is marked with a 3px border on its inline start and nothing else. A commercial
   risk is not a red panel: a customer scanning eight findings needs to locate the two that
   matter without the page becoming a traffic light, and a filled red block also makes the
   reasoning inside it harder to read. The same decision `instruments.css` documents, for the
   same reason.

   TOKENS ONLY, AND LOGICAL PROPERTIES ONLY

   Every value below is a token from `tokens.css`, so the customer's theme choice works without
   a second set of rules. Every inset, margin, padding and border uses its logical form
   (`inline-start`, not `left`), so the whole workspace mirrors in Arabic with no entry in
   `rtl.css` — which is a completed module. The rail is the one place that would normally need
   an RTL rule, and it does not: it is a flex row of equal columns whose connector is drawn with
   `border-inline-start`, so the writing direction reverses it for free.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   THE WORKFLOW RAIL

   REQUEST → OFFER → AI ANALYSIS → DECISION → ACCEPTED, with the offer's position marked.

   An `<ol>`, because it is an ordered sequence and a screen reader should say so. The steps
   share the width equally so the rail is stable as the labels change length between English and
   Arabic — a rail whose steps resize per locale reads as a different component in each.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ofr-rail {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-ofr-rail-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mdp-sp-2);
  position: relative;
  padding-block-start: var(--mdp-sp-1);
  text-align: center;
}

/* The connector between two steps: a line from the previous marker to this one, drawn as a
   border on the step itself rather than as a pseudo-element spanning the rail. It stops at the
   first step because there is nothing before it. */
.mdp-ofr-rail-step::before {
  content: '';
  position: absolute;
  inset-block-start: calc(var(--mdp-sp-1) + 5px);
  inset-inline-end: 50%;
  inline-size: 100%;
  block-size: 2px;
  background: var(--mdp-border);
}

.mdp-ofr-rail-step:first-child::before { content: none; }

/* A connector into a step that is done or current is part of the path already travelled. */
.mdp-ofr-rail-step[data-state='done']::before,
.mdp-ofr-rail-step[data-state='current']::before { background: var(--mdp-brand); }

.mdp-ofr-rail-mark {
  position: relative;
  z-index: var(--mdp-z-base);
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-bg-raised);
  border: 2px solid var(--mdp-border-strong);
}

.mdp-ofr-rail-step[data-state='done'] .mdp-ofr-rail-mark {
  background: var(--mdp-brand);
  border-color: var(--mdp-brand);
}

/* The current step gets a ring rather than a larger dot, so the rail's line does not shift. */
.mdp-ofr-rail-step[data-state='current'] .mdp-ofr-rail-mark {
  background: var(--mdp-bg-raised);
  border-color: var(--mdp-brand);
  box-shadow: 0 0 0 3px var(--mdp-brand-soft);
}

.mdp-ofr-rail-label {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-ofr-rail-step[data-state='current'] .mdp-ofr-rail-label {
  color: var(--mdp-text-strong);
  font-weight: var(--mdp-fw-semibold);
}

.mdp-ofr-rail-step[data-state='done'] .mdp-ofr-rail-label { color: var(--mdp-text); }

/* A closed offer — declined, withdrawn, expired — keeps its rail so the customer can see how
   far the conversation got, drawn back so it does not read as work still in progress. */
.mdp-ofr-rail[data-closed='true'] .mdp-ofr-rail-mark { border-color: var(--mdp-border-strong); }
.mdp-ofr-rail[data-closed='true'] .mdp-ofr-rail-step[data-state='done'] .mdp-ofr-rail-mark {
  background: var(--mdp-neutral);
  border-color: var(--mdp-neutral);
}
.mdp-ofr-rail[data-closed='true'] .mdp-ofr-rail-step[data-state='done']::before,
.mdp-ofr-rail[data-closed='true'] .mdp-ofr-rail-step[data-state='current']::before {
  background: var(--mdp-border-strong);
}
.mdp-ofr-rail[data-closed='true'] .mdp-ofr-rail-label { color: var(--mdp-text-muted); font-weight: var(--mdp-fw-normal); }

/* Narrow screens: five labels across a phone is five columns of broken words. The rail keeps
   its markers and stacks the labels beside them instead, which is the same information in the
   shape a narrow column can hold. */
@media (max-width: 640px) {
  .mdp-ofr-rail { flex-direction: column; align-items: stretch; gap: 0; }

  .mdp-ofr-rail-step {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mdp-sp-3);
    text-align: start;
    padding-block: var(--mdp-sp-2);
  }

  .mdp-ofr-rail-step::before {
    inset-block-start: 0;
    inset-inline-end: auto;
    inset-inline-start: 4px;
    inline-size: 2px;
    block-size: var(--mdp-sp-2);
  }

  .mdp-ofr-rail-label { font-size: var(--mdp-fs-sm); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE PRIVATE AI ANALYSIS

   One company's own report on one version. The panel opens with the Privacy Wall notice and
   closes with the price rule, and everything between them is the report's own sections.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ofr-an-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-4);
}

.mdp-ofr-an-score {
  display: flex;
  align-items: baseline;
  gap: var(--mdp-sp-1);
}

.mdp-ofr-an-score-value {
  font-size: var(--mdp-fs-2xl);
  font-weight: var(--mdp-fw-bold);
  line-height: var(--mdp-lh-tight);
  color: var(--mdp-text-strong);
  /* The score is a figure, and a figure beside Arabic text has to keep its own direction or
     "82 / 100" is rendered as "100 / 82". */
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.mdp-ofr-an-score-scale {
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text-faint);
  unicode-bidi: isolate;
}

.mdp-ofr-an-score-label {
  margin-inline-start: var(--mdp-sp-2);
  font-size: var(--mdp-fs-xs);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-ofr-an-summary {
  margin: 0;
  font-size: var(--mdp-fs-md);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
}

.mdp-ofr-an-block {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  padding-block-start: var(--mdp-sp-4);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

.mdp-ofr-an-title {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-ofr-an-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
}

.mdp-ofr-an-note,
.mdp-ofr-an-sub {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-ofr-an-none {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-success);
}

/* The price rule, restated under every report. Quiet, because it is a standing fact rather
   than a finding — but present, because a customer who does not know it may read the report
   as a valuation. */
.mdp-ofr-an-foot {
  margin: 0;
  padding-block-start: var(--mdp-sp-3);
  border-block-start: 1px solid var(--mdp-border-subtle);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-faint);
}

/* ── Completeness: what the offer states, and what it does not ───────────────── */

.mdp-ofr-an-completeness {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
}

.mdp-ofr-an-figure {
  display: flex;
  align-items: baseline;
  gap: var(--mdp-sp-2);
  margin: 0;
}

.mdp-ofr-an-figure-value {
  font-size: var(--mdp-fs-lg);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.mdp-ofr-an-figure-label {
  font-size: var(--mdp-fs-xs);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-muted);
}

.mdp-ofr-an-stated {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
}

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

.mdp-ofr-missing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-inset);
}

.mdp-ofr-missing-term {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
}

.mdp-ofr-missing-why {
  flex: 1 1 16rem;
  min-inline-size: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-muted);
}

/* ── Findings: conflicting terms, and commercial or operational risks ────────── */

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

.mdp-ofr-finding {
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-inset);
  /* The rail, not a fill. Default is the plain border; the three severities recolour only
     this edge. */
  border-inline-start: 3px solid var(--mdp-border-strong);
}

.mdp-ofr-finding[data-severity='low'] { border-inline-start-color: var(--mdp-info); }
.mdp-ofr-finding[data-severity='medium'] { border-inline-start-color: var(--mdp-warn); }
.mdp-ofr-finding[data-severity='high'] { border-inline-start-color: var(--mdp-danger); }

.mdp-ofr-finding-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
}

.mdp-ofr-finding-detail {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

/* ── Key attention points ────────────────────────────────────────────────────── */

.mdp-ofr-attention {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  margin: 0;
  /* A real bulleted list — these are points a customer reads one by one, and the marker is
     what tells them where each one begins. `padding-inline-start` and not `padding-left`, so
     the markers sit on the correct side in Arabic. */
  padding-inline-start: var(--mdp-sp-5);
}

.mdp-ofr-attention li {
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
}