/* =============================================================================
   docs-mcp-connect.css  ·  /docs/mcp only                         (2026-10-07)
   =============================================================================
   The setup page: a tool picker that is also the connection diagram, then
   three steps for the chosen tool with a drawn screen beside each one.

   WHAT THIS FILE OWNS, AND WHAT IT BORROWS
   -------------------------------------------------------------------------
   Owns everything prefixed `.mc-` (the page) and `.sc` (the drawn screens,
   markup in templates/components/docs_mcp_scenes.html). Borrows the code
   block, the placeholder colour and the accordion from docs-mcp.css, which
   /docs/mcp/reference also loads, and the page head from site-reading.css.
   Reads site-tokens.css and nothing else. Do NOT reach for workspace `--ws-*`
   tokens: public_base.html never loads them and an undefined custom property
   fails silently.

   THIS PAGE IS NOT THE READING ARCHETYPE ANY MORE
   -------------------------------------------------------------------------
   The reference page is. This one keeps `.rd-shell` (the 1160px island and
   its gutters) and `.rd-head`, and drops `.rd-prose`: there is no prose
   column because there is no prose. Every paragraph here is capped in `ch`
   ON THE PARAGRAPH, at the face it is set in (standing trap 23).

   MOTION, AND WHY IT IS ALL INSIDE ONE MEDIA QUERY
   -------------------------------------------------------------------------
   Every animation lives under `prefers-reduced-motion: no-preference` AND
   under `.mc-js`, the class docs-mcp-connect.js puts on the shell. So with
   motion reduced, or with JavaScript off, each screen simply IS its finished
   frame and nothing has to be undone. Nothing loops: every animation runs
   once, when its screen scrolls into view or when a tool is picked (WCAG
   2.2.2 only binds motion that keeps going).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1 · SHELL AND SHARED TYPE
   -------------------------------------------------------------------------- */
.mc {
  --mc-gap: clamp(48px, 7vw, 96px);
}

/* Tighter than the reading pages' head: the picker below is the first thing
   to do, and it should be on the first screen with the title. */
.mc-head.rd-head {
  padding-block: clamp(12px, 2vw, 28px) clamp(20px, 2.6vw, 32px);
}

.mc-head .rd-lede {
  max-width: 54ch;
  text-wrap: balance;
}

.mc-section-title,
.mc-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-u1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-1);
  scroll-margin-top: 96px;
}

/* Inline code and key caps. docs-mcp.css scopes its own copies of these two
   rules to `.rd-prose` / `.rd-section`, which this page does not have. */
.mc :not(pre) > code {
  padding: 1px 5px;
  font-family: var(--font-mono);
  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;
}

.mc a:not([class]) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A "go there" link: the one action a step or a section ends on. */
.mc-go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-u5);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.mc-go::after {
  content: '\2192';
  transition: transform var(--dur-2) var(--ease-out);
}

.mc-go:hover::after {
  transform: translateX(3px);
}

.mc-go:focus-visible,
.mc-help__card:focus-visible,
.mc-tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The sign-in / key badge. Two channels, wording and hue, so it never relies
   on colour alone (SC 1.4.1). */
.mc-badge {
  flex: 0 0 auto;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: var(--type-m3);
  letter-spacing: var(--track-data);
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid;
  border-radius: var(--r-pill);
}

.mc-badge--signin {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

.mc-badge--key {
  color: var(--sem-caution);
  border-color: color-mix(in srgb, var(--sem-caution) 32%, transparent);
  background: color-mix(in srgb, var(--sem-caution) 7%, transparent);
}

/* -----------------------------------------------------------------------------
   2 · THE STAGE: picker + diagram
   -----------------------------------------------------------------------------
   Three columns that read left to right as one sentence: your tool, Mirror
   Ai, the data. The reader's choice on the left is the diagram's first node,
   so picking a tool and understanding the connection are the same act.
   Below 960px the columns stack and the wires (which only make sense side by
   side) are not drawn; short vertical ties stand in for them.
   -------------------------------------------------------------------------- */
/* NO FRAME. The stage used to sit in a bordered panel; the diagram reads
   better straight on the page, and on this page a border now means only one
   thing: "this can be clicked". The glow fades to nothing well inside the
   box, so there is no edge to see. */
.mc-flow {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(8px, 1.6vw, 20px);
  background: radial-gradient(ellipse 34% 56% at 50% 54%, var(--accent-wash) 0%, transparent 72%);
}

/* The instruction. It is the section's heading and it is in plain sight,
   because a first-time reader has to be told the rows below are the way in. */
.mc-pick {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-u1);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-1);
  scroll-margin-top: 96px;
}

