/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — CREDIT OPERATIONS CONSOLE, VISUAL HOTFIX

   The TENTH 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.

   ── AMENDMENT (customer portal visual audit) ──────────────────────────────────
   The premise recorded below — that `icon()` emits no width and no height — was true when
   this file was written and is no longer true. `icon()` now writes both as presentation
   attributes, and the ELEVENTH stylesheet, `enterprise.css`, carries the app-wide
   `.mdp-callout > svg` and `.mdp-card-title > svg` rules this file could only supply for one
   route. Nothing here was changed: presentation attributes sit below every author rule in the
   cascade and this file's selectors are more specific than the shared ones, so Credits still
   renders exactly as it did. The account below is kept as written because it is the record of
   why this stylesheet exists.
   ──────────────────────────────────────────────────────────────────────────────

   THE DEFECT THIS FILE EXISTS TO FIX

   `icon()` in `core/dom.js` builds an `<svg viewBox="0 0 24 24">` with NO width and NO
   height attribute. That is correct and deliberate — the size belongs to the place the
   glyph is used, not to the glyph — and almost every component in the library therefore
   wraps it in a span that carries the size: `.mdp-state-icon svg`, `.mdp-btn svg`,
   `.mdp-quickaction-icon svg`, `.mdp-nav-icon svg`, `.mdp-ck-empty-icon svg`, and so on.

   TWO components put the glyph straight into their own markup with no wrapper and no rule:

     • `callout()`   — `.mdp-callout` holds the glyph as a direct flex child
     • `card()`      — `.mdp-card-title` holds the glyph as a direct child of the heading

   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 150×150 —
   or, in a block context, at the full width of its container. That is the oversized
   information symbol reported on Credits, and it is a rendering defect rather than a
   design decision: nothing in the library ever asked for a 150px glyph.

   WHY IT SHOWS UP ON CREDITS AND ALMOST NOWHERE ELSE

   The four command-centre consoles are built from the `.mdp-ck-*` register, whose icons are
   all inside sized wrappers. Credits is the one console that also renders shared card-density
   components on the route: `meteringNote()` draws a `callout()` under the wallet strip on
   EVERY tab — it is the platform's standing statement about charging, so it is always there —
   and the Buy Credits tab draws one `card({ iconName })` per credit pack plus three more
   callouts. So the same latent defect is unavoidable here and rare everywhere else.

   WHY THE FIX IS SCOPED TO CREDITS

   `components.css`, `components/states.js`, `components/card.js` and `components/primitives.js`
   are completed modules; Rule 2 forbids editing them. `console.css` is completed too, and its
   own header records the same reasoning for the same class of problem. So this is a new
   stylesheet, and every selector in it is scoped to `.mdp-ck[data-console='credits']` — the
   marker `pages/credits-console.js` sets on its own page root. No other screen, including the
   other three consoles, can be reached by anything in this file. Reverting the whole hotfix is
   deleting one `<link>` from `index.html`.

   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` — so Arabic mirrors with no `[dir='rtl']` rule, which is why there
   are none. Nothing here changes markup, copy, ARIA, roles or behaviour: only geometry.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1 — THE UNSIZED GLYPHS

   An icon on an operations console is an indicator, not an illustration. 14px is the
   console register's own glyph size — `.mdp-ck-empty-icon svg` and `.mdp-ck-action-icon svg`
   in `cockpit.css` are both 14px, and this brings the two shared components that reach this
   route to the same measure.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The callout's own glyph. `flex: none` so it can never be stretched by the row it sits in,
   and a 2px nudge so it aligns with the cap height of the title beside it rather than with
   the top of the text box. */
.mdp-ck[data-console='credits'] .mdp-callout > svg {
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 2px;
  stroke-width: 1.7;
}

/* The card heading's glyph. The heading is a block element, so an unsized SVG inside it takes
   the full column width — the single largest graphic on the route, once per credit pack. The
   heading becomes a flex row so the glyph sits beside the pack name instead of above it. */
.mdp-ck[data-console='credits'] .mdp-card-title {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  min-inline-size: 0;
}

.mdp-ck[data-console='credits'] .mdp-card-title > svg {
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  stroke-width: 1.7;
}

/* THE BACKSTOP, and the reason it is a `max-*` and not a `size`.

   The two rules above name the two components that are wrong today. This one holds the
   acceptance criterion for the whole route no matter what a later phase mounts here: no glyph
   anywhere inside the Credit Operations Console may exceed 20px, which is the upper bound the
   hotfix was given. It caps and never sets, so every correctly-wrapped icon on the route —
   13px strip labels, 14px console indicators, 16px buttons — keeps the size its own component
   chose, and only an unsized glyph is affected. An SVG with an aspect ratio and no intrinsic
   size resolves against the cap, so this alone renders a bare glyph at 20px rather than 150px. */
.mdp-ck[data-console='credits'] svg {
  max-inline-size: 20px;
  max-block-size: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2 — THE ALERT AND STATUS PANELS AT CONSOLE DENSITY

   The metering statement, the low-balance warning, the payment-safety note, the sandbox
   notice and every checkout outcome are `callout()`s. NOT ONE OF THEM IS REMOVED OR HIDDEN
   BY THIS FILE — the hotfix asks for the message to be kept and the graphic to go, so the
   panel keeps its tone, its border rail, its title, its sentence, its list, its actions and
   its `role`, and loses only the card-density padding that made it twice the height of a
   console panel.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck[data-console='credits'] .mdp-callout {
  gap: var(--mdp-sp-2);
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
}

.mdp-ck[data-console='credits'] .mdp-callout-title {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
}

.mdp-ck[data-console='credits'] .mdp-callout-body {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
  /* A measure, so a long sentence on a 1920px screen is a readable paragraph rather than one
     very long line. The same figure `console.css` uses for compact state bodies. */
  max-inline-size: 78ch;
}

/* The two notices under the wallet strip sit in one plain box with no gap of its own, so a
   warning and the metering statement would touch. A margin between them, so they read as two
   panels rather than one block of prose.

   `:not(.mdp-stack)` because a stack ALREADY spaces its children with `gap`, and adding a
   margin there would space those two apart twice — the safety and sandbox notices on the Buy
   Credits tab are stacked siblings and must keep the stack's own rhythm. */
.mdp-ck[data-console='credits'] :not(.mdp-stack) > .mdp-callout + .mdp-callout {
  margin-block-start: var(--mdp-sp-2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3 — THE CREDIT PACKS

   The Buy Credits tab is `features/credit-checkout.js` mounted as-is — a completed module
   that must keep working exactly as it does, so nothing here touches its markup, its pack
   list, its PayPal handover or its outcome reporting. The packs are shared `card()`s at card
   density; these rules bring the box to the register of the panels above it: a hairline, no
   drop shadow, console padding.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck[data-console='credits'] .mdp-card {
  box-shadow: none;
  border-radius: var(--mdp-r-sm);
  background: var(--mdp-surface-2);
}

.mdp-ck[data-console='credits'] .mdp-card-head {
  padding: var(--mdp-sp-3);
  gap: var(--mdp-sp-2);
}

.mdp-ck[data-console='credits'] .mdp-card-body {
  padding: var(--mdp-sp-3);
}

.mdp-ck[data-console='credits'] .mdp-card-foot {
  padding: var(--mdp-sp-3);
}

/* The pack grid, at the console's gap rather than the card grid's. */
.mdp-ck[data-console='credits'] .mdp-grid {
  gap: var(--mdp-sp-3);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4 — THE PREPARED ACTIONS

   Buy Credits and Change your plan are `quickAction()` tiles: a 30px icon chip at card
   density. Not a defect and never oversized, but two registers on one screen is what the
   hotfix is about, so the chip comes to the console's 22px / 14px measure — the same
   geometry `console.css` gives the compact empty state.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck[data-console='credits'] .mdp-quickaction {
  padding: var(--mdp-sp-3);
  border-radius: var(--mdp-r-sm);
}

.mdp-ck[data-console='credits'] .mdp-quickaction-icon {
  inline-size: 22px;
  block-size: 22px;
  border-radius: var(--mdp-r-xs);
  background: transparent;
}

.mdp-ck[data-console='credits'] .mdp-quickaction-icon svg {
  inline-size: 14px;
  block-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5 — EMPTY AND ERROR STATES

   `console.css` already brought every NON-ERROR `.mdp-state` to an indicator and three lines,
   and that correction is global — the empty purchase list, the empty ledger and the
   "no credit packs on sale" notice are already compact on this route and are left alone.

   Error states were deliberately exempted there, and that exemption is right: an error is an
   interruption, it carries a recovery action and a support code, and shrinking it to three
   muted lines makes the one state that must be noticed the one least likely to be. What it
   does not need INSIDE A CONSOLE PANEL is 40px of vertical padding above and below it, which
   on a failed bundle read is most of the viewport. So the padding comes down and the block
   aligns to the start of the panel it is in. The 42px danger tile, the 20px glyph, the tone,
   the title, the sentence, the recovery control and the error code are all untouched.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck[data-console='credits'] .mdp-state[data-kind='error'] {
  align-items: flex-start;
  text-align: start;
  padding: var(--mdp-sp-5) var(--mdp-sp-4);
}

.mdp-ck[data-console='credits'] .mdp-state[data-kind='error'] .mdp-state-actions {
  justify-content: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6 — THE COST PREVIEWS

   `costPreview()` renders one "AI Deal Analysis — 3 Credits" line per metered feature beside
   the price table. The line carries no size of its own, so it inherits body copy and reads a
   step larger than every figure in the table it sits next to.
   ═══════════════════════════════════════════════════════════════════════════════ */

.mdp-ck[data-console='credits'] .mdp-cost-line {
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-snug);
}