/* INK ON A RED FILL IS PINNED. --bone-cream is #EFE9DC on light and the page
   ground #0A0908 under the dark remap, so this ink went from 10.16:1 to
   1.62:1. The fill is a constant, so its ink is a constant. */
/* RED AS TYPE BECOMES EMBER ON DARK. Solid --marrow-red is 1.62:1 on the
   dark ground. --marrow-ember-text is the shipped accessibility token for
   exactly this case, measured 7.69:1. Red still points; it just does not
   colour a word at 1.62. */
/* ===== MARROW LAMELLA CONNECT, page scoped layout only =====
   Loaded after /css/styles.css and /lamella/lamella.css, so this file adds
   only what the client picker needs. The shared .cx-* rhythm, hero, card and
   code-block rules come from lamella.css and are reused untouched.

   Rules honored here:
     - Zero new custom properties. Every color is a var() already defined in
       /css/styles.css.
     - Zero hex literals. `grep -E "#[0-9a-fA-F]{3,8}" connect.css` must be
       empty.
     - --marrow-red appears as type ONLY on --bone-white and --bone-cream,
       where it measures well past AA. It never colors type on a dark surface,
       per the contrast canon.
     - Every transition and transform is disabled under prefers-reduced-motion
       at the bottom of this file.
     - Every interactive element keeps a visible focus ring.
*/

/* ---------- the two values block ---------- */
.cn-values {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.cn-value {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--space-3);
}
.cn-value-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
}

/* An inline monospace value. Sits on light surfaces only. */
.cn-inline {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--bone-black);
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2px 6px;
  word-break: break-all;
}

.cn-copyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 10px;
}

/* ---------- copy button ---------- */
/* Bone black on bone white, the same pairing every shipped secondary control
   uses. Red is the border and the hover fill only, never the resting type. */
.cn-copy {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-black);
  background: var(--bone-white);
  border: 1px solid var(--marrow-red);
  border-radius: 2px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cn-copy:hover {
  background: var(--marrow-red);
  color: #FBF8F2;
}
.cn-copy:focus-visible,
.cn-tab:focus-visible,
.cn-panel:focus-visible {
  outline: 3px solid var(--marrow-red);
  outline-offset: 2px;
}

/* ---------- tabs ---------- */
.cn-tabs { margin-top: var(--space-2); }

.cn-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--line);
}
.cn-tab {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--steel);
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px 16px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cn-tab:hover { color: var(--bone-black); }
/* The selected tab carries a solid red underline plus a weight and color
   change, so selection is never signalled by color alone. */
.cn-tab[aria-selected="true"] {
  color: var(--bone-black);
  border-color: var(--line);
  border-bottom: 3px solid var(--marrow-red);
  padding-bottom: 8px;
}

/* ---------- panels ---------- */
.cn-panel {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--space-4);
  /* Same reason as .st-step below. .cn-panel is a grid item of .st-panels and
     the direct parent of the code block, so both links in the chain have to
     let go or the pre still cannot scroll itself. */
  min-width: 0;
}
.cn-panel[hidden] { display: none; }

.cn-panel-h {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bone-black);
  margin: var(--space-4) 0 10px;
}
.cn-panel-h:first-of-type { margin-top: var(--space-3); }

.cn-lead,
.cn-note {
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel);
  max-width: 68ch;
  margin: 0 0 var(--space-2);
}
.cn-note { font-size: 14px; }

.cn-steps {
  margin: 0 0 var(--space-3);
  padding: 0 0 0 1.35em;
  max-width: 68ch;
}
.cn-steps li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel);
  margin: 0 0 8px;
}
.cn-steps li::marker {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--marrow-ember-text);
}

.cn-plain {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  max-width: 68ch;
}
.cn-plain li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cn-plain li:last-child { border-bottom: 0; }

/* ---------- honesty banners ---------- */
/* Three states, and the words carry the meaning. The left rule and the weight
   are the visual cue; the sentence is what a screen reader hears, so nothing
   here depends on seeing a color. */
.cn-status {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--bone-black);
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--steel);
  border-radius: 2px;
  padding: 12px var(--space-2);
  margin: 0 0 var(--space-2);
  max-width: 72ch;
}
.cn-status--written { border-left-color: var(--bone-black); }
.cn-status--pending { border-left-color: var(--marrow-red); }
.cn-status--unknown { border-left-color: var(--marrow-red); }

