/* Veil chat (veil.rip/chat/): the Discord layout drawn with the directory's system (design/DESIGN.md, tokens.css). The
   tokens, the bar, the footer, the buttons, the chips, the ledger line (.chain/.step), the stamp (.answer) and the slide
   (.rv) come from /assets/app.css and /assets/session.css on the same origin; this sheet only lays out the chat. The
   decisions, with what of Discord is kept and why, are in design/chat-2026-10-31.md.

   The frame, four columns under the directory's bar (49px with its rule):
     rail 72 | side 240 | lead (the open view) | people 240
   The rail, the side and the people sit on the ground; the lead is the screen's one surface (--surface, radius 14), the
   record the screen is about: the conversation. At 1100px and less the people become a drawer over the lead; at 760px
   and less one pane shows at a time (the rail with the channels, or the lead), as on the phone apps.
   Two ways of scrolling: the channel view is the window's height and scrolls inside its message list; every other view
   (home, settings, invite, threads, boards) scrolls the window, with the rail and the side held under the bar. */

/* ---------- the bar spans the window: the chat is full width, so the bar's ends sit over the rail and the people ---------- */
.chat .bar-inner { max-width: none; padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); }
/* five links instead of four (Search, Verify, Chat, Log, API): where the bar runs short the search gives way 46px earlier */
@media (min-width: 901px) and (max-width: 1100px) { .chat .bar-right .search { width: clamp(160px, calc(100vw - 680px), 392px); } }
@media (min-width: 1101px) and (max-width: 1240px) { .chat .bar-right .search { width: clamp(220px, calc(100vw - 840px), 392px); } }

/* the keyboard's ring in the ink, as the directory's menus have it: in the chat the accent means one thing, a name whose
   signature this browser checked, and a blue ring around a channel or a member would say it of the wrong thing */
.chat :focus-visible { outline-color: var(--text); }

/* ---------- the frame ---------- */
.app {
  --bar: 49px;
  display: grid; grid-template-columns: 72px 240px minmax(0, 1fr) 240px; grid-template-areas: "rail side lead people";
  min-height: calc(100dvh - var(--bar));
}
.app[data-view="channel"] { height: calc(100dvh - var(--bar)); }
.rail, .side { position: sticky; top: var(--bar); height: calc(100dvh - var(--bar)); min-width: 0; }
.lead { grid-area: lead; position: relative; min-width: 0; margin: 0 var(--s2) var(--s2) 0; border-radius: var(--radius-card); background: var(--surface); outline: none; }
.app[data-view="channel"] .lead { display: flex; flex-direction: column; overflow: hidden; height: calc(100dvh - var(--bar) - var(--s2)); }
.app:not([data-view="channel"]) .lead { padding: var(--s5) var(--pad-x) var(--s7); }
.people { grid-area: people; position: sticky; top: var(--bar); height: calc(100dvh - var(--bar)); min-width: 0; overflow-y: auto; padding: 0 var(--s2) var(--s4) 0; scrollbar-width: thin; border-left: 1px solid var(--rule); } /* the hairline marks where the messages end and the members begin */
.app[data-people="off"] { grid-template-columns: 72px 240px minmax(0, 1fr) 0; }
.app[data-people="off"] .people { display: none; }

/* ---------- placeholders: the places the data will take (flat bars at their real size, no shimmer) ---------- */
.skel-line.w120 { width: 120px; }
.skel-line { display: inline-block; height: 12px; border-radius: var(--radius-small); background: var(--active); vertical-align: middle; }
.rail-skel { width: 40px; height: 40px; margin: 0 auto; border-radius: var(--radius-nested); background: var(--panel); }
.chan-skel { height: 32px; margin: 0 var(--s2); }
.chan-skel::before { content: ""; display: block; width: 60%; height: 12px; margin-top: 10px; margin-left: 32px; border-radius: var(--radius-small); background: var(--panel); }
.view-skel .skel-head { height: 56px; border-bottom: 1px solid var(--rule); }
.app:not([data-view="channel"]) .view-skel .skel-head { display: none; }
.nojs { padding: var(--s5) var(--pad-x); }
.nojs h1 { font-size: var(--fs-title); line-height: var(--lh-title); }
.nojs p { margin-top: var(--s3); color: var(--muted); max-width: 60ch; }

/* ---------- the rail: the servers, a ledger tick at the left edge for where you are and what is unread ---------- */
.rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3) 0; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-list { display: flex; flex-direction: column; gap: var(--s2); width: 100%; margin: 0; padding: 0; list-style: none; }
.rail-item { position: relative; display: grid; place-items: center; width: 72px; height: 40px; flex: none; }
.rail-item::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 2px; height: 24px; border-radius: 0 2px 2px 0; background: var(--text);
  transform: scaleY(0); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.rail-item.unread::before { transform: scaleY(0.34); background: var(--muted); }
@media (hover: hover) { .rail-item:hover::before { transform: scaleY(0.67); background: var(--muted); } }
.rail-item[aria-current="page"]::before { transform: scaleY(1); background: var(--text); }
.rail-icon {
  display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-nested);
  background: var(--panel); color: var(--muted); font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.01em;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.rail-icon svg { width: 18px; height: 18px; }
.rail-icon img { display: block; width: 40px; height: 40px; object-fit: cover; }
.rail-item[aria-current="page"] .rail-icon { background: var(--active); color: var(--text); }
@media (hover: hover) { .rail-item:hover .rail-icon { background: var(--active); color: var(--text); } }
.rail-item:focus-visible { outline: none; }
.rail-item:focus-visible .rail-icon { outline: 2px solid var(--text); outline-offset: 2px; }
.rail-tool .rail-icon { background: transparent; box-shadow: inset 0 0 0 1px var(--control); } /* taste-skill-ignore: the outlined secondary, as .btn */
.rail-sep { flex: none; width: 32px; height: 1px; background: var(--rule); }
/* the two tools (start a server, Discover) stand at the rail's foot, so the list above them can arrive without moving them */
.rail-tools { display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 100%; margin-top: auto; padding-top: var(--s2); }
/* a count that asks for something (mentions of you): the number in the inverted ink, a step cut out of the ground */
.need {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; flex: none; border-radius: var(--round);
  background: var(--primary); color: var(--primary-ink); font: 600 var(--fs-small)/18px var(--font); font-variant-numeric: tabular-nums;
}
.rail-item .need { position: absolute; right: 12px; bottom: -4px; outline: 3px solid var(--ground); }
/* the name of a server or a tool, beside the rail while it is pointed at or focused (one element, placed by the script) */
.tip {
  position: fixed; z-index: 30; max-width: 240px; padding: var(--s2) var(--s3); border-radius: var(--radius-small);
  background: var(--surface); color: var(--text); font: 500 var(--fs-body)/var(--lh-body) var(--font); pointer-events: none;
  box-shadow: var(--shadow-float); /* taste-skill-ignore: it floats */
}
.tip[hidden] { display: none; }
.tip .tip-sub { display: block; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 400; }

