/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — COMMAND COCKPIT

   The eighth stylesheet, and the same additive move `developer.css` and
   `integrations.css` made before it: a new file loaded last, in which EVERY selector
   is prefixed `.mdp-ck-`. It overrides nothing. Every screen that shipped before it
   renders identically with this file loaded or absent, which is what makes the
   redesign reversible and Rule 2 intact — no completed stylesheet was edited to make
   room for it.

   WHY A NEW STYLESHEET AND NOT NEW RULES IN `components.css`

   `components.css` is the shared component library. A cockpit-density variant of
   `.mdp-card` added there would change the density of the twenty-six screens that use
   it, which is a breaking change to completed modules dressed up as a refactor. The
   cockpit is a different visual register — denser, flatter, hairline-ruled — so it
   gets its own vocabulary and leaves the library alone.

   WHAT THE REGISTER IS

   An aircraft command panel: hairline grids rather than gaps, one uniform border
   colour, restrained shadows, gold used as an accent and never as a fill, numbers set
   in tabular figures so a column of them lines up, and icons at 13–15px used as
   OPERATIONAL INDICATORS rather than as content. There is no illustration in this
   file and no rule in it that can produce one: the largest glyph any selector here
   sizes is 15px.

   THEMES, DIRECTION AND CONTRAST

   Not one colour is written literally. Every value is a `--mdp-` token, so the light
   theme, the dark theme and `prefers-contrast: more` all work here for free and a
   third theme would need no change to this file. Every inset, margin, border and
   padding that has a side is a LOGICAL property (`inline-start`, `block-end`), so
   Arabic mirrors without a single `[dir='rtl']` override.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   THE SCREEN
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck {
  display: flex;
  flex-direction: column;
  /* Tighter than `.mdp-stack`'s page rhythm on purpose: the cockpit fits more on a
     screen, and the panel headings do the separating that whitespace does elsewhere. */
  gap: var(--mdp-sp-5);
  min-inline-size: 0;
}

/* A panel: a micro-caps heading, a hairline rule that runs to the edge, and content.
   The rule is what makes a dense screen readable — it groups without boxing. */
.mdp-ck-panel { min-inline-size: 0; }

.mdp-ck-panel-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  margin-block-end: var(--mdp-sp-3);
}

.mdp-ck-panel-title {
  margin: 0;
  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-faint);
  white-space: nowrap;
}

.mdp-ck-panel-rule {
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--mdp-border);
}

.mdp-ck-panel-note {
  flex: none;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE VERIFICATION BANNER

   A STRIP, NOT A CARD. The screen it replaced gave verification a full dashboard card
   with a heading, a paragraph, a bar and a footer button — roughly a fifth of the
   first viewport for a sentence and a percentage. This is one row: a ring, two lines,
   the outstanding requirements as chips, and the button. It never exceeds ~72px tall
   on a desktop and wraps rather than growing on a phone.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mdp-sp-3) var(--mdp-sp-4);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  border: 1px solid var(--mdp-border);
  /* The tone lives on the leading edge, which mirrors in Arabic without a rule. */
  border-inline-start: 3px solid var(--mdp-neutral);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  box-shadow: var(--mdp-shadow-sm);
}

.mdp-ck-banner[data-tone='brand'] { border-inline-start-color: var(--mdp-brand); }
.mdp-ck-banner[data-tone='warn'] { border-inline-start-color: var(--mdp-warn); }
.mdp-ck-banner[data-tone='danger'] { border-inline-start-color: var(--mdp-danger); }
.mdp-ck-banner[data-tone='success'] { border-inline-start-color: var(--mdp-success); }

.mdp-ck-banner-text {
  flex: 1 1 22ch;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}

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

.mdp-ck-banner-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text-muted);
  /* Capped, because a banner that grows to three lines is the card this replaced. */
  max-inline-size: 74ch;
}

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

/* The outstanding requirements, as chips rather than as a bulleted list. The server's
   sentences are short; a list of three of them is four lines, and three chips is one. */
