/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — OPERATIONS CONSOLE

   The NINTH stylesheet, and the same additive move the document's own manifest asks a
   new module to make rather than editing a shared blob. It loads last.

   TWO KINDS OF RULE LIVE HERE, AND THE DIFFERENCE MATTERS

   1. `.mdp-op-*` — NEW vocabulary, overriding nothing. The control bar, the record grid,
      the fact grid, the ledger, the compact timeline, the console form and the console
      tab strip. No screen that shipped before this file existed can be affected by any
      of them, because no screen that shipped before this file existed uses the prefix.

   2. THE DENSITY CORRECTION — a small, deliberate, reversible set of rules that DOES
      change existing screens, and is the only such set in this file. §7 of the work order
      asks for exactly one thing across every authenticated customer route: "giant
      empty-state artwork, oversized SVG/icon, excessive blank vertical space". The
      component that draws all of it is `emptyState()` in `components/states.js`, whose
      `.mdp-state` block is a 42px icon tile centred inside 40px of vertical padding.

      There are three ways to fix that and only one of them is permitted:

        • Edit `components/states.js` — a completed module. Rule 2 forbids it.
        • Edit `.mdp-state` in `components.css` — a completed module. Rule 2 forbids it.
        • Add a scoped override in a NEW stylesheet. This.

      It is therefore a stylesheet-level change to a rendering, made without touching a
      single completed file, and it is reverted by deleting one `<link>` from `index.html`.
      Every affected screen keeps its markup, its copy, its actions, its icon names, its
      ARIA and its behaviour. Only the geometry changes: the icon becomes an indicator
      rather than an illustration, the block becomes left-aligned, and roughly 60px of
      vertical emptiness per empty state comes back.

      ERROR STATES ARE EXEMPT. `.mdp-state[data-kind='error']` keeps its full presentation:
      an error is an interruption, it carries a recovery action and a support code, and
      shrinking it to three muted lines would make the one state that must be noticed the
      one least likely to be.

   3. THE SIDEBAR POLISH — §8. Also scoped, also additive, also reverted with the link.
      No navigation item is added, removed, reordered, renamed or re-permissioned by CSS;
      `routes.js` owns all of that and is not touched.

   EVERY COLOUR IS A TOKEN. Nothing here is a literal colour, so light mode, dark mode and
   `prefers-contrast: more` are all inherited for free.

   EVERY DIRECTIONAL PROPERTY IS LOGICAL — `inline-start`, `block-end`, `padding-inline`.
   Arabic mirrors with no `[dir='rtl']` rule in this file, which is why there are none.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1 — THE DENSITY CORRECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

/* An empty state is a statement, not an illustration: an indicator, a line, a sentence.
   `data-kind='error'` is excluded from every rule in this block. */
.mdp-state:not([data-kind='error']) {
  flex-direction: row;
  align-items: flex-start;
  text-align: start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
}

.mdp-state:not([data-kind='error'])[data-compact='true'] {
  padding: var(--mdp-sp-3);
}

/* 42px tile → 22px indicator, 20px glyph → 14px. The largest glyph anywhere in the
   console register is 15px, and this is what brings the rest of the portal to it. */
.mdp-state:not([data-kind='error']) .mdp-state-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-block-start: 1px;
  border-radius: var(--mdp-r-xs);
  background: transparent;
}

.mdp-state:not([data-kind='error']) .mdp-state-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.7;
}

/* The text becomes one column beside the indicator rather than three centred blocks. */
.mdp-state:not([data-kind='error']) .mdp-state-title,
.mdp-state:not([data-kind='error']) .mdp-state-body,
.mdp-state:not([data-kind='error']) .mdp-state-actions {
  grid-column: 2;
}

.mdp-state:not([data-kind='error']) .mdp-state-title {
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-snug);
}

.mdp-state:not([data-kind='error']) .mdp-state-body {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
  max-width: 62ch;
}

.mdp-state:not([data-kind='error']) .mdp-state-actions {
  justify-content: flex-start;
  margin-block-start: var(--mdp-sp-1);
}

/* The indicator and the three text blocks are siblings in the component's own markup, so
   the row is made a two-track grid rather than a flex row — that keeps the title, body and
   actions stacked in the second track without changing a single element. */