.mc-pick__hint {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

.mc-wires {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.mc-col {
  position: relative;
  min-width: 0;
}

.mc-col__label {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-m3);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --- the tools ----------------------------------------------------------- */
.mc-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

/* One line per tool at every width: name, where it runs, and the badge at
   the far end. Seven of these share the first screen with the title, and a
   44px row is the touch target floor. */
.mc-tool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: baseline;
  min-height: 46px;
  padding: 10px 14px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--bg-raise);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

.mc-tool:hover {
  border-color: var(--accent-line);
}

/* The arrow that says "this opens something". Drawn, not a glyph, so it sits
   on the row's optical centre at any size. */
.mc-tool__go {
  align-self: center;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-top: 1.5px solid var(--ink-4);
  border-right: 1.5px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.mc-tool:hover .mc-tool__go {
  border-color: var(--accent);
  transform: translateX(3px) rotate(45deg);
}

/* Picked: the arrow turns to point at the steps below. */
.mc-tool[aria-selected="true"] .mc-tool__go {
  border-color: var(--accent);
  transform: translateY(-2px) rotate(135deg);
}

.mc-tool__name {
  font-size: var(--type-u4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-1);
}

.mc-tool__where {
  overflow: hidden;
  font-size: var(--type-u6);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-3);
}

.mc-tool .mc-badge {
  justify-self: end;
}

/* The picked tool. aria-selected is set by the script; :target is the
   no-script equivalent (the tile's own href is the panel's id). */
.mc-tool[aria-selected="true"] {
  border-color: var(--accent-line-hi);
  background: color-mix(in srgb, var(--bg-raise) 86%, var(--accent) 14%);
  box-shadow: 0 0 0 1px var(--accent-line), 0 0 28px -8px var(--accent);
}

/* --- the core: the glass mark ------------------------------------------- */
.mc-col--core {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mc-core {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 28vw, 176px);
  aspect-ratio: 1;
}

.mc-core::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 62%);
  opacity: .14;
  transition: opacity var(--dur-5) var(--ease-out);
}

.mc-core.is-hit::before {
  opacity: .38;
  transition-duration: var(--dur-1);
}

/* The one object on the page with depth. The script leans it a few degrees
   toward the pointer and swells it once when a pulse lands; both are driven by
   the reader, neither loops, and the custom properties are simply never set
   when motion is reduced. */
.mc-core__mark {
  width: 100%;
  height: auto;
  transform: perspective(700px)
             rotateX(var(--mc-rx, 0deg))
             rotateY(var(--mc-ry, 0deg))
             scale(var(--mc-s, 1));
  transition: transform var(--dur-3) var(--ease-out);
}

.mc-core.is-hit {
  --mc-s: 1.05;
}

/* --- the data ------------------------------------------------------------ */
.mc-data {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A label and a point of light, nothing round it: these are not controls. */
.mc-datum {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 0;
  font-size: var(--type-u4);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--ink-3);
  transition: color var(--dur-3) var(--ease-out);
}

.mc-datum::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: background var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}

.mc-datum.is-lit {
  color: var(--ink-1);
}

.mc-datum.is-lit::before {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* Stacked layout: a short tie between the three blocks, since no wire is
   drawn. Centred under the block above it. */
.mc-col--core::before,
.mc-col--data::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--space-6) * -1 + 8px);
  width: 1px;
  height: calc(var(--space-6) - 16px);
  background: linear-gradient(var(--accent-line-hi), var(--accent-line));
}

.mc-col--core .mc-col__label,
.mc-col--data .mc-col__label {
  text-align: center;
}

.mc-col--data .mc-data {
  justify-content: center;
}

