/* 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(login-google.svg); }
.ssologo.gitlab { background-image: url(login-gitlab.svg); }
.ssologo.codeberg { background-image: url(login-codeberg.svg); }
.ssologo.microsoft { background-image: url(login-microsoft.svg); }
.ssologo.github { background: currentColor; -webkit-mask: url(login-github.svg) center / contain no-repeat;
  mask: url(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; }

/* Benches: the card over a bench, the directory panel, the home page's tiles and the list. */

/* Shared page chrome. Theme colors come from Benchtalk's site.css. */
:root {
  --faint: var(--dim); --teal: #087b70; --amber: #986000; --red: #ba3030; --c: #5e6878; --n: #a95200;
}
:root[data-theme="dark"] {
  --teal: #3fd1c0; --amber: #f2b042; --red: #ff6b6b; --c: #96a3b8; --n: #f7a35c; --accent-ink: #081426;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal: #3fd1c0; --amber: #f2b042; --red: #ff6b6b; --c: #96a3b8; --n: #f7a35c; --accent-ink: #081426;
  }
}
.theme-choice { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; white-space: nowrap; }
.theme-choice select {
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 13px;
}
.beginend .topbar {
  flex-wrap: wrap; gap: 12px 28px; padding-block: 16px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.beginend .topbar .brand { color: var(--ink); min-width: 0; }
.beginend-brand { flex: none; }
.beginend-brand .brandlogo { height: 30px; max-width: min(220px, 55vw); object-fit: contain; }
.beginend-brand .logo-dark { display: none; }
.beginend-brand .logo-light { display: inline; }
:root[data-theme="dark"] .beginend-brand .logo-dark { display: inline; }
:root[data-theme="dark"] .beginend-brand .logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .beginend-brand .logo-dark { display: inline; }
  :root:not([data-theme="light"]) .beginend-brand .logo-light { display: none; }
}
.beginend .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.beginend .topbar nav a { margin: 0; color: var(--dim); font-size: 14px; }
.beginend .topbar nav a:hover, .beginend .topbar .account a:hover { color: var(--accent); }
.beginend .topbar .account { flex-wrap: wrap; font-size: 14px; }
.beginend .topbar .account a { color: var(--dim); }
.beginend .topbar .account .button { color: var(--accent-ink); }
.beginend .topbar .account .button:hover { color: var(--accent-ink); filter: brightness(1.08); }
.beginend a, .directory a { text-underline-offset: .15em; }
.skip-link {
  position: absolute; top: 8px; left: 16px; z-index: 60; transform: translateY(-160%);
  padding: 10px 16px; background: var(--bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
}
.skip-link:focus { transform: none; }
.beginend :focus-visible, .bench :focus-visible, .bench-edit :focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.beginend input::placeholder, .beginend textarea::placeholder { color: var(--dim); opacity: 1; }
.beginend button:disabled, .bench-edit button:disabled { opacity: .6; cursor: wait; }
.beginend .hero { background: var(--bg); color: var(--dim); border-bottom: 1px solid var(--line); padding-block: 44px; }
.beginend .hero h1 { color: var(--ink); letter-spacing: -.025em; }
.beginend .hero .online { color: var(--dim); }
.beginend .hero .quickjoin input { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.beginend .chan { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.beginend .chan b { color: var(--ink); }
.beginend .chan span { color: var(--dim); }
.beginend .chan small { color: var(--teal); }
.beginend:has(.directory) .hero, .beginend:has(.list) .hero { display: none; }
.beginend .band #find { color: var(--ink); }
.beginend .band { padding-block: 32px 56px; }
.beginend .band > h2 { margin-top: 36px; font-size: 23px; letter-spacing: -.015em; }
.beginend .band > h2:first-child { margin-top: 0; }
.beginend .foot { padding: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }

/* The bench card */
.bench { border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.bench > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 20px; cursor: pointer; font-size: 13px;
  font-weight: 600; color: var(--dim); list-style: none;
}
.bench > summary::-webkit-details-marker { display: none; }
.bench > summary .quick { font-weight: 400; color: var(--faint); }
.bench > summary .devhere, .stats .devhere { color: var(--amber); font-weight: 700; }
/* says the card opens and closes */
.bench > summary .chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .15s; }
.bench[open] > summary .chev { transform: rotate(-135deg); }
@media (max-width: 760px) {
  .bench > summary { padding: 8px 12px; }
  .benchbody { padding: 0 12px 10px 12px; max-height: 40vh; overflow-y: auto; }
}
.benchbody { padding: 0 20px 12px 46px; font-size: 14px; }
.benchbody p { margin: 4px 0; }
.benchbody .links a { overflow-wrap: anywhere; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--dim); font-size: 13px; }
.stats .live { color: var(--teal); font-weight: 600; }
.status { color: var(--amber); }
.compat { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.compat td { padding: 2px 12px 2px 0; }
.compat .verdict { font-weight: 700; }
.compat .works .verdict { color: var(--teal); }
.compat .fails .verdict { color: var(--red); }
.compat .disputed .verdict { color: var(--amber); }
.howto { font-size: 12px; color: var(--faint); }
.claim summary { cursor: pointer; color: var(--accent); }
.claim pre { overflow-x: auto; background: var(--code-bg); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; user-select: all; }

.band #find {
  width: 100%; max-width: 440px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); margin-bottom: 14px;
}
.busy {
  display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 10px; padding: 10px 14px; text-decoration: none; color: var(--ink);
}
.busy span { font-size: 12px; color: var(--dim); }
.busy .hotcount { color: var(--amber); font-weight: 700; }
.busyrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; text-decoration: none; color: var(--ink); transition: border-color .12s;
}
.tile:hover, .busy:hover { border-color: var(--accent); }
.tile .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.tile, .busy { min-width: 0; overflow-wrap: anywhere; }
.tile .top b { font-size: 16px; }
.tile p { margin: 0; color: var(--dim); font-size: 14px; }
.tile .stats { font-size: 12px; margin-top: auto; }
.band .hint { color: var(--dim); font-size: 14px; margin-top: 20px; }
.list ul { padding-left: 20px; }
.list li { margin: 5px 0; }
.list .talk { font-size: 12px; color: var(--dim); margin-left: 6px; }
.benchlist { flex: 1; overflow-y: auto; padding: 6px 10px; }
.benchitem { display: block; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.benchitem:hover { background: var(--hover); }
.benchitem .top { display: flex; justify-content: space-between; gap: 8px; }
.benchitem p { margin: 2px 0; color: var(--dim); font-size: 13px; }
.benchitem .stats { font-size: 12px; }
@media (max-width: 860px) { .benchbody { padding-left: 20px; } }
p.all { margin: 10px 0 0; font-weight: 600; }
#panel a.all { display: block; padding: 10px 16px; font-size: 13px; border-top: 1px solid var(--line); }
.kind { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }

/* Directory search and editing. */
.directory { max-width: 1120px; margin-inline: auto; }
.directory h1, .list h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 34px); line-height: 1.2; letter-spacing: -.025em; }
.directory > p { max-width: 78ch; color: var(--dim); }
.findform, .bench-edit { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 24px 0; }
.findform { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.findform label, .bench-edit label { display: flex; flex-direction: column; min-width: 0; gap: 6px; font-size: 13px; font-weight: 600; }
.findform label { flex: 1 1 140px; }
.findform input, .findform select, .bench-edit input, .bench-edit select {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 400;
}
.findform input:hover, .findform select:hover, .bench-edit input:hover, .bench-edit select:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.findform input:focus, .findform select:focus, .bench-edit input:focus, .bench-edit select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.findform label:first-child { flex: 2 1 300px; }
.findform > a { align-self: center; font-size: 13px; }
.findform > button { padding: 9px 18px; }
.directory .tile h2 { margin: 0; font-size: 18px; }
.directory .oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.directory .tile { min-width: 0; }
.directory .tile:hover { transform: none; }
.directory .tiles { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.findpages { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.findpages a, .findpages button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 14px; }
.findpages a { text-decoration: none; }
.findpages a:hover, .findpages button:hover { background: var(--hover); }
.directory .hint { margin-block: 16px 24px; font-size: 13px; }
.bench-edit { align-items: start; }
.bench-edit label { flex: 1 1 220px; }
.bench-edit p { flex-basis: 100%; }
.bench-edit p:empty { display: none; }
.bench-edit button, .bench-admin-row > button, .bench-admin-row form button {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px;
  background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600;
}
.bench-edit button, .bench-admin-row .bench-edit button { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.bench-edit-box { margin: 10px 0; }
.bench-edit-box summary, .bench-admin-row summary { cursor: pointer; }
.bench-admin-row { margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 20px; }
.bench-admin-row h2 { font-size: 18px; margin: 4px 0; }
.bench-admin-row h2 a { color: var(--ink); text-decoration: none; }
.bench-admin-row h2 a:hover { color: var(--accent); }
.bench-admin-row > button, .bench-admin-row > details { margin: 8px 12px 8px 0; }
.bench-admin-row p { overflow-wrap: anywhere; color: var(--dim); font-size: 13px; }
.bench-admin-row summary { color: var(--accent); font-size: 14px; }
.bench-admin-row details[open] { padding-top: 10px; border-top: 1px solid var(--line); }
.bench-admin-row form:not(.bench-edit) { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 16px 0; }
.bench-admin-row form:not(.bench-edit) label { display: grid; gap: 6px; min-width: 0; font-size: 14px; }
.bench-admin-row form:not(.bench-edit) input { min-width: 0; max-width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.bench-admin-row form:not(.bench-edit) input { color: var(--ink); }
#bench-admin-notice:not(:empty) { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }

/* Claims are ordinary forms and tables, including the admin view. */
.nameclaims { max-width: 900px; }
.nameclaim { display: grid; gap: 18px; max-width: 660px; margin: 24px 0; }
.nameclaim label { display: grid; gap: 6px; color: var(--ink); font-weight: 600; }
.nameclaim input, .nameclaim textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-weight: 400;
}
.nameclaim textarea { resize: vertical; }
.nameclaim p { margin: 0; color: var(--dim); }
.nameclaim button { justify-self: start; }
.claimwords { white-space: pre-wrap; }
.claimtable { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: 20px; }
.claimtable th, .claimtable td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.claimtable th { background: var(--bg-soft); }
.claimtable td { background: var(--bg); overflow-wrap: anywhere; }
.admin .tabs { flex-wrap: wrap; }
@media (max-width: 640px) { .admin .tabs { flex-wrap: nowrap; scrollbar-width: thin; } .admin .tabs button { flex: none; white-space: nowrap; } }
.admin .tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 700px) {
  .beginend .topbar { padding: 12px 16px; gap: 12px 16px; }
  .beginend .topbar nav { flex-basis: 100%; order: 2; gap: 8px 18px; }
  .beginend .topbar .account { gap: 8px; }
  .beginend .hero { padding: 28px 16px; }
  .beginend .hero .quickjoin { margin-bottom: 20px; }
  .beginend .band { padding: 28px 16px 40px; }
  .beginend .band h2 small { display: block; margin: 6px 0 0; line-height: 1.5; }
  .beginend .chans, .beginend .bestrow { grid-template-columns: minmax(0, 1fr); }
  .findform, .bench-admin-row { padding: 16px; }
  .findform label, .findform label:first-child, .bench-edit label { flex-basis: 100%; }
  .findform input, .findform select, .bench-edit input, .bench-edit select, .beginend .quickjoin input { font-size: 16px; }
  .tile { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .beginend .tile, .beginend .chan { transition: none; transform: none; }
}

/* The notice at the top of the home page */
.wiki-banner { padding: 26px 20px; border-top: 4px solid var(--teal); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.wiki-banner .inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1100px; margin: 0 auto; padding: 0; text-align: start; }
.wiki-banner h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; color: var(--ink); }
.wiki-banner p { margin: 0; max-width: 62ch; color: var(--dim); }
.wiki-banner-go { flex: none; padding: 12px 20px; border-radius: 10px; background: var(--teal); color: #fff; font-weight: 700; text-decoration: none; }
.wiki-banner-go:hover { filter: brightness(1.08); }
html[data-theme="dark"] .wiki-banner-go { color: #06201d; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .wiki-banner-go { color: #06201d; } }
@media (max-width: 760px) { .wiki-banner .inner { flex-direction: column; align-items: flex-start; gap: 16px; } }

/* The same notice as a strip above the chat, where visitors land */
.wiki-strip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); border-top: 3px solid var(--teal); background: var(--bg-soft); font-size: 14px; }
.wiki-strip[hidden] { display: none; }
.wiki-strip a { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.wiki-strip a span { color: var(--teal); font-weight: 700; white-space: nowrap; }
.wiki-strip a:hover span { text-decoration: underline; }
.wiki-strip-close { flex: none; padding: 2px 8px; border: 0; background: none; color: var(--dim); font-size: 20px; line-height: 1; cursor: pointer; }

.catalog-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-block: 1.25rem; }
.catalog-form label { display: grid; gap: .3rem; flex: 1 1 10rem; min-inline-size: 0; }
.catalog-form label:first-child { flex-basis: 22rem; }
.catalog-form input, .catalog-form select { inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
.catalog-card { min-inline-size: 0; overflow-wrap: anywhere; }
.catalog-card h2 { margin-block-start: 0; }
.catalog-summary { white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-card .catalog-summary { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-categories { display: flex; flex-wrap: wrap; gap: .4rem .8rem; }
.catalog-opm, .catalog-status { display: inline-block; border: 1px solid currentColor; border-radius: .25rem; padding-block: .1rem; padding-inline: .35rem; }
.catalog-opm { font-weight: 600; }
.catalog-facts { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr); gap: .5rem 1rem; }
.catalog-facts dt { font-weight: 600; }
.catalog-facts dd { margin-inline-start: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.catalog-room { border-block-start: 1px solid currentColor; margin-block-start: 1.5rem; padding-block: 1rem; }
@media (max-width: 38rem) {
  .catalog-cards { grid-template-columns: minmax(0, 1fr); }
  .catalog-form label, .catalog-form label:first-child { flex-basis: 100%; }
  .catalog-facts { grid-template-columns: minmax(0, 1fr); }
  .catalog-facts dd { margin-block-end: .6rem; }
}

/* Search and category in plain sight; the other filters one tap away. */
.catalog-more { flex: 1 1 100%; }
.catalog-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.catalog-more-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-block-start: 12px; }
.catalog-more-fields label { flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.catalog-more-fields select { width: 100%; }
.catalog-more-fields > a { align-self: center; font-size: 13px; }

/* Where this comes from: the logo goes to beginend.org, and the chat says so in words. */
.brought-by { display: block; padding: 0 14px 10px; color: var(--side-dim); font-size: 12px; text-decoration: none; }
.brought-by:hover { color: var(--side-ink); text-decoration: underline; }
.wikibrand { display: inline-flex; align-items: center; gap: 10px; }
.wikibrand .brandhome { display: inline-flex; align-items: center; }
.wikibrand .wikihome { color: var(--dim); font-size: 14px; text-decoration: none; }
.wikibrand .wikihome:hover { color: var(--ink); text-decoration: underline; }

/* Member ratings */
.catalog-rating { margin-block: 18px; }
.catalog-rating h2 { margin-block: 0 4px; font-size: 16px; }
.catalog-rating-text { color: var(--dim); font-size: 14px; }
.catalog-rating-line { margin-block: 4px; min-block-size: 1em; }
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-block: 6px; }
.rate-star { padding: 2px 3px; border: 0; background: none; color: var(--dim); font-size: 24px; line-height: 1; cursor: pointer; }
.rate-star.on, .rate-star:hover { color: var(--amber, #c27a06); }
.rate-star:focus-visible, .rate-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rate-clear { margin-inline-start: 8px; padding: 2px 6px; border: 0; background: none; color: var(--dim); font-size: 12px; text-decoration: underline; cursor: pointer; }
.rate-clear[hidden] { display: none; }
.catalog-mine { margin-inline-start: 10px; font-weight: 600; }
.catalog-updating { min-block-size: 1em; margin-block: 4px; color: var(--dim); font-size: 13px; }

/* A project's README beside its facts, and its picture on the card */
.catalog-thumb { display: block; margin-block-end: 10px; }
.catalog-thumb img { display: block; inline-size: 100%; max-block-size: 150px; object-fit: contain; border-radius: 8px; background: var(--bg-soft); }
.catalog-random { margin-inline-start: 10px; font-weight: 600; }
.catalog-entry-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 28px; align-items: start; margin-block-start: 16px; }
.catalog-side .catalog-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 13px; }
.catalog-side .catalog-facts dd { margin-block-end: 8px; }
.catalog-readme { min-inline-size: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); overflow-wrap: anywhere; }
.catalog-readme > h2:first-child { margin-block-start: 0; font-size: 14px; color: var(--dim); }
.catalog-readme img { max-inline-size: 100%; block-size: auto; }
.catalog-readme table { display: block; max-inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
.catalog-readme th, .catalog-readme td { padding: 5px 10px; border: 1px solid var(--line); }
.catalog-readme pre { max-inline-size: 100%; overflow-x: auto; padding: 10px; background: var(--bg-soft); border-radius: 6px; }
.catalog-readme blockquote { margin-inline: 0; padding-inline-start: 12px; border-inline-start: 3px solid var(--line); color: var(--dim); }
@media (max-width: 860px) { .catalog-entry-grid { grid-template-columns: minmax(0, 1fr); } }

/* A small icon beside each project's name: a letter, with a picture over it when one comes */
.catalog-named { display: flex; align-items: center; gap: 10px; }
.catalog-named > a { min-inline-size: 0; }
.catalog-icon { position: relative; flex: none; display: inline-block; inline-size: 36px; block-size: 36px; overflow: hidden; border-radius: 8px; background: hsl(var(--hue, 200) 45% 42%); }
.catalog-icon > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; font-weight: 700; line-height: 1; }
.catalog-icon > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--bg); }
h1.catalog-named .catalog-icon { inline-size: 48px; block-size: 48px; border-radius: 10px; }
h1.catalog-named .catalog-icon > span { font-size: 24px; }

/* All, Components, Applications */
.catalog-types { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 14px 4px; }
.catalog-types a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.catalog-types a:hover { border-color: var(--accent); }
.catalog-types a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The live bench (live.js): a round button at the bottom right, with who is
   there as a badge, that opens to the page's bench: the latest talk, and a
   box to say something for a member. */
.live-strip[hidden] { display: none; }
.live-bench { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.live-bubble { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 28px -8px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px rgba(0, 0, 0, .15); display: grid; place-items: center;
  transition: transform .15s, background-color .15s; }
.live-bubble svg { width: 28px; height: 28px; }
.live-bubble:hover { transform: translateY(-2px); }
.live-bubble.open { background: var(--ink); color: var(--bg); }
.live-bubble.busy::after { content: ""; position: absolute; top: 4px; left: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--teal);
  border: 2px solid var(--bg); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.live-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amber); color: #1a1200;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid var(--bg); box-sizing: border-box; }
.live-badge[hidden] { display: none; }
.live-sheet { width: 340px; max-width: calc(100vw - 36px); height: min(520px, calc(100vh - 110px)); display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg); box-shadow: var(--shadow); overflow: hidden; font-size: 14px;
  animation: sheet-in .22s ease-out; }
.live-sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.live-sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: var(--accent); color: var(--accent-ink); }
.live-sheet-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.live-sheet-title svg { width: 24px; height: 24px; flex: none; }
.live-sheet-title b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-sheet-here { display: block; font-size: 12px; opacity: .85; }
.live-sheet-open { color: inherit; font-size: 12px; text-decoration: underline; white-space: nowrap; }
.live-sheet-fold { border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.live-sheet-list { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); }
.live-sheet-empty { margin: auto; color: var(--dim); text-align: center; }
.live-msg { display: grid; gap: 2px; }
.live-msg.same { margin-top: -6px; }
.live-msg-who { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.live-msg-who time { color: var(--faint); font-size: 11px; }
.live-msg-text { padding: 7px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; width: fit-content; max-width: 100%; }
.live-sheet-foot { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.live-say { display: flex; gap: 8px; align-items: flex-end; }
.live-say textarea { flex: 1; min-width: 0; resize: none; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.4; max-height: 120px; }
.live-send { padding: 8px 14px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.live-send:disabled { opacity: .6; }
.live-say-note { margin: 6px 0 0; font-size: 12px; color: var(--red); min-height: 1em; }
.live-say-note:empty { display: none; }
.live-invite { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--dim); font-size: 13px; }
.live-invite .button { padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
@media (max-width: 640px) {
  .live-bench { right: 12px; bottom: 12px; }
  .live-bubble { width: 50px; height: 50px; }
  .live-sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: min(70vh, 560px); border-radius: 16px 16px 0 0; }
  /* the open sheet is the whole bottom of the screen; the bubble would sit on its Send button */
  .live-bench:has(.live-sheet:not([hidden])) .live-bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) { .live-bubble.busy::after { animation: none; } .live-sheet { animation: none; } }

.page-bench, .catalog-room { margin-top: 28px; }
.bench-glimpse { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); padding: 10px 14px; margin: 8px 0 12px; max-width: 760px; }
.bench-glimpse:empty { display: none; }
.glimpse-head { margin: 0 0 6px; color: var(--dim); font-size: 13px; }
.glimpse-empty { margin: 0; color: var(--dim); }
.glimpse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.glimpse-list li { display: grid; grid-template-columns: minmax(0, auto) auto 1fr; gap: 2px 8px; align-items: baseline; }
.glimpse-list .live-who { min-width: 0; overflow-wrap: anywhere; }
.glimpse-list .live-text { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; }

/* Reporting a catalog entry that does not belong (CatalogReports). */
.catalog-report { margin-top: 24px; color: var(--dim); font-size: 14px; }
.catalog-report summary { cursor: pointer; color: var(--accent); }
.catalog-report-form { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.catalog-report-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: grid; gap: 4px; }
.catalog-report-form textarea { width: 100%; box-sizing: border-box; }
.catalog-report-form button { justify-self: start; }

/* Interesting: anyone's "this looks worth a look" (catalog cards and entries). */
.interest-form { display: inline-block; margin: 4px 8px 4px 0; }
.interest-button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--dim); font-size: 13px; cursor: pointer; }
.interest-button:hover { border-color: var(--accent); color: var(--accent); }
.interest-button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.interest-count { font-variant-numeric: tabular-nums; }
/* Interesting's star (catalog StarIcon): drawn, in the text's color */
.star-icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; vertical-align: -.2em; }
.interest-button:not(.on) .star-icon { fill: none; stroke-width: 1.8; }
.interest-hint { color: var(--dim); font-size: 13px; margin-bottom: 2px; }

