/* SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0 */
/* Copyright 2026 Anton (darkcite) */
/* Ephem app. Design language shared with darkcite/trading-engine-multivenue (dashboard):
   dark panels, one monospace face, uppercase accent section titles, status chips, ok/warn/bad. */
:root {
  --bg: #0f1115; --panel: #171a21; --panel2: #1d212a; --line: #262b36; --fg: #d7dbe3; --dim: #8a93a6;
  --ok: #39c26c; --warn: #e2b13c; --bad: #e25b4c; --acc: #5b9cf5; --acc-bg: rgba(91, 156, 245, .12);
  --warn-bg: rgba(226, 177, 60, .10); --bad-bg: rgba(226, 91, 76, .10);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Mode (§28.2): tor.html is index.html with data-mode="tor" (tools/stamp.py). */
html[data-mode="tor"] .direct-only, html:not([data-mode="tor"]) .tor-only { display: none !important; }
html[data-mode="tor"] .brand::after { content: " · Tor"; color: var(--ok); }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { min-height: 100dvh; display: flex; flex-direction: column; font: 14px/1.45 var(--mono); }
/* ---- shell (Appendix F.3.1): a fixed full-screen frame (the page itself never scrolls, also as
   an iPhone Home Screen app); the tab list and the pane scroll inside it. Desktop: tabs and list
   beside the pane. Phones: the list or the pane, with the tab bar always at the bottom. ---- */
html, body { height: 100%; overscroll-behavior: none; }
/* The frame as before the keyboard work (it filled the Home Screen app then): 100dvh. With the
   on-screen keyboard up (body.kbd, from visualViewport in app.js) it is the visible area above
   the keyboard. */
body { height: 100dvh; overflow: hidden; }
body.kbd { height: var(--vvh, 100dvh); min-height: 0; }
.shell { flex: 1; min-height: 0; display: grid; width: 100%; max-width: 1180px; margin: 0 auto;
  grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "tabs pane" "side pane"; }
.tabs { grid-area: tabs; display: flex; gap: 2px; padding: 8px 10px 6px; border-right: 1px solid var(--line); background: var(--bg); }
.side { grid-area: side; min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); padding: 0 10px 12px; }
.pane { grid-area: pane; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px max(12px, calc((100% - 720px) / 2)) 0; }
.pane > .view { padding-bottom: 12px; }
.pane > #chat-slot { padding-bottom: 0; }
.tabs button { flex: 1; margin: 0; padding: 6px 2px; font-size: 12px; background: transparent; border-color: transparent; color: var(--dim);
  border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; }
/* A tap leaves no focus box on a tab (keyboard focus still shows one). */
.tabs button:focus:not(:focus-visible) { outline: none; border-color: transparent; }
.tabs button[aria-selected="true"] { color: var(--acc); border-bottom-color: var(--acc); font-weight: 600; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc); color: var(--bg);
  font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
button.wide { width: 100%; }
.list h3 { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 4px; }
.rows { list-style: none; margin: 6px 0; padding: 0; }
.rows li { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.rows li:hover { background: var(--panel); }
.rows li.active { background: var(--panel); border-color: var(--line); }
.rows li .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rows li b { color: var(--fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows li .sub { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.rows li.ok .dot { background: var(--ok); }
.rows li.bad .dot { background: var(--bad); }
/* Contacts (docs/CONTACTS-UX.md): a row's primary action, the person pane, the undo toast. */
.rows li .act { margin: 0; padding: 4px 10px; font-size: 12px; flex: none; }
.side .search { margin: 6px 0; width: 100%; }
#contacts-h { margin: 14px 0 2px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.person-head { display: flex; align-items: center; gap: 10px; }
.person-head input { flex: 1; margin: 0; font-weight: 600; }
.fp { font: 600 22px/1.2 var(--mono); letter-spacing: .08em; color: var(--fg); margin: 6px 0 10px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.toast button { margin: 0; }
.notices { position: fixed; top: calc(52px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 6px; width: min(420px, calc(100% - 24px)); pointer-events: none; }
.notice { pointer-events: auto; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--acc); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); animation: notice-in .15s ease-out; }
.notice b { color: var(--fg); }
.notice .sub { color: var(--dim); font-size: 12px; }
.notice .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notice button { margin: 0; padding: 2px 8px; }
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px); } }
.rows .avatar, .person-head .avatar { width: 30px; height: 30px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff;
  background: hsl(var(--hue, 210) 45% 38%); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line); }
.rows li.ok .avatar { background: hsl(var(--hue, 210) 45% 38%); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ok); }
.rows li.bad .avatar { background: hsl(var(--hue, 210) 20% 30%); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--bad); }
.back { margin: 0; padding: 2px 10px; font-size: 16px; }
@media (min-width: 900px) { .back { display: none; } }
@media (max-width: 899px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "side" "tabs"; }
  body.pane-open .shell { grid-template-areas: "pane" "tabs"; }
  body.pane-open .side { display: none; }
  body:not(.pane-open) .pane { display: none; }
  .side { border-right: 0; }
  .tabs { border-right: 0; border-top: 1px solid var(--line); background: var(--panel); padding: 4px 6px max(6px, env(safe-area-inset-bottom)); }
  /* Installed as an iPhone Home Screen app with the strip iOS keeps under the page
     (html.short-view, app.js): the home indicator sits in that strip, outside the page, so the
     bar needs no room for it; taller buttons, flush with the bottom of the page. */
  html.short-view .tabs { padding-bottom: 0; }
  html.short-view .tabs button { min-height: 44px; font-size: 14px; }
  body.kbd .tabs { display: none; }
  body.kbd .shell, body.kbd.pane-open .shell { grid-template-rows: minmax(0, 1fr); }
  body .composer { padding-bottom: 8px; }
  /* The list's main button (New chat, Follow a channel, New channel): in the middle of the
     screen while the list is empty, otherwise centred at the bottom within thumb reach. */
  .side { display: flex; flex-direction: column; padding-bottom: 0; }
  .side > .list:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
  .list > button.wide { order: 1; position: sticky; bottom: 12px; z-index: 2; align-self: center; width: auto;
    margin: auto 0 12px; padding: 10px 24px; border-radius: 999px; font-size: 15px; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
  .list:has(> .note:not([hidden])) { justify-content: center; }
  .list:has(> .note:not([hidden])) > button.wide { order: 0; position: static; margin: 16px 0; }
  .list:has(> .note:not([hidden])) > .note { text-align: center; }
}

h1 { font-size: 15px; margin: 6px 0 4px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
h2 { margin: 0 0 6px; font-size: 13px; color: var(--acc); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lead { color: var(--dim); margin: 0 0 10px; }
.note { color: var(--dim); font-size: 12px; }
.warn { color: var(--warn); background: var(--warn-bg); border: 1px solid rgba(226, 177, 60, .35); padding: 8px 10px; border-radius: 6px; }
#error.warn { color: var(--bad); background: #2a1716; border-color: rgba(226, 91, 76, .4); cursor: pointer; }
/* Errors stay in view while the pane scrolls (the action may be far down, e.g. in Settings). */
#error { position: sticky; top: 0; z-index: 5; margin: 0 0 8px; }

/* ---- top bar: brand + chips (as the dashboard header) ---- */
.bar { flex: none; z-index: 3; display: flex; flex-wrap: nowrap; gap: 6px 10px; align-items: center; min-width: 0;
  background: var(--panel); border-bottom: 1px solid var(--line); padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
.bar > * { flex: none; }
.bar .status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand { font-weight: 700; color: var(--acc); text-decoration: none; margin-right: auto; letter-spacing: .08em; text-transform: uppercase; }
.brand::before { content: "● "; color: var(--ok); }
.pill { font-size: 12px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); white-space: nowrap; }
#me { color: var(--acc); }
.status.ok { color: var(--ok); border-color: rgba(57, 194, 108, .5); }
.status.bad { color: var(--bad); border-color: rgba(226, 91, 76, .5); }
#verified.ok { color: var(--ok); border-color: rgba(57, 194, 108, .5); }

/* ---- panels ---- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
.card p { margin: 2px 0 8px; }
details.card summary { cursor: pointer; color: var(--acc); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
details.card[open] summary { margin-bottom: 6px; }
.sub { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 8px; }

/* ---- controls ---- */
label { display: block; margin: 8px 0; color: var(--dim); font-size: 12px; }
label.row { display: flex; gap: 8px; align-items: center; color: var(--fg); font-size: 13px; }
label.row input { width: auto; accent-color: var(--acc); }
input, select, textarea { width: 100%; margin-top: 3px; font: 13px/1.4 var(--mono); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); }
textarea { resize: vertical; }
@media (pointer: coarse) { input, select, textarea { font-size: 16px; } } /* no iOS zoom on focus */
button { font: 13px var(--mono); padding: 6px 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel2);
  color: var(--fg); cursor: pointer; margin-top: 6px; }
button:hover { border-color: var(--dim); }
button.primary { color: var(--acc); border-color: var(--acc); background: var(--acc-bg); font-weight: 600; }
button.primary:hover { background: rgba(91, 156, 245, .2); }
button.danger { color: var(--bad); border-color: rgba(226, 91, 76, .6); background: var(--bad-bg); }
button.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: default; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- codes ---- */
.qr { width: min(300px, 100%); margin: 8px auto 10px; background: #fff; border-radius: 4px; }
.qr svg { display: block; width: 100%; height: auto; }
.codebox .actions { justify-content: center; }
.codebox .link { color: var(--dim); font-size: 12px; }
.exposure .addrs { color: var(--warn); white-space: pre-line; margin: 2px 0; }
.warn button { display: block; margin-top: 8px; }
#expiry { text-align: center; color: var(--warn); }

/* ---- chat ---- */
.chat { display: flex; flex-direction: column; flex: 1; }
/* Flex columns all the way down, so the chat fills the pane and the composer sits at its
   bottom (a percentage min-height does not pass through the auto-height .chatroot). */
#chat-slot, .chatroot { min-height: 100%; display: flex; flex-direction: column; }
.chatroot { flex: 1; }
.chat > .log { flex: 1 1 auto; min-height: 40dvh; }
.sas { background: var(--warn-bg); border: 1px solid rgba(226, 177, 60, .35); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.sas strong { color: var(--warn); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.sas p { margin: 4px 0; font-size: 12px; color: var(--dim); }
.sas-digits { font-weight: 700; font-size: 18px; margin: 0 8px; letter-spacing: .08em; color: var(--fg); }
.sas-emoji { font-size: 20px; letter-spacing: .2em; }
.sas.optional p, .sas.optional .actions { display: none; }
.sas.optional { padding: 4px 10px; }
.peer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0 8px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 2; }
.peer #peer { color: var(--acc); font-weight: 600; }
.peer #peer::before { content: "↔ "; color: var(--dim); }
#peer-state { color: var(--warn); }
.peer button { margin: 0; padding: 3px 8px; }
.peer .ttl { display: flex; align-items: center; gap: 3px; margin: 0 0 0 auto; color: var(--dim); }
.peer .ttl select { width: auto; margin: 0; padding: 2px 4px; }
.diag p { margin: 3px 0; font-size: 12px; overflow-wrap: anywhere; }
.diag strong { color: var(--dim); font-weight: 500; }
.resume { border-color: rgba(226, 91, 76, .6); }
.resume h2 { color: var(--bad); }
.resume textarea { margin-top: 8px; }

.log { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.log li { max-width: 85%; padding: 6px 10px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.log li.me { align-self: flex-end; background: var(--acc-bg); border-color: rgba(91, 156, 245, .35); }
.log li.sys { align-self: center; background: transparent; border: 0; color: var(--dim); font-size: 12px; cursor: default; }
.log li.sys::before { content: "— "; } .log li.sys::after { content: " —"; }
.log li .tick { font-size: 11px; color: var(--dim); margin-left: 6px; }
.log li .tick.ok { color: var(--ok); }
.log li .meta { font-size: 11px; color: var(--warn); margin-left: 6px; }
.log li .quote { display: block; font-size: 12px; color: var(--dim); border-left: 2px solid var(--acc); padding-left: 6px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log li.deleted .body { font-style: italic; color: var(--dim); }
.log li .acts { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.log li .acts button { margin: 0; padding: 2px 8px; font-size: 12px; }
.composing { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); border-left: 2px solid var(--acc);
  padding: 2px 8px; margin-top: 6px; }
.composing span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composing button { margin: 0; padding: 0 6px; }
.composer { display: flex; gap: 6px; align-items: flex-end; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line); }
.composer textarea { margin: 0; }
.composer button { margin: 0; }

/* ---- overlays, banners, footer ---- */
.scanner { position: fixed; inset: 0; background: rgba(15, 17, 21, .96); color: var(--fg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; z-index: 10; padding: 16px; }
.scanner video { width: min(480px, 100%); border-radius: 6px; border: 1px solid var(--line); background: #000; }
/* The banner comes first on screen: it takes the status-bar inset (iPhone Home Screen app), and
   the header below it then does not. */
.update:not([hidden]) ~ .bar { padding-top: 8px; }
.update { display: flex; gap: 8px; align-items: center; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--warn-bg); color: var(--warn);
  border-bottom: 1px solid rgba(226, 177, 60, .35); font-size: 12px; }
.update span { flex: 1; }
.update button { margin: 0; padding: 2px 10px; }
#build { color: var(--acc); }

/* ---- MVP-2: slots, contacts, reactions ---- */
h2 small { color: var(--dim); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.slots, .contacts { list-style: none; margin: 6px 0; padding: 0; }
.slots li, .contacts li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.slots li b, .contacts li b { color: var(--acc); }
.slots li .dim, .contacts li .dim { color: var(--dim); font-size: 12px; }
.slots li .grow, .contacts li .grow { flex: 1; min-width: 0; }
.slots li button, .contacts li button { margin: 0; padding: 2px 8px; font-size: 12px; }
.slots li input { flex: 1 1 160px; margin: 0; }
.contacts .ok { color: var(--ok); }
.log li .reacts { display: block; font-size: 13px; margin-top: 3px; }
.log li .reacts span { border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; margin-right: 4px; background: var(--bg); }
.log li .picker { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.log li .picker button { margin: 0; padding: 2px 6px; font-size: 16px; }
#b-save-contact { margin: 0; padding: 2px 8px; font-size: 12px; }
#diag-core { white-space: pre-line; }

/* ---- MVP-3: rooms ---- */
.members .role { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.members .link-bad { color: var(--bad); }
.members .link-ok { color: var(--ok); }
.room .codebox { margin-top: 8px; }
.log li .who { display: block; font-size: 11px; color: var(--acc); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

/* ---- public channels (Following, My channels) ---- */
.posts li { max-width: 100%; align-self: stretch; }
.posts li.deleted .body { color: var(--dim); font-style: italic; }
.posts .quote { border-left: 2px solid var(--line); padding-left: 6px; margin: 2px 0; }
.warn-list { margin: 6px 0; padding-left: 18px; }
/* Bridge-line check results (Appendix F.2) */
.problems { margin: 6px 0; padding-left: 18px; }
.problems .bad { color: var(--bad); }
.problems .dim { color: var(--dim); }
/* The header's Code button and its sheet ("Got a code?", from every tab) */
.codebtn { margin: 0; padding: 3px 10px; }
.sheet { position: fixed; inset: 0; z-index: 9; background: rgba(15, 17, 21, .8); display: flex; align-items: flex-start; justify-content: center;
  padding: max(56px, calc(env(safe-area-inset-top) + 48px)) 12px 12px; }
.sheet .card { width: min(560px, 100%); margin: 0; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
@media (max-width: 480px) { #me { display: none; } }
/* The way into Tor mode, visible from every tab (direct page only). */
.modebtn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 14px; font-weight: 700; font-size: 14px;
  color: #fff; background: #7d4698; border: 1px solid #a66bc4; text-decoration: none; white-space: nowrap; }
.modebtn:hover, .modebtn:focus-visible { background: #8f55ab; }
.modebtn .short { display: none; }
@media (max-width: 480px) { .modebtn .long { display: none; } .modebtn .short { display: inline; } .modebtn { padding: 4px 10px; } }
.bigmode { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 16px; min-height: 48px;
  border-radius: 12px; font-size: 17px; font-weight: 700; color: #fff; background: #7d4698; border: 1px solid #a66bc4; text-decoration: none; }
.bigmode:hover, .bigmode:focus-visible { background: #8f55ab; }

/* Display details (Settings → About): a probe for the safe-area insets. */
#safe-probe { position: fixed; left: 0; top: 0; width: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#dvh-probe { position: fixed; left: 0; top: 0; width: 0; height: 100dvh; visibility: hidden; pointer-events: none; }
#vh-probe { position: fixed; left: 0; top: 0; width: 0; height: 100vh; visibility: hidden; pointer-events: none; }
#lvh-probe { position: fixed; left: 0; top: 0; width: 0; height: 100lvh; visibility: hidden; pointer-events: none; }

/* Performance overlay (Settings → About → Performance). */
.hud { position: fixed; top: calc(44px + env(safe-area-inset-top)); left: 6px; right: 6px; z-index: 45; pointer-events: none;
  font: 11px/1.3 var(--mono); color: var(--ok); background: rgba(15, 17, 21, .85); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Debug readouts wrap on narrow screens: a long line must never widen the pane (it did, and the
   whole Settings page scrolled sideways). */
#perf-text, #disp-text, #own-diag-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 6px 0; }
.pane, .side { overflow-x: hidden; }
.pane > .view, .card { min-width: 0; max-width: 100%; }

/* Boards (docs/BOARDS.md) */
input.num { width: 7em; display: inline-block; }
input.short { width: 12em; }
.pre { white-space: pre-wrap; }
.posts .meta .trip { color: var(--ok); }
.posts .meta .cap { color: var(--warn); }
.posts .gt { color: #8fbf5a; }
.posts .mod { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.posts .mod button { margin: 0; padding: 2px 8px; font-size: 11px; }
.rows li.board .avatar::after { content: "▦"; }
.stale { color: var(--warn); }

/* Text others wrote never reorders what is around it (direction controls are refused,
   ephem_proto::text; right-to-left scripts stay inside their own box). */
.body, .grow b, .grow .sub, .log li, #bd-title, #bo-title, #r-title, #o-title, #bd-about, #r-about { unicode-bidi: isolate; }

/* Boards: long onion addresses wrap; the catalog's tools share one row. */
#bd-source, #bo-state, #bo-plain { overflow-wrap: anywhere; }
#bd-tools { flex-wrap: wrap; align-items: center; }
#bd-tools select, #bd-tools input { flex: 1 1 9em; width: auto; min-width: 0; margin: 0; }
#bo-settings > summary { cursor: pointer; list-style: none; }
#bo-settings > summary h2 { display: inline; }