.mdp-state:not([data-kind='error']) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2 — THE SIDEBAR (§8)

   Polish only: tighter rhythm, a stronger section hierarchy, a clearer active state and
   a hover that reads as a control rather than as a highlight. The rail keeps its width,
   its collapse behaviour, its mobile drawer, its icons and every one of its entries.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-sidenav {
  gap: 2px;
  padding-block-start: var(--mdp-sp-3);
}

/* A hairline above each group heading turns a list of items into sections that can be
   scanned. Not on the first, which needs no separator from the top of the rail. */
.mdp-nav-section {
  margin-block-start: var(--mdp-sp-3);
  padding-block-start: var(--mdp-sp-3);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

.mdp-nav-section:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.mdp-nav-section-label {
  padding-block: var(--mdp-sp-1);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--mdp-text-faint);
}

.mdp-nav-item {
  gap: var(--mdp-sp-2);
  padding-block: 7px;
  font-size: var(--mdp-fs-xs);
  border: 1px solid transparent;
}

.mdp-nav-item:hover {
  border-color: var(--mdp-border-subtle);
  background: var(--mdp-surface-inset);
}

/* The active entry carries the gold marker the rest of the product uses as an accent and
   never as a fill: a 2px rail, a soft background, a strong label. */
.mdp-nav-item[aria-current='page'] {
  border-color: var(--mdp-brand-border);
}

.mdp-nav-item[aria-current='page']::before {
  inset-block: 25%;
  width: 2px;
}

.mdp-nav-item[aria-current='page'] .mdp-nav-icon {
  color: var(--mdp-brand);
}

/* 18px → 15px, the console's operational-indicator size. The icon supports the label; it
   is never the information. */
.mdp-nav-icon,
.mdp-nav-icon svg {
  width: 15px;
  height: 15px;
}

.mdp-nav-icon svg { stroke-width: 1.8; }

/* An expandable parent's children keep the rail's own rhythm — the console rail sits 2px apart,
   and a nested list that breathed differently would read as a second component. Polish only: the
   indent, the guide line and the disclosure itself live in `layout.css`. */
.mdp-nav-children {
  gap: 2px;
  margin-block-start: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3 — THE CONSOLE PAGE ROOT

   `.mdp-op` is always applied beside `.mdp-ck`, so a console screen inherits the cockpit's
   rhythm and adds only what the cockpit had no need for.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op {
  min-inline-size: 0;
}

/* The heading block above a console. Tighter than `.mdp-page-head` because a console
   screen puts its instruments where a card screen puts its subtitle. */
.mdp-op .mdp-page-head {
  margin-block-end: 0;
}

.mdp-op-panel-actions {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  min-inline-size: 0;
}

.mdp-op-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin-block-start: var(--mdp-sp-2);
}

.mdp-op-faint { color: var(--mdp-text-faint); }

/* ═══════════════════════════════════════════════════════════════════════════════
   4 — TAB STRIP

   The shared `.mdp-tabs` at console density. Scoped INSIDE `.mdp-op`, so the twenty-odd
   screens that use the same component outside a console are untouched.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op .mdp-tabs {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-bg-raised);
  overflow-x: auto;
  scrollbar-width: thin;
}

.mdp-op .mdp-tab {
  padding: 5px var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
  font-size: var(--mdp-fs-xs);
  white-space: nowrap;
}

.mdp-op .mdp-tab[aria-current='page'] {
  background: var(--mdp-surface-inset);
  color: var(--mdp-text-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5 — CONTROL BAR

   Search, filters and the primary action on one line. It wraps rather than scrolls,
   because a filter a customer cannot see is a filter they will not clear.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  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-op-bar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--mdp-sp-3);
  flex: 1 1 320px;
  min-inline-size: 0;
}

.mdp-op-bar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin-inline-start: auto;
}

/* Fields inside a control bar lose the block margin they carry inside a form. */
.mdp-op-bar .mdp-field { margin: 0; min-inline-size: 0; }
.mdp-op-bar .mdp-field-label { font-size: var(--mdp-fs-2xs); }