@media (min-width: 620px) and (max-width: 959.98px) {
  .mc-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .mc-flow {
    grid-template-columns: minmax(0, 1.5fr) minmax(56px, .5fr) minmax(0, .8fr) minmax(56px, .5fr) minmax(0, .9fr);
    gap: 0;
    align-items: center;
  }

  .mc-col--tools { grid-column: 1; }
  .mc-col--core  { grid-column: 3; }
  .mc-col--data  { grid-column: 5; }

  .mc-col--core::before,
  .mc-col--data::before {
    content: none;
  }

  .mc-col__label,
  .mc-col--core .mc-col__label,
  .mc-col--data .mc-col__label {
    text-align: left;
  }

  .mc-col--core .mc-col__label {
    text-align: center;
  }

  .mc-core {
    width: 100%;
    max-width: 184px;
  }

  .mc-data {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* --- wires and the travelling pulse (drawn by the script) ----------------- */
.mc-wire {
  fill: none;
  stroke: var(--line-1);
  stroke-width: 1;
  transition: stroke var(--dur-3) var(--ease-out);
}

.mc-wire.is-on {
  stroke: var(--accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px var(--accent));
}

.mc-pulse {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}

/* The way down to the steps: the one button on the stage. */
.mc-next {
  margin: var(--space-5) 0 0;
  text-align: center;
}

.mc-next__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 22px;
  font-size: var(--type-u4);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-wash);
  border: 1px solid var(--accent-line-hi);
  border-radius: var(--r-pill);
  transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.mc-next__btn::after {
  content: '\2193';
  transition: transform var(--dur-2) var(--ease-out);
}

.mc-next__btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: 0 0 28px -8px var(--accent);
}

.mc-next__btn:hover::after {
  transform: translateY(3px);
}

.mc-next__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.mc-flow__caption {
  max-width: 62ch;
  text-wrap: balance;
  margin: var(--space-4) auto 0;
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--ink-4);
}

/* --- the address, for the reader who needs nothing else ------------------- */
.mc-address {
  display: grid;
  gap: var(--space-3);
  max-width: 560px;
  margin: var(--space-6) auto 0;
}

.mc-address__lead {
  margin: 0;
  font-size: var(--type-u5);
  text-align: center;
  color: var(--ink-3);
}

/* One slim field: the address, and Copy at its end. The block's label is
   kept for the Copy button's accessible name and hidden from sight. */
.mc-address .dm-code {
  display: flex;
  align-items: center;
  margin: 0;
  border-radius: var(--r-pill);
}

.mc-address .dm-code pre {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 6px 10px 20px;
}

.mc-address .dm-code__bar {
  order: 1;
  min-height: 0;
  padding: 6px 8px 6px 0;
  background: none;
  border: 0;
}

.mc-address .dm-code__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mc-address .dm-code__copy {
  border-radius: var(--r-pill);
}

/* On a phone the address wraps to two lines, and a two-line pill is a blob. */
@media (max-width: 479.98px) {
  .mc-address .dm-code {
    border-radius: var(--r-md);
  }
}

/* -----------------------------------------------------------------------------
   3 · A TOOL'S PANEL
   -----------------------------------------------------------------------------
   No card around a step: a step already holds a code block and a drawn
   window, and a third border round those is a box in a box in a box. Steps
   are separated by a hairline and by space.
   -------------------------------------------------------------------------- */
.mc-panels {
  margin-top: var(--mc-gap);
}

.mc-panel {
  scroll-margin-top: 88px;
}

.mc-panel + .mc-panel {
  margin-top: var(--mc-gap);
}

.mc-panel[hidden] {
  display: none;
}

.mc-panel__head {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.mc-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}

.mc-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mc-step;
}

.mc-step {
  counter-increment: mc-step;
  display: grid;
  gap: var(--space-5);
  padding-block: clamp(24px, 3.4vw, 40px);
  border-top: 1px solid var(--line-1);
}

.mc-step__text {
  min-width: 0;
}

.mc-step__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 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);
}

.mc-step__title::before {
  content: counter(mc-step);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-mono);
  font-size: var(--type-u5);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}

.mc-step__text > p,
.mc-check__text > p {
  max-width: 46ch;
  margin: 0 0 var(--space-4);
  font-size: var(--type-u4);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.mc-step__text > :last-child,
.mc-check__text > :last-child {
  margin-bottom: 0;
}

.mc-step__text strong,
.mc-check__text strong {
  font-weight: 600;
  color: var(--ink-1);
}

.mc-step .dm-code,
.mc-check .dm-code {
  margin-bottom: var(--space-4);
}

@media (min-width: 880px) {
  .mc-step,
  .mc-check {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
  }
}

/* The fine print under a tool: the accordion from docs-mcp.css. */
/* A line and a plus sign, not a box. */
.mc-more {
  margin: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-1);
  border-radius: 0;
}

.mc-more .dm-tsh__q {
  padding: var(--space-4) 0;
}

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

.mc-more .dm-tsh__a .dm-code {
  margin-top: var(--space-3);
}

/* -----------------------------------------------------------------------------
   4 · CHECK, ASK, HELP
   -------------------------------------------------------------------------- */
