@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Russo+One&family=VT323&display=swap');

/* Reader-page themes only (applied via body[data-article-theme="..."]). */

/* Base cybercore layout/overlays (shared by both light + dark). */
body[data-article-theme="cybercore"] {
  position: relative;
  isolation: isolate;

  /* Demo cybercore typography (chrome + mono + title font). */
  --cybercore-font-display: "Audiowide", "Russo One", sans-serif;
  --cybercore-font-body: "JetBrains Mono", monospace;
  --cybercore-font-ui: "Russo One", "Audiowide", sans-serif;

  /* Demo background scanline controls (hard-stop stripes). */
  --scanlines-dot-grid: 9px 9px;

  --scanlines-band: rgba(0, 0, 0, 0.55);
  --scanlines-dot: rgba(255, 255, 255, 0.07);
  --scanlines-ellipse-a: rgba(255, 255, 255, 0.04);
  --scanlines-ellipse-b: rgba(255, 255, 255, 0.025);

  /* Demo panel stripe overlay (transparent gap + dark band). */
  --panel-stripe-gap-end: 3px;
  --panel-stripe-band-end: 5px;
  --panel-stripe-band: rgba(0, 0, 0, 0.3);

  --panel-bg: rgba(12, 12, 12, 0.95);
}

body[data-article-theme="cybercore"]::before,
body[data-article-theme="cybercore"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Subtle scanlines */
body[data-article-theme="cybercore"]::before {
  /* Matches cybercore-demo.html: fixed scanlines + dot grid + vignette ellipses. */
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 1;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 2px,
      transparent 5px
    ),
    radial-gradient(circle, var(--scanlines-dot) 1px, transparent 1px),
    radial-gradient(ellipse 50% 40% at 10% 100%, var(--scanlines-ellipse-b) 0%, transparent 90%);
  background-size: 100% 5px, var(--scanlines-dot-grid), 100% 100%, 100% 100%;
  background-position: 0 0;
}

/* Fine grain/noise */
body[data-article-theme="cybercore"]::after {
  /* Reference background doesn't include the extra grain overlay. */
  display: none;
}

body[data-article-theme="cybercore"] .shell {
  position: relative;
  z-index: 2;
}

body[data-article-theme="cybercore"] .topbar {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: var(--panel-bg);
  border: 2px solid var(--border);
  padding: 11px 14px;
  margin-top: 8px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--head) 20%, transparent 80%) inset,
    0 10px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1.8px);
}

body[data-article-theme="cybercore"] .topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent var(--panel-stripe-gap-end),

  );
}

body[data-article-theme="cybercore"] .topbar > * {
  position: relative;
  z-index: 1;
}

body[data-article-theme="cybercore"] .topbar .nav a {
  font-family: var(--cybercore-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* Dark mode: deep navy + icy chrome accents */
html[data-theme="dark"] body[data-article-theme="cybercore"] {
  --bg: #050505;
  --bg2: #1a1a1a;
  --bg3: #333333;
  --border: #333333;
  --muted: #555555;
  --subtle: #888888;
  --body: #aaaaaa;
  --head: #ffffff;
  --accent: #cccccc;
  --accent2: #ffffff;
  --accent3: #cccccc;
  --prompt: #ffffff;

  /* Ensure scanline colors match the demo palette. */
  --scanlines-band: rgba(0, 0, 0, 0.55);
  --scanlines-dot: rgba(255, 255, 255, 0.07);
  --scanlines-ellipse-a: rgba(255, 255, 255, 0.04);
  --scanlines-ellipse-b: rgba(255, 255, 255, 0.025);
  --panel-stripe-band: rgba(0, 0, 0, 0.3);
  --panel-bg: rgba(12, 12, 12, 0.95);

  /* Chrome title (dark = bright chrome) */
  --title-chrome-0: #ffffff;
  --title-chrome-1: #cccccc;
  --title-chrome-2: #888888;
  --title-chrome-3: #333333;
  --title-chrome-4: #777777;
  --title-chrome-5: #ffffff;
  --title-chrome-6: #aaaaaa;
  --title-chrome-7: #222222;
  --title-chrome-8: #999999;
  --title-glow: rgba(255, 255, 255, 0.25);
  --title-shadow: rgba(0, 0, 0, 1);

  background: var(--bg);
}

/* Light mode: icy magazine/collage look */
html[data-theme="light"] body[data-article-theme="cybercore"] {
  --bg: #f4f4f4;
  --bg2: #e6e6e6;
  --bg3: #d3d3d3;
  --border: #bdbdbd;
  --muted: #7a7a7a;
  --subtle: #6a6a6a;
  --body: #2a2a2a;
  --head: #0c0c0c;
  --accent: #333333;
  --accent2: #0c0c0c;
  --accent3: #444444;
  --prompt: #0c0c0c;

  /*
   * Copy reference background recipe (from cybercore-demo.html) for light mode:
   * keep the same "screen" contrast (dark scan bands + light dots/ellipses).
   */
  --scanlines-band: rgba(0, 0, 0, 0.55);
  /* In light mode, flip marks to dark so the dot grid remains visible. */
  --scanlines-dot: rgba(0, 0, 0, 0.07);
  --scanlines-ellipse-a: rgba(0, 0, 0, 0.04);
  --scanlines-ellipse-b: rgba(0, 0, 0, 0.025);
  --panel-stripe-band: rgba(0, 0, 0, 0.18);
  --panel-bg: rgba(245, 245, 245, 0.92);

  /* Chrome title (light = dark chrome) */
  --title-chrome-0: #111111;
  --title-chrome-1: #333333;
  --title-chrome-2: #666666;
  --title-chrome-3: #999999;
  --title-chrome-4: #8b8b8b;
  --title-chrome-5: #444444;
  --title-chrome-6: #888888;
  --title-chrome-7: #222222;
  --title-chrome-8: #666666;
  --title-glow: rgba(0, 0, 0, 0.18);
  --title-shadow: rgba(0, 0, 0, 0.35);

  background: var(--bg);
}

/* Reader glass/chrome treatment */
body[data-article-theme="cybercore"] .reader {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border);
  padding: 24px 24px 30px;
  background: var(--panel-bg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--head) 20%, transparent 80%) inset,
    0 14px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(1.2px);
}

body[data-article-theme="cybercore"] .reader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent var(--panel-stripe-gap-end),
  );
}

body[data-article-theme="cybercore"] .reader > * {
  position: relative;
  z-index: 1;
}

body[data-article-theme="cybercore"] .reader-content {
  border: none;
  padding: 18px 18px 12px;
  background: transparent;
  font-family: var(--cybercore-font-body);
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* Typography and chrome details */
body[data-article-theme="cybercore"] .reader-title {
  font-family: var(--cybercore-font-display);
  font-weight: 900;
  font-size: clamp(1.85rem, 4.2vw, 2.55rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    var(--title-chrome-0) 0%,
    var(--title-chrome-1) 14%,
    var(--title-chrome-2) 30%,
    var(--title-chrome-3) 46%,
    var(--title-chrome-4) 57%,
    var(--title-chrome-5) 67%,
    var(--title-chrome-6) 77%,
    var(--title-chrome-7) 90%,
    var(--title-chrome-8) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px var(--title-glow)) drop-shadow(0 3px 6px var(--title-shadow));
}

body[data-article-theme="cybercore"] .reader-date {
  color: var(--subtle);
  font-family: var(--cybercore-font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body[data-article-theme="cybercore"] .reader-back {
  color: var(--head);
  font-family: var(--cybercore-font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

body[data-article-theme="cybercore"] .reader-content p,
body[data-article-theme="cybercore"] .reader-content li {
  font-family: var(--cybercore-font-body);
  font-size: 0.82rem;
  line-height: 1.85;
}

body[data-article-theme="cybercore"] .reader-content h2,
body[data-article-theme="cybercore"] .reader-content h3 {
  color: var(--head);
  font-family: var(--cybercore-font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body[data-article-theme="cybercore"] .reader-content h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.52rem);
  color: var(--subtle);
}

body[data-article-theme="cybercore"] .reader-content h3 {
  font-size: clamp(1rem, 2vw, 1.2rem);
}

body[data-article-theme="cybercore"] .reader-content a {
  color: var(--body);
  text-decoration: none;
}

body[data-article-theme="cybercore"] .reader-content pre {
  border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg3) 82%, white 18%) 0%,
      color-mix(in srgb, var(--bg2) 88%, white 12%) 100%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--head) 14%, transparent 86%) inset,
    0 0 18px rgba(0, 0, 0, 0.25);
  font-family: var(--cybercore-font-ui);
  font-size: 0.84rem;
}

body[data-article-theme="cybercore"] .reader-content code {
  border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
  background: color-mix(in srgb, var(--bg3) 88%, white 12%);
  font-family: var(--cybercore-font-ui);
  font-size: 0.85em;
}

body[data-article-theme="cybercore"] .topbar,
body[data-article-theme="cybercore"] .footer {
  border-color: color-mix(in srgb, var(--border) 82%, white 18%);
}

body[data-article-theme="cybercore"] .prompt-label span {
  color: var(--accent2);
}