.mdp-ck-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-1);
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.mdp-ck-req {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--mdp-sp-2);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-surface-inset);
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  max-inline-size: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdp-ck-req[data-more='true'] {
  border-style: dashed;
  color: var(--mdp-text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE ASYNCHRONOUS SLOT

   Every instrument that fills itself in from its own request is rendered into a slot, and a
   slot is `display: contents` — it has no box of its own, so the cell or tile inside it
   becomes the grid item directly. Without this the wrapper would take the instrument's place
   in the grid and the hairline strip would have a column of background where a reading is.

   The element is a plain `<div>` with no semantics, which is the one case where
   `display: contents` carries no accessibility cost: there is nothing for it to remove.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-slot { display: contents; }

/* ═══════════════════════════════════════════════════════════════════════════════
   THE STATUS STRIP

   Eight indicators on one hairline grid. The 1px gap over a bordered background is
   what draws the rules — one shared line between neighbours rather than two abutting
   borders, which is the difference between an instrument panel and a row of boxes.
   `auto-fit` with a 150px floor means it is eight across on a wide desktop, four on a
   laptop, two on a tablet and one on a phone, without a single media query and
   without ever overflowing horizontally.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-border);
  overflow: hidden;
}

.mdp-ck-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  background: var(--mdp-surface);
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--mdp-dur-fast) var(--mdp-ease);
}

a.mdp-ck-cell:hover,
a.mdp-ck-cell:focus-visible { background: var(--mdp-surface-2); }
a.mdp-ck-cell:hover .mdp-ck-cell-label { color: var(--mdp-brand); }

.mdp-ck-cell-label {
  display: flex;
  align-items: center;
  gap: 6px;
  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-faint);
  transition: color var(--mdp-dur-fast) var(--mdp-ease);
}

.mdp-ck-cell-label svg { inline-size: 13px; block-size: 13px; flex: none; }

.mdp-ck-cell-main {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-ck-cell-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-inline-size: 0;
  font-size: var(--mdp-fs-xl);
  font-weight: var(--mdp-fw-bold);
  line-height: var(--mdp-lh-tight);
  color: var(--mdp-text-strong);
  /* Tabular figures: a column of counters that shifts as its digits change reads as a
     broken instrument. */
  font-variant-numeric: tabular-nums;
}

.mdp-ck-cell-value[data-tone='brand'] { color: var(--mdp-brand); }
.mdp-ck-cell-value[data-tone='success'] { color: var(--mdp-success); }
.mdp-ck-cell-value[data-tone='warn'] { color: var(--mdp-warn); }
.mdp-ck-cell-value[data-tone='danger'] { color: var(--mdp-danger); }
.mdp-ck-cell-value[data-tone='muted'] { color: var(--mdp-text-faint); }

.mdp-ck-cell-unit {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}

.mdp-ck-cell-note {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INDICATORS — the small parts the whole design rests on
   ═══════════════════════════════════════════════════════════════════════════════ */

/* A status light. Seven pixels with a halo, which is the entire vocabulary for "this
   is live / waiting / wrong" on this screen. It is decorative by construction — every
   caller states the same fact in text beside it, so a screen reader loses nothing. */
.mdp-ck-led {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--mdp-neutral);
  box-shadow: 0 0 0 3px var(--mdp-neutral-soft);
}

.mdp-ck-led[data-tone='brand'] { background: var(--mdp-brand); box-shadow: 0 0 0 3px var(--mdp-brand-soft); }
.mdp-ck-led[data-tone='accent'] { background: var(--mdp-accent); box-shadow: 0 0 0 3px var(--mdp-accent-soft); }
.mdp-ck-led[data-tone='info'] { background: var(--mdp-info); box-shadow: 0 0 0 3px var(--mdp-info-soft); }
.mdp-ck-led[data-tone='success'] { background: var(--mdp-success); box-shadow: 0 0 0 3px var(--mdp-success-soft); }
.mdp-ck-led[data-tone='warn'] { background: var(--mdp-warn); box-shadow: 0 0 0 3px var(--mdp-warn-soft); }
.mdp-ck-led[data-tone='danger'] { background: var(--mdp-danger); box-shadow: 0 0 0 3px var(--mdp-danger-soft); }

/* The one moving thing on the screen, and only on the connection light, because a
   panel where several things pulse is a panel nobody looks at. */
.mdp-ck-led[data-live='true'] { animation: mdp-ck-pulse 2.4s var(--mdp-ease) infinite; }

@keyframes mdp-ck-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* A progress ring. `conic-gradient` and a punched-out centre — no SVG, because
   `core/dom.js` builds HTML elements and deliberately exposes no markup escape hatch;
   a ring that needs `innerHTML` is a ring that does not ship here.

   `--mdp-ck-pct` is the ONE value a page sets inline on this component, and it is a
   percentage the server calculated (`company.completeness`, `usage.usedPercent`).
   Nothing in this file computes one. */
.mdp-ck-ring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  background: conic-gradient(var(--mdp-brand) calc(var(--mdp-ck-pct, 0) * 1%), var(--mdp-track) 0);
}