.mc-check,
.mc-ask,
.mc-help {
  margin-top: var(--mc-gap);
}

.mc-check {
  display: grid;
  gap: var(--space-5);
}

.mc-check .mc-section-title,
.mc-ask .mc-section-title,
.mc-help .mc-section-title {
  margin-bottom: var(--space-4);
}

.mc-ask__lead {
  max-width: 52ch;
  margin: 0 0 var(--space-5);
  font-size: var(--type-u4);
  line-height: var(--lh-body);
  color: var(--ink-3);
}

.mc-ask__grid {
  display: grid;
  gap: var(--space-4);
}

/* Prompts are a list to copy from, not four cards: a label, the sentence,
   and Copy, under a hairline. */
.mc-ask__grid .dm-code {
  margin: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-1);
  border-radius: 0;
}

.mc-ask__grid .dm-code__bar {
  min-height: 0;
  padding: var(--space-3) 0 0;
  background: none;
  border: 0;
}

.mc-ask__grid .dm-code__label {
  color: var(--accent);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

.mc-ask__grid .dm-code pre {
  padding: var(--space-2) 0 var(--space-4);
  color: var(--ink-1);
}

/* A prompt is a sentence, not code: the UI face reads better than mono at
   this length, and it is still copied character for character. */
.mc-ask__grid .dm-code pre,
.mc-check .dm-code pre {
  font-family: var(--font-ui);
  font-size: var(--type-u5);
  line-height: var(--lh-snug);
}

@media (min-width: 760px) {
  .mc-ask__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

.mc-help__grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .mc-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }
}

/* Three links under a rule each. The rule lights on hover. */
.mc-help__card {
  display: grid;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4) 0 0;
  text-decoration: none;
  border-top: 1px solid var(--line-2);
  transition: border-color var(--dur-2) var(--ease-out);
}

.mc-help__card:hover {
  border-color: var(--accent);
}

.mc-help__title::after {
  content: '\2192';
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--accent);
  transition: transform var(--dur-2) var(--ease-out);
}

.mc-help__card:hover .mc-help__title::after {
  transform: translateX(3px);
}

.mc-help__title {
  font-size: var(--type-u3);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-1);
}

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

.mc-help__meta {
  max-width: 70ch;
  margin: var(--space-5) 0 0;
  font-size: var(--type-u6);
  line-height: var(--lh-snug);
  color: var(--ink-4);
}

/* -----------------------------------------------------------------------------
   5 · THE DRAWN SCREENS
   -----------------------------------------------------------------------------
   Everything inside a screen is sized in `em`, and the screen's own font-size
   follows its width (container query units), so one drawing scales from a
   320px phone column to the 480px desktop column without a second layout.
   The fixed px value is the fallback for a browser without `cqw`.
   -------------------------------------------------------------------------- */
.mc-screen {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.mc-screen__art {
  display: block;
}

.mc-screen__replay {
  position: absolute;
  right: 0;
  bottom: calc(var(--space-5) * -1 - 2px);
  padding: 2px 0;
  font-family: var(--font-mono);
  font-size: var(--type-m3);
  letter-spacing: var(--track-data);
  color: var(--ink-4);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}

.mc-screen__replay:hover {
  color: var(--accent);
}

.mc-screen__replay:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sc {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 16 / 10.4;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 12px;
  font-size: clamp(9px, 2.72cqw, 13.5px);
  line-height: 1.35;
  color: var(--ink-2);
  background: var(--bg-raise);
  border: 1px solid var(--line-2);
  border-radius: 1em;
  box-shadow: 0 30px 60px -36px black;
}

.sc span,
.sc b,
.sc i {
  display: block;
  font-style: normal;
}

.sc .sc__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .9em;
  height: 2.7em;
  padding: 0 1em;
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--ink-3);
  background: var(--sf-2);
  border-bottom: 1px solid var(--line-1);
}

.sc .sc__dots {
  display: flex;
  gap: .42em;
}

.sc__dots i {
  width: .72em;
  height: .72em;
  border-radius: 50%;
  background: var(--sf-3);
}

.sc .sc__body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.sc .sc__body--center {
  align-items: center;
  justify-content: center;
  padding: 1.2em;
}

.sc .sc-nav {
  flex: 0 0 34%;
  display: flex;
  flex-direction: column;
  gap: .3em;
  padding: 1em .7em;
  border-right: 1px solid var(--line-1);
}

.sc-nav span {
  padding: .5em .7em;
  border-radius: .55em;
  color: var(--ink-3);
}

