/* ==========================================================================
   ANALOG BRUTALIST DESIGN SYSTEM & EDITORIAL LEDGER
   Jyotiraj (Raj) Nath - Computational Quantum Physics & Archival Documentation
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css');

:root {
  /* DAY MODE: FIELD NOTEBOOK & ARCHIVAL PAPER */
  --bg-primary: #F5F2EB;
  --bg-subtle: #EDE7DB;
  --bg-card: #FAF8F5;
  --fg-primary: #1A1A1C;
  --fg-secondary: #4A4A4F;
  --fg-muted: #78716C;
  --border-color: #D1CBBF;
  --border-strong: #1A1A1C;
  --accent-red: #942A27;
  --accent-blue: #1D4ED8;
  --accent-green: #2D5A27;
  --accent-amber: #B45309;
  --badge-bg: #E7E1D3;
  --badge-fg: #1A1A1C;
  --highlight-bg: #FEF3C7;
  --code-bg: #EAE4D6;
  --terminal-bg: #141416;
  --terminal-fg: #E2E0D8;
  --grid-line: rgba(209, 203, 191, 0.4);

  --font-mono: 'Courier Prime', 'IBM Plex Mono', 'Space Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
  --font-serif: 'Newsreader', 'EB Garamond', Georgia, serif;
}

[data-theme="phosphor"] {
  /* NIGHT MODE: TERMINAL PUNCHCARD & PHOSPHOR CRT */
  --bg-primary: #0F0F10;
  --bg-subtle: #171719;
  --bg-card: #141416;
  --fg-primary: #E2E0D8;
  --fg-secondary: #A1A1AA;
  --fg-muted: #71717A;
  --border-color: #28282C;
  --border-strong: #E2E0D8;
  --accent-red: #EF4444;
  --accent-blue: #38BDF8;
  --accent-green: #059669;
  --accent-amber: #D97706;
  --badge-bg: #1F1F23;
  --badge-fg: #E2E0D8;
  --highlight-bg: #292524;
  --code-bg: #1B1B1E;
  --terminal-bg: #0A0A0B;
  --terminal-fg: #10B981;
  --grid-line: rgba(40, 40, 44, 0.6);
}

/* Base Reset & Foundations */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-mono);
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  position: relative;
}

/* Subtle background ledger grid rule */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}

.site-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-primary);
  line-height: 1.25;
}

h1 { font-size: 1.65rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.0rem; }

p {
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.1s ease, background-color 0.1s ease;
}

a:hover {
  color: var(--accent-red);
  background-color: var(--badge-bg);
}

/* Editorial Serif for Essays */
.prose-editorial {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.8;
  max-width: 68ch;
  color: var(--fg-primary);
}

.prose-editorial p {
  margin-bottom: 1.5rem;
}

.prose-editorial h2 {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.4rem;
}

.prose-editorial h3 {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.prose-editorial blockquote {
  border-left: 2px solid var(--accent-red);
  padding-left: 1.25rem;
  font-style: italic;
  margin: 1.5rem 0;
  color: var(--fg-secondary);
}

/* Marginalia / Sidenote */
.marginalia {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--fg-muted);
  border-left: 1px dashed var(--accent-red);
  padding-left: 0.75rem;
  margin: 1rem 0;
}

@media (min-width: 1024px) {
  .marginalia-float {
    float: right;
    clear: right;
    width: 240px;
    margin-right: -280px;
    margin-top: 0.2rem;
    margin-bottom: 1rem;
    position: relative;
  }
}

/* Mechanical Ledger Lines & Borders */
.ledger-box {
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  position: relative;
}

.ledger-box-solid {
  border: 1px solid var(--border-strong);
  background-color: var(--bg-card);
}

.ledger-dotted {
  border-bottom: 1px dotted var(--border-color);
}

.ledger-dashed {
  border-bottom: 1px dashed var(--border-color);
}

.ledger-double {
  border-bottom: 3px double var(--border-color);
}

