/* openbook.page — the design system.
   Palette and type follow OpenBook's installer design (Material 3, seed #4A5BD4, Roboto Flex).
   Scales: spacing on a 4 px base, type on a modular scale, radii 16 / 28 / pill.
   Every colour pair below is checked by tools/check-contrast.py. */

@font-face {
  font-family: "Roboto Flex";
  src: url("../assets/fonts/RobotoFlex.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  /* Spacing (4 px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Type scale: size / line-height */
  --t-display: clamp(36px, 4.4vw, 52px); --lh-display: 1.06;
  --t-headline: clamp(28px, 3.2vw, 38px); --lh-headline: 1.1;
  --t-title: 24px;  --lh-title: 30px;
  --t-title-sm: 19px; --lh-title-sm: 26px;
  --t-body-lg: 18px; --lh-body-lg: 28px;
  --t-body: 16px; --lh-body: 25px;
  --t-label: 13.5px; --lh-label: 18px;
  --t-eyebrow: 12px; --lh-eyebrow: 16px;

  /* Radii */
  --r-paper: 16px; --r-card: 28px; --r-pill: 999px;

  /* Motion */
  --d-fast: 160ms;
  --e-standard: cubic-bezier(.2, 0, 0, 1);

  /* Layout */
  --max: 1120px; --gutter: var(--s-5);

  /* Colour roles: light */
  --surface: #FBF8FF; --surface-lowest: #FFFFFF; --surface-low: #F5F2FB; --surface-mid: #EFEDF6;
  --surface-high: #E9E7F0; --surface-highest: #E3E1EA;
  --on-surface: #1B1B21; --on-surface-variant: #46464F;
  --outline: #767680; --outline-variant: #C6C5D0;
  --primary: #4355B9; --on-primary: #FFFFFF; --primary-container: #DEE0FF; --on-primary-container: #00105C;
  --secondary-container: #E0E1F9; --on-secondary-container: #181A2C;
  --tertiary: #8A4A62; --tertiary-container: #FFD9E3; --on-tertiary-container: #390A1E;
  --success: #276A3B; --success-container: #B6F1BE; --on-success-container: #00210B;
  --warning: #775A00; --warning-container: #FFDF9A; --on-warning-container: #251A00;
  --error: #BA1A1A; --error-container: #FFDAD6; --on-error-container: #410002;
  --link: #3647A8;

  --glass: rgba(251, 248, 255, .80);
  --glass-line: rgba(255, 255, 255, .72);
  --rim: conic-gradient(from 210deg, #7E8CFF, #D08BFF, #FFB38A, #FF7A9C, #7E8CFF);
  --shadow-1: 0 1px 2px rgba(27, 27, 33, .06), 0 6px 18px rgba(37, 42, 98, .08);
  --shadow-2: 0 24px 48px rgba(37, 42, 98, .22), 0 6px 18px rgba(37, 42, 98, .10);
  --wall-fallback: linear-gradient(135deg, #EEF0FF 0%, #F7F1FF 55%, #FDF3F7 100%);
  --wall: url("/assets/wallpapers/openbook-folio-light.jpg");
  --code-bg: #1B1B21; --code-ink: #E4E1E9;
  color-scheme: light;
}

[data-theme="dark"] {
  --surface: #121318; --surface-lowest: #0D0E13; --surface-low: #1B1B21; --surface-mid: #1F1F25;
  --surface-high: #2A292F; --surface-highest: #35343A;
  --on-surface: #E4E1E9; --on-surface-variant: #C6C5D0;
  --outline: #90909A; --outline-variant: #46464F;
  --primary: #BAC3FF; --on-primary: #08218A; --primary-container: #293CA0; --on-primary-container: #DEE0FF;
  --secondary-container: #43465A; --on-secondary-container: #E0E1F9;
  --tertiary: #FFB0C9; --tertiary-container: #6E3349; --on-tertiary-container: #FFD9E3;
  --success: #9BD5A3; --success-container: #0B5225; --on-success-container: #B6F1BE;
  --warning: #EFC048; --warning-container: #5A4300; --on-warning-container: #FFDF9A;
  --error: #FFB4AB; --error-container: #93000A; --on-error-container: #FFDAD6;
  --link: #BAC3FF;

  --glass: rgba(27, 27, 33, .78);
  --glass-line: rgba(255, 255, 255, .10);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-2: 0 24px 56px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .40);
  --wall-fallback: linear-gradient(135deg, #0C0D16 0%, #121324 55%, #17121F 100%);
  --wall: url("/assets/wallpapers/openbook-folio-dark.jpg");
  --code-bg: #0D0E13; --code-ink: #E4E1E9;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--on-surface);
  font-family: "Roboto Flex", "Noto Sans", system-ui, sans-serif;
  font-size: var(--t-body); line-height: var(--lh-body);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .14em; }
a:hover { text-decoration-thickness: 2px; }
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }
code { font-size: .92em; background: var(--surface-mid); padding: .08em .4em; border-radius: 6px; }
pre { margin: 0; background: var(--code-bg); color: var(--code-ink); padding: var(--s-4) var(--s-5);
      border-radius: var(--r-paper); overflow-x: auto; font-size: 14px; line-height: 22px; }
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--primary-container); color: var(--on-primary-container); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-2) var(--s-4);
        background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill); }