.sc-nav .is-cur {
  color: var(--ink-1);
  background: var(--sf-3);
}

.sc .sc-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: .75em;
  min-width: 0;
  padding: 1.1em 1.2em;
}

.sc .sc-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  font-size: 1.12em;
  font-weight: 600;
  color: var(--ink-1);
}

.sc .sc-dialog {
  display: flex;
  flex-direction: column;
  gap: .8em;
  width: 82%;
  padding: 1.25em 1.3em;
  background: var(--sf-2);
  border: 1px solid var(--line-2);
  border-radius: .95em;
}

.sc .sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: .6em .8em;
  border: 1px solid var(--line-1);
  border-radius: .6em;
}

.sc .sc-row > span:first-child {
  display: flex;
  align-items: center;
  gap: .6em;
}

.sc-list {
  padding-left: .2em;
  color: var(--ink-3);
}

.sc-list span {
  position: relative;
  padding: .12em 0 .12em 1.2em;
}

.sc-list span::before {
  content: '';
  position: absolute;
  left: .15em;
  top: .62em;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--sem-master);
}

.sc .sc-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6em;
  margin-top: .2em;
}

.sc .sc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45em .95em;
  font-size: .95em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-1);
  background: var(--sf-2);
  border: 1px solid var(--line-2);
  border-radius: .55em;
}

.sc .sc-btn--pri {
  color: var(--_ink-on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.sc .sc-field {
  display: flex;
  flex-direction: column;
  gap: .3em;
}

.sc-field > b {
  font-size: .85em;
  font-weight: 500;
  color: var(--ink-3);
}

.sc .sc-input {
  position: relative;
  min-height: 2.35em;
  padding: .5em .7em;
  font-family: var(--font-mono);
  font-size: .88em;
  white-space: nowrap;
  color: var(--ink-1);
  background: var(--bg-page);
  border: 1px solid var(--line-2);
  border-radius: .5em;
}

.sc-dim {
  font-size: .9em;
  color: var(--ink-4);
}

.sc-mono {
  font-family: var(--font-mono);
  font-size: .92em;
  color: var(--ink-1);
}

.sc .sc-ok {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--sem-master);
  box-shadow: 0 0 .6em var(--sem-master);
}

.sc .sc-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 2.5em;
  height: 1.4em;
  border-radius: 1em;
  background: var(--accent);
}

.sc-toggle::before {
  content: '';
  position: absolute;
  top: .18em;
  left: 1.28em;
  width: 1.04em;
  height: 1.04em;
  border-radius: 50%;
  background: var(--_ink-on-accent);
}

/* --- terminal ------------------------------------------------------------- */
/* A terminal holds three short lines, so it is a shorter window than the
   others: the same lines in a 16:10 box read as an empty room. */
.sc--term {
  aspect-ratio: 16 / 7.6;
}

.sc--term .sc__body {
  display: block;
  padding: 1.2em 1.35em;
  font-family: var(--font-mono);
  font-size: .98em;
  line-height: 1.7;
  background: var(--bg-deep);
}

.sc .sc-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink-1);
}

.sc .sc-line--cmd,
.sc .sc-line--ask {
  display: flex;
}

.sc-line--cmd::before {
  content: '$\00a0';
  color: var(--accent);
}

.sc-line--ask::before {
  content: '>\00a0';
  color: var(--accent);
}

.sc .sc-line--out {
  color: var(--ink-3);
}

.sc .sc-line--pick {
  display: flex;
  margin-top: .5em;
}

.sc .sc-line--pick .sc-target {
  padding: .1em .7em;
  color: var(--_ink-on-accent);
  background: var(--accent);
  border-radius: .3em;
}

/* --- editor --------------------------------------------------------------- */
.sc--editor .sc__body {
  flex-direction: column;
  background: var(--bg-deep);
}

.sc .sc-tab {
  align-self: flex-start;
  padding: .5em 1.1em;
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--ink-1);
  background: var(--bg-raise);
  border-right: 1px solid var(--line-1);
  border-bottom: 2px solid var(--accent);
}

.sc .sc-code {
  flex: 1 1 auto;
  padding: .9em 1.25em;
  font-family: var(--font-mono);
  font-size: .86em;
  line-height: 1.6;
  white-space: pre;
  color: var(--ink-3);
}

.sc .sc-code span {
  display: inline;
}

.sc-k {
  color: var(--accent-2);
}

.sc .sc-key {
  position: relative;
  display: inline-block;
  color: var(--sem-caution);
  border-bottom: 1px dotted var(--sem-caution);
}

