/* === overshare themes ===
 *
 * Each theme is a `:root[data-theme="<id>"]` block plus, where needed,
 * a few targeted selector overrides for structural shifts that can't be
 * expressed as a single variable (font-driven layout, pseudo-element
 * content swaps, gradient backgrounds, button shapes).
 *
 * `original` is the canonical default; its variables match :root in
 * base.css exactly so we keep the block empty for documentation. Every
 * other theme overrides the structural look knobs to feel like a
 * genuinely different design language, not just a recolor.
 *
 * Theme registry (id = label):
 *   original   — the CRT cyberpunk default
 *   phosphor   — single-green phosphor monitor
 *   amber      — amber-tube vintage monitor
 *   paper      — cream lined notebook + serif + handwritten brand
 *   blueprint  — deep blue grid paper, white technical lines
 *   vaporwave  — pastel sunset, glassy rounded cards
 *   y2k        — bubblegum white + pink, pill buttons
 *   brutalist  — pure b/w, big serif, no glow
 *   solarized  — solarized-dark, looser line-height
 *   sakura     — soft cream-pink, dotted, ✿ corner ticks
 */


/* ---- Theme picker dropdown -------------------------------------- *
 * Compact nav-sized variant of `select.rooms-sort`. Every value is
 * variable-driven so the control itself re-skins per theme. */

.theme-select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  background: rgba(var(--fg-rgb), 0.03);
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 0.18em 1.6em 0.18em 0.5em;
  cursor: pointer;
  letter-spacing: 0.04em;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'><path d='M1 1 L6 6 L11 1' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='square'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 0.55em auto;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.theme-select:hover,
.theme-select:focus {
  color: var(--cool);
  border-color: var(--cool);
  outline: none;
}
/* `<option>` colours are partially honored on Chromium/Firefox; Safari
 * uses OS chrome. Either way the text stays readable. */
.theme-select option {
  background: var(--bg-deeper);
  color: var(--fg);
  font-family: var(--font-body);
}
.theme-select option:checked,
.theme-select option:hover {
  background: var(--hot);
  color: var(--bg-deeper);
}


/* ===================================================================
 *  original  —  default CRT cyberpunk (pink/cyan)
 *  All variables match :root in base.css. Block kept for symmetry.
 * =================================================================== */
:root[data-theme="original"] {
  /* (intentionally empty — :root defaults are the original theme) */
}


/* ===================================================================
 *  phosphor  —  classic green-on-black CRT monitor
 *  Single green accent (hot==cool), heavier scanlines, stronger glow.
 * =================================================================== */
:root[data-theme="phosphor"] {
  --bg:           #001a0a;
  --bg-deeper:    #000a05;
  --fg:           #00ff66;
  --fg-dim:       #008833;
  --fg-faint:     #004c1a;
  --accent:       #00ff66;
  --accent-2:     #66ff99;
  --hot:          #00ff66;
  --cool:         #00ff66;
  --glitch-1:     #66ff99;
  --glitch-2:     #00cc55;
  --err:          #ff5555;
  --ok:           #66ff99;
  --border:       #003318;

  --hot-rgb:      0, 255, 102;
  --cool-rgb:     0, 255, 102;
  --err-rgb:      255, 85, 85;
  --ok-rgb:       102, 255, 153;
  --fg-rgb:       0, 255, 102;

  --scanline-opacity: 0.30;
  --vignette-opacity: 0.65;
  --glow-intensity:   1.3;
}


/* ===================================================================
 *  amber  —  vintage amber-tube monitor
 *  Like phosphor but warm; stronger vignette for the curved-tube feel.
 * =================================================================== */
:root[data-theme="amber"] {
  --bg:           #1a0a00;
  --bg-deeper:    #0d0500;
  --fg:           #ffb000;
  --fg-dim:       #996600;
  --fg-faint:     #4d3300;
  --accent:       #ffb000;
  --accent-2:     #ffd966;
  --hot:          #ffb000;
  --cool:         #ffb000;
  --glitch-1:     #ffd966;
  --glitch-2:     #cc8800;
  --err:          #ff5544;
  --ok:           #ffd966;
  --border:       #332200;

  --hot-rgb:      255, 176, 0;
  --cool-rgb:     255, 176, 0;
  --err-rgb:      255, 85, 68;
  --ok-rgb:       255, 217, 102;
  --fg-rgb:       255, 176, 0;

  --scanline-opacity: 0.28;
  --vignette-opacity: 0.75;
  --glow-intensity:   1.2;
}