/* ---------- code blocks with a copy button ---------- */
.cn-codeblock {
  position: relative;
  margin: 0 0 var(--space-3);
}
.cn-codeblock .cx-code { padding-right: var(--space-7); }
.cn-codeblock .cn-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bone-cream);
}
.cn-codeblock .cn-copy:hover {
  background: var(--marrow-red);
  color: #FBF8F2;
}

/* ---------- source line ---------- */
.cn-src {
  font-size: 13px;
  line-height: 1.6;
  color: var(--steel);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.cn-src a { color: var(--bone-black); }

/* The polite announcer for the copy buttons. Visible, quiet, and it does not
   move the layout because it reserves its own line. */
.cn-live {
  min-height: 1.4em;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--steel);
  margin: var(--space-2) 0 0;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cn-values { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cn-panel { padding: var(--space-3); }
  .cn-tablist { gap: 6px; }
  .cn-tab { font-size: 14px; padding: 9px 12px; }
  .cn-tab[aria-selected="true"] { padding-bottom: 7px; }
  /* On a narrow screen the absolute copy button would sit over the command
     text, so it goes back into the flow underneath the block. */
  .cn-codeblock .cx-code { padding-right: var(--space-3); }
  .cn-codeblock .cn-copy {
    position: static;
    display: inline-block;
    margin-top: var(--space-1);
  }
}

/* ---------- reduced motion ----------
   This page animates nothing of its own beyond two color transitions. This
   block removes those, and neutralizes the inherited hover transform and
   transition on the shared .btn-primary. */
@media (prefers-reduced-motion: reduce) {
  .cn-copy,
  .cn-tab,
  .cn-panel,
  .cn-value,
  .lamella-page .btn-primary {
    transition: none;
  }
  .lamella-page .btn-primary:hover,
  .lamella-page .btn-primary:active {
    transform: none;
  }
}

/* =========================================================================
   THE CONNECT WALKTHROUGH. Drawn, not filmed.

   COLOUR RULE, ENFORCED HERE. --marrow-red is a fill, a stroke, a dot and a
   glow in this block and never a text colour. Marrow red on bone black is
   1.62:1 as type. Red points, red never colours a word.

   MOTION RULE. Every animation below is decoration over a layout that is
   already complete and readable. prefers-reduced-motion removes all of it and
   the Hold still button removes all of it, and in both cases every element
   sits in its finished state rather than its first frame.
   ========================================================================= */

.lw{padding:64px 0 8px}
.lw-h{margin:10px 0 12px;font-family:var(--display);font-size:clamp(26px,4vw,40px);line-height:1.1}
.lw-lede{max-width:56ch;margin:0 0 22px;font-size:15.5px;line-height:1.7;color:var(--steel)}
.lw-toggle{margin:0 0 30px;padding:8px 16px;border-radius:999px;font:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;color:var(--bone-black);background:transparent;
  border:1px solid rgba(10,9,8,.22)}
.lw-toggle:hover{background:rgba(10,9,8,.05)}
.lw-toggle:focus-visible{outline:2px solid var(--bone-black);outline-offset:3px}

.lw-steps{list-style:none;margin:0;padding:0;display:grid;gap:34px}
@media(min-width:900px){.lw-steps{grid-template-columns:repeat(3,1fr);gap:26px}}

/* min-width: 0 for the same reason .st-step and .cn-panel carry it. This
   stylesheet is loaded by /lamella/terminal/ as well, and that page stacks
   .tm-pre blocks holding a full unbroken `claude mcp add` command inside
   these grid items. The item would not shrink under the command's min content
   width, so at 375 the terminal page's body measured 1007 and every step ran
   off the right edge. The pre already has overflow-x: auto; this lets it use
   it. .lw-copy is the flex child between the two, so it lets go as well. */
.lw-step{margin:0;padding:0;display:flex;flex-direction:column;gap:16px;min-width:0}
.lw-copy{min-width:0}
.lw-art{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--bone-white);
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
.lw-svg{display:block;width:100%;height:auto}

.lw-num{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel)}
.lw-st{margin:6px 0 8px;font-family:var(--display);font-size:19px;line-height:1.25;color:var(--bone-black)}
.lw-sd{margin:0;font-size:14.5px;line-height:1.65;color:var(--steel)}
.lw-foot{margin:34px 0 0;font-size:14px;line-height:1.65;color:var(--steel)}
.lw-foot a{color:var(--bone-black);text-underline-offset:3px}