/* --- chat ----------------------------------------------------------------- */
.sc .sc-chat {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8em;
  padding: 1.2em 1.3em;
}

.sc .sc-bubble {
  align-self: flex-end;
  max-width: 88%;
  padding: .65em .95em;
  color: var(--ink-1);
  background: var(--sf-3);
  border-radius: 1em 1em .25em 1em;
}

.sc .sc-tool {
  align-self: flex-start;
  padding: .3em .8em;
  font-family: var(--font-mono);
  font-size: .82em;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 99em;
}

.sc .sc-answer {
  align-self: flex-start;
  max-width: 94%;
  color: var(--ink-1);
}

/* --- the thing to click, and the pointer that lands on it ----------------- */
.sc .sc-target {
  position: relative;
  box-shadow: 0 0 0 .14em var(--bg-raise), 0 0 0 .28em var(--accent);
}

.sc .sc-row.sc-target,
.sc .sc-input.sc-target {
  box-shadow: 0 0 0 .14em var(--accent);
}

.sc-row .sc-target {
  border-radius: .3em;
}

.sc .sc-cur {
  position: absolute;
  right: -.2em;
  bottom: -1em;
  z-index: 2;
  width: 1.05em;
  height: 1.45em;
  background: white;
  clip-path: polygon(0 0, 0 78%, 26% 60%, 46% 100%, 62% 92%, 43% 54%, 78% 54%);
  filter: drop-shadow(0 .1em .15em black);
}

/* -----------------------------------------------------------------------------
   6 · MOTION
   -----------------------------------------------------------------------------
   `.is-in` is added by the script when a screen is on screen. Until then, and
   only under .mc-js with motion allowed, the animated parts wait at their
   first frame. `both` holds them there through the delay and at the last
   frame afterwards.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .mc-js .mc-screen:not(.is-in) .sc-a,
  .mc-js .mc-screen:not(.is-in) .sc-cur {
    opacity: 0;
  }

  .mc-js .mc-screen:not(.is-in) .sc-type {
    clip-path: inset(0 100% 0 0);
  }

  .mc-js .mc-screen:not(.is-in) .sc-target {
    box-shadow: none;
  }

  .mc-js .mc-screen.is-in .sc-a {
    animation: sc-in var(--dur-3) var(--ease-out) var(--d, 0s) both;
  }

  .mc-js .mc-screen.is-in .sc-type {
    animation: sc-type calc(var(--n, 12) * 34ms) steps(var(--n, 12), end) var(--d, 0s) both;
  }

  .mc-js .mc-screen.is-in .sc-cur {
    animation: sc-cur var(--dur-5) var(--ease-inout) var(--d, 0s) both;
  }

  .mc-js .mc-screen.is-in .sc-target {
    animation: sc-ring var(--dur-4) var(--ease-out) calc(var(--d, 0s) + .62s) both;
  }

  .mc-js .mc-screen.is-in .sc-row.sc-target,
  .mc-js .mc-screen.is-in .sc-input.sc-target {
    animation-name: sc-ring-flat;
  }

  .mc-js .mc-screen.is-in .sc-toggle {
    animation: sc-ring var(--dur-4) var(--ease-out) calc(var(--d, 0s) + .62s) both,
               sc-toggle-bg var(--dur-2) var(--ease-out) calc(var(--d, 0s) + .7s) both;
  }

  .mc-js .mc-screen.is-in .sc-toggle::before {
    animation: sc-toggle-knob var(--dur-2) var(--ease-out) calc(var(--d, 0s) + .7s) both;
  }

  @keyframes sc-in {
    from { opacity: 0; transform: translateY(.5em); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes sc-type {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }

  @keyframes sc-cur {
    from { opacity: 0; transform: translate(5em, 3.2em); }
    30%  { opacity: 1; }
    to   { opacity: 1; transform: none; }
  }

  @keyframes sc-ring {
    from { box-shadow: 0 0 0 .14em transparent, 0 0 0 1.1em transparent; }
    to   { box-shadow: 0 0 0 .14em var(--bg-raise), 0 0 0 .28em var(--accent); }
  }

  @keyframes sc-ring-flat {
    from { box-shadow: 0 0 0 .9em transparent; }
    to   { box-shadow: 0 0 0 .14em var(--accent); }
  }

  @keyframes sc-toggle-bg {
    from { background: var(--sf-3); }
    to   { background: var(--accent); }
  }

  @keyframes sc-toggle-knob {
    from { left: .18em; background: var(--ink-2); }
    to   { left: 1.28em; background: var(--_ink-on-accent); }
  }

  /* The panel a reader just picked rises into place. */
  .mc-js .mc-panel.is-arriving {
    animation: sc-in var(--dur-4) var(--ease-out) both;
  }
}

