/* uOS whitepaper: one stylesheet for the web page (screen) and the PDF
   (WeasyPrint, @page). Fonts are self-hosted; the page loads nothing from
   third parties. */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: italic; src: url('fonts/Inter-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; src: url('fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter Display'; font-weight: 700; src: url('fonts/InterDisplay-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }

:root {
  --ink: #16131f;
  --ink-soft: #4a4658;
  --muted: #6e6a7c;
  --paper: #ffffff;
  --panel: #f6f4fb;
  --rule: #e4e0ee;
  --violet: #7c3aed;
  --violet-soft: #ede7fd;
  --cyan: #0891b2;
  --good: #0f766e;
  --warn: #b45309;
  --code-bg: #f3f1f8;
  --d-trusted: #e9f7f5;
  --d-untrusted: #f3effe;
  --d-box: #ffffff;
  --d-key: #fff4e0;
  --d-ext: #eef6fb;
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece9f5; --ink-soft: #c9c4d9; --muted: #9a95ab; --paper: #0f0d15; --panel: #17141f;
    --rule: #2a2636; --violet: #a78bfa; --violet-soft: #231c38; --cyan: #22d3ee; --good: #5eead4;
    --warn: #fbbf24; --code-bg: #1b1824; --d-trusted: #10231f; --d-untrusted: #1d1730;
    --d-box: #17141f; --d-key: #2a2012; --d-ext: #102029;
  }
}
:root[data-theme="dark"] {
  --ink: #ece9f5; --ink-soft: #c9c4d9; --muted: #9a95ab; --paper: #0f0d15; --panel: #17141f;
  --rule: #2a2636; --violet: #a78bfa; --violet-soft: #231c38; --cyan: #22d3ee; --good: #5eead4;
  --warn: #fbbf24; --code-bg: #1b1824; --d-trusted: #10231f; --d-untrusted: #1d1730;
  --d-box: #17141f; --d-key: #2a2012; --d-ext: #102029;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.65;
  font-feature-settings: 'cv11', 'ss01'; hyphens: auto;
}
a { color: var(--violet); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; color: var(--ink); }
code { hyphens: manual; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.86em; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
pre { font-family: 'JetBrains Mono', ui-monospace, monospace; background: var(--code-bg); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
pre code { background: none; padding: 0; font-size: inherit; }

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3 { font-family: 'Inter Display', 'Inter', sans-serif; line-height: 1.2; color: var(--ink); }
h1.part { font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); margin: 72px 0 4px; }
h2 { font-size: 30px; font-weight: 700; margin: 56px 0 16px; letter-spacing: -0.01em; }
h3 { font-size: 19px; font-weight: 600; margin: 32px 0 10px; font-family: 'Inter', sans-serif; }
p, li { color: var(--ink-soft); }
ul, ol { padding-left: 1.3em; }
li { margin: 6px 0; }
li::marker { color: var(--violet); }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 18px 0 24px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
th { text-align: left; font-weight: 600; color: var(--ink); background: var(--panel); border-bottom: 2px solid var(--violet); padding: 9px 12px; }
td { vertical-align: top; border-bottom: 1px solid var(--rule); padding: 9px 12px; color: var(--ink-soft); }
tr:last-child td { border-bottom: none; }
td:first-child { font-weight: 600; color: var(--ink); hyphens: manual; }
th { hyphens: manual; }

/* ── Figures ──────────────────────────────────────────────── */
figure.diagram { margin: 28px 0; padding: 20px; background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); }
figure.diagram svg { width: 100%; height: auto; display: block; }
figure.diagram figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.d-trusted { fill: var(--d-trusted); stroke: var(--good); stroke-width: 1.5; }
.d-untrusted { fill: var(--d-untrusted); stroke: var(--violet); stroke-width: 1.5; }
.d-box { fill: var(--d-box); stroke: var(--rule); stroke-width: 1.5; }
.d-key { fill: var(--d-key); stroke: var(--warn); stroke-width: 1.5; }
.d-ext { fill: var(--d-ext); stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 5 4; }
.d-muted { fill: var(--muted); }