/* ═══════════════════════════════════════════════════════════════════════════════
   6 — RECORD GRID

   The counterparty grid, the credit-pack grid, the connector grid. Uniform cards on the
   same hairline background as the status strip, so a screen reads as one instrument
   surface rather than as a stack of unrelated boxes.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op-records {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-border-subtle);
  overflow: hidden;
  min-inline-size: 0;
}

.mdp-op-record {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

.mdp-op-record[data-tone='warn'] { box-shadow: inset 2px 0 0 0 var(--mdp-warn); }
.mdp-op-record[data-tone='danger'] { box-shadow: inset 2px 0 0 0 var(--mdp-danger); }
.mdp-op-record[data-tone='brand'] { box-shadow: inset 2px 0 0 0 var(--mdp-brand); }
.mdp-op-record[data-tone='success'] { box-shadow: inset 2px 0 0 0 var(--mdp-success); }

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

.mdp-op-record-id { min-inline-size: 0; }

/* The name is a button when opening a detail drawer and a paragraph when there is nothing
   to open. Both render identically; only one is focusable, which is correct. */
.mdp-op-record-name {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-strong);
  text-align: start;
  overflow-wrap: anywhere;
}

button.mdp-op-record-name { cursor: pointer; }
button.mdp-op-record-name:hover { color: var(--mdp-brand); }

.mdp-op-record-sub {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-op-record-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mdp-sp-1);
  flex: 0 0 auto;
}

.mdp-op-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin-block-start: auto;
  padding-block-start: var(--mdp-sp-3);
  border-block-start: 1px solid var(--mdp-border-subtle);
}

/* Figures inside a record: label above value, two or three across, tabular. */
.mdp-op-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--mdp-sp-3);
  margin: 0;
}

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

.mdp-op-figure dt {
  font-size: 10px;
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}

.mdp-op-figure dd {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7 — FACT GRID

   Label/value at console density on the hairline background. The compact replacement for
   a stack of `kv()` blocks inside a card.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op-facts {
  display: grid;
  grid-template-columns: repeat(var(--mdp-op-cols, 2), minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-border-subtle);
  overflow: hidden;
}

.mdp-op-facts[data-cols='1'] { --mdp-op-cols: 1; }
.mdp-op-facts[data-cols='2'] { --mdp-op-cols: 2; }
.mdp-op-facts[data-cols='3'] { --mdp-op-cols: 3; }
.mdp-op-facts[data-cols='4'] { --mdp-op-cols: 4; }

.mdp-op-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--mdp-sp-3);
  background: var(--mdp-surface);
  min-inline-size: 0;
}

.mdp-op-fact dt {
  font-size: 10px;
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
}

.mdp-op-fact dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8 — LEDGER

   A real table, for the two surfaces that are genuinely tabular: the credit ledger and
   the reputation history. Money and figures are tabular-numeric and end-aligned so a
   column of amounts can be read down.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op-ledger-wrap {
  overflow-x: auto;
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
}

.mdp-op-ledger {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--mdp-fs-xs);
}

.mdp-op-ledger th {
  position: sticky;
  inset-block-start: 0;
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  background: var(--mdp-bg-raised);
  border-block-end: 1px solid var(--mdp-border-subtle);
  font-size: 10px;
  font-weight: var(--mdp-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--mdp-tracking-caps);
  color: var(--mdp-text-faint);
  text-align: start;
  white-space: nowrap;
}

.mdp-op-ledger td {
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border-block-end: 1px solid var(--mdp-border-subtle);
  color: var(--mdp-text);
  vertical-align: top;
}

.mdp-op-ledger tbody tr:last-child td { border-block-end: 0; }
.mdp-op-ledger tbody tr:hover td { background: var(--mdp-surface-inset); }

.mdp-op-ledger [data-align='end'] { text-align: end; }
.mdp-op-ledger [data-align='center'] { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════════
   9 — TIMELINE

   Four lines of vertical space per entry rather than nine. The rail is drawn on the
   list, not per item, so it is one border rather than one per row.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  margin: 0;
  padding: 0 0 0 0;
  padding-inline-start: var(--mdp-sp-4);
  border-inline-start: 1px solid var(--mdp-border-subtle);
  list-style: none;
}

.mdp-op-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-op-tl-dot {
  position: absolute;
  inset-inline-start: calc(var(--mdp-sp-4) * -1 - 4px);
  inset-block-start: 5px;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-neutral);
}

.mdp-op-tl-dot[data-tone='brand'] { background: var(--mdp-brand); }
.mdp-op-tl-dot[data-tone='info'] { background: var(--mdp-info); }
.mdp-op-tl-dot[data-tone='success'] { background: var(--mdp-success); }
.mdp-op-tl-dot[data-tone='warn'] { background: var(--mdp-warn); }
.mdp-op-tl-dot[data-tone='danger'] { background: var(--mdp-danger); }