/* -----------------------------------------------------------------------------
   7 · THE LIVE STAGE  (docs-mcp-motion.js)
   -----------------------------------------------------------------------------
   Three static layers that are always there, and three that exist only while
   the motion script runs (`.mc-live`): its canvas, the turning mark, and the
   Pause control.
   -------------------------------------------------------------------------- */

/* A field of fine dots that fades out from the mark: depth without movement. */
.mc-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 52% 78% at 50% 50%, black 8%, transparent 74%);
          mask-image: radial-gradient(ellipse 52% 78% at 50% 50%, black 8%, transparent 74%);
  pointer-events: none;
}

.mc-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The glass mark, turning. One sprite sheet, 10 frames by 6; the script moves
   background-position a frame at a time. It sits exactly over the still
   image, which keeps the box and is hidden once the sheet has loaded. */
.mc-core__spin {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 1000% 600%;
  transform: perspective(700px) rotateX(var(--mc-rx, 0deg)) scale(var(--mc-s, 1));
  transition: transform var(--dur-3) var(--ease-out);
}

.mc-core.has-spin .mc-core__mark {
  visibility: hidden;
}

/* The light the mark throws on the floor beneath it. */
.mc-core::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -13%;
  z-index: -1;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent) 0%, transparent 70%);
  opacity: .28;
  filter: blur(7px);
  transition: opacity var(--dur-4) var(--ease-out);
}

.mc-core.is-hit::after {
  opacity: .7;
  transition-duration: var(--dur-1);
}

.mc-flow__pause {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 4px 2px;
  font-family: var(--font-mono);
  font-size: var(--type-m3);
  letter-spacing: var(--track-data);
  color: var(--ink-4);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-out);
}

.mc-flow__pause:hover {
  color: var(--accent);
}

.mc-flow__pause:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The travelling lights only exist side by side with the wires. */
@media (max-width: 959.98px) {
  .mc-flow__pause {
    display: none;
  }
}

@media (min-width: 960px) {
  .mc-core {
    max-width: 208px;
  }
}

/* -----------------------------------------------------------------------------
   8 · DEPTH ON THE DRAWN SCREENS
   -----------------------------------------------------------------------------
   Each screen is a pane of glass in a little space of its own: a glow behind
   it, a lean toward the pointer, a highlight that follows the pointer. The
   lean is custom properties set by docs-mcp-motion.js; with no script they
   are never set and the pane sits flat.
   -------------------------------------------------------------------------- */
.mc-screen {
  perspective: 1100px;
}

.mc-screen::before {
  content: '';
  position: absolute;
  inset: 14% 6% -4%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 62%, var(--accent) 0%, transparent 68%);
  opacity: .13;
  filter: blur(28px);
  pointer-events: none;
}

.mc-screen__art {
  position: relative;
  transform: rotateX(var(--sc-rx, 0deg)) rotateY(var(--sc-ry, 0deg));
  transition: transform var(--dur-4) var(--ease-out);
}

.mc-screen__art.is-lit {
  transition-duration: var(--dur-1);
}

.mc-screen__art::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: radial-gradient(300px circle at var(--sc-gx, 50%) var(--sc-gy, 0%),
                              rgba(255, 255, 255, .11) 0%, transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}

.mc-screen__art.is-lit::after {
  opacity: 1;
}

/* A band of light that crosses the pane once as it arrives. */
.sc {
  position: relative;
}

.sc::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
  opacity: 0;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   9 · THE RAIL THROUGH THE STEPS
   -----------------------------------------------------------------------------
   The three numbers sit on one line that runs down to "Connected". As the
   reader reaches a step its number fills and the line to the next one draws
   (`.is-reached`, set by docs-mcp-connect.js). Side by side only: on a phone
   the screen is as wide as the column and there is no gutter to run a line
   down, so the numbers stay beside their titles and simply fill.
   -------------------------------------------------------------------------- */
