/* pane.css — the instruction pane (pane.js). 21 October 2026. The Credential's own colours (registry.css, credential.css, doit.css).
   A wide computer window (1180 px and more): the Credential keeps its column on the left and the pane is docked to its right,
   fixed below the header, never over the Credential. Narrower (a phone, a small window): the pane follows its row. */

/* ---------------------------------------------------------------- the wide window: two columns, set once, never moving */
html.cs-pane-wide { --cspane-left: calc(max(24px, calc(50% - 664px)) + 664px); }
html.cs-bench.cs-pane-wide #result .cred, html.cs-pane-wide #result .cred { margin-left: max(24px, calc(50% - 664px)); margin-right: auto; }
html.cs-bench.cs-pane-wide header.mast .wrap { margin-left: max(24px, calc(50% - 664px)); }
html.cs-pane-wide .csb__follow { left: var(--cspane-left) !important; right: auto !important; }
html.cs-pane-on .csb__follow { display: none !important; }
.cspane--wide { position: fixed; z-index: 25; top: var(--cspane-top, 84px); bottom: 16px; left: var(--cspane-left);
  width: min(680px, calc(100vw - var(--cspane-left) - 24px)); overflow-y: auto; box-sizing: border-box;
  background: #FBF7EB; border-radius: 14px; box-shadow: 0 1px 0 #E3DCCB, 0 18px 40px rgba(18,41,63,.10); padding: 0 16px 16px; }

/* the split screen: the provider has the left two thirds (its own window), the pane the right third of this one */
html.cs-strip-pane .cspane--wide { left: var(--strip-left, 66.67vw); right: 0; top: 0; bottom: 0; width: auto; border-radius: 0; z-index: 61; }
html.cs-strip-pane #result, html.cs-strip-pane header.mast, html.cs-strip-pane footer, html.cs-strip-pane .csb__follow { visibility: hidden; }
html.cs-strip-pane body { background: #ECE7DC; }
.cspane__back { display: none; }
html.cs-strip-pane .cspane__back, html.cs-strip .cspane__back { display: inline-flex; }

/* ---------------------------------------------------------------- narrow: the pane follows its row */
/* the pane is its own scroll box (its steps scroll under the video, the video stays put), at most the window's height */
.cspane--inline { margin: .2rem 0 .9rem; padding: 0 12px 14px; border: 1.5px solid #C9A24D; border-radius: 10px; background: #FBF7EB;
  max-height: calc(100vh - var(--cspane-top, 84px) - 12px); overflow-y: auto; box-sizing: border-box; scroll-margin-top: var(--cspane-top, 84px); }
html.cs-pane-inline .row.pane-on .doit__steps, html.cs-pane-inline .row.pane-on .doit--proc,
html.cs-pane-inline .row.pane-on .doit__video .lesson__plate, html.cs-pane-inline .row.pane-on .lesson__plate--proc,
html.cs-pane-inline .row.pane-on .doit__video .lesson__window { display: none; }
html.cs-strip .cred__rows > .cspane.cspane--inline { display: block !important; }
html.cs-strip .doit-active.pane-on .doit__steps { display: none !important; }

/* ---------------------------------------------------------------- the pane */
.cspane__top { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; }
.cspane__name { flex: 1; min-width: 0; font-size: var(--t-2xs, 12px); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #12293F; }
.cspane__x { all: unset; cursor: pointer; flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 400 22px/1 system-ui, sans-serif; color: #12293F; background: rgba(18,41,63,.07); }
.cspane__x:focus-visible, .cspane__h:focus-visible { outline: 2px solid #C9A24D; outline-offset: 2px; }
/* the one video: a stable 16:9 place in the Credential's own colour until its picture comes (never a black box) */
.cspane__film { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 8px; overflow: hidden; background: #E9E2D2; box-shadow: 0 0 0 1px #E3DCCB; }
.cspane__film[hidden] { display: none; }
.cspane__film video, .cspane__film cs-player { display: block; width: 100%; height: 100%; background: transparent; }
.cspane__film cs-player { --media-background-color: transparent; }
.cspane__film video { object-fit: contain; }
.cspane__film[data-film="loading"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid #C9A24D; border-top-color: transparent; animation: ck-spin 1.1s linear infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cspane__film[data-film="loading"]::after { animation: none; } }
.cspane__chain { margin: .5rem 0 0; }
.cspane__chain[hidden] { display: none; }
.cspane__chain .vchain__b { position: static; transform: none; }
/* the numbered steps: headlines, each opening its detail under it */
.cspane__steps { list-style: none; margin: .7rem 0 .2rem; padding: 0; }
.cspane__s { border-top: 1px solid #E6DDC7; }
.cspane__s:first-child { border-top: 0; }
.cspane__h { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 44px; padding: .45rem .2rem; font: 600 15px/1.3 -apple-system, 'Inter', 'Segoe UI', sans-serif; color: #12293F; }
.cspane__n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #12293F; color: #FBFAF7; display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 -apple-system, 'Inter', 'Segoe UI', sans-serif; }
.cspane__t { flex: 1; min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(201,162,77,.6); text-underline-offset: 3px; }
.cspane__ch { flex: none; font-size: 10px; color: #7C5D26; }
.cspane__s--open .cspane__t { text-decoration: none; }
.cspane__s--open > .cspane__h, .cspane__s--now > .cspane__h { color: #12293F; }
.cspane__s--now { background: linear-gradient(90deg, rgba(201,162,77,.18), rgba(201,162,77,0) 70%); box-shadow: inset 3px 0 0 #C9A24D; }
.cspane__d { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: 0 .2rem .7rem 2.35rem; background: none; border: 0; margin: 0; }
.cspane__d[hidden] { display: none; }
.cspane__d > .guide__acts { margin: 0; }
.cspane__d .lesson__next { flex-basis: 100%; margin: 0; }
.cspane__d .lesson__next[hidden] { display: none; }
.cspane__d .doit__rec { min-width: 0; max-width: 100%; }
.cspane__d .doit__kv code { white-space: normal; overflow-wrap: anywhere; overflow: visible; }
.cspane__d .doit__kv { overflow: visible; flex-wrap: wrap; }
.cspane__still { flex-basis: 100%; max-width: 100%; width: 360px; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px #E3DCCB; }
.cspane .skx { max-width: none; margin: .8rem 0 0; }
/* the row's own step, marked while its chapter plays in the pane (the follow-along ring) */
#result .doit__s.follow-on { box-shadow: inset 3px 0 0 #C9A24D; background: rgba(201,162,77,.12); }
#result .doit__s { cursor: default; }
html.cs-pane #result .doit__s { cursor: pointer; }
@media print { .cspane { display: none !important; } }

.cspane__say { flex-basis: 100%; margin: 0; font: 400 14px/1.45 -apple-system, 'Inter', 'Segoe UI', sans-serif; color: #12293F; }
.cspane__say + .cspane__say { margin-top: -.2rem; }

/* THE ONE PLACE FOR THE VIDEO (operator, 21 Oct 2026): the pane's head (the row's name and the video) sticks to the top of the pane
   while the steps scroll under it; the video's box never moves, floats or changes size */
.cspane__head { position: sticky; top: 0; z-index: 3; background: #FBF7EB; padding: 14px 0 8px; }
/* a step's replay: the chapter's first frame, held, with a gold ring round the player (pane.js CUE_MS), then it plays */
.cspane__film--cue { box-shadow: 0 0 0 3px #C9A24D, 0 0 0 7px rgba(201,162,77,.25); animation: cspane-cue 1s ease-in-out infinite alternate; }
@keyframes cspane-cue { from { box-shadow: 0 0 0 3px #C9A24D, 0 0 0 4px rgba(201,162,77,.15); } to { box-shadow: 0 0 0 3px #C9A24D, 0 0 0 9px rgba(201,162,77,.30); } }
@media (prefers-reduced-motion: reduce) { .cspane__film--cue { animation: none; } }
.cspane__s { scroll-margin-top: var(--cspane-head, 0px); }

/* 21 Oct 2026: registry.css paints every button:hover navy; the pane's headline and close buttons keep their own look */
.cspane .cspane__h:hover, .cspane .cspane__h:focus-visible { background: rgba(201,162,77,.14); color: #12293F; }
.cspane .cspane__x:hover { background: rgba(18,41,63,.14); color: #12293F; }

/* 21 Oct 2026 (the visual pass): a control reached by the keyboard (Tab) is scrolled into view below the pane's sticky head (the
   video), never under it */
.cspane__steps a, .cspane__steps button, .cspane__steps input, .cspane__steps textarea, .cspane__steps select, .cspane .skx button {
  scroll-margin-top: var(--cspane-head, 0px); scroll-margin-bottom: 12px; }
/* the page's footer keeps to the Credential's side of a wide window (its seal sat half under the docked pane) */
html.cs-pane-wide:not(.cs-strip-pane) footer { margin-right: calc(100vw - var(--cspane-left)); }
/* the player reached by the keyboard shows where the focus is: its first stop (the player itself) drew no ring (the visual pass,
   21 Oct 2026); the film is outlined while the keyboard is in it (pane.js sets cs-kbd on Tab, clears it on a pointer) */
html.cs-kbd .cspane__film:focus-within { outline: 2px solid #12293F; outline-offset: 2px; }

/* the pane under its row carries the row's red button (its own Sidekick bar): the row's own bar, just above it, is not drawn twice
   (the visual pass, 1024: two red buttons one above the other) */
html.cs-pane-inline .row.pane-on .skx:not(.skx--pane) { display: none; }