/* ==========================================================================
   BitchMX — a BitchX-flavoured Matrix client that happens to be a blog.
   Themes are plain custom-property sets keyed on [data-theme]; any element
   can carry data-theme (the settings page uses this for live previews).
   ========================================================================== */

/* ---- themes ------------------------------------------------------------- */

:root,
[data-theme="bitchx"] {
  /* The classic: ANSI 16-colour palette, blue status bars. */
  --bg: #000000;
  --bg-alt: #050510;
  --fg: #aaaaaa;
  --bright: #ffffff;
  --dim: #555555;
  --accent: #55ffff;
  --accent2: #5555ff;
  --link: #55ffff;
  --bar-bg: #0000aa;
  --bar-fg: #aaaaaa;
  --bar-hi: #ffffff;
  --bracket: #55ffff;
  --sel-bg: #00aaaa;
  --sel-fg: #000000;
  --ok: #55ff55;
  --warn: #ffff55;
  --err: #ff5555;
  --nick: #ff55ff;
  --border: #0000aa;
  --code-bg: #0a0a1a;
  --a0: #5555ff; --a1: #5577ff; --a2: #55aaff; --a3: #55ffff; --a4: #aaffff; --a5: #ffffff;
  --syn-comment: #555555; --syn-kw: #ffff55; --syn-str: #55ff55; --syn-const: #ff55ff;
  --syn-fn: #55ffff; --syn-var: #ffaa55; --syn-tag: #55ff55;
  color-scheme: dark;
}

[data-theme="matrix"] {
  /* Phosphor green; the accent is Element's brand green. */
  --bg: #050a07;
  --bg-alt: #07110c;
  --fg: #8fd9b6;
  --bright: #d6ffe9;
  --dim: #3d6b55;
  --accent: #0dbd8b;
  --accent2: #2fe0a8;
  --link: #3dffb8;
  --bar-bg: #0b3a2a;
  --bar-fg: #8fd9b6;
  --bar-hi: #d6ffe9;
  --bracket: #0dbd8b;
  --sel-bg: #0dbd8b;
  --sel-fg: #00140c;
  --ok: #3dffb8;
  --warn: #e6ff6b;
  --err: #ff6b6b;
  --nick: #b8ff6b;
  --border: #0b3a2a;
  --code-bg: #08140f;
  --a0: #0b5e43; --a1: #0a8a62; --a2: #0dbd8b; --a3: #2fe0a8; --a4: #7dffd0; --a5: #d6ffe9;
  --syn-comment: #3d6b55; --syn-kw: #e6ff6b; --syn-str: #3dffb8; --syn-const: #b8ff6b;
  --syn-fn: #7dffd0; --syn-var: #c7f5a0; --syn-tag: #2fe0a8;
  color-scheme: dark;
}

[data-theme="amber"] {
  /* Monochrome amber CRT. */
  --bg: #120a00;
  --bg-alt: #170e02;
  --fg: #e6a23c;
  --bright: #ffd27a;
  --dim: #7a5418;
  --accent: #ffb000;
  --accent2: #ff8c00;
  --link: #ffcc4d;
  --bar-bg: #3d2600;
  --bar-fg: #e6a23c;
  --bar-hi: #ffd27a;
  --bracket: #ffb000;
  --sel-bg: #ffb000;
  --sel-fg: #120a00;
  --ok: #ffd27a;
  --warn: #ffcc4d;
  --err: #ff6a3d;
  --nick: #ffd27a;
  --border: #3d2600;
  --code-bg: #1a1003;
  --a0: #8a4b00; --a1: #b86500; --a2: #e08200; --a3: #ffb000; --a4: #ffcc4d; --a5: #ffe7a8;
  --syn-comment: #7a5418; --syn-kw: #ffd27a; --syn-str: #ffcc4d; --syn-const: #ff8c00;
  --syn-fn: #ffe7a8; --syn-var: #ffb000; --syn-tag: #ffcc4d;
  color-scheme: dark;
}

