/* ═══════════════════════════════════════════════════════════════════════════════
   MATCH DEAL PRO — DEVELOPER PORTAL

   Phase 8, Slice 3. The sixth stylesheet, which is what `index.html` said a future
   module should add rather than editing a shared blob:

     "Five stylesheets, in cascade order, each with one job. They are separate files
      rather than one so a future module adds a sixth instead of editing a shared blob."

   ─────────────────────────────────────────────────────────────────────────────
   IT OVERRIDES NOTHING. THAT IS THE RULE THIS FILE IS BUILT AROUND.

   It loads LAST, after `rtl.css`, so anything it declared for an existing selector
   would win — which is exactly how a new module silently changes a completed one.
   So every selector below is prefixed `.mdp-dev-`, a namespace no other stylesheet
   in this application uses, and there is not one declaration here for a class,
   element or attribute that any earlier file styles. `components.css` and
   `layout.css` are untouched and every screen that shipped before this slice
   renders identically with this file loaded or absent.

   WHY THERE IS ANYTHING HERE AT ALL

   The Portal is API documentation, and API documentation is code samples: a curl
   invocation, a JSON response, a signature verifier. The component library has a
   `.mdp-mono` utility for a monospaced RUN of text and no block treatment for a
   pre-formatted BLOCK — a `<pre>` with no styling of its own inherits the page's
   width and pushes a two-hundred-column sample straight through the layout. Four
   classes fix that, and they are the whole of this file.

   Everything else on the screen — cards, tables, badges, fields, callouts, the tab
   strip — is the existing component library, unchanged and unextended.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── A code block ──────────────────────────────────────────────────────────────
   Scrolls HORIZONTALLY rather than wrapping. A wrapped shell command is a command
   that cannot be copied and pasted correctly, and a wrapped JSON body loses the
   indentation that made it readable. `tab-size` because the samples are indented
   with spaces and a copy into an editor should not reflow.
   ──────────────────────────────────────────────────────────────────────────── */
.mdp-dev-code {
  margin: 0;
  padding: var(--mdp-sp-4);
  background: var(--mdp-surface-inset);
  border: 1px solid var(--mdp-border-subtle);
  border-radius: var(--mdp-r-sm);
  color: var(--mdp-text);
  font-family: var(--mdp-font-mono);
  font-size: var(--mdp-fs-xs);
  line-height: var(--mdp-lh-normal);
  tab-size: 2;
  overflow-x: auto;
  /* A sample is data, not prose: it stays left-to-right and in logical order even
     when the surrounding page is Arabic. `rtl.css` does the same for `.mdp-mono`
     and for the inputs whose contents are codes rather than words. */
  direction: ltr;
  text-align: left;
  white-space: pre;
  /* Bounded so one long response cannot make the page itself scroll. */
  max-height: 32rem;
  overflow-y: auto;
}

/* A sample's own caption — the title the server gave it, above the block. */
.mdp-dev-code-label {
  display: flex;
  align-items: center;
  gap: var(--mdp-sp-2);
  margin: 0 0 var(--mdp-sp-2);
  color: var(--mdp-text-muted);
  font-size: var(--mdp-fs-xs);
  font-weight: var(--mdp-fw-semibold);
}

/* One caption-and-block pair, stacked, with the gap the rest of the system uses. */
.mdp-dev-sample { margin: 0 0 var(--mdp-sp-4); }
.mdp-dev-sample:last-child { margin-bottom: 0; }

/* ── A documentation block's heading ──────────────────────────────────────────
   The Portal renders whatever keys the server publishes for a section, each under
   its own small heading. Deliberately quieter than `.mdp-card-title`: the card
   already carries the section's name, and these are the parts inside it.
   ──────────────────────────────────────────────────────────────────────────── */
.mdp-dev-block { margin: 0 0 var(--mdp-sp-5); }
.mdp-dev-block:last-child { margin-bottom: 0; }

.mdp-dev-block-title {
  margin: 0 0 var(--mdp-sp-3);
  color: var(--mdp-text-faint);
  font-size: var(--mdp-fs-2xs);
  font-weight: var(--mdp-fw-bold);
  letter-spacing: var(--mdp-tracking-caps);
  text-transform: uppercase;
}

/* A sentence of documentation. Measured, because a 140-character line of prose at
   full container width is measurably harder to read than one at 70. */
.mdp-dev-prose {
  margin: 0 0 var(--mdp-sp-2);
  max-width: 72ch;
  color: var(--mdp-text);
  line-height: var(--mdp-lh-normal);
}
.mdp-dev-prose:last-child { margin-bottom: 0; }