/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — THE NEGOTIATION DESK
   The eighteenth stylesheet. Loaded last.

   The visual language of the post-deal negotiation: the issue lifecycle, the two-seat
   confirmation track, the AI suggestion frame, the readiness readout and the activity
   record. It is the Phase-3 Command Center system and the Phase-4 Trade Desk carried into
   the one screen where two companies actually settle terms — the same tokens, the same
   rhythm, the same status vocabulary, the same empty and loading grammar.

   ONE PREFIX, ONE EXCEPTION, AND THE EXCEPTION IS SCOPED

   Every selector this file writes either begins `.mdp-ng-` — new vocabulary no screen
   shipped before this phase renders — or is a DESCENDANT of `.mdp-ng`, the root class the
   negotiation desk puts on its outermost element. There is no third kind. A rule of the
   second kind cannot reach a screen that is not a negotiation desk, because no other screen
   has an ancestor carrying `.mdp-ng`; `console.css` set that precedent with `.mdp-op
   .mdp-tabs`, `desk.css` followed it with `.mdp-td`, and this follows both exactly.

   The desk component itself renders `deskPage()` INSIDE `.mdp-ng`, so every rule `desk.css`
   already scopes to `.mdp-td` — the tab strip, the shared table, the `.mdp-field` overflow
   floor, the callout wrap fix — applies here unchanged and is not restated. That is the
   point of nesting the two roots rather than choosing between them.

   THE INVENTORY. Every borrowed selector this file restyles, always under `.mdp-ng`:

     .mdp-ng .mdp-td-rail
        `grid-template-columns` only. The desk rail is built for four figures at a 150px
        floor; deal readiness publishes five, and at 150px the fifth wraps to a second row
        on a 1280px laptop and reads as an afterthought rather than as part of the readout.
        The floor drops to 138px. Nothing else about the rail changes — the cells, their
        tones, their padding and their link behaviour are all still `desk.css`'s.

     .mdp-ng .mdp-td-panel-foot
        `display: block` and the panel's own padding, in place of the desk foot's flex row.
        The negotiation panels put a block of prose and a wrapped row of assistant controls
        in the foot rather than one line of buttons, and a flex row centres a paragraph
        against a button group and then refuses to let either wrap cleanly.

     .mdp-ng .mdp-list-item
        Padding and title size only, under the owner's thread switcher, so a list borrowed
        into a desk panel reads at desk density instead of at inbox density. No colour, no
        state, no `aria-current` behaviour — those stay where `components.css` set them.

   Nothing else. No rule in this file sizes an `<svg>` outside `.mdp-ng`, so the illustration
   floor `enterprise.css` established stays where it is. No rule touches the shell, the rail,
   the top bar, the modal layer, the toast layer or any component's markup.

   THE ONE THING THIS STYLESHEET IS RESPONSIBLE FOR SAYING

   That a term one party has confirmed is NOT a term both parties have agreed. The lifecycle
   is decided in `features/negotiation-ui.js` from the server's own `state` column, and this
   file makes the difference visible three ways at once, so no single failure — a colour a
   customer cannot distinguish, a glyph that does not load, a monochrome print — can collapse
   the two into each other:

     · the stage stripe on the issue card (amber PROPOSED, blue PENDING CONFIRMATION,
       green AGREED, grey WITHDRAWN),
     · the two-seat confirmation track, in which an unfilled seat is drawn as a labelled
       dashed outline rather than omitted,
     · and the tally line beneath it, which states "1 of 2 confirmations" in words.

   THE AI FRAME IS NEVER MISTAKABLE FOR A MESSAGE. `.mdp-ng-ai` carries a hatched leading
   edge, an accent field, a permanent `AI SUGGESTION` tag and a border that no message row,
   issue card or agreed item shares. It is the only class in this file with that treatment,
   and only `aiFrame()` emits it.

   EVERY COLOUR IS A TOKEN, so light mode, dark mode and `prefers-contrast: more` are
   inherited for free. EVERY DIRECTIONAL PROPERTY IS LOGICAL — `inline-start`, `block-end`,
   `padding-inline`, `border-inline-start` — so Arabic mirrors with no `[dir='rtl']` rule in
   this file, which is why there are none.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1 — THE ROOT
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ng {
  display: block;
  min-inline-size: 0;
}