[data-theme="neon"] {
  /* Synthwave. */
  --bg: #12071f;
  --bg-alt: #180a29;
  --fg: #c9b8e8;
  --bright: #ffffff;
  --dim: #5e4a80;
  --accent: #ff4fd8;
  --accent2: #36e5ff;
  --link: #36e5ff;
  --bar-bg: #3b0f5c;
  --bar-fg: #d9c7f5;
  --bar-hi: #ffffff;
  --bracket: #ff4fd8;
  --sel-bg: #ff4fd8;
  --sel-fg: #12071f;
  --ok: #5effa8;
  --warn: #ffe84f;
  --err: #ff4f6e;
  --nick: #ffe84f;
  --border: #3b0f5c;
  --code-bg: #1a0b2c;
  --a0: #ff4fd8; --a1: #d35bff; --a2: #9d6bff; --a3: #6b8bff; --a4: #36c2ff; --a5: #36e5ff;
  --syn-comment: #5e4a80; --syn-kw: #ff4fd8; --syn-str: #5effa8; --syn-const: #ffe84f;
  --syn-fn: #36e5ff; --syn-var: #ff9d5e; --syn-tag: #d35bff;
  color-scheme: dark;
}

[data-theme="paper"] {
  /* Light theme for daylight reading. */
  --bg: #f4f0e6;
  --bg-alt: #ebe5d6;
  --fg: #2b2a26;
  --bright: #000000;
  --dim: #8a8475;
  --accent: #1f5fa8;
  --accent2: #8a2d8a;
  --link: #1f5fa8;
  --bar-bg: #1f3d6b;
  --bar-fg: #d3dcec;
  --bar-hi: #ffffff;
  --bracket: #8fc1ff;
  --sel-bg: #1f5fa8;
  --sel-fg: #ffffff;
  --ok: #2a7a2a;
  --warn: #8a6100;
  --err: #b02a2a;
  --nick: #8a2d8a;
  --border: #cfc6b0;
  --code-bg: #ebe5d6;
  --a0: #1f3d6b; --a1: #1f5fa8; --a2: #2f7fbf; --a3: #8a2d8a; --a4: #b0407a; --a5: #c25a3a;
  --syn-comment: #8a8475; --syn-kw: #8a2d8a; --syn-str: #2a7a2a; --syn-const: #b0407a;
  --syn-fn: #1f5fa8; --syn-var: #9a5a00; --syn-tag: #2a7a2a;
  color-scheme: light;
}

/* ---- fonts -------------------------------------------------------------- */

