/* Quodra Docs — brand-matched, static. Dark like the product; readable like a book. */
:root {
  --bg: #08090a; --bg-2: #0e0f11; --panel: #131415; --panel-2: #1a1b1c;
  --border: #232426; --border-2: #2d2d2f;
  --text: #E7E9EC; --text-soft: #B4B7BD; --muted: #8A8D93; --faint: #9699A1;
  --accent: #8A6BFF; --accent-strong: #7C4DFF; --accent-soft: rgba(124,77,255,.14);
  --accent-quiet: #B7A6FF;
  --code-bg: #0c0d0f; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Mona Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --grotesk: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sidebar: 280px; --toc: 220px; --measure: 820px;
}
/* Light theme — paper like the product, readable like a book. Only the colour
   tokens flip; code panes deliberately stay dark (a light page with dark code
   is the calmer read), so --code-bg only lightens a touch for edge contrast. */
:root[data-theme="light"] {
  --bg: #FBFAF6; --bg-2: #F1EFE8; --panel: #FFFFFF; --panel-2: #F2F0E9;
  --border: #E4E0D4; --border-2: #D5D0C2;
  --text: #1B1C1F; --text-soft: #43464C; --muted: #6C6F76; --faint: #686B72;
  --accent: #6B47E0; --accent-strong: #5B2EE0; --accent-soft: rgba(91,46,224,.10);
  --accent-quiet: #5B2EE0;
  --code-bg: #14151A;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 16px; line-height: 1.68; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(900px 500px at 88% -8%, rgba(124,77,255,.08), transparent 70%); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc p a, .doc li a, .dfoot a { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 100; }

/* header */
/* The masthead is the site's: the same brand, the same four page links, the
   same small Sign in button — plus the theme switch the book alone offers. */
.dhead { position: sticky; top: 0; z-index: 50; height: 64px; display: flex; align-items: center;
  gap: 16px; padding: 0 24px; background: rgba(8,9,10,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); }
.dhead__brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-family: var(--grotesk);
  font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.dhead__brand:hover { text-decoration: none; }
.dhead__docs { color: var(--accent-quiet, #B7A6FF); font-weight: 500; opacity: .85; }
.dhead__site { display: flex; gap: 4px; margin-left: 20px; }
.dhead__site a { padding: 8px 14px; border-radius: 6px; font-size: 13.5px; color: var(--text-soft); }
.dhead__site a:hover, .dhead__site a[aria-current] { color: var(--text); text-decoration: none; }
.dhead__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dhead__cta { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 9px 0 11px; border-radius: 6px;
  background: #dfe0e2; color: #050506 !important; font-size: 12px; font-weight: 500; letter-spacing: -.065px; transition: background .18s; }
.dhead__cta:hover { background: #f4f5f5; text-decoration: none; }
.dhead__cta .arr { width: 14px; height: 14px; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.dhead__cta:hover .arr { transform: translateX(3px); }
.dhead__menu { display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; padding: 0; border: 1px solid #222224; border-radius: 6px;
  background: #131415; color: var(--text-soft); font: inherit; font-size: 22px; cursor: pointer; }
.dhead__theme { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid #222224; border-radius: 6px; background: #131415;
  color: #d5d7db; font: inherit; font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .18s; }
.dhead__theme:hover { color: #f4f5f5; background: #1a1b1c; border-color: #2d2d2f; }
.dhead__theme svg { width: 14px; height: 14px; }
:root[data-theme="light"] .dhead { background: rgba(251,250,246,.9); }
:root[data-theme="light"] .dhead__cta { background: #16191e; color: #fbfaf5 !important; }
:root[data-theme="light"] .dhead__cta:hover { background: #2a2e36; }
:root[data-theme="light"] .dhead__theme, :root[data-theme="light"] .dhead__menu { background: #fff; border-color: #d6d3c9; color: #14171c; }
:root[data-theme="light"] .dhead__theme:hover { background: #f4f3ee; }
.nav-sec--site { display: none; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border); }

/* layout */
/* Full-width: the shell fills the viewport so the header and the columns share
   the same edges. The reading column keeps its measure and sits centred in the
   fluid middle track, so wide screens read as balanced, not sprawled. */
.dlayout { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--toc);
  width: 100%; align-items: start; }
.dnav { position: sticky; top: 64px; align-self: start; height: calc(100vh - 64px);
  overflow-y: auto; padding: 26px 14px 60px 26px; border-right: 1px solid var(--border); }
.nav-sec { margin-bottom: 22px; }
.nav-sec__title { font-size: 11.5px; font-weight: 680; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding: 0 10px 8px; }
.nav-link { display: block; padding: 6px 10px; border-radius: 7px; color: var(--text-soft);
  font-size: 14.5px; line-height: 1.4; }
.nav-link:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav-link.on { background: var(--accent-soft); color: var(--accent-quiet, #C3B4FF); font-weight: 560;
  box-shadow: inset 2px 0 0 var(--accent-strong); }

/* content */
.dmain { min-width: 0; padding: 40px 56px 80px; }
.doc { max-width: var(--measure); margin-inline: auto; }
.doc__eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; }
.doc h1 { font-family: var(--display); font-size: 40px; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; font-weight: 600; }
.doc__lede { font-size: 19px; line-height: 1.6; color: var(--text-soft); margin: 0 0 8px; }
.doc h2 { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; margin: 46px 0 14px; padding-top: 10px; font-weight: 600; scroll-margin-top: 80px; }
.doc h3 { font-family: var(--display); font-size: 18px; letter-spacing: -.01em; margin: 30px 0 10px; font-weight: 600; scroll-margin-top: 80px; }
.doc p { margin: 0 0 16px; color: var(--text-soft); }
.doc strong { color: var(--text); font-weight: 620; }
.doc a.anchor { margin-left: 8px; color: var(--faint); opacity: 0; font-weight: 400; text-decoration: none; }
.doc h2:hover .anchor, .doc h3:hover .anchor { opacity: 1; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 24px; color: var(--text-soft); }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--faint); }
.doc code { font-family: var(--mono); font-size: .875em; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1.5px 6px; color: #D6CFFF; }
:root[data-theme="light"] .doc code { color: #5B2EE0; background: #F1EDFB; border-color: #E1D9F7; }
.doc pre.code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 20px; position: relative; }
.doc pre.code code { background: none; border: 0; padding: 0; color: #C9CDD4; font-size: 13.5px; line-height: 1.65; }
.doc pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 10px; right: 14px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.doc img { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); margin: 6px 0 20px; }

/* callouts */
.callout { display: grid; grid-template-columns: auto 1fr; gap: 4px 0; margin: 0 0 20px;
  padding: 14px 16px; border-radius: 11px; border: 1px solid var(--border-2); background: var(--panel); }
.callout__label { grid-column: 1 / -1; font-size: 12px; font-weight: 680; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 4px; }
.callout p { margin: 0; color: var(--text-soft); }
.callout--note { border-color: rgba(124,77,255,.35); background: rgba(124,77,255,.07); }
.callout--note .callout__label { color: var(--accent-quiet, #B7A6FF); }
.callout--tip { border-color: rgba(46,212,122,.3); background: rgba(46,212,122,.06); }
.callout--tip .callout__label { color: #4FD79A; }
.callout--warn { border-color: rgba(245,179,1,.32); background: rgba(245,179,1,.06); }
.callout--warn .callout__label { color: #F5B301; }
/* deeper label inks for contrast on the light callout tints */
:root[data-theme="light"] .callout--tip .callout__label { color: #12925A; }
:root[data-theme="light"] .callout--warn .callout__label { color: #9A6B00; }

/* tables */
.tablewrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--border); border-radius: 11px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
th { background: var(--panel); color: var(--text); font-weight: 620; font-size: 13px;
  letter-spacing: .02em; }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--text-soft); }
td code, th code { font-size: .85em; }

/* pager + footer */
.pager { display: flex; justify-content: space-between; gap: 16px; margin: 56px 0 0; }
.pager__btn { flex: 1; max-width: 46%; padding: 14px 18px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--panel); display: block; }
.pager__btn:hover { border-color: var(--border-2); text-decoration: none; background: var(--panel-2); }
.pager__btn span { display: block; font-size: 12.5px; color: var(--faint); margin-bottom: 3px; }
.pager__btn b { color: var(--text); font-weight: 580; }
.pager__btn--next { text-align: right; }
.dfoot { max-width: var(--measure); margin: 60px auto 0; padding-top: 24px; border-top: 1px solid var(--border);
  color: var(--faint); font-size: 13.5px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.dfoot nav { display: flex; gap: 18px; }
.dfoot nav a { color: var(--muted); text-decoration: none; }
.dfoot nav a:hover { color: var(--text); }

/* on-this-page */
.onthis { position: sticky; top: 64px; align-self: start; padding: 44px 24px 40px 8px; font-size: 13.5px; }
.onthis__title { font-size: 11.5px; font-weight: 680; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px; }
.onthis a { display: block; color: var(--muted); padding: 4px 0; line-height: 1.4; }
.onthis a:hover { color: var(--text); text-decoration: none; }

/* responsive */
@media (max-width: 1180px) { .dlayout { grid-template-columns: var(--sidebar) minmax(0,1fr); } .onthis { display: none; } }
@media (max-width: 860px) {
  .docs-nav-ready .dhead__menu { display: inline-flex; }
  .dlayout { grid-template-columns: 1fr; }
  /* Without JavaScript, keep the book navigation reachable in normal flow. */
  .dnav { position: static; height: auto; width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  .docs-nav-ready .dnav { position: fixed; inset: 64px 0 0 0; background: var(--bg);
    z-index: 40; display: none; overscroll-behavior: contain; }
  .docs-nav-open .dnav { display: block; }
  .docs-nav-open, .docs-nav-open body { overflow: hidden; }
  .dmain { padding: 28px 22px 64px; }
  .doc h1 { font-size: 32px; }
}
@media (max-width: 860px) { .dhead__site { display: none; } .nav-sec--site { display: block; } }
@media (max-width: 640px) {
  .dhead { padding: 0 12px; gap: 8px; }
  .dhead__docs, .dhead__theme [data-theme-label] { display: none; }
  .dhead__actions { gap: 8px; }
  .dhead__theme { justify-content: center; width: 36px; height: 36px; padding: 0; }
  .dhead__cta { height: 36px; padding: 0 10px 0 12px; white-space: nowrap; }
}

/* figures — screenshots, recordings and legacy looping videos */
.fig { margin: 4px 0 24px; }
.fig img, .fig video { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-2); }
.fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--faint); text-align: center; line-height: 1.5; }
.fig video { outline: none; }
.fig video[controls]:focus-visible, .fig__expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fig__expand { display: block; border-radius: 12px; cursor: zoom-in; }
.fig__expand img { margin: 0; }
.fig__expand[href$="/equation-inspector.webp"], .fig__expand[href$="/equation-inspector-light.webp"],
.fig__expand[href$="/equation-calculation.webp"], .fig__expand[href$="/equation-calculation-light.webp"],
.fig__expand[href$="/equation-parameter-links.webp"], .fig__expand[href$="/equation-parameter-links-light.webp"] {
  width: 100%; max-width: 360px; margin-inline: auto;
}
/* Themed screenshots: show the capture that matches the theme. Dark is the
   default; light swaps in its sibling. Hide the full link when expandable so
   the unused theme does not leave an empty keyboard target. */
.fig .fig__light { display: none; }
:root[data-theme="light"] .fig .fig__dark { display: none; }
:root[data-theme="light"] .fig .fig__light { display: block; }