/* ===================================================================
 *  paper  —  cream lined notebook, serif body, handwritten brand
 *  Overlays off, glow off, corner ticks off, glitch off. Notebook
 *  ruling drawn directly into the body background via gradients.
 * =================================================================== */
:root[data-theme="paper"] {
  --bg:           #f4ecd8;
  --bg-deeper:    #e8dfc6;
  --fg:           #2a1f15;
  --fg-dim:       #6b5a47;
  --fg-faint:     #a89b85;
  --accent:       #c2185b;
  --accent-2:     #1565c0;
  --hot:          #c2185b;
  --cool:         #1565c0;
  --glitch-1:     #1565c0;
  --glitch-2:     #c2185b;
  --err:          #c62828;
  --ok:           #2e7d32;
  --border:       #c4b8a0;

  --hot-rgb:      194, 24, 91;
  --cool-rgb:     21, 101, 192;
  --err-rgb:      198, 40, 40;
  --ok-rgb:       46, 125, 50;
  --fg-rgb:       42, 31, 21;

  --scanline-opacity:      0;
  --vignette-opacity:      0;
  --boot-noise-display:    none;
  --glitch-opacity:        0;
  --corner-tick-display:   none;

  --card-border-style:     solid;
  --card-border-width:     1px;
  --card-radius:           4px;
  --card-bg:               rgba(255, 250, 235, 0.6);
  --card-inset-bg:         rgba(50, 80, 150, 0.06);
  --button-radius:         4px;
  --button-text-transform: none;
  --button-letter-spacing: 0;
  --glow-intensity:        0;
  --line-height:           1.6;

  --font-display: 'Caveat', 'Marker Felt', 'Brush Script MT', cursive;
  --font-body:    Georgia, 'Iowan Old Style', 'Charter', serif;
}
/* Notebook ruling (blue horizontal lines + red margin) painted as a
 * fixed-attachment composite so it doesn't scroll-jitter on long
 * threads. The body's default --body-bg-image gradients would tint
 * the cream paper, so we replace the whole background here. */
[data-theme="paper"] body {
  background:
    linear-gradient(to right, transparent 0, transparent 60px,
                    rgba(220, 50, 50, 0.30) 60px,
                    rgba(220, 50, 50, 0.30) 61px,
                    transparent 61px),
    repeating-linear-gradient(to bottom,
                              transparent 0, transparent 27px,
                              rgba(50, 80, 150, 0.18) 27px,
                              rgba(50, 80, 150, 0.18) 28px),
    var(--bg);
  background-attachment: fixed;
}
/* The handwritten display font reads larger at the same px size, so
 * bump the brand up a notch and ease off the letter-spacing. */
[data-theme="paper"] .glitch-title {
  font-size: 4.6rem;
  letter-spacing: 0;
  text-shadow: none;
}
/* Kill every text-shadow glow so headings don't blur on cream paper. */
[data-theme="paper"] .post-title,
[data-theme="paper"] .card-title,
[data-theme="paper"] .post-time,
[data-theme="paper"] .comment-author,
[data-theme="paper"] .chat-toggle,
[data-theme="paper"] .post-body a:hover,
[data-theme="paper"] .comment-body a:hover {
  text-shadow: none;
}


/* ===================================================================
 *  blueprint  —  deep blue paper with white grid lines
 *  Two-tier grid (50px primary + 10px subdivision) painted into body.
 *  Corner ticks become small solid white squares.
 * =================================================================== */
:root[data-theme="blueprint"] {
  --bg:           #102b4c;
  --bg-deeper:    #0a1f3a;
  --fg:           #e8f4ff;
  --fg-dim:       #88aacc;
  --fg-faint:     #4d6680;
  --accent:       #ffffff;
  --accent-2:     #80d8ff;
  --hot:          #ffffff;
  --cool:         #80d8ff;
  --glitch-1:     #ffffff;
  --glitch-2:     #80d8ff;
  --err:          #ff8888;
  --ok:           #88ffaa;
  --border:       #4d80b3;

  --hot-rgb:      255, 255, 255;
  --cool-rgb:     128, 216, 255;
  --err-rgb:      255, 136, 136;
  --ok-rgb:       136, 255, 170;
  --fg-rgb:       232, 244, 255;

  --scanline-opacity:    0;
  --vignette-opacity:    0;
  --boot-noise-display:  none;
  --glitch-opacity:      0.5;

  --card-border-style:   solid;
  --card-border-width:   1px;
  --card-radius:         0;
  --card-bg:             rgba(255, 255, 255, 0.04);
  --card-inset-bg:       rgba(255, 255, 255, 0.05);
  --button-radius:       0;
  --glow-intensity:      0.6;
}
[data-theme="blueprint"] body {
  background:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px) 0 0 / 50px 50px,
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 10px 10px,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 10px 10px,
    var(--bg);
  background-attachment: fixed;
}
/* Replace L-shaped corner ticks with small solid white squares. */
[data-theme="blueprint"] .post::before,
[data-theme="blueprint"] .post::after,
[data-theme="blueprint"] .chat-panel::before,
[data-theme="blueprint"] .chat-panel::after,
[data-theme="blueprint"] .os-dialog::before,
[data-theme="blueprint"] .os-dialog::after {
  width: 6px;
  height: 6px;
  background: var(--hot);
  border: none;
}
[data-theme="blueprint"] .post::before  { top: -3px; left: -3px; }
[data-theme="blueprint"] .post::after   { bottom: -3px; right: -3px; }
[data-theme="blueprint"] .chat-panel::before  { top: -3px; left: -3px; }
[data-theme="blueprint"] .chat-panel::after   { bottom: -3px; right: -3px; }
[data-theme="blueprint"] .os-dialog::before   { top: -3px; left: -3px; }
[data-theme="blueprint"] .os-dialog::after    { bottom: -3px; right: -3px; }


/* ===================================================================
 *  vaporwave  —  pastel sunset gradient, glassy rounded cards
 *  Cards use a soft pink/cyan duotone background with a generous
 *  border-radius. Glow keeps its inset feel but softer.
 * =================================================================== */
:root[data-theme="vaporwave"] {
  --bg:           #1a0833;
  --bg-deeper:    #0d041a;
  --fg:           #ffe9ff;
  --fg-dim:       #b380cc;
  --fg-faint:     #6b4d80;
  --accent:       #ff80df;
  --accent-2:     #80e0ff;
  --hot:          #ff80df;
  --cool:         #80e0ff;
  --glitch-1:     #80e0ff;
  --glitch-2:     #ff80df;
  --err:          #ff99aa;
  --ok:           #99ffcc;
  --border:       #4d2080;

  --hot-rgb:      255, 128, 223;
  --cool-rgb:     128, 224, 255;
  --err-rgb:      255, 153, 170;
  --ok-rgb:       153, 255, 204;
  --fg-rgb:       255, 233, 255;

  --scanline-opacity:  0.05;
  --vignette-opacity:  0.35;

  --card-border-style: solid;
  --card-border-width: 2px;
  --card-radius:       12px;
  --card-bg:           linear-gradient(180deg, rgba(255,128,223,0.10), rgba(128,224,255,0.06));
  --card-inset-bg:     rgba(128,224,255,0.08);
  --button-radius:     8px;
  --glow-intensity:    1;
  --line-height:       1.55;
}
/* Top stays deep purple so the header (tagline + nav links, which use
 * --fg-dim) reads against it; the bright pink-magenta "sunset" band
 * sits mid-viewport like a horizon, fading back into deep purple at
 * the bottom. With background-attachment: fixed it stays put while
 * the feed scrolls through it. */
