/* PROJ-29 guide (/guide/). Builds on css/legal.css (tokens, fonts, header, footer) in style D. */
.guide .gnav{gap:12px 20px}
.g-home{margin-right:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--sand);font:600 16px/1 var(--cond);letter-spacing:.03em;text-decoration:none}
.g-home:hover{color:var(--accent-hi)}
.g-lang button{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--sand);font:700 15px/1 var(--cond);letter-spacing:.06em;cursor:pointer}
.g-lang button:hover{color:var(--bone)}
.g-lang button[aria-pressed="true"]{color:var(--accent-hi);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
/* Media queries instead of a class flip by script: no layout shift when the module runs after the first paint. */
@media (scripting:none){.g-lang,.g-search{display:none}}
.g-noscript{margin:0;padding:12px var(--gutter);background:var(--ink-1);color:var(--sand);font-size:15px}

.g-shell{max-width:1340px;margin:0 auto;padding:0 var(--gutter) 64px;display:block}
.g-main{min-width:0;overflow-wrap:anywhere}
.g-toc{display:none}
.g-toc-list{list-style:none;margin:0;padding:0}
.g-toc-list a{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:7px 10px 7px 12px;border-left:2px solid transparent;color:var(--bone-2);text-decoration:none;font:600 15.5px/1.25 var(--cond);letter-spacing:.02em}
.g-toc-list a:hover{color:var(--bone);background:rgba(var(--bone-rgb),.04)}
.g-toc-list a[aria-current="true"]{border-left-color:var(--accent);color:var(--accent-hi);background:rgba(255,107,31,.07)}
.g-toc-n{min-width:1.4em;color:var(--sand-dim);font-variant-numeric:tabular-nums}
.g-toc-head{margin:0 0 8px 12px;color:var(--sand-dim);font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}

.g-toc-mobile{position:sticky;top:0;z-index:20;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:var(--ink-0);border-bottom:1px solid var(--line)}
.g-toc-mobile>summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;list-style:none;font:700 16px/1.2 var(--cond);color:var(--bone)}
.g-toc-mobile>summary::-webkit-details-marker{display:none}
.g-toc-mobile>summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);flex:none}
.g-toc-mobile[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.g-toc-current{color:var(--accent-hi);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-toc-mobile .g-toc-list{max-height:min(70vh,560px);overflow:auto;padding-bottom:10px}

@media (min-width:1000px){
  .g-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}
  .g-toc{display:block;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding:36px 0 20px}
  .g-toc-mobile{display:none}
}

.g-main>h1{margin:clamp(28px,6vw,64px) 0 14px;font:800 clamp(3rem,9vw,6rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.g-lead{margin:0 0 8px;max-width:64ch;color:var(--bone-2);font-size:18.5px}
.g-stand{margin:0 0 26px;color:var(--sand-dim);font-size:14.5px}

.g-search{margin:0 0 20px;max-width:720px}
.g-search label{display:block;margin-bottom:8px;font:700 15px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--sand)}
.g-search input{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:0;background:var(--ink-1);color:var(--bone);font:400 17px/1.3 var(--body)}
.g-search input::placeholder{color:var(--sand-dim)}
.g-search input:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.g-results:empty{display:none}
.g-results{margin-top:10px;border:1px solid var(--line);background:var(--ink-1);padding:10px 12px}
.g-hits{margin:0 0 6px;color:var(--sand);font-size:15px}
.g-hits a{color:var(--accent-hi)}
.g-results ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.g-results li a{display:grid;gap:2px;padding:9px 10px;text-decoration:none;color:var(--bone-2)}
.g-results li a:hover{background:rgba(var(--bone-rgb),.05)}
.g-results small{color:var(--sand-dim);font:600 13px/1.2 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.g-results b{color:var(--bone);font:700 17px/1.2 var(--cond)}
.g-results span{font-size:14.5px;line-height:1.45}

.g-chapter{padding:48px 0 12px;border-top:1px solid var(--line);scroll-margin-top:56px}
.g-ch-head{margin-bottom:18px}
.g-num{margin:0 0 6px;color:var(--accent-hi);font:700 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.g-chapter h2{margin:0;font:800 clamp(2.2rem,5.4vw,3.6rem)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
.g-about{display:grid;gap:18px;margin:0 0 26px}
.g-about h3,.g-sub,.g-limits h3,.g-faq h3{margin:0 0 6px;font:700 15px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--sand)}
.g-about p{margin:0;max-width:62ch;color:var(--bone-2)}
@media (min-width:760px){.g-about{grid-template-columns:1fr 1fr;gap:32px}}

.g-walk{margin:0 0 34px;padding:14px;border:1px solid var(--line);background:var(--ink-1)}
.g-walk-title{margin:0 0 10px;color:var(--sand);font:700 14px/1.2 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.g-walk-static{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.g-walk-static a{display:grid;gap:6px;text-decoration:none;color:var(--bone-2);font-size:14px;line-height:1.3}
.g-walk-static img{width:100%;aspect-ratio:3/2;object-fit:contain;background:var(--chrome);border:1px solid var(--line)}
.g-walk-static b{color:var(--accent-hi);font:700 13px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
/* The animated walkthrough gets a fixed box from the first paint on, so building it later shifts nothing. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.g-walk{position:relative;height:clamp(300px,50vw,560px);overflow:hidden}}
.g-walk.has-player .g-walk-static,.g-walk.has-player .g-walk-title{visibility:hidden}
.g-player{position:absolute;inset:14px;display:flex;flex-direction:column;gap:10px}
.g-stage{position:relative;flex:none;margin:0 auto;overflow:hidden;background:var(--chrome);border:1px solid var(--line)}
.g-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.g-cursor{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-2px 0 0 -3px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));pointer-events:none;z-index:2}
.g-cursor svg{display:block;width:100%;height:100%}
.g-ring{position:absolute;left:50%;top:50%;width:46px;height:46px;border:3px solid var(--accent);border-radius:50%;opacity:0;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.g-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.g-pp{min-width:96px;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);background:var(--ink-0);color:var(--bone);font:700 15px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.g-pp:hover{border-color:var(--accent)}
.g-cap{color:var(--bone-2);font-size:15px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.g-cap:hover{color:var(--accent-hi)}

.g-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:44px}
.g-step{scroll-margin-top:56px}
.g-step h3{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font:700 clamp(21px,2.3vw,26px)/1.2 var(--cond);color:var(--bone)}
.g-step-n{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid var(--accent);color:var(--accent-hi);font:700 16px/1 var(--cond);transform:translateY(3px)}
.g-anchor{margin-left:2px;color:var(--sand-dim);text-decoration:none;font-weight:600;display:inline-grid;place-items:center;min-width:32px;min-height:32px}
.g-anchor:hover{color:var(--accent-hi)}
.g-step p{margin:0 0 12px;max-width:72ch;color:var(--bone-2)}
.g-legend{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--bone-2)}
.g-legend li{display:flex;align-items:center;gap:8px}
.g-dot{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 13px/1 var(--cond);flex:none}

.g-shot{margin:0}
.g-zoom{display:block;width:100%;max-width:var(--nat,100%);padding:0;border:1px solid var(--line);background:var(--chrome);cursor:zoom-in;color:inherit;text-align:left}
.g-zoom:hover{border-color:var(--line-strong)}
/* PROJ-34 W5: marks are drawn thin (1 px line, faint dark ring for contrast, small glow) and the number badge scales with
   the figure: the frame is a size container, the badge is 1.9 % of its width, at least 11 px (half of the old fixed 22 px,
   so on a phone it is at most half as big relative to the image) and at most 18 px. The digit never drops below 10 px.
   The zoom dialog clones the frame, so the badge follows the larger picture there too. */
.g-frame{position:relative;display:block;width:100%;container-type:inline-size}
.g-frame img{display:block;width:100%;height:100%}
.g-mark{--gb:clamp(11px,1.9cqi,18px);position:absolute;display:block;border:1px solid var(--accent);border-radius:2px;box-shadow:0 0 0 1px rgba(14,15,15,.5),0 0 6px rgba(255,107,31,.22);pointer-events:none}
.g-mark b{position:absolute;left:calc(var(--gb) / -2);top:calc(var(--gb) / -2);display:grid;place-items:center;width:var(--gb);height:var(--gb);border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 max(10px,calc(var(--gb) * .64))/1 var(--cond);box-shadow:0 0 0 1px var(--ink-0)}
/* PROJ-40 (PROJ-34 BUG-3): guide-build.mjs picks the corner per mark so the badge touches no other mark. Default tl = centred on the
   top-left corner (above); tr/bl/br centred on that corner; -out fully outside the corner, -in inside it. Offsets use the badge size. */
.g-mark[data-corner^="tr"] b,.g-mark[data-corner^="br"] b{left:auto}
.g-mark[data-corner^="bl"] b,.g-mark[data-corner^="br"] b{top:auto}
.g-mark[data-corner="tr"] b{right:calc(var(--gb) / -2)}
.g-mark[data-corner="bl"] b{bottom:calc(var(--gb) / -2)}
.g-mark[data-corner="br"] b{right:calc(var(--gb) / -2);bottom:calc(var(--gb) / -2)}
.g-mark[data-corner="tl-out"] b{left:calc(var(--gb) * -1);top:calc(var(--gb) * -1)}
.g-mark[data-corner="tr-out"] b{right:calc(var(--gb) * -1);top:calc(var(--gb) * -1)}
.g-mark[data-corner="bl-out"] b{left:calc(var(--gb) * -1);bottom:calc(var(--gb) * -1)}
.g-mark[data-corner="br-out"] b{right:calc(var(--gb) * -1);bottom:calc(var(--gb) * -1)}
.g-mark[data-corner="tl-in"] b{left:0;top:0}
.g-mark[data-corner="tr-in"] b{right:0;top:0}
.g-mark[data-corner="bl-in"] b{left:0;bottom:0}
.g-mark[data-corner="br-in"] b{right:0;bottom:0}
.g-mark[data-corner="ml"] b{left:calc(var(--gb) * -1 - 1px);top:calc(50% - var(--gb) / 2)}
.g-mark[data-corner="mr"] b{left:auto;right:calc(var(--gb) * -1 - 1px);top:calc(50% - var(--gb) / 2)}
.g-unavail{display:none}
.g-failed img{visibility:hidden}
.g-failed .g-unavail,.g-missing .g-unavail{position:absolute;inset:0;display:grid;place-items:center;color:var(--sand);font:600 16px/1.2 var(--cond);letter-spacing:.04em;background:var(--ink-1)}
.g-failed .g-mark{display:none}
.g-shot figcaption{margin-top:6px;color:var(--sand-dim);font-size:13.5px}
.g-small .g-zoom{width:min(100%,var(--nat));max-width:min(100%,var(--nat))} /* PROJ-34 W5: a definite width (was auto = shrink-to-fit), the frame inside is a size container */
.g-small .g-frame{width:min(100%,var(--nat))}

.g-limits{margin:0 0 26px;padding:16px 18px;border-left:3px solid var(--accent);background:rgba(255,107,31,.05)}
.g-limits ul{margin:0;padding-left:20px;display:grid;gap:6px}
.g-limits li{color:var(--bone-2);max-width:76ch}
.g-faq{margin:0 0 26px}
.g-faq details{border-bottom:1px solid var(--line)}
.g-faq details:first-of-type{border-top:1px solid var(--line)}
.g-faq summary{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 0;cursor:pointer;list-style:none;font:700 18px/1.3 var(--cond);color:var(--bone)}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::before{content:"+";flex:none;width:18px;color:var(--accent-hi);font:700 20px/1 var(--cond)}
.g-faq details[open] summary::before{content:"−"}
.g-faq details p{margin:0 0 14px 30px;max-width:72ch;color:var(--bone-2)}
.g-faq details{scroll-margin-top:56px}
.g-next{margin:8px 0 24px}
.g-next a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid var(--accent);color:var(--accent-hi);font:700 17px/1.2 var(--cond);letter-spacing:.04em;text-decoration:none}
.g-next a:hover{background:var(--accent);color:var(--on-accent)}
.g-foot-home{color:var(--bone-2);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.g-foot-home:hover{color:var(--accent-hi)}

.g-dialog{width:min(96vw,1480px);max-width:none;max-height:94vh;padding:12px;border:1px solid var(--line-strong);background:var(--ink-0);color:var(--bone)}
.g-dialog::backdrop{background:rgba(0,0,0,.82)}
.g-dialog-body .g-frame{width:min(100%,var(--nat,100%),calc((94vh - 90px) * var(--ar,1.5)));margin:0 auto}
.g-dialog form{display:flex;justify-content:flex-end;margin-top:10px}
.g-dialog-close{min-height:44px;padding:0 18px;border:1px solid var(--line-strong);background:var(--ink-1);color:var(--bone);font:700 15px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.g-dialog-close:hover{border-color:var(--accent)}
/* No smooth scrolling: deep links and the chapter list jump straight to the step (long page, lazy content). */