/* Five figures, not four. See the inventory. */
.mdp-ng .mdp-td-rail {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

/* A block foot, not a button row. See the inventory. */
.mdp-ng .mdp-td-panel-foot {
  display: block;
}

/* Desk density for the borrowed switcher list. See the inventory. */
.mdp-ng .mdp-list-item {
  padding: var(--mdp-sp-3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2 — THE HEAD
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ng-mast-meta {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

/* The deal reference, in the mono face every other screen sets an identifier in. It wraps
   rather than truncating: a reference that is cut off cannot be read back over a telephone. */
.mdp-ng-ref {
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-ng-tabs {
  min-inline-size: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3 — THE ISSUE CARD

   Pending Issues is the primary operational area of this screen, so an issue is a card and
   not a list row: it carries a lifecycle, two signatures, a proposed value, a linked
   commercial field, a provenance and up to two controls, and a one-line row cannot hold
   those without hiding most of them.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ng-issue {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  /* The stage stripe. A border rather than a pseudo-element, so it mirrors in Arabic by
     itself and survives forced-colours mode, where a decorative background would not. */
  border: 1px solid var(--mdp-border-subtle);
  border-inline-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

.mdp-ng-issue[data-dense='true'] {
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-3);
}

.mdp-ng-issue[data-stage='proposed'] { border-inline-start-color: var(--mdp-warn); }
.mdp-ng-issue[data-stage='awaiting'] {
  border-inline-start-color: var(--mdp-accent);
  background: var(--mdp-accent-soft);
}
.mdp-ng-issue[data-stage='agreed'] { border-inline-start-color: var(--mdp-success); }
.mdp-ng-issue[data-stage='withdrawn'] {
  border-inline-start-color: var(--mdp-neutral);
  background: var(--mdp-bg-sunken);
}

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

.mdp-ng-issue-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  min-inline-size: 0;
}

.mdp-ng-issue-title {
  margin: 0;
  font-size: var(--mdp-fs-md);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  min-inline-size: 0;
  flex: 1 1 240px;
  /* A term label is customer-typed and can be a long sentence with no spaces in it. */
  overflow-wrap: anywhere;
}

.mdp-ng-issue-badges {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

/* The one line that says what this item is waiting for. It sits directly under the title
   rather than beside the badge, because it is the sentence a customer scanning the panel
   reads to decide whether this row is theirs to act on. */
.mdp-ng-issue-wait {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
}

.mdp-ng-issue-wait[data-stage='proposed'] { color: var(--mdp-warn); }
.mdp-ng-issue-wait[data-stage='awaiting'] { color: var(--mdp-accent); }
.mdp-ng-issue-wait[data-stage='agreed'] { color: var(--mdp-success); }

.mdp-ng-issue-detail {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  max-inline-size: 78ch;
  overflow-wrap: anywhere;
}

/* Proposed and agreed values, as a definition list: a commercial figure and the word for
   what it is, side by side, never one without the other. */
.mdp-ng-issue-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  margin: 0;
  min-inline-size: 0;
}

.mdp-ng-issue-value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface-inset);
}

.mdp-ng-issue-value > dt {
  margin: 0;
  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-ng-issue-value > dd {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-ng-issue-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-1) var(--mdp-sp-3);
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

.mdp-ng-issue-facts > span {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
}

/* The separator between facts is a dot drawn by the box, not a character in the string —
   a literal "·" between two translated phrases is a punctuation decision made in English. */
.mdp-ng-issue-facts > span + span::before {
  content: '';
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: var(--mdp-border-strong);
  margin-inline-end: var(--mdp-sp-2);
}

.mdp-ng-issue-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4 — THE CONFIRMATION TRACK

   TWO SEATS, ALWAYS BOTH DRAWN. An empty seat is a dashed outline with a label, never an
   omission: a track that showed only the confirmations that exist would render a one-sided
   confirmation as a single tick with nothing beside it, which is the exact misreading this
   phase exists to make impossible.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ng-track {
  display: flex;
  flex-direction: column;
  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-bg-raised);
  min-inline-size: 0;
}

.mdp-ng-track-label {
  margin: 0;
  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-ng-seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-ng-seat {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-radius: var(--mdp-r-md);
  min-inline-size: 0;
}

/* An unfilled seat: dashed, quiet, and still a box that occupies the space its filled
   counterpart would. The absence is the information. */
.mdp-ng-seat[data-signed='false'] {
  border: 1px dashed var(--mdp-border-strong);
  background: transparent;
  color: var(--mdp-text-faint);
}

.mdp-ng-seat[data-signed='true'] {
  border: 1px solid color-mix(in srgb, var(--mdp-success) 40%, transparent);
  background: var(--mdp-success-soft);
  color: var(--mdp-success);
}

.mdp-ng-seat-mark {
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.mdp-ng-seat[data-signed='false'] .mdp-ng-seat-mark {
  border-style: dashed;
}

.mdp-ng-seat-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.mdp-ng-seat-who {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-ng-seat-state {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  color: inherit;
}

.mdp-ng-seat[data-signed='false'] .mdp-ng-seat-who { color: var(--mdp-text-muted); }

/* The arithmetic, in words. This is what survives a monochrome print and a screen reader. */
.mdp-ng-track-count {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-muted);
}

.mdp-ng-track-count[data-stage='awaiting'] { color: var(--mdp-accent); }
.mdp-ng-track-count[data-stage='agreed'] { color: var(--mdp-success); }

/* ═══════════════════════════════════════════════════════════════════════════════
   5 — THE AI FRAME

   The only region on this screen with this treatment, and only `aiFrame()` emits it. A
   suggestion must never be mistakable for a message the counterparty sent or for a term both
   parties confirmed, so the frame differs from both in border, field, leading edge and tag —
   four signals, not one colour.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ng-ai {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  padding-inline-start: var(--mdp-sp-5);
  border: 1px dashed var(--mdp-accent-border);
  border-radius: var(--mdp-r-lg);
  background: var(--mdp-accent-soft);
  position: relative;
  min-inline-size: 0;
  overflow: hidden;
}

/* The hatched leading edge. Decorative and additive: the dashed border and the tag already
   carry the meaning, so a browser that drops the gradient loses nothing that matters. */
.mdp-ng-ai::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background: repeating-linear-gradient(
    135deg,
    var(--mdp-accent) 0 3px,
    transparent 3px 6px
  );
}

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

/* The permanent marker. Uppercase, tracked, and never conditional — it is drawn whether or
   not the model answered, because the deterministic fallback is still not a human. */
.mdp-ng-ai-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--mdp-sp-1);
  padding: 2px var(--mdp-sp-2);
  border-radius: var(--mdp-r-sm);
  border: 1px solid var(--mdp-accent-border);
  background: var(--mdp-surface);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-accent);
  white-space: nowrap;
}

.mdp-ng-ai-tag-icon { display: inline-grid; place-items: center; }

.mdp-ng-ai-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.mdp-ng-ai-prov { display: inline-flex; margin-inline-start: auto; }

.mdp-ng-ai-note {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  max-inline-size: 78ch;
}

.mdp-ng-ai-body { min-inline-size: 0; }

.mdp-ng-ai-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

/* ── What the assistant may not do ────────────────────────────────────────────
   Drawn above the three generate controls rather than below them, so the limits are read
   before the first generation rather than after it. Not dismissible. */

.mdp-ng-limits {
  display: flex;
  flex-direction: column;
  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-bg-raised);
  min-inline-size: 0;
}

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