.mdp-ck-ring[data-tone='success'] { background: conic-gradient(var(--mdp-success) calc(var(--mdp-ck-pct, 0) * 1%), var(--mdp-track) 0); }
.mdp-ck-ring[data-tone='warn'] { background: conic-gradient(var(--mdp-warn) calc(var(--mdp-ck-pct, 0) * 1%), var(--mdp-track) 0); }
.mdp-ck-ring[data-tone='danger'] { background: conic-gradient(var(--mdp-danger) calc(var(--mdp-ck-pct, 0) * 1%), var(--mdp-track) 0); }

.mdp-ck-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--mdp-surface);
}

.mdp-ck-ring-val {
  position: relative;
  z-index: 1;
  font-size: 9.5px;
  font-weight: var(--mdp-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text);
  letter-spacing: -.02em;
}

/* A mini gauge. Four pixels tall — enough to read a proportion, not enough to be a
   chart. Its width is always the container's, so it cannot overflow. */
.mdp-ck-meter {
  block-size: 4px;
  border-radius: var(--mdp-r-pill);
  background: var(--mdp-track);
  overflow: hidden;
}

.mdp-ck-meter-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--mdp-brand);
  transition: inline-size var(--mdp-dur-slow) var(--mdp-ease-out);
}

.mdp-ck-meter-fill[data-tone='success'] { background: var(--mdp-success); }
.mdp-ck-meter-fill[data-tone='warn'] { background: var(--mdp-warn); }
.mdp-ck-meter-fill[data-tone='danger'] { background: var(--mdp-danger); }
.mdp-ck-meter-fill[data-tone='accent'] { background: var(--mdp-accent); }

/* A sparkline. Columns whose heights are percentages of a fixed 34px band — the same
   technique `pages/reputation.js` uses for its trend, at cockpit scale. Marked
   `aria-hidden` by its caller and always accompanied by the figure it draws, because a
   chart nobody can read is not information. */
.mdp-ck-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  block-size: 34px;
  min-inline-size: 0;
}

.mdp-ck-spark-col {
  flex: 1 1 0;
  min-inline-size: 2px;
  border-radius: 1px;
  background: var(--mdp-track);
}

.mdp-ck-spark-col[data-tone='brand'] { background: var(--mdp-brand); }
.mdp-ck-spark-col[data-tone='accent'] { background: var(--mdp-accent); }
.mdp-ck-spark-col[data-tone='success'] { background: var(--mdp-success); }
.mdp-ck-spark-col[data-tone='warn'] { background: var(--mdp-warn); }
.mdp-ck-spark-col[data-tone='danger'] { background: var(--mdp-danger); }

/* A trend chip. The arrow is a text glyph rather than an icon so it inherits the
   colour and never becomes a 20px graphic. */
