:root {
  --bg: #fbfbf8; --fg: #1d1d1b; --dim: #8a8a84; --line: #e6e6e0; --accent: #1d1d1b;
  --err: #b3261e; --warn: #9a6700; --learn: #1f5fbf; --win: #2b7a3d; --debug: #6b6b66;
  --sel: #f0f0ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121211; --fg: #e4e4df; --dim: #77776f; --line: #2a2a27; --accent: #e4e4df;
    --err: #f2867d; --warn: #e3b341; --learn: #79a8f2; --win: #74c48a; --debug: #9a9a92;
    --sel: #1c1c1a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body, input, button, select, textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px; line-height: 1.55;
}
a { color: inherit; }
header.top, main { max-width: 100ch; margin: 0 auto; padding: 0 16px; }
header.top { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; padding-bottom: 8px; gap: 12px; flex-wrap: wrap; }
header.top .brand { font-weight: bold; text-decoration: none; }
header.top nav a { margin-left: 14px; color: var(--dim); text-decoration: none; }
header.top nav a:hover { color: var(--fg); }
main { padding-bottom: 64px; }
h1, h2, h3 { font-size: 14px; margin: 24px 0 8px; }
h1::before { content: "# "; color: var(--dim); }
h2::before { content: "## "; color: var(--dim); }
p { margin: 8px 0; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.err-msg { color: var(--err); }

input[type=text], input[type=email], input[type=search], input[type=number], input[type=url], select {
  background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--line);
  padding: 4px 2px; outline: none; min-width: 0;
}
input:focus, select:focus { border-bottom-color: var(--fg); }
input.wide { width: 100%; max-width: 560px; margin: 2px 0; }
.bio { margin: 2px 0 4px; }
.profile-links a { margin-right: 12px; }
.pinned { border-left: 2px solid var(--line); padding-left: 10px; margin: 10px 0 14px; }
.pinned .log { margin: 0; }
button, .btn {
  background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 2px 10px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { border-color: var(--fg); }
button.danger { color: var(--err); border-color: var(--err); }
form.inline { display: inline; }

.prompt { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; position: relative; }
.prompt .caret { color: var(--dim); }
.prompt input { flex: 1; font-size: 15px; }
.prompt .count { white-space: nowrap; }
.hint { color: var(--dim); font-size: 12px; margin: 0 0 14px; }

.filters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0; font-size: 12px; }
.filters a { color: var(--dim); text-decoration: none; }
.filters a.on { color: var(--fg); text-decoration: underline; }
.filters input { width: 16ch; font-size: 12px; }

ol.log { list-style: none; margin: 0; padding: 0; }
ol.log li { padding: 1px 0; white-space: pre-wrap; word-break: break-word; display: flex; gap: 1ch; }
ol.log li:hover { background: var(--sel); }
ol.log li > .ts, ol.log li > .who { white-space: nowrap; flex: none; }
ol.log li > .lvl { white-space: pre; flex: none; }
ol.log li > .txt { flex: 1; min-width: 0; }
ol.log a.ts { text-decoration: none; color: var(--dim); }
ol.log a.ts:hover { text-decoration: underline; }
.lvl-ERROR { color: var(--err); }
.lvl-WARN { color: var(--warn); }
.lvl-LEARN { color: var(--learn); }
.lvl-WIN { color: var(--win); }
.lvl-DEBUG { color: var(--debug); }
.lvl-SYSTEM, .lvl-AD { color: var(--dim); }
li.sys, li.ad { color: var(--dim); }
li.ad a { color: var(--dim); }
.via { color: var(--dim); font-size: 12px; }
@media (max-width: 640px) {
  ol.log li { flex-wrap: wrap; gap: 0 1ch; }
  ol.log li > .txt { flex-basis: 100%; }
}
/* Lists that show a [handle] (everyone, feed, search, saved): handles differ in length, so share one set of
   columns across all rows (time · handle · level · text) and every line starts at the same place. */
@media (min-width: 641px) {
  ol.log:has(> li > .who) { display: grid; grid-template-columns: max-content max-content max-content minmax(0, 1fr); column-gap: 1ch; }
  ol.log:has(> li > .who) > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 0 1ch; }
  ol.log:has(> li > .who) > li > .ts { grid-column: 1; }
  ol.log:has(> li > .who) > li > .who { grid-column: 2; }
  ol.log:has(> li > .who) > li > .lvl { grid-column: 3; }
  ol.log:has(> li > .who) > li > .txt { grid-column: 4; }
  ol.log:has(> li > .who) > li.caughtup > .txt { grid-column: 1 / -1; text-align: center; }
}

.newbar { display: block; text-align: center; border: 1px dashed var(--line); padding: 4px; margin: 6px 0; cursor: pointer; color: var(--dim); }
.more { margin: 14px 0; }
table.plain { border-collapse: collapse; width: 100%; }
table.plain td, table.plain th { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: normal; }
table.plain th { color: var(--dim); }
fieldset { border: 1px solid var(--line); margin: 12px 0; padding: 8px 12px; }
legend { color: var(--dim); padding: 0 4px; }
label { margin-right: 12px; white-space: nowrap; }
.box { border: 1px solid var(--line); padding: 10px 12px; margin: 12px 0; }
.token { word-break: break-all; user-select: all; background: var(--sel); padding: 6px; display: block; }
.cf-turnstile { margin: 10px 0; }

/* ---- Terminal-style themes (viewer preference). [data-theme] beats the media query above
   because it comes later with equal specificity; it also scopes palettes to swatches. ---- */
[data-theme="light"] { color-scheme: light;
  --bg: #fbfbf8; --fg: #1d1d1b; --dim: #8a8a84; --line: #e6e6e0; --sel: #f0f0ea;
  --err: #b3261e; --warn: #9a6700; --learn: #1f5fbf; --win: #2b7a3d; --debug: #6b6b66; }
[data-theme="dark"] { color-scheme: dark;
  --bg: #121211; --fg: #e4e4df; --dim: #77776f; --line: #2a2a27; --sel: #1c1c1a;
  --err: #f2867d; --warn: #e3b341; --learn: #79a8f2; --win: #74c48a; --debug: #9a9a92; }
[data-theme="solarized-dark"] { color-scheme: dark;
  --bg: #002b36; --fg: #93a1a1; --dim: #586e75; --line: #073642; --sel: #073642;
  --err: #dc322f; --warn: #b58900; --learn: #268bd2; --win: #859900; --debug: #6c71c4; }
[data-theme="solarized-light"] { color-scheme: light;
  --bg: #fdf6e3; --fg: #586e75; --dim: #93a1a1; --line: #eee8d5; --sel: #eee8d5;
  --err: #dc322f; --warn: #b58900; --learn: #268bd2; --win: #859900; --debug: #6c71c4; }
[data-theme="gruvbox"] { color-scheme: dark;
  --bg: #282828; --fg: #ebdbb2; --dim: #928374; --line: #3c3836; --sel: #32302f;
  --err: #fb4934; --warn: #fabd2f; --learn: #83a598; --win: #b8bb26; --debug: #d3869b; }
[data-theme="nord"] { color-scheme: dark;
  --bg: #2e3440; --fg: #d8dee9; --dim: #7b88a1; --line: #3b4252; --sel: #3b4252;
  --err: #bf616a; --warn: #ebcb8b; --learn: #81a1c1; --win: #a3be8c; --debug: #b48ead; }
[data-theme="dracula"] { color-scheme: dark;
  --bg: #282a36; --fg: #f8f8f2; --dim: #6272a4; --line: #44475a; --sel: #343746;
  --err: #ff5555; --warn: #f1fa8c; --learn: #8be9fd; --win: #50fa7b; --debug: #bd93f9; }
[data-theme="monokai"] { color-scheme: dark;
  --bg: #272822; --fg: #f8f8f2; --dim: #75715e; --line: #3e3d32; --sel: #3e3d32;
  --err: #f92672; --warn: #e6db74; --learn: #66d9ef; --win: #a6e22e; --debug: #ae81ff; }
[data-theme="phosphor"] { color-scheme: dark;
  --bg: #0a0f0a; --fg: #33ff66; --dim: #1f9940; --line: #123318; --sel: #0f1f12;
  --err: #ff5f56; --warn: #d7ff5f; --learn: #5fffd7; --win: #87ff87; --debug: #2bbf55; }
[data-theme="amber"] { color-scheme: dark;
  --bg: #100c05; --fg: #ffb000; --dim: #a07020; --line: #33260d; --sel: #1f170a;
  --err: #ff6a3d; --warn: #ffd75f; --learn: #ffcf80; --win: #e6c200; --debug: #b88a30; }
[data-theme="paper"] { color-scheme: light;
  --bg: #f4ecd8; --fg: #3b2f1e; --dim: #8c7a5b; --line: #e2d5b8; --sel: #ebe0c6;
  --err: #a8321e; --warn: #8a6100; --learn: #2f5d8a; --win: #4d7a2a; --debug: #7a6a50; }
[data-theme]:not(html) { color: var(--fg); background: var(--bg); }

/* theme picker */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 8px 0; }
.themes label { margin: 0; white-space: normal; }
.swatch { display: block; border: 1px solid var(--line); padding: 6px 8px; font-size: 12px; cursor: pointer; }
.swatch .s-err { color: var(--err); } .swatch .s-learn { color: var(--learn); } .swatch .s-win { color: var(--win); } .swatch .s-dim { color: var(--dim); }
.themes input:checked + .swatch { outline: 2px solid var(--fg); outline-offset: 1px; }
.themes input { position: absolute; opacity: 0; pointer-events: none; }
.themes input:focus-visible + .swatch { outline: 2px dashed var(--fg); }
input[type=color] { width: 44px; height: 26px; padding: 0; border: 1px solid var(--line); background: transparent; vertical-align: middle; }

/* docs */
.docs-nav { margin: 6px 0 4px; color: var(--dim); line-height: 1.9; }
.docs-nav a { color: var(--dim); }
.docs-nav b { color: var(--fg); font-weight: normal; text-decoration: underline; }
.docs-list { padding-left: 2ch; }
.docs-list li { margin: 4px 0; }
.doc ol:not(.log), .doc ul { padding-left: 3ch; }
.doc li { margin: 4px 0; }
.doc ol.log { margin: 8px 0; border-left: 2px solid var(--line); padding-left: 1ch; }
code { background: var(--sel); padding: 0 3px; }
pre { background: var(--sel); border: 1px solid var(--line); padding: 10px 12px; overflow-x: auto; margin: 10px 0; }
pre code { background: none; padding: 0; white-space: pre; }

/* brand: "hlog" + a block cursor (pure CSS, in the theme's colours) */
header.top .brand::after {
  content: ""; display: inline-block; width: 0.55em; height: 0.95em; margin-left: 2px;
  background: var(--win); vertical-align: -0.12em;
}
.lede { margin: 18px 0 10px; max-width: 70ch; }
ol.log li.caughtup { justify-content: center; color: var(--dim); font-size: 12px; padding: 6px 0; border-top: 1px dashed var(--line); margin-top: 4px; }
ol.log li.caughtup:hover { background: none; }
footer.site { max-width: 100ch; margin: 0 auto; padding: 18px 16px 28px; color: var(--dim); font-size: 12px; border-top: 1px solid var(--line); }
footer.site a { color: var(--dim); }
.legal p, .legal li { max-width: 80ch; }
textarea.feedback-text { width: 100%; background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 8px; font: inherit; resize: vertical; }
textarea.feedback-text:focus { border-color: var(--fg); outline: none; }
.feedback-body { white-space: pre-wrap; word-break: break-word; }
.mytotals { margin: 0 0 4px; }
.mytotals a { color: var(--dim); }
form.tailform { margin-left: 1ch; }
form.tailform button { font-size: 11px; padding: 0 6px; color: var(--dim); }
form.tailform button:hover { color: var(--fg); }

/* review: copy as post */
.copy-post { margin: 18px 0 8px; }
.copy-post textarea { width: 100%; max-width: 640px; background: var(--sel); color: var(--fg); border: 1px solid var(--line); font: inherit; padding: 8px; }

/* @-autocomplete under the line box */
.mention-menu { position: absolute; top: 100%; left: 2ch; z-index: 10; margin: 2px 0 0; padding: 2px 0; list-style: none;
  background: var(--bg); border: 1px solid var(--line); min-width: 18ch; font-size: 13px; }
.mention-menu li { padding: 2px 10px; cursor: pointer; white-space: nowrap; }
.mention-menu li[aria-selected="true"] { background: var(--sel); color: var(--fg); }

/* share as image */
.share-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 10px 0; }
.share-canvas { display: block; width: 100%; max-width: 1200px; height: auto; border: 1px solid var(--line); margin: 8px 0 14px; }
.share-pick { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
.share-pick li { padding: 2px 0; }
.share-pick label { white-space: normal; margin: 0; }