/* IVBIS — shared design system (locked tokens, voice rules per brief) */

:root {
  --ink-1000:#050E1F;
  --ink-900:#0B1F3A;
  --ink-800:#13294B;
  --ink-700:#1E3760;
  --ink-100:#F4F5F7;
  --ink-50:#FAFAFB;
  --ink-0:#FFFFFF;

  --accent-legacy:#0EA68C;
  --accent-greenfield:#3B72D1;
  --accent-ai:#F19A3A;
  --accent-outcome:#3DAA73;

  /* Accent shades for use as TEXT. Defaults are WCAG-AA-safe on light
     backgrounds; the dark-context rule below swaps them per section.
     Bright accents above remain for fills, borders, stripes and graphics. */
  --accent-legacy-text:#097A66;
  --accent-greenfield-text:#3461B8;
  --accent-ai-text:#946012;
  --accent-outcome-text:#26794C;

  --text-primary-dark:#0B1F3A;
  --text-secondary-dark:#475569;
  --text-primary-light:#F4F5F7;
  --text-secondary-light:#9AA8BD;

  --rule-dark:#1E2A44;
  --rule-light:#E4E7EC;

  --radius-card:16px;
  --radius-button:12px;
  --radius-pill:999px;

  --gutter:24px;
  --margin:96px;
  --max:1280px;
  --max-wide:1440px;
}

/* Dark sections / heroes / footer: accent TEXT uses dark-appropriate shades.
   Teal, amber and green stay bright (already AA-safe on dark); blue lightens.
   Light-footer pages reset --accent-*-text back on their own .footer. */
.dark, .dark-deep, .conversion, .footer, .footer-mini, .codeblock, .code-header, .sparql-surface,
.hero, .at-hero, .pt-hero, .eg-hero, .fm-hero, .cap-hero, .um-hero,
.gap, .platform, .principles, .facets, .integ, .context,
.commerce, .proc, .frame, .pf-recap, .where, .edge, .um-cap {
  --accent-legacy-text: var(--accent-legacy);
  --accent-greenfield-text: #7AA5EA;
  --accent-ai-text: var(--accent-ai);
  --accent-outcome-text: var(--accent-outcome);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings:"cv11","ss01","ss03";
}
@supports (font-variation-settings: normal) {
  html { font-family:'Inter var', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
}
body { background: var(--ink-100); color: var(--text-primary-dark); font-size:17px; line-height:1.6; }
::selection { background: var(--accent-ai); color: var(--ink-1000); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display:block; max-width:100%; }

.mono { font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* tabular figures: every mono-typed surface aligns numerals on a fixed grid so values don't jitter when they update */
.eyebrow, .crumb, .codeblock, .code-header, .footer-sig, .footer-col h5, .footer-tag, .nav__progress + *, .kbnav-hint, .nav__index, .cb-copy, .sev-tag, .chip {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* keynoun: a typographic underline that grows from the left on hover of its enclosing heading.
   use as <span class="keynoun">word</span> inside a .display / h1 / h2 / h3. */
.keynoun {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  padding-bottom: 0.08em;
  transition: background-size .55s cubic-bezier(.2,.7,.2,1);
}
.display:hover .keynoun,
h1:hover .keynoun, .h1:hover .keynoun,
h2:hover .keynoun, .h2:hover .keynoun,
h3:hover .keynoun, .h3:hover .keynoun,
.keynoun.is-lit { background-size: 100% 2px; }

/* layout */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--margin); }
.container--wide { max-width: var(--max-wide); }
.container--narrow { max-width: 760px; }
section { position: relative; }

.dark      { background: var(--ink-900);  color: var(--text-primary-light); }
.dark-deep { background: var(--ink-1000); color: var(--text-primary-light); }
.light     { background: var(--ink-100);  color: var(--text-primary-dark); }

.section-pad    { padding: 140px 0; }
.section-pad-sm { padding: 112px 0; }
.section-pad-xs { padding: 80px 0; }

/* type */
.eyebrow {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:13px; font-weight:500;
  letter-spacing:0.1em; text-transform: uppercase;
  color: var(--text-secondary-dark);
  display:inline-flex; align-items:center; gap:10px;
}
.dark .eyebrow, .dark-deep .eyebrow { color: var(--text-secondary-light); }
.eyebrow .tick { width:18px; height:1px; background: currentColor; opacity:.6; display:inline-block; }
.eyebrow.t-teal  { color: var(--accent-legacy-text); }
.eyebrow.t-blue  { color: var(--accent-greenfield-text); }
.eyebrow.t-amber { color: var(--accent-ai-text); }
.eyebrow.t-green { color: var(--accent-outcome-text); }

.h1 { font-size: clamp(40px, 6vw, 72px); font-weight:600; line-height:1.05; letter-spacing:-0.035em; margin:0; text-wrap:balance; }
.h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight:600; line-height:1.1; letter-spacing:-0.03em; margin:0; text-wrap:balance; }
.h2 em, .h1 em { font-style: italic; font-weight: 300; color: var(--text-secondary-dark); }
.dark .h2 em, .dark-deep .h2 em, .dark .h1 em, .dark-deep .h1 em { color: var(--text-secondary-light); }
.h3 { font-size: clamp(22px, 2vw, 28px); font-weight:600; line-height:1.25; letter-spacing:-0.015em; margin:0; }
.h3 em { font-weight:300; font-style:italic; color: var(--text-secondary-dark); }
.dark .h3 em, .dark-deep .h3 em { color: var(--text-secondary-light); }