/* Self-hosted, so visitors never contact a third party. Browsers only download the faces in use. */
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Code"; src: url("../fonts/FiraCode-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../fonts/VT323-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root { --font: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; }
:root[data-font="plex"]   { --font: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
:root[data-font="fira"]   { --font: "Fira Code", ui-monospace, Menlo, monospace; }
:root[data-font="vt323"]  { --font: "VT323", ui-monospace, Menlo, monospace; }
:root[data-font="system"] { --font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
/* VT323 runs small; give it a nudge so the size setting means roughly the same thing. */
:root[data-font="vt323"] { font-size: calc(var(--fs, 15px) * 1.3); }

/* ---- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fs, 15px);
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; }
a:hover { color: var(--bright); background: color-mix(in srgb, var(--link) 18%, transparent); text-decoration-style: solid; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
::selection { background: var(--sel-bg); color: var(--sel-fg); }

.dim { color: var(--dim); }
.hi { color: var(--bright); }
.b { color: var(--bracket); }
.err { color: var(--err); }
.small { font-size: 0.85em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
kbd {
  font: inherit; color: var(--bright);
  border: 1px solid var(--dim); padding: 0 0.3ch;
}

/* ---- client chrome ------------------------------------------------------ */

.client {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}

.bar {
  background: var(--bar-bg);
  color: var(--bar-fg);
  padding: 0 1ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar .hi { color: var(--bar-hi); }
.bar .dim { color: color-mix(in srgb, var(--bar-fg) 60%, var(--bar-bg)); }

.topic { display: flex; gap: 1ch; align-items: baseline; }
.topic-text { overflow: hidden; text-overflow: ellipsis; }

.menu {
  display: none;
  font: inherit; color: var(--bar-hi); background: none; border: 0; padding: 0; cursor: pointer;
}

.panes {
  display: grid;
  grid-template-columns: minmax(18ch, 24ch) minmax(0, 1fr);
  min-height: 0;
}

/* Room list ---------------------------------------------------------------- */

.rooms {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 0.5em 0;
  display: flex;
  flex-direction: column;
}
.rooms ul { list-style: none; margin: 0 0 0.75em; padding: 0; }
.space {
  color: var(--dim);
  padding: 0 1ch;
  text-transform: lowercase;
}
.space .glyph { color: var(--accent2); }

.room {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0 1ch 0 2ch;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.room:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--bright); }
.room .rn { color: var(--dim); min-width: 2ch; text-align: right; }
.room .rn::after { content: ":"; }
.room .sig { color: var(--accent2); }
.room .alias { overflow: hidden; text-overflow: ellipsis; }
.room .unread {
  margin-left: auto;
  color: var(--sel-fg);
  background: var(--accent);
  padding: 0 0.6ch;
  font-size: 0.85em;
}
.room.has-unread .alias { color: var(--bright); font-weight: 700; }
.room.active { background: var(--sel-bg); color: var(--sel-fg); }
.room.active .rn, .room.active .sig { color: inherit; }
.room.active .unread { background: var(--sel-fg); color: var(--sel-bg); }

.rooms-foot { margin-top: auto; padding: 0.5em 1ch 0; font-size: 0.85em; }

/* Main pane ---------------------------------------------------------------- */

.main {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1em 2ch 2em;
  container-type: inline-size;
  outline: none;
  /* Timeline columns, shared with the banner so it lines up with the "-!-" markers. */
  --ts-w: 11ch;
  --nick-w: 10ch;
  scrollbar-color: var(--dim) transparent;
}

/* Footer: status bar + input line ---------------------------------------- */

.status { display: flex; gap: 1ch; }
.status .push { margin-left: auto; }
.act .hot { color: var(--bar-hi); font-weight: 700; }

.input {
  display: flex;
  align-items: baseline;
  gap: 1ch;
  padding: 0.15em 1ch;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.prompt { color: var(--accent); white-space: nowrap; }
.input input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--bright);
  background: transparent;
  border: 0;
  padding: 0;
  caret-color: var(--accent);
}
.input input:focus { outline: none; }
.input input::placeholder { color: var(--dim); }

/* ---- ASCII banners ------------------------------------------------------ */

/* Start the banner where "-!-" starts (it's right-aligned in the nick column)
   and end it with the timeline, so it gets the same breathing room. The banner
   is its own container so the art scales to the space left. */
.banner {
  margin-left: calc(var(--ts-w) + 1ch + var(--nick-w) - 3ch);
  max-width: calc(110ch - var(--ts-w) - 1ch - var(--nick-w) + 3ch);
  container-type: inline-size;
}

.ascii {
  /* Scale so the widest line always fits the pane: 0.62 ≈ monospace advance width plus a little slack. */
  --max: 1rem;
  font-size: min(var(--max), calc(100cqw / var(--cols) / 0.62));
  line-height: 1;
  margin: 0.25em 0 1.25em;
  font-weight: 400;
  user-select: none;
}
:root[data-font="vt323"] .ascii,
.ascii:not([data-style="graffiti"]) { font-family: "JetBrains Mono", ui-monospace, monospace; }
.al { display: block; white-space: pre; }
.al i { font-style: normal; }

/* Graffiti is all thin strokes: let it run bigger and bolder. */
.ascii[data-style="graffiti"] { --max: 1.5rem; font-weight: 700; line-height: 1.15; }
/* Elite is only five rows tall; give it room. */
.ascii[data-style="elite"] { --max: 1.6rem; }

/* Only the selected banner style is shown. */
.ascii[data-style] { display: none; }
:root[data-banner="graffiti"] .ascii[data-style="graffiti"],
:root[data-banner="ansi"] .ascii[data-style="ansi"],
:root[data-banner="delta"] .ascii[data-style="delta"],
:root[data-banner="elite"] .ascii[data-style="elite"],
:root[data-banner="rebel"] .ascii[data-style="rebel"],
:root[data-banner="clean"] .ascii[data-style="clean"] { display: block; }

/* Shading: darker tints of the line colour, like ANSI art's ░▒▓ ramps. */
.al .s1 { color: color-mix(in srgb, currentColor 45%, var(--bg)); }
.al .s2 { color: color-mix(in srgb, currentColor 65%, var(--bg)); }
.al .s3 { color: color-mix(in srgb, currentColor 85%, var(--bg)); }
/* Graffiti: underscores are the "fill", keep them a shade behind the strokes. */
[data-style="graffiti"] .al .s1 { color: color-mix(in srgb, currentColor 55%, var(--accent2)); }
[data-style="graffiti"] .al .s2 { color: color-mix(in srgb, currentColor 75%, var(--bright)); }
[data-ascii="rainbow"] .al i { color: transparent; }
.al:empty::before { content: " "; }

[data-ascii="lines"] .l0 { color: var(--a0); }
[data-ascii="lines"] .l1 { color: var(--a1); }
[data-ascii="lines"] .l2 { color: var(--a2); }
[data-ascii="lines"] .l3 { color: var(--a3); }
[data-ascii="lines"] .l4 { color: var(--a4); }
[data-ascii="lines"] .l5 { color: var(--a5); }

[data-ascii="mono"] .al { color: var(--accent); }

/* lolcat: a horizontal gradient per line, hue-shifted down the banner → diagonal rainbow. */
[data-ascii="rainbow"] .al {
  width: max-content;
  background: linear-gradient(90deg, #ff5f5f, #ffbf3f, #dfff3f, #3fff7f, #3fdfff, #5f7fff, #df5fff, #ff5f5f);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: hue-rotate(calc(var(--i) * -18deg));
  animation: lolcat 6s linear infinite;
}
@keyframes lolcat { to { background-position: -200% 0; } }

/* Reveal: lines wipe in top to bottom, like a slow 9600 baud link. */
.ascii .al { animation-name: wipe; animation-duration: 0.45s; animation-timing-function: steps(24, end); animation-fill-mode: both; animation-delay: calc(var(--i) * 70ms); }
[data-ascii="rainbow"] .ascii .al {
  animation: wipe 0.45s steps(24, end) both, lolcat 6s linear infinite;
  animation-delay: calc(var(--i) * 70ms), 0s;
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- timeline ----------------------------------------------------------- */

.timeline { max-width: 110ch; }

.ln {
  display: grid;
  grid-template-columns: var(--ts-w) var(--nick-w) minmax(0, 1fr);
  column-gap: 1ch;
  align-items: baseline;
}

.ln .ts { color: var(--dim); white-space: nowrap; }
.ln .nick { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nick); }
.ln.sys .nick { color: var(--accent2); }
.ln.sys .body { color: var(--fg); }
.ln .body { min-width: 0; overflow-wrap: anywhere; }
.ln.local-echo .nick { color: var(--ok); }
.ln.err .body { color: var(--err); }

.event .ev-title { color: var(--bright); font-weight: 700; }
.event .ev-desc { color: var(--fg); }
.event .ev-id { font-size: 0.85em; }
.event.unread .ts { color: var(--accent); }
.event.unread .ts::before { content: "● "; }
.event.unread .ts { margin-left: -2ch; }

.ln.pinned { margin: 0.5em 0; }
.ln.pinned .ts { color: var(--warn); }
.ln .prose > :first-child { margin-top: 0; }

.roomlist .count {
  color: var(--sel-fg); background: var(--accent2);
  padding: 0 0.6ch; font-size: 0.85em;
}

.daychange {
  display: flex;
  align-items: center;
  gap: 1ch;
  color: var(--dim);
  margin: 0.75em 0 0.25em;
}
.daychange::before, .daychange::after { content: ""; flex: 1; border-top: 1px dashed var(--dim); }
.daychange::before { flex: 0 0 4ch; }

/* Lines appear one by one after a room switch. */
.timeline > .ln, .timeline > .daychange { animation: line-in 0.25s ease-out both; }
.timeline > :nth-child(2) { animation-delay: 40ms; }
.timeline > :nth-child(3) { animation-delay: 80ms; }
.timeline > :nth-child(4) { animation-delay: 120ms; }
.timeline > :nth-child(5) { animation-delay: 160ms; }
.timeline > :nth-child(n+6) { animation-delay: 200ms; }
@keyframes line-in { from { opacity: 0; transform: translateY(0.3em); } }

.local { max-width: 110ch; margin-top: 0.5em; }

/* Narrow panes: timestamp goes on its own line above the message. */
@container (max-width: 520px) {
  .banner { margin-left: 0; max-width: none; }
  .ln { grid-template-columns: auto minmax(0, 1fr); }
  .ln .ts { grid-column: 1 / -1; font-size: 0.8em; }
  .ln .ts:empty { display: none; }
  .ln .nick { text-align: left; }
  .event.unread .ts { margin-left: 0; }
}

/* ---- single event (post) ------------------------------------------------ */

.event-view { max-width: 80ch; margin-top: 1em; }

.box {
  position: relative;
  border: 1px solid var(--border);
  padding: 1em 2ch 0.75em;
  margin: 1.25em 0;
  min-width: 0;
}
.box[data-label]::before {
  content: "[ " attr(data-label) " ]";
  position: absolute;
  top: -0.8em;
  left: 2ch;
  padding: 0 0.5ch;
  background: var(--bg);
  color: var(--accent);
}

.event-title {
  font-size: 1.5em;
  line-height: 1.25;
  color: var(--bright);
  margin: 0 0 0.6em;
}
.event-title::before { content: "» "; color: var(--accent); }

.event-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 2ch;
  margin: 0;
  font-size: 0.9em;
}
.event-meta dt { color: var(--accent2); }
.event-meta dt::after { content: ":"; }
.event-meta dd { margin: 0; overflow-wrap: anywhere; }
.tag { color: var(--accent); }
.tag::before { content: "#"; color: var(--dim); }

.event-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2ch;
  margin-top: 3em;
  padding-top: 0.75em;
  border-top: 1px dashed var(--dim);
  font-size: 0.9em;
}
.event-nav > :last-child { text-align: right; }