.mdp-ck-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--mdp-text-muted);
  white-space: nowrap;
}

.mdp-ck-trend[data-tone='success'] { color: var(--mdp-success); }
.mdp-ck-trend[data-tone='warn'] { color: var(--mdp-warn); }
.mdp-ck-trend[data-tone='danger'] { color: var(--mdp-danger); }
.mdp-ck-trend[data-tone='brand'] { color: var(--mdp-brand); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TILES — the control-room grid

   `auto-fit` with a floor, again, so the number of columns is a consequence of the
   viewport rather than of a breakpoint list. Nothing here has a fixed height: a tile
   is as tall as its content, and a row of tiles equalises because grid does.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

.mdp-ck-grid[data-w='wide'] { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mdp-ck-grid[data-w='narrow'] { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.mdp-ck-tile {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-4);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--mdp-dur-fast) var(--mdp-ease),
    background-color var(--mdp-dur-fast) var(--mdp-ease),
    transform var(--mdp-dur-fast) var(--mdp-ease);
}

/* Tone rides the leading edge, as it does on the banner. Two pixels, not a fill: a
   cockpit where four tiles are coloured rectangles has no hierarchy left. */
.mdp-ck-tile[data-tone='brand'] { border-inline-start: 2px solid var(--mdp-brand); }
.mdp-ck-tile[data-tone='success'] { border-inline-start: 2px solid var(--mdp-success); }
.mdp-ck-tile[data-tone='warn'] { border-inline-start: 2px solid var(--mdp-warn); }
.mdp-ck-tile[data-tone='danger'] { border-inline-start: 2px solid var(--mdp-danger); }
.mdp-ck-tile[data-tone='info'] { border-inline-start: 2px solid var(--mdp-info); }

a.mdp-ck-tile:hover,
a.mdp-ck-tile:focus-visible {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-surface-2);
  transform: translateY(-1px);
}

.mdp-ck-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-ck-tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  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-faint);
  min-inline-size: 0;
}

/* THE ICON RULE, IN ONE DECLARATION. Thirteen pixels, muted, inline with a label —
   an indicator, never the content of a card. */
.mdp-ck-tile-label svg { inline-size: 13px; block-size: 13px; flex: none; }

.mdp-ck-tile-metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-ck-tile-value {
  font-size: var(--mdp-fs-2xl);
  font-weight: var(--mdp-fw-bold);
  line-height: 1;
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
}

.mdp-ck-tile-value[data-tone='brand'] { color: var(--mdp-brand); }
.mdp-ck-tile-value[data-tone='success'] { color: var(--mdp-success); }
.mdp-ck-tile-value[data-tone='warn'] { color: var(--mdp-warn); }
.mdp-ck-tile-value[data-tone='danger'] { color: var(--mdp-danger); }
.mdp-ck-tile-value[data-tone='muted'] { color: var(--mdp-text-faint); }

.mdp-ck-tile-unit {
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
}

.mdp-ck-tile-body {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  color: var(--mdp-text-muted);
  line-height: var(--mdp-lh-snug);
}

.mdp-ck-tile-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  margin-block-start: auto;
  padding-block-start: var(--mdp-sp-1);
}

/* A row of secondary figures under a headline — "12 draft · 4 completed". Separated by
   hairlines rather than by dots, so it reads as an instrument sub-scale. */
.mdp-ck-splits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-ck-split {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-inline-start: var(--mdp-sp-3);
  border-inline-start: 1px solid var(--mdp-border);
  min-inline-size: 0;
}

.mdp-ck-split:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.mdp-ck-split-value {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text);
  font-variant-numeric: tabular-nums;
}