/* Simulated Typewriter Strike-through */
del.strike, .typewriter-strike {
  text-decoration: line-through;
  text-decoration-color: var(--accent-red);
  text-decoration-thickness: 1.5px;
  color: var(--fg-muted);
}

/* Verification & Status Stamps */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.stamp-verified {
  color: var(--accent-green);
  border-color: var(--accent-green);
  background-color: rgba(45, 90, 39, 0.08);
}

.stamp-converged {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  background-color: rgba(29, 78, 216, 0.08);
}

.stamp-archived {
  color: var(--fg-muted);
  border-color: var(--border-color);
  background-color: var(--badge-bg);
}

.stamp-red, .stamp-draft, .stamp-review {
  color: var(--accent-red);
  border-color: var(--accent-red);
  background-color: rgba(148, 42, 39, 0.08);
}

.stamp-amber {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
  background-color: rgba(180, 83, 9, 0.08);
}

/* Nav & Catalog Tabs */
.nav-tab {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.75rem;
  border-right: 1px solid var(--border-color);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--fg-primary);
  background-color: var(--bg-primary);
  transition: all 0.1s ease;
  white-space: nowrap;
}

.nav-tab:hover {
  background-color: var(--bg-subtle);
  color: var(--accent-red);
}

.nav-tab.active {
  background-color: var(--fg-primary);
  color: var(--bg-primary);
}

/* Code Blocks & Terminal */
pre, code {
  font-family: var(--font-mono);
}

code:not(pre code) {
  font-size: 0.88em;
  background-color: var(--code-bg);
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--border-color);
}

pre {
  background-color: var(--terminal-bg);
  color: var(--terminal-fg);
  padding: 1rem;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Interactive Details/BibTeX Drawer */
details {
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  margin-top: 0.5rem;
}

details summary {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background-color: var(--bg-subtle);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

details summary:hover {
  color: var(--accent-red);
}

details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

details .drawer-content {
  padding: 0.75rem;
  background-color: var(--terminal-bg);
  color: var(--terminal-fg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  overflow-x: auto;
}

/* Buttons */
.btn-brutalist {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-strong);
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 2px 2px 0 var(--border-strong);
  transition: all 0.1s ease;
}

.btn-brutalist:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--border-strong);
  color: var(--accent-red);
}

.btn-brutalist:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Command Palette Modal */
.cmd-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 15, 16, 0.75);
  backdrop-filter: blur(2px);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.cmd-modal {
  width: 92%;
  max-width: 680px;
  background-color: var(--bg-primary);
  border: 2px solid var(--border-strong);
  box-shadow: 6px 6px 0 var(--border-strong);
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}

.cmd-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  background-color: var(--bg-card);
  color: var(--fg-primary);
  border: none;
  border-bottom: 1px solid var(--border-color);
  outline: none;
}

.cmd-results {
  overflow-y: auto;
  max-height: 55vh;
}

.cmd-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px dotted var(--border-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: var(--fg-primary);
}

.cmd-item:hover, .cmd-item.selected {
  background-color: var(--badge-bg);
  color: var(--accent-red);
}

/* Blinking Cursor for Terminal & Tickers */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s infinite;
  display: inline-block;
  color: var(--accent-red);
  font-weight: bold;
}

/* ==========================================================================
   ROBUST UTILITY CLASS FALLBACKS (Pure CSS Layout Engine)
   Ensures complete grid, flexbox, typography, and spacing resilience
   ========================================================================== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

.w-full { width: 100%; }
.max-w-prose { max-width: 68ch; }
.max-h-72 { max-height: 18rem; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Spacings */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }

.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-16 { padding-bottom: 4rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }

.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.mr-2 { margin-right: 0.5rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-16 > * + * { margin-top: 4rem; }

/* Text sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.tracking-typewriter { letter-spacing: 0.08em; }
.tracking-wider { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.break-all { word-break: break-all; }

/* Borders & Dividers */
.border { border: 1px solid var(--border-color); }
.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }
.border-l-2 { border-left: 2px solid var(--border-color); }
.border-l-4 { border-left: 4px solid var(--border-color); }
.border-collapse { border-collapse: collapse; }
.divide-y > * + * { border-top: 1px solid var(--border-color); }