.mdp-op-tl-text { min-inline-size: 0; }

.mdp-op-tl-title {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

.mdp-op-tl-body {
  margin: 2px 0 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow-wrap: anywhere;
}

.mdp-op-tl-when {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10 — CONSOLE ROWS WITH THEIR OWN CONTROLS

   A row that carries buttons cannot itself be a link. These two rules put the row and
   its controls side by side without changing `.mdp-ck-row` at all.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-op-row-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-op-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  padding-inline-end: var(--mdp-sp-3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11 — CONSOLE FORM

   The company control panel writes. Its fields keep the shared field component exactly
   as it is; only the SECTION around them is brought to console density — a hairline
   header, a tighter grid, and no card chrome.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-op-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-3);
  padding: 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-op-fieldset-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  padding-block-end: var(--mdp-sp-3);
  border-block-end: 1px solid var(--mdp-border-subtle);
}

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

.mdp-op-fieldset-head svg {
  inline-size: 14px;
  block-size: 14px;
  color: var(--mdp-text-faint);
  flex: 0 0 auto;
}

.mdp-op-fieldset-note {
  margin-inline-start: auto;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

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

/* A control that needs the full width of the grid — a products list, a categories list. */
.mdp-op-formgrid > [data-wide='true'] { grid-column: 1 / -1; }

/* The save bar. Sticks to the bottom of the viewport while a long form is being edited,
   so the customer never scrolls to find Save. */
.mdp-op-formbar {
  position: sticky;
  inset-block-end: 0;
  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-4);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-glass);
  backdrop-filter: blur(8px);
  z-index: var(--mdp-z-sticky);
}

.mdp-op-formbar-note {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12 — COMPARISON BARS

   A labelled row with a meter, used where the server publishes a set of named readings
   on one scale — reputation components, usage by feature. The label and the figure are
   both text; the bar is a second, redundant encoding and is never the only one.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-op-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--mdp-sp-2) var(--mdp-sp-3);
  min-inline-size: 0;
}

.mdp-op-bar-label {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text);
  overflow-wrap: anywhere;
}

.mdp-op-bar-value {
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mdp-op-bar-track { grid-column: 1 / -1; }

.mdp-op-bar-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13 — RESPONSIVE

   The console grids already carry `auto-fit`, so these breakpoints are about PRIORITY
   rather than about fitting. On a phone a record becomes a full-width block and its
   figures become two columns; nothing is hidden, and nothing is merely shrunk.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .mdp-op-records { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .mdp-op-facts[data-cols='3'],
  .mdp-op-facts[data-cols='4'] { --mdp-op-cols: 2; }
}

@media (max-width: 640px) {
  .mdp-op-records { grid-template-columns: minmax(0, 1fr); }
  .mdp-op-facts,
  .mdp-op-facts[data-cols='2'],
  .mdp-op-facts[data-cols='3'],
  .mdp-op-facts[data-cols='4'] { --mdp-op-cols: 1; }
  .mdp-op-record { padding: var(--mdp-sp-3); }
  .mdp-op-bar { padding: var(--mdp-sp-3); }
  .mdp-op-bar-end { margin-inline-start: 0; inline-size: 100%; }
  .mdp-op-formbar { padding: var(--mdp-sp-3); }
  /* The row's controls move under its text rather than squeezing the title to nothing —
     the same decision `cockpit.css` makes for the row's meta column. */
  .mdp-op-row-split { grid-template-columns: minmax(0, 1fr); }
  .mdp-op-row-actions { padding: 0 var(--mdp-sp-3) var(--mdp-sp-3); }
  .mdp-op-tl-item { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14 — MOTION AND CONTRAST

   A customer who has asked their operating system for less motion gets none, and one who
   has asked for more contrast gets a real border on every surface that used a hairline.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mdp-op-formbar { backdrop-filter: none; background: var(--mdp-bg-raised); }
}

@media (prefers-contrast: more) {
  .mdp-op-records,
  .mdp-op-facts,
  .mdp-op-ledger-wrap,
  .mdp-op-bar,
  .mdp-op-fieldset,
  .mdp-op-formbar { border-color: var(--mdp-border-strong); }
  .mdp-op-timeline { border-inline-start-color: var(--mdp-border-strong); }
  .mdp-op .mdp-tabs { border-color: var(--mdp-border-strong); }
  .mdp-nav-item[aria-current='page'] { border-color: var(--mdp-brand); }
}