/* Discovering: at the top of an entry, another random project, or
   interesting and then another (catalog DiscoverBar); and the catalog's own
   Random project button. */
/* the top of an entry: the way back and the folded narrowing on one line */
.band:has(> .catalog-top) { padding-top: 10px; }
.catalog-top { margin-bottom: 14px; }
.catalog-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: 14px; color: var(--dim); }
.discover-narrow { margin-left: auto; position: relative; }
.discover-narrow summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; list-style: none; font-size: 13px; color: var(--dim); background: var(--bg); }
.discover-narrow summary::-webkit-details-marker { display: none; }
.discover-narrow summary::after { content: "\25BE"; font-size: 11px; }
.discover-narrow.narrowed summary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.discover-narrow[open] summary { border-color: var(--accent); }
.narrow-icon { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.discover-narrow .discover-choice { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 8px; min-width: 220px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.discover-choice label { display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
.discover-choice select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; }
/* the two answers: a bar of their own, apart from the project */
.discover-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.discover-bar form { margin: 0; }
.discover-bar.discovering { flex-wrap: nowrap; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-soft);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03); }
.discovering .discover-no, .discovering form { flex: 1 1 0; min-width: 0; }
.discovering .discover-yes { width: 100%; }
.discover-bar .short { display: none; }
.discover-no, .discover-yes, .catalog .catalog-random {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; min-height: 46px; box-sizing: border-box;
}
.discover-no, .catalog .catalog-random { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.discover-no:hover, .catalog .catalog-random:hover { border-color: var(--accent); color: var(--accent); }
.discovering .discover-no::before { content: "\2190"; font-size: 18px; }
.random-dice::before, .catalog .catalog-random::before { content: "\1F3B2"; font-size: 17px; line-height: 1; }
.discover-yes { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); }
.discover-yes:hover { filter: brightness(1.08); }
.discover-yes .star-icon { width: 1.3em; height: 1.3em; color: #ffd54a; stroke: #ffd54a; }
.discovering .discover-yes::after { content: "\2192"; font-size: 18px; }
.catalog-top-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
@media (max-width: 380px) {
  .discovering .discover-yes::after, .discovering .discover-no::before { display: none; }
}
@media (max-width: 640px) {
  .catalog-crumbs { flex-wrap: nowrap; margin-bottom: 8px; font-size: 13px; white-space: nowrap; }
  .discover-narrow { min-width: 0; }
  .discover-narrow summary { max-width: 100%; box-sizing: border-box; }
  .discover-narrow summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .discover-bar .long { display: none; }
  .discover-bar .short { display: inline; }
  .discover-no, .discover-yes { padding: 8px 12px; font-size: 16px; }
  /* under the thumb: the answers at the bottom, the project above them */
  .discover-bar.discovering { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; gap: 10px; border-width: 1px 0 0; border-radius: 18px 18px 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); box-shadow: 0 -8px 24px rgba(0, 0, 0, .14); }
  .discovering .discover-no, .discovering .discover-yes { min-height: 52px; }
  body:has(.discover-bar.discovering) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:has(.discover-bar.discovering) .live-bench { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .discovering .discover-no, .discovering .discover-yes { gap: 6px; padding-inline: 8px; }
  body:has(.discover-bar.discovering) .interest-invite { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
.catalog-how h2 { margin-top: 28px; }
.catalog-how p { max-width: 720px; }

/* View on GitHub and the rest: the project where it lives, with that
   place's logo drawn in the button's own color (catalog ViewOnButton). */
.view-on { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
  background: var(--ink); color: var(--bg); min-height: 42px; box-sizing: border-box; }
.view-on:hover { filter: brightness(1.15); }
.host-logo { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.host-github { -webkit-mask-image: url(hosts/github.svg); mask-image: url(hosts/github.svg); }
.host-gitlab { -webkit-mask-image: url(hosts/gitlab.svg); mask-image: url(hosts/gitlab.svg); }
.host-codeberg { -webkit-mask-image: url(hosts/codeberg.svg); mask-image: url(hosts/codeberg.svg); }
.host-bitbucket { -webkit-mask-image: url(hosts/bitbucket.svg); mask-image: url(hosts/bitbucket.svg); }
.host-sourceforge { -webkit-mask-image: url(hosts/sourceforge.svg); mask-image: url(hosts/sourceforge.svg); }
.host-gitea { -webkit-mask-image: url(hosts/gitea.svg); mask-image: url(hosts/gitea.svg); }
.host-sourcehut { -webkit-mask-image: url(hosts/sourcehut.svg); mask-image: url(hosts/sourcehut.svg); }
.host-launchpad { -webkit-mask-image: url(hosts/launchpad.svg); mask-image: url(hosts/launchpad.svg); }
.host-web { -webkit-mask-image: url(hosts/web.svg); mask-image: url(hosts/web.svg); }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.download-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-weight: 600; min-height: 42px;
  box-sizing: border-box; text-decoration: none; border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); }
.download-button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------------
   The catalog, dressed up (5 Nov 2026): a header with the count, cards whose
   whole face opens the project, facts as small pills, and the reader's own
   marks (rating, Interesting) along the card's foot. */
.catalog-hero {
  position: relative; overflow: hidden; margin: 8px 0 22px; padding: 30px 32px; border-radius: 18px; color: #e9eef7;
  background: radial-gradient(600px 260px at 85% 0%, rgba(63, 209, 192, .28), transparent 70%),
              radial-gradient(500px 240px at 100% 100%, rgba(91, 140, 255, .25), transparent 70%), #0b0f16;
  background-size: cover; background-position: right center;
}
.catalog-hero.has-banner { background-image: linear-gradient(90deg, rgba(11, 15, 22, .94) 0%, rgba(11, 15, 22, .78) 42%, rgba(11, 15, 22, .1) 75%), url(catalog-banner.webp); }
@media (max-width: 760px) { .catalog-hero.has-banner { background-image: linear-gradient(180deg, rgba(11, 15, 22, .55), rgba(11, 15, 22, .92) 55%), url(catalog-banner-900.webp); } }
.catalog-hero-text { position: relative; max-width: 640px; }
.catalog-hero h1 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.02em; }
.catalog-count { margin: 4px 0 8px; font-size: 18px; font-weight: 700; color: #3fd1c0; }
.catalog-lede { margin: 0 0 16px; color: #b9c4d6; font-size: 15px; line-height: 1.55; }
.catalog-hero .catalog-top-links { margin: 0; }
.catalog-hero .catalog-random { background: #3fd1c0; border-color: #3fd1c0; color: #06201d; }
.catalog-hero .catalog-random:hover { color: #06201d; filter: brightness(1.08); }
.catalog-hero a { color: #cfe0ff; }
.catalog-hero .catalog-mine { color: #cfe0ff; }
@media (max-width: 640px) { .catalog-hero { padding: 22px 18px; border-radius: 14px; margin-top: 0; } }

/* the search box first and large */
.catalog-form input[type=search] {
  padding: 11px 14px; font-size: 16px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: var(--bg); color: var(--ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.catalog-form input[type=search]::placeholder { color: var(--dim); opacity: 1; }
.catalog-form input[type=search]:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.catalog-form input[type=search]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.catalog-form select { padding: 9px 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; }
.catalog-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* the card */
.catalog-cards { gap: 18px; }
.catalog-card { position: relative; padding: 16px 18px; border-radius: 14px; gap: 8px;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.catalog-card:hover { border-color: var(--accent); box-shadow: 0 14px 34px -20px rgba(15, 21, 32, .45); transform: translateY(-2px); }
.catalog-card h2 { font-size: 17px; line-height: 1.25; }
.catalog-card .card-link { color: var(--ink); text-decoration: none; }
.catalog-card .card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.catalog-card .card-link:focus-visible { outline: none; }
.catalog-card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* what a reader presses stays pressable above the card's link */
.catalog-card .catalog-categories a, .catalog-card .card-foot, .catalog-card .catalog-thumb { position: relative; z-index: 1; }
.catalog-card .catalog-summary { color: var(--dim); font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; }
.catalog-thumb { margin: -4px -6px 4px; }
.catalog-thumb img { max-block-size: 160px; border-radius: 10px; }
.card-facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.card-facts li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--line); color: var(--dim); font-size: 12px; line-height: 1.6; white-space: nowrap; }
.card-facts .host-logo { width: 13px; height: 13px; }
.card-facts .fact-host-name { display: none; }
.card-facts .fact-stars { color: var(--amber); font-weight: 600; }
.card-facts .status-active { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.card-facts .status-quiet { color: var(--dim); }
.card-facts .status-archived { color: var(--faint); text-decoration: line-through; }
.catalog-card .catalog-categories { gap: 6px; font-size: 12px; }
.catalog-card .catalog-categories a { color: var(--accent); text-decoration: none; }
.catalog-card .catalog-categories a:hover { text-decoration: underline; }
.catalog-card .catalog-opm { font-size: 11px; padding: 0 6px; border-radius: 999px; color: var(--teal); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.card-foot .catalog-rating-text { font-size: 13px; color: var(--amber); font-weight: 600; }
.card-foot .catalog-rating-text:not(:empty)::before { content: "\2605 "; }
.card-foot .catalog-rating-text:empty { display: none; }
.card-foot .rate-form { margin: 0; }
.card-foot .rate-star { font-size: 19px; padding: 0 1px; }
.card-foot .interest-form { margin: 0 0 0 auto; }

/* Interesting, pressed: a small lift and a +1 that floats away */
.interest-button { position: relative; transition: transform .12s, background-color .12s; }
.interest-button.pop { animation: interest-pop .45s ease-out; }
.interest-button .plus-one { position: absolute; right: 4px; top: -4px; font-size: 12px; font-weight: 700; color: var(--accent); pointer-events: none;
  animation: plus-one .8s ease-out forwards; }
@keyframes interest-pop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes plus-one { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) {
  .catalog-card, .catalog-card:hover { transition: none; transform: none; }
  .interest-button.pop, .interest-button .plus-one { animation: none; }
}

/* joining, offered once among the cards */
.catalog-join { justify-content: center; gap: 10px; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(160deg, var(--accent-soft), var(--bg) 70%); }
.catalog-join:hover { transform: none; }
.catalog-join-title { margin: 0; font-size: 18px !important; font-weight: 700; color: var(--ink) !important; }
.catalog-join-buttons { display: flex; align-items: center; gap: 14px; }
.catalog-join .button { padding: 9px 20px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }

/* the site's header on a phone: one line of links that scrolls, no theme menu */
@media (max-width: 640px) {
  .beginend .topbar { gap: 10px 14px; padding-block: 10px; }
  .beginend .topbar .theme-choice { display: none !important; }
  .beginend .topbar nav { order: 9; flex-wrap: nowrap; width: 100%; overflow-x: auto; gap: 18px; padding-bottom: 2px; scrollbar-width: none; }
  .beginend .topbar nav::-webkit-scrollbar { display: none; }
  .beginend .topbar nav a { white-space: nowrap; }
}
.interest-invite { position: fixed; left: 50%; bottom: 18px; z-index: 50; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100vw - 24px)); padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg);
  box-shadow: var(--shadow); font-size: 14px; transition: opacity .5s; }
.interest-invite a { color: var(--bg); font-weight: 700; }
.interest-invite button { border: 0; background: none; color: var(--bg); font-size: 18px; cursor: pointer; }
.interest-invite.gone { opacity: 0; }
.card-facts .fact-license { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.catalog-badge { margin-top: 8px; font-size: 14px; }
.catalog-badge summary { cursor: pointer; color: var(--accent); }
.catalog-badge pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--bg-soft); padding: 8px 10px; border-radius: 8px; }
.entry-proof { margin: 4px 0 14px; }
.entry-proof li { font-size: 13px; padding: 3px 11px; }
.entry-proof .fact-interest { color: var(--accent); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.entry-proof .fact-rating { color: var(--amber); font-weight: 600; }
.entry-proof .fact-interest { display: inline-flex; align-items: center; gap: 5px; }
/* active, quiet or archived first, with a dot of its color */
.entry-proof .fact-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.entry-proof .status-active { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); }
.entry-proof .status-quiet { color: var(--dim); }
.entry-proof .status-archived { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.catalog-entry .catalog-actions { margin: 4px 0 4px; }
.catalog-entry .catalog-actions .interest-form { margin: 0; }
.catalog-entry .catalog-actions .interest-button { min-height: 42px; padding: 8px 16px; font-size: 14px; border-radius: 8px; }
.catalog-entry .interest-hint { margin-top: 2px; }

/* Discovering, on the way out and in.  Not for me tosses the project off to
   the left, and the next rises from the bottom.  Interesting bursts a star
   from the button, the project shrinks into it, and the next drops in. */
.leaving .catalog-entry { transition: transform .5s cubic-bezier(.4, 0, 1, 1), opacity .5s ease-in; }
.leaving-no .catalog-entry { transform-origin: 10% 100%; transform: translateX(-110%) rotate(-7deg); opacity: 0; }
.leaving-yes .catalog-entry { transition-duration: .7s; transition-timing-function: cubic-bezier(.6, 0, .9, .4); transform: scale(.02); opacity: 0; }
.discover-yes.done { background: var(--teal); border-color: var(--teal); color: #06201d; }
.star-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.fly-star { position: absolute; left: 0; top: 0; display: block; margin: -.5em 0 0 -.5em; font-size: 96px; line-height: 1; color: var(--amber);
  text-shadow: 0 0 28px color-mix(in srgb, var(--amber) 70%, transparent), 0 0 4px #fff; animation: fly-star .95s cubic-bezier(.3, .1, .6, 1) forwards; }
.fly-star .star-icon { display: block; width: 1em; height: 1em; vertical-align: top; fill: #ffc531; stroke: var(--amber); stroke-width: .8;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--amber) 70%, transparent)); }
@keyframes fly-star {
  0% { transform: scale(.15) rotate(-30deg); opacity: 0; }
  28% { transform: scale(1.25) rotate(10deg); opacity: 1; }
  45% { transform: scale(1) rotate(25deg); opacity: 1; }
  100% { transform: translate(38vw, -85vh) scale(.35) rotate(220deg); opacity: 0; }
}
.star-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 8px var(--amber); animation: spark .55s ease-out .12s both; }
@keyframes spark {
  0% { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; }
}
.arrive-yes { animation: drop-in .9s cubic-bezier(.2, .9, .3, 1.12) backwards; }
.arrive-no { animation: rise-in .8s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes drop-in { from { transform: translateY(-120px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(120px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .leaving .catalog-entry, .arrive-yes, .arrive-no { transition: none; animation: none; transform: none; opacity: 1; }
  .star-burst { display: none; }
}


/* Wiki pages use the chat's palette and local system fonts. */
body.wiki { background: var(--bg); }
.wiki .topbar { gap: 12px 24px; }
.wikibrand span { color: var(--dim); font-size: 13px; font-weight: 500; }
.wiki .wikinav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.wiki .topbar .wikinav a { font-size: 13px; }
.wikisearch { display: flex; flex: 1 1 240px; gap: 6px; max-width: 360px; margin: 0; }
.wikisearch input {
  width: 100%; min-width: 0; padding: 7px 12px; border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.wikisearch input::placeholder { color: var(--dim); opacity: 1; }
.wikisearch input:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.wikisearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.wikisearch button {
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 8px; padding: 7px 12px;
  background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600;
}
.wikisearch button:hover { background: var(--hover); color: var(--ink); }
.wiki-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 100%; }
.wiki-language { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; max-width: 100%; }
.wiki-language label { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--dim); }
.wiki-language select { min-width: 0; max-width: 170px; padding: 4px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.wiki-language button { padding: 4px 8px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }

.wikipage {
  max-width: 860px; margin: 0 auto; padding: 36px 24px 72px;
  font-size: 16px; line-height: 1.7; overflow-wrap: anywhere;
}
.wikipage > h1 {
  font-size: clamp(26px, 4vw, 34px); line-height: 1.2; letter-spacing: -.025em;
  margin: 0 0 24px; font-weight: 700;
}
/* Tools are emitted at the foot; keep them beside the title without script. */
.wikipage:has(> .pagetools) { display: grid; grid-template-columns: minmax(0, 1fr); }
.wikipage:has(> .pagetools) > * { grid-column: 1; min-width: 0; }
.wikipage:has(> .pagetools) > h1 { grid-row: 1; margin-bottom: 12px; }
.wikipage > .pagetools {
  grid-row: 2; display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 0 0 28px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.pagetools a { text-decoration: none; }
.pagetools a:hover { text-decoration: underline; }
.pagetools .pagetool-print {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
}
.pagetools .pagetool-print:hover { text-decoration: underline; }
.pagetools .pagetool-print:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.wikibody { min-width: 0; }
.wikibody > :first-child { margin-top: 0; }
.wikibody h1, .wikibody h2, .wikibody h3, .wikibody h4, .wikibody h5, .wikibody h6 {
  color: var(--ink); line-height: 1.3; scroll-margin-top: 24px; font-weight: 650;
}
.wikibody h1 { font-size: 28px; margin: 40px 0 16px; }
.wikibody h2, .wikipage > h2, .wikipreview > h2 {
  font-size: 23px; line-height: 1.3; letter-spacing: -.015em;
  margin: 36px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.wikibody h3 { font-size: 19px; margin: 28px 0 10px; }
.wikibody h4 { font-size: 16px; margin: 24px 0 8px; }
.wikibody h5, .wikibody h6 { font-size: 14px; margin: 20px 0 8px; }
.wikibody p, .wikibody ul, .wikibody ol, .wikibody dl { margin: 0 0 18px; }
.wikibody ul, .wikibody ol { padding-left: 26px; }
.wikibody li { margin: 5px 0; }
.wikibody li > ul, .wikibody li > ol { margin: 6px 0; }
.wikibody dt { font-weight: 600; }
.wikibody dd { margin: 4px 0 16px 24px; }
.wikibody blockquote {
  margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line); color: var(--dim);
}
.wikibody blockquote > :last-child { margin-bottom: 0; }
.wikibody hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); }
.wikibody > hr + p:last-child:has(> em:only-child) { color: var(--dim); font-size: 13px; line-height: 1.6; }
.wikibody a { text-underline-offset: .15em; }
.wikibody pre, .wikibody code, .wikibody kbd, .wikibody samp, .wikiedit textarea {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
}
.wikibody :not(pre) > code, .wikibody kbd, .wikibody samp {
  padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--code-bg); font-size: .875em;
}
.wikibody pre {
  max-width: 100%; overflow-x: auto; margin: 20px 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--code-bg);
  color: var(--ink); font-size: 13px; line-height: 1.65; tab-size: 2; overflow-wrap: normal;
}
.wikibody pre code { font-size: inherit; }
.wikibody .code { max-width: 100%; margin: 20px 0; }
.wikibody .code pre { margin: 0; border: 0; border-radius: 0; padding: 16px 18px; }
.wikibody img, .wikibody video { max-width: 100%; height: auto; }
.wikibody figure { max-width: 100%; margin: 24px 0; }
.wikibody figcaption { margin-top: 8px; color: var(--dim); font-size: 13px; }
/* The table itself scrolls so imported Markdown needs no extra wrapper. */
.wikibody table, table.revisions {
  display: block; max-width: 100%; width: fit-content; overflow-x: auto;
  border-collapse: collapse; margin: 20px 0 24px; font-size: 14px; line-height: 1.55;
}
.wikibody th, .wikibody td, .revisions th, .revisions td {
  padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top;
  /* words stay whole in a table; a wide one scrolls instead of splitting them letter by letter */
  overflow-wrap: normal; word-break: normal; hyphens: none; min-width: 7ch;
}
.wikibody td:last-child { min-width: 22ch; }
.wikibody td a { overflow-wrap: anywhere; }
/* on a phone the columns keep a readable width each and the table scrolls sideways as a whole */
@media (max-width: 700px) {
  .wikibody td, .wikibody th { min-width: 9ch; max-width: 18ch; }
  .wikibody td:last-child, .wikibody th:last-child { min-width: 32ch; max-width: 44ch; }
}
.wikibody th, .revisions th { background: var(--bg-soft); font-weight: 600; }
.wikibody tr:nth-child(even) td { background: var(--bg-soft); }
.wikibody td > :last-child { margin-bottom: 0; }
.wikipage .byline, .wikipage .categories, .wikipage .notice, .wikiedit .fine {
  color: var(--dim); font-size: 13px; line-height: 1.6;
}
.wikipage .byline { margin: 16px 0 0; }
.wikipage .notice { padding: 0; }
.wikipage .notice:not(:empty) {
  padding: 12px 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
}
.wikipage .problem {
  color: var(--red); background: var(--bg-soft); border-left: 3px solid var(--red);
  padding: 12px 16px; border-radius: 4px;
}
.categories {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 32px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.categories a { text-decoration: none; }
.categories a:hover { text-decoration: underline; }

.wiki.edit .wikipage { max-width: 1040px; }
.wikiedit label { display: block; margin: 18px 0 8px; font-size: 14px; font-weight: 600; }
.wikiedit input, .wikiedit textarea {
  display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.wikiedit input { margin-top: 6px; }
.wikiedit textarea {
  height: 55vh; min-height: 320px; resize: vertical; font-size: 14px; line-height: 1.65; tab-size: 2;
}
.wikiedit > p:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wikiedit button {
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--ink); font-weight: 600;
}
.wikiedit button[type="submit"]:not([name]) { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.wikiedit button[name]:hover { background: var(--hover); }
.wikiedit .fine { margin: 16px 0; }
/* the editor (wiki-edit.js): a bar with the formatting tools over the text
   and the views on the right, then the text and the page as it will look,
   side by side on a wide screen and by tabs on a phone, then a line for
   help and news */
.wikiedit-shell { margin: 18px 0 0; }
.wikiedit-bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px;
  padding: 6px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg-soft); }
/* side by side: the tools stand over the text, the views over the page */
.wikiedit-bar[data-mode="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; gap: 0; }
.wikiedit-bar[data-mode="split"] .wikitools { padding: 6px; }
.wikiedit-bar[data-mode="split"] .wikiedit-side { justify-content: flex-end; height: 100%; padding: 6px; border-left: 1px solid var(--line); }
.wikiedit-bar[data-mode="preview"] .wikitools { visibility: hidden; }
.wikitools { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.wikiedit-side { display: flex; align-items: center; justify-content: flex-end; gap: 6px; box-sizing: border-box; }
.wikiedit .wikitool { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 32px; height: 32px; padding: 0 7px;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; }
.wikiedit .wikitool:hover:not(:disabled), .wikiedit .wikitool[aria-expanded="true"] { border-color: var(--line); background: var(--bg); }
.wikiedit .wikitool:focus-visible, .wikiedit .wikiedit-mode:focus-visible, .wikiedit .wikiedit-whole:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wikiedit .wikitool:disabled { opacity: .35; }
.wikitool-more { font-size: 10px; color: var(--dim); }
.wikitool svg, .wikiedit-whole svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wikitool svg circle { fill: currentColor; stroke: none; }
.wikitool svg rect + circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.wikitool-gap { width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.wikiedit-modes { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.wikiedit .wikiedit-mode { padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; font-weight: 600; font-size: 13px; color: var(--dim); }
.wikiedit .wikiedit-mode:hover { color: var(--ink); }
.wikiedit .wikiedit-mode[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.wikiedit .wikiedit-whole { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--dim); }
.wikiedit .wikiedit-whole:hover { border-color: var(--line); background: var(--bg); color: var(--ink); }
.wikiedit-panes { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--line); overflow: hidden; }
.wikiedit-panes textarea { border: 0; border-radius: 0; margin: 0; }
.wikiedit-panes textarea:focus { outline: none; }
.wikiedit-shell:focus-within .wikiedit-panes { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.wikiedit-shell.dropping .wikiedit-panes { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-soft); }
.wikiedit-view { height: 55vh; min-height: 320px; overflow: auto; padding: 14px 20px; background: var(--bg); transition: opacity .15s; }
.wikiedit-view.busy { opacity: .6; }
.wikiedit-view .wikibody { max-width: none; }
.wikiedit-panes[data-mode="write"] .wikiedit-view, .wikiedit-panes[data-mode="preview"] textarea { display: none; }
.wikiedit-panes[data-mode="split"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wikiedit-panes[data-mode="split"] .wikiedit-view { border-left: 1px solid var(--line); }
.wikiedit-panes[data-mode="split"] textarea { resize: none; }
.wikiedit-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 7px 10px; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 8px 8px; background: var(--bg-soft); font-size: 13px; color: var(--dim); }
.wikiedit-hint { flex: 1 1 auto; min-width: 0; }
.wikiedit-news { color: var(--ink); font-weight: 600; }
.wikiedit-news.bad { color: var(--red, #c0392b); }
.wikiedit .wikiedit-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.wikiedit .wikiedit-link:hover { text-decoration: underline; }
.wikiedit-help { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); font-size: 13px; }
.wikiedit-help table { width: 100%; border-collapse: collapse; }
.wikiedit-help td { padding: 5px 8px; vertical-align: top; border-bottom: 1px solid var(--line); }
.wikiedit-help td:first-child { width: 46%; }
.wikiedit-help code { white-space: pre-wrap; font-size: 12.5px; }
.wikiedit-help .fine { margin: 10px 0 0; }
.wikiedit input::placeholder { color: var(--faint); font-weight: 400; }
/* full screen: the editor fills the window, the rest of the form below it */
html.wikiedit-whole { overflow: hidden; }
.wikiedit-shell.whole { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; margin: 0; padding: 12px; background: var(--bg); }
.wikiedit-shell.whole .wikiedit-panes { flex: 1; min-height: 0; }
.wikiedit-shell.whole .wikiedit-panes textarea, .wikiedit-shell.whole .wikiedit-view { height: 100%; min-height: 0; }
.wikiedit-shell.whole .wikiedit-help { max-height: 40vh; overflow: auto; }
.wikiedit .wikiedit-whole[aria-pressed="true"] { color: var(--accent); }
/* the small boxes under a tool: page finder, heading menu, table grid, images */
.wikitools-pop { position: absolute; top: 100%; z-index: 60; min-width: 240px; margin-top: 4px; padding: 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.wikitools-pop input { margin: 0; padding: 7px 10px; font-size: 14px; }
.wikitools-found { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow: auto; }
.wikiedit .wikitools-found button { display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0; background: transparent; font-weight: 500; }
.wikiedit .wikitools-found button:hover { background: var(--hover); }
.wikitools-new button { color: var(--dim); font-style: italic; }
.wikitools-menu { min-width: 190px; padding: 6px; }
.wikiedit .wikitools-menu button { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; }
.wikiedit .wikitools-menu button:hover, .wikiedit .wikitools-menu button:focus-visible { background: var(--hover); outline: none; }
.wikiedit .wikitools-menu button[aria-current="true"] { color: var(--accent); }
.wikiedit .wikitools-menu .wikitools-h2 { font-size: 18px; }
.wikiedit .wikitools-menu .wikitools-h3 { font-size: 16px; }
.wikiedit .wikitools-menu .wikitools-h4 { font-size: 14px; }
.wikiedit .wikitools-menu .wikitools-h0 { font-size: 14px; font-weight: 400; }
.wikitools-grid { display: grid; grid-template-columns: repeat(6, 22px); gap: 3px; }
.wikiedit .wikitools-grid button { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-soft); }
.wikiedit .wikitools-grid button.on { background: var(--accent-soft); border-color: var(--accent); }
.wikitools-size { margin: 6px 0 0; min-height: 1.4em; font-size: 13px; color: var(--dim); }
.wikitools-images { width: min(460px, calc(100vw - 40px)); max-height: 70vh; overflow: auto; }
.wikiimg-head { display: flex; gap: 8px; }
.wikiimg-head input { flex: 1; }
.wikiedit .wikiimg-upload { flex: none; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); padding: 6px 12px; }
.wikitools-images h3 { margin: 12px 0 6px; font-size: 13px; color: var(--dim); font-weight: 600; }
.wikiimg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.wikiimg-list .fine { grid-column: 1 / -1; margin: 0; }
.wikiedit .wikiimg { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-soft); font-weight: 400; }
.wikiedit .wikiimg:hover { border-color: var(--accent); }
.wikiimg img { width: 100%; height: 70px; object-fit: contain; background: var(--bg); border-radius: 4px; }
.wikiimg img:not([src]), .wikiimg img[src=""] { visibility: hidden; }
.wikiimg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; text-align: left; }
.wikiimg-tip { margin: 10px 0 4px; }
.wikiimg-all { font-size: 13px; }
@media (max-width: 899px) {
  .wikiedit-bar { grid-template-columns: minmax(0, 1fr); }
  .wikiedit-side { order: -1; }
  .wikiedit-modes { flex: 1; }
  .wikiedit .wikiedit-mode { flex: 1; }
  /* one row of tools that scrolls sideways, as on GitLab */
  .wikitools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wikitools::-webkit-scrollbar { display: none; }
  .wikiedit .wikitool { min-width: 38px; height: 38px; flex: none; }
  .wikitools-pop { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 70vh; }
}
.wikipreview { border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 32px; }
.wikipreview > h2 { margin-top: 0; font-size: 19px; }
.wikipreview .wikibody { max-width: 812px; margin-inline: auto; }
.revisions { overflow-wrap: normal; }
.revisions td { min-width: 8ch; }
.revisions td:last-child { min-width: 18ch; }
.revisions form { display: inline; }
.revisions .small-link { color: var(--accent); font-size: 13px; }
.hit { padding: 18px 0; border-bottom: 1px solid var(--line); }
.hit p { margin: 6px 0 0; color: var(--dim); font-size: 14px; }
.letters { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 0; border-block: 1px solid var(--line); }
.letters a { min-width: 28px; padding: 4px; text-align: center; text-decoration: none; border-radius: 6px; }
.letters a:hover { background: var(--accent-soft); }
.wikipages { columns: 2 260px; padding-left: 22px; font-size: 14px; }
.wikipages li { break-inside: avoid; overflow-wrap: anywhere; padding: 4px 0; }
.wikidiff { width: 100%; border-collapse: collapse; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; table-layout: fixed; }
.wikidiff th, .wikidiff td { text-align: left; vertical-align: top; padding: 4px 8px; }
.wikidiff th:nth-child(-n+2), .wikidiff .lineno { width: 5ch; color: var(--dim); }
.wikidiff th:nth-child(3), .wikidiff .mark { width: 3ch; }
.wikidiff td:last-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.wikidiff .added { background: color-mix(in srgb, var(--teal) 14%, var(--bg)); }
.wikidiff .removed { background: color-mix(in srgb, var(--red) 14%, var(--bg)); }
.wikidiff ins, .wikidiff del { text-decoration: none; }
.wikidiff .added .mark { color: var(--teal); }
.wikidiff .removed .mark { color: var(--red); }
.wikibody a:focus-visible, .pagetools a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 700px) {
  .wiki .topbar { gap: 10px 16px; }
  .wiki .topbar .wikinav { flex-wrap: nowrap; overflow-x: auto; gap: 16px; scrollbar-width: none; padding-bottom: 2px; }
  .wiki .topbar .wikinav::-webkit-scrollbar { display: none; }
  .wiki .topbar .wikinav a { white-space: nowrap; }
  .wiki .topbar .account { font-size: 13px; }
  .wiki .wikisearch { order: 3; flex-basis: 100%; max-width: none; }
  .wiki .topbar .wikinav { order: 4; flex-basis: 100%; }
  .wikipage { padding: 28px 16px 48px; }
  .wikibody h2 { font-size: 21px; }
  .wikibody pre, .wikibody .code pre { padding: 12px; }
  .wikipreview { padding: 16px; }
  .wikiedit textarea { min-height: 280px; font-size: 16px; }
  .wikiedit input, .wikisearch input, .wiki-language select { font-size: 16px; }
  .wikidiff th, .wikidiff td { padding-inline: 4px; }
}

/* Recent changes: the time stays whole; on a phone each change is a small card. */
.changes .revisions td:nth-child(2) { white-space: nowrap; }
@media (max-width: 700px) {
  .changes table.revisions, .changes .revisions tbody, .changes .revisions tr, .changes .revisions td { display: block; width: auto; min-width: 0; border: 0; padding: 0; }
  .changes .revisions tr:first-child { display: none; }
  .changes .revisions tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .changes .revisions td:first-child { font-weight: 600; overflow-wrap: anywhere; }
  .changes .revisions td:nth-child(2) { color: var(--ink); font-size: 14px; }
  .changes .revisions td:nth-child(3), .changes .revisions td:nth-child(4) { color: var(--dim); font-size: 13px; }
}

/* --------------------------------------------------------------------------
   The article, dressed (5 Nov 2026): a table of contents beside long pages,
   code in color with a copy button, languages as pills, pictures framed. */
.wikipage.has-side { max-width: 1140px; }
@media (min-width: 1180px) {
  .wikipage.has-side { grid-template-columns: minmax(0, 1fr) 250px; column-gap: 44px; }
  .wikipage.has-side > .wiki-side { grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 18px; padding-right: 4px; }
  .wiki-side .toc { margin: 0; }
  .wiki-side .page-feedback { margin: 0; padding: 12px 14px; }
  .wiki-side .feedback-q { font-size: 13px; }
  .wiki-side .feedback-form { gap: 6px; }
  .wiki-side .feedback-answer { padding: 4px 11px; font-size: 12.5px; }
  .wiki-side .feedback-thanks { font-size: 12.5px; }
  .wiki-side .page-bench { margin: 0; padding: 14px 16px; }
  .wiki-side .page-bench h2 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
  .wiki-side .page-bench p { font-size: 13.5px; margin: 6px 0 0; }
  .wiki-side .bench-glimpse { max-width: none; padding: 8px 10px; }
  .wiki-side .glimpse-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .wiki-side .page-bench .button { display: inline-block; margin-top: 8px; padding: 6px 12px; font-size: 13px; }
}
@media (max-width: 1179px) { .wiki-side:empty { display: none; } .wikipage.has-side > .wiki-side { grid-row: 3; } }
.toc { font-size: 13.5px; line-height: 1.45; margin: 0 0 24px; }
.toc summary { cursor: pointer; font-weight: 700; color: var(--dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; list-style: none; padding: 6px 0; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.toc details[open] > summary::before { transform: rotate(90deg); }
.toc ol { list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); }
.toc li { margin: 0; }
.toc li.sub { padding-left: 12px; }
.toc a { display: block; padding: 4px 8px; color: var(--dim); text-decoration: none; border-radius: 6px; margin-left: -10px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); background: var(--bg-soft); }
.toc a.now { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 1179px) {
  .toc { border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; background: var(--bg-soft); }
  .toc ol { border-left: 0; padding-left: 0; columns: 2 240px; column-gap: 24px; margin-bottom: 8px; }
  .toc li { break-inside: avoid; }
  .toc a { margin-left: 0; }
}

/* the Pascal in a code block, in the chat's colors (site.css names the rest) */
.wikibody .strings, .wikibody .characters { color: var(--s); }
.wikibody .directive { color: var(--d); font-weight: 600; }
.codebox { position: relative; margin: 20px 0; }
.codebox pre { margin: 0; }
.codebox .copybtn { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--dim); font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.codebox:hover .copybtn, .codebox .copybtn:focus-visible, .codebox .copybtn.ok { opacity: 1; }
.codebox .copybtn.ok { color: var(--teal); border-color: var(--teal); }
@media (hover: none) { .codebox .copybtn { opacity: 1; } }

/* the page's languages as pills; the one being read is filled in */
.wikipage .notice.languages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.languages a, .languages b, .more-languages { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--dim); text-decoration: none; line-height: 1.5; }
.languages a:hover { border-color: var(--accent); color: var(--accent); }
.languages b { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.languages a[hidden] { display: none; }
.more-languages { cursor: pointer; font: inherit; font-size: 13px; color: var(--accent); }

/* pictures, tables and the rest of the body */
.wikibody img { border-radius: 6px; }
/* the old wiki's note icon, a 128 px Commons picture shown inline at text size */
.wikibody img[src$="/Nuvola_apps_ktip.png"] { height: 1.5em; width: auto; vertical-align: text-bottom; border-radius: 0; }
.wikibody figure { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); width: fit-content; max-width: 100%; }
.wikibody figure img { display: block; margin: 0 auto; }
.wikibody table { border-radius: 8px; }
.wikibody th { position: sticky; top: 0; }
/* a sentence, so no gaps of a row between its words and the period */
.wikipage .byline { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); }
.wikipage .page-bench { margin-top: 32px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.wikipage .page-bench h2 { margin: 0 0 8px; font-size: 17px; border: 0; padding: 0; }
.wikipage .page-bench p:last-child { margin-bottom: 0; }

/* search: the box in one piece, the hits as cards with the words marked */
.wikipage .wikisearch { max-width: 560px; margin: 0 0 20px; }
.wikipage .wikisearch input { padding: 11px 14px; font-size: 16px; border-radius: 10px; }
.wikipage .wikisearch button { white-space: nowrap; padding: 0 16px; border-radius: 10px; }
.hit { padding: 14px 16px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.hit h2 { margin: 0; font-size: 17px; border: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hit h2 a { text-decoration: none; }
.hit h2 a:hover { text-decoration: underline; }
.hit-lang { font-size: 12px; font-weight: 500; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.hit p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }
.hit mark, .wikibody mark { background: color-mix(in srgb, var(--amber) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Did this page help?  One question at the foot, three answers, a reason in
   one more tap; and the line at the top of a page readers found wanting. */
.page-feedback { margin-top: 28px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); font-size: 14px; }
.feedback-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.feedback-why { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.feedback-q { flex-basis: 100%; font-weight: 600; margin-bottom: 2px; }
.feedback-answer { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.feedback-answer:hover { border-color: var(--accent); color: var(--accent); }
.feedback-answer.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.feedback-thanks { margin: 10px 0 0; color: var(--dim); }
.feedback-count { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--bg-soft); color: var(--dim); font-size: 11px; font-weight: 700; line-height: 1.6; text-align: center; }
.feedback-answer.on .feedback-count { background: rgba(255, 255, 255, .25); color: inherit; }
.needs-work { border-left: 3px solid var(--amber) !important; }
.needs-work-list { padding-left: 24px; line-height: 1.7; }
.needs-work-list .dim { color: var(--dim); font-size: 13px; }

/* The site's bar on top, as the catalog has it; the wiki's own line under
   it: its name, the search, and its pages. */
.wiki .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.wiki .topbar nav a[aria-current] { color: var(--ink); font-weight: 600; }
.wikibar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px max(20px, calc((100% - 1240px) / 2)); background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.wikihome { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.wikihome:hover .wikiname { text-decoration: underline; }
.wikitag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: 999px; padding: 1px 7px; }
.wikibar .wikisearch { flex: 1 1 240px; max-width: 420px; }
.wikibar .wikinav { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 4px 20px; font-size: 13px; margin-top: -2px; }
.wikibar .wikinav a { color: var(--dim); text-decoration: none; font-weight: 600; }
.wikibar .wikinav a:hover { color: var(--accent); }
@media (max-width: 700px) {
  .wiki .topbar nav { order: 9; flex-wrap: nowrap; width: 100%; overflow-x: auto; gap: 18px; scrollbar-width: none; padding-bottom: 2px; }
  .wiki .topbar nav::-webkit-scrollbar { display: none; }
  .wiki .topbar nav a { white-space: nowrap; }
  .wikibar { gap: 8px 14px; padding: 8px 12px; }
  .wikibar .wikisearch { order: 2; flex-basis: 100%; max-width: none; }
  .wikibar .wikinav { order: 3; margin-top: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .wikibar .wikinav::-webkit-scrollbar { display: none; }
  .wikibar .wikinav a { white-space: nowrap; }
}

/* Copy, an icon at the top right of a block */
.wikibody .codebar .copy, .codebox .copybtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; }
.wikibody .codebar .copy svg, .codebox .copybtn svg { width: 16px; height: 16px; }
.wikibody .codebar .copy.ok, .codebox .copybtn.ok { color: var(--teal); }

/* a long block of code in a box twenty lines tall: it scrolls, its foot
   drags taller or shorter, and the bar under it shows it whole (wiki.js) */
.wikibody .scrollbox pre {
  height: calc(20 * 1.65em + 32px); min-height: calc(5 * 1.65em + 32px);
  overflow: auto; resize: vertical;
}
.wikibody .scrollbox.whole pre { height: auto !important; resize: none; }
.wikibody .code-boxbar {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 0 14px; border-top: 1px solid var(--line); background: var(--code-bar);
}
.wikibody .code-whole {
  flex: 1 1 auto; margin: 0; padding: 9px 0; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.wikibody .code-whole:hover { text-decoration: underline; }
.wikibody .code-whole:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wikibody .codebox .code-boxbar { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; }
.wikibody .codebox.scrollbox pre { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Save as PDF, or print: the page's text alone, in light colors whatever
   the theme, the way a reader wants it on paper. */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --bg-soft: #f6f7fa; --line: #d5dae3; --ink: #111; --dim: #4a5262; --faint: #6b7383;
    --accent: #1d4fb8; --code-bg: #f5f7fb; --code-bar: #eceff5;
    --k: #7a2fa0; --c: #5e6878; --s: #1d6e44; --n: #a04f00; --d: #1d4fb8; --sym: #333;
    color-scheme: light;
  }
  @page { margin: 16mm 15mm 18mm; }
  html, body { background: #fff !important; color: #111; }
  body { font-size: 11pt; }
  .skip-link, .topbar, .wikibar, .live-strip, .live-bench, .pagetools, .wiki-side, .page-feedback, .page-bench,
  .notice.languages, .codebar, .copy, .toc, .categories, .code-boxbar { display: none !important; }
  .wikibody .scrollbox pre { height: auto !important; overflow: visible !important; resize: none; }
  .wikipage, .wikipage.has-side, .wikipage:has(> .pagetools) {
    display: block !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  }
  .wikipage > h1 { font-size: 22pt; margin: 0 0 4mm; }
  .wikipage > h1::after {
    content: "pascal.chat/wiki"; display: block; margin-top: 2mm;
    font-size: 9pt; font-weight: 400; letter-spacing: 0; color: var(--dim);
  }
  .wikibody h1, .wikibody h2, .wikibody h3, .wikibody h4 { break-after: avoid; page-break-after: avoid; }
  .wikibody h2 { font-size: 16pt; }
  .wikibody h3 { font-size: 13pt; }
  .wikibody p, .wikibody li { orphans: 3; widows: 3; }
  .wikibody img, .wikibody figure, .wikibody tr { break-inside: avoid; page-break-inside: avoid; }
  .wikibody img { max-width: 100% !important; height: auto; }
  .wikibody .code { overflow: visible !important; }
  .wikibody pre {
    white-space: pre-wrap !important; overflow-wrap: anywhere; overflow: visible !important;
    max-height: none !important; border: 1px solid var(--line); box-shadow: none;
  }
  .wikibody pre { break-inside: avoid; page-break-inside: avoid; font-size: 9pt; }
  /* on screen a wide table scrolls; on paper it is a table again, its words free to wrap */
  .wikibody table { display: table !important; width: auto; max-width: 100%; overflow: visible !important; font-size: 9pt; }
  .wikibody th, .wikibody td { overflow-wrap: anywhere; }
  .wikibody thead { display: table-header-group; }
  .wikibody a { color: var(--accent); text-decoration: none; }
  /* an outside address written out after its link, since paper cannot be clicked */
  .wikibody a[href^="http"]:not([href*="pascal.chat"])::after {
    content: " (" attr(href) ")"; font-size: 8.5pt; color: var(--dim); overflow-wrap: anywhere;
  }
  .byline { margin-top: 8mm; font-size: 9pt; color: var(--dim); }
}

/* after a reason: what it did, and a line to say more */
.feedback-noted { margin: 10px 0 0; font-weight: 600; }
.feedback-note { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 8px; }
.feedback-note label { flex: 1 1 260px; display: grid; gap: 4px; font-size: 13px; color: var(--dim); }
.feedback-note input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 14px; }
.feedback-sent { margin: 10px 0 0; font-weight: 600; }
.feedback-sent q { font-weight: 400; font-style: italic; }
.feedback-change { margin-top: 6px; font-size: 14px; }
.feedback-change > summary { cursor: pointer; color: var(--accent); width: max-content; }
.needs-work-note { display: block; margin: 2px 0 6px; color: var(--ink); font-size: 14px; }

/* a static mirror of the wiki (SPEC 45): the wiki's bar alone, a line
   saying it is a mirror, title search from the copy's own list */
.mirror .mirror-bar { position: relative; }
.mirror .mirror-bar .theme-choice select { font-size: 13px; padding: 2px 4px; }
.mirror-note { margin: 0; padding: 6px max(20px, calc((100% - 1240px) / 2)); font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--line); }
.mirror-search { position: relative; }
.mirror-results { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px 0; list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px rgb(0 0 0 / .18); max-height: 70vh; overflow: auto; }
.mirror-results a { display: block; padding: 6px 12px; color: var(--ink); text-decoration: none; }
.mirror-results a:hover, .mirror-results a.picked { background: var(--hover); }
.mirror-results .mirror-more a { color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); }
.pagelist { columns: 18em; column-gap: 28px; padding-left: 1.2em; }
.pagelist li { break-inside: avoid; margin: 2px 0; }
.mirror-list li { margin: 4px 0; }
.mirror-steps pre { margin: 6px 0 10px; }
.mirror-found-list { padding-left: 1.4em; }
.mirror-found-list li { margin: 0 0 14px; }
.mirror-found-list li > a { font-weight: 600; }
.mirror-found-list p { margin: 2px 0 0; }
.mirror-found-list mark { background: color-mix(in srgb, var(--amber) 30%, transparent); color: inherit; padding: 0 1px; }