/* NodeBox Forum
 *
 * Grid: 12 columns, 24px gutters, 1200px wide. The sidebar takes columns 1-3 and the
 * content columns 4-12, which is its own 9-column subgrid, so every left edge on the page
 * is a column line. On the content grid:
 *   1-6   page heads, forms, prose pages   (588px)
 *   1-7   topic list text, topic head, posts (avatar on 1, text on 2-7: 588px, ~65 characters)
 *   8-9   numbers in the topic list
 * Baseline: 4px. Every line height is a multiple of 4; vertical space is a multiple of 8.
 * Type scale (size/line): 15/24 meta, 16/24 interface, 18/28 reading, 22/28 list titles,
 * 40/44 page titles. Nothing below 15px except avatar initials.
 * Layout cues from Discourse: sidebar, avatar column, actions under each post. Icons are Lucide.
 */

@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --navy: #041a32;
  --navy-deep: #020f1f;
  --blue: #1f5c99;           /* links */
  --heart: #b23b3b;          /* filled heart only */
  --accent: #b8703d;         /* muted copper: marks, rules, focus. Not for text or fills. */
  --on-navy: #ffffff;
  --on-navy-2: #9fb3c9;

  --ink: #041a32;
  --ink-2: #33465e;
  --ink-3: #56657a;          /* 5.6:1 on paper, 5.1:1 on the wash */
  --rule: #d6dde6;
  --rule-strong: #041a32;
  --wash: #eef2f6;           /* hover rows, notes, code spans */
  --paper: #fbfcfd;
  --field: #ffffff;
  --button: #041a32;
  --button-hover: #1f5c99;
  --danger: #a82323;
  --success: #17704a;
  --code-bg: #041a32;
  --code-ink: #e3ebf5;

  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #8fbcef;
    --heart: #e58a80;
    --accent: #c98a5a;
    --ink: #e8eef6;
    --ink-2: #b6c4d5;
    --ink-3: #93a3b8;
    --rule: #1f3a5a;
    --rule-strong: #e8eef6;
    --wash: #0a2441;
    --paper: #041a32;
    --field: #061f3b;
    --button: #e8eef6;
    --button-hover: #8fbcef;
    --danger: #ff8a8a;
    --success: #6fd6a0;
    --code-bg: #020f1f;
    color-scheme: dark;
  }
}
/* Picked with the sun/moon button in the header; the device setting otherwise. */
:root[data-theme="dark"] {
  --blue: #8fbcef;
  --heart: #e58a80;
  --accent: #c98a5a;
  --ink: #e8eef6;
  --ink-2: #b6c4d5;
  --ink-3: #93a3b8;
  --rule: #1f3a5a;
  --rule-strong: #e8eef6;
  --wash: #0a2441;
  --paper: #041a32;
  --field: #061f3b;
  --button: #e8eef6;
  --button-hover: #8fbcef;
  --danger: #ff8a8a;
  --success: #6fd6a0;
  --code-bg: #020f1f;
  color-scheme: dark;
}