[data-theme="vaporwave"] body {
  background:
    linear-gradient(180deg,
      #1a0833 0%,
      #4d1e7a 14%,
      #b56cd9 45%,
      #ff8fc6 72%,
      #4d1e7a 95%,
      #1a0833 100%);
  background-attachment: fixed;
}


/* ===================================================================
 *  y2k  —  bubblegum white + pink, pill buttons, sans-serif
 *  Light theme. Pill buttons, 16px-rounded cards, bold rounded headers.
 * =================================================================== */
:root[data-theme="y2k"] {
  --bg:           #fff5fa;
  --bg-deeper:    #ffe6f2;
  --fg:           #2d0d4d;
  --fg-dim:       #8866cc;
  --fg-faint:     #ccbbe6;
  --accent:       #ff3399;
  --accent-2:     #00ddff;
  --hot:          #ff3399;
  --cool:         #00aacc;
  --glitch-1:     #00ddff;
  --glitch-2:     #ff3399;
  --err:          #ff3366;
  --ok:           #44bb44;
  --border:       #ff99cc;

  --hot-rgb:      255, 51, 153;
  --cool-rgb:     0, 170, 204;
  --err-rgb:      255, 51, 102;
  --ok-rgb:       68, 187, 68;
  --fg-rgb:       45, 13, 77;

  --scanline-opacity:    0;
  --vignette-opacity:    0;
  --boot-noise-display:  none;
  --glitch-opacity:      0.6;
  --corner-tick-display: none;

  --card-border-style:     solid;
  --card-border-width:     2px;
  --card-radius:           16px;
  --card-bg:               linear-gradient(180deg, rgba(255,51,153,0.06), rgba(0,170,204,0.05));
  --card-inset-bg:         rgba(255,51,153,0.05);
  --button-radius:         999px;
  --button-text-transform: none;
  --button-letter-spacing: 0.02em;
  --glow-intensity:        0.4;
  --line-height:           1.55;

  --font-display: 'Arial Black', 'Helvetica Black', 'Verdana', sans-serif;
  --font-body:    Verdana, 'Trebuchet MS', sans-serif;
}
[data-theme="y2k"] body {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,51,153,0.10), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(0,170,204,0.10), transparent 40%),
    var(--bg);
  background-attachment: fixed;
}
/* Pill-shaped buttons need a touch more horizontal padding to read. */
[data-theme="y2k"] button {
  padding: 0.4em 1.2em;
}


/* ===================================================================
 *  brutalist  —  pure b/w, big bold serif, zero glow
 *  Light theme. Newspaper-editorial feel. All decoration off. Buttons
 *  invert on hover for tactile feedback without color or glow.
 * =================================================================== */
:root[data-theme="brutalist"] {
  --bg:           #ffffff;
  --bg-deeper:    #f5f5f5;
  --fg:           #000000;
  --fg-dim:       #4d4d4d;
  --fg-faint:     #999999;
  --accent:       #000000;
  --accent-2:     #000000;
  --hot:          #000000;
  --cool:         #000000;
  --glitch-1:     #000000;
  --glitch-2:     #000000;
  --err:          #cc0000;
  --ok:           #006600;
  --border:       #000000;

  --hot-rgb:      0, 0, 0;
  --cool-rgb:     0, 0, 0;
  --err-rgb:      204, 0, 0;
  --ok-rgb:       0, 102, 0;
  --fg-rgb:       0, 0, 0;

  --scanline-opacity:    0;
  --vignette-opacity:    0;
  --boot-noise-display:  none;
  --glitch-opacity:      0;
  --corner-tick-display: none;

  --card-border-style:     solid;
  --card-border-width:     2px;
  --card-radius:           0;
  --card-bg:               #ffffff;
  --card-inset-bg:         rgba(0,0,0,0.04);
  --button-radius:         0;
  --button-text-transform: uppercase;
  --button-letter-spacing: 0.04em;
  --glow-intensity:        0;
  --line-height:           1.6;

  --font-display: Georgia, 'Times New Roman', 'Times', serif;
  --font-body:    Georgia, 'Times New Roman', 'Times', serif;
}
[data-theme="brutalist"] body {
  background: var(--bg);
}
/* Nuke every glow + decorative shadow site-wide. */
[data-theme="brutalist"] .post,
[data-theme="brutalist"] .post *,
[data-theme="brutalist"] .comment,
[data-theme="brutalist"] .comment *,
[data-theme="brutalist"] .chat-panel,
[data-theme="brutalist"] .chat-panel *,
[data-theme="brutalist"] .composer-card,
[data-theme="brutalist"] .composer-card *,
[data-theme="brutalist"] .glitch-title,
[data-theme="brutalist"] .site-nav,
[data-theme="brutalist"] .site-nav * {
  text-shadow: none !important;
  box-shadow: none !important;
}
/* Buttons: invert on hover. */
[data-theme="brutalist"] button {
  background: #ffffff;
  color: #000000;
  border-color: #000000;
}
[data-theme="brutalist"] button:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  text-shadow: none;
}
/* Big editorial title sizing. */
[data-theme="brutalist"] .glitch-title { font-size: 5rem; font-weight: 700; }
[data-theme="brutalist"] .post-title   { font-size: 2rem; font-weight: 700; }


/* ===================================================================
 *  solarized  —  solarized-dark, softer glow, looser line-height
 *  Subtle adjustment of the original CRT look toward "comfortable
 *  code-editor". Same monospace, dashed borders, scanlines (softer).
 * =================================================================== */