.skip:focus { top: var(--s-4); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Type ---------- */
.display { font-size: var(--t-display); line-height: var(--lh-display); font-weight: 680; letter-spacing: -0.03em;
           font-variation-settings: "opsz" 144; margin: 0; text-wrap: balance; }
.headline { font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 620; letter-spacing: -0.02em;
            font-variation-settings: "opsz" 48; margin: 0; text-wrap: balance; }
.title { font-size: var(--t-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.012em; margin: 0; }
.title-sm { font-size: var(--t-title-sm); line-height: var(--lh-title-sm); font-weight: 600; letter-spacing: -0.008em; margin: 0; }
.label { font-size: var(--t-label); line-height: var(--lh-label); font-weight: 540; }
.eyebrow { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600; letter-spacing: .09em;
           text-transform: uppercase; color: var(--primary); margin: 0 0 var(--s-3); }
.muted { color: var(--on-surface-variant); }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--t-body-lg); line-height: var(--lh-body-lg); color: var(--on-surface-variant); max-width: 60ch; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--s-8); }
.section + .section { padding-top: 0; }
.section-head { max-width: 680px; margin-bottom: var(--s-6); }
.headline + p, .title + p { margin-top: var(--s-3); }
.grid-2 { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2.wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.split { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
@media (max-width: 640px) { .grid-2, .grid-2.wide-left { grid-template-columns: minmax(0, 1fr); } .section { padding-block: var(--s-7); } }
.more { margin-top: var(--s-5); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface-low); border-radius: var(--r-card); padding: var(--s-6); position: relative; }
.card.paper { background: var(--surface-lowest); box-shadow: var(--shadow-1); }
[data-theme="dark"] .card.paper { background: var(--surface-mid); }

.glass { background: var(--glass); backdrop-filter: blur(34px) saturate(1.3); -webkit-backdrop-filter: blur(34px) saturate(1.3);
         box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-line); border-radius: var(--r-card); position: relative; }
.glass::before { /* the holographic rim, 1.5 px */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55;
}
[data-theme="dark"] .glass::before { opacity: .40; }

/* ---------- Buttons and pills ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-5);
       border-radius: var(--r-pill); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
       font-size: 15px; font-weight: 580; letter-spacing: -0.005em;
       transition: background var(--d-fast) var(--e-standard), color var(--d-fast) var(--e-standard); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.btn-tonal:hover { filter: brightness(.97); }
[data-theme="dark"] .btn-tonal:hover { filter: brightness(1.1); }
.btn-paper { background: var(--surface-lowest); color: var(--on-surface); box-shadow: inset 0 0 0 1px var(--outline-variant); }
[data-theme="dark"] .btn-paper { background: var(--surface-high); }
.btn-paper:hover { background: var(--surface-mid); }
.btn-text { background: transparent; color: var(--primary); padding: 0 var(--s-3); }
.btn-text:hover { background: var(--surface-mid); }
.btn-lg { height: 50px; padding: 0 var(--s-6); font-size: 16px; }
.btn-sm { height: 36px; padding: 0 var(--s-4); font-size: 14px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.pill { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 28px; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
        border-radius: var(--r-pill); font-size: var(--t-label); line-height: var(--lh-label); font-weight: 560;
        background: var(--surface-lowest); box-shadow: inset 0 0 0 1px var(--outline-variant); color: var(--on-surface-variant); }
[data-theme="dark"] .pill { background: var(--surface-high); }
.pill .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.pill.ok .dot { background: var(--success); }
.pill.wip .dot { background: var(--warning); }

.mark-state { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.mark-state svg { width: 14px; height: 14px; }
.mark-state.ok { background: var(--success-container); color: var(--on-success-container); }
.mark-state.no { background: var(--surface-highest); color: var(--on-surface-variant); }

/* ---------- Top bar ---------- */
.topbar .wrap { display: flex; align-items: center; gap: var(--s-2); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--on-surface); margin-right: auto; }
.brand svg { width: 30px; height: 30px; }
.brand .word { font-weight: 660; letter-spacing: -0.03em; font-size: 20px; }
.topbar .btn { margin-left: var(--s-2); }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
           cursor: pointer; color: var(--on-surface-variant); position: relative; text-decoration: none;
           transition: background var(--d-fast) var(--e-standard); }
.iconbtn:hover { background: var(--surface-mid); color: var(--on-surface); }
.iconbtn svg { width: 22px; height: 22px; }
.iconbtn .sun, .iconbtn .moon { position: absolute; }
.iconbtn .moon, [data-theme="dark"] .iconbtn .sun { display: none; }
[data-theme="dark"] .iconbtn .moon { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding-block: var(--s-7) var(--s-8); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 45%, var(--surface) 100%), var(--wall) center / cover no-repeat, var(--wall-fallback); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-copy { padding: var(--s-7); }
@media (max-width: 640px) { .hero-copy { padding: var(--s-5); } }
.hero-copy .lede { margin-top: var(--s-4); }
.hero-copy .actions { margin-top: var(--s-6); }
.hero-copy .pill { margin-top: var(--s-5); }

