/* doit.css — the self-serve Credential (doit.js, credential.js doitSteps): Start here, the numbered "Do it" steps first in
   every row, the video as a small helper beside them, each step's own ▶, and the slim strip beside the provider's window.
   20 October 2026. Colours are the Credential's own (registry.css tokens, credential.css's gold). */

/* ---------------------------------------------------------------- Start here */
.starthere{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.1rem;margin:.4rem 0 .5rem;padding:.8rem 1rem;border:1.5px solid #C9A24D;border-radius:10px;background:#FBF6EA;scroll-margin-top:12px}
.starthere__main{display:flex;flex-direction:column;gap:.2rem;flex:1 1 200px;min-width:0}
.starthere__k{font:600 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#7C5D26}
.starthere__row{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.15rem;color:#12293F}
.starthere__guide{display:flex;align-items:center;gap:.7rem;flex:0 1 auto}
.starthere__qr{display:block;width:88px;height:88px;padding:6px;background:#fff;border-radius:8px;box-shadow:0 0 0 1px #E6DFCF;flex:none}
.starthere__scan{max-width:150px;font-size:13px;line-height:1.35;color:#12293F}
.starthere__video[hidden]{display:none}
html.cs-bench.cs-starthere .csb__follow:not(.is-following){display:none}   /* the Start here box carries the Sidekick QR */

/* ---------------------------------------------------------------- the numbered steps */
.doit__steps{list-style:none;margin:.5rem 0 .7rem;padding:0}
.doit__s{display:flex;align-items:flex-start;gap:.7rem;padding:.65rem .4rem .7rem 0;border-top:1px solid #E6DDC7;scroll-margin-top:110px;scroll-margin-bottom:60px}
.doit__s:first-child{border-top:0;padding-top:.2rem}
.doit__n{flex:none;width:26px;height:26px;margin-top:.1rem;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}
.doit__b{flex:1;min-width:0}
.doit__b > .guide__acts{margin:.2rem 0 0}
.doit__b .lesson__steps{margin:0 0 .4rem}
.doit__b .copyset__where{margin:0 0 .35rem}
.doit__b .copyset{margin:0}
.doit .copyset__n{display:none}
.doit .copyset__type,.doit .copyset__note{padding-left:0}
.doit__b .lesson__next{margin:.4rem 0 0}
.doit--proc .doit__steps{margin:.6rem 0 .4rem}
.doit__play{flex:none;align-self:flex-start;width:30px;height:30px;margin-top:.05rem;padding:0;border-radius:50%;border:1px solid #B8964C;background:transparent;color:#12293F;font-size:11px;line-height:1;cursor:pointer}
.doit__play:hover{background:rgba(201,162,77,.14)}
.doit__play:focus-visible{outline:2px solid #C9A24D;outline-offset:2px}

/* the video: a helper after the steps, never the hero */
.doit__video{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.2rem 0 .6rem}
.doit__video .lesson__plate,.row--open-now .doit__video .lesson__plate{flex:1 1 240px;margin:0;padding:.5rem .75rem;gap:.6rem;border-radius:6px;box-shadow:none}
.row--open-now .doit__video .lesson__play,.doit__video .lesson__play{width:22px;height:22px;border-width:2px}
.row--open-now .doit__video .lesson__play:after,.doit__video .lesson__play:after{left:7px;top:4.5px;border-left:8px solid var(--face);border-top:5px solid transparent;border-bottom:5px solid transparent}
.row--open-now .doit__video .lesson__ptitle,.doit__video .lesson__ptitle{font-size:var(--t-sm)}
.doit__video .lesson__follow{flex:1 1 100%}
@media (min-width:720px){.doit__video .lesson__window{width:auto;flex:0 0 auto;padding:0 1.1rem;margin:0}}
.row--open-now .lesson__plate--proc{padding:.5rem .75rem;gap:.6rem;border-radius:6px;box-shadow:none}
.row--open-now .lesson__plate--proc .lesson__play{width:22px;height:22px;border-width:2px}
.row--open-now .lesson__plate--proc .lesson__play:after{left:7px;top:4.5px;border-left:8px solid var(--face);border-top:5px solid transparent;border-bottom:5px solid transparent}
.row--open-now .lesson__plate--proc .lesson__ptitle{font-size:var(--t-sm)}
.row__name{cursor:pointer}

/* one step's part of the video, small, above the steps */
.doit__mini{position:relative;margin:.2rem 0 .6rem;max-width:420px;background:#000;border-radius:8px}
.doit__mini video{display:block;width:100%;aspect-ratio:16/9;border-radius:8px;background:#000}
.doit__mini .vplayer__x{top:-10px;right:-10px}

/* the phone: the step its video has reached, on the Sidekick bar */
.sk-bar .sk-step{flex-basis:100%;font-size:13px;color:#12293F;padding:0 0 .4rem}
.vplayer .sk-bar{flex-wrap:wrap}

/* ---------------------------------------------------------------- the strip beside the provider (computer) */
.doit__strip{display:none}
html.cs-strip .doit__strip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0 0 .4rem}
.doit__sname{flex:1 1 auto;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1rem;color:#12293F}
.doit__now{flex-basis:100%;font-size:13px;color:#5B6673;min-height:1em}
html.cs-strip header.mast,html.cs-strip footer,html.cs-strip #result > .back,html.cs-strip .cred__band,html.cs-strip .cred__id,html.cs-strip .cred__three,
html.cs-strip .strip,html.cs-strip .cred__people,html.cs-strip .pres,html.cs-strip .anchored,html.cs-strip #anchorDrawer,html.cs-strip .cred__save,html.cs-strip .cs-mobile,
html.cs-strip .starthere,html.cs-strip .csb__follow,html.cs-strip .cred__rows > .row:not(.doit-active),html.cs-strip .cred__rows > :not(.row),
html.cs-strip .doit-active > .row__head,html.cs-strip .doit-active > .row__state,html.cs-strip .doit-active > .row__detail,html.cs-strip .doit-active > .row__changed,
html.cs-strip .doit-active .chg,html.cs-strip .doit-active .pop,html.cs-strip .doit-active .fold__f,html.cs-strip .doit-active .row__detail--chg,
html.cs-strip .doit-active .guide__k,html.cs-strip .doit-active .guide__line,html.cs-strip .doit-active .lesson__text,html.cs-strip .doit-active .doit__video,html.cs-strip .doit-active .lesson__plate{display:none!important}
html.cs-strip body{background:#ECE7DC}
html.cs-strip #result .cred,html.cs-bench.cs-strip #result .cred{position:fixed;top:0;bottom:0;right:0;left:var(--strip-left,66.67vw);max-width:none;margin:0;border-radius:0;overflow-y:auto;z-index:60;box-shadow:-1px 0 0 #E3DCCB}
html.cs-strip #result .cred__body{padding:.9rem 1rem 1.2rem}
html.cs-strip .doit-active{border:0;padding:0;margin:0;background:transparent}
html.cs-strip .doit-active .fold{display:block!important}
html.cs-strip .doit-active .guide{margin:0;border:0;padding:0;background:transparent}
html.cs-strip .doit-active .copyset__v code{font-size:11px}
html.cs-strip .doit-active .skx{max-width:none}

/* ---------------------------------------------------------------- Watch, then Do (doit.js watch / doMode) */
.starthere__row{all:unset;cursor:pointer;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.15rem;color:#12293F;text-decoration:underline;text-decoration-color:#C9A24D;text-underline-offset:3px}
.starthere__row:focus-visible{outline:2px solid #C9A24D;outline-offset:3px}
html.cs-focus body{overflow:hidden}
.dfocus{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(9,20,32,.92);padding:24px;box-sizing:border-box}
.dfocus__box{width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.dfocus__top{display:flex;align-items:center;justify-content:space-between;color:#FBFAF7}
.dfocus__name{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.15rem}
.dfocus__x{all:unset;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;font:400 28px/1 system-ui,sans-serif;color:#FBFAF7;background:rgba(255,255,255,.12)}
.dfocus__film{position:relative;background:#000;border-radius:10px;overflow:hidden}
.dfocus__film video{display:block;width:100%;max-height:calc(100vh - 220px);aspect-ratio:16/9;background:#000}
.dfocus__film cs-player{display:block}
.dfocus__acts{display:flex;justify-content:flex-end;gap:10px}
.dfocus__acts [hidden]{display:none}
.dfocus .lesson__act{min-height:44px;padding:.6rem 1.4rem;font-size:15px}
.dfocus__skip{background:transparent;color:#FBFAF7;border-color:rgba(251,250,247,.5)}
.dfocus .skx--focus{position:fixed;right:16px;bottom:16px;margin:0;z-index:91;box-shadow:0 4px 14px rgba(0,0,0,.3)}
/* the phone: the whole screen, safe areas kept */
.dfocus--phone{padding:calc(env(safe-area-inset-top,0px) + 10px) 0 calc(env(safe-area-inset-bottom,0px) + 84px);align-items:stretch;background:#FBF7EB;height:100dvh}
.dfocus--phone .dfocus__box{width:100%;gap:0;overflow-y:auto}
.dfocus--phone .dfocus__top{padding:0 12px 8px;color:#12293F}
.dfocus--phone .dfocus__x{color:#12293F;background:rgba(18,41,63,.08)}
.dfocus--phone .dfocus__film{border-radius:0}
.dfocus--phone .dfocus__acts{padding:12px 16px}
.dfocus--phone .dfocus__skip{color:#12293F;border-color:#B8964C}
.dfocus__do{padding:14px 16px 0}
.dfocus__do[hidden]{display:none}
.dfocus__step{margin:0 0 12px;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:22px;line-height:1.3;color:#12293F}
.dfocus__body{font-size:16px;line-height:1.5}
.dfocus__body .lesson__steps{font-size:16px}
.dfocus__body .copyset{margin:0}.dfocus__body .copyset__n{display:none}
.dfocus__nav{display:flex;gap:10px;margin:16px 0 8px}
.dfocus__nav .lesson__act{flex:1}.dfocus__nav .dfocus__play{flex:0 0 56px;padding:0}
.dfocus__nav [disabled]{opacity:.4}

/* Checking: after Re-measure, while the row is read again (doit.js) */
.row__checking{display:inline-flex;align-items:center;gap:6px;font:600 13px/1.4 -apple-system,'Inter','Segoe UI',sans-serif;color:#9A7430}
.row__checking::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid #C9A24D;border-top-color:transparent;animation:ck-spin 1.1s linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.row__checking::before{animation:none}}
.row--checking > .row__state,.row--checking > .row__detail--wait{display:none}
.it__form .prov__in{display:block;width:100%;box-sizing:border-box;margin:0 0 .4rem}

/* ---------------------------------------------------------------- flat (operator, 20 Oct: no boxes inside boxes; one line per step) */
.starthere{flex-wrap:nowrap;padding:.55rem .9rem;gap:.8rem}
.starthere__main{flex-direction:row;align-items:baseline;gap:.5rem;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.starthere__k{font:600 15px/1.3 -apple-system,'Inter','Segoe UI',sans-serif;letter-spacing:0;text-transform:none;color:#7C5D26}
.starthere__qr{width:64px;height:64px;padding:4px}
.starthere__scan{max-width:130px;font-size:12.5px}
@media (max-width:719px){.starthere{flex-wrap:wrap}.starthere__guide{flex-basis:100%}}
.guide.doit{background:none;border:0;padding:0;margin:.35rem 0 0}
.doit__steps{margin:.2rem 0 .4rem}
.doit__s{align-items:center;padding:.4rem 0;min-height:40px}
.doit__s:first-child{padding-top:.4rem}
.doit__n{margin-top:0}
.doit__b{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem}
.doit__b > .guide__acts{margin:0}
.doit__b .lesson__act{padding:.42rem .85rem}
.doit__b .lesson__next{flex-basis:100%;margin:0}
.doit__b .lesson__next[hidden]{display:none}
.doit__where{font-size:13px;color:#5B6673;margin:0}
.doit__rec{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;min-width:0}
.doit__type{font:600 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;color:#5D636A}
.doit__kv{display:inline-flex;align-items:center;gap:.4rem;min-width:0;max-width:100%}
.doit__kv code{font:500 12.5px/1.35 'IBM Plex Mono',ui-monospace,monospace;color:#12293F;overflow-wrap:anywhere}
.doit__help{font-size:13px;color:#12293F}
.doit .copyset__g + .copyset__g{margin:0;padding:0;border:0}
.doit__video{gap:.4rem .9rem;margin:.1rem 0 .4rem}
.doit__video .lesson__plate,.row--open-now .doit__video .lesson__plate{flex:0 1 auto;background:none;color:#12293F;padding:.2rem 0;gap:.4rem;border:0;box-shadow:none}
.doit__video .lesson__play,.row--open-now .doit__video .lesson__play{width:18px;height:18px;border-color:#12293F}
.doit__video .lesson__play:after,.row--open-now .doit__video .lesson__play:after{left:5.5px;top:3.5px;border-left:7px solid #12293F;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.doit__video .lesson__ptitle,.row--open-now .doit__video .lesson__ptitle{font:500 13px/1.3 -apple-system,'Inter','Segoe UI',sans-serif}
.doit__video .lesson__plen,.lesson__plate--proc .lesson__plen{color:#5D636A;margin-left:.2rem}
@media (min-width:720px){.doit__video .lesson__window{min-height:32px;padding:0 .9rem}}
.lesson__plate--proc,.row--open-now .lesson__plate--proc{background:none;color:#12293F;padding:.2rem 0;gap:.4rem;box-shadow:none;margin:.1rem 0}
.row--open-now .lesson__plate--proc .lesson__play,.lesson__plate--proc .lesson__play{width:18px;height:18px;border-color:#12293F}
.row--open-now .lesson__plate--proc .lesson__play:after,.lesson__plate--proc .lesson__play:after{left:5.5px;top:3.5px;border-left:7px solid #12293F;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.lesson__plate--proc .lesson__ptitle,.row--open-now .lesson__plate--proc .lesson__ptitle{font:500 13px/1.3 -apple-system,'Inter','Segoe UI',sans-serif}
/* 21 Oct 2026 (the visual pass): these plates are drawn light, so the light label registry.css gives a dark plate on hover and
   focus made their title vanish (focus by Tab, phone and computer) */
.doit__video a.lesson__plate:hover,.doit__video a.lesson__plate:focus,a.lesson__plate--proc:hover,a.lesson__plate--proc:focus{color:#12293F}
.dfocus__body{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem}
.dfocus__body .doit__kv code{font-size:14px}
.starthere{scroll-margin-top:120px}
.starthere__main{overflow:visible;flex:1 0 auto}
.starthere__row{font-size:16px}
.starthere__scan{max-width:105px;font-size:12px;line-height:1.3}
.doit__still{flex:none;width:120px;height:68px;object-fit:cover;border-radius:4px;box-shadow:0 0 0 1px #E3DCCB;cursor:pointer;margin-left:auto}
.doit__still + .doit__play{margin-left:.5rem}
html.cs-strip .doit__still{width:96px;height:54px}
.dfocus__body .doit__still{display:none}
.doit__pre{flex-basis:100%;font-weight:600;color:#9A7430}
/* Onboarding (the Sidekick tutorial) is for the first pairing of a phone only: never in a computer's path */
@media (min-width:720px){.lesson__tut{display:none!important}}
/* a value is one line (Copy copies it whole); the strip keeps only the row's steps */
.doit__kv code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.doit__kv{flex:0 1 auto;overflow:hidden}
html.cs-strip .cs-prog,html.cs-strip .cs-acct,html.cs-strip .cs-continue{display:none!important}
html.cs-strip .doit__still{width:72px;height:41px}
.dfocus__acts[hidden]{display:none}
.dfocus__skip,.dfocus--phone .dfocus__skip{background:transparent}
.dfocus--phone .dfocus__skip{color:#12293F;border:1px solid #B8964C}

/* THE FLOATING SIDEKICK (20 Oct 2026): the step in hand in its own always-on-top window (Document Picture-in-Picture), doit.js */
.skf-doc, .skf-doc body { margin: 0; background: #fff; }
.skf { font: 15px/1.4 Inter, system-ui, sans-serif; color: #0F1E2E; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 100vh; box-sizing: border-box; }
.skf__top { display: flex; align-items: center; justify-content: space-between; }
.skf__name { font-weight: 600; font-size: 13px; letter-spacing: .02em; color: #3C4A58; text-transform: uppercase; }
.skf__step { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.skf__still img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #DCE2E8; cursor: pointer; }
.skf__b { display: block; }
.skf__b .guide__acts { margin: 0; }
.skf__b .doit__rec { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.skf__b .copyset__i code { word-break: break-all; }
.skf__clip video { display: block; width: 100%; border-radius: 8px; background: #000; }
.skf__clip:empty { display: none; }
.skf__nav { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.skf__nav [data-skf-next] { margin-left: auto; }
.skf .skx { margin: 0; }

/* 2 Nov 2026: values wrap whole inside their box (see work.css) */
.doit__kv code{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-all}