.mdp-ck-split-label {
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE COMPACT EMPTY STATE

   THE REPLACEMENT FOR THE ILLUSTRATION. The shared `emptyState()` centres a 42px icon
   tile above a heading with 40px of padding around it — correct for a full screen with
   nothing on it, and four times too tall inside a cockpit tile. This is the same
   information as a left-aligned 14px indicator, a line of title and a line of body.

   It is also what a tile with no data renders INSTEAD of a graphic. There is no state
   in this design where missing data becomes decoration.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-empty {
  display: flex;
  align-items: flex-start;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-ck-empty-icon {
  flex: none;
  display: grid;
  place-items: center;
  margin-block-start: 1px;
  color: var(--mdp-text-faint);
}

.mdp-ck-empty-icon svg { inline-size: 14px; block-size: 14px; }

.mdp-ck-empty[data-tone='danger'] .mdp-ck-empty-icon { color: var(--mdp-danger); }
.mdp-ck-empty[data-tone='warn'] .mdp-ck-empty-icon { color: var(--mdp-warn); }
.mdp-ck-empty[data-tone='success'] .mdp-ck-empty-icon { color: var(--mdp-success); }

.mdp-ck-empty-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

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

.mdp-ck-empty-body {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  line-height: var(--mdp-lh-snug);
  max-inline-size: 52ch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE ALERT CONSOLE

   What replaced the bell artwork. A tally bar of three counters over a rule, then the
   real notification rows the API returned — title, body, priority, time — at list
   density. Nothing on it is drawn when there is nothing to draw: the console renders
   the compact empty state above and stays one panel tall.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-console {
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-md);
  background: var(--mdp-surface);
  overflow: hidden;
}

.mdp-ck-console-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  padding: var(--mdp-sp-2) var(--mdp-sp-4);
  border-block-end: 1px solid var(--mdp-border);
  background: var(--mdp-surface-2);
}

.mdp-ck-tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-medium);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-ck-tally-value {
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: 0;
  color: var(--mdp-text-strong);
  font-variant-numeric: tabular-nums;
}

.mdp-ck-tally[data-tone='danger'] .mdp-ck-tally-value { color: var(--mdp-danger); }
.mdp-ck-tally[data-tone='warn'] .mdp-ck-tally-value { color: var(--mdp-warn); }
.mdp-ck-tally[data-tone='brand'] .mdp-ck-tally-value { color: var(--mdp-brand); }

.mdp-ck-console-spacer { flex: 1 1 auto; }

.mdp-ck-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdp-ck-row-wrap { border-block-end: 1px solid var(--mdp-border-subtle); }
.mdp-ck-row-wrap:last-child { border-block-end: 0; }

.mdp-ck-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-3) var(--mdp-sp-4);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--mdp-dur-fast) var(--mdp-ease);
}

a.mdp-ck-row:hover,
a.mdp-ck-row:focus-visible { background: var(--mdp-surface-2); }

.mdp-ck-row-led { margin-block-start: 6px; }

