/* Site polish pass 1 (2026-09-29). Shared presentation rules for quantgpt.co.
   Each page links this file AFTER its own <style>, so a rule here wins a tie
   on specificity and a page keeps everything it declares that this file does
   not touch. Text never changes here: motion, hover and focus states, table
   readability, card surfaces and spacing only. js/polish.js adds the
   html.pz-motion class (viewer allows motion, IntersectionObserver exists)
   and the pz-hide / pz-in classes on the elements a page names in
   body[data-reveal]. Without the script nothing here hides anything. */

/* ---- open fonts (2026-10-05): the SIL OFL stand-ins for the Windows-only
   brand faces, self-hosted from /fonts/ (licences and sha256 in
   fonts/SOURCES.txt). Every page's stack names the Windows face first
   ("Segoe UI", Selawik / "Bahnschrift", "D-DIN" / Consolas, Cascadia Mono
   Web), so Windows keeps its own face and never fetches these; a Mac, an
   iPhone, Android or Linux fetches only the weights a page draws.
   scripts/open_fonts.py keeps the stacks; pages that do not load this file
   carry the same rules inline. The size and line overrides give each one
   the Windows face's room: Selawik takes Segoe UI's line box (its widths
   already match), D-DIN at 109% sets a headline the same length as
   Bahnschrift does (its caps stand 6% taller), Cascadia Mono at 94% has
   Consolas's 0.55em advance, so headlines wrap and tables line up the way
   they do on Windows. ---- */
@font-face { font-family: "Selawik"; font-style: normal; font-weight: 400; font-display: swap;
  ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  src: url("/fonts/selawik-regular.woff2?v=1") format("woff2"); }
@font-face { font-family: "Selawik"; font-style: normal; font-weight: 600; font-display: swap;
  ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  src: url("/fonts/selawik-semibold.woff2?v=1") format("woff2"); }
@font-face { font-family: "Selawik"; font-style: normal; font-weight: 700; font-display: swap;
  ascent-override: 107.9%; descent-override: 25.1%; line-gap-override: 0%;
  src: url("/fonts/selawik-bold.woff2?v=1") format("woff2"); }
@font-face { font-family: "D-DIN"; font-style: normal; font-weight: 400; font-display: swap;
  size-adjust: 109%; ascent-override: 91.2%; descent-override: 18.9%; line-gap-override: 0%;
  src: url("/fonts/d-din-regular.woff2?v=1") format("woff2"); }
@font-face { font-family: "D-DIN"; font-style: normal; font-weight: 700; font-display: swap;
  size-adjust: 109%; ascent-override: 91.2%; descent-override: 18.9%; line-gap-override: 0%;
  src: url("/fonts/d-din-bold.woff2?v=1") format("woff2"); }
@font-face { font-family: "Cascadia Mono Web"; font-style: normal; font-weight: 200 700; font-display: swap;
  size-adjust: 94%; ascent-override: 97.9%; descent-override: 26.7%; line-gap-override: 0%;
  src: url("/fonts/cascadia-mono-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; }

:root {
  --pz-amber: #F0A83C;
  --pz-amber-hover: #F6B957;
  --pz-line: #212A38;
  --pz-line2: #2E3A4D;
  --pz-line-hover: #3A475B;
  --pz-ease: cubic-bezier(.2, .7, .25, 1);
  --pz-fast: 160ms;
  --pz-rise: 360ms;
}

/* ---- type: no orphan headings, tidier paragraph rag, one underline offset ---- */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li, dd, figcaption) { text-wrap: pretty; }
:where(a) { text-underline-offset: .16em; text-decoration-thickness: 1px; }

/* ---- the site navigation (nav.js draws #qg-sitenav under the ticker):
   a slow amber underline that sweeps in from the left on hover and focus.
   The current page keeps its underline, drawn the same way. ---- */
#qg-sitenav .links a { position: relative; border-bottom-color: transparent; }
#qg-sitenav .links a.here { border-bottom-color: transparent; }
#qg-sitenav .links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--pz-amber); transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--pz-ease);
}
#qg-sitenav .links a:hover::after,
#qg-sitenav .links a:focus-visible::after,
#qg-sitenav .links a.here::after { transform: scaleX(1); }
#qg-sitenav .launch {
  transition: background-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease);
}
#qg-sitenav .launch:hover { transform: translateY(-1px); }
#qg-sitenav .launch:active { transform: translateY(0); background: #D9932F; }

