/* Black Matter reader. COMLOG tokens from infinitystats/ui/src/styles/comlog.css (near-black ground,
 * hairline rules, one cyan signal, Michroma display, JetBrains Mono labels), with one deliberate
 * departure: the prose is set in Barlow at normal width, not Barlow Semi Condensed. Condensed type
 * is fine for table cells and tiring over seven pages. No scanlines behind the text column. */

:root {
  --cl-bg: #06080B;
  --cl-panel: #0A0E13;
  --cl-rule: #1B2530;
  --cl-ink: #EAF4FA;
  --cl-text: #C9D6E0;
  --cl-dim: #98A6B3;
  --cl-faint: #7E8D9B;
  --cl-control: #5A6876;
  --cl-cyan: #3DE0F0;

  --fs-label: 0.75rem;
  --fs-small: 0.8125rem;

  --cl-display: 'Michroma', system-ui, sans-serif;
  --cl-data: 'JetBrains Mono', ui-monospace, monospace;
  --reader-body: 'Barlow', system-ui, sans-serif;

  /* Reader text size; reader.js steps it between 16 and 28px. In px-from-rem so the browser's own
   * font size setting still scales it. */
  --reader-size: 1.1875rem; /* 19px */
  --measure: 66ch;

  color-scheme: dark;
}

/* Paper theme for daylight reading. Same structure, cyan darkened to stay AA on white. */
:root[data-theme="light"] {
  --cl-bg: #F4F1EA;
  --cl-panel: #FBF9F4;
  --cl-rule: #D9D3C7;
  --cl-ink: #14181C;
  --cl-text: #23292F;
  --cl-dim: #4F5862;
  --cl-faint: #5F6873;
  --cl-control: #8A8F95;
  --cl-cyan: #0A7C89;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: var(--reader-body);
  font-size: var(--reader-size);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

a { color: var(--cl-cyan); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible { outline: 2px solid var(--cl-cyan); outline-offset: 2px; }

/* ---- Top bar: series mark + reader controls, sticky so the size buttons stay in reach. ---- */
.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--cl-bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cl-rule);
  font-family: var(--cl-data);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-faint);
}

.bar a.mark { color: var(--cl-ink); text-decoration: none; font-family: var(--cl-display); letter-spacing: 0.08em; }
.bar .spacer { flex: 1; }

.controls { display: flex; gap: 6px; }

.controls button {
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cl-control);
  border-radius: 0;
  background: transparent;
  color: var(--cl-ink);
  font: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.controls button:hover { border-color: var(--cl-cyan); color: var(--cl-cyan); }
.controls button:disabled { opacity: 0.35; cursor: default; border-color: var(--cl-control); color: var(--cl-ink); }
.controls .a-small { font-size: 0.7rem; }
.controls .a-big { font-size: 0.95rem; }

/* Progress hairline under the bar. */
.progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--cl-cyan); }

/* ---- Chapter ---- */
main { max-width: var(--measure); margin: 0 auto; padding: 0 16px 6rem; }

.chapter-head {
  position: relative;
  margin: 3.5rem 0 3rem;
  padding: 28px 24px;
  border: 1px solid var(--cl-rule);
  background: var(--cl-panel);
}

/* COMLOG corner brackets, hero-only. */
.chapter-head::before, .chapter-head::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.chapter-head::before { left: -1px; top: -1px; border-left: 1px solid var(--cl-cyan); border-top: 1px solid var(--cl-cyan); }
.chapter-head::after { right: -1px; bottom: -1px; border-right: 1px solid var(--cl-cyan); border-bottom: 1px solid var(--cl-cyan); }

.kicker {
  margin: 0 0 14px;
  font-family: var(--cl-data);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cl-cyan);
}

h1 {
  margin: 0;
  font-family: var(--cl-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--cl-ink);
}

.meta {
  margin: 16px 0 0;
  font-family: var(--cl-data);
  font-size: var(--fs-small);
  color: var(--cl-faint);
}
.meta a { color: var(--cl-dim); }

article p { margin: 0; hyphens: auto; -webkit-hyphens: auto; }
article p + p { text-indent: 1.5em; }
article em { font-style: italic; }

/* Scene slugs read as HUD timestamps. */
article p.slug {
  margin: 0 0 1.4em;
  text-indent: 0;
  font-family: var(--cl-data);
  font-size: max(var(--fs-small), 0.72em);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cl-dim);
}
article p.slug + p { text-indent: 0; }
.slug-mark { color: var(--cl-cyan); }

.scene-break {
  margin: 2.6em auto;
  width: 64px;
  border: 0;
  border-top: 1px solid var(--cl-rule);
  position: relative;
  overflow: visible;
}
.scene-break::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--cl-cyan);
}

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4rem;
  padding-top: 20px;
  border-top: 1px solid var(--cl-rule);
  font-family: var(--cl-data);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.muted { color: var(--cl-faint); }

/* ---- Index ---- */
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cl-rule); }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--cl-rule);
  color: var(--cl-ink);
  text-decoration: none;
}
.toc a:hover .toc-t { color: var(--cl-cyan); }
.toc-n { font-family: var(--cl-data); font-size: var(--fs-small); color: var(--cl-cyan); }
.toc-t { flex: 1; font-family: var(--cl-display); font-size: 1rem; letter-spacing: 0.04em; }
.toc-m { font-family: var(--cl-data); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cl-faint); }

@media (max-width: 520px) {
  .bar .where { display: none; }
  .chapter-head { margin-top: 2rem; padding: 22px 18px; }
}

@media print {
  .bar, .chapter-nav { display: none; }
  body { background: #fff; color: #000; }
}