/* Light, dark, and auto (the system's choice).  theme.js sets data-theme
   on <html> when a member picks one. */
:root {
  --bg: #ffffff; --bg-soft: #f6f7fa; --hover: #f3f5f9; --line: #e3e7ee; --ink: #141a24;
  --dim: #5b6577; --faint: #8b94a4;
  --side: #0e1420; --side-2: #151d2b; --side-ink: #cfd6e3; --side-dim: #7d899e; --side-active: #233250;
  --side-line: #1d2636;
  --accent: #2c63d6; --accent-ink: #ffffff; --accent-soft: #e9f0ff; --teal: #0f9d8f; --amber: #c27a06;
  --red: #d64545; --mention: #fff5dc; --shadow: 0 6px 24px rgba(15, 21, 32, .12);
  --code-bg: #f5f7fb; --code-bar: #eceff5;
  --k: #8f3fb6; --c: #6b7686; --s: #1d7d4f; --n: #b65a00; --d: #2c63d6; --sym: #3c4656;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0f16; --bg-soft: #0f1520; --hover: #121a27; --line: #212b3b; --ink: #e8edf6;
  --dim: #9ba7bb; --faint: #6c788c;
  --side: #070a10; --side-2: #0d121b; --side-active: #1b2840; --side-line: #161e2b;
  --accent: #5b8cff; --accent-soft: #15213a; --teal: #3fd1c0; --amber: #f2b042; --red: #ff6b6b;
  --mention: #2a2312; --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --code-bg: #0a0e15; --code-bar: #111827;
  --k: #c792ea; --c: #6f7d93; --s: #9ccc65; --n: #f7a35c; --d: #82aaff; --sym: #a9b4c6;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f16; --bg-soft: #0f1520; --hover: #121a27; --line: #212b3b; --ink: #e8edf6;
    --dim: #9ba7bb; --faint: #6c788c;
    --side: #070a10; --side-2: #0d121b; --side-active: #1b2840; --side-line: #161e2b;
    --accent: #5b8cff; --accent-soft: #15213a; --teal: #3fd1c0; --amber: #f2b042; --red: #ff6b6b;
    --mention: #2a2312; --shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --code-bg: #0a0e15; --code-bar: #111827;
    --k: #c792ea; --c: #6f7d93; --s: #9ccc65; --n: #f7a35c; --d: #82aaff; --sym: #a9b4c6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
}
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
code, pre, kbd { font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; }
body.guest .member-only, body.member .guest-only { display: none !important; }

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.iconbtn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: none; color: var(--dim);
}
.iconbtn:hover { background: var(--hover); color: var(--ink); }
.primary, a.primary {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 6px 14px;
  font-weight: 600; text-decoration: none; display: inline-block;
}
.primary:hover { filter: brightness(1.08); }
.small-link { background: none; border: 0; padding: 0; color: var(--side-dim); font-size: 12px; text-decoration: none; }
.small-link:hover { color: var(--side-ink); }

/* Avatars: a picture, or an initial on a color made from the name */
.avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
  background: hsl(var(--h, 210) 48% 46%); color: #fff; font-weight: 700; font-size: 15px; flex: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.small { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.avatar.tiny { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.avatar.big { width: 96px; height: 96px; border-radius: 22px; font-size: 40px; }
.avatar.bot { background: var(--side-2); color: var(--side-ink); }

/* ------------------------------------------------------------- the app */

/* The page itself never scrolls, only its parts do.  On a phone 100vh is
   taller than the screen (it counts what the address bar covers), so the
   page slid and took the header with it; dvh is the height really shown.
   --shown-height and --shown-top are set by app.js only while a keyboard
   covers part of a page the browser did not shrink. */
body.app { position: fixed; inset: 0; top: var(--shown-top, 0); height: 100vh; height: var(--shown-height, 100dvh);
  overflow: hidden; overscroll-behavior: none; }
#layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100%; }
body.withpanel #layout { grid-template-columns: 264px minmax(0, 1fr) 400px; }

