/* ============================================================
   OSMAN.SYS — /notes/
   Shared styles for the notes index and individual write-ups.
   Loaded after ../styles.css — reuses its CSS custom properties
   and theme classes, so the theme cycler works unchanged here.

   Sections:
     1. Simplified nav (no boot/matrix/avatar on these pages)
     2. Notes index (listing cards)
     3. Essay chrome (header, meta)
     4. Essay prose (readable body font)
     6. KaTeX overrides
     6b. Theme-tinted prose color
     7. Citation / source box
     8. Diagram
     9. Footer
    10. Responsive
   ============================================================ */

/* ========== 1. SIMPLIFIED NAV ========== */
/* index.html's #navbar styles are reused as-is; these pages just carry a
   lighter set of links (home / notes) and only the theme toggle. */
#navbar .nav-left a {
  color: inherit;
  text-decoration: none;
}

main {
  min-height: calc(100vh - 160px);
}

/* These pages skip the scroll-reveal JS entirely — sections are visible
   immediately via the .visible class in the markup. */

/* ========== 2. NOTES INDEX ========== */
.notes-intro {
  color: var(--fg-dim);
  font-size: 19px;
  max-width: 640px;
  margin-bottom: 28px;
}

.notes-grid {
  display: grid;
  gap: 16px;
}

.note-card {
  display: block;
  border: 1px solid var(--fg-dim);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
}

.note-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.15);
  transform: translateY(-2px);
}

.note-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent2);
  margin-bottom: 8px;
}

.note-title {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--accent);
  line-height: 1.6;
  margin-bottom: 10px;
}

.note-desc {
  font-family: Literata, Georgia, 'Times New Roman', serif;
  font-size: 16px;
  color: var(--fg-dim);
  line-height: 1.5;
}

/* ========== 3. ESSAY CHROME ========== */
.essay-header {
  border-bottom: 1px dashed var(--fg-dim);
  padding-bottom: 24px;
  margin-bottom: 36px;
}

.essay-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent2);
  margin-bottom: 10px;
}

.essay-title {
  font-family: var(--font-pixel);
  font-size: 22px;
  line-height: 1.6;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(255, 204, 0, 0.25);
  margin-bottom: 16px;
}

.essay-subtitle {
  font-family: Literata, Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--fg-dim);
  max-width: 640px;
  line-height: 1.5;
}

/* ========== 4. ESSAY PROSE ========== */
/* Deliberately NOT var(--fg)/var(--fg-bright) here — those are saturated
   neon, fine for short chrome labels but fatiguing across paragraphs of
   serif body text. Prose gets its own quiet, theme-tinted off-white
   instead (see the per-theme overrides further down), reserving the
   full neon for headers/accents where it reads as a deliberate accent
   rather than the thing you're trying to read for ten minutes. */
.essay-body {
  font-family: Literata, Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.75;
  color: #cfd8cf;
  max-width: 680px;
}

.essay-body p {
  margin-bottom: 22px;
}

.essay-body h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--accent);
  margin: 52px 0 20px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 10px;
}

.essay-body h2 .prompt {
  color: var(--fg-dim);
  font-family: var(--font-main);
  font-size: 20px;
}

.essay-body h3 {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--fg-bright);
  margin: 30px 0 14px;
}

/* Let Literata's actual bold/italic glyphs carry the emphasis instead of
   another jolt of saturated color. */
.essay-body strong { color: inherit; }
.essay-body em { color: inherit; }

.essay-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--fg-dim);
}
.essay-body a:hover { text-shadow: var(--glow); }

.essay-aside {
  border-left: 3px solid var(--fg-dim);
  padding: 4px 0 4px 18px;
  margin: 26px 0;
  color: var(--fg-dim);
  font-size: 17px;
}

.essay-sign-off {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px dashed var(--fg-dim);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 15px;
}

/* ========== 6. KATEX OVERRIDES ========== */
/* KaTeX defaults to black glyphs — make it inherit the same quiet prose
   tone as the surrounding text (not the neon fg-bright), so an equation
   sits in a paragraph instead of flashing out of it. */
.essay-body .katex { color: #cfd8cf; font-size: 1.08em; }
.essay-body .katex-display {
  margin: 12px 0 28px;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ========== 6b. THEME-TINTED PROSE COLOR ========== */
/* The quiet prose color above is a fixed off-white-green so it works by
   default; these keep it coordinated (still soft, never neon) when the
   theme cycler switches to amber/blue/pink. */
body.theme-amber .essay-body,
body.theme-amber .essay-body .katex { color: #e2d6c1; }

body.theme-blue .essay-body,
body.theme-blue .essay-body .katex { color: #c9d8e0; }

body.theme-pink .essay-body,
body.theme-pink .essay-body .katex { color: #e2cdd8; }

/* ========== 7. CITATION / SOURCE BOX ========== */
.source-box {
  border: 1px solid var(--fg-dim);
  padding: 18px 20px;
  margin: 28px 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-dim);
}

.source-box .source-tag {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--accent2);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.source-box cite {
  color: var(--fg);
  font-style: normal;
}

/* ========== 8. DIAGRAM ========== */
.essay-diagram {
  margin: 30px 0;
  text-align: center;
}

.essay-diagram svg {
  width: 100%;
  max-width: 620px;
  height: auto;
  color: var(--fg-dim);
}

.essay-diagram figcaption {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-dim);
  margin-top: 10px;
}

/* ========== 9. FOOTER LINK ========== */
.back-links {
  margin-top: 50px;
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.back-links a {
  color: var(--fg);
  text-decoration: none;
  border: 1px solid var(--fg-dim);
  padding: 6px 16px;
  transition: all 0.3s;
}

.back-links a:hover {
  border-color: var(--fg-bright);
  text-shadow: var(--glow);
}

/* ========== 10. RESPONSIVE ========== */
@media (max-width: 700px) {
  .essay-title { font-size: 17px; }
  .essay-body { font-size: 17px; }
}