.display {
  font-size: clamp(56px, 10vw, 128px);
  font-weight:600; line-height:0.95; letter-spacing:-0.045em;
  margin:0; text-wrap: balance;
}
.lede { font-size: clamp(18px, 1.5vw, 22px); line-height:1.5; max-width:60ch; color: var(--text-secondary-dark); font-weight:400; }
.dark .lede, .dark-deep .lede { color: var(--text-secondary-light); }

.body { font-size:17px; line-height:1.6; max-width:70ch; }
.body--narrow { max-width:56ch; }
.small { font-size:14px; line-height:1.5; color: var(--text-secondary-dark); }
.dark .small, .dark-deep .small { color: var(--text-secondary-light); }

/* a11y contrast — page-specific dark sections that don't carry the .dark utility.
   Lifts secondary text (heading em / lede / small / plain eyebrow) to the light
   variant. Verified: these sections contain no light-background content, so a
   section-wide scope is safe. */
.facets :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em, .integ :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em,
.context :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em, .where :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em,
.edge :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em, .frame :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em,
.pf-recap :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em, .commerce :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em,
.proc :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em, .um-hero :is(h1,h2,h3,h4,.h1,.h2,.h3,.display) em,
.facets .lede, .integ .lede, .context .lede, .where .lede, .edge .lede,
.frame .lede, .pf-recap .lede, .commerce .lede, .proc .lede, .um-hero .lede,
.facets .small, .integ .small, .context .small, .where .small, .edge .small,
.frame .small, .pf-recap .small, .commerce .small, .proc .small, .um-hero .small,
.facets .eyebrow:not([class*="t-"]), .integ .eyebrow:not([class*="t-"]), .context .eyebrow:not([class*="t-"]),
.where .eyebrow:not([class*="t-"]), .edge .eyebrow:not([class*="t-"]), .frame .eyebrow:not([class*="t-"]),
.pf-recap .eyebrow:not([class*="t-"]), .commerce .eyebrow:not([class*="t-"]), .proc .eyebrow:not([class*="t-"]),
.um-hero .eyebrow:not([class*="t-"]) {
  color: var(--text-secondary-light);
}

.sec-head { display:flex; flex-direction: column; gap: 24px; max-width: 920px; }
.sec-head .lede { margin-top: 4px; }