/* ---------- the side: the server's name and its channels, or the home's places ---------- */
.side { grid-area: side; display: flex; flex-direction: column; }
.side-head { flex: none; display: flex; align-items: center; gap: var(--s2); height: 56px; padding: 0 var(--s2) 0 var(--s4); }
.side-title { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.side-menu-btn { position: relative; }
.side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s2) var(--s4); scrollbar-width: thin; }
.chan {
  position: relative; display: flex; align-items: center; gap: var(--s2); height: 32px; padding: 0 var(--s2); border-radius: var(--radius-small);
  color: var(--muted); font-weight: 500; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.chan + .chan { margin-top: 2px; }
.chan > svg { width: 16px; height: 16px; color: var(--faint); }
.chan:hover { background: var(--panel); color: var(--text); }
.chan[aria-current="page"] { background: var(--active); color: var(--text); }
.chan[aria-current="page"] > svg { color: var(--muted); }
.chan.unread { color: var(--text); font-weight: 600; }
.chan.unread::before { content: ""; position: absolute; left: calc(-1 * var(--s2)); top: 12px; width: 2px; height: 8px; border-radius: 0 2px 2px 0; background: var(--text); }
.chan-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan:focus-visible { outline-offset: -2px; }
.cat { display: flex; align-items: center; gap: var(--s1); width: 100%; height: 28px; margin-top: var(--s4); padding: 0 var(--s2) 0 var(--s1); border: 0; background: none; color: var(--muted); font: 500 var(--fs-small)/var(--lh-small) var(--font); cursor: pointer; text-align: left; }
.cat:hover { color: var(--text); }
.cat svg { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease-out); }
.cat[aria-expanded="false"] svg { transform: rotate(-90deg); }
.cat-list[hidden] { display: none; }
.side-note { padding: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.side-foot { flex: none; flex-direction: column; align-items: flex-start; gap: var(--s2); margin: 0; padding: var(--s3) var(--s4) var(--s4); }
.side-foot > p:first-child { color: var(--muted); }
.side-foot .foot-u { gap: var(--s1) var(--s3); }
.side-foot > * { max-width: 100%; }
.side-foot .foot-u a[data-canary] { min-width: 0; }

/* ---------- menus that float: the server's menu, a message's "More" ---------- */
.menu {
  position: absolute; z-index: 22; min-width: 220px; padding: var(--s2); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: var(--shadow-float); /* taste-skill-ignore: the menu floats */
}
.menu[hidden] { display: none; }
.menu [role="menuitem"] {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--radius-small);
  background: none; color: var(--text); font: 500 var(--fs-body)/var(--lh-body) var(--font); text-align: left; cursor: pointer;
}
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--active); outline: none; }
.menu [role="menuitem"] svg { width: 16px; height: 16px; color: var(--muted); }
.menu .menu-sep { height: 1px; margin: var(--s2) var(--s1); background: var(--rule); }
@media (prefers-reduced-motion: no-preference) {
  .menu, .tip, .hover-card, .mention-ta { transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  @starting-style { .menu:not([hidden]), .hover-card:not([hidden]), .mention-ta:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
}

/* ---------- the channel view: its head, the messages, the composer ---------- */
.ch-head { flex: none; display: flex; align-items: center; gap: var(--s3); height: 56px; padding: 0 var(--s2) 0 var(--pad-x); border-bottom: 1px solid var(--rule); }
.ch-head h1 { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }
.ch-head h1 svg { width: 18px; height: 18px; color: var(--faint); }
.ch-head h1 span { overflow: hidden; text-overflow: ellipsis; }
.ch-topic { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.ch-tools { display: flex; gap: var(--s1); margin-left: auto; flex: none; }
.ch-tools .icon-btn, .side-head .icon-btn, .ch-back { width: 32px; height: 32px; }
.ch-tools .icon-btn svg, .side-head .icon-btn svg, .ch-back svg { width: 16px; height: 16px; }
.icon-btn[aria-pressed="true"] { background: var(--active); color: var(--text); }
.ch-back { display: none; }
.ch-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* the list: a window of rows over spacers (list.js), anchored by hand, so the browser's own anchoring is off */
.msgs { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
.msgs:focus-visible { box-shadow: inset 0 0 0 2px var(--control-hover); } /* taste-skill-ignore: the list's keyboard focus */
.feed { padding: 0; }
.feed::after { content: ""; display: block; height: var(--s3); }
.feed > .row { display: flow-root; }
.feed > .sp { height: 0; }
.feed-top { padding: var(--s5) var(--pad-x) var(--s4); }
.feed-top h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.feed-top.quiet { padding-top: var(--s4); padding-bottom: 0; }
.feed-top p { margin-top: var(--s1); color: var(--muted); max-width: 60ch; }
.feed-more { display: flex; align-items: center; justify-content: center; height: 40px; color: var(--muted); font-size: var(--fs-small); }

/* a message: the avatar in the gutter of the first of a run, the name with its address, the time; the body as signed */
.m { position: relative; padding: 2px 64px 2px calc(var(--pad-x) + 40px + var(--s4)); outline: none; }
.m.head { margin-top: var(--s4); padding-top: var(--s1); }
.m:hover, .m:focus-within, .m.open { background: var(--raised); }
.m:focus-visible { box-shadow: inset 2px 0 0 var(--text); } /* taste-skill-ignore: the keyboard's place in the feed */
.m.me-mentioned { box-shadow: inset 2px 0 0 var(--text); background: var(--raised); } /* taste-skill-ignore: a message that names you: the ink tick */
.m-av { position: absolute; left: var(--pad-x); top: var(--s1); display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 0; padding: 0; border-radius: 50%; background: var(--person-bg); color: var(--person-ink); font: 600 var(--fs-body)/1 var(--font); cursor: pointer; }
.m-av img { display: block; width: 40px; height: 40px; object-fit: cover; }
.m-av.p1, .pic.p1 { background: var(--p1-bg); color: var(--p1-ink); }
.m-av.p2, .pic.p2 { background: var(--p2-bg); color: var(--p2-ink); }
.m-av.p3, .pic.p3 { background: var(--p3-bg); color: var(--p3-ink); }
.m-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); min-width: 0; min-height: var(--lh-body); white-space: nowrap; }
.m-name { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 0; border: 0; background: none; color: var(--text); font: 600 var(--fs-body)/var(--lh-body) var(--font); text-overflow: ellipsis; cursor: pointer; transition: color var(--t-slow) var(--ease-out); }
.m-name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the one accent of the message: its author's name, once this browser has checked the signature against the card's keys */
.m-name.ok { color: var(--accent); }
.m-addr, .m-time { flex: none; color: var(--faint); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.m-addr:hover { color: var(--text); }
.m-orgs { display: inline-flex; gap: var(--s1); align-self: center; flex: none; }
.m-orgs .org-sq { align-self: center; }
/* the number after a name that two people here share (31 October 2026): quiet, in mono like the codes it is */
.twin { flex: none; margin-left: 4px; color: var(--faint); font: 400 var(--fs-small)/var(--lh-small) var(--mono); letter-spacing: 0; white-space: nowrap; } /* taste-skill-ignore: a card's number, read as a code */
.m-h .twin { margin-left: calc(-1 * var(--s1)); }
.mention .twin { margin-left: 3px; }
.m-verdict { flex: none; color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.m-body { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.m-body p + p { margin-top: var(--s1); }
.m.bad .m-body { color: var(--pill-warning-ink); }
.m.sending .m-body { color: var(--muted); }
.m.failed .m-body { color: var(--pill-negative-ink); }
.m-gut { position: absolute; left: var(--pad-x); top: 2px; width: 40px; color: var(--faint); font-size: 11px; line-height: var(--lh-body); text-align: center; font-variant-numeric: tabular-nums; visibility: hidden; } /* taste-skill-ignore: the hover time in the gutter, as Discord's */
.m:hover .m-gut, .m:focus-within .m-gut { visibility: visible; }
.m-state { display: block; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.m.failed .m-state { color: var(--pill-negative-ink); }
.m-state .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); }
/* the text the signature covers: inline marks only, every one built from text nodes (text.js) */
.m-body code, .md code { padding: 1px 4px; border-radius: 4px; background: var(--active); font-family: var(--mono); font-size: 12px; } /* taste-skill-ignore: code people wrote */
.m-body pre, .md pre { margin: var(--s1) 0; padding: var(--s2) var(--s3); overflow-x: auto; border-radius: var(--radius-small); background: var(--active); font-family: var(--mono); font-size: 12px; line-height: 18px; white-space: pre; } /* taste-skill-ignore: code people wrote */
.m-body pre code, .md pre code { padding: 0; background: none; }
.m-body blockquote, .md blockquote { margin: 0; padding-left: var(--s3); box-shadow: inset 2px 0 0 var(--control); color: var(--muted); } /* taste-skill-ignore: a quote's bar */
.m-body a.ext, .md a.ext { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); overflow-wrap: anywhere; }
.m-body a.ext:hover, .md a.ext:hover { text-decoration-color: var(--text); }
.mention {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 0 4px; border-radius: 4px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
  font-weight: 500; white-space: nowrap; transition: background-color var(--t-fast) var(--ease-out);
}
.mention:hover, .mention:focus-visible { background: var(--active-hover); }
.mention .mention-addr { color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.mention.me { box-shadow: inset 0 0 0 1px var(--control-hover); } /* taste-skill-ignore: you, named */

/* the actions of a message: a small bar that floats at its top right while it is pointed at or focused */
.m-tools { position: absolute; z-index: 3; top: -14px; right: var(--s4); display: none; gap: 2px; padding: 2px; border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--shadow-float); } /* taste-skill-ignore: it floats over the message */
.m:hover .m-tools, .m:focus-within .m-tools, .m.open .m-tools { display: flex; }
.m-tools .icon-btn { width: 28px; height: 28px; }
.m-tools .icon-btn svg { width: 15px; height: 15px; }
.m-tools .icon-btn.done { color: var(--positive); }
:root[data-theme="light"] .m-tools { box-shadow: var(--shadow-float), 0 0 0 1px var(--rule); } /* taste-skill-ignore: its edge on white */

/* the proof of one message, opened in place under it: the ledger line of the check, then the signed text as bytes */
.m-proof > .rv-in { padding-top: var(--s2); padding-bottom: var(--s3); }
.m-proof .chain { margin-top: var(--s2); }
.chain.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chain.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step.warn { --line: var(--warning); }
.m-proof .proof-foot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; margin-top: var(--s3); }
.m-proof .proof-foot .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); }
.m-proof .bytes { margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--radius-small); background: var(--surface); font-family: var(--mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; } /* taste-skill-ignore: the exact bytes the key signed */

/* the dividers of the list: a day, and where what you have not read begins */
/* a day, and where what you have not read begins, drawn as stations of the ledger line: the hairline across the column, a
   2 x 12 px tick where the station starts, its name above the line beside the tick; "New" is the same station in the ink */
.m-day, .m-new { position: relative; margin: var(--s5) var(--pad-x) 0; padding: 0 0 var(--s1) var(--s3); border-bottom: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.m-day::before, .m-new::before { content: ""; position: absolute; left: 0; bottom: -6px; width: 2px; height: 12px; background: var(--control); }
.m-new { margin-top: var(--s4); border-bottom-color: var(--text); color: var(--text); font-weight: 600; }
.m-new::before { background: var(--text); }

/* the bars that float over the list: what is new above, and the way back to the present below */
.bar-new {
  position: absolute; z-index: 4; top: var(--s2); left: var(--s4); right: var(--s4); display: flex; align-items: center; gap: var(--s3);
  height: 32px; padding: 0 var(--s2) 0 var(--s3); border-radius: var(--radius-nested); background: var(--active); color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small);
}
.bar-new[hidden], .to-present[hidden] { display: none; }
.bar-new .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.bar-new .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); }
.to-present {
  position: absolute; z-index: 4; right: var(--s4); bottom: var(--s3); display: inline-flex; align-items: center; gap: var(--s2); height: 32px; padding: 0 var(--s3);
  border: 0; border-radius: var(--round); background: var(--primary); color: var(--primary-ink); font: 500 var(--fs-small)/var(--lh-small) var(--font); cursor: pointer;
  box-shadow: var(--shadow-float); /* taste-skill-ignore: it floats over the list */
}
.to-present svg { width: 14px; height: 14px; }

/* the composer: one field on the raised step, Enter sends; what others type and the count live in a line that is always there */
.composer { flex: none; padding: 0 var(--s4); }
.comp-box { position: relative; display: flex; align-items: flex-end; min-height: 44px; border-radius: var(--radius-nested); background: var(--raised); }
.comp-box:focus-within { box-shadow: inset 0 0 0 1px var(--control); } /* taste-skill-ignore: the field's focus */
.comp-box textarea {
  display: block; flex: 1; min-width: 0; min-height: 44px; max-height: 40vh; field-sizing: content; margin: 0; padding: 12px 0 12px var(--s4); border: 0; resize: none; overflow-y: hidden;
  background: none; color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--font); outline: none;
}
.comp-box textarea::placeholder { color: var(--faint); }
.comp-send { flex: none; width: 36px; height: 36px; margin: 4px; color: var(--faint); }
.comp-send svg { width: 16px; height: 16px; }
.comp-box:has(textarea:not(:placeholder-shown)) .comp-send { color: var(--text); }
/* the send arrow only when there is something to send (Enter sends anyway); its place is kept, so the field never moves */
.comp-box:has(textarea:placeholder-shown) .comp-send { visibility: hidden; }
.comp-meta { display: flex; align-items: center; gap: var(--s3); height: 28px; padding: 0 var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.comp-typing { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-count { flex: none; min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; color: var(--faint); }
.comp-count.near { color: var(--pill-warning-ink); }
.comp-count.over { color: var(--pill-negative-ink); }
.comp-closed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: 44px; padding: var(--s2) var(--s4); border-radius: var(--radius-nested); background: var(--raised); color: var(--muted); }
.comp-closed .grow { flex: 1; min-width: 200px; }
.comp-err { color: var(--pill-negative-ink); }

/* the mention type-ahead above the composer: the directory's suggestion rows (session.css .ta-opt), in a list that floats */
.mention-ta { position: absolute; z-index: 25; left: 0; right: 0; bottom: calc(100% + var(--s2)); max-height: 320px; overflow-y: auto; padding: var(--s2); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-float); } /* taste-skill-ignore: it floats */
:root[data-theme="light"] .mention-ta { box-shadow: var(--shadow-float), 0 0 0 1px var(--rule); } /* taste-skill-ignore: its edge on white */
.mention-ta[hidden] { display: none; }
.mention-ta .ta-opt { cursor: pointer; }

/* ---------- people: the members by role, each with the number beside the name ---------- */
.people-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s2); height: 56px; padding: 0 var(--s2) 0 var(--s4); background: var(--ground); }
.people-head h2 { flex: 1; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.people-close { display: none; }
.role-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: var(--s4) 0 var(--s1); padding: 0 var(--s3) 0 var(--s4); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.role-h .fig { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* the group's figure, at the column's edge */
.role-h:first-of-type { margin-top: 0; }
.mem {
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 44px; padding: var(--s1) var(--s2) var(--s1) var(--s4); border: 0; border-radius: var(--radius-small);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease-out);
}
.mem:hover, .mem[aria-expanded="true"] { background: var(--panel); }
.mem:focus-visible { outline-offset: -2px; }
.pic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; overflow: hidden; border-radius: 50%; background: var(--person-bg); color: var(--person-ink); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic.s24 { width: 24px; height: 24px; font-size: 11px; } /* taste-skill-ignore: initials in a 24px disc, as .pic24 */
.pic.s56 { width: 56px; height: 56px; font-size: 18px; } /* taste-skill-ignore: the initials of a 56px avatar, as .avatar */
.pic.srv { border-radius: var(--radius-nested); background: var(--active); color: var(--text); }
.pic.srv.s56 { border-radius: var(--radius-card); }
.mem-txt { display: grid; min-width: 0; flex: 1; }
.mem-name { display: flex; align-items: center; gap: var(--s1); min-width: 0; font-weight: 500; }
.mem-name > bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-addr { overflow: hidden; color: var(--faint); font-size: var(--fs-small); line-height: var(--lh-small); text-overflow: ellipsis; white-space: nowrap; }
.org-sq { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; overflow: hidden; border-radius: var(--radius-small); background: var(--active); color: var(--text); font-size: 11px; font-weight: 600; } /* taste-skill-ignore: a 20px organisation mark beside a name, 11px initials */
.org-sq img { display: block; width: 100%; height: 100%; object-fit: contain; }
.org-sq.s24 { width: 24px; height: 24px; border-radius: var(--radius-small); font-size: var(--fs-small); }

/* ---------- a card in short: the hover card (floats) and the profile drawer (a sheet over the right side) ---------- */
.hover-card {
  position: fixed; z-index: 28; width: 320px; max-width: calc(100vw - 32px); padding: var(--s4); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: var(--shadow-float); /* taste-skill-ignore: it floats */
}
:root[data-theme="light"] .hover-card { box-shadow: var(--shadow-float), 0 0 0 1px var(--rule); } /* taste-skill-ignore: its edge on white */
.hover-card[hidden] { display: none; }
.cs-top { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.cs-who { display: grid; min-width: 0; }
.cs-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); font-weight: 600; overflow-wrap: anywhere; }
/* the card's address, where a person is opened: prominent, a link to the card, beside "Open the card" */
.cs-addr { margin-top: 2px; color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.cs-addr .cs-alias { color: var(--muted); font-size: var(--fs-small); }
.cs-badges { display: inline-flex; align-items: center; gap: var(--s1); height: 24px; padding: 0 var(--s1); border-radius: var(--round); background: var(--panel); }
:root[data-theme="light"] .cs-badges { background: var(--active); }
.cs-badges img { display: block; width: 18px; height: 18px; }
.cs-links { display: grid; gap: var(--s1); margin-top: var(--s3); }
.cs-link { display: flex; align-items: center; gap: var(--s2); min-width: 0; color: var(--text); }
.cs-link svg { width: 16px; height: 16px; color: var(--muted); }
.cs-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-link .how { flex: none; color: var(--faint); font-size: var(--fs-small); }
.cs-none { margin-top: var(--s3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4); }

.drawer {
  position: fixed; z-index: 26; top: var(--bar, 49px); right: 0; bottom: 0; width: 340px; max-width: 100vw; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s5) var(--pad-x) var(--s6); background: var(--raised); border-left: 1px solid var(--rule); box-shadow: var(--shadow-dialog); /* taste-skill-ignore: a sheet opened over the page; the raised ground and the hairline set it apart from the column behind it (31 October 2026) */
}
.drawer[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .drawer { transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out); }
  @starting-style { .drawer:not([hidden]) { transform: translateX(16px); opacity: 0; } }
  @media (max-width: 760px) { @starting-style { .drawer:not([hidden]) { transform: translateY(24px); opacity: 0; } } }
}
/* the profile: the card's status as the panel's stamp (the one large thing of the panel), then its ledger line standing up as
   on a phone, one station a row: the name, the figure, the 2px line that turns to the accent when this browser verified it */