/* ---- prose (rendered markdown) ----------------------------------------- */

.prose { color: var(--fg); }
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--bright);
  font-size: 1em;
  margin: 1.75em 0 0.5em;
}
.prose h1::before { content: "# "; color: var(--accent); }
.prose h2::before { content: "## "; color: var(--accent); }
.prose h3::before { content: "### "; color: var(--accent); }
.prose h4::before { content: "#### "; color: var(--accent); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 1em; }
.prose strong { color: var(--bright); }
.prose em { color: var(--accent2); font-style: normal; }
.prose em::before, .prose em::after { content: "/"; color: var(--dim); }
.prose ul { list-style: none; padding-left: 2ch; }
.prose ul > li::before { content: "*"; color: var(--accent); display: inline-block; width: 2ch; margin-left: -2ch; }
.prose ol { padding-left: 3ch; }
.prose ol > li::marker { color: var(--accent); }
.prose blockquote {
  margin-left: 0;
  padding-left: 2ch;
  border-left: 1px solid var(--accent2);
  color: var(--dim);
}
.prose hr { border: 0; border-top: 1px dashed var(--dim); margin: 2em 0; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--border); }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0 1ch; text-align: left; }
.prose th { color: var(--bright); }

.prose code {
  font-family: inherit;
  color: var(--accent);
  background: var(--code-bg);
  padding: 0 0.4ch;
}
.prose pre {
  position: relative;
  background: var(--code-bg) !important;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.75em 2ch;
  overflow-x: auto;
  line-height: 1.4;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose pre code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 1ch;
  font-size: 0.8em;
  color: var(--dim);
}