:root[data-theme="solarized"] {
  --bg:           #002b36;
  --bg-deeper:    #001f27;
  --fg:           #93a1a1;
  --fg-dim:       #586e75;
  --fg-faint:     #2a4045;
  --accent:       #d33682;
  --accent-2:     #268bd2;
  --hot:          #d33682;
  --cool:         #268bd2;
  --glitch-1:     #2aa198;
  --glitch-2:     #d33682;
  --err:          #dc322f;
  --ok:           #859900;
  --border:       #073642;

  --hot-rgb:      211, 54, 130;
  --cool-rgb:     38, 139, 210;
  --err-rgb:      220, 50, 47;
  --ok-rgb:       133, 153, 0;
  --fg-rgb:       147, 161, 161;

  --scanline-opacity: 0.15;
  --vignette-opacity: 0.40;
  --glow-intensity:   0.6;
  --line-height:      1.7;
}


/* ===================================================================
 *  sakura  —  soft cream-pink, dotted borders, ✿ corner ticks
 *  Light theme. Petal-rain scanlines (pink, very faint). Corner ticks
 *  become flower glyphs via pseudo-element content swap.
 * =================================================================== */
:root[data-theme="sakura"] {
  --bg:           #fff5f0;
  --bg-deeper:    #ffe6e0;
  --fg:           #5a3a2d;
  --fg-dim:       #b08877;
  --fg-faint:     #d9c5b8;
  --accent:       #d67c8e;
  --accent-2:     #7da97d;
  --hot:          #d67c8e;
  --cool:         #7da97d;
  --glitch-1:     #7da97d;
  --glitch-2:     #d67c8e;
  --err:          #b34d4d;
  --ok:           #7da97d;
  --border:       #d9b5b5;

  --hot-rgb:      214, 124, 142;
  --cool-rgb:     125, 169, 125;
  --err-rgb:      179, 77, 77;
  --ok-rgb:       125, 169, 125;
  --fg-rgb:       90, 58, 45;

  --scanline-opacity:    0;
  --vignette-opacity:    0.10;
  --glitch-opacity:      0.4;

  --card-border-style:     dotted;
  --card-border-width:     1px;
  --card-radius:           8px;
  --card-bg:               linear-gradient(180deg, rgba(255,240,235,0.6), rgba(255,230,224,0.4));
  --card-inset-bg:         rgba(214,124,142,0.07);
  --button-radius:         999px;
  --button-text-transform: none;
  --button-letter-spacing: 0;
  --glow-intensity:        0.5;
  --line-height:           1.6;

  --font-display: Georgia, 'Iowan Old Style', serif;
  --font-body:    Georgia, 'Iowan Old Style', serif;
}
[data-theme="sakura"] body {
  background:
    radial-gradient(circle at 15% 25%, rgba(214,124,142,0.10), transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(125,169,125,0.08), transparent 30%),
    var(--bg);
  background-attachment: fixed;
}
/* Faint pink scanlines (instead of the default black) for that "petal
 * rain falling through the air" feel without darkening the page. */
[data-theme="sakura"] .scanlines {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(214,124,142,0.06) 3px,
    transparent 4px
  );
  mix-blend-mode: normal;
}
/* Replace L-shaped corner ticks with flower glyphs. The defaults set
 * width/height/border on these pseudos; we reset them and use text
 * content instead. */
[data-theme="sakura"] .post::before,
[data-theme="sakura"] .post::after,
[data-theme="sakura"] .chat-panel::before,
[data-theme="sakura"] .chat-panel::after,
[data-theme="sakura"] .os-dialog::before,
[data-theme="sakura"] .os-dialog::after {
  content: "\2740"; /* ✿ */
  width: auto;
  height: auto;
  border: none;
  color: var(--hot);
  font-size: 1rem;
  line-height: 1;
}
[data-theme="sakura"] .post::before        { top: -0.55em; left: -0.2em; }
[data-theme="sakura"] .post::after         { bottom: -0.55em; right: -0.2em; }
[data-theme="sakura"] .chat-panel::before  { top: -0.55em; left: -0.2em; }
[data-theme="sakura"] .chat-panel::after   { bottom: -0.55em; right: -0.2em; }
[data-theme="sakura"] .os-dialog::before   { top: -0.55em; left: -0.2em; }
[data-theme="sakura"] .os-dialog::after    { bottom: -0.55em; right: -0.2em; }