/* work.css — the guide window (work.js, pane.js ?work=1). 21 October 2026. ACTIVATION-SPEC-21Oct.md §3.
   Top to bottom: the row heading, the fixed player, the steps (only they scroll), the one Credential row, the red button.
   The Credential's own colours (registry.css, credential.css, pane.css). */

/* the guide is the whole window: nothing of the Credential page shows but the guide itself */
html.cs-work body { margin: 0; background: #FBF7EB; }
html.cs-work body > *:not(.cspane--work):not(.csbefore) { display: none !important; }
html.cs-work body > .cspane--work { display: flex !important; }

.cspane--work { position: fixed; inset: 0; flex-direction: column; box-sizing: border-box; padding: 10px 14px 8px; background: #FBF7EB; color: #12293F; overflow: clip; }   /* clip, not hidden: nothing (a focus, scrollIntoView) may scroll the guide itself; only its steps scroll (W9) */
.cspane--work .cspane__head { flex: none; }
/* D2 (21 Oct 2026): the player is the guide's helper, not its page: at most ~36% of the window's height, 16:9, centred, so the
   open step's instruction and its button stay in view (860 × 813, a 1280 × 720 screen) */
.cspane--work .cspane__film { width: min(100%, calc(36vh * 16 / 9)); margin: 0 auto; }
.cswork__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin: 0 0 .6rem; }
.cswork__plat { font-size: 13px; color: #5A4A2A; }
/* B1/B2: the guide's two quiet controls, at the heading's right (no height added) */
.cswork__tools { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: .8rem; margin: .3rem 0 0; line-height: 1.2; }
/* the heading: one line; the row name whole, the platform gives way ("…") */
.cspane--work .cswork__h { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
.cspane--work .cswork__h .cspane__name { flex: none; }
.cspane--work .cswork__h .cswork__plat { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cswork__tool { font: inherit; font-size: 13px; color: #12293F; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: #C9A24D; text-underline-offset: 3px; cursor: pointer; }
.cswork__tool:hover, .cswork__tool:focus-visible { color: #5A4A2A; }
html.cs-watch .cswork__tools { display: none; }
/* the watch-only chapter after the steps (FTV How a request works): its own class (cspane__x is the pane's round close button) */
.cspane--work .cspane__steps > .cswork__extra { display: block; width: auto; list-style: none; margin: 0; padding: .6rem 0 .4rem; background: none; border-radius: 0; }
.cswork__note { margin: 0 0 .6rem; padding: .5rem .7rem; border-radius: 6px; background: #FFF1CF; border: 1px solid #C9A24D; font-size: 14px; line-height: 1.35; }
.cswork__note[hidden] { display: none; }
.cspane--work .cspane__steps { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: .6rem 0 .4rem; }
.cspane--work .cspane__s { scroll-margin-top: 4px; }
.cspane--work .cspane__t { text-decoration: none; }
/* W4: a step done: its number becomes a check */
.cspane__s--done > .cspane__h .cspane__n { position: relative; background: #21563A; color: transparent; }
.cspane__s--done > .cspane__h .cspane__n::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FBFAF7; font-size: 14px; }
.cspane__s--done:not(.cspane__s--open) > .cspane__h { color: #4A5868; }
.cspane--work .cspane__s--open { background: #FFFDF7; box-shadow: inset 3px 0 0 #C9A24D; border-radius: 4px; }
.cspane--work .cspane__say { flex: 1 1 100%; margin: 0 0 .35rem; font-size: 15px; line-height: 1.45; color: #12293F; }
.cswork__acts { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 .2rem .5rem 2.35rem; }
.cswork__acts[hidden] { display: none; }
.cswork__check { margin: 0 .2rem .7rem 2.35rem; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.cswork__check[hidden] { display: none; }
/* 23 Oct 2026: the Setup Assistant's panel asks inside the Turn on step (setup.js): the step's own Done, next step gives way meanwhile */
.cspane--work .cspane__s--setup > .cswork__acts { display: none; }
.cspane--work .cspane__s > .setup { margin: .2rem .2rem .6rem 2.35rem; }
.cspane--work .cspane__s:not(.cspane__s--open) > .setup { display: none; }
.cswork__check--found { color: #21563A; font-weight: 600; }
/* a finished step folds to its headline and ✓; its Found line shows again when it is opened (problems always show) */
.cspane--work .cspane__s--done:not(.cspane__s--open) > .cswork__check--found { display: none; }
.cswork__check--differs, .cswork__check--two, .cswork__check--error { color: #7A2620; }

/* W7: the one Credential row, under the steps: the payoff lands here */
.cswork__one { flex: none; border-top: 1.5px solid #C9A24D; padding: .55rem .2rem .2rem; border-radius: 0 0 6px 6px; transition: background 1.2s ease; }
.cswork__one:empty { display: none; }
.cswork__rowline { display: flex; align-items: baseline; gap: .6rem; }
.cswork__rn { flex: 1; min-width: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.cswork__st { flex: none; font-weight: 700; font-size: 15px; }
.cswork__st.st-set { color: #21563A; } .cswork__st.st-notset { color: #7A2620; } .cswork__st.st-checking { color: #5A4A2A; }
.cswork__read, .cswork__count { margin: .2rem 0 0; font-size: 13px; color: #4A5868; }
.cswork__count { font-weight: 600; color: #12293F; }
.cswork__one .guide__acts { margin: .5rem 0 0; }
.cswork__one--wash { background: rgba(201,162,77,.30); box-shadow: inset 0 0 0 1px #C9A24D; }
@media (prefers-reduced-motion: reduce) { .cswork__one { transition: none; } }
.cspane--work .skx { flex: none; max-width: none; margin: .5rem 0 0; }

/* W1: the row's video large, once; nothing else until Start steps */
.cswork__watch { display: flex; gap: .6rem; justify-content: center; margin: .7rem 0 0; }
.cswork__watch[hidden] { display: none; }
html.cs-watch .cspane--work .cspane__steps, html.cs-watch .cspane--work .cswork__one, html.cs-watch .cspane--work .skx { display: none; }
html.cs-watch .cspane--work .cspane__film { width: min(100%, calc((100vh - 150px) * 16 / 9)); margin: 0 auto; }

/* W3: the step's spot, over the paused player */
.cspane--work .cswork__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #12293F; z-index: 3; pointer-events: none; }
.cspane--work .cswork__still[hidden] { display: none; }
html.cs-watch .cspane--work .cswork__still { display: none; }

/* the sticky video of the docked pane is not needed here: the head never scrolls */
.cspane--work .cspane__head { position: static; }

/* THE REVIEW VIEW (no ?work): a row that needs the holder shows its state and one Start; on a phone, its video and Email link */
.row__start { margin: .55rem 0 .2rem; }
.row__start .guide__acts { margin: 0; }
.row__start-phone { display: none; }
@media (max-width: 767px) { .row__start-go { display: none; } .row__start-phone { display: block; } .row__start-phone .doit__phone { display: flex; } }

/* H2–H4: the ticket, before it is sent */
.skx-t { box-sizing: border-box; margin: .5rem 0 0; padding: .7rem .8rem; border: 1.5px solid #C9A24D; border-radius: 8px; background: #FFFDF7; color: #12293F; font-size: 14px; line-height: 1.4; max-height: 70vh; overflow-y: auto; }
.skx-t__h { margin: 0 0 .4rem; font-weight: 700; font-size: 15px; }
.skx-t__facts { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .7rem; margin: 0 0 .6rem; }
.skx-t__facts dt { color: #4A5868; } .skx-t__facts dd { margin: 0; overflow-wrap: anywhere; }
.skx-t label { display: block; font-weight: 600; margin: .3rem 0 .2rem; }
.skx-t textarea { box-sizing: border-box; width: 100%; min-height: 3.2em; font: inherit; padding: .4rem .5rem; border: 1px solid #B9AE95; border-radius: 6px; background: #fff; }
.skx-t__shot img { display: block; max-width: 100%; max-height: 160px; margin: .4rem 0; border: 1px solid #E3DCCB; border-radius: 4px; }
.skx-t__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.skx-t__say { margin: .5rem 0 0; }
.skx-t__say:empty { display: none; }

/* D2 (21 Oct 2026): compact chrome so the open step fits beside the player at 720 px tall: a smaller heading, headline rows,
   the one row on one line, a slimmer Sidekick bar */
.cspane--work .cswork__h { margin: 0 0 .4rem; }
.cspane--work .cspane__h { min-height: 38px; padding: .3rem .2rem; }
.cspane--work .cspane__d { padding-bottom: .4rem; }
.cspane--work .cswork__acts { padding-bottom: .35rem; }
.cspane--work .cswork__one { padding: .4rem .2rem .1rem; }
.cspane--work .cswork__read { display: inline; margin: 0 0 0 .5rem; }
.cspane--work .cswork__rowline { display: inline-flex; width: auto; }
.cspane--work .skx { min-height: 40px; margin: .35rem 0 0; }
.cspane--work .skx .skx-help { width: 32px; height: 32px; }
/* the one row: its name, its state, when it was read, and (the payoff, R4) the count and Next row. Never cut with an
   ellipsis (coordinator 21 Oct, 448 px guide: "Set · Read 18:11 to…"): each part keeps its words together and the row wraps
   to a second line between parts when the guide is narrow */
.cspane--work .cswork__one > .cswork__rowline, .cspane--work .cswork__one > .cswork__read { vertical-align: baseline; }
.cspane--work .cswork__one { white-space: normal; overflow: visible; text-overflow: clip; }
.cspane--work .cswork__one .cswork__rowline { flex-wrap: wrap; column-gap: .35rem; max-width: 100%; }
.cspane--work .cswork__one .cswork__st, .cspane--work .cswork__one .cswork__read, .cspane--work .cswork__one .cswork__count { white-space: nowrap; }
.cspane--work .cswork__one .guide__acts { white-space: normal; }
/* line 1: the row and its state; line 2: Read time · count, Next row (no separator left dangling at a line's end; it stays in
   the text for screen readers and the text check) */
.cspane--work .cswork__one > .cswork__rowline { display: flex; width: 100%; }
.cspane--work .cswork__one > .cswork__rowline + .cswork__sep { display: none; }
.cspane--work .cswork__one > .cswork__read { margin-left: 0; }
.cspane--work .cspane__say { font-size: 14.5px; line-height: 1.4; }
/* a long record value (TLS reporting's mailto) in a smaller monospace, so a record step fits a 720 px tall guide */
.cspane--work .cspane__d code { font-size: 12.5px; }
@media (max-height: 760px) { .cspane--work .cspane__film { width: min(100%, calc(30vh * 16 / 9)); } .cspane--work .cspane__say { margin-bottom: .2rem; } }
/* a short guide (a 1400×757 screen less the browser's bar): the player gives way so the open step fits whole */
@media (max-height: 700px) { .cspane--work .cspane__film { width: min(100%, calc(25vh * 16 / 9)); } }
/* the count sits inside the done line (pane.js): same baseline, same size as the line */
.cspane--work .cswork__one--set .cswork__count { display: inline; margin: 0; vertical-align: baseline; font-size: inherit; }
.cspane--work .cswork__one--set .guide__acts { display: inline-flex; margin: .3rem 0 0; vertical-align: middle; }
.cspane--work .cswork__sep { margin: 0 .35rem; color: #8A7A55; }
.cspane--work .cswork__count { display: inline; margin: 0; }
.signing__mail { margin-left: .5rem; }
/* ESA step 8: the signing check below Re-measure's result (shown when the records are in place, signing not confirmed) */
.signing { margin: .4rem 0 0; padding-top: .4rem; border-top: 1px solid #E6DFCF; }
.signing .signing__to { margin: .2rem 0; }
.signing .signing__to .doit__verb[hidden] { display: none; }
.signing[hidden] { display: none; }
.signing__say { margin: 0 0 .2rem; font-size: 15px; line-height: 1.4; }
.signing .cswork__check { margin-left: 0; }
/* QA walk 21 Oct 2026 (defect 12): the ticket over the steps list (sidekick.js sets its top and bottom), never pushing them */
.cspane--work .skx-t--over { position: absolute; left: 14px; right: 14px; margin: 0; max-height: none; overflow-y: auto; z-index: 6; box-shadow: 0 6px 22px rgba(18,41,63,.18); }
/* QA walk 21 Oct 2026 (defect 6): a ticked step offers no "Done, next step". Phase 1 verification, 23 Oct 2026: the rule must
   outweigh "Done, next step: alone on its own line" below (.cspane--work .cswork__acts [data-work-done] { display: block }),
   which has the same weight and comes later, so in the browser the button showed on a ticked step (jsdom computes no cascade;
   guide-browser-tests.js checks it in Chrome) */
.cspane--work .cspane__s--done .cswork__acts [data-work-done] { display: none; }
/* QA walk 21 Oct 2026 (defect 10): a long value is one line in a monospace box, cut with an ellipsis, its Copy copying the whole
   value (the full value on hover); never wrapped mid-word */
.cspane--work .cspane__d .doit__kv, .cspane--work .cswork__val { display: flex; flex: 1 1 100%; flex-wrap: nowrap; align-items: center; gap: .4rem; min-width: 0; max-width: 100%; overflow: hidden; }
.cspane--work .cspane__d .doit__kv code, .cspane--work .cswork__val code { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; word-break: normal;
  font: 500 12.5px/1.35 'IBM Plex Mono', ui-monospace, monospace; color: #12293F; background: #FFFFFF; border: 1px solid #E3DCCB; border-radius: 4px; padding: .15rem .4rem; }
.cspane--work .cswork__val { margin: .3rem 0 0; font-weight: 400; }
.cspane--work .cswork__val .copyset__btn { flex: none; }
.cspane--work .cswork__check:has(.cswork__val) { overflow-wrap: normal; }
/* QA walk 21 Oct 2026 (defect 7): a ticked step keeps its number ("4–7" too), white on green, with a small check beside it */
.cspane--work .cspane__s--done > .cspane__h .cspane__n { color: #FBFAF7; overflow: visible; }
.cspane--work .cspane__s--done > .cspane__h .cspane__n::after { content: "\2713"; inset: auto -5px -5px auto; width: 15px; height: 15px; border-radius: 50%; background: #FBFAF7; color: #21563A; font-size: 10px; font-weight: 700; box-shadow: 0 0 0 1.5px #21563A; }
/* defect 18: a procedure row set up: Ready, in green, with "Set-up done" */
.cswork__st.st-ready, .cswork__one--ready .cswork__st { color: #21563A; }
/* QA walk 21 Oct 2026 (re-walk): every part of a step stays inside the step; a one-line value inside it gives way (ellipsis),
   never the step's own words (the signing check's address once pushed its instruction and Open email off the right) */
.cspane--work .cspane__d > * { min-width: 0; max-width: 100%; }
.cspane--work .cspane__d > .signing, .cspane--work .cspane__d > .doit__rec { flex: 1 1 100%; }
.cspane--work .signing .doit__rec { min-width: 0; max-width: 100%; }
/* re-walk 21 Oct: a number that stands for several steps ("4–7", "2–3") fits its badge (a pill), never spills out of the circle */
.cspane--work .cspane__n { min-width: 26px; width: auto; padding: 0 6px; box-sizing: border-box; border-radius: 13px; white-space: nowrap; }
/* re-walk 21 Oct: the steps list scrolls up and down only; it never slides sideways (a step wider than the list once hid every number) */
.cspane--work .cspane__steps { overflow-x: clip; }

/* BEFORE YOU START (before-start.js; operator-directed 21 Oct night): once before the first row, again from the guide's heading */
.csbefore { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(18,41,63,.55); }
.csbefore__card { width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; background: #FBFAF7; border: 1px solid #C9A24D; border-radius: 10px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 10px 30px rgba(18,41,63,.25); color: #12293F; }
.csbefore__h { margin: 0 0 .7rem; font-size: 18px; }
.csbefore__list { list-style: none; margin: 0; padding: 0; }
.csbefore__r { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .55rem 0; border-top: 1px solid #E3DCCB; }
.csbefore__l { flex: 1 0 9rem; font-weight: 600; font-size: 15px; }
.csbefore__ok { color: #1F5E3A; font-weight: 600; font-size: 15px; }
.csbefore__no { display: inline-flex; flex-wrap: wrap; gap: .4rem; font-size: 14px; }
.csbefore__where { margin: .7rem 0 .8rem; font-size: 13px; color: #5A4A2A; }
.csbefore__go { display: flex; justify-content: flex-end; }

/* ---------------------------------------------------------------- THE TYPE PASS (21 Oct 2026, night; operator: "clean and
   sophisticated", the explanations "a little more robust"). One scale for the guide and the pane, in the brand's two faces (the
   system sans / Inter for words, IBM Plex Mono for values only); the Credential's own styles are untouched.
   Roles: section label 11.5/600, tracked .12em (was 12/700 .14–.16em: shouted) · headline 15.5/600, tight · instruction
   14.5/1.55 in a softer ink than the headline, one paragraph per idea, paragraphs .45rem apart · the record label ("Add · TXT")
   a quiet 12.5 caption · values 12.5 Plex Mono 400 (500 read heavy at this size) · Copy in the sans, sentence case, like every
   other button (was a 10 px tracked mono "COPY") · buttons 14/600, no tracking. */
.cspane .cspane__name, .cspane--work .cswork__rn { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; }
.cspane .cspane__h { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.006em; }
.cspane .cspane__n { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cspane .cspane__say, .cspane--work .cspane__say { margin: 0; font-size: 14.5px; line-height: 1.55; color: #24384D; max-width: 62ch; text-wrap: pretty; }
.cspane .cspane__say + .cspane__say { margin-top: .05rem; }
.cspane .cspane__d { row-gap: .45rem; }
.cspane .doit__rec > .doit__verb { font-size: 12.5px; font-weight: 600; color: #4A5868; letter-spacing: 0; }
.cspane .doit__rec > .doit__type { font: 500 11.5px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .04em; color: #4A5868; }
.cspane .doit__kv code, .cspane--work .cspane__d .doit__kv code, .cspane--work .cswork__val code { font-weight: 400; font-size: 12.5px; letter-spacing: 0; }
.cspane .copyset__btn { font: 600 12.5px/1.2 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; letter-spacing: .01em; text-transform: none; padding: .26rem .8rem; }
.cspane .lesson__act { font-size: 14px; letter-spacing: 0; }
.cspane .cswork__check { font-size: 14px; }
.cspane--work .cswork__plat { font-size: 12.5px; letter-spacing: .01em; }
.cspane--work .cswork__read, .cspane--work .cswork__count { font-size: 12.5px; }
.cspane .signing__say { font-size: 14.5px; line-height: 1.55; color: #24384D; }
/* a short guide (1280 × 720 and the like): the same scale, set closer, so the longest open step (ESA step 2) fits beside the player */
@media (max-height: 760px) { .cspane--work .cspane__say { font-size: 14px; line-height: 1.4; } .cspane--work .cspane__d { row-gap: .22rem; } }
/* the whole value, always (coordinator, 21 Oct night: "the holder should be able to read the whole value they are about to paste"):
   a long record value, DKIM target or the signing-check address wraps inside its monospace box, breaking anywhere, with Copy
   beside it at the top; never cut with an ellipsis (replaces QA walk defect 10's one-line ellipsis) */
.cspane .cspane__d .doit__kv, .cspane--work .cspane__d .doit__kv, .cspane--work .cswork__val { align-items: flex-start; overflow: visible; }
.cspane .cspane__d .doit__kv code, .cspane--work .cspane__d .doit__kv code, .cspane--work .cswork__val code { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-all; line-height: 1.45; }
@media (max-height: 760px) { .cspane--work .cspane__d .doit__kv code, .cspane--work .cswork__val code { font-size: 12px; line-height: 1.3; padding: .1rem .35rem; } .cspane--work .cspane__h { min-height: 34px; padding: .22rem .2rem; } }
/* 22 Oct 2026 (the operator's walk: "@" read as a small box with its Copy beside it, not as something to copy): every copy row in
   the guide's open step is one full-width row: the value box fills the width on the left (a short "@" too; long values still wrap
   inside it), and every Copy button sits in one right-aligned column, one fixed width, on every row type (name, value, selector,
   the signing address). The type line ("Add TXT") stays as it is. */
.cspane .cspane__d .doit__kv, .cspane--work .cspane__d .doit__kv, .cspane--work .cswork__val { display: flex; flex: 1 1 100%; width: 100%; flex-wrap: wrap; column-gap: .5rem; row-gap: .35rem; box-sizing: border-box; }
.cspane .cspane__d .doit__kv code, .cspane--work .cspane__d .doit__kv code, .cspane--work .cswork__val code { flex: 1 1 0; min-width: 0; box-sizing: border-box; }
.cspane .cspane__d .doit__kv .copyset__btn, .cspane--work .cswork__val .copyset__btn { flex: 0 0 4.75rem; width: 4.75rem; box-sizing: border-box; padding-left: .3rem; padding-right: .3rem; text-align: center; margin-left: auto; }
/* the signing check's Open email: its own line under the address, so the address's Copy keeps the column */
.cspane .cspane__d .doit__kv .signing__mail { flex: 0 0 auto; margin-left: 0; order: 3; }
.cspane .cspane__d .doit__kv:has(> .signing__mail)::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
/* operator 22 Oct (W5/W6): the open step's layout. Watch this step sits on the player (over the step's still), top right: the
   stills' gold box is on the control, lower in the frame, so the corner keeps it clear. */
.cswork__watchon { position: absolute; right: 8px; top: 8px; z-index: 40; display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border: 0; border-radius: 999px;
  background: rgba(18,41,63,.92); color: #FBFAF7; font: 600 12.5px/1.1 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; cursor: pointer; box-shadow: 0 2px 10px rgba(18,41,63,.3); }
.cswork__watchon[hidden] { display: none; }
.cswork__watchon:hover { background: #12293F; }
.cswork__watchon:focus-visible { outline: 2px solid #C9A24D; outline-offset: 2px; }
.cswork__watchon .cswork__play { font-size: 11px; }
/* each copy row: the provider's field word on the left, the value box filling the width, Copy in one right-aligned column */
.cspane--work .cspane__d > .cswork__row { display: flex; flex: 1 1 100%; width: 100%; align-items: flex-start; gap: .5rem; min-width: 0; box-sizing: border-box; margin: .1rem 0 .35rem; }
.cspane--work .cswork__row .cswork__lab { flex: 0 0 2.9rem; font: 600 12.5px/1.3 -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; color: #4A5868; padding-top: .3rem; overflow-wrap: anywhere; }
.cspane--work .cswork__row code { flex: 1 1 0; min-width: 0; box-sizing: border-box; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-all;
  font: 400 12.5px/1.45 'IBM Plex Mono', ui-monospace, monospace; color: #12293F; background: #FFFFFF; border: 1px solid #E3DCCB; border-radius: 4px; padding: .15rem .4rem; }
.cspane--work .cswork__row .copyset__btn { flex: 0 0 4.75rem; width: 4.75rem; box-sizing: border-box; padding-left: .3rem; padding-right: .3rem; text-align: center; margin-left: auto; }
/* Done, next step: alone on its own line, the step body's full width, last */
.cspane--work .cswork__acts { display: block; padding-left: 2.35rem; }
.cspane--work .cswork__acts[hidden] { display: none; }
.cspane--work .cswork__acts [data-work-done] { display: block; width: 100%; box-sizing: border-box; text-align: center; }
@media (max-height: 760px) { .cspane--work .cswork__row code { font-size: 12px; line-height: 1.3; padding: .1rem .35rem; } }
/* the Re-measure payoff in the step (operator's walk 22 Oct): never blank */
.cspane--work .cswork__rm { flex: 1 1 100%; margin: .2rem 0 .1rem; }
.cspane--work .cswork__rm p { margin: .15rem 0; font-size: 14.5px; line-height: 1.45; color: #24384D; }
.cspane--work .cswork__rm .cswork__rm-h { font-weight: 600; }
.cspane--work .cswork__rm .cswork__rm-h--set { color: #21563A; }
.cspane--work .cswork__rm .cswork__rm-h--not { color: #7A2620; }
.cspane--work .cswork__rm .guide__acts { margin: .3rem 0; }
a.cswork__tool { color: inherit; }
/* W7 (operator 22 Oct): the one row is the Credential's own row (credential.css .row), enlarged to the guide's width */
.cspane--work .cswork__face .row--face { zoom: 1.32; border-top: 0; padding: .1rem 0 .15rem; gap: .25rem; }
.cspane--work .cswork__face .row--face .row__details { text-decoration: none; }
.cspane--work .cswork__face .row__state.st-checking, .cspane--work .cswork__face .row__detail.st-checking { color: #12293F; font-style: italic; }
.cspane--work .cswork__face .fold__f, .cspane--work .cswork__face ul { margin: .2rem 0 0; }
.cspane--work .cswork__after { margin-top: .2rem; }
.cspane--work .cswork__after p { margin: .2rem 0; font-size: 14px; line-height: 1.4; color: #24384D; }
.cspane--work .cswork__after .cswork__done { font-weight: 600; color: #21563A; }
.cspane--work .cswork__after .guide__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 .1rem; }
.cspane--work .cswork__one--set .cswork__after .guide__acts { display: flex; }
@media (max-height: 760px) { .cspane--work .cswork__face .row--face { zoom: 1.15; } }
/* the holder's own words over the stills' neutral bars (pane.js stillFills; fills.json places them in the 16:9 still) */
.cspane--work .cswork__fills { position: absolute; inset: 0; z-index: 4; pointer-events: none; container-type: size; }
html.cs-watch .cspane--work .cswork__fills { display: none; }
.cspane--work .cswork__fill { position: absolute; box-sizing: border-box; display: flex; align-items: center; padding: 0 .5cqw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #1B1B1B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: calc(var(--fill-h) * 100cqh * 0.5 / var(--fill-lines)); line-height: 1.15; }
.cspane--work .cswork__fill--wrap { white-space: normal; word-break: break-all; align-items: flex-start; }
/* short screens (the 1280 x 720 and 1400 x 757 classes): the open step set closer so the longest step fits beside the player */
@media (max-height: 800px) { .cspane--work .cspane__d > .cswork__row { margin: 0 0 .2rem; } .cspane--work .cswork__acts [data-work-done] { padding-top: .42rem; padding-bottom: .42rem; }
  .cspane--work .cswork__acts { padding-bottom: .2rem; } .cspane--work .cswork__row .copyset__btn { padding-top: .18rem; padding-bottom: .18rem; } }
/* the Credential row's Details keeps its invisible 8 px tap margin (credential.css); in the guide it never widens the one row */
.cspane--work .cswork__face { overflow-x: clip; }
/* the shortest guides (1400 x 757 less browser chrome, 667 px): the one row at the Credential's own size, set closer, and step 8's
   signing check set closer, so the open step stays whole beside the player at its smallest (D2) */
@media (max-height: 700px) {
  .cspane--work .cswork__face .row--face { zoom: 1; padding: 0; gap: .1rem; }
  .cspane--work .cswork__one { padding-top: .2rem; }
  .cspane--work .signing .signing__say { font-size: 13.5px; line-height: 1.35; margin: .1rem 0; }
  .cspane--work .cspane__d { row-gap: .15rem; }
}
@media (max-height: 800px) { .cspane--work .cspane__d { row-gap: .3rem; } .cspane--work .cspane__say { margin-bottom: .15rem; } }
.cspane--work .cswork__face .row__state.st-ready { color: #21563A; }
@media (max-height: 700px) { .cspane--work .cspane__say { line-height: 1.3; margin-bottom: .1rem; } .cspane--work .cspane__d > .cswork__row { margin: 0 0 .15rem; } }
/* short screens: the payoff under the one row set closer, so a Set row never pushes the open step out of view */
@media (max-height: 800px) { .cspane--work .cswork__after p { margin: .1rem 0; font-size: 13px; } .cspane--work .cswork__after .guide__acts { margin: .2rem 0 0; } .cspane--work .cswork__after .lesson__act { padding-top: .35rem; padding-bottom: .35rem; } }

/* 2 Nov 2026 (operator: "the pasted text running on a single line past the box... it's an error"): every value to copy shows
   whole, wrapping inside its own box (DKIM keys, SPF, DMARC, MTA-STS); the Copy button stays beside it */
.cspane--work .cspane__d .doit__kv, .cspane--work .cswork__val { align-items: flex-start; overflow: visible; }
.cspane--work .cspane__d .doit__kv code, .cspane--work .cswork__val code { flex: 1 1 auto; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-all; }