/* Themes: Graphite is the default, Paper the alternative (picker on the Me page sets data-theme on <html>).
   The other palettes below are kept but not offered; add them to THEMES in app.js and ALLOWED in theme.js to bring one back. */
:root, [data-theme=graphite] { --bg:#121212; --fg:#e8e6e3; --dim:#8b8782; --acc:#f2f0eb; --quote:#8fb996; --link:#a7b8d9; --heart:#ff7a90; --warn:#e0b36a; --field:#1c1c1c; }
[data-theme=paper]    { --bg:#ffffff; --fg:#1a1a1a; --dim:#8a8a8a; --acc:#111111; --quote:#2e7d32; --link:#1a56db; --heart:#d6204a; --warn:#b45309; --field:#f1f1f1; }
[data-theme=cream]    { --bg:#f6f1e7; --fg:#2b2622; --dim:#9a8f80; --acc:#8a3b12; --quote:#5b7f3a; --link:#1f5f8b; --heart:#c2410c; --warn:#a15c00; --field:#ece5d6; }
[data-theme=cool]     { --bg:#f4f7fb; --fg:#1b2430; --dim:#7b8794; --acc:#2457d6; --quote:#2f8f5b; --link:#2457d6; --heart:#e0245e; --warn:#a15c00; --field:#e6edf7; }
[data-theme=monow]    { --bg:#ffffff; --fg:#000000; --dim:#777777; --acc:#000000; --quote:#555555; --link:#000000; --heart:#000000; --warn:#000000; --field:#ededed; }
[data-theme=classic]  { --bg:#0b0b0b; --fg:#cfcfcf; --dim:#777;    --acc:#5fd75f; --quote:#5fd75f; --link:#8ab4ff; --heart:#ff6b81; --warn:#ffb454; --field:#161616; }
[data-theme=midnight] { --bg:#0e1320; --fg:#d7deea; --dim:#7a869a; --acc:#8fb4ff; --quote:#7fcfa4; --link:#8fb4ff; --heart:#ff8aa1; --warn:#e0b36a; --field:#151c2e; }
[data-theme=plum]     { --bg:#17121c; --fg:#e6dfee; --dim:#8b7f99; --acc:#d9a6ff; --quote:#9fd8b0; --link:#b9a0ff; --heart:#ff7fa8; --warn:#e0b36a; --field:#201828; }
[data-theme=monob]    { --bg:#000000; --fg:#ffffff; --dim:#8a8a8a; --acc:#ffffff; --quote:#b5b5b5; --link:#ffffff; --heart:#ffffff; --warn:#ffffff; --field:#141414; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
#app { max-width: 760px; margin: 0 auto; padding: 12px 14px 40px; }
pre, .pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
.logo { color: var(--acc); font-size: 12px; line-height: 1.15; white-space: pre; overflow: hidden; }
.dim { color: var(--dim); }
.dim:not(button) { font-size: 13px; }
.acc { color: var(--acc); }
.warn { color: var(--warn); }
.err { color: var(--heart); }
.green { color: var(--quote); }
.rule { color: var(--dim); white-space: nowrap; overflow: hidden; user-select: none; }
a, .lnk { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover, .lnk:hover { text-decoration: underline; }
.row { margin: 2px 0; }
.gap { height: 10px; }

button, .b {
  font: inherit;
  color: var(--acc);
  background: none;
  border: 0;
  padding: 6px 2px;
  margin: 0 6px 0 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:hover { text-decoration: underline; }
button:disabled { color: var(--dim); cursor: default; text-decoration: none; }
button.heart { color: var(--dim); padding: 2px; }
button.heart.on { color: var(--heart); }
button.sm { color: var(--dim); padding: 2px; }

input[type=text], input[type=password], textarea, select {
  font: inherit;
  font-size: 16px;
  color: var(--fg);
  background: var(--field);
  border: 0;
  border-bottom: 1px dashed var(--dim);
  border-radius: 0;
  padding: 8px 6px;
  width: 100%;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-bottom-color: var(--acc); }
textarea { resize: vertical; min-height: 84px; }
label { display: inline-block; margin-right: 14px; cursor: pointer; }
input[type=radio] { appearance: none; -webkit-appearance: none; width: 3ch; border: 0; background: none; margin: 0; padding: 0; cursor: pointer; }
input[type=radio]::before { content: "( )"; color: var(--dim); }
input[type=radio]:checked::before { content: "(*)"; color: var(--acc); }

.post { margin: 10px 0; }
.post .meta { color: var(--dim); }
.post .name { color: var(--acc); font-weight: 700; }
.post .anon { color: var(--fg); }
.post .body { margin: 4px 0 2px 2ch; }
.post.hl { background: color-mix(in srgb, var(--acc) 16%, var(--bg)); }
.thread-row { margin: 12px 0; }
.thread-row .subj { color: var(--heart); }

.chat { min-height: 40vh; }
.msg { margin: 2px 0; }
.msg .t { color: var(--dim); }
.msg .who { color: var(--acc); font-weight: 700; }
.msg .who.anon { color: var(--fg); }
.msg .txt { white-space: pre-wrap; word-break: break-word; }
.bar { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0 4px; }

#wm {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
#wm.on { display: block; }
#wm .wmi {
  position: absolute;
  inset: -50%;
  transform: rotate(-24deg);
  color: var(--fg);
  opacity: 0.05;
  font-size: 13px;
  line-height: 2.6;
  white-space: pre;
  user-select: none;
}
body.guard .chat, body.guard .bar { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.blur #app { filter: blur(14px); }
body.blur::after {
  content: "[ locked ]";
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--acc); background: color-mix(in srgb, var(--bg) 55%, transparent); z-index: 60;
}
@media print { body { display: none; } }

.media { display: block; max-width: 100%; max-height: 70vh; margin: 6px 0; background: var(--field); }

button.theme-opt { display: block; text-align: left; margin: 2px 0; padding: 6px 2px; color: var(--fg); }

textarea { overflow-y: auto; }
textarea.chatbox { min-height: 0; resize: none; }