/* instiv2 walk.css (M2, 14 Oct 2026): the walkthrough player (.wk[data-walk]) and the step sequence (.sq[data-seq]),
   with walk.js. Loaded only on pages that hold one (chrome.mjs headPass). Built on the styles.css tokens; navy is
   never text. Without scripts both read as plain content: a video with controls, chapter links and the written steps;
   a grid of screens with their captions. */

/* ---------- walkthrough ---------- */
.wk { max-width: 1180px; margin: 0 auto; color: var(--page-text); }
.wk-main { display: grid; gap: 26px; align-items: center; }
.wk-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.wk-dev { position: relative; box-sizing: border-box; }
.wk-phone { --ar: 720 / 1558; width: min(300px, 70vw); width: max(210px, min(300px, 70vw, calc((100svh - 300px) * var(--ar)))); padding: 8px; border-radius: 42px; background: linear-gradient(145deg, #3b4252, #11151d 40%, #2b313d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 50px 90px -40px rgba(5, 8, 15, .6); }
.wk-desk { --ar: 16 / 10; width: 100%; margin-bottom: 18px; max-width: 860px; padding: 1.3% 1.3% 2.2%; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #1c2230, #0a0d14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 0 1.5px #3a4252, 0 60px 120px -50px rgba(5, 8, 15, .55); }
.wk-desk::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -14px; height: 14px; border-radius: 0 0 20px 20px / 0 0 12px 12px; background: linear-gradient(180deg, #d9dee7 0%, #aab2bf 45%, #7d8696 100%); }
html[data-theme="dark"] .wk-desk::after { background: linear-gradient(180deg, #4a5262 0%, #2a303c 50%, #161a22 100%); }
.wk-scr { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: 34px; background: #000; }
.wk-desk .wk-scr { border-radius: 6px; }
.wk-vid { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #000; transition: opacity .2s ease; }
.wk-dev.is-swap .wk-vid { opacity: 0; }
.wk-play, .wk-tg { position: absolute; z-index: 3; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(5, 8, 15, .72); color: #fff; cursor: pointer; }
.wk-play { inset: 0; margin: auto; width: 76px; height: 76px; }
.wk-play svg { width: 32px; height: 32px; fill: currentColor; }
.wk-play svg path[d^="M8"] { transform: translateX(1.5px); }
.wk-tg { right: 12px; bottom: 12px; width: 44px; height: 44px; }
.wk-desk .wk-tg { right: 14px; bottom: 14px; }
.wk-tg svg { width: 18px; height: 18px; fill: currentColor; }
.wk-play[hidden] { display: none; }
.wk-play:hover, .wk-tg:hover { background: rgba(5, 8, 15, .86); }
.wk-play:focus-visible, .wk-tg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #05080F; }
.wk-cap { max-width: 32em; min-height: 3.1em; margin: 0; padding: 0 4px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--page-text); }
.wk-title { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.wk-len { margin: 6px 0 16px; font: 500 12.5px/1.4 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-muted); }
.wk-chaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-ch { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 100%; min-height: 50px; padding: 10px 14px 14px; border: 1px solid var(--page-line); border-radius: 14px; background: var(--page-glass); color: var(--page-text); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.wk-ch:hover { border-color: var(--page-muted); }
.wk-ch[aria-current] { background: var(--page-text); border-color: var(--page-text); color: var(--page); }
.wk-ch:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
.wk-n { font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; }
.wk-d { font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; }
.wk-bar { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; overflow: hidden; }
.wk-bar::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .16; }
.wk-bar i { position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left center; }
.wk-steps { margin: 28px auto 0; max-width: 760px; border-top: 1px solid var(--page-line); }
.wk-steps summary { display: flex; align-items: center; min-height: 48px; font-weight: 600; cursor: pointer; }
.wk-steps ol { margin: 4px 0 8px; padding-left: 1.5em; }
.wk-steps li { margin: 8px 0; line-height: 1.55; }
@media (min-width: 901px) {
  .wk-main { grid-template-columns: auto minmax(260px, 360px); justify-content: center; column-gap: clamp(32px, 5vw, 72px); }
  .wk.is-desk .wk-main { grid-template-columns: minmax(0, 1fr) 300px; }
  .wk-phone { width: max(240px, min(320px, calc((100vh - 260px) * var(--ar)))); }
}

/* ---------- step sequence ---------- */
.sq { max-width: 1180px; margin: 0 auto; color: var(--page-text); }
.sq-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 20px; }
.sq-fig { margin: 0; }
.sq-dev { --ar: 750 / 1624; position: relative; box-sizing: border-box; width: 100%; max-width: 300px; padding: 6px; border-radius: 32px; background: linear-gradient(145deg, #3b4252, #11151d 40%, #2b313d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 40px 70px -40px rgba(5, 8, 15, .55); }
.sq-scr { position: relative; aspect-ratio: var(--ar); overflow: hidden; border-radius: 26px; background: #0A1120; }
.sq-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; color: transparent; }
.sq .sq-cap { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--page-text); }
.sq-n { flex: none; min-width: 22px; padding: 3px 6px; border: 1px solid var(--page-line); border-radius: 6px; text-align: center; font: 500 12px/1.2 "JetBrains Mono", "JBM Fallback", monospace; }
.sq-stage[hidden], .sq-nav[hidden] { display: none; }

/* carousel, 900 px and under */
.sq.is-car .sq-list { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px calc(50% - min(33vw, 140px)) 10px; }
.sq.is-car .sq-list::-webkit-scrollbar { display: none; }
.sq.is-car .sq-list:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 12px; }
.sq.is-car .sq-it { flex: 0 0 min(66vw, 280px); scroll-snap-align: center; }
.sq.is-car .sq-dev { transition: opacity .25s ease; }
.sq.is-car .sq-it:not(.is-on) .sq-dev { opacity: .55; }
.sq-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.sq-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--page-line); border-radius: 50%; background: var(--page-2); color: var(--page-text); cursor: pointer; }
.sq-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sq-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.sq-btn:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
.sq-count { min-width: 5.5em; text-align: center; font: 500 13px/1 "JetBrains Mono", "JBM Fallback", monospace; color: var(--page-text); }

/* pinned frame, above 900 px */
.sq.is-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 96px); max-width: 1080px; }
.sq.is-pin .sq-stage { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--hdr, 68px) + 6vh); align-self: start; display: flex; justify-content: center; }
.sq.is-pin .sq-pin { width: max(220px, min(330px, calc((100vh - var(--hdr, 68px) - 14vh) * var(--ar)))); max-width: none; }
.sq-pin .sq-img { opacity: 0; transition: opacity .2s ease; }
.sq-pin .sq-img.is-on { opacity: 1; }
.sq.is-pin .sq-list { grid-column: 2; grid-row: 1; display: block; padding: 18vh 0 22vh; }
/* M3: the captions not on show are muted by colour, not by opacity, so they keep AA contrast on every page background
   (guides and learn set a muted figcaption colour; opacity on top of that fell to 2.5:1) */
.sq.is-pin .sq-it { min-height: 62vh; display: flex; align-items: center; }
.sq.is-pin .sq-it .sq-cap { transition: color .3s ease; }
.sq.is-pin .sq-it:not(.is-on) .sq-cap { color: var(--page-muted); }
.sq.is-pin .sq-fig .sq-dev { display: none; }
.sq.is-pin .sq-cap { margin: 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.sq.is-pin .sq-n { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .wk-vid, .wk-ch, .sq-pin .sq-img, .sq.is-car .sq-dev, .sq.is-pin .sq-it .sq-cap { transition: none; }
}
@media print { .wk-play, .wk-tg, .sq-nav { display: none !important; } }