.mc-step.is-reached .mc-step__title::before,
.mc-panel.is-done .mc-done::before {
  color: var(--_ink-on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 18px -2px var(--accent);
}

.mc-done {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  font-size: var(--type-u4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--ink-1);
}

.mc-done::before {
  content: '\2713';
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: var(--type-u5);
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}

.mc-done a {
  margin-left: var(--space-1);
  font-weight: 600;
}

@media (min-width: 880px) {
  .mc-steps {
    --mc-step-pad: clamp(22px, 2.8vw, 36px);
    border-top: 1px solid var(--line-1);
  }

  .mc-step {
    position: relative;
    align-items: start;
    padding-block: var(--mc-step-pad);
    border-top: 0;
  }

  .mc-step__text {
    position: relative;
    padding: 3px 0 0 54px;
  }

  .mc-step__title {
    display: block;
  }

  .mc-step__title::before {
    position: absolute;
    left: 0;
    top: 0;
  }

  /* The line: from under this number to just above the next one. ::before
     is the track, ::after the part that has been travelled. */
  .mc-step::before,
  .mc-step::after {
    content: '';
    position: absolute;
    left: 14px;
    top: calc(var(--mc-step-pad) + 40px);
    bottom: calc((var(--mc-step-pad) - 4px) * -1);
    width: 2px;
    border-radius: 1px;
  }

  .mc-step::before {
    background: var(--line-2);
  }

  .mc-step::after {
    background: linear-gradient(var(--accent), var(--accent-2));
    box-shadow: 0 0 10px var(--accent);
    transform: scaleY(0);
    transform-origin: top;
  }

  .mc-step:last-child::before,
  .mc-step:last-child::after {
    bottom: 6px;
  }

  /* "Connected" sits on the same text edge as the steps above it. */
  .mc-done {
    gap: 24px;
  }

  .mc-step.is-reached::after {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The pane arrives turned away and settles flat. */
  .mc-js .mc-screen .mc-screen__art {
    transition: transform var(--dur-6) var(--ease-out), opacity var(--dur-4) var(--ease-out);
  }

  .mc-js .mc-screen .mc-screen__art.is-lit {
    transition-duration: var(--dur-1), var(--dur-4);
  }

  /* Narrow: the pane is as wide as the column, so it only rises. Anything
     that pushes it sideways would widen the page (a transform still counts
     toward scrollable overflow). */
  .mc-js .mc-screen:not(.is-in) .mc-screen__art {
    opacity: 0;
    transform: translateY(26px) scale(.96);
  }

  @media (min-width: 880px) {
    .mc-js .mc-screen:not(.is-in) .mc-screen__art {
      transform: rotateX(9deg) rotateY(-20deg) translate3d(24px, 30px, -80px) scale(.93);
    }
  }

  .mc-js .mc-screen.is-in .sc::after {
    animation: sc-sweep 1.2s var(--ease-inout) .45s both;
  }

  @keyframes sc-sweep {
    from { opacity: 0; transform: translateX(-130%) skewX(-18deg); }
    25%  { opacity: 1; }
    to   { opacity: 0; transform: translateX(260%) skewX(-18deg); }
  }

  .mc-step__title::before,
  .mc-done::before {
    transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out),
                border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
  }

  .mc-step::after {
    transition: transform var(--dur-6) var(--ease-inout) .5s;
  }

  .mc-panel.is-done .mc-done::before {
    transition-delay: 1.3s;
  }
}

/* -----------------------------------------------------------------------------
   10 · THE NUDGE
   -----------------------------------------------------------------------------
   A reader who has never picked a tool (`.mc-nudge`, set by the page script)
   sees each row light in turn, twice, then nothing. It is the page saying
   "these are buttons" once, and it stops at the first click.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .mc-nudge .mc-tool {
    animation: mc-nudge 2.4s var(--ease-inout) 1.4s 2 both;
  }

  .mc-nudge .mc-tool:nth-child(2) { animation-delay: 1.52s; }
  .mc-nudge .mc-tool:nth-child(3) { animation-delay: 1.64s; }
  .mc-nudge .mc-tool:nth-child(4) { animation-delay: 1.76s; }
  .mc-nudge .mc-tool:nth-child(5) { animation-delay: 1.88s; }
  .mc-nudge .mc-tool:nth-child(6) { animation-delay: 2s; }
  .mc-nudge .mc-tool:nth-child(7) { animation-delay: 2.12s; }

  @keyframes mc-nudge {
    0%, 22%, 100% { border-color: var(--line-1); box-shadow: none; }
    9% { border-color: var(--accent-line-hi); box-shadow: 0 0 22px -8px var(--accent); }
  }

  .mc-nudge .mc-tool[aria-selected="true"] {
    animation: none;
  }
}