/* Color utilities mapped to CSS variables */
.text-paper-red { color: var(--accent-red); }
.text-paper-carbon { color: var(--fg-primary); }
.text-paper-margin { color: var(--fg-muted); }
.text-paper-blue { color: var(--accent-blue); }
.text-paper-bg { color: var(--bg-primary); }

.bg-paper-bg { background-color: var(--bg-primary); }
.bg-paper-subtle { background-color: var(--bg-subtle); }
.bg-paper-carbon { background-color: var(--terminal-bg); }

.border-paper-pencil { border-color: var(--border-color); }

[data-theme="phosphor"] .dark\:text-terminal-amber { color: var(--accent-amber) !important; }
[data-theme="phosphor"] .dark\:text-terminal-fg { color: var(--fg-primary) !important; }
[data-theme="phosphor"] .dark\:text-terminal-muted { color: var(--fg-muted) !important; }
[data-theme="phosphor"] .dark\:text-terminal-cyan { color: var(--accent-blue) !important; }
[data-theme="phosphor"] .dark\:bg-terminal-bg { background-color: var(--bg-primary) !important; }
[data-theme="phosphor"] .dark\:bg-terminal-subtle { background-color: var(--bg-subtle) !important; }
[data-theme="phosphor"] .dark\:border-terminal-wire { border-color: var(--border-color) !important; }

/* Responsive layout rules */
@media (min-width: 640px) {
  .sm\:inline-block { display: inline-block; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:flex-row { flex-direction: row; }
  .md\:items-start { align-items: flex-start; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:text-right { text-align: right; }
  .md\:p-8 { padding: 2rem; }
  .md\:p-10 { padding: 2.5rem; }
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-3xl { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-6 { grid-column: span 6 / span 6; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
}

/* ==========================================================================
   PRINT-OPTIMIZED STYLESHEET (@media print)
   Physical Lab Report Rendering
   ========================================================================== */
@media print {
  @page {
    margin: 15mm 15mm 15mm 15mm;
    size: A4 portrait;
  }

  body {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-size: 11pt !important;
    line-height: 1.4 !important;
  }

  body::before {
    display: none !important;
  }

  header nav,
  .no-print,
  #cmdPaletteBackdrop,
  #themeToggleBtn,
  #cmdSearchTrigger,
  #sitemapGraphWidget,
  .terminal-input-row,
  .btn-brutalist,
  .cmd-backdrop,
  details summary {
    display: none !important;
  }

  details {
    display: block !important;
    border: 1px solid #000000 !important;
    margin: 10pt 0 !important;
  }

  details .drawer-content {
    display: block !important;
    background-color: #F5F5F5 !important;
    color: #000000 !important;
    border: none !important;
    font-size: 8pt !important;
  }

  .site-container::before {
    content: "MASSEY UNIVERSITY // QUANTUM CONDENSED MATTER ARCHIVAL LEDGER // DOC-ID: JN-MASSEY-PHYS";
    display: block;
    font-family: var(--font-mono);
    font-size: 8pt;
    font-weight: bold;
    border-bottom: 2pt solid #000000;
    padding-bottom: 4pt;
    margin-bottom: 12pt;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .site-container::after {
    content: "ARCHIVAL CERTIFICATION: Physical copy generated from git revision ffe919f. Sign-off: ________________________ (Prof. Joachim Brand Lab / Massey University Auckland)";
    display: block;
    margin-top: 25pt;
    padding-top: 8pt;
    border-top: 1pt solid #000000;
    font-family: var(--font-mono);
    font-size: 8pt;
    color: #333333;
  }

  .ledger-box, .ledger-box-solid {
    border: 1pt solid #000000 !important;
    background: transparent !important;
    page-break-inside: avoid;
  }

  a {
    color: #000000 !important;
    text-decoration: underline !important;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    font-weight: normal;
  }

  .stamp {
    border: 1pt solid #000000 !important;
    color: #000000 !important;
    background: transparent !important;
  }
}