/* ── Summary ──────────────────────────────────────────────── */
section.summary { background: linear-gradient(135deg, var(--violet-soft), var(--panel)); border: 1px solid var(--rule); border-radius: 18px; padding: 8px 32px 20px; margin: 8px 0 24px; }
section.summary h2 { margin-top: 28px; }

.placeholder { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 0 4px; font-weight: 600; }

/* ── Screen layout ────────────────────────────────────────── */
@media screen {
  .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
  .topbar .brand { font-family: 'Inter Display', 'Inter', sans-serif; font-weight: 700; font-size: 20px; background: linear-gradient(90deg, #8b5cf6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .topbar .spacer { flex: 1; }
  .topbar .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--violet); color: #fff; font-weight: 600; font-size: 14px; }
  .topbar .btn:hover { text-decoration: none; filter: brightness(1.08); }
  .topbar .btn svg { width: 16px; height: 16px; }
  .topbar .home { color: var(--muted); font-size: 14px; }

  .hero { hyphens: manual; padding: 72px 24px 48px; background: radial-gradient(ellipse at top left, rgba(139, 92, 246, 0.18), transparent 60%), radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.14), transparent 55%); border-bottom: 1px solid var(--rule); }
  .hero-inner { max-width: 1120px; margin: 0 auto; }
  .hero .kind { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); }
  .hero h1 { font-size: clamp(40px, 7vw, 72px); margin: 12px 0 8px; letter-spacing: -0.03em; background: linear-gradient(90deg, #8b5cf6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hero .subtitle { font-size: clamp(19px, 2.4vw, 25px); color: var(--ink); max-width: 760px; margin: 0; line-height: 1.4; }
  .hero .meta { margin-top: 24px; color: var(--muted); font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; }

  /* Flex with wrapping, so narrow screens stack even without the media query below. */
  .layout { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 56px; }
  .layout > nav.toc { flex: 1 1 220px; max-width: 250px; }
  .layout > main { flex: 999 1 480px; min-width: 0; }
  nav.toc { hyphens: manual; position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; padding: 32px 0; font-size: 13.5px; }
  nav.toc .toc-title { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  nav.toc ol { list-style: none; padding: 0; margin: 0; }
  nav.toc li { margin: 2px 0; }
  nav.toc li.toc-part { margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violet); }
  nav.toc a { color: var(--muted); display: block; padding: 3px 0; }
  nav.toc a:hover { color: var(--ink); text-decoration: none; }
  nav.toc .toc-page { display: none; }
  main { padding-top: 24px; min-width: 0; }
  main > h1.part:first-of-type { margin-top: 40px; }
  .cover, .print-toc, .back-cover { display: none; }

}

@media screen and (max-width: 900px) {
  .layout { display: block; }
  .layout > nav.toc { max-width: none; }
  nav.toc { position: static; max-height: none; border-bottom: 1px solid var(--rule); padding: 20px 0; }
  .hero { padding: 48px 16px 32px; }
  .layout, .topbar { padding-left: 16px; padding-right: 16px; }
  section.summary { padding: 4px 18px 14px; }
  h2 { font-size: 25px; }
}

/* ── Print (WeasyPrint) ───────────────────────────────────── */
@media print {
  @page {
    size: A4; margin: 24mm 20mm 22mm 20mm;
    @top-left { content: 'uOS — Technical Whitepaper'; font: 500 8pt 'Inter'; color: #8a869a; }
    @top-right { content: string(section); font: 500 8pt 'Inter'; color: #8a869a; }
    @bottom-right { content: counter(page); font: 600 8pt 'Inter'; color: #7c3aed; }
    @bottom-left { content: string(docversion); font: 500 8pt 'Inter'; color: #8a869a; }
  }
  @page cover { margin: 0; @top-left { content: none; } @top-right { content: none; } @bottom-left { content: none; } @bottom-right { content: none; } }
  @page toc { @top-right { content: 'Contents'; } }
  @page back { @top-left { content: none; } @top-right { content: none; } }

  body { font-size: 9.6pt; line-height: 1.55; background: #fff; }
  .topbar, .hero, nav.toc { display: none; }
  .layout, main { display: block; padding: 0; margin: 0; }

  .cover { page: cover; display: block; height: 297mm; width: 210mm; position: relative; color: #fff; background: #120d24; overflow: hidden; break-after: page; }
  .cover .glow1 { position: absolute; width: 170mm; height: 170mm; left: -50mm; top: -40mm; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, 0.75), rgba(139, 92, 246, 0) 70%); }
  .cover .glow2 { position: absolute; width: 180mm; height: 180mm; right: -70mm; bottom: -60mm; border-radius: 50%; background: radial-gradient(circle, rgba(6, 182, 212, 0.55), rgba(6, 182, 212, 0) 70%); }
  .cover .inner { position: absolute; left: 22mm; right: 22mm; top: 70mm; }
  .cover .kind { font: 600 10pt 'Inter'; letter-spacing: 0.2em; text-transform: uppercase; color: #c4b5fd; }
  .cover h1 { font: 700 64pt 'Inter Display'; letter-spacing: -0.02em; margin: 8mm 0 6mm; color: #fff; }
  .cover .subtitle { font: 500 17pt/1.35 'Inter'; color: #ede9fe; max-width: 150mm; }
  .cover .meta { position: absolute; left: 22mm; right: 22mm; bottom: 22mm; font: 500 9.5pt 'Inter'; color: #c4b5fd; display: flex; justify-content: space-between; border-top: 0.4pt solid rgba(196, 181, 253, 0.5); padding-top: 5mm; }
  .cover .meta span:first-child { string-set: docversion content(); }

  .print-toc { page: toc; display: block; break-after: page; }
  .print-toc h2 { margin-top: 0; font-size: 22pt; }
  .print-toc ol { list-style: none; padding: 0; margin: 0; }
  .print-toc .toc-title { display: none; }
  .print-toc li { margin: 0; padding: 1.15mm 0; border-bottom: 0.3pt solid #e4e0ee; font-size: 9.4pt; }
  .print-toc li.toc-part { border: none; padding: 4mm 0 0.6mm; font: 600 7.6pt 'Inter'; letter-spacing: 0.12em; text-transform: uppercase; color: #7c3aed; }
  .print-toc li a { color: #16131f; display: block; }
  .print-toc li a::after { content: leader('.') target-counter(attr(href), page); color: #7c3aed; font-weight: 600; }
  .print-toc li.toc-part a::after { content: none; }
  .print-toc li a .toc-page { display: none; }

  h1.part { break-before: page; string-set: section content(); margin: 0 0 2mm; font-size: 9pt; }
  h1.part + h2 { margin-top: 0; }
  h2 { font-size: 19pt; margin: 9mm 0 4mm; string-set: section content(); break-after: avoid; }
  h3 { font-size: 11.5pt; margin: 6mm 0 2mm; break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  table { font-size: 8.4pt; break-inside: auto; }
  tr { break-inside: avoid; }
  th { padding: 2mm 2.4mm; }
  td { padding: 1.9mm 2.4mm; }
  figure.diagram { break-inside: avoid; padding: 4mm; color: #16131f; }
  /* WeasyPrint's SVG renderer does not resolve CSS variables. */
  .d-trusted { fill: #e9f7f5; stroke: #0f766e; }
  .d-untrusted { fill: #f3effe; stroke: #7c3aed; }
  .d-box { fill: #ffffff; stroke: #d9d4e6; }
  .d-key { fill: #fff4e0; stroke: #b45309; }
  .d-ext { fill: #eef6fb; stroke: #0891b2; }
  .d-muted { fill: #6e6a7c; }
  pre { font-size: 7.8pt; white-space: pre-wrap; break-inside: avoid; }
  section.summary { break-inside: auto; padding: 1mm 7mm 4mm; }
  a { color: #7c3aed; }
  .back-cover { page: back; display: block; break-before: page; padding-top: 90mm; text-align: center; color: #4a4658; }
  .back-cover .brand { font: 700 34pt 'Inter Display'; color: #7c3aed; }
}