:root {
  --gap: 24px;
  --pad: 24px;
  --header: 72px;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
.icon { flex: none; display: block; }
.muted { color: var(--ink-3); }
.small { font-size: 15px; }
.hint { font-size: 15px; line-height: 24px; color: var(--ink-3); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 16px; z-index: 30; }
.skip:focus { left: 8px; }

/* ---- Grid ---------------------------------------------------------------- */

.wrap { max-width: calc(1200px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---- Header: brand 1-3, search 4-9, account 10-12 ------------------------ */

.site-header { background: var(--navy); color: var(--on-navy); }
.header-row { min-height: var(--header); align-items: center; }
.header-brand { grid-column: 1 / 4; display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.logo-mark { width: 32px; height: 32px; color: #fff; }
.brand-word { font-weight: 800; font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.brand-sub { font-weight: 400; font-size: 22px; line-height: 28px; color: var(--on-navy-2); margin-left: -4px; }
.search { grid-column: 4 / 10; position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 16px; color: var(--on-navy-2); pointer-events: none; }
.search input { width: 100%; height: 40px; padding: 0 16px 0 44px; border: 0; border-radius: var(--radius); background: rgb(255 255 255 / 10%); color: #fff; font-size: 16px; }
.search input::placeholder { color: var(--on-navy-2); opacity: 1; }
.search input:focus { outline: 3px solid var(--accent); outline-offset: 0; background: rgb(255 255 255 / 16%); }
.header-nav { grid-column: 10 / -1; justify-self: end; display: flex; align-items: center; gap: 8px; }
.header-icon { color: #c9d5e3; width: 40px; height: 40px; }
.header-icon:hover { color: #fff; background: rgb(255 255 255 / 8%); }
/* The theme button shows the moon in light mode and the sun in dark mode: what a click switches to. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.icon-button.nav-toggle { display: none; color: #fff; margin-left: -8px; }

.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; padding: 4px; border-radius: 50%; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 264px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(4 26 50 / 16%); padding: 8px; z-index: 20; display: grid; }
.user-menu-who { display: grid; padding: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.user-menu-who span { font-size: 15px; color: var(--ink-3); overflow-wrap: anywhere; }
.user-menu-panel a, .user-menu-panel .linklike { display: flex; align-items: center; gap: 12px; padding: 8px; color: var(--ink); text-decoration: none; border-radius: var(--radius); width: 100%; font-size: 16px; }
.user-menu-panel a:hover, .user-menu-panel .linklike:hover { background: var(--wash); }
.user-menu-panel .icon { color: var(--ink-3); }

/* ---- Shell: sidebar 1-3, main 4-12 --------------------------------------- */

.shell { padding-top: 40px; padding-bottom: 80px; align-items: start; }
.sidebar { grid-column: 1 / 4; position: sticky; top: 24px; }
.side-list { list-style: none; margin: 0 0 32px; padding: 0; }
.side-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px; margin-left: -8px; color: var(--ink-2); text-decoration: none; border-radius: var(--radius); }
.side-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link .icon { color: var(--ink-3); width: 20px; height: 20px; }
.side-link:hover { background: var(--wash); color: var(--ink); }
.side-link.active { background: var(--wash); color: var(--ink); font-weight: 700; }
.side-link .cat-sq { margin: 0 5px; }
.side-count { margin-left: auto; font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-head { font-size: 15px; line-height: 24px; font-weight: 700; color: var(--ink-3); margin: 0 0 4px; }
.side-archive .side-link { color: var(--ink-3); }
.side-archive .side-link:hover, .side-archive .side-link.active { color: var(--ink); }

.main { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; min-width: 0; }
.main > * { grid-column: 1 / -1; }
.main.narrow > * { grid-column: 1 / 7; }
.main > .prose { grid-column: 1 / 7; }

.site-footer { border-top: 1px solid var(--rule); padding: 24px 0 40px; color: var(--ink-2); font-size: 16px; line-height: 24px; text-align: center; }
.site-footer p { grid-column: 1 / -1; }
.site-footer .site-footer-meta { color: var(--ink-3); font-size: 15px; }
.site-footer a { color: var(--ink-2); }
.site-footer .commit { font-family: var(--mono); }

/* Welcome note: in the content column, not a bar above the logo. */
.welcome { display: flex; align-items: flex-start; gap: 16px; padding: 16px 16px 16px 24px; margin-bottom: 40px; background: var(--wash); box-shadow: inset 3px 0 0 var(--accent); color: var(--ink-2); }
.welcome p { flex: 1; }
.welcome strong { color: var(--ink); }
.welcome .icon-button { margin: -4px -4px -4px 0; width: 32px; height: 32px; }
.main.narrow > .welcome { grid-column: 1 / -1; }
.welcome.alert { color: var(--ink); font-weight: 700; }
.welcome.alert .icon { margin-top: 3px; color: var(--accent); }

/* ---- Headings ------------------------------------------------------------ */

.main-head { display: grid; grid-template-columns: subgrid; align-items: end; margin-bottom: 32px; }
.main-head-text { grid-column: 1 / 7; }
.main-head-action { grid-column: 7 / -1; justify-self: end; display: flex; gap: 8px; }
.main.narrow > .main-head { grid-column: 1 / -1; }
.main-head h1, .topic-head h1, .auth-card h1, article.prose > h1 { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.025em; }
.lede { font-size: 18px; line-height: 28px; color: var(--ink-2); margin-top: 8px; }
.kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 0 16px; font-size: 15px; color: var(--ink-3); margin-bottom: 8px; }
.section-title { font-size: 16px; line-height: 24px; font-weight: 700; margin-bottom: 8px; }

/* ---- Small parts --------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--button); color: var(--paper); transition: background 0.12s, border-color 0.12s;
}
.button:hover { background: var(--button-hover); color: var(--paper); }
.button-primary { background: var(--button); color: var(--paper); }
.button-light { background: #fff; color: var(--navy); }
.button-light:hover { background: #d9e6f4; color: var(--navy); }
.button-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.button-quiet:hover { background: var(--wash); color: var(--ink); border-color: var(--rule); }
.button-quiet .icon { color: var(--ink-3); }
.button-danger { background: var(--danger); color: #fff; }
.button-danger:hover { background: var(--danger); filter: brightness(0.9); color: #fff; }
.button-small { min-height: 32px; padding: 0 12px; font-size: 15px; }
.button-block { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
.button-google { width: 100%; background: transparent; color: var(--ink); border-color: var(--rule); min-height: 48px; }
.button-google:hover { background: var(--wash); color: var(--ink); }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-3); cursor: pointer; text-decoration: none; }
.icon-button:hover { background: var(--wash); color: var(--ink); }
.linklike { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; text-align: left; }

.avatar { display: inline-grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--navy); background: hsl(var(--hue) 45% 86%); flex: none; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }
.avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.avatar-lg { width: 96px; height: 96px; font-size: 40px; line-height: 44px; }
/* A picture fills its circle; a transparent one shows the person's colour behind it. */
img.avatar { display: block; object-fit: cover; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar { background: hsl(var(--hue) 25% 26%); color: #e8eef6; } }
:root[data-theme="dark"] .avatar { background: hsl(var(--hue) 25% 26%); color: #e8eef6; }

.cat { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.cat:hover { color: var(--ink); text-decoration: underline; }
.cat-sq { width: 10px; height: 10px; background: var(--cat); flex: none; }
.cat-sq-archived { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
/* Labels say what a thing is in words; never only a colour or an icon. */
.label { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 24px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.label .icon { color: var(--ink-3); }
.label-archived { color: var(--ink-3); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; box-shadow: inset 0 0 0 1px var(--rule); border-radius: var(--radius); font-size: 15px; line-height: 24px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tag-team { color: var(--blue); box-shadow: inset 0 0 0 1px currentColor; }
.tag-new { background: var(--button); box-shadow: none; color: var(--paper); }
.tag-danger { color: var(--danger); box-shadow: inset 0 0 0 1px currentColor; }
.empty { display: flex; align-items: center; gap: 8px; padding: 32px 0; color: var(--ink-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.notice { display: flex; align-items: center; gap: 8px; color: var(--success); font-weight: 700; margin-bottom: 24px; }
.form-error { box-shadow: inset 3px 0 0 var(--danger); color: var(--danger); padding: 8px 16px; font-weight: 700; }
.pager { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 15px; }
.archive-note { grid-column: 1 / 8 !important; display: flex; gap: 12px; align-items: flex-start; padding: 16px 24px; margin-bottom: 32px; background: var(--wash); color: var(--ink-2); }
.archive-note .icon { margin-top: 3px; color: var(--ink-3); }
.archive-note strong { color: var(--ink); }

.tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--rule); }
.tab { padding: 8px 0 12px; text-decoration: none; color: var(--ink-2); font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.main-head + .tabs { margin-top: -8px; }

/* ---- Topic list: text on 1-7, numbers on 8-9 ----------------------------- */

.topics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: subgrid; }
.topic-item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.tabs + .topics .topic-item:first-child { padding-top: 24px; }
.topic-item-main { grid-column: 1 / 8; min-width: 0; }
.topic-item-title { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.topic-item-title a { color: var(--ink); text-decoration: none; }
.topic-item-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.topic-item.unread .topic-item-title a { font-weight: 800; }
.topic-item-excerpt { margin-top: 4px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.topic-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--ink-3); }
.topic-item-meta .cat { font-size: 15px; }
.topic-item-stats { grid-column: 8 / -1; text-align: right; font-size: 15px; line-height: 24px; color: var(--ink-3); }
.stat-replies { color: var(--ink-2); }
.stat-replies strong { font-size: 22px; line-height: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-replies.none { color: var(--blue); font-weight: 700; line-height: 28px; }

/* ---- Topic page: head and posts on 1-7, avatar on 1, text on 2-7 -------- */

.topic { display: grid; grid-template-columns: subgrid; align-items: start; }
.topic > * { grid-column: 1 / 8; }
/* The header is the title and what's known about the thread, on column 1. Who started it is the
   first post's job, so the header has no avatar or name and doesn't read as a post of its own. */
.topic-head { display: grid; grid-template-columns: subgrid; padding-bottom: 32px; }
.topic-head > * { grid-column: 1 / -1; }
.topic-head .kicker { margin-bottom: 12px; }
.topic-head h1 { font-weight: 760; letter-spacing: -0.02em; }
.topic-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 16px; }
/* Every fact starts with a dot; the first dot of each line sits in the clipped margin, so a wrapped line never starts with one. */
.topic-facts { display: flex; flex-wrap: wrap; margin: 0 0 0 -20px; clip-path: inset(0 0 0 20px); font-size: 16px; line-height: 24px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.topic-facts > *::before { content: "·"; display: inline-block; width: 20px; text-align: center; }
.topic-facts .label { font-weight: 400; color: var(--ink-3); }
.topic-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
.topic-actions:empty { display: none; }
.watch.on { border-color: var(--rule-strong); }
.watch.on .icon { color: var(--accent); }
.mod-bar { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mod-bar .side-head { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.mod-bar form { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-actions { position: relative; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mod-rename summary { list-style: none; cursor: pointer; }
.mod-rename summary::-webkit-details-marker { display: none; }
.mod-rename[open] summary { background: var(--wash); }
.mod-bar .mod-rename-form { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; width: min(588px, calc(100vw - 32px)); flex-wrap: nowrap; padding: 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(4 26 50 / 16%); }
.mod-rename-form input[name="title"] { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); padding: 0 8px; font: inherit; }
.mod-rename-form .button { flex: none; }

.posts { display: grid; grid-template-columns: subgrid; list-style: none; margin: 0; padding: 0; }
.post, .reply { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 32px 0; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.post:target { position: relative; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 7%, transparent)); }
/* The marker sits left of the post, clear of the avatar and the text. */
.post:target::before { content: ""; position: absolute; top: 0; bottom: 0; left: -16px; width: 2px; background: var(--accent); }
.post-avatar { grid-column: 1; }
.post-main { grid-column: 2 / -1; min-width: 0; }
.post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-bottom: 8px; }
.avatar-inline { display: none; }
.post-author { font-weight: 700; }
.post-time { font-size: 15px; color: var(--ink-3); text-decoration: none; }
.post-time:hover { color: var(--ink); text-decoration: underline; }
.post-hidden .prose, .post-hidden .post-avatar { opacity: 0.6; }
.topic-foot { display: grid; grid-template-columns: subgrid; }
.topic-foot > * { grid-column: 1 / -1; }
.reply-prompt { grid-column: 2 / -1 !important; padding-top: 32px; border-top: 1px solid var(--rule); display: grid; gap: 8px; justify-items: start; }
.reply-prompt h2 { font-size: 22px; line-height: 28px; font-weight: 800; }
.reply-prompt p { font-size: 18px; line-height: 28px; color: var(--ink-2); margin-bottom: 8px; }

/* Post actions: labelled, under the text where the eye already is. */
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 16px 0 0 -12px; }
.action { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-3); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.action:hover { background: var(--wash); color: var(--ink); }

/* Post text */
.prose { font-size: 18px; line-height: 28px; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li + li { margin-top: 4px; }
.prose h1, .prose h2, .prose h3 { font-size: 22px; line-height: 28px; font-weight: 800; margin: 32px 0 8px; }
.prose blockquote { box-shadow: inset 2px 0 0 var(--rule); padding-left: 16px; color: var(--ink-2); }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--wash); padding: 2px 4px; border-radius: 2px; }
.prose pre { font-family: var(--mono); background: var(--code-bg); color: var(--code-ink); padding: 16px 20px; overflow-x: auto; font-size: 15px; line-height: 24px; border-radius: var(--radius); }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose pre { border: 1px solid var(--rule); } }
:root[data-theme="dark"] .prose pre { border: 1px solid var(--rule); }
.prose img { border: 1px solid var(--rule); border-radius: var(--radius); }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
.prose table { border-collapse: collapse; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 8px 16px 8px 0; text-align: left; }
article.prose > h1 { margin-bottom: 24px; }

.gallery { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--rule); border-radius: var(--radius); display: block; }
.files { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gallery + .files { margin-top: 8px; }
.gallery a { display: block; cursor: zoom-in; }
.gallery-one { display: block; }
.gallery-one img { width: auto; height: auto; max-width: 100%; max-height: 480px; aspect-ratio: auto; object-fit: contain; }
.prose .post-image { cursor: zoom-in; }

/* Video and sound play in the post, at the width of the text. */
.post-video { display: block; width: 100%; max-height: 480px; background: #000; border-radius: var(--radius); }
.post-audio { display: block; width: 100%; }
.prose .post-video, .prose .post-audio { margin: 8px 0; }
.media { margin: 16px 0 0; }
.media + .media, .gallery + .media { margin-top: 16px; }
.media figcaption { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 4px; }
.media .file-name { min-width: 0; font-weight: 400; color: var(--ink-2); }
.media .file-meta { flex: none; }
.media .action { margin-left: auto; flex: none; }
.media + .files { margin-top: 8px; }

/* The lightbox: dark in both themes, the picture as large as the screen allows. */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(2 15 31 / 0.94); color: #e8eef6; overscroll-behavior: contain; }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); animation: lightbox-in 120ms ease-out; }
@keyframes lightbox-in { from { opacity: 0; } }
.lightbox-on { overflow: hidden; }
.lightbox-stage { margin: 0; display: grid; grid-template: minmax(0, 1fr) auto / minmax(0, 1fr); place-items: center; min-height: 0; padding: 56px 72px 0; }
.lightbox-stage img { max-width: 100%; max-height: calc(100vh - 56px - 56px); max-height: calc(100dvh - 56px - 56px); object-fit: contain; background: #fff; border-radius: 2px; box-shadow: 0 8px 32px rgb(0 0 0 / 0.5); }
.lightbox-stage figcaption { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; font-size: 15px; justify-content: center; }
.lightbox-caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-count { color: #9fb3c9; flex: none; }
.lightbox-open { display: inline-flex; align-items: center; gap: 6px; color: #e8eef6; flex: none; }
.lightbox-button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.08); color: #e8eef6; cursor: pointer; }
.lightbox-button:hover { background: rgb(255 255 255 / 0.18); }
.lightbox-button:focus-visible, .lightbox-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox-button[hidden] { display: none; }
.lightbox-close { top: 8px; right: 8px; }
.lightbox-prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox-next { right: 12px; top: 50%; translate: 0 -50%; }
@media (max-width: 720px) {
  .lightbox-stage { padding: 56px 8px 0; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 4px; translate: none; }
  .lightbox-stage figcaption { padding: 0 64px; gap: 8px; }
  .lightbox-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.file-card { display: flex; align-items: center; gap: 16px; padding: 8px 16px 8px 8px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.file-card:hover { border-color: var(--ink-3); background: var(--wash); }
.file-icon { width: 40px; height: 40px; display: grid; place-items: center; background: var(--wash); color: var(--ink-2); border-radius: 2px; flex: none; }
.file-nodebox .file-icon { color: #0072bc; }
.file-text { display: grid; min-width: 0; flex: 1; }
.file-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 15px; color: var(--ink-3); }
.file-dl { color: var(--ink-3); }

/* Reactions and hearts */
.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.reaction { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; color: var(--ink-3); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.reaction .emoji { font-size: 18px; }
.reaction:hover { background: var(--wash); color: var(--ink); }
.reaction.has { color: var(--ink-2); }
.reaction.mine { background: var(--wash); color: var(--ink); }
.reaction-count:empty { display: none; }
.reaction.heart .reaction-count:not(:empty) + .heart-label { display: none; }
.reactions:not(:focus-within) .reaction:not(.has):not(.heart) { display: none; }
.reactions:focus-within .react-toggle { display: none; }
.reaction.heart, .reaction.heart.mine { background: transparent; }
.reaction.heart:hover { color: var(--heart); background: var(--wash); }
.reaction.heart.has { color: var(--heart); }
.reaction.heart.mine .heart-icon { fill: currentColor; }
.heart-icon { transition: transform 0.12s; }
.reaction.heart:active .heart-icon { transform: scale(1.25); }

/* ---- Composer ------------------------------------------------------------ */

.composer { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label, .field > span { font-weight: 700; }
.field input, .field select, .search-row input {
  width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field);
}
.field input#title { font-size: 18px; font-weight: 700; }
.field input:focus, .field select:focus, .search-row input:focus { outline: none; border-color: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.editor { position: relative; background: var(--field); border: 1px solid var(--rule); border-radius: var(--radius); }
.editor:focus-within { border-color: var(--ink-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.editor-tabs { display: flex; gap: 24px; padding: 0 16px; border-bottom: 1px solid var(--rule); }
.editor-tabs button { background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--ink-3); font-weight: 700; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.editor-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.editor textarea { display: block; width: 100%; min-height: 192px; padding: 16px; border: 0; background: transparent; resize: vertical; font-size: 18px; line-height: 28px; }
.editor textarea:focus { outline: none; }
.preview { padding: 16px; min-height: 192px; }
.editor-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px; border-top: 1px solid var(--rule); }
.attach { cursor: pointer; font-weight: 700; color: var(--ink-2); font-size: 15px; }
.attach span { display: inline-flex; align-items: center; gap: 8px; }
.attach:hover { color: var(--ink); }
.attach input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.uploads { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.uploads:not(:empty) { padding: 0 16px 16px; }
.upload { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 1px solid var(--rule); border-radius: var(--radius); font-size: 15px; line-height: 20px; max-width: 296px; overflow: hidden; background: var(--paper); }
.upload img { width: 40px; height: 40px; object-fit: cover; border-radius: 2px; }
.upload .file-icon { width: 40px; height: 40px; }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.upload-meta { color: var(--ink-3); font-size: 15px; }
.upload-text { display: grid; min-width: 0; }
.upload-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--blue); transition: width 0.2s; }
.upload.error { border-color: var(--danger); }
.upload.error .upload-meta { color: var(--danger); }
.upload-remove { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 18px; padding: 0 4px; }
.drop-overlay { position: absolute; inset: -1px; display: none; place-items: center; border: 2px dashed var(--ink-3); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 94%, transparent); font-weight: 800; font-size: 18px; color: var(--ink); pointer-events: none; }
.editor.dragging .drop-overlay { display: grid; }
.composer-actions { display: flex; justify-content: flex-end; }

/* ---- Single-purpose pages: columns 1-6 ----------------------------------- */

.auth-card .lede { margin-bottom: 32px; }
.stack { display: grid; gap: 16px; }

/* Profile picture on Settings: preview on the left, buttons beside it; the crop square takes its place. */
.picture { display: grid; gap: 8px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.picture-label { font-size: 16px; line-height: 24px; font-weight: 700; }
.picture-row { display: flex; align-items: center; gap: 24px; }
.picture-actions, .picture-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.picture-pick { position: relative; }
.picture-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.picture [hidden] { display: none; }
.crop { display: grid; gap: 16px; justify-items: start; }
.crop-stage { position: relative; width: 288px; max-width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--wash); cursor: grab; touch-action: none; user-select: none; }
.crop-stage.dragging { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
/* Everything outside the circle is dimmed; the thin ring marks its edge on any picture. */
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9), 0 0 0 999px rgb(4 26 50 / 0.6); pointer-events: none; }
.crop-controls { display: grid; gap: 16px; width: 288px; max-width: 100%; }
.crop-zoom { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; font-weight: 700; }
.crop-zoom input { width: 100%; accent-color: var(--button); }
.crop-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.user-cell { display: inline-flex; align-items: center; gap: 8px; }
.stack-sm { display: grid; gap: 8px; }
.or { display: flex; align-items: center; gap: 16px; color: var(--ink-3); font-size: 15px; font-weight: 700; margin: 24px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.callout { margin-top: 32px; padding: 16px 24px; background: var(--wash); border-radius: var(--radius); color: var(--ink-2); }
.callout strong { display: block; color: var(--ink); }
.check { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.check input { margin-top: 5px; }

/* ---- Moderation ---------------------------------------------------------- */

.mod-menu { position: relative; margin-left: auto; }
.mod-menu summary { list-style: none; }
.mod-menu summary::-webkit-details-marker { display: none; }
.mod-panel { position: absolute; right: 0; bottom: calc(100% + 8px); width: 328px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(4 26 50 / 16%); padding: 16px; display: grid; gap: 16px; z-index: 5; }
.mod-panel select { width: 100%; height: 40px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--field); padding: 0 8px; }
.mod-panel form + form { border-top: 1px solid var(--rule); padding-top: 16px; }
.mod-hidden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tabs + .muted { margin-top: 24px; margin-bottom: 24px; }
.queue { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.queue-item { display: flex; gap: 24px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.queue-main { flex: 1; min-width: 0; }
.queue-topic { font-weight: 700; color: var(--ink); }
.queue-excerpt { margin: 4px 0; color: var(--ink-2); }
.search-row { display: flex; gap: 8px; margin: 24px 0; max-width: 588px; }
.search-row .button { min-height: 48px; }
.table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.table th, .table td { text-align: left; padding: 8px 16px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table th { font-size: 15px; color: var(--ink-3); border-bottom: 2px solid var(--rule-strong); }
.table td .tag + .tag { margin-left: 4px; }
.row-actions form { display: flex; gap: 8px; justify-content: flex-end; }
.log { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--rule); }
.log li { padding: 8px 0; border-bottom: 1px solid var(--rule); }

/* ---- Smaller screens ----------------------------------------------------- */

@media (max-width: 1024px) {
  .icon-button.nav-toggle { display: inline-grid; }
  .main { grid-column: 1 / -1; }
  .sidebar { display: none; }
  .nav-open .sidebar { display: block; position: fixed; z-index: 25; top: 0; left: 0; bottom: 0; width: 288px; overflow-y: auto; padding: 24px; background: var(--paper); border-right: 1px solid var(--rule); box-shadow: 0 0 0 100vmax rgb(4 26 50 / 40%); }
}

@media (max-width: 400px) {
  /* Room for the theme button next to "Sign in" on small phones. */
  .brand-sub { display: none; }
}
@media (max-width: 720px) {
  :root { --pad: 16px; --gap: 16px; --header: 64px; }
  .header-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding-block: 12px; }
  .header-brand, .header-nav { grid-column: auto; }
  .search { grid-column: 1 / -1; grid-row: 2; }
  .brand-word, .brand-sub { font-size: 20px; }
  .header-nav { gap: 4px; }
  .theme-toggle { width: 32px; }
  .shell { padding-top: 24px; }
  .main, .main-head, .topic, .posts, .topic-foot, .topics { display: block; }
  .main-head-action { margin-top: 16px; justify-self: start; }
  .main-head h1, .topic-head h1, .auth-card h1, article.prose > h1 { font-size: 32px; line-height: 36px; }
  .topic-item { display: grid; grid-template-columns: minmax(0, 1fr); }
  .topic-item-main, .topic-item-stats { grid-column: 1; }
  .topic-item-stats { display: flex; gap: 16px; text-align: left; margin-top: 4px; }
  .stat-replies strong { font-size: inherit; line-height: inherit; }
  .stat-replies.none { line-height: inherit; }
  .topic-item-excerpt { -webkit-line-clamp: 2; }
  .topic-head { display: block; }
  .topic-actions { width: 100%; }
  .topic-actions .button, .topic-actions .watch-form { flex: 1; }
  .topic-actions .watch-form .button { width: 100%; }
  .post, .reply { padding: 24px 0; }
  .post:target::before { left: -10px; }
  .post-avatar { display: none; }
  .avatar-inline { display: block; align-self: center; }
  .post-head { align-items: center; }
  .post-actions { margin-left: -8px; }
  .action, .reaction { padding: 0 8px; gap: 6px; }
  .reply .post-avatar { display: none; }
  .welcome { padding-left: 16px; margin-bottom: 24px; }
  .mod-panel { width: min(328px, calc(100vw - 32px)); }
  .table .small { display: none; }
}

@media (hover: none) {
  .reactions .reaction:not(.has):not(.heart) { display: inline-flex; }
  .reactions .react-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }