/* /wire illustration (RTSC pending). One diagram, under the steps in "What you are
 * approving". Same conventions as product-ill.css: mono keys, lowercase muted caps,
 * lucide path data, 1px rules as connectors.
 *
 * Why only one: this page's blocks are codeblocks and a numbered step ladder, and both
 * of those already ARE diagrams. The single sentence on the page carrying an abstract
 * fact is step 4's folder matching, so that is the only place a picture beats the text.
 */
.ill.wi { display: flex; align-items: center; justify-content: center; padding: 18px 16px; }
.wi-w { width: 100%; }
.wi-key { font: 500 11.5px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--fg); letter-spacing: .02em; }
.wi-sub { font: 400 10.5px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); letter-spacing: .02em; }

/* Folder -> project. THREE columns, and the arrow lives in the SAME grid row as the
 * pair it joins, so it can never drift off the rows' centres when anything above it
 * changes height. The first draft of a sibling diagram was a hand-placed SVG viewBox
 * and missed its targets by 45px; do not go back to that. */
.wi-b { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); align-items: center;
  row-gap: 9px; width: 100%; }
.wi-b .wi-cell { display: flex; align-items: center; gap: 7px; padding: 8px 10px; min-width: 0;
  border-radius: 4px; border: 1px solid var(--panel-line); }
.wi-b .wi-cell svg { width: 12px; height: 12px; flex: none; color: var(--secondary); }
.wi-b .wi-cell.wi-hit { border-color: var(--rt-claude); }
.wi-b .wi-cell.wi-hit svg { color: var(--rt-claude); }
/* The unresolved row is dashed on BOTH the cell and its arrow: a solid arrow into a
 * dashed box says the link was made and then doubted. */
.wi-b .wi-cell.wi-ask { border-style: dashed; }
.wi-b .wi-arrow { position: relative; height: 1px; background: var(--sep); }
.wi-b .wi-arrow::after { content: ""; position: absolute; right: 0; top: -3px;
  border-left: 6px solid var(--sep); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.wi-b .wi-arrow.wi-dash { background: none; border-top: 1px dashed var(--sep); }
.wi-b .wi-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------------
 * SECTION SYSTEM v2 (operations/design-system.md §747), applied to /wire.
 *
 * This page was never part of the 2026-08-19 roll-out, so its own components
 * (.connect-tab, .connect-hint, .wsteps, .codeblock) were still on the pre-v2
 * scale: sizes off the six steps, radii off the three, and --card/--card-border
 * instead of the measured elevation ladder.
 *
 * Wire-only classes are corrected outright. `.codeblock` is SHARED with the six
 * /guides pages, which have not been through v2 yet, so its correction is scoped
 * to this page rather than changing pages nobody has measured. That scoping is a
 * DEBT, not a preference: when the guides go through v2, this block moves into
 * styles.css and the scope comes off.
 * ---------------------------------------------------------------------- */

/* Elevation: a panel on the page is --panel over --bg (1.22 measured), never
   --card, which is a pre-v2 token sitting 1.05 off the page and reads painted-on. */
.wi-b .wi-cell { background: var(--panel); border-color: var(--panel-line); }

/* Radius: 4 (marks) · 10 (panels) · 100 (pills). 6 and 8 are not steps. */
.block .codeblock { border-radius: 10px; background: var(--panel); border-color: var(--panel-line); }
.block.band .codeblock { background: var(--panel-sunk); }
/* A tab is a control, so it needs a fill STEP as well as an outline: copying the
   badge's transparency left the unselected tabs at 1.12:1 in light, which the
   border walk calls a rumour rather than a border. --panel is the measured step. */
/* The gap under a fact line belongs to .mf, which is 32 on desktop and 22 on a phone.
   The strip's own 26px top margin collapsed to max(22,26)=26 at =<640, which is the
   only section on the page that was not 22. Zero here, and the one rule governs. */
.connect-tabs { margin-top: 0; }
.connect-tab { border-radius: 4px; font-size: var(--t-value);
  background: var(--panel); border-color: var(--panel-line); }
/* RTSC-815 — the page sheet no longer restates the selected fill. styles.css now
   carries the canon step (--surface + --surface-border); repeating --fg here was
   what made the override win and paint the loud one. */
.connect-tab[aria-selected="true"] { background: var(--surface); border-color: var(--surface-border); }

/* Type: mono is for values and identifiers. A hint is a sentence, so it is prose,
   which is Inter 14 — not mono, and not the 12.5 whisper the retired kicker used. */
/* Prose ink, not a dimmer one. A muted line under a block is the retired kicker in
   a quieter costume; a hint earns its secondariness from position, not from ink. */
.connect-hint { font-size: var(--t-prose); color: var(--ink); }
.connect-lead { font-size: var(--t-prose); color: var(--ink); }
ol.wsteps h3 { font-size: var(--t-lead); }
ol.wsteps p { font-size: var(--t-prose); }
ol.wsteps > li::before { background: var(--panel); border-color: var(--panel-line); }
ol.wsteps > li::after { background: var(--panel-line); }

/* A panel INSIDE a band goes DOWN, not up: --band and --panel are the same value
   (#202020 dark), so a --panel cell on a band is a 1.00 step, i.e. invisible. The
   ladder's answer is --panel-sunk, the same move .block.band .card already makes. */
.block.band .wi-b .wi-cell { background: var(--panel-sunk); }
.block.band ol.wsteps > li::before { background: var(--panel-sunk); }

/* ========================================================================
 * HERO — "how easy is this to start"
 *
 * NOT another status card. The subject is the EFFORT, so the object is split by
 * the only line that matters: what you do, and what happens without you. One
 * command above the rule, three outcomes below it, and the outcomes light
 * themselves in sequence while the command sits still. Nothing else on the site
 * cascades, which is the point: the gesture belongs to the one page whose claim
 * is that you do one thing and the rest arrives.
 * ==================================================================== */
.wire-visual { flex: 0 1 420px; min-width: 0; }
/* min-width:auto on this flex item made the card's fixed 420px the LINE's min-content,
   so at =<430 the head, the lede and the terminal all rendered 420 wide inside a 354
   container and were clipped off the right edge (+48px at 390, +78px at 360) WITHOUT
   the page scrolling, which is why no scrollWidth check ever caught it. The card takes
   its width from the track now and caps at 420 instead of setting it. */
/* The head's band is a shared rule now (styles.css, .phead-row min-height): every head
   that carries a hero object is the same height on every page, so this page no longer
   needs its own padding, and the terminal cannot reach the header. */

.start-card { position: relative; width: 100%; max-width: 420px; background: var(--panel-sunk);
  border: 1px solid var(--panel-line); border-radius: 10px; display: grid; overflow: hidden; }
.sc-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--panel);
  border-bottom: 1px solid var(--panel-line); }
