/* ============================================================
   MeshSky Whitepaper — print stylesheet
   Targets headless Chromium / Edge --print-to-pdf at Letter size.
   Mirrors the meshsky.io design tokens (Inter + Space Grotesk,
   navy/blue/cyan palette).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ms-navy-950: #060b1a;
  --ms-navy-900: #0a1230;
  --ms-navy-800: #111c4a;
  --ms-navy-700: #1a2a6b;
  --ms-blue-600: #2754ff;
  --ms-blue-500: #3a6bff;
  --ms-blue-400: #5b8bff;
  --ms-cyan-400: #38d6ff;
  --ms-cyan-300: #7be8ff;
  --ms-violet-500: #7a4cff;

  --fg:        #0a1230;
  --fg-muted:  #4a5578;
  --fg-subtle: #6b7596;
  --bg:        #ffffff;
  --bg-soft:   #f4f7ff;
  --border:    #e3e8f5;
  --border-strong: #c9d2eb;

  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --grad-brand: linear-gradient(135deg, var(--ms-blue-600) 0%, var(--ms-violet-500) 60%, var(--ms-cyan-400) 100%);
  --grad-text:  linear-gradient(90deg, #ffffff 0%, #c8d6ff 50%, var(--ms-cyan-300) 100%);
  --grad-hero:
    radial-gradient(1200px 600px at 80% -10%, rgba(58,107,255,0.45), transparent 60%),
    radial-gradient(900px  500px at 0%  10%,  rgba(56,214,255,0.30), transparent 60%),
    linear-gradient(180deg, #060b1a 0%, #0a1230 60%, #111c4a 100%);
}

/* ---------- Page setup ---------- */
@page {
  size: Letter;
  margin: 0.75in 0.7in 0.85in 0.7in;
  @bottom-center {
    content: "MeshSky · Whitepaper v1.0 · " counter(page) " / " counter(pages);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8.5pt;
    color: #6b7596;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

@page :first {
  margin: 0;
  @bottom-center { content: none; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 10.5pt;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* ---------- Page section flow ---------- */
.page {
  position: relative;
  page-break-after: always;
  break-after: page;
  padding: 0.1in 0 0;
}

.page:last-of-type {
  page-break-after: auto;
  break-after: auto;
}

.page__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18pt;
}

.page__eyebrow {
  display: inline-block;
  padding: 4pt 10pt;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(39,84,255,0.55);
}

/* ---------- Headings ---------- */
.h2 {
  font-family: var(--font-display);
  font-size: 26pt;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 14pt;
  color: var(--ms-navy-900);
}
.h3 {
  font-family: var(--font-display);
  font-size: 14pt;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 22pt 0 8pt;
  color: var(--ms-navy-900);
  page-break-after: avoid;
  break-after: avoid;
}
.h4 {
  font-family: var(--font-display);
  font-size: 11pt;
  margin: 14pt 0 5pt;
  color: var(--ms-navy-800);
  page-break-after: avoid;
  break-after: avoid;
}

p {
  margin: 0 0 10pt;
  orphans: 3;
  widows: 3;
}

.lead {
  font-size: 11.5pt;
  line-height: 1.55;
  color: var(--fg-muted);
  margin-bottom: 14pt;
  border-left: 3px solid var(--ms-blue-500);
  padding: 4pt 0 4pt 14pt;
  background: linear-gradient(90deg, rgba(58,107,255,0.04), transparent 70%);
}

.muted  { color: var(--fg-muted); }
.small  { font-size: 9pt; }

a {
  color: var(--ms-blue-600);
  text-decoration: none;
  border-bottom: 1px dotted rgba(39,84,255,0.4);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: #eef2ff;
  color: var(--ms-navy-800);
  padding: 1pt 4pt;
  border-radius: 4px;
}

strong { color: var(--ms-navy-900); }
em     { color: var(--ms-navy-800); font-style: italic; }

/* ---------- Lists ---------- */
.bullets, .numbered {
  margin: 0 0 12pt;
  padding-left: 20pt;
}
.bullets li, .numbered li {
  margin: 0 0 6pt;
  color: var(--fg);
}
.bullets.compact li {
  margin-bottom: 3pt;
}

.principles {
  list-style: none;
  counter-reset: principle;
  padding: 0;
  margin: 0 0 14pt;
}
.principles > li {
  counter-increment: principle;
  position: relative;
  padding: 14pt 16pt 14pt 60pt;
  margin-bottom: 12pt;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.principles > li::before {
  content: counter(principle, decimal-leading-zero);
  position: absolute;
  left: 14pt;
  top: 14pt;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18pt;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.principles h3 {
  font-family: var(--font-display);
  font-size: 12pt;
  margin: 0 0 4pt;
  color: var(--ms-navy-900);
}
.principles p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 10pt;
  line-height: 1.55;
}

/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 8pt 0 14pt;
  font-size: 9.5pt;
  page-break-inside: avoid;
  break-inside: avoid;
}
.table th, .table td {
  text-align: left;
  padding: 7pt 9pt;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-strong);
}
.table tbody tr:last-child td { border-bottom: 0; }
.table code { font-size: 8.8pt; }

/* ---------- Code & diagrams ---------- */
pre.code, pre.diagram {
  font-family: var(--font-mono);
  font-size: 8.5pt;
  line-height: 1.5;
  padding: 12pt 14pt;
  background: #060b1a;
  color: #d8e2ff;
  border-radius: 10px;
  overflow: hidden;
  white-space: pre;
  margin: 8pt 0 14pt;
  page-break-inside: avoid;
  break-inside: avoid;
  box-shadow: 0 10px 28px -18px rgba(10,18,48,0.45);
}
pre.diagram {
  font-size: 7.6pt;
  line-height: 1.35;
  background: #0a1230;
  color: #c8d6ff;
}
pre.code code, pre.diagram code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.figure {
  margin: 0 0 14pt;
}
.figure figcaption {
  margin-top: 6pt;
  font-family: var(--font-display);
  font-size: 8.5pt;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  text-align: center;
}

/* ---------- TOC ---------- */
.toc {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 14pt 0 0;
  font-family: var(--font-display);
  font-size: 11pt;
}
.toc > li {
  padding: 7pt 0;
  border-bottom: 1px dashed var(--border);
}
.toc > li > a {
  color: var(--ms-navy-900);
  font-weight: 600;
  border: 0;
}
.toc ol {
  list-style: none;
  margin: 6pt 0 0;
  padding: 0 0 0 18pt;
  font-weight: 400;
  font-size: 10pt;
}
.toc ol li {
  padding: 3pt 0;
  color: var(--fg-muted);
}
.toc ol a { color: var(--fg-muted); border: 0; }

/* ---------- Glossary ---------- */
.glossary {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8pt;
}
.glossary dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ms-navy-900);
  font-size: 10.5pt;
}
.glossary dd {
  margin: 2pt 0 8pt;
  color: var(--fg-muted);
  font-size: 9.8pt;
  line-height: 1.5;
}

/* ============================================================
   COVER PAGE
   ============================================================ */
.cover {
  height: 11in;
  width: 8.5in;
  margin: 0;
  padding: 0.8in 0.85in;
  background: var(--grad-hero);
  color: #f0f4ff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 220px at 85% 22%, rgba(56,214,255,0.45), transparent 60%),
    radial-gradient(380px 220px at 12% 78%, rgba(122,76,255,0.35), transparent 65%);
  pointer-events: none;
}
.cover > * { position: relative; z-index: 1; }

.cover__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cover__mark {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cover__wordmark {
  font-family: var(--font-display);
  font-size: 22pt;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.cover__chip {
  display: inline-block;
  align-self: flex-start;
  padding: 6pt 14pt;
  font-family: var(--font-display);
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c8d6ff;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cover__title {
  font-family: var(--font-display);
  font-size: 56pt;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0;
  max-width: 7in;
}
.cover__title-grad {
  display: block;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cover__lede {
  margin: 18pt 0 0;
  font-size: 13pt;
  line-height: 1.55;
  color: #b6c2e8;
  max-width: 6in;
}

.cover__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14pt 36pt;
  margin-top: 28pt;
  padding-top: 20pt;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 6in;
}
.cover__meta-label {
  display: block;
  font-family: var(--font-display);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8895c0;
  margin-bottom: 3pt;
}
.cover__meta-value {
  font-family: var(--font-display);
  font-size: 11.5pt;
  font-weight: 600;
  color: #ffffff;
}

.cover__footer {
  font-family: var(--font-display);
  font-size: 9pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8895c0;
}