#side {
  background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--side-line);
}
.sidehead { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 19px; text-decoration: none; letter-spacing: .01em; }
.brandlogo { height: 32px; width: auto; max-width: 220px; }
.sidehead .iconbtn { color: var(--side-dim); }
.sidehead .iconbtn:hover { background: var(--side-2); color: #fff; }
#jump {
  margin: 4px 12px 8px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--side-line);
  background: var(--side-2); color: var(--side-ink); outline: none;
}
#jump:focus { border-color: var(--accent); }
#roomlist { flex: 1; overflow-y: auto; padding: 0 8px 12px; }
.group {
  display: flex; justify-content: space-between; align-items: center; margin: 14px 8px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-dim);
}
.room {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px;
  color: var(--side-dim); text-decoration: none;
}
.room:hover { background: var(--side-2); color: var(--side-ink); }
.room.active { background: var(--side-active); color: #fff; }
.room.unread { color: #fff; font-weight: 700; }
.room .sigil { width: 14px; text-align: center; opacity: .6; }
.room .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .rowmenu { width: 22px; height: 22px; color: var(--side-dim); opacity: 0; }
.room.quiet .name { opacity: .55; }
.room:hover .rowmenu, .room.active .rowmenu, .room .rowmenu:focus { opacity: 1; }
@media (pointer: coarse) { .room .rowmenu { opacity: 1; } }
.popmenu { position: fixed; z-index: 50; display: grid; min-width: 180px; padding: 6px; background: var(--side-2);
  border: 1px solid var(--side-line); border-radius: 10px; box-shadow: var(--shadow); }
.popmenu button { text-align: left; padding: 9px 10px; border: 0; border-radius: 6px; background: none;
  color: var(--side-ink); font: inherit; font-size: 14px; cursor: pointer; }
.popmenu button:hover { background: var(--side-active); color: #fff; }
.badge {
  min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--side-2); color: var(--side-ink);
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px;
}
.badge.mention { background: var(--red); color: #fff; }
.account { position: relative; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--side-line);
  padding: 10px 6px 12px 12px; }
.account .me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none;
  font-weight: 600; }
.account .me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account .signinbtn { flex: 1; }
.account .tools { display: flex; align-items: center; gap: 1px; }
.account .tools .iconbtn { width: 26px; height: 26px; color: var(--side-dim); }
.account .tools .iconbtn:hover { color: #fff; background: var(--side-2); }
.accountmenu { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 4px); z-index: 30; display: grid;
  padding: 6px; background: var(--side-2); border: 1px solid var(--side-line); border-radius: 10px; box-shadow: var(--shadow); }
.accountmenu a { padding: 9px 10px; border-radius: 6px; color: var(--side-ink); font-size: 14px; text-decoration: none; }
.accountmenu a:hover { background: var(--side-active); color: #fff; }

#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
#roomhead {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line);
  min-height: 58px;
}
.menubtn { display: none; }
.titles { flex: 1; min-width: 0; }
.titles h1 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* A long name is cut short with an ellipsis rather than run under the buttons. */
.titles h1 .roomname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.titles h1 > :not(.roomname) { flex: none; }
.titles h1 a { color: inherit; text-decoration: none; }
.kindtag {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim);
  border: 1px solid var(--line); border-radius: 6px; padding: 0 6px;
}
.topic { margin: 1px 0 0; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic.editable { cursor: pointer; }
.topic.editable:hover { color: var(--ink); }
.topic.secure { display: flex; align-items: center; gap: 4px; color: var(--teal); }
.topic.secure .icon { width: 14px; height: 14px; }
.here { display: flex; align-items: center; background: none; border: 0; padding: 2px 4px; border-radius: 8px;
  cursor: pointer; color: inherit; font: inherit; }
.here:hover { background: var(--hover); }
.here:empty { display: none; }
#panel h4 { margin: 14px 16px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.here .avatar { margin-left: -5px; border: 2px solid var(--bg); box-sizing: content-box; }
.here .count { margin-left: 8px; font-size: 12px; color: var(--teal); font-weight: 600; }
.headtools { display: flex; align-items: center; gap: 4px; }
.titles h1 .pill { margin-left: 10px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.pill {
  border: 1px solid var(--line); background: var(--bg); border-radius: 16px; padding: 3px 12px;
  font-size: 13px; font-weight: 600; color: var(--dim);
}
.pill.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

#card:empty { display: none; }

/* The stream */
#stream { flex: 1; overflow-y: auto; padding: 8px 0 12px; min-height: 0; }
.msg {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px;
  padding: 6px 20px 4px; margin-top: 6px;
}
.msg:hover { background: var(--hover); }
.msg.cont { margin-top: 0; padding-top: 1px; }
.msg.cont .gutter .face, .msg.cont .gutter .avatar, .msg.cont header { display: none; }
.msg .side-time {
  position: absolute; left: 20px; width: 40px; top: 50%; transform: translateY(-50%);
  visibility: hidden; font-size: 11px; color: var(--faint); text-align: right;
}
.msg.cont:hover .side-time { visibility: visible; }
.msg.mention { background: var(--mention); box-shadow: inset 3px 0 var(--amber); }
.msg.system .who { color: var(--dim); }
.msg.deleted .body { color: var(--faint); font-style: italic; }
.msg header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1.3; }
.msg .who { font-weight: 700; color: var(--ink); text-decoration: none; }
.msg a.who:hover { text-decoration: underline; }
.role {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 5px;
  border-radius: 4px; background: var(--accent-soft); color: var(--accent);
}
.role.dev { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); }
.where { font-size: 12px; text-decoration: none; color: var(--dim); }
.msg header time { font-size: 12px; color: var(--faint); }
.edited, .pinned { font-size: 11px; color: var(--faint); }
.pinned { color: var(--amber); }
.body { overflow-wrap: anywhere; }
.body p { margin: 2px 0; }
.body ul, .body ol { margin: 4px 0; padding-left: 22px; }
.body blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--dim); }
.body :not(pre) > code {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; font-size: 13px;
}
.body table { border-collapse: collapse; margin: 6px 0; }
.body td, .body th { border: 1px solid var(--line); padding: 3px 8px; }

