/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — ENTERPRISE PRESENTATION LAYER

   The ELEVENTH stylesheet, and the same additive move every note in `index.html` asks a new
   module to make rather than editing a shared blob. It loads last.

   It carries two things, and they are related: the safety net that stops a glyph from ever
   rendering as an illustration again, and the compact operational panels that replace the
   illustration-shaped states the customer portal used to show when it had nothing to list.

   ───────────────────────────────────────────────────────────────────────────────
   SECTION 1 — GLOBAL ICON SAFETY
   ───────────────────────────────────────────────────────────────────────────────

   THE DEFECT. `icon()` in `core/dom.js` builds an `<svg viewBox="0 0 24 24">`. An SVG with a
   viewBox and no intrinsic width or height has an aspect ratio but NO SIZE, so a browser
   falls back to the default object size and paints it at roughly 300×150 — or, inside a
   block element such as a card's `<h3>`, at the full width of the column. Most of the
   component library wraps the glyph in a sized span and is unaffected. Three shared slots
   did not, and they are used on nearly every authenticated route:

     • `.mdp-callout > svg`     — 128 callouts across 35 modules: every privacy banner, every
                                  verification notice, every blocker list, every checkout
                                  outcome. The oversized information and shield symbols.
     • `.mdp-card-title > svg`  — every `card({ iconName })` in the application. A block
                                  heading, so the glyph took the full column width. The
                                  oversized envelope on Notifications → Digests.
     • `.mdp-list-lead > svg`   — every `listItem({ lead: icon(…) })`. The oversized bells on
                                  notification rows and the oversized handshake, inbox and
                                  target marks in the global search results.

   THE ROOT CAUSE IS FIXED IN `core/dom.js`, not here: `icon()` now writes `width` and
   `height` presentation attributes, which sit below every author rule in the cascade and so
   cannot override a component that sizes its own glyphs. This file is the second line of
   defence and the design layer on top of it — it gives those three slots a size that was
   chosen rather than merely bounded, and it caps everything.

   THE BANDS, which are the acceptance criterion for the whole portal:

     normal UI icon      14–18px
     panel/status icon   16–20px
     empty-state icon    32px maximum
     branded mark        larger ONLY with an explicit `data-mdp-mark` opt-out

   ───────────────────────────────────────────────────────────────────────────────
   SECTION 2 — ENTERPRISE OPERATIONAL PANELS
   ───────────────────────────────────────────────────────────────────────────────

   `.mdp-ent-*`, owned by `app/components/enterprise-states.js`. A restriction panel and an
   operational panel: dense, bordered, information first. They exist because "delete the
   artwork" would have deleted the requirement list and the counters with it — the state has
   to keep telling the customer what is blocked and what would appear, in less space.

   EVERY COLOUR IS A TOKEN, so light mode, dark mode and `prefers-contrast: more` are
   inherited. EVERY DIRECTIONAL PROPERTY IS LOGICAL — `inline-size`, `padding-inline`,
   `margin-block-start`, `border-inline-start` — so Arabic mirrors with no `[dir='rtl']`
   rule, which is why there are none. Nothing here changes markup, copy, ARIA or behaviour
   for any screen that shipped before it: sizes and panel geometry only.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1.1 — THE BACKSTOP

   The invariant, stated in CSS as well as in JavaScript. `icon()` now emits both attributes,
   so this selector matches NOTHING the icon factory produces — it exists for an SVG that
   arrives some other way: hand-written markup, a future component, a third-party mark. Such
   an SVG has no intrinsic size, and 16px is the application's normal UI icon measure.

   Its specificity is deliberately high (two attribute tests), which is safe precisely because
   it can only ever match an unsized glyph. A correctly sized glyph carries the attributes and
   is never selected, so no existing rule is at risk of being overridden.

   IT HANGS OFF `body`, NOT `.mdp-root`. Dialogs, drawers, toasts and the global command
   palette are appended to `document.body` rather than into the application root — that is
   what makes a modal escape a transformed ancestor — so a rule anchored to the root would
   miss exactly the modal and dialog states this audit was asked to cover. `body` reaches
   both, and this stylesheet is linked only from `mdp/index.html`, so it can reach no other
   application on the origin.
   ═══════════════════════════════════════════════════════════════════════════════ */

