/* Tell the user agent we manage our own theming for both light and
   dark intents (the theme picker covers everything from `original` to
   `paper notebook`). Without this, Chrome Android's "Auto dark theme
   for web contents" can rewrite our pages -- in particular, it strips
   background-image from `.fx-gradient` and forces visible text on
   `color: transparent` glyphs, so #gradient renders as plain-foreground
   text on phones while desktop Chrome is fine. The same opt-out lives
   as a `<meta name="color-scheme">` in each HTML head for earlier
   processing; this declaration is the CSS belt for the meta-tag
   suspenders. */
:root {
  color-scheme: light dark;
  --bg:           #06000a;
  --bg-deeper:    #03000a;
  --fg:           #c8ffd0;
  --fg-dim:       #5a8a6a;
  --fg-faint:     #2a4a32;
  --accent:       #ff2a8b;
  --accent-2:     #00e5ff;
  --hot:          #ff2a8b;
  --cool:         #00e5ff;
  --glitch-1:     #00e5ff;
  --glitch-2:     #ff2a8b;
  --err:          #ff3d3d;
  --ok:           #7cff9b;
  --border:       #1a1a22;
  --border-hot:   rgba(var(--hot-rgb), 0.35);
  --border-cool:  rgba(var(--cool-rgb), 0.35);

  /* RGB triplets — let glows compose against the active theme accent
     instead of baking the default pink/cyan literals into every
     text-shadow / box-shadow / translucent fill across the site. A
     theme just overrides --hot-rgb / --cool-rgb / ... and every glow
     follows automatically. */
  --hot-rgb:      255, 42, 139;
  --cool-rgb:     0, 229, 255;
  --err-rgb:      255, 61, 61;
  --ok-rgb:       124, 255, 155;
  --fg-rgb:       200, 255, 208;

  /* Overlay / decoration toggles. Light or print-style themes set
     scanlines and vignette near zero (or hide the elements entirely)
     and collapse the glitch RGB-split + L-shaped corner ticks. */
  --scanline-opacity:      0.22;
  --vignette-opacity:      0.55;
  --boot-noise-display:    block;
  --glitch-opacity:        1;
  --corner-tick-display:   block;

  /* Structural look knobs — themes mix these to break out of the
     "every theme looks like the same CRT in different colors" trap.
     Defaults here match the original CRT design exactly. */
  --card-border-style:     dashed;
  --card-border-width:     1px;
  --card-radius:           0;
  --card-bg:               linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.15));
  /* Inner panel darkening inside a card (chat scrollback, comment box,
     notification bell capsule). On dark themes a subtle black wash; on
     light themes themes flip this to a near-transparent ink tint so the
     inner box doesn't punch a dark hole through a cream/white card. */
  --card-inset-bg:         rgba(0,0,0,0.25);
  --button-radius:         0;
  --button-text-transform: uppercase;
  --button-letter-spacing: 0.08em;
  --glow-intensity:        1;
  --line-height:           1.5;

  /* Body background pattern (composes with --bg). Themes can swap
     this for a notebook ruling, a blueprint grid, a vaporwave sunset,
     etc. without touching the body{} rule. */
  --body-bg-image:
    radial-gradient(ellipse at top, rgba(var(--hot-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(var(--cool-rgb), 0.08) 0%, transparent 65%);

  --font-display: 'VT323', 'Courier New', monospace;
  --font-body:    'Share Tech Mono', 'Consolas', 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--line-height);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Out-of-flow FX pseudo-elements bleed past their wrapper:
     `chroma` and `tear` ::before/::after with translateX up to ±15px at
     i=10, plus jitter's per-char ±5px transforms. None of `.fx-chroma`,
     `.post-title`, `.post`, or `.container` clip horizontally, so on a
     phone-width viewport the bleed pushes document width and the chroma
     keyframe cycle makes the page horizontally "breathe" in and out.
     Clip at the root so no FX (or any future stray overflow) can make
     the page side-scrollable. `clip` (not `hidden`) so we don't establish
     a scroll container or break the sticky chat panel on
     `body.page-feed`. */
  overflow-x: clip;
}

body {
  background: var(--body-bg-image), var(--bg);
  background-attachment: fixed;
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dotted var(--fg-dim);
  transition: color 0.15s, border-color 0.15s;
}
a:hover {
  color: var(--cool);
  border-bottom-color: var(--cool);
  text-shadow: 0 0 6px rgba(var(--cool-rgb), 0.45);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: 0.04em;
  margin: 0;
}

p { margin: 0 0 0.9em 0; }
p:last-child { margin-bottom: 0; }

button {
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg-dim);
  border-radius: var(--button-radius);
  padding: 0.45em 0.9em;
  cursor: pointer;
  text-transform: var(--button-text-transform);
  letter-spacing: var(--button-letter-spacing);
  transition: color 0.15s, border-color 0.15s, background 0.15s, text-shadow 0.15s;
}
button:hover {
  color: var(--hot);
  border-color: var(--hot);
  background: rgba(var(--hot-rgb), 0.06);
  text-shadow: 0 0 6px rgba(var(--hot-rgb), 0.5);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.ghost {
  border-color: var(--border);
  color: var(--fg-dim);
}
button.ghost:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
  background: transparent;
  text-shadow: none;
}
button.danger {
  color: var(--err);
  border-color: rgba(var(--err-rgb), 0.4);
}
button.danger:hover {
  color: var(--err);
  border-color: var(--err);
  background: rgba(var(--err-rgb), 0.06);
  text-shadow: 0 0 6px rgba(var(--err-rgb), 0.5);
}

input[type=text], input[type=password], textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  background: rgba(var(--fg-rgb), 0.03);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.5em 0.65em;
  outline: none;
  caret-color: var(--hot);
  width: 100%;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  border-color: var(--cool);
  box-shadow: 0 0 0 1px rgba(var(--cool-rgb), 0.15);
}

textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

code, pre {
  font-family: var(--font-body);
  color: var(--fg);
}

.dim   { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.err   { color: var(--err); }
.ok    { color: var(--ok); }
.small { font-size: 0.85rem; }
.hidden { display: none !important; }

::selection { background: var(--hot); color: var(--bg-deeper); }

/* Scanlines overlay. Opacity (and effectively visibility) is theme-driven
   via --scanline-opacity; paper / brutalist / blueprint flatten it. */
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,var(--scanline-opacity)) 3px,
    rgba(0,0,0,0) 4px
  );
  z-index: 50;
  mix-blend-mode: multiply;
}

/* Subtle CRT vignette. Strength is theme-driven via --vignette-opacity. */
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,var(--vignette-opacity)) 100%);
  z-index: 49;
}