.code { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 6px 0; max-width: 920px; }
.codebar {
  display: flex; justify-content: space-between; align-items: center; padding: 3px 6px 3px 12px;
  background: var(--code-bar); font-size: 12px; color: var(--dim); text-transform: lowercase;
}
.codebar .copy { border: 0; background: none; color: var(--dim); font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.codebar .copy:hover { background: var(--hover); color: var(--ink); }
.code pre { margin: 0; padding: 10px 14px; background: var(--code-bg); overflow-x: auto; font-size: 13px; line-height: 1.55; }
.keyword, .section { color: var(--k); font-weight: 600; }
.comment { color: var(--c); font-style: italic; }
.strings, .characters, .rawstring, .template { color: var(--s); }
.numbers { color: var(--n); }
.directive, .attribute, .key { color: var(--d); }
/* a form file: the component and its class apart from the property names */
.attribute-lfm { color: var(--teal); font-weight: 600; }
.symbol, .operator { color: var(--sym); }

.files { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.shot img {
  display: block; max-width: min(420px, 100%); max-height: 320px; border-radius: 10px; border: 1px solid var(--line);
}
.file {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-soft); text-decoration: none; color: var(--ink); max-width: 100%;
}
.file:hover { border-color: var(--accent); }
.fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize, .fexp { font-size: 12px; color: var(--faint); }
.fexp { color: var(--amber); }

.reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.react {
  border: 1px solid var(--line); background: var(--bg); border-radius: 12px; padding: 0 8px; font-size: 13px; line-height: 22px;
}
.react:hover { border-color: var(--accent); }
.react.mine { border-color: var(--accent); background: var(--accent-soft); }

.threadline {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 3px 10px 3px 6px;
  border: 1px solid transparent; border-radius: 8px; background: none; color: var(--accent); font-size: 13px;
}
.threadline:hover { border-color: var(--line); background: var(--bg); }
.threadline span { color: var(--faint); }

.actions {
  position: absolute; top: -14px; right: 18px; display: none; gap: 2px; padding: 2px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); z-index: 2;
}
.msg:hover .actions, .msg.held .actions { display: flex; }
.actions .iconbtn { width: 28px; height: 28px; }
.picker {
  position: absolute; top: 34px; right: 0; display: flex; gap: 2px; padding: 4px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
}
.picker button { border: 0; background: none; font-size: 20px; width: 36px; height: 36px; border-radius: 8px; }
.picker button:hover { background: var(--hover); transform: scale(1.12); }

.editbox { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: end; }
.editbox textarea { resize: none; border: 1px solid var(--accent); border-radius: 8px; padding: 6px 8px; background: var(--bg); }
.editbox button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 4px 10px; }

.day { display: flex; align-items: center; gap: 12px; margin: 18px 20px 4px; color: var(--faint); font-size: 12px; font-weight: 600; }
.day::before, .day::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.divider { display: flex; align-items: center; gap: 8px; margin: 8px 20px 0; color: var(--red); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.divider::before { content: ""; flex: 1; border-top: 1px solid var(--red); }
.notice { color: var(--dim); padding: 12px 20px; }
.empty { padding: 40px 20px; text-align: center; color: var(--dim); }
.note { margin: 8px 20px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-soft); }
.note pre { margin: 0 0 6px; white-space: pre-wrap; font-size: 13px; }
.note button { border: 0; background: none; color: var(--accent); padding: 0; font-size: 12px; }

#typing { height: 20px; padding: 0 22px; font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
#typing .dots { width: 18px; height: 6px; background: radial-gradient(circle, var(--dim) 2px, transparent 2.5px) 0 0 / 6px 6px repeat-x;
  animation: dots 1s steps(3) infinite; }
@keyframes dots { from { width: 6px; } to { width: 24px; } }

/* The box members type in */
#composer-area { padding: 0 20px 16px; }
.composer { position: relative; }
.composer .box {
  display: flex; align-items: flex-end; gap: 4px; border: 1px solid var(--line); border-radius: 12px;
  padding: 5px; background: var(--bg); transition: border-color .15s;
}
.composer .box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer.drop .box { border-style: dashed; border-color: var(--accent); }
.composer textarea {
  flex: 1; border: 0; outline: none; resize: none; background: none; padding: 6px 4px; min-width: 0; max-height: 300px;
}
.composer .send { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 6px 16px; font-weight: 700; }
.composer .send:disabled { opacity: .6; }
.composer .options { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--faint); }
.composer .options select { border: 0; background: none; color: var(--dim); font-size: 12px; padding: 0; }
.attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.attachments:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600;
}
.chip.busy { opacity: .6; padding-right: 10px; }
.chip button { border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; padding: 0 4px; }
.complete {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; max-width: 520px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; z-index: 5;
}
.complete .item { display: flex; gap: 10px; padding: 6px 12px; cursor: pointer; align-items: baseline; }
.complete .item span { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.complete .item.on { background: var(--accent-soft); }

.quickjoin {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-soft);
}
.quickjoin .caption, .quickjoin span { flex-basis: 100%; color: var(--dim); font-size: 14px; }
.quickjoin input {
  flex: 1 1 140px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  background: var(--bg); outline: none;
}
.quickjoin input:focus { border-color: var(--accent); }
.quickjoin button { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 8px 18px; font-weight: 700; }
.quickjoin.stacked { flex-direction: column; align-items: stretch; background: none; border: 0; padding: 0; }
.quickjoin.stacked input { flex: none; }