body svg:not([width]):not([height]) {
  inline-size: 16px;
  block-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   1.2 — THE UPPER BOUND

   The acceptance rule for the portal, expressed once: no glyph anywhere in the authenticated
   customer application may exceed the empty-state maximum. It CAPS and never SETS, so every
   correctly wrapped icon keeps the size its own component chose — 13px strip labels, 14px
   console indicators, 16px buttons, 18px navigation — and only a glyph that escaped its
   wrapper is affected.

   `data-mdp-mark` is the documented opt-out for a branded or product mark that is genuinely
   designed to be larger. There is no such mark in the portal today; the brand block in the
   top navigation is text. The attribute exists so a future one has a supported way in rather
   than a reason to delete this rule. Anchored to `body` for the reason given in 1.1.
   ═══════════════════════════════════════════════════════════════════════════════ */

body svg:not([data-mdp-mark]) {
  max-inline-size: 32px;
  max-block-size: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   1.3 — THE THREE UNWRAPPED SLOTS

   Sized rather than merely capped, because an indicator whose size is an accident of a
   backstop still reads as an accident. 16px is the panel/status measure.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The callout's leading glyph. `flex: none` so the row can never stretch it, and a 1px nudge
   so it aligns with the cap height of the title beside it rather than with the top of the
   text box. The route-scoped Credits hotfix is more specific and keeps its own 14px. */
.mdp-callout > svg {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 1px;
  stroke-width: 1.7;
}

/* The card heading's glyph. The heading is a block element, so an unsized SVG inside it took
   the full column width — the single largest graphic in the application, once per card. The
   heading becomes a flex row so the glyph sits beside the title instead of above it. */
.mdp-card-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-card-title > svg {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  stroke-width: 1.7;
  color: var(--mdp-text-faint);
}

/* A list row's leading mark, when that mark is a bare glyph rather than an avatar or a
   badge. Both of those bring their own box and are untouched by an `svg` selector. */
.mdp-list-lead > svg {
  inline-size: 16px;
  block-size: 16px;
  stroke-width: 1.7;
  color: var(--mdp-text-muted);
}

/* The global command palette's own search glyph and clear control. The palette head is a
   flex row and the glyph was its unsized first child. */
.mdp-gsearch-head > svg {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  color: var(--mdp-text-faint);
}

/* The same palette's footer, which is a footnote row until a search fails — then it paints a
   warning glyph, a message and a retry control into a row sized for 11px type. The glyph is
   smaller than the standard 16px for that reason: it sits on a caption baseline, not a body
   one, and matching the row is what keeps the failure state calm rather than alarming. */
.mdp-gsearch-foot > svg {
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  color: var(--mdp-warn);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2.1 — THE OPERATIONAL PANEL

   A bordered instrument panel: a compact head with a 16px indicator and an eyebrow label, a
   short statement, an optional counter register, and the actions. It replaces an empty state
   that was mostly artwork with one that is mostly information.
   ═══════════════════════════════════════════════════════════════════════════════ */

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

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

/* The head: indicator, eyebrow, status chip. One line at every breakpoint above mobile. */
.mdp-ent-head {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  flex-wrap: wrap;
  min-inline-size: 0;
}

.mdp-ent-head > svg {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
  stroke-width: 1.7;
  color: var(--mdp-text-faint);
}

/* The eyebrow. Uppercase and tracked, which is the register an operations console uses for
   a panel name — it is a label, not a heading, and the heading level below it is real. */
.mdp-ent-eyebrow {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

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

.mdp-ent-body {
  margin-block-start: 2px;
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-muted);
  max-inline-size: 68ch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2.2 — THE COUNTER REGISTER

   Three or four figures on one rule. `auto-fit` with a floor rather than a fixed column
   count, so the register is one row on a desktop, two on a tablet and a stack on a phone
   with no media query and no horizontal overflow at any width.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ent-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mdp-sp-2) var(--mdp-sp-4);
  padding-block-start: var(--mdp-sp-1);
  border-block-start: 1px solid var(--mdp-border);
}

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

.mdp-ent-meter-label {
  font-size: var(--mdp-fs-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mdp-text-faint);
}

.mdp-ent-meter-value {
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-sm);
  font-weight: var(--mdp-fw-semibold);
  color: var(--mdp-text-strong);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2.3 — THE REQUIREMENT CHECKLIST

   What is done and what is outstanding, as a list rather than as a sentence. The marker is a
   14px glyph in a fixed track, so a wrapped requirement stays aligned under its own text and
   not under its marker.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ent-reqs {
  display: flex;
  flex-direction: column;
  gap: var(--mdp-sp-1);
  padding-block-start: var(--mdp-sp-1);
  border-block-start: 1px solid var(--mdp-border);
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

.mdp-ent-req {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: var(--mdp-sp-2);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
  color: var(--mdp-text-muted);
}

.mdp-ent-req > svg {
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 1px;
  stroke-width: 2;
  color: var(--mdp-text-faint);
}

/* A requirement already satisfied reads as settled rather than as outstanding. */
.mdp-ent-req[data-met='true'] { color: var(--mdp-text-strong); }
.mdp-ent-req[data-met='true'] > svg { color: var(--mdp-success); }

.mdp-ent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdp-sp-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2.4 — DENSITY AT THE SMALL END

   A phone gets the same information and less padding. Nothing is hidden: an operations
   panel that drops a counter on a narrow screen is a panel the customer cannot trust.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .mdp-ent { padding: var(--mdp-sp-3); gap: var(--mdp-sp-2); }
  .mdp-ent-meters { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  .mdp-ent-actions > * { flex: 1 1 auto; }
}