/* Syntax: Zola's giallo emits palette-indexed classes (z-1…z-12) for the
   highlight theme set in config.toml (github-dark). Map them onto the
   current theme so code follows the theme switcher. */
.z-code { color: var(--fg); }
.z-1, .z-2, .z-8, .z-9 { color: var(--fg); }
.z-3 { color: var(--syn-comment); }
.z-4 { color: var(--syn-const); }
.z-5 { color: var(--syn-tag); }
.z-6 { color: var(--syn-str); }
.z-7 { color: var(--syn-fn); }
.z-10 { color: var(--syn-kw); }
.z-11 { color: var(--err); }
.z-12 { color: var(--syn-var); }
.z-b { font-weight: 700; }
.z-i { font-style: italic; }
.z-u { text-decoration: underline; }
.z-s { text-decoration: line-through; }

/* ---- settings ----------------------------------------------------------- */

.settings { max-width: 90ch; margin-top: 1.5em; }
.settings fieldset { margin: 1.5em 0; }

.themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22ch, 1fr));
  gap: 1ch;
}
.theme-opt {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.6em 1ch;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  cursor: pointer;
}
.theme-opt:hover { border-color: var(--accent); }
.theme-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-opt:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 2px; }
.opt-head { color: var(--bright); }
.swatches { display: flex; gap: 2px; }
.swatches i { display: block; flex: 1; height: 0.6em; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 2ch;
  margin: 0.5em 0;
}
.row > label:first-child, .row > .label { color: var(--accent2); min-width: 8ch; }