.mdp-ck-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.mdp-ck-row-title {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdp-ck-row[data-unread='true'] .mdp-ck-row-title { color: var(--mdp-text-strong); }

.mdp-ck-row-sub {
  margin: 0;
  font-size: var(--mdp-fs-xs);
  color: var(--mdp-text-muted);
  /* Two lines maximum. A notification body is free text another system wrote and can be
     a paragraph; a console row that grows to six lines destroys the density. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.mdp-ck-row-meta {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: var(--mdp-fs-2xs);
  color: var(--mdp-text-faint);
  white-space: nowrap;
}

.mdp-ck-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-2) var(--mdp-sp-4);
  border-block-start: 1px solid var(--mdp-border);
}

.mdp-ck-console-pad { padding: var(--mdp-sp-4); }

/* ═══════════════════════════════════════════════════════════════════════════════
   QUICK ACTIONS

   Prominent but compact: a 26px indicator chip and a label, on one line, five across.
   The action a customer takes most is one click from the top of the screen, and it
   costs 52px of vertical space for all five of them.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--mdp-sp-2);
}

.mdp-ck-action {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-3);
  padding: var(--mdp-sp-2) var(--mdp-sp-3);
  border: 1px solid var(--mdp-border);
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface);
  font: inherit;
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--mdp-dur-fast) var(--mdp-ease),
    background-color var(--mdp-dur-fast) var(--mdp-ease);
}

a.mdp-ck-action:hover,
a.mdp-ck-action:focus-visible,
button.mdp-ck-action:not([disabled]):hover,
button.mdp-ck-action:not([disabled]):focus-visible {
  border-color: var(--mdp-brand-border);
  background: var(--mdp-brand-soft);
}

.mdp-ck-action[aria-disabled='true'],
.mdp-ck-action[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.mdp-ck-action-icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--mdp-r-xs);
  background: var(--mdp-surface-inset);
  color: var(--mdp-brand);
}

.mdp-ck-action-icon svg { inline-size: 14px; block-size: 14px; }

.mdp-ck-action-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
}

.mdp-ck-action-sub {
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-normal);
  color: var(--mdp-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THE INTELLIGENCE PANEL

   One wide tile for the generated report beside a column of narrow ones. The report's
   own text is shown as the engine wrote it and is the only place on this screen where
   a paragraph is allowed to run.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck-lead {
  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);
}

.mdp-ck-prose {
  margin: 0;
  font-size: var(--mdp-fs-sm);
  line-height: var(--mdp-lh-normal);
  color: var(--mdp-text-muted);
  max-inline-size: 78ch;
}

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

/* A two-column arrangement that becomes one column below a laptop. Used for the
   intelligence panel and for activity beside the console. */
.mdp-ck-split-grid {
  display: grid;
  gap: var(--mdp-sp-3);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  min-inline-size: 0;
}

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

   Three deliberate breakpoints on top of the `auto-fit` grids, which already handle
   most of it. Each one is about PRIORITY, not about fitting: at laptop width the
   two-column arrangements collapse so the primary column keeps its width; at tablet
   width the split grids stack; on a phone the padding tightens so a tile is a tile and
   not a screen.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Laptop — the sidebar is still expanded, so the content box is ~1000px. */
@media (max-width: 1180px) {
  .mdp-ck-split-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet. */
@media (max-width: 900px) {
  .mdp-ck { gap: var(--mdp-sp-4); }
  .mdp-ck-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .mdp-ck-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* Phone. */
@media (max-width: 640px) {
  .mdp-ck-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdp-ck-grid,
  .mdp-ck-grid[data-w='wide'],
  .mdp-ck-grid[data-w='narrow'] { grid-template-columns: minmax(0, 1fr); }
  .mdp-ck-cell { padding: var(--mdp-sp-3); }
  .mdp-ck-tile { padding: var(--mdp-sp-3); }
  .mdp-ck-row { padding: var(--mdp-sp-3); grid-template-columns: auto minmax(0, 1fr); }
  /* The meta column moves under the text rather than squeezing the title to nothing. */
  .mdp-ck-row-meta { grid-column: 2; justify-content: flex-start; }
  .mdp-ck-actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .mdp-ck-banner-actions { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOTION AND CONTRAST

   `base.css` already zeroes the duration tokens under `prefers-reduced-motion`, which
   covers every transition above because all of them are declared in tokens. The
   keyframe animation is not a token, so it is stopped here explicitly.

   Under `prefers-contrast: more` the token file turns every border into `currentColor`;
   the translucent surfaces that give this design its depth would then sit on top of
   full-strength rules, so they are made opaque here.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .mdp-ck-led[data-live='true'] { animation: none; }
  .mdp-ck-tile,
  .mdp-ck-cell,
  .mdp-ck-row,
  .mdp-ck-action,
  .mdp-ck-meter-fill { transition: none; }
  a.mdp-ck-tile:hover,
  a.mdp-ck-tile:focus-visible { transform: none; }
}

@media (prefers-contrast: more) {
  .mdp-ck-strip { gap: 1px; background: currentColor; }
  .mdp-ck-req,
  .mdp-ck-action-icon { background: transparent; }
  .mdp-ck-led { box-shadow: none; outline: 1px solid currentColor; }
}