/* The side panel: threads, pins, search */
#panel { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--bg); min-height: 0; }
#panel > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--line); }
#panel h2 { font-size: 16px; margin: 0; }
.threadlist { flex: 1; overflow-y: auto; padding: 8px 0; }
.threadlist .msg { padding-left: 16px; padding-right: 16px; }
.threadcount { margin: 6px 16px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.panelcomposer { padding: 0 14px 14px; }
.panelcomposer .hints { display: none; }
#panel > input { margin: 12px 14px 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
#panel .scope { margin: 4px 16px; font-size: 13px; color: var(--dim); }
.msg.result { cursor: pointer; }
#panel .hint { padding: 8px 16px 14px; font-size: 12px; color: var(--faint); margin: 0; border-top: 1px solid var(--line); }

/* Private messages: beams */
.beam {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); max-width: 520px;
}
.beam .icon { color: var(--teal); }
.beam progress { flex-basis: 100%; height: 6px; accent-color: var(--teal); }
.beam .state { font-size: 12px; color: var(--faint); flex-basis: 100%; }

/* Profiles and shelves */
.profile { display: flex; gap: 22px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.profile h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.profile .seen { color: var(--faint); font-size: 13px; margin: 2px 0 8px; }
.profile .bio p { margin: 4px 0; }
.profile .links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.profile .tools { display: flex; gap: 8px; margin-top: 10px; }
.profile .tools button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 5px 12px; }
.editprofile { display: grid; gap: 8px; margin-top: 10px; max-width: 560px; }
.editprofile textarea { min-height: 90px; }
.editprofile textarea, .editprofile input { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--bg); }
.editprofile .primary { justify-self: start; }
.shelfhead { display: flex; align-items: center; gap: 8px; padding: 12px 24px 4px; color: var(--dim); font-size: 13px; }
.shelfhead b { color: var(--ink); font-size: 15px; }
#stream.shelf .msg {
  max-width: 760px; margin: 10px 24px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--bg-soft);
}
#stream.shelf .msg.cont header, #stream.shelf .msg.cont .gutter .avatar { display: revert; }
#stream.shelf .day { margin-left: 24px; max-width: 760px; }

/* Admin */
.admin { padding: 6px 24px 40px; max-width: 1180px; }
.admin h2 { font-size: 16px; margin: 22px 0 10px; }
.settings { display: grid; gap: 10px; max-width: 640px; }
.settings label { display: grid; grid-template-columns: 1fr 220px; gap: 12px; align-items: center; font-size: 14px; }
.settings h3 { margin: 18px 0 0; font-size: 15px; }
.settings h3:first-child { margin-top: 0; }
.look { margin-bottom: 26px; }
.lookpreview { max-height: 64px; max-width: 260px; border: 1px solid var(--line); border-radius: 8px; padding: 6px;
  background: var(--bg-soft); }
.prefs { margin: 16px 24px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.prefs label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0; }
.prefs .hint { margin: 2px 0 12px; font-size: 13px; color: var(--faint); }
.lookpreview.icon { width: 64px; height: 64px; }
/* The logo always sits on the dark header, so it is previewed on it. */
.lookpreview.logo { background: var(--side); border-color: var(--side-line); }
.settings input, .settings select, .grid input, .grid select {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--bg); width: 100%;
}
.settings .primary { justify-self: start; }
.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.grid td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); }
.grid td.dim { color: var(--faint); font-size: 13px; }
.grid button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 4px 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 16px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 8px 14px; color: var(--dim); border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs .tab-badge { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }
.admin > .part > input[type=search] { width: 100%; max-width: 360px; padding: 7px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); }
.admin .hint { color: var(--faint); font-size: 13px; margin: 0 0 12px; }
.admin .small-link { color: var(--accent); font-size: 13px; }
.admin .small-link.bad { color: var(--red); }
.rolechecks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.rolechecks label { white-space: nowrap; color: var(--dim); }
.gridwrap { overflow-x: auto; }
.privategrid td.dim { white-space: nowrap; }
@media (max-width: 860px) {
  .privategrid tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .privategrid td { border: 0; padding: 0; }
  .privategrid td:first-child { flex: 1 0 100%; }
  .privategrid td:last-child { margin-left: auto; }
}
.grid.perms th { font-size: 12px; font-weight: 600; color: var(--dim); padding: 4px 6px; writing-mode: vertical-rl;
  transform: rotate(180deg); text-align: left; height: 110px; }