/* ---- the navigation's room, held before nav.js draws it. nav.js is
   deferred, so the row arrives after the first paint and pushed the whole
   page down: on a phone a layout shift of 0.11 on every page (perf sweep
   2026-10-04, docs/audits/perf-sweep-2026-10-04). Until nav.js has drawn
   it (it sets html.qg-nav-drawn in the same frame) the ticker keeps a
   bottom margin the height of the row with its SIGN IN door (the label
   nav.js draws first on quantgpt.co, and what most visitors keep),
   measured on the home page at each width: the links wrap onto 2 rows
   from 482 to 641px, and fold behind MENU (one row) at 481px and under
   (2026-10-07). Ticker pages only (every one loads nav.js): on the masthead
   pages the row sits in a grid with a gap, a margin there over-reserves.
   If the nav links, their labels or nav.js's row CSS change, measure the
   row again and update these. ---- */
html:not(.qg-nav-drawn) .opsbar { margin-bottom: 43.45px; }
@media (max-width: 641px) { html:not(.qg-nav-drawn) .opsbar { margin-bottom: 70.34px; } }
@media (max-width: 481px) { html:not(.qg-nav-drawn) .opsbar { margin-bottom: 51.38px; } }

/* ---- section entry: fade and rise, once, on the elements the page names.
   The script hides only what sits below the fold when it runs, so nothing
   already on screen blinks. ---- */
html.pz-motion .pz-hide {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--pz-rise) var(--pz-ease), transform var(--pz-rise) var(--pz-ease);
}
html.pz-motion .pz-hide.pz-in { opacity: 1; transform: none; }

/* ---- the home, below the hero ---- */
.how-step, .plan, .spec, .chip {
  transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease), color var(--pz-fast) var(--pz-ease), background-color var(--pz-fast) var(--pz-ease);
}
@media (hover: hover) {
  .how-step:hover { border-color: var(--pz-line-hover); transform: translateY(-2px); }
  .plan:hover { border-color: var(--pz-line-hover); transform: translateY(-2px); }
  .plan.hot:hover { border-color: var(--pz-amber-hover); }
  .spec:hover .v { color: var(--pz-amber); }
  .spec .v { transition: color var(--pz-fast) var(--pz-ease); }
}
.go:active { transform: translateY(1px); }
.go.ghost:focus-visible { border-color: var(--pz-amber); }
.plans .plan ul { margin: 0; }
.plans .chip-note { margin-top: -.15rem; }
/* the library chips are links into the library search now; same words */
a.chip { text-decoration: none; cursor: pointer; }
@media (hover: hover) {
  a.chip:hover { border-color: var(--pz-amber); color: var(--pz-amber); transform: translateY(-1px); }
  a.chip.hot:hover { background: rgba(240, 168, 60, .16); }
}
a.chip:focus-visible { border-color: var(--pz-amber); }
.study-library .library-link { display: inline-block; line-height: 1.55; }
footer a { transition: color var(--pz-fast) var(--pz-ease); }

/* ---- hub pages (learn, contact): tiles lift, cards read as one list ---- */
a.tile {
  position: relative;
  transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease), background-color var(--pz-fast) var(--pz-ease);
}
@media (hover: hover) {
  a.tile:hover { transform: translateY(-2px); }
  a.tile .tt { transition: color var(--pz-fast) var(--pz-ease); }
}
a.tile:focus-visible { border-color: var(--pz-amber); outline-offset: 3px; }
a.tile:active { transform: translateY(0); }
.stepnav a { transition: border-color var(--pz-fast) var(--pz-ease), color var(--pz-fast) var(--pz-ease), background-color var(--pz-fast) var(--pz-ease); }
@media (hover: hover) {
  .stepnav a:hover { color: var(--pz-amber); background: rgba(240, 168, 60, .06); }
}
.stepnav a:focus-visible { border-color: var(--pz-amber); }

/* the ramp on /learn: the six RAMP rows were six boxes; they are one rail
   now, with a marker per step and the three columns aligned */
