/* =============================================================================
   docs-mcp.css  ·  /docs/mcp only
   =============================================================================
   WHY THIS FILE EXISTS
   -------------------------------------------------------------------------
   The reading archetype (site-reading.css) has notes, callouts, cards and
   tables. It has NO code block, because no page on the public chain has ever
   shown a command before. /docs/mcp is nothing but commands, so the pattern is
   built here, page-scoped, rather than added to the shared reading stylesheet
   where four other pages would inherit a component none of them uses.

   WHY NOT premium-components.css
   -------------------------------------------------------------------------
   It looks like the obvious answer and it is a trap. That file is WORKSPACE
   only: it reads 61 `--ws-*` custom properties that public_base.html never
   loads. Linking it here renders a code block with no background, no border
   and no monospace face, and it does so SILENTLY, because an undefined custom
   property is not an error. Everything below reads site-tokens.css and
   nothing else.

   THE MEASURE
   -------------------------------------------------------------------------
   `.rd-prose` is 68ch of the 16px UI face == 633.2px on this shell, and every
   block here lives inside it, so a code line has about 599px of text box. At
   the 13px mono face that is 76 characters, i.e. under the WCAG SC 1.4.8
   ceiling before any wrapping happens. Lines longer than that SOFT WRAP
   (`white-space: pre-wrap`) rather than scroll sideways, deliberately:

     · a horizontal scrollbar inside a reading column is a control most of the
       audience for this page will not find, and the part of the command they
       need is always the far end of it (the key);
     · a soft wrap inserts no character, so the copy button and a manual
       select-and-copy both still yield the exact original line;
     · SC 1.4.10 (reflow) wants no two-dimensional scrolling at 320px anyway.

   `overflow-x: auto` stays on the <pre> as a safety net for an unbreakable
   token, and the <pre> keeps `tabindex="0"` so that net is keyboard-operable
   if it ever engages (SC 2.1.1, the same defect the privacy tables had).

   THE COPY BUTTON IS INJECTED BY JS AND IS NOT IN THE MARKUP
   -------------------------------------------------------------------------
   docs-mcp.js appends it. With JavaScript off there is no dead control to
   click, and the block is still readable and selectable, which is the whole
   of what "copyable" means without script.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1 · CODE BLOCK
   -------------------------------------------------------------------------- */
.dm-code {
  margin: 0 0 var(--space-5);
  background: var(--sf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  /* Clips the bar's top corners to the radius. Safe because the <pre> scrolls
     itself rather than this box. */
  overflow: hidden;
}

.dm-code__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  background: var(--sf-2);
  border-bottom: 1px solid var(--line-1);
}

/* The label says WHERE the snippet goes: "Terminal", "PowerShell", or the file
   path. Never uppercased, because half of these labels are real paths and
   `~/.CURSOR/MCP.JSON` is a lie about a case-sensitive filesystem. */
.dm-code__label {
  font-family: var(--font-mono);
  font-size: var(--type-m2);
  letter-spacing: var(--track-data);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.dm-code__copy {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: var(--type-m2);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}

.dm-code__copy:hover {
  background: var(--sf-3);
  border-color: var(--accent-line-hi);
}

.dm-code__copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dm-code pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--type-u6);
  line-height: 1.7;
  color: var(--ink-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.dm-code pre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.dm-code code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* The one thing the reader has to change. Amber is the interrupt hue in the
   semantic contract and this is the page's only use of it, so it does not
   compete with anything. The dotted underline is the non-colour channel:
   SC 1.4.1 applies to "colour as the only visual means of conveying
   information", and "this token is a placeholder" is information. */
.dm-key {
  color: var(--sem-caution);
  border-bottom: 1px dotted var(--sem-caution);
}

/* Inline code inside a sentence. site-reading.css styles no <code> at all.
   `:not(pre) >` IS LOAD-BEARING, DO NOT DROP IT. A bare descendant selector
   here is (0,2,1) and beats `.dm-code code` at (0,1,1), so it also painted the
   <code> INSIDE every <pre>: each soft-wrapped visual line picked up the chip's
   fill, padding and border, and a nine-line JSON block rendered as nine ragged
   boxes. Caught in the 1440 screenshot pass, not by any test. The child
   combinator scopes this rule to code that is genuinely inline in a sentence,
   which is all it was ever for. */
.rd-shell--docs-mcp .rd-prose :not(pre) > code,
.rd-shell--docs-mcp .rd-section :not(pre) > code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  /* .92em, not a token: this rides the 19px reading face in a <p> and the 14px
     face in a callout, and a fixed size would be wrong in one of them. */
  font-size: .92em;
  color: var(--ink-1);
  background: var(--sf-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}

/* A keystroke. Used only where the page tells a reader which keys to press, so
   it has to look like a key cap and not like code: same face, but a raised
   surface and a heavier border. Nothing in the shared chain styles <kbd>. */
.rd-shell--docs-mcp kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: .85em;
  text-align: center;
  color: var(--ink-1);
  background: var(--sf-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   2 · CLIENT HEADINGS
   -----------------------------------------------------------------------------
   Section 4 is two groups (terminal, editor) of five clients. The GROUP is the
   <h3> site-reading.css already styles; each CLIENT is an <h4>, which nothing
   styles, so it is styled here. Five sibling <h3>s with no group heading
   between them would have lost the grouping the section is built on, and a
   styled <p> standing in for a heading is not a heading to anything that reads
   the document outline.
   -------------------------------------------------------------------------- */
.rd-shell--docs-mcp .rd-prose h4 {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--type-u2);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-1);
  scroll-margin-top: 120px;
}