.opt { cursor: pointer; white-space: nowrap; }
.opt input, .theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 2px; }
.radio::before { content: "( )"; color: var(--dim); }
input:checked + .radio::before, input:checked ~ .opt-head .radio::before { content: "(*)"; color: var(--accent); }
.check::before { content: "[ ]"; color: var(--dim); }
input:checked + .check::before { content: "[x]"; color: var(--accent); }

.settings select {
  font: inherit;
  color: var(--bright);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0.1em 1ch;
}
.settings input[type="range"] { accent-color: var(--accent); width: min(30ch, 100%); }
.settings output { min-width: 5ch; }

.btn {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.btn:hover { color: var(--bright); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.btn.warn { color: var(--err); }

/* ---- CRT effects -------------------------------------------------------- */

:root[data-crt="on"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
:root[data-crt="on"][data-theme="paper"] body::after { opacity: 0.4; }
:root[data-glow="on"] .main,
:root[data-glow="on"] .rooms { text-shadow: 0 0 0.35em color-mix(in srgb, currentColor 55%, transparent); }

/* ---- small screens ------------------------------------------------------ */

@media (max-width: 760px) {
  .menu { display: inline; }
  .panes { grid-template-columns: minmax(0, 1fr); position: relative; }
  .rooms {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(30ch, 85vw);
    z-index: 10;
    transform: translateX(-100%);
    transition: transform 0.15s ease-out;
    visibility: hidden;
    box-shadow: 4px 0 0 0 var(--border);
  }
  .client.rooms-open .rooms { transform: none; visibility: visible; }
  .main { padding: 0.75em 16px 1.5em; }
  .status .push { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}