/* 3BS — dense, light, durable. See WIREFRAMES.md §1.
   Layout = named grid areas (D23): rearrange pages here, not in markup. */
:root {
  --accent: #2a7f62; /* per-board setting, eventually */
  --fg: #1d1d1b;
  --bg: #fafaf7;
  --muted: #6b6b66;
  --line: #d8d8d2;
  --pane: #f1f1ec;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e4e4df; --bg: #181816; --muted: #9a9a93; --line: #34342f; --pane: #1f1f1c; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.45 system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden; /* horizontal scrollbars are a bug, never a feature */
}
header { padding: 0.6rem 1rem; border-bottom: 2px solid var(--accent); }
.site-menu { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 1.15rem; color: var(--accent); }
.menu-toggle { display: none; }
.menu-btn { display: none; cursor: pointer; color: var(--accent); font-size: 1.1rem; margin-left: auto; user-select: none; }
.menu-close { display: none; cursor: pointer; color: var(--muted); user-select: none; }
.searchbox { margin-left: auto; }
.crumb { color: var(--muted); white-space: nowrap; }
.crumb a { color: var(--fg); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.rails-close { display: none; }
.searchbox input { display: inline-block; width: 11rem; padding: 0.15rem 0.5rem; margin: 0; font-size: 0.85rem; }
.user-area { margin-left: 0; }
.search-big { display: flex; gap: 0.5rem; max-width: 32rem; margin-bottom: 1rem; }
.search-big input { margin: 0; }
.search-big button { margin: 0; }
.who { color: var(--accent); font-weight: 600; margin-right: 0.5rem; }
form.inline { display: inline; }
nav { color: var(--muted); }
nav a { color: var(--fg); text-decoration: none; }
nav a:hover { color: var(--accent); }
.todo { opacity: 0.45; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
/* app surfaces (chat) use the whole window instead of the reading measure */
main.chat-app { max-width: none; width: 100%; padding: 0.7rem 1.2rem; }
.panel { margin-bottom: 1rem; }
.panel h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.4rem; }
.empty { color: var(--muted); }
.error { color: #c33d2e; }
.narrow { max-width: 24rem; }
label { display: block; margin: 0.5rem 0; }
input, textarea, select { display: block; width: 100%; padding: 0.35rem 0.5rem; margin-top: 0.15rem;
        border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--fg);
        font: inherit; }
button { margin-top: 0.6rem; padding: 0.35rem 0.9rem; border: 1px solid var(--accent);
         border-radius: 3px; background: var(--accent); color: #fff; cursor: pointer; }
form.inline button { margin: 0; padding: 0.1rem 0.5rem; font-size: 0.8rem;
                     background: none; color: var(--muted); border-color: var(--line); }
.invite-code { font-family: ui-monospace, monospace; font-size: 1.1rem; padding: 0.5rem;
               border: 1px dashed var(--accent); display: inline-block; }
.alpha-note { opacity: 0.8; }
footer { padding: 1rem; color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); }

/* ---- forum ---- */
.post-row { display: flex; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.post-row .votes { min-width: 3.2rem; color: var(--muted); }
.post-title { font-weight: 600; color: var(--fg); text-decoration: none; }
.post-title:hover { color: var(--accent); }
.meta { color: var(--muted); font-size: 0.85rem; }
.meta a { color: var(--muted); }
.meta-num { float: right; color: var(--muted); }
.group-row { padding: 0.15rem 0; }
.body { white-space: pre-wrap; margin: 0.5rem 0; overflow-wrap: anywhere; }
.post-head { display: flex; gap: 0.7rem; align-items: baseline; }
.post-title-big { margin: 0; font-size: 1.2rem; color: var(--fg); text-transform: none; letter-spacing: 0; }
button.vote, button.vote-sm { background: none; color: var(--muted); border: 1px solid var(--line); margin: 0; }
button.vote.voted { color: var(--accent); border-color: var(--accent); }
button.vote-sm { padding: 0 0.4rem; font-size: 0.8rem; }
.comment { border-left: 2px solid var(--line); padding-left: 0.7rem; margin: 0.7rem 0; }
.comment.d2 { margin-left: 1.5rem; }
.comment.d3 { margin-left: 3rem; }
.reply summary { color: var(--muted); font-size: 0.8rem; cursor: pointer; }
details > summary { cursor: pointer; color: var(--muted); }
details.action { margin-bottom: 0.8rem; }
details.action > summary { color: var(--accent); font-weight: 600; }
.narrow { max-width: 24rem; }

/* ---- chat ---- */
.msg { display: flex; gap: 0.45rem; align-items: baseline; padding: 0.15rem 0; overflow-wrap: anywhere; }
.msg-age { flex: 0 0 2.6rem; color: var(--muted); font-size: 0.75rem; }
.msg-main { flex: 1; min-width: 0; }
.msg-body { white-space: pre-wrap; }
/* rich messages (image/gif/link) stack: author line, media, text — never inline */
.msg-author { display: block; }
.msg-body.block { display: block; }
.msg-body.caption { display: block; max-width: min(100%, 22rem); margin: 0.05rem 0 0.15rem;
                    font-size: 0.9rem; color: var(--muted); }
.msg-form { margin-top: 0.8rem; }
.msg-reply { font-size: 0.75rem; color: var(--muted); margin-left: 0.5rem; text-decoration: none; white-space: nowrap; }
.react-bar .act-first { margin-left: 0.9rem; }
.msg-reply:hover { color: var(--accent); }
.edited { color: var(--muted); font-size: 0.72rem; }
.msg-body a { color: var(--accent); overflow-wrap: anywhere; }
.body a { color: var(--accent); overflow-wrap: anywhere; }
.link-card { display: flex; flex-direction: column; gap: 0.4rem;
             max-width: min(100%, 26rem);
             margin: 0.3rem 0 0.2rem; padding: 0.4rem 0.6rem;
             border-left: 3px solid var(--accent);
             background: var(--bg); border-radius: 0 4px 4px 0; text-decoration: none; }
.link-thumb { position: relative; display: block; width: 100%; line-height: 0; }
.link-thumb img { width: 100%; height: auto; max-height: 15rem; object-fit: cover; border-radius: 3px; }
.link-thumb.video::after { content: "▶"; position: absolute; inset: 0;
                           display: flex; align-items: center; justify-content: center;
                           color: #fff; font-size: 2rem;
                           background: rgba(0,0,0,0.3); border-radius: 3px; }
.link-text { min-width: 0; }
.link-card .link-host { display: block; font-size: 0.7rem; color: var(--muted); text-transform: lowercase; }
.link-card .link-title { display: block; font-weight: 600; color: var(--fg); }
.link-card .link-desc { display: block; font-size: 0.8rem; color: var(--muted); }
.link-card:hover .link-title { color: var(--accent); }
.msg-img { display: block; max-width: min(100%, 22rem); max-height: 16rem; margin: 0.3rem 0 0.1rem; border-radius: 4px; }

/* D29 announcements: pinned strip overlays the top of the chat pane;
   cards render as accent-bar chips in the flow */
.pane-wrap { position: relative; }
.pin-strip { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.pin-line { display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0.6rem;
            background: var(--pane); border-bottom: 1px solid var(--line);
            font-size: 0.85rem; white-space: nowrap; overflow: hidden; }
.pin-line a { overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--fg); }
.pin-line a:hover { color: var(--accent); }
.pin-line .pin-post { flex: 0 0 auto; }
.pin-hide { background: none; border: none; color: var(--muted); cursor: pointer;
            margin-left: auto; padding: 0 0.2rem; }
.pin-hide:hover { color: var(--fg); }
.ann-card { display: inline-block; margin: 0.2rem 0; padding: 0.35rem 0.6rem;
            border-left: 3px solid var(--accent); background: var(--bg);
            border-radius: 0 4px 4px 0; text-decoration: none; color: var(--fg);
            font-weight: 600; max-width: min(100%, 26rem);
            overflow: hidden; text-overflow: ellipsis; }
.ann-card:hover { color: var(--accent); }
.reply-to { display: block; font-size: 0.72rem; color: var(--muted); }
.ann-form input[type="text"] { width: 100%; box-sizing: border-box; margin-bottom: 0.3rem; }
.ann-form textarea { width: 100%; box-sizing: border-box; }
.ann-controls { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.3rem; }

.post-img { display: block; max-width: min(100%, 34rem); max-height: 24rem;
            margin: 0.5rem 0; border-radius: 4px; }

/* monotone inline icons (calendar etc.) — scale with surrounding text */
.icon { vertical-align: -0.125em; }

/* compact forum rows, old-web style: votes | thumb | title/meta/expand */
.prow { display: flex; gap: 0.55rem; align-items: flex-start;
        padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.prow:last-of-type { border-bottom: none; }
.prow-votes { flex: 0 0 2.6rem; text-align: right; color: var(--muted);
              font-size: 0.8rem; padding-top: 0.15rem; white-space: nowrap; }
.prow-thumb { flex: 0 0 56px; }
.prow-thumb summary img { width: 56px; height: 42px; object-fit: cover;
                          border-radius: 3px; display: block; }
.prow-thumb-empty { display: flex; align-items: center; justify-content: center;
                    width: 56px; height: 42px; background: var(--pane);
                    border-radius: 3px; color: var(--muted); font-size: 1.1rem; }
.prow-main { flex: 1; min-width: 0; }
.prow-main .post-title { font-size: 0.98rem; }
.prow-main .meta { font-size: 0.75rem; }
.prow-expand > summary { cursor: pointer; list-style: none; }
.prow-expand > summary::-webkit-details-marker { display: none; }
.prow-expand > summary:hover { color: var(--accent); }
.prow-expand[open] > summary { color: var(--accent); }
.expand-slot { margin: 0.4rem 0 0.4rem 0.2rem; padding-left: 0.6rem;
               border-left: 2px solid var(--line); }
.expand-body { font-size: 0.9rem; margin: 0.2rem 0 0.5rem; }
.expand-slot .comment { margin: 0.35rem 0; font-size: 0.9rem; }
.expand-reply { display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.5rem; }
.expand-reply textarea { flex: 1; }

/* forum composer pickers (inline-expanding, no overlay games) */
.compose-extras { display: flex; gap: 1rem; align-items: flex-start;
                  flex-wrap: wrap; margin: 0.4rem 0; }
.attach-inline input[type="file"] { font-size: 0.8rem; }
.gif-pop > summary, .emoji-pop > summary { cursor: pointer; list-style: none; }
.gif-pop > summary::-webkit-details-marker,
.emoji-pop > summary::-webkit-details-marker { display: none; }
.gif-pop[open] > summary, .emoji-pop[open] > summary { color: var(--accent); }
.gif-pop input[type="search"] { display: block; margin: 0.3rem 0; }
.gifpick-grid { display: flex; flex-wrap: wrap; gap: 0.3rem;
                max-height: 14rem; overflow-y: auto; max-width: 28rem; }
.gifpick-grid .gif-pick { background: none; border: none; padding: 0; cursor: pointer; }
.gifpick-grid img { height: 72px; border-radius: 3px; display: block; }
.emoji-pop .efilter-wrap { display: block; margin-top: 0.3rem; }
.cmt-img { display: block; max-width: min(100%, 16rem); max-height: 12rem;
           margin: 0.25rem 0 0.1rem; border-radius: 4px; }
.chan-add { display: block; margin-top: 0.5rem; text-decoration: none; }
.chan-add:hover { color: var(--accent); }
.user-row { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.user-actions { margin-left: auto; display: flex; gap: 0.7rem; }
.ok { color: var(--accent); }
.check-row { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; }
.check-row input { flex: 0 0 auto; }

/* D31 follow/mute: state is typography, control is rail manage mode */
.chan.followed > a { font-weight: 700; color: var(--fg); }
.chan.muted > a { opacity: 0.45; }
.pref-row { display: inline-flex; gap: 0.15rem; margin-left: 0.4rem; }
.pref-btn { background: none; border: 1px solid transparent; border-radius: 4px;
            padding: 0 0.25rem; cursor: pointer; font-size: 0.75rem;
            color: var(--muted); line-height: 1.4; }
.pref-btn:hover { color: var(--fg); }
.pref-btn.on { border-color: var(--accent); color: var(--accent); }

/* mod tooling (D7) */
.linklike { background: none; border: none; padding: 0; color: var(--muted);
            cursor: pointer; font-size: inherit; }
.linklike:hover { color: var(--accent); }
.tombstone { color: var(--muted); font-style: italic; }
.danger { background: none; border: 1px solid #a33; color: #c55;
          border-radius: 4px; padding: 0.15rem 0.5rem; cursor: pointer; }
.danger:hover { background: #a33; color: #fff; }
.del-confirm { background: var(--pane); padding: 0.5rem 0.7rem; border-radius: 4px; }

/* D27 events */
.day-head { font-weight: 600; color: var(--accent); margin: 0.7rem 0 0.2rem;
            border-bottom: 1px solid var(--line); padding-bottom: 0.15rem; }
.event-when { margin: 0.3rem 0; }
.rsvp-bar { display: flex; gap: 0.5rem; margin: 0.6rem 0 0.3rem; }
.rsvp { background: var(--pane); border: 1px solid var(--line); border-radius: 999px;
        padding: 0.25rem 0.8rem; cursor: pointer; color: var(--fg); }
.rsvp.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* image lightbox: the overlay lives inside <summary>, so clicking the
   enlarged view (anywhere) closes it; Esc works via app.js */
details.lightbox { display: block; }
details.lightbox > summary { list-style: none; cursor: zoom-in; }
details.lightbox > summary::-webkit-details-marker { display: none; }
.lightbox-overlay { display: none; }
details.lightbox[open] .lightbox-overlay {
  display: flex; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.88); cursor: zoom-out;
}
.lightbox-overlay img { max-width: 95vw; max-height: 95vh; border-radius: 4px; }
details.lightbox[open] .lightbox-overlay::after {
  content: "✕"; position: fixed; top: 0.8rem; right: 1.1rem;
  color: #fff; font-size: 1.4rem; opacity: 0.8;
}
.react-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.1rem 0 0.25rem; align-items: center; }
.react-bar:has(> details:only-child):not(:hover) { opacity: 0.35; }
.react-chip { padding: 0 0.45rem; font-size: 0.8rem; background: none; color: var(--fg);
              border: 1px solid var(--line); border-radius: 10px; margin: 0; cursor: pointer; }
.react-chip:hover { border-color: var(--accent); }
.react-add { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.efilter-wrap { display: inline-flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }
.emoji-filter { display: inline-block; width: 6.5rem; margin: 0; padding: 0.05rem 0.4rem;
                font-size: 0.78rem; }
.efilter-results { display: inline-flex; gap: 0.2rem; flex-wrap: wrap; }
.emo { height: 1.15em; width: auto; vertical-align: -0.2em; }
.emoji-row { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.8rem; font-size: 0.85rem; color: var(--muted); }
.emoji-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.emoji-line .emo { height: 1.6em; }
.gif-attrib { display: block; font-size: 0.65rem; }
/* composer ＋ menu: attach / GIF / emoji consolidated, popover opens upward */
.composer-menu { position: absolute; right: 2.4rem; bottom: 0.4rem; }
.composer-menu > summary { list-style: none; cursor: pointer; color: var(--accent);
                           font-size: 1.1rem; line-height: 1; user-select: none; }
.composer-menu[open] > summary { color: var(--fg); }
.composer-menu-items { position: absolute; bottom: 1.7rem; right: 0; z-index: 20;
                       display: flex; gap: 0.7rem; align-items: center; white-space: nowrap;
                       background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
                       padding: 0.35rem 0.6rem; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.composer-menu label.attach { position: static; }
.gif-btn { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-decoration: none;
           border: 1px solid var(--line); border-radius: 3px; padding: 0 0.25rem; }
.gif-btn:hover { color: var(--accent); border-color: var(--accent); }
.emoji-btn { font-size: 0.95rem; text-decoration: none; line-height: 1; filter: grayscale(0.6); }
.emoji-btn:hover { filter: none; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; max-height: 14rem; overflow-y: auto; }
.emoji-grid form { margin: 0; }
.emoji-cell { margin: 0; padding: 0.15rem 0.3rem; font-size: 1.25rem; line-height: 1.2;
              background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.emoji-cell:hover { border-color: var(--accent); background: var(--bg); }
.emoji-cell .emo { height: 1.25em; }
.gif-picker { flex-basis: 100%; border: 1px solid var(--line); border-radius: 4px;
              background: var(--pane); padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; }
.gif-search { display: flex; gap: 0.4rem; align-items: center; }
.gif-search input[type="search"] { margin: 0; flex: 1; }
.gif-search button { margin: 0; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
            gap: 0.4rem; margin-top: 0.5rem; }
.gif-grid form { margin: 0; }
.gif-grid button { margin: 0; padding: 0; border: 1px solid var(--line); background: none;
                   border-radius: 3px; cursor: pointer; width: 100%; line-height: 0; }
.gif-grid button:hover { border-color: var(--accent); }
.gif-grid img { width: 100%; height: 5.5rem; object-fit: cover; border-radius: 3px; }
.klipy-attrib { margin-top: 0.4rem; }
.react-add > summary { color: var(--muted); cursor: pointer; padding: 0 0.3rem; list-style: none; }
.composer { position: relative; flex: 1; }
.composer textarea { padding-right: 4.6rem; resize: none; overflow-y: auto;
                     max-height: calc(1.45em * 10 + 0.9rem); /* 10 lines, then scroll */ }
.send-btn { position: absolute; right: 0.5rem; bottom: 0.42rem; margin: 0; padding: 0.1rem 0.3rem;
            background: none; border: none; color: var(--accent); cursor: pointer; line-height: 0; }
.send-btn:hover { color: var(--fg); }
label.attach { position: absolute; right: 2.6rem; bottom: 0.5rem; cursor: pointer;
               color: var(--muted); line-height: 0; }
label.attach:hover { color: var(--accent); }
label.attach.has-file { color: var(--accent); }
label.attach.has-file::after { content: "✓"; font-size: 0.7rem; line-height: 1;
                               position: absolute; top: -0.4rem; right: -0.5rem; }
label.attach input[type="file"] { display: none; }

.layout-chat { display: grid; grid-template-areas: "chans main"; grid-template-columns: auto 1fr; gap: 1.4rem; }
.layout-chat.thread-open { grid-template-areas: "chans main thread"; grid-template-columns: auto 1fr clamp(19rem, 26vw, 30rem); }

/* two-level channel rail: groups | this group's channels (by topic) */
.rails-toggle { display: none; }
.rails-btn { cursor: pointer; color: var(--accent); user-select: none; font-size: 1.1rem; }
.rails { grid-area: chans; display: grid; grid-template-columns: auto auto; align-self: start; }
.group-rail { display: flex; flex-direction: column; gap: 0.15rem; padding-right: 0.5rem; border-right: 1px solid var(--line); max-width: 8rem; }
.group-rail a.grp { color: var(--fg); text-decoration: none; font-size: 0.8rem; padding: 0.25rem 0.4rem; border-left: 2px solid transparent; overflow-wrap: anywhere; }
.group-rail a.grp.current { border-left-color: var(--accent); color: var(--accent); font-weight: 700; }
.chan-rail { padding: 0 0.7rem; min-width: 9rem; border-right: 1px solid var(--line); }
.rail-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.4rem; }
.chan-group-name { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0.6rem 0 0.15rem; }
.chan { padding: 0.12rem 0 0.12rem 0.5rem; }
.chan a { color: var(--fg); text-decoration: none; }
.chan.current { border-left: 2px solid var(--accent); padding-left: 0.4rem; }
.chan.current a { color: var(--accent); font-weight: 700; }
/* desktop: visible by default, ☰ hides */
.rails-toggle:checked ~ .rails { display: none; }

/* the chat pane: fixed-height scroll, bottom-anchored without JS —
   column-reverse + newest-first DOM keeps scroll pinned to the latest */
.layout-chat .slot-main { grid-area: main; min-width: 0; }
.chan-head { display: flex; gap: 0.8rem; align-items: baseline; flex-wrap: wrap; }
.chan-head h2 { margin: 0; }
.chat-pane {
  display: flex; flex-direction: column-reverse;
  overflow-y: auto;
  /* track the window: viewport minus header/channel-head/composer/footer chrome */
  height: max(20rem, calc(100vh - 16.5rem));
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--pane);
  padding: 0.5rem 0.7rem; margin-top: 0.5rem;
}
.thread-pane { height: max(14rem, calc(100vh - 23rem)); }
.msg-form { margin-top: 0.4rem; display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.attach-preview { flex-basis: 100%; display: flex; align-items: center; gap: 0.6rem;
                  padding: 0.35rem 0.6rem; border: 1px dashed var(--accent); border-radius: 4px;
                  background: var(--pane); font-size: 0.8rem; }
.attach-preview img { max-height: 2.6rem; max-width: 4rem; border-radius: 3px; }
.attach-remove { margin: 0 0 0 auto; padding: 0 0.45rem; background: none;
                 color: var(--muted); border: 1px solid var(--line); }
.attach-remove:hover { color: var(--accent); border-color: var(--accent); }
.msg-form textarea { margin: 0; }
.msg-form button { margin: 0; }

/* thread flyout */
.slot-thread { grid-area: thread; border-left: 2px solid var(--accent); padding-left: 0.8rem; }
.thread-head { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.thread-close { text-decoration: none; color: var(--muted); }
.thread-root { border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; margin-bottom: 0.4rem; }
.threads-btn { margin-left: auto; font-size: 0.8rem; color: var(--muted); text-decoration: none;
               border: 1px solid var(--line); border-radius: 3px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.threads-btn:hover { color: var(--accent); border-color: var(--accent); }
.menu-btn { margin-left: 0.6rem; }
.newdot { color: var(--accent); font-size: 0.7rem; }
.thread-item { display: block; padding: 0.45rem 0.5rem; margin-bottom: 0.3rem;
               border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.thread-item .thread-snip { display: block; color: var(--fg); font-size: 0.85rem;
                            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item.unread { border-left: 3px solid var(--accent); }
.thread-item:hover { border-color: var(--accent); }
.msg-body .q, .body .q { color: var(--muted); border-left: 2px solid var(--line);
                         padding-left: 0.45rem; display: inline-block; }

@media (max-width: 50rem) {
  .layout-chat, .layout-chat.thread-open {
    grid-template-areas: "thread" "main";
    grid-template-columns: 1fr;
  }
  /* rail: closed by default; ☰ opens a full-height left overlay */
  .rails { display: none; }
  .rails-toggle:checked ~ .rails {
    display: grid; position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    width: min(85vw, 24rem); height: 100dvh;
    background: var(--bg); padding: 1rem; overflow-y: auto; align-content: start;
    border-right: 2px solid var(--accent); box-shadow: 2px 0 14px rgba(0,0,0,0.35);
  }
  .rails-close { display: block; grid-column: 1 / -1; cursor: pointer;
                 color: var(--muted); text-align: right; }

  .chat-pane { height: 50vh; }
  .thread-pane { height: 36vh; }
}

/* mobile chat = full app surface: chrome collapses to "group › #channel" + ☰ */
@media (max-width: 50rem) {
  body:has(main.chat-app) header { padding: 0; border: none; }
  body:has(main.chat-app) .site-menu { display: none; }
  body:has(main.chat-app) #menu-toggle:checked ~ .site-menu {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
    position: fixed; inset: 0; z-index: 70;
    background: var(--bg); padding: 1.2rem; overflow-y: auto;
  }
  body:has(main.chat-app) #menu-toggle:checked ~ .site-menu .menu-close {
    display: block; align-self: flex-end; font-size: 1.1rem;
  }
  body:has(main.chat-app) #menu-toggle:checked ~ .site-menu .searchbox { margin-left: 0; }
  body:has(main.chat-app) footer { display: none; }
  body:has(main.chat-app) .menu-btn { display: inline; }
  body:has(main.chat-app) .chan-meta { display: none; }
  body:has(main.chat-app) main.chat-app { padding: 0.4rem 0.6rem; }
  body:has(main.chat-app) .chan-head { gap: 0.4rem; }
  body:has(main.chat-app) .chan-head h2 { font-size: 1rem; }
  body:has(main.chat-app) .chat-pane {
    height: calc(100vh - 10.5rem);
    height: calc(100dvh - 10.5rem);
  }
  /* open thread takes the whole screen; ✕ returns to the channel */
  body:has(main.chat-app) .layout-chat.thread-open .slot-main { display: none; }
  body:has(main.chat-app) .thread-pane {
    height: calc(100vh - 14rem);
    height: calc(100dvh - 14rem);
  }
}

/* ---- page layouts: one grid rule per page ---- */
.layout-frontpage {
  display: grid;
  grid-template-areas: "main side";
  grid-template-columns: 1fr 16rem;
  gap: 1.5rem;
}
.layout-frontpage .slot-main { grid-area: main; }
.layout-frontpage .slot-side { grid-area: side; }
@media (max-width: 40rem) {
  .layout-frontpage {
    grid-template-areas: "main" "side";
    grid-template-columns: 1fr;
  }
}