.grid.perms th.roomrole { color: var(--teal); }
.grid.perms td { text-align: center; padding: 4px 6px; }
.grid.perms td.pname { text-align: left; white-space: nowrap; padding-right: 14px; }
.invite { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
.invite input, .invite select { flex: 1; min-width: 120px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-soft); }
.memberlist { overflow-y: auto; padding: 6px 0; }
.person { display: flex; align-items: center; gap: 8px; padding: 6px 16px; }
.person .who { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; flex: 1; min-width: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--line); box-shadow: 0 0 0 2px var(--bg); }
.dot.online { background: #3cb371; }
.dot.away { background: #e0b03c; }
.preview { margin: 6px 0 2px; border-left: 3px solid var(--line); padding-left: 10px; max-width: 560px; }
.preview .line { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 2px 0; border: 0; background: none;
  color: var(--dim); cursor: pointer; font: inherit; min-width: 0; }
.preview .line .site { flex: none; font-size: .85em; text-transform: lowercase; }
.preview .line .title { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview.open .line .title { white-space: normal; }
.preview .line:hover .title { text-decoration: underline; }
.preview .more { padding: 4px 0 2px; color: var(--dim); }
.preview .more p { margin: 0 0 6px; }
.preview .more img { display: block; max-width: 100%; max-height: 240px; border-radius: 8px; margin: 0 0 8px; }
.person .small-link { color: var(--accent); }
.dim { color: var(--faint); font-size: 13px; }
.avatar.away { opacity: .45; filter: grayscale(.7); }
.profile .away { color: var(--amber); margin: 0 0 6px; font-size: 14px; }
.msg.ignored .body, .msg.ignored .files, .msg.ignored .reacts { display: none; }
.msg .unfold { border: 0; background: none; padding: 0; color: var(--faint); font-size: 13px; font-style: italic; }
.tokens { margin: 0 24px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; }
.tokens summary { cursor: pointer; font-weight: 600; }
.tokens .invite { padding: 10px 0 0; }
.tokens .person { padding: 4px 0; }
.newtoken { background: var(--code-bg); padding: 8px 10px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#panel .settings { padding: 14px 16px; }
#panel .settings label { grid-template-columns: 1fr; gap: 4px; }
.group .iconbtn.small { width: 22px; height: 22px; color: var(--side-dim); }
.group .iconbtn.small:hover { background: var(--side-active); color: var(--side-ink); }
.group .iconbtn.small .icon { width: 14px; height: 14px; }
.room .sigil .icon { width: 12px; height: 12px; vertical-align: -1px; }
#roomhead h1 .icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px; }

#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 20; }
.toast {
  background: var(--side); color: #fff; padding: 9px 16px; border-radius: 10px; box-shadow: var(--shadow);
  font-size: 14px; white-space: pre-line; transition: opacity .4s; max-width: 90vw;
}
.toast.bad { background: var(--red); }
.toast.going { opacity: 0; }
#lightbox { position: fixed; inset: 0; background: rgba(5, 8, 12, .86); display: grid; place-items: center; z-index: 30; cursor: zoom-out; }
#lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 8px; }

/* ------------------------------------------------------- the home page */

body.home { background: var(--bg-soft); }
.topbar { display: flex; align-items: center; gap: 22px; padding: 12px max(20px, calc((100% - 1240px) / 2)); background: var(--side); }
.topbar nav a { color: var(--side-ink); margin-right: 16px; text-decoration: none; font-weight: 600; }
.topbar nav a:hover { color: #fff; }
.topbar .account { margin-left: auto; border: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.topbar .account a { color: var(--side-ink); text-decoration: none; }
.topbar .account .button { background: var(--accent); color: #fff; padding: 5px 14px; border-radius: 8px; font-weight: 700; }
.hero {
  background: radial-gradient(1200px 400px at 10% -10%, #1b2c52 0%, transparent 60%), var(--side);
  color: var(--side-ink); padding: 40px 20px 44px;
}
.hero .inner { max-width: 1240px; margin: 0 auto; }
.hero h1 { color: #fff; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; margin: 0 0 8px; max-width: 880px; }
.hero .online { margin: 0 0 20px; color: var(--side-dim); }
.hero .quickjoin { background: none; border: 0; padding: 0; max-width: 640px; margin-bottom: 26px; }
.hero .quickjoin input { background: var(--side-2); border-color: var(--side-line); color: #fff; }
.chans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.chan {
  display: flex; flex-direction: column; gap: 2px; background: var(--side-2); border: 1px solid var(--side-line);
  border-radius: 12px; padding: 12px 14px; color: var(--side-ink); text-decoration: none; transition: transform .12s, border-color .12s;
}
.chan:hover { border-color: var(--accent); transform: translateY(-1px); }
.chan b { color: #fff; font-size: 16px; }
.chan span { font-size: 13px; color: var(--side-dim); }
.chan small { color: #4fd8c7; font-weight: 700; }
.band { max-width: 1280px; margin: 0 auto; padding: 22px 20px 30px; }
.band h2 { font-size: 19px; margin: 26px 0 12px; }
.band h2 small { font-size: 13px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.bestrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.best {
  display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  text-decoration: none; color: var(--ink); max-height: 200px; overflow: hidden;
}
.best .who { font-size: 13px; color: var(--dim); margin-bottom: 4px; }
.signin { max-width: 460px; margin: 40px auto; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; }
.signin h1 { margin: 0 0 6px; }
.signin .fine { font-size: 13px; color: var(--faint); margin-top: 18px; }
.signin .signin-note { margin: -6px 0 18px; padding: 10px 14px; border-radius: 10px; background: var(--bg-soft, rgba(127, 127, 127, .1)); color: var(--ink); font-size: 14px; }
.signin .or { text-align: center; color: var(--dim); font-size: 13px; margin: 16px 0 8px; }
.signin .ssorow { display: flex; flex-wrap: wrap; gap: 8px; }
.signin .sso { flex: 1 1 120px; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-weight: 700;
  color: var(--ink); text-decoration: none; }
.signin .sso:hover { border-color: var(--accent); }
.signin .forgotbox { margin-top: 14px; font-size: 14px; }
.signin .forgotbox summary { cursor: pointer; color: var(--dim); }
.signin .forgotbox form { margin-top: 8px; }
.signin .notice { padding: 8px 0; color: var(--accent); }
.foot { text-align: center; color: var(--faint); font-size: 13px; padding: 20px; }

/* ----------------------------------------------------------- narrow */

@media (max-width: 1180px) {
  body.withpanel #layout { grid-template-columns: 240px minmax(0, 1fr) 340px; }
  #layout { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  #layout, body.withpanel #layout { grid-template-columns: minmax(0, 1fr); }
  #side { position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 320px; z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  body.menu #side { transform: none; box-shadow: var(--shadow); }
  body.menu #main { filter: brightness(.6); }
  .menubtn { display: inline-grid; }
  #panel { position: fixed; inset: 0; top: var(--shown-top, 0); height: var(--shown-height, auto); z-index: 9; }
  #roomhead { padding: 8px 10px; gap: 6px; }
  .here { display: none; }
  .msg { padding-left: 12px; padding-right: 12px; }
  #composer-area { padding: 0 10px 10px; }
  .composer .options .hints { display: none; }
  .profile { flex-direction: column; gap: 12px; }
  .settings label { grid-template-columns: 1fr; gap: 4px; }
  .actions { right: 8px; }
}
.grid input[type=checkbox] { width: auto; padding: 0; margin: 0 4px 0 0; vertical-align: -2px; }
.rolechecks label { display: inline-flex; align-items: center; }

/* Report a problem */
.reportform { display: grid; gap: 10px; padding: 12px 16px; }
.reportform textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.ssolink { flex-basis: 100%; font-size: 13px; display: flex; align-items: center; gap: 10px; color: var(--dim); }
/* The sign-in providers' own marks; GitHub's takes the text color, as it asks. */
.ssologo { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 8px;
  background: center / contain no-repeat; }
.ssologo.google { background-image: url(/static/login-google.svg); }
.ssologo.gitlab { background-image: url(/static/login-gitlab.svg); }
.ssologo.codeberg { background-image: url(/static/login-codeberg.svg); }
.ssologo.microsoft { background-image: url(/static/login-microsoft.svg); }
.ssologo.github { background: currentColor; -webkit-mask: url(/static/login-github.svg) center / contain no-repeat;
  mask: url(/static/login-github.svg) center / contain no-repeat; }
.ssoicon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line);
  border-radius: 8px; color: var(--ink); }
.ssoicon:hover { border-color: var(--accent); }
.ssoicon .ssologo { margin: 0; }
.roomicon { border-radius: 6px; }
.account .signinbtn { display: block; text-align: center; padding: 9px 12px; border-radius: 8px; background: var(--accent);
  color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.notifybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: 14px; }
.notifybar span { flex: 1; min-width: 180px; }
.notifybar .primary { padding: 6px 14px; }
.bell-on { color: var(--teal); }
.bell-blocked, .bell-none { opacity: .5; }
.confirmbox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-soft); }
.confirmbox .notice { flex-basis: 100%; padding: 0; margin: 0; }
.confirmbox input { flex: 1 1 220px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--bg); }

/* The IRC page */
.signin.irc { max-width: 680px; }
.ircfacts { border-collapse: collapse; margin: 12px 0; }
.ircfacts th { text-align: left; padding: 4px 14px 4px 0; color: var(--dim); font-weight: 600; vertical-align: top; }
.ircfacts td { padding: 4px 0; }
.ircfacts a { margin-right: 6px; }
.signin.irc pre { background: var(--soft, rgba(127,127,127,.12)); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; font-size: 13px; margin-top: 4px; }
.signin.irc .button { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 9px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none; }
.copybtn { float: right; margin-top: -2px; font-size: 12px; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--line); background: none; color: var(--dim); cursor: pointer; }

/* Touch screens: holding a message opens our buttons (app.js), so its text
   is not selected by a long press; code stays selectable. */
@media (pointer: coarse) {
  .msg .body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .msg .body pre, .msg .body code { -webkit-user-select: text; user-select: text; }
}

/* A channel's icon on the admin page: click it to pick a new one. */
.chanicon { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px dashed var(--line);
  border-radius: 8px; cursor: pointer; font-size: 11px; color: var(--dim); overflow: hidden; }
.chanicon img { width: 100%; height: 100%; object-fit: cover; }

/* The language picker */
.site-language { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--dim); font-size: 12px; }
.site-language label { display: inline-flex; align-items: center; gap: 6px; }
.site-language select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); max-width: 11em; }
#side .site-language { padding: 6px 12px; }

/* People's own text runs in its own direction, whatever the page's language. */
.msg .body > *, .msg .body, .topic, .chan b, .chan span, .hero h1, .wiki h1 { unicode-bidi: plaintext; text-align: start; }

/* The admin, at a glance (5 Nov 2026): numbers as tiles, sizes as bars, what
   needs a look first. */
.attention { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.attention li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.attention li.urgent { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--bg)); }
.attention b { font-size: 22px; min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.attention span { flex: 1; color: var(--dim); font-size: 14px; }
.attention button { flex: none; }
.attention li.calm b { color: var(--teal); }
.tiles-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 20px; }
.stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; }
.stat b { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; color: var(--dim); font-size: 12.5px; line-height: 1.35; }
.stat small { display: block; color: var(--teal); font-size: 12px; margin-top: 2px; }
.stat.warn b, .stat.warn small { color: var(--amber); }
.meter { height: 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; margin: 8px 0 4px; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.meter.warn > i { background: var(--amber); }
.meter.bad > i { background: var(--red); }
.bars { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; margin: 0 0 18px; font-size: 13.5px; }
.bars .name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar { height: 12px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.bars .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.bars .bar.other > i { background: var(--faint); }
.bars .num { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.days { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin: 6px 0 4px; padding: 0 2px; border-bottom: 1px solid var(--line); }
.days i { flex: 1 1 0; display: block; min-width: 4px; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.days i:hover { opacity: 1; }
.days i.today { background: var(--teal); }
.days-caption { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; margin-bottom: 14px; }
/* the Visitors tab: the day, the two ticks, tables of people, pages and bots */
.visit-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 16px; }
.visit-controls select { margin-left: 6px; }
.visit-tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bot-ok { color: var(--teal); font-weight: 600; }
.bot-bad { color: var(--red); font-weight: 600; }
.days.hours i { background: var(--teal); }
/* Known crawlers: a bar a crawler, the parts of the site side by side in it.
   Four categorical slots, fixed order, checked for color-blind readers in
   both modes; the numbers are always written beside them. */
:root { --crawl-1: #2a78d6; --crawl-2: #eb6834; --crawl-3: #1baf7a; --crawl-4: #eda100; }
:root[data-theme="dark"] { --crawl-1: #3987e5; --crawl-2: #d95926; --crawl-3: #199e70; --crawl-4: #c98500; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --crawl-1: #3987e5; --crawl-2: #d95926; --crawl-3: #199e70; --crawl-4: #c98500; } }
.crawl-c1 { background: var(--crawl-1); } .crawl-c2 { background: var(--crawl-2); }
.crawl-c3 { background: var(--crawl-3); } .crawl-c4 { background: var(--crawl-4); }
.crawl-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 13px; color: var(--dim); }
.crawl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
.crawl-chart { display: grid; grid-template-columns: minmax(120px, max-content) 1fr auto; gap: 6px 12px; align-items: center; margin: 0 0 18px; font-size: 13.5px; }
.crawl-chart .num { font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
@media (max-width: 640px) {
  .crawl-chart { grid-template-columns: 1fr auto; gap: 2px 10px; }
  .crawl-chart .name { grid-column: 1 / -1; margin-top: 6px; }
}
.crawl-track { display: block; }
.crawl-bar { display: flex; gap: 2px; height: 12px; min-width: 4px; }
.crawl-bar i { display: block; min-width: 2px; flex: 1 1 0; }
.crawl-bar i:first-child { border-radius: 4px 0 0 4px; }
.crawl-bar i:last-child { border-radius: 0 4px 4px 0; }
.crawl-bar i:only-child { border-radius: 4px; }
.crawl-days { width: auto; }
.crawl-days td, .crawl-days th { text-align: center; padding: 4px 6px; min-width: 38px; font-size: 12px; white-space: nowrap; }
.crawl-days th:first-child, .crawl-days td.name { text-align: left; font-size: 13px; padding-right: 18px; }
.crawl-days td.heat { background: color-mix(in srgb, var(--accent) var(--share, 0%), transparent); font-variant-numeric: tabular-nums; color: var(--ink); }
.crawl-days td.heat.deep { color: #fff; }
.crawl-sources { margin: 14px 0 4px; }
.crawl-sources summary { cursor: pointer; color: var(--accent); font-weight: 600; }
@media (max-width: 640px) { .bars { grid-template-columns: minmax(0, 1fr) auto; } .bars .bar { grid-column: 1 / -1; } }

/* the admin's Blocked tab: what is known about an address */
.block-facts { margin: 8px 0; padding: 0 0 0 18px; font-size: 14px; }
.block-facts li { margin: 3px 0; }
.block-facts .good { color: var(--good, #1a7f37); }
.block-facts .bad { color: var(--bad, #b42318); }
/* the admin's Backup tab */
.backup-make { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; }
.backup-make label { font-size: 14px; color: var(--dim); }
.backup-row .backup-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.backup-row .backup-name:hover { color: var(--accent); }
.backup-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.backup-upload label { flex-basis: 100%; font-size: 14px; color: var(--dim); }
.notice.working { border-left: 3px solid var(--accent); padding-left: 10px; }
.notice.good { border-left: 3px solid var(--good, #1a7f37); padding-left: 10px; }
.notice.bad { border-left: 3px solid var(--bad, #b42318); padding-left: 10px; }
@media (max-width: 640px) {
  .backup-row { flex-wrap: wrap; row-gap: 2px; }
  .backup-row .backup-name { flex-basis: 100%; word-break: break-all; }
}

/* List views (6 Nov 2026): the admin's lists as a mail client shows mail.
   A bar of search and filters, the rows in a box of their own height with
   the headings held at its top, sorted by a click on a heading, and the row
   picked shown whole in the box under it. */
.listview { margin: 0 0 22px; }
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.lv-find { flex: 1 1 260px; max-width: 460px; min-width: 0; padding: 7px 12px; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; }
.lv-find:focus, .lv-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.lv-filter { max-width: 220px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 13.5px; }
.lv-bar .lv-csv { margin-left: auto; }
.lv-filter.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lv-scroll { max-height: min(60vh, 560px); overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.lv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.lv-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-soft); border-bottom: 1px solid var(--line);
  text-align: left; font-size: 12px; font-weight: 600; color: var(--dim); padding: 0; white-space: nowrap; }
.lv-table th:not(:has(button)) { padding: 7px 10px; }
.lv-sort { display: block; width: 100%; border: 0; background: none; padding: 7px 10px; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.lv-sort:hover { color: var(--ink); background: var(--hover); }
.lv-table th.sorted { color: var(--ink); }
.lv-table th.sorted .lv-sort::after { content: " ▲"; font-size: 9px; color: var(--accent); vertical-align: 1px; }
.lv-table th.sorted.down .lv-sort::after { content: " ▼"; }
.lv-table th.num, .lv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lv-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top;
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-table td.lv-text { max-width: 40ch; }
.lv-table tbody tr:last-child td { border-bottom: 0; }
.lv-table tbody tr[tabindex] { cursor: pointer; }
.lv-table tbody tr[tabindex]:hover td { background: var(--hover); }
.lv-table tbody tr:focus { outline: none; }
.lv-table tbody tr:focus-visible td { box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.lv-table tbody tr.on td { background: var(--accent-soft); }
.lv-table tbody tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.lv-table tbody tr.done td { color: var(--faint); }
.lv-table tbody tr.unread td { font-weight: 700; }
.lv-table tr.lv-none td { color: var(--faint); font-style: italic; text-align: center; padding: 18px; max-width: none; }
.lv-table a { color: var(--ink); }
.lv-table a:hover { color: var(--accent); }
.lv-foot { display: flex; align-items: center; gap: 14px; padding: 6px 2px 0; font-size: 12.5px; color: var(--faint); }
.lv-detail { position: relative; margin: 10px 0 0; padding: 14px 18px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; background: var(--bg-soft); font-size: 14px; }
.lv-close { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none;
  color: var(--dim); font-size: 20px; line-height: 1; }
.lv-close:hover { background: var(--hover); color: var(--ink); }
.lv-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 36px 8px 0; font-size: 16px; }
.lv-detail-head a { font-weight: 700; }
.lv-detail h3 { font-size: 14px; margin: 16px 0 8px; }
.lv-detail .listview { margin-bottom: 0; }
.lv-detail .lv-scroll { max-height: 340px; }
.lv-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 10px; }
.lv-facts dt { color: var(--dim); font-size: 13px; }
.lv-facts dd { margin: 0; overflow-wrap: anywhere; }
.lv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; }
.lv-actions button { border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; padding: 5px 12px; font-size: 13px; }
.lv-actions button:hover { border-color: var(--accent); color: var(--accent); }
.lv-actions button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lv-actions button.bad { color: var(--red); }
.lv-actions button.bad:hover { border-color: var(--red); }
.lv-actions label { display: inline-flex; align-items: center; gap: 4px; }
.lv-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.lv-chip.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.lv-chip.new { color: #fff; background: var(--accent); border-color: var(--accent); }
.lv-chip.open { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.lv-chip.admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lv-ip { font-variant-numeric: tabular-nums; }
.lv-paths { margin: 0; padding: 0 0 0 18px; columns: 2 280px; font-size: 13px; }
.lv-detail .bugtext { white-space: pre-wrap; margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.lv-detail .buginfo { font-size: 12px; white-space: pre-wrap; color: var(--dim); margin: 6px 0 0; }
.buginfo-box summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.lv-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; }
.lv-note textarea { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13.5px; resize: vertical; }
.lv-note button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 6px 12px; }
/* tabs inside a tab, smaller, as pills */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; overflow-x: auto; margin: 0 0 16px; padding: 4px; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--line); scrollbar-width: thin; }
.subtabs button { flex: none; border: 0; background: none; padding: 6px 12px; border-radius: 7px; color: var(--dim); font-size: 13.5px; white-space: nowrap; }
.subtabs button:hover { color: var(--ink); background: var(--hover); }
.subtabs button.on { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 21, 32, .12); }
.sub-count { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--dim); font-size: 11px; font-weight: 700; line-height: 17px; display: inline-block; }
.subtabs button.on .sub-count { background: var(--accent-soft); color: var(--accent); }
.subpart h3 { font-size: 14px; margin: 18px 0 8px; }
.visit-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.visit-two .bars { grid-template-columns: minmax(80px, 200px) minmax(0, 1fr) auto; }
@media (max-width: 860px) { .visit-two { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .subtabs { flex-wrap: nowrap; }
  .lv-table th.wide, .lv-table td.wide { display: none; }
  .lv-table td { max-width: 24ch; }
  .lv-filter { flex: 1 1 40%; max-width: none; }
  .lv-find { flex-basis: 100%; max-width: none; }
  .lv-bar .lv-csv { margin-left: 0; }
  .lv-detail { padding: 12px 12px 14px; }
  .lv-facts { grid-template-columns: 1fr; gap: 0; }
  .lv-facts dd { margin-bottom: 6px; }
  .lv-note { flex-direction: column; align-items: stretch; }
}
.lv-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; max-width: 820px; }
.lv-edit label { display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
.lv-edit input, .lv-edit select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.lv-edit button { justify-self: start; }
.lv-note .primary { background: var(--accent); color: #fff; border-color: var(--accent); }
/* a list or part of the admin waiting for its rows: a turning mark and the words */
.lv-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; vertical-align: -2px; animation: lv-turn .8s linear infinite; }
@keyframes lv-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lv-spinner { animation-duration: 2.4s; } }
.lv-table tr.lv-loading td { font-style: normal; color: var(--dim); padding: 22px; }
.lv-table tr.lv-trouble td { font-style: normal; color: var(--red); }
.listview.lv-busy tbody { opacity: .55; transition: opacity .15s; }
.lv-wait { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 14px; padding: 18px 2px; }