.stp .card {
  position: relative; margin: 0; padding: .15rem 0 1rem 1.5rem;
  background: transparent; border: 0; border-left: 1px solid var(--pz-line2); border-radius: 0;
}
.stp .card::before {
  content: ""; position: absolute; left: -5px; top: .5rem; width: 9px; height: 9px; border-radius: 50%;
  background: #0A0D13; border: 2px solid var(--pz-amber);
}
.stp .card:last-of-type { padding-bottom: .4rem; }
.stp .card:last-of-type::after {
  content: ""; position: absolute; left: -1px; bottom: 0; top: 1.1rem; width: 1px; background: #0A0D13;
}
.stp .step { display: grid; grid-template-columns: 5.2em 11em minmax(0, 1fr); gap: .35rem .9rem; align-items: baseline; }
.stp .step .n, .stp .step .t { min-width: 0; }
.stp .step p { min-width: 0; margin: 0; }
.stp .sublabel { margin-bottom: .9rem; }
@media (max-width: 600px) {
  .stp .step { grid-template-columns: auto minmax(0, 1fr); }
  .stp .step p { grid-column: 1 / -1; }
}

/* the contact page */
.custom li { transition: background-color var(--pz-fast) var(--pz-ease); }
.btn { transition: background-color var(--pz-fast) var(--pz-ease), border-color var(--pz-fast) var(--pz-ease), color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
.btn:active { transform: translateY(1px); }

/* ---- the strategy library ---- */
.library-page .controls { position: sticky; top: var(--pz-stick, 0px); z-index: 5; background: #0A0D13; padding-top: .6rem; padding-bottom: .6rem; margin-top: .65rem; }
.library-page .controls::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pz-line); opacity: 0; transition: opacity var(--pz-fast) var(--pz-ease); }
.library-page .controls.pz-stuck::after { opacity: 1; }
.library-page .card { transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
@media (hover: hover) {
  .library-page .card:hover { transform: translateY(-2px); border-color: var(--pz-line-hover); }
  .library-page .card.starred:hover { border-color: var(--pz-amber); }
  .library-page .details:hover { color: var(--pz-amber); }
  .library-page a.runbtn.live:hover { background: var(--pz-amber-hover); border-color: var(--pz-amber-hover); }
}
.library-page .details { transition: color var(--pz-fast) var(--pz-ease); }
.library-page a.runbtn.live { transition: background-color var(--pz-fast) var(--pz-ease), border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
.library-page a.runbtn.live:active { transform: translateY(1px); }
.library-page .card .more { animation: pz-open 220ms var(--pz-ease); }
@keyframes pz-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .library-page .controls { position: static; padding-top: 0; padding-bottom: 0; }
  .library-page .controls::after { display: none; }
  .library-page .card:hover { transform: none; }
}

/* ---- reading pages (futuretesting, compare, security, the legal set):
   tables that read, code that reads, no motion in the text ---- */
.tw { position: relative; scrollbar-width: thin; scrollbar-color: var(--pz-line2) transparent; }
.cmp { border-bottom: 1px solid var(--pz-line); }
.cmp th { white-space: nowrap; }
.cmp th:first-child, .cmp td:first-child { position: sticky; left: 0; background: #0A0D13; z-index: 1; }
.cmp.num tr:nth-child(even) td { background: rgba(231, 236, 244, .025); }
.cmp.num tr:nth-child(even) td:first-child { background: #0E1219; }
@media (hover: hover) {
  .cmp tbody tr:hover td, .cmp tr:hover td { background: rgba(240, 168, 60, .05); }
  .cmp tr:hover td:first-child { background: #12151C; }
}
.cmp td { transition: background-color var(--pz-fast) var(--pz-ease); }
.facts li { transition: background-color var(--pz-fast) var(--pz-ease); }
.case { transition: border-color var(--pz-fast) var(--pz-ease), transform var(--pz-fast) var(--pz-ease); }
@media (hover: hover) { .case:hover { border-color: var(--pz-line-hover); } }
.toc a { display: inline-block; }
pre { position: relative; line-height: 1.55; tab-size: 2; border-left: 2px solid rgba(240, 168, 60, .6); scrollbar-width: thin; }
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-thumb { background: var(--pz-line2); border-radius: 4px; }
code { overflow-wrap: anywhere; }
table.tools tr:hover td { background: rgba(240, 168, 60, .04); }

/* the status page: the probe dot breathes only while the check is still out */
.probe:not([data-state])::before { animation: pz-breathe 1.6s ease-in-out infinite; }
@keyframes pz-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* the 404: the card settles in once */
.not-found { animation: pz-settle 360ms var(--pz-ease) both; }
@keyframes pz-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #qg-sitenav .links a::after, .how-step, .plan, .spec, .chip, a.tile, .stepnav a, .btn, .library-page .card,
  .library-page a.runbtn.live, .case, .cmp td { transition: none; }
  .not-found, .probe:not([data-state])::before, .library-page .card .more { animation: none; }
  html.pz-motion .pz-hide { opacity: 1; transform: none; transition: none; }
}