/* ═══════════════════════════════════════════════════════════════════════════
   COSMOTECH™ VISUAL THEME — v1.0
   A cosmic-futuristic stylesheet for Markdown → PDF rendering.
   Designed for Pandoc, md-to-pdf, VSCode Markdown PDF, and browser print.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&family=Exo+2:wght@400;500;600;700;800&display=swap');

/* ── Color Palette Tokens ─────────────────────────────────────────────────── */
:root {
  /* Primary */
  --ct-deep-space:       #12002B;
  --ct-void-black:       #05020A;
  --ct-signal-cyan:      #00E5FF;
  --ct-arcane-violet:    #7B4DFF;
  --ct-cosmic-magenta:   #FF2EA6;
  --ct-astral-blue:      #2F8CFF;

  /* Soft highlight */
  --ct-starlight:        #C9D7FF;

  /* Derived / UI */
  --ct-body-bg:          #0A0118;
  --ct-surface:          rgba(18, 0, 43, 0.65);
  --ct-surface-solid:    #130226;
  --ct-panel:            rgba(123, 77, 255, 0.08);
  --ct-border-glow:      rgba(0, 229, 255, 0.25);
  --ct-border-subtle:    rgba(201, 215, 255, 0.10);
  --ct-text-primary:     #E8EAFF;
  --ct-text-secondary:   #9BA3C7;
  --ct-text-muted:       #5E6486;
  --ct-link:             #00E5FF;
  --ct-link-hover:       #7B4DFF;

  /* Gradients */
  --ct-nebula-gradient:  linear-gradient(135deg, #7B4DFF 0%, #00E5FF 50%, #FF2EA6 100%);
  --ct-heading-gradient: linear-gradient(90deg, #7B4DFF, #00E5FF);
  --ct-divider-gradient: linear-gradient(90deg, transparent, #7B4DFF, #00E5FF, #FF2EA6, transparent);
  --ct-glow-cyan:        0 0 12px rgba(0, 229, 255, 0.35), 0 0 4px rgba(0, 229, 255, 0.15);
  --ct-glow-violet:      0 0 12px rgba(123, 77, 255, 0.35), 0 0 4px rgba(123, 77, 255, 0.15);
  --ct-glow-magenta:     0 0 12px rgba(255, 46, 166, 0.35), 0 0 4px rgba(255, 46, 166, 0.15);

  /* Typography scale */
  --ct-font-heading:     'Orbitron', 'Exo 2', 'Rajdhani', 'Eurostile', 'Century Gothic', sans-serif;
  --ct-font-body:        'Inter', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --ct-font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --ct-size-h1:          2.4rem;
  --ct-size-h2:          1.75rem;
  --ct-size-h3:          1.35rem;
  --ct-size-h4:          1.1rem;
  --ct-size-body:        1rem;
  --ct-size-small:       0.875rem;
  --ct-size-code:        0.9rem;

  --ct-leading-body:     1.75;
  --ct-leading-heading:  1.25;
}

/* ── Page Rules ───────────────────────────────────────────────────────────── */
@page {
  size: A4;
  margin: 1in;
  background: var(--ct-body-bg);
}

@page :first {
  margin-top: 2in;
}

/* ── Hex-Grid Background Overlay ──────────────────────────────────────────── */
html {
  min-height: 100%;
}

body {
  font-family: var(--ct-font-body);
  font-size: var(--ct-size-body);
  line-height: var(--ct-leading-body);
  color: var(--ct-text-primary);
  background-color: var(--ct-body-bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(123, 77, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 46, 166, 0.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%237B4DFF' fill-opacity='0.04'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  margin: 0;
  padding: 2rem;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
a {
  color: var(--ct-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 229, 255, 0.3);
  transition: color 0.2s, border-color 0.2s;
}
a:hover {
  color: var(--ct-link-hover);
  border-bottom-color: var(--ct-link-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — HEADINGS
   ═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ct-font-heading);
  line-height: var(--ct-leading-heading);
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

/* ── H1 — Monumental Cosmic Heading ──────────────────────────────────────── */
h1 {
  font-size: var(--ct-size-h1);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--ct-heading-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 0.6rem;
  margin-top: 3rem;
  border-bottom: none;
  position: relative;
  page-break-before: always;
}

h1:first-of-type {
  page-break-before: avoid;
}

h1::after {
  content: '';
  display: block;
  margin-top: 0.5rem;
  height: 3px;
  background: var(--ct-nebula-gradient);
  border-radius: 2px;
  box-shadow: var(--ct-glow-cyan);
}

/* ── H2 — Technological Section Heading ──────────────────────────────────── */
h2 {
  font-size: var(--ct-size-h2);
  font-weight: 700;
  color: var(--ct-signal-cyan);
  letter-spacing: 0.05em;
  padding-bottom: 0.4rem;
  position: relative;
}

h2::after {
  content: '';
  display: block;
  margin-top: 0.35rem;
  height: 2px;
  width: 60%;
  background: linear-gradient(90deg, var(--ct-signal-cyan), transparent);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* ── H3 — Arcane Subheading ──────────────────────────────────────────────── */
h3 {
  font-size: var(--ct-size-h3);
  font-weight: 600;
  color: var(--ct-arcane-violet);
  letter-spacing: 0.03em;
  padding-left: 0.8rem;
  border-left: 3px solid var(--ct-arcane-violet);
}

/* ── H4+ — Minimal Technical Hierarchy ───────────────────────────────────── */
h4 {
  font-size: var(--ct-size-h4);
  font-weight: 600;
  color: var(--ct-starlight);
  font-family: var(--ct-font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h5 {
  font-size: var(--ct-size-body);
  font-weight: 600;
  color: var(--ct-text-secondary);
  font-family: var(--ct-font-body);
  letter-spacing: 0.04em;
}

h6 {
  font-size: var(--ct-size-small);
  font-weight: 500;
  color: var(--ct-text-muted);
  font-family: var(--ct-font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Glyph Separator — use with <div class="glyph-sep"></div> ─────────── */
.glyph-sep {
  text-align: center;
  margin: 2rem 0;
  color: var(--ct-arcane-violet);
  font-size: 1.2rem;
  letter-spacing: 0.6em;
  opacity: 0.6;
}
.glyph-sep::before {
  content: '⟡ ◆ ⟡';
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY TEXT & PARAGRAPHS
   ═══════════════════════════════════════════════════════════════════════════ */
p {
  margin: 0 0 1.15rem 0;
  color: var(--ct-text-primary);
}

strong {
  color: var(--ct-starlight);
  font-weight: 700;
}

em {
  color: var(--ct-text-secondary);
  font-style: italic;
}

mark {
  background: rgba(123, 77, 255, 0.25);
  color: var(--ct-starlight);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

/* ── Inline Code ─────────────────────────────────────────────────────────── */
code {
  font-family: var(--ct-font-mono);
  font-size: var(--ct-size-code);
  background: rgba(0, 229, 255, 0.08);
  color: var(--ct-signal-cyan);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid rgba(0, 229, 255, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HORIZONTAL RULES — COSMIC DIVIDERS
   ═══════════════════════════════════════════════════════════════════════════ */
hr {
  border: none;
  height: 2px;
  background: var(--ct-divider-gradient);
  margin: 2.5rem 0;
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(123, 77, 255, 0.2), 0 0 4px rgba(0, 229, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CODE BLOCKS — COSMIC TERMINAL PANELS
   ═══════════════════════════════════════════════════════════════════════════ */
pre {
  background: linear-gradient(180deg, #0C0024 0%, #080016 100%);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  position: relative;
  box-shadow:
    0 0 15px rgba(0, 229, 255, 0.08),
    inset 0 1px 0 rgba(0, 229, 255, 0.06);
}

pre::before {
  content: '⟩ TERMINAL';
  display: block;
  font-family: var(--ct-font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--ct-signal-cyan);
  opacity: 0.5;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 229, 255, 0.10);
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ct-text-primary);
  font-size: var(--ct-size-code);
  line-height: 1.6;
  display: block;
}

/* Syntax highlight accent colors (for Pandoc highlight.js / skylighting) */
pre code .kw { color: var(--ct-arcane-violet); font-weight: 600; }  /* keyword */
pre code .dt { color: var(--ct-signal-cyan); }                       /* data type */
pre code .dv { color: var(--ct-cosmic-magenta); }                    /* decimal value */
pre code .st { color: #54E6AE; }                                     /* string */
pre code .co { color: var(--ct-text-muted); font-style: italic; }    /* comment */
pre code .fu { color: var(--ct-astral-blue); }                       /* function */
pre code .op { color: var(--ct-text-secondary); }                    /* operator */
pre code .bu { color: var(--ct-signal-cyan); }                       /* built-in */
pre code .al { color: var(--ct-cosmic-magenta); font-weight: 700; }  /* alert */
pre code .va { color: var(--ct-starlight); }                         /* variable */
pre code .cf { color: var(--ct-arcane-violet); }                     /* control flow */
pre code .pp { color: var(--ct-cosmic-magenta); }                    /* preprocessor */
pre code .at { color: var(--ct-astral-blue); }                       /* attribute */
pre code .ss { color: #54E6AE; }                                     /* special string */
pre code .im { color: var(--ct-arcane-violet); }                     /* import */
pre code .an { color: var(--ct-signal-cyan); font-style: italic; }   /* annotation */

/* ── Pandoc sourceCode class ─────────────────────────────────────────────── */
div.sourceCode {
  background: transparent;
  margin: 1.5rem 0;
}
div.sourceCode pre {
  margin: 0;
}

/* Line numbers */
pre code span.ln,
td.lineNumbers {
  color: var(--ct-text-muted);
  border-right: 1px solid rgba(0, 229, 255, 0.10);
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES — HIGH-TECH DATA GRIDS
   ═══════════════════════════════════════════════════════════════════════════ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--ct-size-small);
  background: var(--ct-surface);
  border: 1px solid var(--ct-border-glow);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.06);
}

thead {
  background: linear-gradient(135deg, rgba(123, 77, 255, 0.20), rgba(0, 229, 255, 0.12));
}

thead th {
  font-family: var(--ct-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ct-signal-cyan);
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--ct-border-glow);
}

tbody td {
  padding: 0.7rem 1rem;
  color: var(--ct-text-primary);
  border-bottom: 1px solid var(--ct-border-subtle);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: rgba(0, 229, 255, 0.04);
}

tbody tr:nth-child(even) {
  background: rgba(123, 77, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCKQUOTES — DEFAULT
   ═══════════════════════════════════════════════════════════════════════════ */
blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  background: var(--ct-panel);
  border-left: 4px solid var(--ct-arcane-violet);
  border-radius: 0 6px 6px 0;
  color: var(--ct-text-secondary);
  font-style: italic;
  position: relative;
}

blockquote p {
  margin: 0 0 0.5rem 0;
  color: inherit;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALLOUT BLOCKS — GLOWING FRAMED PANELS
   Use as HTML blocks: <div class="callout callout-note"> ... </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.callout {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  border: 1px solid var(--ct-border-glow);
  position: relative;
  page-break-inside: avoid;
  background: var(--ct-surface);
}

.callout::before {
  display: block;
  font-family: var(--ct-font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
}

.callout p {
  margin: 0 0 0.5rem 0;
}
.callout p:last-child {
  margin-bottom: 0;
}

/* ── NOTE ─────────────────────────────────────────────────────────────────── */
.callout-note {
  border-left: 4px solid var(--ct-signal-cyan);
  box-shadow: -2px 0 12px rgba(0, 229, 255, 0.10);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), var(--ct-surface));
}
.callout-note::before {
  content: '⟐  NOTE';
  color: var(--ct-signal-cyan);
  border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

/* ── WARNING ──────────────────────────────────────────────────────────────── */
.callout-warning {
  border-left: 4px solid #FF6B35;
  box-shadow: -2px 0 12px rgba(255, 107, 53, 0.10);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.06), var(--ct-surface));
}
.callout-warning::before {
  content: '⚠  WARNING';
  color: #FF6B35;
  border-bottom: 1px solid rgba(255, 107, 53, 0.15);
}

/* ── THEOREM ──────────────────────────────────────────────────────────────── */
.callout-theorem {
  border-left: 4px solid var(--ct-arcane-violet);
  box-shadow: -2px 0 12px rgba(123, 77, 255, 0.10);
  background: linear-gradient(135deg, rgba(123, 77, 255, 0.06), var(--ct-surface));
}
.callout-theorem::before {
  content: '◈  THEOREM';
  color: var(--ct-arcane-violet);
  border-bottom: 1px solid rgba(123, 77, 255, 0.15);
}

/* ── DOCTRINE ─────────────────────────────────────────────────────────────── */
.callout-doctrine {
  border-left: 4px solid var(--ct-cosmic-magenta);
  box-shadow: -2px 0 12px rgba(255, 46, 166, 0.10);
  background: linear-gradient(135deg, rgba(255, 46, 166, 0.06), var(--ct-surface));
}
.callout-doctrine::before {
  content: '⟡  DOCTRINE';
  color: var(--ct-cosmic-magenta);
  border-bottom: 1px solid rgba(255, 46, 166, 0.15);
}

/* ── SYSTEM RULE ──────────────────────────────────────────────────────────── */
.callout-system {
  border-left: 4px solid var(--ct-astral-blue);
  box-shadow: -2px 0 12px rgba(47, 140, 255, 0.10);
  background: linear-gradient(135deg, rgba(47, 140, 255, 0.06), var(--ct-surface));
}
.callout-system::before {
  content: '⎔  SYSTEM RULE';
  color: var(--ct-astral-blue);
  border-bottom: 1px solid rgba(47, 140, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════════════════════════════ */
ul, ol {
  margin: 0.75rem 0 1.25rem 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.35rem;
  color: var(--ct-text-primary);
}

li::marker {
  color: var(--ct-arcane-violet);
}

ol li::marker {
  color: var(--ct-signal-cyan);
  font-family: var(--ct-font-heading);
  font-weight: 600;
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Definition lists */
dl {
  margin: 1rem 0;
}
dt {
  font-family: var(--ct-font-heading);
  font-size: var(--ct-size-small);
  font-weight: 600;
  color: var(--ct-signal-cyan);
  letter-spacing: 0.04em;
  margin-top: 1rem;
}
dd {
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--ct-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASSMORPHISM PANEL — use with <div class="glass-panel"> ... </div>
   ═══════════════════════════════════════════════════════════════════════════ */
.glass-panel {
  background: rgba(18, 0, 43, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 215, 255, 0.08);
  border-radius: 10px;
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(201, 215, 255, 0.05);
  page-break-inside: avoid;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPECIAL CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cosmic Section Title — full-width banner ─────────────────────────── */
.cosmic-title {
  text-align: center;
  padding: 3rem 2rem;
  margin: 2rem -2rem;
  background:
    radial-gradient(ellipse at center, rgba(123, 77, 255, 0.12) 0%, transparent 70%),
    var(--ct-body-bg);
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-image: var(--ct-nebula-gradient) 1;
  page-break-before: always;
}

.cosmic-title h1 {
  page-break-before: avoid;
  margin-top: 0;
}

/* ── Doctrine Block — special framing for key doctrines ──────────────── */
.doctrine-block {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(255, 46, 166, 0.05), rgba(123, 77, 255, 0.05));
  border: 1px solid rgba(255, 46, 166, 0.15);
  border-radius: 8px;
  position: relative;
  page-break-inside: avoid;
}

.doctrine-block::before {
  content: '◇ DOCTRINAL CANON ◇';
  display: block;
  text-align: center;
  font-family: var(--ct-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ct-cosmic-magenta);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 46, 166, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTNOTES
   ═══════════════════════════════════════════════════════════════════════════ */
.footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid;
  border-image: var(--ct-divider-gradient) 1;
  font-size: var(--ct-size-small);
  color: var(--ct-text-secondary);
}

.footnotes ol li {
  margin-bottom: 0.5rem;
}

.footnote-ref {
  color: var(--ct-signal-cyan);
  font-size: 0.75em;
  vertical-align: super;
  border-bottom: none;
}

.footnote-back {
  color: var(--ct-arcane-violet);
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS (Pandoc --toc)
   ═══════════════════════════════════════════════════════════════════════════ */
#TOC, nav#TOC, .toc {
  background: var(--ct-surface);
  border: 1px solid var(--ct-border-glow);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  page-break-after: always;
}

#TOC::before, nav#TOC::before, .toc::before {
  content: '⟐  TABLE OF CONTENTS';
  display: block;
  font-family: var(--ct-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--ct-signal-cyan);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

#TOC ul, nav#TOC ul, .toc ul {
  list-style: none;
  padding-left: 0;
}

#TOC ul ul, nav#TOC ul ul, .toc ul ul {
  padding-left: 1.25rem;
}

#TOC li, nav#TOC li, .toc li {
  margin-bottom: 0.3rem;
}

#TOC a, nav#TOC a, .toc a {
  color: var(--ct-text-secondary);
  border-bottom: none;
  transition: color 0.2s;
}

#TOC a:hover, nav#TOC a:hover, .toc a:hover {
  color: var(--ct-signal-cyan);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════════════════════════════════════ */
img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--ct-border-subtle);
  margin: 1rem 0;
}

figure {
  margin: 1.5rem 0;
  text-align: center;
}

figcaption {
  font-family: var(--ct-font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ct-text-muted);
  margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page break */
.page-break {
  page-break-after: always;
  break-after: page;
}

/* Centered text */
.text-center {
  text-align: center;
}

/* Glow text */
.glow-cyan {
  color: var(--ct-signal-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}
.glow-violet {
  color: var(--ct-arcane-violet);
  text-shadow: 0 0 8px rgba(123, 77, 255, 0.4);
}
.glow-magenta {
  color: var(--ct-cosmic-magenta);
  text-shadow: 0 0 8px rgba(255, 46, 166, 0.4);
}

/* Nebula gradient text */
.gradient-text {
  background: var(--ct-nebula-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cosmic divider with glyph */
.cosmic-divider {
  text-align: center;
  margin: 2.5rem 0;
  position: relative;
}
.cosmic-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ct-divider-gradient);
}
.cosmic-divider::after {
  content: '◆';
  position: relative;
  background: var(--ct-body-bg);
  padding: 0 1rem;
  color: var(--ct-arcane-violet);
  font-size: 0.8rem;
}

/* Subtitle / tagline under headings */
.subtitle {
  font-family: var(--ct-font-body);
  font-size: var(--ct-size-small);
  font-weight: 400;
  color: var(--ct-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT / PDF OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  body {
    background-color: var(--ct-body-bg) !important;
    color: var(--ct-text-primary) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    padding: 0;
    max-width: none;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  @page {
    size: A4;
    margin: 1in;
  }

  h1 {
    page-break-before: always;
  }
  h1:first-of-type {
    page-break-before: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  pre, blockquote, table, .callout, .glass-panel, .doctrine-block {
    page-break-inside: avoid;
  }

  .page-break {
    page-break-after: always;
    break-after: page;
  }

  a {
    color: var(--ct-link) !important;
    border-bottom: none;
  }

  /* Ensure dark backgrounds print */
  pre {
    background: #0C0024 !important;
  }
  table {
    background: var(--ct-surface-solid) !important;
  }
  thead {
    background: #1A0B38 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANDOC TITLE BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */
header.title-block-header {
  text-align: center;
  padding: 3rem 2rem 2rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid;
  border-image: var(--ct-nebula-gradient) 1;
}

header.title-block-header h1.title {
  font-size: 3rem;
  page-break-before: avoid;
  margin-top: 0;
}

header.title-block-header p.subtitle {
  font-family: var(--ct-font-heading);
  font-size: 1.1rem;
  color: var(--ct-text-secondary);
  margin-top: 0.5rem;
}

header.title-block-header p.author {
  font-family: var(--ct-font-body);
  font-size: var(--ct-size-small);
  color: var(--ct-arcane-violet);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

header.title-block-header p.date {
  font-family: var(--ct-font-mono);
  font-size: var(--ct-size-small);
  color: var(--ct-text-muted);
  margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR (for HTML preview)
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--ct-void-black);
}
::-webkit-scrollbar-thumb {
  background: rgba(123, 77, 255, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 77, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════════════════════ */
::selection {
  background: rgba(123, 77, 255, 0.35);
  color: var(--ct-starlight);
}

::-moz-selection {
  background: rgba(123, 77, 255, 0.35);
  color: var(--ct-starlight);
}

/* ═══════════════════════════════════════════════════════════════════════════
   END — COSMOTECH™ THEME v1.0
   ═══════════════════════════════════════════════════════════════════════════ */