/* gc-toc: in-page navigation built from the page's own headings (approved by Khalid 2026-10-11, "variant D").
   Phone and tablet (under 1024px): a strip of section chips under the site menu, shown when the reader scrolls UP; one tap jumps.
   Desktop: a rail floating in the left page margin. The content column keeps its own width and centring; the rail takes
   what margin is left (140 to 224px) and steps down to ticks on the left edge when the margin is thinner than that.
   Nothing shows before the reader has passed the first section, so the first screen is untouched.
   Behaviour: js/gc-toc.src.js. Checks: dev-tools/page-upgrade/gc-toc-test.js. Design record: dev-assets/nav-mock-2026-10-11/. */
:root{--gct-a:var(--gct-accent,#0f5c47);--gct-ink:#17202b;--gct-mut:#64707d;--gct-line:#e3e6e1;--gct-surface:#fff;--gct-top:56px}
html.gct-on h2[id],html.gct-on section[id]{scroll-margin-top:calc(var(--gct-top) + 60px)}

/* reading progress hairline (phone and tablet) */
.gct-progress{position:fixed;left:0;right:0;top:var(--gct-top);height:3px;z-index:890;pointer-events:none;opacity:0;transition:opacity .2s;display:none}
html.gct-usebar .gct-progress{display:block}
.gct-progress.on{opacity:1}
.gct-progress i{display:block;height:100%;width:calc(var(--gct-p,0) * 100%);background:var(--gct-a);border-radius:0 2px 2px 0}

/* chip strip (phone and tablet) */
.gct-strip{position:fixed;left:0;right:0;top:var(--gct-top);z-index:889;display:none;gap:6px;padding:7px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--gct-line);
  background:color-mix(in srgb,var(--gct-surface) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translateY(-110%);visibility:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s linear .22s;box-shadow:0 6px 16px -12px rgba(15,23,42,.35)}
.gct-strip::-webkit-scrollbar{display:none}
.gct-strip.show{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.2,.7,.2,1),visibility 0s}
html.gct-usebar .gct-strip{display:flex}
.gct-strip a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--gct-line);border-radius:999px;background:var(--gct-surface);color:#46515f;text-decoration:none;font-size:14px;line-height:1.2;white-space:nowrap}
.gct-strip a .i{font-size:11.5px;font-weight:700;color:var(--gct-mut);font-variant-numeric:tabular-nums}
.gct-strip a.past{color:var(--gct-mut)}
.gct-strip a.now{background:var(--gct-a);border-color:var(--gct-a);color:#fff;font-weight:650}
.gct-strip a.now .i{color:rgba(255,255,255,.8)}
.gct-strip a:focus-visible{outline:2px solid var(--gct-a);outline-offset:2px}

/* rail (desktop, in the left margin) */
nav.gct-rail{position:fixed;top:calc(var(--gct-top) + 36px);left:var(--gct-rl,12px);width:var(--gct-rw,200px);z-index:870;display:none;opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .2s,transform .2s,visibility 0s linear .2s;font-size:13px;line-height:1.35;font-family:inherit}
html.gct-d-rail nav.gct-rail{display:block}
nav.gct-rail.show{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s,visibility 0s}
nav.gct-rail .h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 10px 14px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gct-mut)}
nav.gct-rail .h b{font-variant-numeric:tabular-nums;color:var(--gct-a);letter-spacing:.02em}
nav.gct-rail ol{list-style:none;margin:0;padding:0;position:relative;max-height:calc(100vh - var(--gct-top) - 130px);overflow:auto;scrollbar-width:thin}
nav.gct-rail ol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gct-line);border-radius:1px}
nav.gct-rail li{margin:0;padding:0}
nav.gct-rail a{display:block;font-size:13px;font-weight:400;border:0;position:relative;padding:5px 8px 5px 14px;margin:0;border-radius:0 6px 6px 0;color:var(--gct-mut);text-decoration:none;overflow-wrap:anywhere;transition:color .15s,background .15s}
nav.gct-rail a:hover{color:var(--gct-ink);background:color-mix(in srgb,var(--gct-a) 6%,transparent)}
nav.gct-rail a.past{color:color-mix(in srgb,var(--gct-mut) 78%,transparent)}
nav.gct-rail a.now{color:var(--gct-ink);font-weight:650}
nav.gct-rail a.now::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--gct-a);border-radius:1px}
nav.gct-rail a:focus-visible{outline:2px solid var(--gct-a);outline-offset:1px}

/* ticks (desktop, when the margin is too thin for the rail) */
.gct-ticks{position:fixed;left:4px;top:50%;transform:translateY(-50%);z-index:880;display:none;flex-direction:column;align-items:flex-start;gap:0;padding:10px 6px;border-radius:14px;opacity:0;visibility:hidden;transition:opacity .2s,background .18s,box-shadow .18s,visibility 0s linear .2s}
html.gct-d-ticks .gct-ticks{display:flex}
.gct-ticks.show{opacity:1;visibility:visible;transition:opacity .2s,background .18s,box-shadow .18s,visibility 0s}
.gct-ticks a{display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:10px;height:22px;text-decoration:none;color:var(--gct-mut);font-size:12.5px;line-height:1;white-space:nowrap}
.gct-ticks a span{max-width:0;opacity:0;overflow:hidden;transition:max-width .2s,opacity .15s}
.gct-ticks a i{display:block;width:14px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--gct-mut) 55%,transparent);transition:width .15s,background .15s}
.gct-ticks a.past i{background:color-mix(in srgb,var(--gct-a) 45%,transparent)}
.gct-ticks a.now{color:var(--gct-ink);font-weight:650}
.gct-ticks a.now i{width:22px;height:3px;background:var(--gct-a)}
.gct-ticks:hover,.gct-ticks:focus-within{background:color-mix(in srgb,var(--gct-surface) 96%,transparent);box-shadow:0 10px 30px -14px rgba(15,23,42,.4),0 0 0 1px var(--gct-line)}
.gct-ticks:hover a span,.gct-ticks:focus-within a span{max-width:230px;opacity:1}
.gct-ticks a:hover{color:var(--gct-ink)}
.gct-ticks a:hover i{width:22px;background:var(--gct-a)}
.gct-ticks a:focus-visible{outline:2px solid var(--gct-a);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.gct-strip,.gct-progress,nav.gct-rail,.gct-ticks,.gct-ticks a span,.gct-ticks a i{transition:none}}
@media print{.gct-strip,.gct-progress,nav.gct-rail,.gct-ticks{display:none!important}}