/* ---- the drawn parts ---- */
.lw-card{fill:var(--bone-white);stroke:var(--line);stroke-width:1}
.lw-term{fill:#000000;stroke:rgba(242,237,227,.18)}
.lw-bar{fill:rgba(242,237,227,.07)}
.lw-dot-a{fill:var(--marrow-red)}
.lw-dot-b,.lw-dot-c{fill:rgba(242,237,227,.2)}
.lw-line{fill:rgba(242,237,227,.52)}
.lw-faint{fill:rgba(242,237,227,.2)}
.lw-btn{fill:var(--bone-black)}
.lw-btn-label{fill:rgba(10,9,8,.8)}
.lw-cursor{fill:rgba(242,237,227,.8)}
.lw-ping{fill:none;stroke:var(--marrow-red);stroke-width:2}
.lw-seal{fill:none;stroke:var(--marrow-red);stroke-width:2.5}
.lw-tick{fill:none;stroke:var(--marrow-red);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lw-prompt{fill:var(--marrow-red)}
.lw-type{fill:rgba(239,233,220,.62);width:186px}
/* WHY THE WIDTH IS SET HERE AND NOT ONLY IN THE KEYFRAME. The SVG attribute is
   width="0" so the type can grow from nothing while animating. A visitor with
   prefers-reduced-motion runs no animation at all, so without this line they
   would read step three with the typed sentence missing entirely. The finished
   width is the base state and the animation is what temporarily shrinks it. */
.lw-chip{fill:rgba(107,15,26,.22);stroke:var(--marrow-red);stroke-width:1}
.lw-chip-dot{fill:var(--marrow-red)}

/* ---- motion. Decoration only. ---- */
@media(prefers-reduced-motion:no-preference){
  .lw:not([data-lw-still]) .lw-cursor{animation:lw-press 3.6s ease-in-out infinite}
  .lw:not([data-lw-still]) .lw-ping{animation:lw-ping 3.6s ease-out infinite;transform-origin:196px 135px}
  .lw:not([data-lw-still]) .lw-btn-g{animation:lw-tap 3.6s ease-in-out infinite;transform-origin:103px 135px}
  .lw:not([data-lw-still]) .lw-cursor2{animation:lw-press2 4s ease-in-out infinite}
  .lw:not([data-lw-still]) .lw-btn-g2{animation:lw-tap 4s ease-in-out infinite .35s;transform-origin:160px 157px}
  .lw:not([data-lw-still]) .lw-tick{stroke-dasharray:26;stroke-dashoffset:26;animation:lw-draw 4s ease-out infinite .5s}
  .lw:not([data-lw-still]) .lw-type{animation:lw-type 4.4s steps(22,end) infinite}
  .lw:not([data-lw-still]) .lw-reply{opacity:0;animation:lw-in 4.4s ease-out infinite}
  .lw:not([data-lw-still]) .lw-r1{animation-delay:1.5s}
  .lw:not([data-lw-still]) .lw-r2{animation-delay:1.75s}
  .lw:not([data-lw-still]) .lw-r3{animation-delay:2s}
  .lw:not([data-lw-still]) .lw-r4{animation-delay:2.35s}
}
@keyframes lw-press{0%,58%{transform:translate(0,0)}68%,78%{transform:translate(-72px,-2px)}100%{transform:translate(0,0)}}
@keyframes lw-press2{0%,52%{transform:translate(0,0)}64%,80%{transform:translate(-58px,0)}100%{transform:translate(0,0)}}
@keyframes lw-ping{0%,66%{opacity:0;transform:scale(.6) translate(-72px,-2px)}
  72%{opacity:.85;transform:scale(1) translate(-72px,-2px)}
  86%,100%{opacity:0;transform:scale(2.1) translate(-72px,-2px)}}
@keyframes lw-tap{0%,66%{transform:scale(1)}73%{transform:scale(.955)}82%,100%{transform:scale(1)}}
@keyframes lw-draw{0%,12%{stroke-dashoffset:26}34%,100%{stroke-dashoffset:0}}
@keyframes lw-type{0%{width:0}30%{width:186px}92%{width:186px}100%{width:0}}
@keyframes lw-in{0%,30%{opacity:0;transform:translateY(4px)}42%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0}}

/* The stopped state is the FINISHED frame, never the first one, so a coach who
   presses Hold still reads a completed flow rather than a blank one. */
.lw[data-lw-still] .lw-type{width:186px}
.lw[data-lw-still] .lw-reply{opacity:1}
.lw[data-lw-still] .lw-tick{stroke-dashoffset:0}
.lw[data-lw-still] .lw-ping{opacity:0}

/* ---- the terminal page reuses the walkthrough shell ---- */
.lw-steps-stack{grid-template-columns:1fr !important;gap:30px}
.tm-pre{margin:14px 0 0;padding:14px 16px;overflow-x:auto;border-radius:10px;
  /* A SOLID dark ground, not a wash. rgba(0,0,0,.34) over bone cream composites
     to roughly #9D9992, and bone cream type on that is about 1.6 to 1: legible
     enough to pass a glance and not enough to pass AA. The same value as the
     terminal card in step three of the walkthrough, so a code block reads as a
     terminal on both pages. */
  border:1px solid rgba(10,9,8,.18);background:#1B1917}
/* THE GROUND HERE IS HARDCODED, SO THE INK MUST NOT FLIP. .tm-pre paints a
   literal #1B1917 on purpose, so a code block reads as a terminal on BOTH
   themes. The ink was var(--bone-cream), which is light in the light table and
   #0A0908 in the dark one, so under the dark stamp this rendered near black on
   near black and measured 1.14 to 1. The primary instruction on the terminal
   page, the claude mcp add command itself, was invisible. --mzv-onfill is the
   token defined as constant light text for red or dark fills and sits outside
   the dark remap on purpose, which is the whole point here: a flipping ink over
   a fixed ground is the defect, not the value. Measured 16.55 to 1 in both.
   Note the sibling .tm-code below was already correct, because BOTH its ink and
   its ground flip together. Fixed 2026-08-21. */
.tm-pre code{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--mz-fg-on-accent);
  white-space:pre;display:block}
.tm-demo code{white-space:pre-wrap;overflow-wrap:anywhere}
.tm-code{font-family:var(--mono);font-size:.92em;padding:2px 6px;border-radius:5px;
  background:rgba(239,233,220,.09);color:var(--bone-cream)}
.tm-h3{margin-top:34px}
.tm-p{max-width:62ch}
.tm-list{margin:14px 0 0;padding-left:20px;max-width:62ch}
.tm-list li{margin:0 0 9px;font-size:14.5px;line-height:1.65;color:var(--steel)}


/* ---- STEP THREE IS A DARK TERMINAL ON A LIGHT PAGE ----

   THE DEFECT THIS CLOSES. The whole block above was first written against the
   dark dashboard palette and shipped onto /lamella/connect/, which is a LIGHT
   page on bone cream. The Hold still button rendered cream on cream and was
   invisible, the body copy was #B8C5D6 on #EFE9DC at roughly 1.5:1, and two of
   the three drawn cards were near blank. Every test passed, because they
   checked that the brand accent was not used as type and never checked the
   type against the background it actually sits on. Browser QA caught it.

   Step three's card is deliberately dark, so everything drawn INSIDE it needs
   the opposite palette from steps one and two. Scoped by .lw-svg-dark on that
   one svg rather than by nth-child, so reordering the steps cannot silently
   repaint the wrong card. */
.lw-svg-dark .lw-bar{fill:rgba(239,233,220,.08)}
.lw-svg-dark .lw-line{fill:rgba(239,233,220,.5)}
.lw-svg-dark .lw-faint{fill:rgba(239,233,220,.22)}
.lw-svg-dark .lw-type{fill:rgba(239,233,220,.7)}
.lw-svg-dark .lw-btn-label{fill:rgba(239,233,220,.8)}
.lw-svg-dark .lw-dot-a{fill:var(--marrow-red-glow)}
.lw-svg-dark .lw-prompt{fill:var(--marrow-red-glow)}
.lw-svg-dark .lw-chip{fill:rgba(139,24,40,.3);stroke:var(--marrow-red-glow)}
.lw-svg-dark .lw-chip-dot{fill:var(--marrow-red-glow)}

/* ---- terminal page, same light surface, same defect ---- */
.tm-code{background:rgba(10,9,8,.07);color:var(--bone-black)}
.tm-p{color:var(--steel)}
.tm-h3{color:var(--bone-black)}


/* ---- THE WALKTHROUGH ON THE DARK GROUND ----

   Everything above was first tuned for a bone cream page and used literal
   rgba(255,255,255,...) card fills and rgba(10,9,8,...) strokes. Those do not
   flip, so on the dark ground they rendered as white boxes. They are now on
   tokens: --bone-white is the card (#171411 dark), --bone-black is the button
   fill and the light ink (#F2EDE3 dark), --line is the hairline.

   .lw-btn keeps --bone-black as a FILL, which inverts to the light value and
   is correct: a light button on a dark card. Its label then needs the dark
   ink, which is why lw-btn-label is a near black rgba rather than a token.

   Step three stays a terminal and goes fully black so it still reads as a
   different kind of surface from the two cards beside it. */


/* =========================================================================
   THE NUMBERED SPINE, STEP 1 TO STEP 5

   WHY THE NUMBER IS INSIDE THE HEADING. A gym owner who is not technical must
   never have to work out which step they are on, and a screen reader user must
   hear the number as part of the step's name rather than as a stray label
   floating beside it. So .st-num is a span inside the h3, which puts it in the
   accessible name, and the ol keeps the list semantics underneath.

   COLOUR, MEASURED NOT REASONED. This page is stamped dark, so the tokens
   below resolve to the dark values: --bone-cream is the page ground #0A0908,
   --bone-white is a raised card #171411, --bone-black is the light ink
   #F2EDE3, --steel is #A8B4C4 and --marrow-ember-text is #E08894. A step sits
   on the page ground and the panels and cards inside it are the raised layer,
   so every type colour in this block is measured against #0A0908: ink 17.06:1,
   steel 9.47:1, ember 7.69:1. Solid --marrow-red is 1.62:1 as type on this
   ground and appears here only as a border. Red points, red never colours a
   word. tests/lamella-connect-steps.test.mjs recomputes every one of those
   ratios from the token table rather than trusting this comment.
   ========================================================================= */

.st-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.st-step {
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-top: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-4) var(--space-4) var(--space-5);
  /* A GRID ITEM DEFAULTS TO min-width: auto, WHICH IS ITS MIN CONTENT WIDTH.
     Step 1's Claude Code panel holds a pre with white-space: pre, so that pre
     has a min content width of a whole unbroken command. The pre already sets
     overflow-x: auto and would scroll itself, but it never got the chance:
     the grid item refused to shrink under the pre, grew to the command's full
     width, and dragged the page with it. At 375 the body went to 583 and the
     entire five step setup ran off the right edge. Zero here lets the item
     take the track width and hands the overflow back to the pre, which is the
     one element built to carry it. Costs nothing on the paths that already
     fit, since the item only shrinks when it otherwise would not. */
  min-width: 0;
}
.st-h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin: 0 0 var(--space-2);
}
/* The number reads as a number: mono, spaced, on its own line above the title.
   A size larger than the shared .cx-step-num eyebrow on purpose. On this page
   the number is the wayfinding, not a decoration, and a reader who has lost
   their place needs to find it without hunting. */
.st-num {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-ember-text);
  margin: 0 0 10px;
}
.st-what {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--bone-black);
  max-width: 68ch;
  margin: 0 0 10px;
}
.st-for {
  font-size: 16px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 68ch;
  margin: 0 0 var(--space-3);
}
.st-body {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 68ch;
  margin: 0 0 var(--space-2);
}
.st-body strong { color: var(--bone-black); font-weight: 600; }

/* The one line recap of the step, the same sentence every Lamella surface
   prints. A left rule rather than a fill, so it reads as an aside. */
.st-recap {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 68ch;
  margin: 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: 3px solid var(--marrow-red);
}
.st-recap strong { color: var(--bone-black); font-weight: 600; }

.st-choices,
.st-bounds {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  max-width: 68ch;
}
.st-choices li,
.st-bounds li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--steel);
  padding: 12px 0 12px var(--space-2);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--marrow-red);
}
.st-choices li:last-child,
.st-bounds li:last-child { border-bottom: 0; }
.st-choices strong,
.st-bounds strong { color: var(--bone-black); font-weight: 600; }

.st-panels {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.st-owner { margin-top: var(--space-3); }

.st-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* The step headings are h3, so everything inside a step drops one level to
   h4. These two rules give h4 the treatment the shared stylesheet gives h3
   inside the same components, since those selectors are tag scoped. */
.st-step .cx-card h4 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bone-black);
  margin: 0 0 8px;
}
.st-step .cn-values { margin-bottom: var(--space-3); }

.cn-hero-sub { font-size: 17px; }

@media (max-width: 720px) {
  .st-step { padding: var(--space-3) var(--space-3) var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .st-step,
  .st-actions .btn-primary,
  .st-actions .btn-secondary,
  .as-pill,
  .as-dismiss { transition: none; }
  .st-actions .btn-primary:hover,
  .st-actions .btn-primary:active { transform: none; }
}

/* =========================================================================
   NO DEAD CONTROLS WITH JAVASCRIPT OFF
   Every control on this page is driven by the inline scripts at the bottom of
   the document. The served markup marks each one js-only and the root element
   ships with no-js, which a single head script removes before first paint. So
   a reader with JavaScript sees no change at all, and a reader without it is
   never shown a button that would do nothing when pressed. A noscript sentence
   sits beside each hidden control saying what to do instead.

   THE THREE CLAUDE PATH PANELS ARE NOT CONTROLS. They are plain markup, they
   carry no js-only class, and they stay fully readable either way. That
   property is pinned by a test and this rule must never reach them.
   ========================================================================= */
.no-js .js-only { display: none; }

/* The chooser's visible answer. It sits directly under the three buttons in
   Step 1 because that is where the reader is looking when they press one, and
   the paths it narrows live down in Step 2. A press that only changed what is
   off screen read as a press that did nothing.

   IT IS A CHIP, NOT A RULED LINE. The first cut gave it the red left rule this
   page uses for st-recap and every st-choices item. Measured in a browser it
   butted straight into the three descriptions below it and read as the first
   bullet of that list, which is a different sentence than the one it says. A
   bordered chip with its own ground reads as a status, which is what it is.

   It is deliberately NOT a live region. cn-live down in Step 2 already makes
   the polite announcement, and two live regions on one press would say the same
   thing twice to a screen reader. This line is the sighted half of the same
   feedback. */
.st-picked {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--bone-black);
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 68ch;
  margin: var(--space-2) 0 var(--space-3);
  padding: 8px 12px;
}
/* Nothing to say is said with nothing. An empty chip is a border with no
   sentence in it, which is worse than no chip. */
