/* =============================================================================
   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 THE LEGACY WORKSPACE COMPONENTS
   -------------------------------------------------------------------------
   It looked like the obvious answer and it was a trap. That stylesheet
   (deleted 2026-09-29) was WORKSPACE only: it read 61 `--ws-*` custom
   properties that public_base.html never loads. Linking it here rendered a
   code block with no background, no border and no monospace face, and did
   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);
  /* 2026-09-28 · a Windows path such as
     %USERPROFILE%\.codeium\windsurf\mcp_config.json has no break opportunity,
     so at 320px it ran 50px past the viewport (width audit, 2026-09-17).
     `anywhere` rather than `break-word` because it also lets the min-content
     width shrink, which is what stops the column itself being pushed wide. */
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   2a · THE TWO ROUTES (2026-09-28)
   -----------------------------------------------------------------------------
   "Sign in" and "Use an API key" side by side, near the top, because the
   reader's first decision is which half of the page is theirs. Two cards on
   the surface fill the limits list and the accordion already use, so the
   page gains no new visual vocabulary. One column under 640px: at 390 two
   cards would be about 150px of text each.
   -------------------------------------------------------------------------- */
.dm-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
}

.dm-route {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5);
  background: var(--sf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
}

.rd-shell--docs-mcp .rd-prose .dm-route__title {
  margin: 0 0 var(--space-3);
  font-size: var(--type-u3);
  line-height: var(--lh-snug);
}

/* The 14px face, as in `.dm-tsh__a p`: a card is a summary, not body prose. */
.rd-shell--docs-mcp .dm-route p {
  margin: 0 0 var(--space-3);
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}

.rd-shell--docs-mcp .dm-route .dm-route__go {
  margin: auto 0 0;
  padding-top: var(--space-2);
  font-weight: 600;
}

@media (max-width: 640px) {
  .dm-routes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -----------------------------------------------------------------------------
   2b · NUMBERED STEPS (2026-09-28)
   -----------------------------------------------------------------------------
   Signing in is an order of screens, so its steps are an <ol>. site-reading.css
   styles no <ol>, and its `.rd-prose li` rule (0,1,1) gives every item the
   arrow marker, so the number is drawn here in the arrow's slot, at (0,2,2) on
   the marker so it outranks `.rd-prose li::before` (0,1,2).
   -------------------------------------------------------------------------- */
.rd-shell--docs-mcp .dm-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  counter-reset: dm-step;
}

.rd-shell--docs-mcp .dm-steps > li {
  counter-increment: dm-step;
}

.rd-shell--docs-mcp .dm-steps > li::before {
  content: counter(dm-step) '.';
  font-family: var(--font-mono);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   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;
  /* 2026-09-28 · the width audit's survey read 91 characters a line here: the
     14px face inherited the 68ch measure of the 16px column. Declared on the
     element that carries the 14px face, for the reason section 3 gives about
     `.dm-tsh__a p`, and at the same 56ch. */
  max-width: 56ch;
  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);
}