/* nav */
.nav {
  position: sticky; top:0; z-index:50;
  background: rgba(11,31,58,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  color: var(--text-primary-light);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* scroll progress — thin line riding the bottom of the nav */
.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 1.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-legacy), var(--accent-greenfield) 45%, var(--accent-ai));
  transition: width 80ms linear;
  pointer-events: none;
  opacity: 0.85;
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; height: 72px; }
.wordmark { font-weight:600; letter-spacing:-0.01em; font-size:18px; transition: letter-spacing .35s ease; }
.wordmark:hover { letter-spacing: 0.06em; }
.wordmark a { display:inline-flex; align-items:center; gap:10px; }
.nav__links { display:flex; gap:36px; }
.nav__links a { font-size:14px; color: var(--text-secondary-light); transition: color .2s ease; }
.nav__links a:hover, .nav__links a.is-active { color: var(--text-primary-light); }
.nav__cta {
  background: var(--ink-100); color: var(--ink-900);
  border:0; border-radius: var(--radius-button);
  padding: 10px 18px; font-size:14px; font-weight:500;
  letter-spacing:-0.005em;
  transition: transform .15s ease, background .15s ease;
}
.nav__cta:hover { background:#fff; transform: translateY(-1px); }
.nav__burger { display:none; background:none; border:0; color: inherit; width:40px; height:40px; align-items:center; justify-content:center; }
.nav__burger span { width:18px; height:1.5px; background: currentColor; position: relative; }
.nav__burger span::before, .nav__burger span::after { content:""; position:absolute; left:0; width:18px; height:1.5px; background: currentColor; }
.nav__burger span::before { top:-6px; }
.nav__burger span::after  { top:6px; }
.mobile-menu { display:none; position: fixed; inset:72px 0 0 0; background: var(--ink-900); padding: 32px var(--margin); z-index:40; flex-direction: column; gap: 24px; }
.mobile-menu.open { display:flex; }
.mobile-menu a { font-size:24px; font-weight:500; color: var(--text-primary-light); }
.mobile-menu .nav__cta { align-self: flex-start; margin-top: 12px; color: var(--ink-900); font-size: 16px; padding: 14px 24px; }

/* buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  border-radius: var(--radius-button);
  padding: 16px 22px;
  font-size:15px; font-weight:500; letter-spacing:-0.005em;
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--ink-100); color: var(--ink-900); }
.btn--primary:hover { background:#fff; transform: translateY(-1px); }
.btn--ghost { color: var(--text-primary-light); border-color: rgba(255,255,255,0.18); }
.btn--ghost:hover { border-color: rgba(255,255,255,0.45); }
.btn--light-ghost { color: var(--ink-900); border-color: var(--rule-light); }
.btn--light-ghost:hover { border-color: var(--ink-900); }
.btn .arr { display:inline-block; transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

.link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link .arr { transition: transform .2s ease; }
.link:hover .arr { transform: translateX(3px); }

/* chips */
.chip {
  display:inline-flex; align-items:center;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border:1px solid var(--rule-light);
  background: #fff;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-primary-dark);
}
.chip.t-teal  { border-color: var(--accent-legacy-text);     color: var(--accent-legacy-text); }
.chip.t-blue  { border-color: var(--accent-greenfield-text); color: var(--accent-greenfield-text); }
.chip.t-amber { border-color: var(--accent-ai-text);         color: var(--accent-ai-text); }
.chip.t-green { border-color: var(--accent-outcome-text);    color: var(--accent-outcome-text); }
.dark .chip, .dark-deep .chip { background: rgba(255,255,255,0.03); border-color: var(--rule-dark); color: var(--text-primary-light); }
.chip-row { display:flex; flex-wrap: wrap; gap: 8px; }

/* card primitive */
.card {
  background: #fff;
  border:1px solid var(--rule-light);
  border-radius: var(--radius-card);
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.card--dark { background: var(--ink-800); border-color: var(--rule-dark); }
.card--hero-pad { padding: 48px; }
.card--dense    { padding: 24px; }
.card::before { content:""; position: absolute; top:0; left:0; right:0; height:2px; background: transparent; }
.card.t-teal::before  { background: var(--accent-legacy); }
.card.t-blue::before  { background: var(--accent-greenfield); }
.card.t-amber::before { background: var(--accent-ai); }
.card.t-green::before { background: var(--accent-outcome); }

/* footer */
.footer { background: var(--ink-1000); color: var(--text-primary-light); padding: 80px 0 56px; border-top: 1px solid var(--rule-dark); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; align-items: start; }
.footer-brand .wordmark { font-size: 28px; font-weight: 600; letter-spacing:-0.02em; color: #fff; margin-bottom: 24px; display:block; }
.footer-tag { font-family:'JetBrains Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.04em; line-height: 1.6; }
.footer-tag .t-teal  { color: var(--accent-legacy-text); }
.footer-tag .t-blue  { color: var(--accent-greenfield-text); }
.footer-tag .t-amber { color: var(--accent-ai-text); }
.footer-col h5 {
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary-light);
  margin: 0 0 20px 0;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--text-primary-light); font-size: 15px; }
.footer-col a:hover { color: var(--accent-greenfield-text); }
.footer-sig { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule-dark); display:flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-secondary-light); }

/* breadcrumb */
.crumb { display:flex; gap:10px; align-items:center; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform: uppercase; color: var(--text-secondary-light); }
.crumb a { opacity:.7; }
.crumb a:hover { opacity:1; }
.crumb .sep { opacity:.4; }
.dark .crumb, .dark-deep .crumb { color: var(--text-secondary-light); }
.light .crumb { color: var(--text-secondary-dark); }
/* a11y: light-themed hero pages — breadcrumb needs the dark secondary colour,
   and the dimming opacities are dropped so links/separator stay AA-legible. */
.ct-hero .crumb, .doc-hero .crumb, .sm-hero .crumb { color: var(--text-secondary-dark); }
.ct-hero .crumb a, .doc-hero .crumb a, .sm-hero .crumb a,
.ct-hero .crumb .sep, .doc-hero .crumb .sep, .sm-hero .crumb .sep { opacity: 1; }

/* code surfaces (technical pages) */
.codeblock {
  background: var(--ink-1000);
  color: #C9D5EA;
  border-radius: var(--radius-card);
  padding: 24px 28px;
  font-family:'JetBrains Mono', monospace;
  font-size: 13.5px;
  line-height: 1.65;
  overflow:auto;
  border: 1px solid var(--rule-dark);
  white-space: pre;
}
.codeblock .c-key  { color: #F19A3A; }
.codeblock .c-str  { color: #0EA68C; }
.codeblock .c-num  { color: #3B72D1; }
.codeblock .c-cmt  { color: #6B7B95; font-style: italic; }
.codeblock .c-fn   { color: #C5D2EB; font-weight:500; }
.codeblock .c-pun  { color: #6B7B95; }
.codeblock .c-bool { color: #3DAA73; }

.code-header {
  display:flex; align-items:center; justify-content: space-between;
  padding: 12px 18px;
  background: var(--ink-900);
  border: 1px solid var(--rule-dark);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  font-family:'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.code-header + .codeblock { border-radius: 0 0 var(--radius-card) var(--radius-card); border-top: 0; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* responsive */
@media (max-width: 1180px) {
  :root { --margin: 64px; }
}
@media (max-width: 960px) {
  :root { --margin: 40px; }
  .nav__links { display:none; }
  .nav .nav__cta { display:none; }
  .nav__burger { display:inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --margin: 20px; }
  .section-pad { padding: 88px 0; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============ small delights ============ */

/* copy-to-clipboard pill on code blocks */
.codeblock { position: relative; }
.cb-copy {
  position: absolute; top: 10px; right: 10px;
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-secondary-light);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.codeblock:hover .cb-copy,
.cb-copy:focus-visible { opacity: 1; transform: translateY(0); }
.cb-copy:hover { color: #fff; border-color: rgba(255,255,255,0.30); background: rgba(255,255,255,0.08); }
.cb-copy.is-copied { color: var(--accent-outcome-text); border-color: rgba(61,170,115,0.45); background: rgba(61,170,115,0.10); opacity: 1; transform: translateY(0); }
.cb-copy svg { width: 12px; height: 12px; }

/* keyboard quick-nav hint pill */
.kbnav-hint {
  position: fixed; left: 50%; bottom: 32px;
  transform: translate(-50%, 12px);
  background: var(--ink-1000);
  color: var(--text-primary-light);
  border: 1px solid var(--rule-dark);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 18px 48px rgba(0,0,0,0.4);
  max-width: calc(100vw - 32px);
}
.kbnav-hint.show { opacity: 1; transform: translate(-50%, 0); }
.kbnav-hint .kbd {
  display:inline-block; padding: 3px 7px;
  background: var(--ink-800);
  border: 1px solid var(--rule-dark);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-primary-light);
  letter-spacing: 0.04em;
}
.kbnav-hint .label { color: var(--text-secondary-light); }
.kbnav-hint .sep { color: var(--rule-dark); }

/* footer wordmark: subtle letter breath on hover */
.footer-brand .wordmark { transition: letter-spacing .35s ease; cursor: default; }
.footer-brand .wordmark:hover { letter-spacing: 0.04em; }

/* editorial: pull-quote left rule draws in on enter. Use scaleY against a
   bottom-stretched pseudo so the trick works regardless of parent height. */
.case-quote { position: relative; border-left-color: transparent !important; }
.case-quote::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--product-accent, var(--accent-greenfield));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}
.case-quote.in::after { transform: scaleY(1); }

/* diagram zoom — click anything tagged [data-zoomable] to open it centered */
[data-zoomable] { cursor: zoom-in; }
.viz-zoom {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,14,31,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 80px 48px;
  opacity: 0;
  transition: opacity .3s ease;
}
.viz-zoom.show { opacity: 1; }
.viz-zoom__stage {
  position: relative;
  max-width: 1200px;
  width: 100%;
  max-height: 100%;
  transform: scale(.96) translateY(8px);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-zoom.show .viz-zoom__stage { transform: scale(1) translateY(0); }
.viz-zoom__stage > * {
  width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  position: static !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 !important;
  /* allow the cloned node to expand to fill stage; SVGs auto-scale */
}
.viz-zoom__close {
  position: absolute; top: 20px; right: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 8px 14px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary-light);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  z-index: 1;
}
.viz-zoom__close:hover { color: #fff; border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.10); }
.viz-zoom__close .kbd {
  padding: 2px 6px;
  background: var(--ink-800);
  border: 1px solid var(--rule-dark);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-primary-light);
}
@media (prefers-reduced-motion: reduce) {
  .viz-zoom, .viz-zoom__stage { transition: none; }
}

/* density: floating section index on the right edge of the viewport.
   Reads [data-screen-label] elements; shows current / total + a vertical scrub. */
.page-index {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-secondary-light);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.page-index.is-ready { opacity: 1; }
.page-index .pi-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-transform: uppercase;
  background: rgba(11,31,58,0.72);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text-primary-light);
  pointer-events: auto;
}
.page-index .pi-count .cur { color: var(--accent-greenfield-text); }
.page-index .pi-count .sep { opacity: 0.4; margin: 0 4px; }
.page-index .pi-ticks {
  display:flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}
.page-index .pi-tick {
  width: 16px; height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: width .25s ease, opacity .25s ease, background .25s ease;
  cursor: pointer;
  display:block;
}
.page-index .pi-tick.is-active { width: 26px; opacity: 1; background: var(--accent-greenfield); }
.page-index .pi-tick:hover { opacity: 0.9; width: 22px; }
.page-index .pi-label {
  position: absolute;
  right: 100%;
  margin-right: 14px;
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary-light);
  background: rgba(11,31,58,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 4px 8px;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.page-index .pi-tick-wrap { position: relative; display: block; }
.page-index .pi-tick-wrap:hover .pi-label { opacity: 1; transform: translateX(0); }

/* light pages get darker chrome for the index */
body.light-bg .page-index .pi-count,
body:not(.dark-page) .page-index .pi-count {
  background: rgba(255,255,255,0.85);
  border-color: var(--rule-light);
  color: var(--ink-900);
}

@media (max-width: 1180px) { .page-index { display: none; } }
@media (prefers-reduced-motion: reduce) { .page-index .pi-tick { transition: none; } }