.drawer .pf-status .answer { margin-top: var(--s5); }
.drawer .answer.quiet { color: var(--text); }
.drawer .answer.bad { color: var(--pill-negative-ink); }
ol.chain.mini { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
.chain.mini .step { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; padding: 2px 0 var(--s2) var(--s4); border-left: 2px solid var(--line); transition: border-color var(--t-slow) var(--ease-out); }
.chain.mini .step:last-child { padding-bottom: 2px; }
.chain.mini .step::before { left: -2px; top: 11px; width: 12px; height: 2px; }
.chain.mini .step .k { grid-row: auto; padding: 0; border: 0; white-space: nowrap; }
.chain.mini .step .v, .chain.mini .step:last-child .v { margin: 0; padding: 0; border: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; font-variant-numeric: tabular-nums; }
.cs-keys { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pf-line { color: var(--text); }
.pf-line.warn, .reg .r.warn { color: var(--pill-warning-ink); }
.pf-list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.pf-list li { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.pf-list img { flex: none; }
.pf-sub { color: var(--muted); font-size: var(--fs-small); }
.pf-keys .s.mono { font-family: var(--mono); font-size: 12px; } /* taste-skill-ignore: a key, short */
.pf-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s6); }
.pf-out { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.need-card a.inline { color: var(--text); }
.drawer:focus, .drawer:focus-visible { outline: none; } /* the panel takes the focus to be read from its start; its controls show theirs */
.drawer-close { position: absolute; top: var(--s3); right: var(--s3); width: 32px; height: 32px; }
.drawer .cs-top { padding-right: var(--s6); }
.drawer h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.drawer section { margin-top: var(--s6); }
.drawer section > h3 { margin-bottom: var(--s2); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.drawer .answer { margin-top: var(--s5); font-size: 26px; line-height: 30px; } /* the stamp at its phone size: the panel is 340px wide */
.drawer .answer.warn { color: var(--pill-warning-ink); }
.drawer .finding { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.reg { margin: 0; padding: 0; list-style: none; }
.reg > li { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.reg > li:last-child { border-bottom: 1px solid var(--rule); }
.reg .grow { flex: 1; min-width: 0; }
.reg .t { font-weight: 500; overflow-wrap: anywhere; }
.reg .s { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); overflow-wrap: anywhere; }
.reg > li > svg { width: 16px; height: 16px; color: var(--faint); }
.reg .row-acts { display: flex; flex: none; gap: var(--s4); }
.reg .r { flex: none; color: var(--muted); font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums; }
.reg-h { display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.reg-h + .reg > li:first-child { border-top-color: var(--rule); }
/* the figure columns: the same width in the head and the rows, so a number sits under its name */
.reg-h .r, .vsec > .reg .r { min-width: 72px; text-align: right; }
.reg-h .r, .reg-h .grow { flex: none; }
.reg-h .grow { flex: 1; }
.vsec > .reg .r { color: var(--text); font-size: var(--fs-body); }
.reg .r-date, .reg-h .r-date { min-width: 96px; }
.reg .r-act, .reg-h .r-act { flex: none; display: flex; justify-content: flex-end; width: 64px; }
.reg .r .r-n { color: var(--muted); font-size: var(--fs-small); }
.reg .r .need + .r-n { margin-left: var(--s2); }

/* ---------- views that read like pages: home, discover, invite, threads, boards, settings ---------- */
.page-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); }
.page-h h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.page-h .page-sub { margin-top: var(--s1); color: var(--muted); }
.stamp-row { margin-top: var(--s2); }
.stamp-row .answer.warn { color: var(--pill-warning-ink); }
.stamp-row .answer.bad { color: var(--pill-negative-ink); }
.stamp-row .finding { margin-top: var(--s2); color: var(--muted); max-width: 64ch; }
.vsec { margin-top: var(--sec-gap); }
.vsec > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); margin-bottom: var(--s3); }
.vsec h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; letter-spacing: -0.005em; }
.vsec .sub { margin-top: var(--s1); color: var(--muted); max-width: 64ch; }
.vsec .meta { color: var(--muted); font-size: var(--fs-small); }
.row-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3); }
.row-form .grow { flex: 1 1 260px; min-width: 0; }
.fld { display: grid; gap: var(--s2); }
.fld + .fld { margin-top: var(--s4); }
.fld label, .fld .lbl { font-weight: 500; }
.fld .hint { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.inp, .fld textarea, .fld select {
  width: 100%; min-height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius-nested);
  background: var(--field, var(--ground)); color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body);
}
.fld textarea { padding: var(--s2) var(--s3); resize: vertical; min-height: 96px; }
.inp:focus-visible, .fld textarea:focus-visible, .fld select:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: transparent; }
.inp::placeholder, .fld textarea::placeholder { color: var(--faint); }
.inp.mono { font-family: var(--mono); font-size: var(--fs-small); } /* taste-skill-ignore: a code to type */
.check { display: flex; align-items: flex-start; gap: var(--s2); }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--text); flex: none; }
.check .s { display: block; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.form-err { margin-top: var(--s2); color: var(--pill-negative-ink); font-size: var(--fs-small); line-height: var(--lh-small); min-height: var(--lh-small); }
.form-err:empty { min-height: 0; }
.set-actions .form-err, .row-form .form-err { margin-top: 0; align-self: center; }
.said { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.rv.slid > .rv-in > .confirm, .rv.slid > .rv-in > form { margin-top: var(--s3); }
.rv.slid > .rv-in > .role-form { padding-bottom: var(--s3); }
.receipt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: var(--s3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.receipt b { color: var(--text); font-weight: 500; }
.confirm { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); }
.confirm p { color: var(--text); }
.confirm p b { color: var(--pill-negative-ink); font-weight: 600; }
.confirm .actions { margin-top: var(--s3); flex-wrap: wrap; }
.srv-row .pic { width: 40px; height: 40px; }
.invite-head { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.invite-head .stamp-row { margin-top: 0; min-width: 0; }
.invite-desc { margin-top: var(--s4); max-width: 64ch; }
.invite-head + .invite-desc + *, .invite-head + .receipt, .invite-head + .ways, .invite-head + .set-actions { margin-top: var(--s5); }
.invite-note { margin-top: var(--s5); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.inp:disabled, .fld textarea:disabled { color: var(--muted); background: transparent; border-style: dashed; }
.check input:disabled + span { color: var(--muted); }
.srv-row .need { margin-left: var(--s1); }
.empty { color: var(--muted); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ways { margin-top: var(--s5); }
.ways > li { gap: var(--s4); }
.ways .btn { flex: none; }
.vsec > header + .ways { margin-top: 0; }
.ways > .way-row { flex-wrap: wrap; padding: var(--s3) 0; }
.way-row > .t { flex: none; width: 160px; }
.way-row > .row-form { flex: 1 1 320px; min-width: 0; align-items: center; }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; }
.cols > * { min-width: 0; }
.aside-card { padding-top: var(--s1); }
.aside-card .cs-foot { margin-top: var(--s3); }
/* your card beside the home: the card in short and its status as checked here, a step under the home's figure */
.aside-card .pf-status .answer { margin-top: var(--s5); font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.015em; }
.aside-card .answer.quiet { color: var(--text); }
.aside-card .answer.bad { color: var(--pill-negative-ink); }
.aside-card .finding { margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.cs-open { color: inherit; }
.aside-card .cs-name { font-size: var(--fs-section); line-height: var(--lh-section); }
.cs-open:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the home: what is new, channel by channel, as a register; its figure is the screen's one strong element */
.act-stamp { margin-bottom: var(--s2); }
.act-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.act { margin-top: var(--s6); }
.act .reg-h, .act-link { gap: var(--s4); }
.act-c { flex: none; width: 152px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-reg > li.act-group { min-height: 0; padding: var(--s5) 0 var(--s2); gap: var(--s2); border-top: 0; color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.act-reg > li.act-group:first-child { padding-top: var(--s2); }
.act-reg > li.act-row { padding: 0; }
.act-link { display: flex; align-items: center; flex: 1; min-width: 0; min-height: 44px; color: var(--text); transition: background-color var(--t-fast) var(--ease-out); }
.act-link:hover .act-c { text-decoration: underline; text-underline-offset: 3px; }
.act-link .act-c { font-weight: 500; }
.act-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.act-who { color: var(--text); font-weight: 500; }
.act-who.ok { color: var(--accent); } /* the one accent: an author whose signature this browser checked */
.act-who.bad { color: var(--pill-warning-ink); }
.act .r, .act .reg-h .r { min-width: 64px; }
.act-n { color: var(--text); font-size: var(--fs-section); font-weight: 600; }
.act-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-top: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--muted); }
.pic.s20 { width: 20px; height: 20px; font-size: 10px; } /* taste-skill-ignore: a server's 20px mark, its initial at 10px */
.pic.s24.srv, .pic.s20.srv { border-radius: var(--radius-small); }
.ways-end { margin-top: var(--s6); }
.ways-quiet { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.ways-quiet .text-btn[aria-expanded="true"] { color: var(--text); }
.ways-box .rv-in > form { padding-top: var(--s3); }

/* registers of one line: the name, then its description in grey cut at the line's end, then the figures */
.reg.one-line > li { min-height: 44px; padding: var(--s1) 0; }
.reg .line { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.reg .line > .t { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg .line > .s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); }
.empty-row { justify-content: space-between; color: var(--muted); }

/* the settings' registers as tables: the main cell, the grey one, the figures, the actions in a column of one width */
.set-panel .reg > li, .set-panel .reg-h { gap: var(--s4); }
.set-panel .c-main { flex: 1 1 0; display: flex; align-items: center; gap: var(--s2); min-width: 0; overflow: hidden; white-space: nowrap; }
.set-panel .c-main > bdi { overflow: hidden; text-overflow: ellipsis; }
.set-panel .c-main > svg { width: 16px; height: 16px; color: var(--faint); }
.set-panel .c-sub, .set-panel .c-by { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.set-panel .c-by { flex: 0 1 120px; }
.set-panel .reg .r { min-width: 56px; color: var(--text); font-size: var(--fs-body); }
/* the actions' column is as wide as the longest set of actions in either language, so the figures before it hold their edge */
.set-panel .c-acts, .set-panel .reg .row-acts { flex: none; display: flex; justify-content: flex-end; gap: var(--s4); min-width: var(--acts, 128px); }
#members { --acts: 184px; }
#invites { --acts: 176px; }
#bans { --acts: 140px; }
#roles { --acts: 140px; }
/* what ends the server: its own block at the end, its title and its button in the danger's ink, as the staff panel's */
.set-sec.ends > header h2 { color: var(--pill-negative-ink); }
.btn.final { border-color: var(--negative-border); color: var(--pill-negative-ink); }
.btn.final:hover, .btn.final[aria-expanded="true"] { background: var(--pill-negative-bg); border-color: var(--negative); }
.aside-note { margin-top: var(--s3); color: var(--muted); }
.people .side-pad { padding: 0 var(--s3) 0 var(--s4); }
.filter { flex: 0 1 320px; min-width: 240px; }
.narrow { max-width: 560px; }

/* settings: a row per section, the label column beside its panel (the sheet's "Settings in two columns") */
.set-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s3) var(--col-gap); padding-top: var(--s6); margin-top: var(--s6); border-top: 1px solid var(--rule); }
.settings .sec-index + .set-sec { margin-top: 0; border-top: 0; }
.set-panel { min-width: 0; }
.set-sec > header h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.set-sec > header p { margin-top: var(--s1); color: var(--muted); }
.set-sum { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.set-sec > header .set-sum p { margin-top: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.set-sec > header .ro { margin-top: var(--s2); color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.set-sec .add-form { margin-bottom: var(--s4); }
.list-box { min-width: 0; }
.perm-grid { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin-top: var(--s3); }
.app .sec-index { position: sticky; top: var(--bar); z-index: 4; margin: var(--s4) calc(-1 * var(--pad-x)) 0; padding: 0 var(--pad-x); background: var(--surface); }
.danger-row { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

/* threads and boards: the opening post as signed, then the replies as a feed */
.post { margin-top: var(--s5); }
.post .m { padding-right: 0; padding-left: calc(40px + var(--s4)); }
.post .m .m-av { left: 0; }
.thread-feed { margin: var(--s5) calc(-1 * var(--pad-x)) 0; }
.thread-feed .feed { padding-top: 0; }
.thread-comp { margin: var(--s4) calc(-1 * var(--s4)) 0; }
.thread-comp .composer { padding: 0; }

/* ---------- 1100px and less: the people are a drawer over the lead ---------- */
@media (max-width: 1100px) {
  .app, .app[data-people="off"] { grid-template-columns: 72px 240px minmax(0, 1fr); grid-template-areas: "rail side lead"; }
  .people {
    position: fixed; z-index: 24; top: var(--bar); right: 0; bottom: 0; width: 300px; height: auto; padding: 0 var(--s2) var(--s4); background: var(--surface);
    box-shadow: var(--shadow-dialog); /* taste-skill-ignore: a sheet opened over the page */
  }
  .people-head { background: var(--surface); }
  .people-close { display: inline-grid; }
  .app:not([data-people="open"]) .people { display: none; }
  .app[data-people="off"] .people { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .app, .app[data-people="off"] { grid-template-columns: 72px 220px minmax(0, 1fr); }
  .set-panel .reg-h { display: none; }
  .set-panel .reg > li { flex-wrap: wrap; row-gap: 2px; }
  .set-panel .c-main { flex: 1 1 50%; }
  .set-panel .c-sub, .set-panel .c-by, .set-panel .c-seen { order: 5; flex: 1 1 40%; }
  .set-panel .reg .row-acts { order: 6; min-width: 0; }
  .set-panel .c-sub, .set-panel .c-seen { white-space: normal; overflow: visible; overflow-wrap: anywhere; } /* two lines rather than a cut */
  .set-sum { margin-top: var(--s3); }
  .set-sec { grid-template-columns: minmax(0, 1fr); }
  .perm-grid { grid-template-columns: minmax(0, 1fr); }
}

/* between 761 and 960px a message is under 340px wide: its proof stands up as on the phone (app.css does that at 760px) */
@media (min-width: 761px) and (max-width: 960px) {
  .m-proof ol.chain.c4, .m-proof ol.chain.c3 { grid-template-columns: minmax(0, 1fr); }
  .m-proof .step { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s3); align-items: baseline; padding: var(--s1) 0 var(--s3) var(--s4); border-left: 2px solid var(--line); }
  .m-proof .step:last-child { padding-bottom: var(--s1); }
  .m-proof .step::before { left: -2px; top: calc(var(--s1) + 9px); width: 12px; height: 2px; }
  .m-proof .step .k { grid-row: 1 / span 2; }
  .m-proof .step .v, .m-proof .step:last-child .v { margin: 0; padding: 0; border: 0; }
  .m-proof .step .s { grid-column: 2; margin-top: 0; }
}

/* ---------- 760px and less: one pane at a time, the rail with the channels or the open view ---------- */
@media (max-width: 760px) {
  .app, .app[data-people="off"] { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "rail side"; }
  .app[data-pane="lead"], .app[data-pane="lead"][data-people="off"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead"; }
  .app[data-pane="lead"] .rail, .app[data-pane="lead"] .side { display: none; }
  .app:not([data-pane="lead"]) .lead { display: none; }
  .lead { margin: 0; border-radius: 0; }
  .app[data-view="channel"] .lead { height: calc(100dvh - var(--bar)); }
  .app:not([data-view="channel"]) .lead { padding: var(--s4) var(--s4) var(--s6); }
  .side { padding-right: 0; }
  .ch-head { padding-left: var(--s2); gap: var(--s2); }
  .ch-back { display: inline-grid; }
  .ch-topic { display: none; }
  .m { padding-left: calc(var(--s4) + 40px + var(--s3)); padding-right: var(--s4); }
  .m-av, .m-gut { left: var(--s4); }
  .m-day, .m-new { margin-left: var(--s4); margin-right: var(--s4); }
  .feed-top { padding-left: var(--s4); padding-right: var(--s4); }
  .composer { padding: 0 var(--s2); }
  .comp-box textarea { font-size: 16px; line-height: 22px; }
  .m-tools { right: var(--s2); }
  .people { width: 100vw; }
  /* the home's register on a phone: the channel, the last line, the figures; the tables of the settings on two lines */
  .act-c { width: 96px; }
  .act .r, .act .reg-h .r { min-width: 36px; }
  .set-panel .reg-h { display: none; }
  .set-panel .reg > li { flex-wrap: wrap; row-gap: 2px; }
  .set-panel .c-main { flex: 1 1 50%; }
  .set-panel .c-sub, .set-panel .c-by { order: 5; flex: 1 1 40%; }
  .set-panel .c-by:empty, .set-panel .c-sub:empty { display: none; }
  .set-panel .c-acts, .set-panel .reg .row-acts { width: auto; }
  .reg .line > .t { max-width: 72%; }
  /* the proof of a message stands up as the directory's ledger line does on a phone (app.css): one station a row */
  .m-proof ol.chain.c4, .m-proof ol.chain.c3 { grid-template-columns: minmax(0, 1fr); }
  .chain.mini .step::before { top: 11px; }
  .way-row > .t { width: 100%; }
  .reg .r-date, .reg-h .r-date { min-width: 84px; }
  .drawer { top: auto; width: 100vw; max-height: 85dvh; padding: var(--s4) var(--s4) var(--s6); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .app .sec-index { margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); padding: 0 var(--s4); gap: var(--s3); }
  .ch-head { height: auto; min-height: 56px; padding-top: var(--s1); padding-bottom: var(--s1); }
  .ch-head h1 span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
  .inp, .fld textarea, .fld select { font-size: 16px; }
  .ways > li { flex-wrap: wrap; }
  .thread-feed { margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4)); }
  .thread-comp { margin-left: calc(-1 * var(--s2)); margin-right: calc(-1 * var(--s2)); }
  .tip { display: none; }
}
@media (hover: none) { .m-gut { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail-item::before, .rail-icon, .chan, .m-name, .mem, .mention { transition: none; } }

/* ---------- round 2 of the pass (the fresh-eyes audit, design/chat-audit-2026-10-31.md) ---------- */
/* the footer's links are 24px tall (target-size), and the canary has a line of its own: when canary.js writes "not yet
   signed" after it the footer keeps its three lines and nothing above it moves (P2) */
.side-foot .foot-u a.inline { display: inline-block; padding: 4px 0; }
.side-foot .foot-u a[data-canary] { flex-basis: 100%; }
.side-foot .foot-u { row-gap: 0; }
/* an author's name is a 24px target, its line keeps its height */
.m-name { padding: 2px 0; margin: -2px 0; }
.set-panel .text-btn { padding: 2px 0; }
.set-panel .icon-btn.small { width: 28px; height: 28px; }
.set-panel .icon-btn.small svg { width: 14px; height: 14px; }
.set-panel .icon-btn.small:disabled { visibility: hidden; }
/* on a touch screen the controls that float over a message, back and the members are 40px */
@media (pointer: coarse) {
  .m-tools .icon-btn { width: 40px; height: 40px; }
  .ch-tools .icon-btn, .ch-back { width: 44px; height: 44px; }
  .m-tools { top: -22px; }
}
/* the channels' table: who can see each, the categories as group lines, the add of a category under it */
.set-panel .c-seen { flex: 0 1 140px; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
#channels { --acts: 208px; }
.set-panel .reg > li.cat-row { min-height: 0; padding: var(--s4) 0 var(--s2); border-top: 0; color: var(--text); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; }
.set-panel .reg > li.cat-row .c-main { font-weight: 600; }
.cat-add { margin-top: var(--s3); }
.chan-form .fld-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.chan-form .who { margin: var(--s4) 0 0; padding: 0; border: 0; display: grid; gap: var(--s2); }
.chan-form .who legend { margin-bottom: var(--s2); font-weight: 500; }
.chan-form .who-roles { margin-top: var(--s1); padding-left: var(--s5); }
/* the profile: a message the server changed is said apart, in the warning's ink */
.pf-changed { margin-top: var(--s1); color: var(--pill-warning-ink); }
@media (max-width: 760px) {
  /* the phone: a table's row on two lines, its name and figures first, its grey cells and its actions under them */
  .set-panel .c-sub, .set-panel .c-by, .set-panel .c-seen { order: 5; flex: 1 1 40%; }
  .set-panel .reg .row-acts { order: 6; }
  .chan-form .fld-row { grid-template-columns: minmax(0, 1fr); }
  /* the home's register: the channel and its figures, then the last message on its own line */
  .act-link { flex-wrap: wrap; row-gap: 2px; padding: var(--s2) 0; }
  .act-link .act-last { order: 5; flex: 1 1 100%; }
  .act .reg-h .grow { display: none; }
  .act .reg-h .act-c { flex: 1; }
  .act-link .act-c { flex: 1; width: auto; }
  /* Discover and the threads: the name, then the description or the author under it */
  .reg .line { flex-direction: column; align-items: flex-start; gap: 0; }
  .reg .line > .t, .reg .line > .s { max-width: 100%; }
  .reg .line > .s { font-size: var(--fs-small); line-height: var(--lh-small); }
}
/* what opens under a row of a register is a row of its own, without the row's rule and height */
.reg > li.rv { display: grid; align-items: stretch; gap: 0; min-height: 0; padding: 0; border-top: 0; }
.row-form .inp.sel { flex: none; width: auto; min-width: 140px; padding-right: var(--s2); }
/* the chat's word that another card of this place has the same name: under the card's facts, in the warning's ink */
.pf-homonym { margin-top: var(--s3); color: var(--pill-warning-ink); }
.pf-homonym a.inline { color: inherit; font-variant-numeric: tabular-nums; }

/* a badge's tip, as on the card: the name and who gave it, on hover or keyboard focus (31 October 2026) */
.cs-badges { display: inline-flex; align-items: center; gap: var(--s1); }
.cs-badges .badge { position: relative; display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--radius-small); }
.cs-badges .badge img { display: block; width: 18px; height: 18px; object-fit: contain; }
.cs-badges .badge .tip { display: none; position: absolute; z-index: 30; top: calc(100% + var(--s2)); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: var(--s2) var(--s3); border-radius: var(--radius-small); background: var(--raised); border: 1px solid var(--rule); box-shadow: var(--shadow-float); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); white-space: normal; text-align: left; }
.cs-badges .badge .tip b { display: block; font-weight: 600; }
.cs-badges .badge .tip span { display: block; color: var(--muted); }
.cs-badges .badge:hover .tip, .cs-badges .badge:focus-visible .tip { display: block; }
.cs-badges .badge:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.drawer .cs-badges .badge .tip { left: 0; transform: none; } /* inside the 340px panel the tip stays within the panel's edge */
.org-sq.org-veil svg { width: 12px; height: 10px; display: block; fill: currentColor; } /* the Veil organisation without a logo: the Veil mark, as on the card */