.sc-bar i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sc-bar i:nth-child(1) { background: #ff5f57; }
.sc-bar i:nth-child(2) { background: #febc2e; }
.sc-bar i:nth-child(3) { background: #28c840; }
.sc-bar .sc-title { flex: 1; text-align: center; margin-right: 30px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 var(--t-label)/1 'JetBrains Mono', ui-monospace, monospace; color: var(--secondary); }

/* A terminal is a DENSE block of consecutive lines. One leading for everything inside
   it, and the only vertical air is the blank line a real session leaves between a
   command and the next prompt.
   EVERY COMMAND AND ITS OUTPUT IN HERE IS VERBATIM, observed on 2026-08-20 rather than
   remembered: `claude mcp add` and `claude mcp list` in a throwaway directory.
   RTSC-732 removed a third pair, `claude mcp login retasc` and its "Starting
   authentication…" line. It had been observed too, but only against a local stub that
   answers 401 + WWW-Authenticate with authorization-server metadata, and Retasc does
   NOT answer that way. It does not implement the MCP authorization spec, so no client
   can sign you in through it, and a command that runs only against a stub is a command
   this page must not show. The `# restart` line is the mock's own annotation, marked as
   a comment because nothing printed it. This picture used to carry three invented ticks
   as well; it does not now. */
/* 11px, the label tier: at 12.5 the two lines that matter both wrapped, and the one
   that matters most broke between its tick and the word Connected. A terminal mock is
   a screenshot of small type, so the smaller step is also the truer one. */
.sc-body { padding: 14px 16px 15px; font: 400 var(--t-label)/1.75 'JetBrains Mono', ui-monospace, monospace;
  color: var(--secondary); }
.sc-p { color: var(--muted); margin-right: 9px; }
.sc-in { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.sc-out { color: var(--secondary); white-space: pre-wrap; word-break: break-word; }
.sc-out .ok { color: var(--success); white-space: nowrap; }
.sc-gap { height: 1.75em; }
/* The restart is the one beat in this flow with no command and no output to show it,
   which is exactly why it has to be drawn: a terminal that jumps from `add` to a
   Connected `list` reads as one continuous run and hides the step. It is set as a shell
   comment, at --muted, because that is the only honest register for a line nothing
   printed: the two lines around it were observed verbatim, this one is the mock's own
   annotation and must not pass for output. */
.sc-note { color: var(--muted); white-space: pre-wrap; word-break: break-word; }

/* ========================================================================
 * SPLIT SECTION: steps left, the approve screen right (design-system §Rows:
 * an illustration beside a text column FILLS its track and stretches across
 * the rows beside it, so both columns start and end together).
 * ==================================================================== */
.block.split > .mf { grid-column: 1; }
/* 32, not the component's own 28: every other section on the site puts 32 between the
   fact line and the body below it (.block > .mf), and the split grid zeroes that margin
   so the list has to carry it. Measured 28 here against 32 everywhere else. */
.block.split > ol.wsteps { grid-column: 1; max-width: none; margin-top: 32px; }
/* Below 900 the split collapses to a normal block and .mf carries the gap again (22px),
   so the list must stop carrying its own or the two stack: measured 32 here against 22
   in every other section on a phone. */
@media (max-width: 900px) { .block.split > ol.wsteps { margin-top: 0; } }
/* A PRODUCT SHOT is its own object, not a diagram in a well: /product's claim
   ticket and /pricing's credit slip both sit bare on the page. Wrapping the approve
   screen in a stretched .ill left 247px of measured slack around a 186px card,
   which is what "a small thing floating in a big box" looks like. It hugs its
   content and starts level with the FACT LINE instead — both columns of the grid
   open on the same row, which is the split section's own rule. */
/* CENTRED in its track, not pinned to the top. /index's split section stretches its
   illustration so both columns end together; a product shot cannot stretch, so the
   only choice here is WHERE its slack goes. Pinned to the top it left 29px above and
   190px below, which reads as an object that fell rather than one that was placed.
   Centred splits the same slack 98/98. */
/* The left column is ONE grid item (.wcol), so this only ever has to be placed
   beside it. It used to span `2 / span 2` against a column of four separate
   items, and a grid row is sized by the tallest thing in it — the illustration
   pushed its own height into those rows and prised the column apart, 61px and
   75px of dead air where the section uses 22. `2 / -1` was worse: with no
   EXPLICIT rows, -1 resolves to the first line and the illustration landed above
   the section header. */
.block.split > .consent-screen { grid-column: 2; grid-row: 2; align-self: start; }
.block.split > .wcol { grid-column: 1; grid-row: 2; min-width: 0; }
/* .onecmd's own 4px assumes it follows a section header, not a lede. Inside the
   column it follows prose, so it takes the 22px this section uses between the
   header and the lede — measured off .sechdr's own margin-bottom, not chosen. */
.block.split > .wcol > .onecmd { margin-top: 22px; }
/* Once the split collapses (=<900) the screen follows the step list in normal flow and
   had NO separation from it at all — measured 0px against the last step's text at every
   width from 900 down. It takes the same gap the site puts between a text block and the
   object under it, 32 and 22. */
@media (max-width: 900px) { .block.split > .consent-screen { margin-top: 32px; } }
@media (max-width: 640px) { .block.split > .consent-screen { margin-top: 22px; } }
/* --panel, not --panel-sunk: this sits on the PAGE, where sunk is a 1.01 step, i.e.
   none. .credit-slip and .claim-ticket are both --panel on the page (1.22) and this
   is the same kind of object. (The terminal above stays sunk on purpose — a terminal
   reading darker than the page is the thing it is imitating.) */
.consent-screen { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px; }
/* Inside a band it steps DOWN, exactly as `.block.band .card` already does
   (styles.css). The elevation ladder: --bg -> --panel is 1.22 up, but --band IS
   --panel in dark (#202020), so a panel keeping its page fill inside a band is
   1.00 against its own ground — grey on grey, an invisible box. --panel-sunk
   (#0c0c0c) is the 1.20 step down the ladder defines for this exact join.
   Light is unaffected: there --panel-sunk and --panel are the same cream and the
   separation is border-carried. */
.block.band .consent-screen { background: var(--panel-sunk); border-color: var(--panel-line); }
.consent-body { padding: 20px 20px 17px; }

/* The approve screen itself. A product shot, not a diagram: it is literally the one
 * browser screen the flow opens, and it is reproduced from dash/src/components/
 * CliAuthPage.tsx rather than designed here; the words are that component's. */
.consent { width: 100%; display: grid; gap: 0; }
.consent-t { font: 500 var(--t-prose)/1.35 'Inter', sans-serif; color: var(--fg); }
.consent-s { font: 400 var(--t-label)/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--secondary);
  margin-top: 5px; padding-bottom: 13px; border-bottom: 1px solid var(--sep); }
/* PROSE, where the org/project key-value rows used to be (RTSC-732). Those rows drew an
   OAuth consent screen naming the org and project being granted, and no such screen
   exists: the browser step is a sign-in approval, and the org and project are settled
   afterwards, in the terminal, through the questions `bind` hands the agent. The real
   screen carries a sentence, so this carries a sentence, in the same 13px band the rows held,
   so the card's rhythm is unchanged. */
.consent-note { font: 400 var(--t-prose)/1.5 'Inter', sans-serif; color: var(--secondary);
  padding: 13px 0; }
.consent-act { display: flex; align-items: center; gap: 12px; padding-top: 13px;
  border-top: 1px solid var(--sep); }
/* One button, no Cancel (RTSC-732). The real screen has no decline control on purpose:
   its own words are "close this tab and nothing happens", so drawing a Cancel next to
   Approve would invent an affordance the page does not have. */
.consent-allow { font: 500 var(--t-label)/1 'JetBrains Mono', ui-monospace, monospace; color: var(--bg);
  background: var(--fg); border-radius: 4px; padding: 8px 15px; }
.consent-rev { margin-left: auto; font: 400 var(--t-label)/1 'JetBrains Mono', ui-monospace, monospace;
  color: var(--muted); }

/* No floor. Reserving for the tallest panel is what left dead band under the short
   ones, twice. A tab switch changing the section height is normal for tabbed content;
   empty space under the content is not, and that is the thing being complained about. */


/* CONTENT sets this width, not the column. Filling the column to reach the line the
   section header ends on left a 57-character command sitting in a 1000px box, which
   reads as an empty field rather than as a command. 660 clears the longest line here
   (the Claude Code add, ~430px of glyphs plus 16 left and 68 right for the Copy
   button) with room to breathe, and every panel fits inside it without scrolling. */
/* 700 is the longest line here measured (the VS Code entry) plus its padding and the
   Copy button. A desktop row that scrolls is not allowed, and 660 made that one do it. */
.block .onecmd { max-width: 704px; }

/* Once .phead-row flips to a column (styles.css, =<620px) that 420px basis stops sizing
   the terminal's WIDTH and starts sizing its HEIGHT — 142px of dead band under the hero
   on a phone, measured. Same trap and same reset .phead and .credit-visual already carry
   there; it lives here because this sheet loads last and would otherwise win. */
@media (max-width: 620px) { .wire-visual { flex: none; } }

/* Entry order (RTSC-807): with ?via=web the page swaps "Other ways in" and "One command"
   (inline script after the pair) and the band moves with the position. Both are hidden
   until the swap runs so the reader never sees them jump; the script clears this inline. */
html[data-entry="web"] #one-command, html[data-entry="web"] #other-ways { visibility: hidden; }
/* A tab on a band steps DOWN, like every other panel on a band: --panel would vanish into it. */
.block.band .connect-tab:not([aria-selected="true"]) { background: var(--panel-sunk); }


/* --- RTSC-815: the three doors ------------------------------------------
 * The MCP door is the ADDRESS and nothing else. It carried the Cursor and VS Code
 * files as two JSON cells, which was sixteen lines to say what one line of the
 * `files` formula says, and equalising the pair's heights (VS Code needs `type`,
 * Cursor does not) left a void inside the shorter one. A reader with a client
 * pastes the address and asks the agent to connect (Andrey, 2026-09-03).
 * ---------------------------------------------------------------------- */

/* The browser door's one act. Sits on the column's left edge like every other
   control on this page (design system §The phone stack is left-aligned). */
.ow-act { margin-top: 18px; display: flex; }

/* Under 640 the pair stacks: two JSON blocks side by side at 320 wrap the URL
   into four lines each and the cells stop being readable at a glance. */
@media (max-width: 640px) {
  /* .btn already centres its own label, which is what the canon asks a full-width
     filled primary to do on a phone; only the width needs saying here. */
  .ow-act, .ow-act .btn { width: 100%; }
}

/* A 26-character address in a 704px bar is the "small thing floating in a big box"
   this sheet already names twice (the approve screen's 247px of slack). The lede is
   34em and #one-command's block measures 459px inside its .wcol, so the door's own
   block had no business being wider than the sentence above it. Prose and the thing
   it introduces now share one column; the invite cards still span, which is what the
   page does under every other 34em lede (.cards3 below this one). */
.connect-panel > .onecmd, .connect-panel > .ow-act { max-width: 34em; }

/* A door needs a FLOOR. The MCP panel ended on the address with nothing under it, so
   the panel just stopped; and with the block held to 34em the right half of the section
   carried no structure at all. The closing fact row takes a hairline across the full
   panel, which is the `.ill .call` idiom (a squared surface with a monospace gutter
   label over a rule) rather than a new one. `--surface-border` is the sheet's hairline;
   on a band the panel is sunk, so the line steps with it. */
.connect-panel > .onecmd + .s-formula,
.connect-panel > .ow-act + .s-formula { border-top: 1px solid var(--surface-border); padding-top: 17px; }