/* ---------- Status ---------- */
.status .card { padding: var(--s-5) var(--s-6); }
.status .head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.status ul { margin: 0; padding-left: 20px; display: grid; gap: var(--s-2); color: var(--on-surface-variant); }

/* ---------- Figures ---------- */
.figure { margin: 0; }
.figure img { border-radius: var(--r-paper); box-shadow: var(--shadow-2); width: 100%; outline: 1.5px solid var(--glass-line); outline-offset: -1.5px; }
.figure figcaption { margin-top: var(--s-3); font-size: var(--t-label); line-height: var(--lh-label); color: var(--on-surface-variant); }
.figure .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-2); border-radius: 6px; font-size: 11.5px; font-weight: 650;
               letter-spacing: .06em; text-transform: uppercase; margin-right: var(--s-2); vertical-align: 1px; }
.tag.real { background: var(--success-container); color: var(--on-success-container); }
.tag.design { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.quire-shot { max-width: 340px; justify-self: center; }

/* ---------- Footer ---------- */
.footer { padding-block: var(--s-7); border-top: 1px solid var(--outline-variant); color: var(--on-surface-variant); font-size: 14px; line-height: 22px; }
.footer .links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.footer .links .brand { margin-right: var(--s-3); }
.footer a { color: var(--on-surface-variant); text-decoration: none; }
.footer a:hover { color: var(--on-surface); text-decoration: underline; }
.footer .brand, .footer .brand:hover { color: var(--on-surface); text-decoration: none; }
.footer .legal { margin-top: var(--s-5); font-size: 13px; line-height: 20px; max-width: 90ch; }
.footer .legal p { margin-bottom: var(--s-2); }

/* ---------- Downloads page ---------- */
.page-head { padding-block: var(--s-7) var(--s-6); }
.page-head .lede { margin-top: var(--s-3); }
.page-head + .section { padding-top: 0; }
.release { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); }
@media (max-width: 880px) { .release { grid-template-columns: minmax(0, 1fr); } }
.release + .release { margin-top: var(--s-4); }
.release .meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.release .notes { color: var(--on-surface-variant); }
.release .notes ul { margin: var(--s-2) 0 0; padding-left: 20px; }
.release .notes li { margin-bottom: var(--s-1); }
.release .actions { display: grid; gap: var(--s-2); align-content: start; }
.release .actions .btn { justify-content: center; width: 100%; white-space: normal; text-align: center; height: auto; min-height: 44px; padding-block: var(--s-2); }
.release .actions .btn-sm { min-height: 36px; }
.hash { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: center; margin-top: var(--s-4);
        padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-paper); background: var(--surface-mid); }
.hash code { background: none; padding: 0; font-size: 12.5px; line-height: 18px; word-break: break-all; color: var(--on-surface); }
.hash .lbl { font-size: var(--t-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: .04em; color: var(--on-surface-variant); font-weight: 620; grid-column: 1 / -1; }
.empty { text-align: center; padding: var(--s-7) var(--s-6); }
.empty .title { margin-bottom: var(--s-3); }
.empty .lede { margin-inline: auto; }
.empty .actions { justify-content: center; margin-top: var(--s-5); }
.title + .actions { margin-top: var(--s-4); }
.title + pre { margin-top: var(--s-4); }
.toast { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); opacity: 0; pointer-events: none; z-index: 60;
         background: var(--on-surface); color: var(--surface); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); font-size: 14.5px; font-weight: 540;
         box-shadow: var(--shadow-2); transition: opacity var(--d-fast) var(--e-standard); }
.toast.show { opacity: 1; }
.skeleton { height: 200px; border-radius: var(--r-card); background: var(--surface-low); }

/* ---------- Long-form pages (install, source) ---------- */
.doc { max-width: 76ch; }
.doc h2 { font-size: var(--t-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.012em;
          margin: var(--s-7) 0 var(--s-4); }
.doc h3 { font-size: var(--t-title-sm); line-height: var(--lh-title-sm); font-weight: 600; margin: var(--s-6) 0 var(--s-3); }
.doc ol, .doc ul { margin: 0 0 var(--s-4); padding-left: 1.4em; }
.doc li { margin-bottom: var(--s-2); }
.doc pre { margin: 0 0 var(--s-4); }
.doc table { border-collapse: collapse; width: 100%; margin: 0 0 var(--s-4); font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--outline-variant); }
.doc th { font-weight: 600; }

/* ---------- 404 ---------- */
.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--s-8) 0; }
.lost .lede { margin: var(--s-4) auto 0; }
.lost .actions { justify-content: center; margin-top: var(--s-6); }

/* ---------- Print ---------- */
@media print { .topbar, .toast { display: none; } .hero::before { display: none; } }