/* A short "what this is" line under a client name, or the file path a block
   belongs to. SCOPED, because it is a <p> and `.rd-prose p` is (0,1,1): a bare
   `.dm-meta` at (0,1,0) lost its font-size to the 19px reading face and
   rendered as a second headline under every client name. Screenshot pass. */
.rd-shell--docs-mcp .dm-meta {
  margin: calc(var(--space-3) * -1) 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-m2);
  letter-spacing: var(--track-data);
  color: var(--ink-4);
}

/* -----------------------------------------------------------------------------
   3 · TROUBLESHOOTING ACCORDION
   -----------------------------------------------------------------------------
   Native <details>/<summary>, the same choice faq.html and the landing's FAQ
   band made: open and close, keyboard operation, and find-in-page reveal all
   come from the user agent rather than from a click handler this page would
   otherwise have to ship and test. With JavaScript off it still opens.
   -------------------------------------------------------------------------- */
.dm-tsh {
  margin: 0 0 var(--space-3);
  background: var(--sf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out);
}

.dm-tsh[open] {
  border-color: var(--line-2);
}

.dm-tsh__q {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--type-u5);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-1);
  cursor: pointer;
  list-style: none;
}

/* Suppress the UA marker in both spellings, then draw our own, so the caret
   sits on the first line of a two-line summary rather than centred on it. */
.dm-tsh__q::-webkit-details-marker { display: none; }
.dm-tsh__q::marker { content: ''; }

.dm-tsh__q::before {
  content: '+';
  flex: 0 0 auto;
  width: 18px;
  font-family: var(--font-mono);
  font-size: var(--type-u5);
  color: var(--accent);
}

.dm-tsh[open] .dm-tsh__q::before {
  content: '\2212';   /* minus sign, not a hyphen */
}

.dm-tsh__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.dm-tsh__a {
  padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 18px + var(--space-3));
}

/* 56ch on the element that carries the 14px face, for the reason
   site-reading.css section 5 gives about .rd-callout: a measure declared on a
   parent at a different font-size is not a character count of anything. */
.dm-tsh__a p {
  margin: 0 0 var(--space-3);
  max-width: 56ch;
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}

.dm-tsh__a p:last-child {
  margin-bottom: 0;
}

.dm-tsh__a .dm-code {
  max-width: 56ch;
  margin-top: var(--space-4);
}

/* -----------------------------------------------------------------------------
   4 · THE LIMITS LIST
   -----------------------------------------------------------------------------
   A definition list, not a table: two columns of four rows is a table only in
   the sense that everything is, and `.rd-table`'s scroll box would be furniture
   around nothing. Collapses to one column under 560px.
   -------------------------------------------------------------------------- */
.dm-limits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  background: var(--sf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
}

.dm-limits dt {
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

.dm-limits dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-u5);
  letter-spacing: var(--track-data);
  line-height: var(--lh-snug);
  color: var(--ink-1);
}

@media (max-width: 560px) {
  .dm-limits {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) 0;
  }

  .dm-limits dd {
    margin-bottom: var(--space-3);
  }

  .dm-limits dd:last-child {
    margin-bottom: 0;
  }
}

/* -----------------------------------------------------------------------------
   5 · CHANGELOG
   -------------------------------------------------------------------------- */
.dm-log {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-log li {
  padding-left: 0;
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

/* site-reading.css draws an arrow marker on every `.rd-prose li`. The changelog
   is dated entries, not steps, so it takes none. */
.dm-log li::before {
  content: none;
}

.dm-log time {
  font-family: var(--font-mono);
  font-size: var(--type-m2);
  letter-spacing: var(--track-data);
  color: var(--ink-4);
}