.mdp-ng-limits-icon { display: inline-grid; place-items: center; color: var(--mdp-brand); }

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

.mdp-ng-limits-list > li {
  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);
}

/* A bar rather than a bullet or a "✕": a glyph in the content would be a punctuation
   decision made in English, and a bar mirrors in Arabic without being told to. */
.mdp-ng-limits-list > li::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--mdp-sp-1);
  inset-block-start: 0.55em;
  inline-size: 7px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--mdp-danger);
}

.mdp-ng-limits-rule {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
}

/* ── One suggested option ─────────────────────────────────────────────────── */

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

.mdp-ng-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mdp-sp-3);
  flex-wrap: wrap;
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-accent-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

.mdp-ng-option-text { flex: 1 1 260px; min-inline-size: 0; }

.mdp-ng-option-label {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-ng-option-detail {
  margin: var(--mdp-sp-1) 0 0;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  max-inline-size: 72ch;
  overflow-wrap: anywhere;
}

.mdp-ng-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-1) var(--mdp-sp-3);
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

.mdp-ng-option-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

/* ── A rewrite, beside what it replaced ───────────────────────────────────── */

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

@media (min-width: 720px) {
  .mdp-ng-rewrite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mdp-ng-rewrite-part {
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

.mdp-ng-rewrite-part[data-role='suggested'] {
  border-color: var(--mdp-accent-border);
}

.mdp-ng-rewrite-label {
  margin: 0 0 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-ng-rewrite-text {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6 — THE RESPONSE AND ITS TOOLS
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ng-compose-actions,
.mdp-ng-tools-row {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
}

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

/* The modal form. Prefixed rather than scoped, because `modal()` portals its body out of
   `.mdp-ng` into the overlay layer, where a descendant selector would never reach it. */
.mdp-ng-form {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

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

/* ═══════════════════════════════════════════════════════════════════════════════
   7 — THE ACTIVITY RECORD

   A LEDGER, NOT A CHAT. This is the transcript a bank or a lawyer reads six months later:
   every entry states its origin, its author, its kind, its provenance and its timestamp in
   the same arrangement, and no entry is drawn to look like it was spoken. There are no
   bubbles, no alternating sides and no tails.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ng-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) 0;
  border-block-end: 1px solid var(--mdp-border-subtle);
  min-inline-size: 0;
}

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

.mdp-ng-entry-mark {
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  flex: 0 0 26px;
  border-radius: var(--mdp-r-sm);
  border: 1px solid var(--mdp-border);
  background: var(--mdp-surface);
  color: var(--mdp-text-faint);
}

/* Four origins, four treatments. The counterparty's entries carry the brand edge because
   they are the ones the customer is answering. */
.mdp-ng-entry[data-origin='you'] .mdp-ng-entry-mark {
  border-color: var(--mdp-border-strong);
  color: var(--mdp-text-muted);
}
.mdp-ng-entry[data-origin='them'] .mdp-ng-entry-mark {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
  color: var(--mdp-brand);
}
.mdp-ng-entry[data-origin='system'] .mdp-ng-entry-mark {
  color: var(--mdp-info);
}
/* Private AI activity. Dashed, like the frame, because it is the same kind of thing and
   because the counterparty's copy of this thread does not contain it at all. */
.mdp-ng-entry[data-origin='ai'] .mdp-ng-entry-mark {
  border-style: dashed;
  border-color: var(--mdp-accent-border);
  background: var(--mdp-accent-soft);
  color: var(--mdp-accent);
}

.mdp-ng-entry-text {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  min-inline-size: 0;
  flex: 1 1 auto;
}

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

.mdp-ng-entry-who {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-ng-entry-author {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  overflow-wrap: anywhere;
}

.mdp-ng-entry-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text);
  max-inline-size: 78ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mdp-ng-entry[data-origin='system'] .mdp-ng-entry-body {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-ng-entry-at {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 — KEY COMMERCIAL TERMS
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ng-term {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

/* The deal value takes the full row and a larger face. It is the figure a customer looks
   for first, and a grid that gave it the same weight as the Incoterm would make them hunt. */
.mdp-ng-term[data-lead='true'] { grid-column: 1 / -1; }

.mdp-ng-term-label {
  margin: 0;
  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-ng-term-value {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-ng-term[data-lead='true'] .mdp-ng-term-value {
  font-size: var(--mdp-fs-lg);
  font-variant-numeric: tabular-nums;
}

/* An unfilled term is stated, never blank — and drawn quietly, so a customer scanning the
   strip can see at a glance which figures the deal does not yet carry. */
.mdp-ng-term[data-empty='true'] .mdp-ng-term-value {
  font-weight: var(--mdp-fw-normal);
  color: var(--mdp-text-faint);
}

.mdp-ng-terms-note {
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9 — SMALL PIECES
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ng-none {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text-faint);
}

.mdp-ng-note {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
  min-inline-size: 0;
}

.mdp-ng-note-icon {
  display: grid;
  place-items: center;
  color: var(--mdp-info);
  flex: 0 0 auto;
  margin-block-start: 1px;
}

.mdp-ng-note-text { min-inline-size: 0; }

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

.mdp-ng-note-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);
  max-inline-size: 72ch;
}

.mdp-ng-party-since {
  margin: var(--mdp-sp-2) 0 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10 — NARROW SCREENS

   The desk already stacks to one column below 1100px, which puts Pending Issues first and
   the standing facts under them — the DOM order, unreordered, so a screen reader hears what
   a phone shows. What is left to do here is density: an issue card at 390px is mostly
   padding if it keeps the desk's, and the confirmation seats have to stop being a two-up
   grid before their labels start hyphenating.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .mdp-ng-issue { padding: var(--mdp-sp-3); }
  .mdp-ng-issue-values { grid-template-columns: minmax(0, 1fr); }
  .mdp-ng-seats { grid-template-columns: minmax(0, 1fr); }
  .mdp-ng-limits-list { grid-template-columns: minmax(0, 1fr); }
  .mdp-ng-ai { padding: var(--mdp-sp-3); padding-inline-start: var(--mdp-sp-4); }
  .mdp-ng-terms { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

@media (max-width: 560px) {
  /* A one-sentence button label — "Suggest a compromise", and its longer Arabic — is wider
     than a 390px screen once `.mdp-btn`'s `white-space: nowrap` is applied to it. The tool
     row and the issue actions give each control the full width and let the label wrap,
     which is the same fix `desk.css` documents for the callout at this breakpoint. */
  .mdp-ng-tools-row > .mdp-btn,
  .mdp-ng-compose-actions > .mdp-btn,
  .mdp-ng-issue-actions > .mdp-btn,
  .mdp-ng-option-actions > .mdp-btn {
    inline-size: 100%;
    white-space: normal;
  }

  .mdp-ng-option { padding: var(--mdp-sp-2); }
  .mdp-ng-option-actions { inline-size: 100%; }
  .mdp-ng-entry { gap: var(--mdp-sp-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11 — PREFERENCES

   Nothing in this file animates, so there is no `prefers-reduced-motion` block to write.
   Under `prefers-contrast: more` the two edges that carry meaning — the issue stage stripe
   and the unfilled confirmation seat — are widened, because a 3px stripe and a 1px dashed
   outline are the first things to disappear on a low-quality panel in daylight.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-contrast: more) {
  .mdp-ng-issue { border-inline-start-width: 5px; }
  .mdp-ng-seat[data-signed='false'] { border-width: 2px; }
  .mdp-ng-ai { border-width: 2px; }
  .mdp-ng-ai::before { inline-size: 6px; }
}

/* Forced colours strips backgrounds, so the meaning has to survive in borders alone. The
   dashed/solid distinction between an unfilled and a filled seat, and between the AI frame
   and everything else, is already carried by `border-style` — which forced colours keeps. */
@media (forced-colors: active) {
  .mdp-ng-ai::before { display: none; }
  .mdp-ng-issue,
  .mdp-ng-track,
  .mdp-ng-seat,
  .mdp-ng-option,
  .mdp-ng-note { border: 1px solid CanvasText; }
  .mdp-ng-seat[data-signed='false'] { border-style: dashed; }
  .mdp-ng-ai { border: 2px dashed CanvasText; }
}