.st-picked:empty { display: none; }

/* =========================================================================
   THE ONE PRESS SETUP CARD
   Sits above the five numbered steps and offers the same connection in a
   single press. Zero new custom properties, zero hex literals, and every
   colour resolves through the dark remap this page is stamped with.

   THE BUTTON IS A .cn-copy. That is deliberate and it is the whole point of
   the class list. The copy handler at the bottom of the page already binds
   every [data-copy-target] on the document, already swaps the .cn-copy-label
   to Copied, already announces into cn-live, and already falls back to
   selecting the text when the clipboard refuses. A second clipboard path
   would be a second thing to keep correct. So this card adds shape and
   nothing else, and the label span carries the state word rather than the
   action word, because the shared handler resets that span to Copy.
   ========================================================================= */
.as {
  padding: var(--space-5) 0 0;
}
.as-card {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--marrow-red);
  border-radius: 2px;
  padding: var(--space-4);
  max-width: 72ch;
}
.as-h {
  font-family: var(--display);
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.2;
  color: var(--bone-black);
  margin: var(--space-1) 0 var(--space-2);
}
.as-what {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0 0 var(--space-3);
}
.as-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
/* Bigger than a code block's Copy chip, because this one is the primary way
   through the page rather than a convenience beside a value. */
.as-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  padding: 11px 16px;
  border-radius: 999px;
}
.as-pill-text {
  letter-spacing: 0.1em;
}
/* The state word, dimmer than the action so the pill reads as one label with
   a status on the end rather than as two competing buttons. It is the span
   the shared handler owns. */
.as-pill .cn-copy-label {
  opacity: 0.72;
}
.as-pill:hover .cn-copy-label {
  opacity: 1;
}
/* Quiet by construction. Dismissing is not an action anyone should be pushed
   towards, so it is type on the card ground with a hairline, never a fill. */
.as-dismiss {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 7px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.as-dismiss:hover {
  color: var(--bone-black);
  border-color: var(--steel);
}
.as-pill:focus-visible,
.as-dismiss:focus-visible {
  outline: 3px solid var(--marrow-red);
  outline-offset: 2px;
}
.as-line-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 6px;
}
/* The sentence itself, readable rather than hidden. It wraps, because a coach
   reading it before they hand it over should not have to scroll sideways. */
.as-line {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  word-break: normal;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}
.as-fallback {
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
  margin: var(--space-3) 0 0;
}
.as-noscript {
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
  max-width: 72ch;
}
@media (max-width: 720px) {
  .as-card { padding: var(--space-3); }
  .as-row { gap: var(--space-1); }
}