/* Chatiferous. Telegram's palette and shapes (values observed from Telegram Web),
   with larger text and targets for readability. Phone first. */

:root {
  color-scheme: light;
  --accent: #3390ec;
  --pill: #1f6fc5;          /* accent dark enough for small white text (5:1) */
  --accent-dark: #2a7bd0;
  --accent-soft: rgba(51,144,236,.1);
  --accent-ring: rgba(51,144,236,.5);
  --link: #1f6cbf;
  --bg: #f4f4f5;
  --panel: #ffffff;
  --hover: #f4f4f5;
  --text: #000000;
  --muted: #686d72;
  --border: #dadce0;
  --popover: #ffffff;
  --popover-edge: rgba(0,0,0,.12);
  --popover-hover: #f1f1f4;
  /* The one halo for hover, press and open, everywhere: a wash of the theme's text colour, so it
     stands off any surface beneath it (page, bar, menu, sheet) by the same amount. */
  --halo: rgba(0,0,0,.10);
  --divider: #e7e7e9;
  --danger: #d32f2f;
  --ok-bg: #e7f6e9;
  --error-bg: #fdecea;
  --error-text: #9b1c1c;
  --muted-badge: #8e9499;
  --shadow: rgba(114,114,114,.25);
  /* Chat */
  --wallpaper: linear-gradient(135deg, #dbddbb 0%, #6ba587 35%, #d5d88d 70%, #88b884 100%);
  --chip-bg: rgba(50, 80, 38, .8);
  --bubble-in: #ffffff;
  --bubble-out: #eeffde;
  --meta: #6f757b;
  --out-accent: #2f8a2c;
  --out-meta: #2c7a2b;
  --out-link: #1a64b3;
  --out-soft: rgba(79,174,78,.15);
  --code-bg: rgba(0,0,0,.05);
  --spoiler: #9aa0a6;
  --unread-bar: rgba(255,255,255,.88);
  --wp-lines: #2d4a26;
  --wp-opacity: .15;
  --glass: rgba(255,255,255,.55);
  --glass-edge: rgba(255,255,255,.7);
  --glass-shine: rgba(255,255,255,.8);
  --n0: #d45246; --n1: #c75f14; --n2: #6c61df; --n3: #2f8a2c; --n4: #177f73; --n5: #3a7fc0; --n6: #d0476a;
  --back-ink: var(--accent);
  --radius: 12px;
  --tap: 48px;
  font-size: 17px;
}

/* Dark theme: Telegram's dark palette (Web A). theme.js sets data-theme on <html>,
   following the device setting unless the member picked Light or Dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #8774e1;
  --pill: #6a55d6;
  --accent-dark: #9a89f0;
  --accent-soft: rgba(135,116,225,.18);
  --accent-ring: rgba(135,116,225,.6);
  --link: #a99bff;
  /* A lone Back glyph needs more than the accent, which is a dim purple here. */
  --back-ink: #b3a9ff;
  --bg: #0f0f0f;
  --panel: #212121;
  --hover: #2c2c2c;
  --text: #ffffff;
  --muted: #aaaaaa;
  --border: #3b3b3d;
  --popover: #3c3c44;          /* a menu is a surface above the page, and should look it */
  --popover-edge: #5f5f6b;
  --popover-hover: #4a4a54;
  --halo: rgba(255,255,255,.10);
  --divider: #2f2f31;
  --danger: #ff6b6b;
  --ok-bg: #1f3324;
  --error-bg: #3a1f1f;
  --error-text: #ffb4ab;
  --muted-badge: #717579;
  --shadow: rgba(0,0,0,.45);
  --wallpaper: linear-gradient(135deg, #0b0c16 0%, #110c1b 40%, #150b15 70%, #0b0e18 100%);
  --chip-bg: rgba(72, 87, 97, .6);
  --bubble-in: #34343b;
  --bubble-out: #6456bd;
  --meta: #a0a0a0;
  --out-accent: #ffffff;
  --out-meta: rgba(255,255,255,.88);
  --out-link: #ffffff;
  --out-soft: rgba(255,255,255,.16);
  --code-bg: rgba(255,255,255,.09);
  --spoiler: #5c5c5c;
  --unread-bar: rgba(33,33,33,.92);
  --wp-lines: linear-gradient(135deg, #6a5acd 0%, #8a4fbf 40%, #c0507e 70%, #4f6bd5 100%);
  --wp-opacity: .42;
  --glass: rgba(44,44,48,.5);
  --glass-edge: rgba(255,255,255,.14);
  --glass-shine: rgba(255,255,255,.1);
  --n0: #ff8a7a; --n1: #ffa04d; --n2: #b3a6ff; --n3: #7dd87a; --n4: #5ed6c5; --n5: #74b8ff; --n6: #ff8fb1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--link); }
h1 { font-size: 1.3rem; margin: 0 0 .25rem; line-height: 1.25; }
button { font: inherit; cursor: pointer; }
/* Said to a screen reader, shown to nobody. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
summary, [role="button"], [role="link"], label:has(> input[type="checkbox"], > input[type="radio"]) { cursor: pointer; }
button:disabled { cursor: default; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* ---- Top bar ---- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .5rem;
  min-height: 56px;
  padding: calc(.5rem + env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .5rem max(.75rem, env(safe-area-inset-left));
  background: var(--panel);
  /* The line under the bar carries the join between two surfaces of nearly the same color in the
     dark theme, so it is drawn in its own light rather than in the divider's. */
  border-bottom: 1px solid var(--bar-rule, var(--divider));
}
/* The bar is a header, not the first row of the list, so it stands on its own surface with a
   line and a little shadow under it. Without that it shares the list's exact background and
   reads as another item. */
.bar { box-shadow: 0 2px 6px var(--bar-shade); }
:root { --bar-rule: rgba(0,0,0,.14); --bar-shade: rgba(0,0,0,.05); --list-bg: #f6f6f8; }
:root[data-theme="dark"] { --bar-rule: rgba(255,255,255,.16); --bar-shade: rgba(0,0,0,.35); --list-bg: #191919; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bar-rule: rgba(255,255,255,.16); --bar-shade: rgba(0,0,0,.35); --list-bg: #191919; }
}
.bar-back {
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap); margin-left: -.5rem; border-radius: 50%;
  text-decoration: none; color: var(--back-ink);
}
.bar-back:hover { --ib-halo: var(--halo); }

/* Halos on icon buttons (DESIGN.md §3): one 40px circle centred on the icon, whatever the size of
   the tap area round it, so it is round and the same size in every bar. A button shows it by
   setting --ib-halo (under the pointer, or while what it opens is open). */
.bar-back, .bar-icon, .search-open, .menu > summary, .topic-menu, .call-btn, .dm-back, .dm-arch-back, .b-search, .b-listen, .bell, .zr-btn { position: relative; }
.bar-back::before, .bar-icon::before, .search-open::before, .menu > summary::before,
.topic-menu::before, .call-btn::before, .dm-back::before, .dm-arch-back::before, .b-search::before, .b-listen::before, .bell::before, .zr-btn::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: var(--ib-halo, transparent); pointer-events: none;
}
:is(.bar-back, .bar-icon, .search-open, .menu > summary, .topic-menu, .call-btn, .dm-back, .dm-arch-back, .b-search, .b-listen, .bell, .zr-btn) > .ic { position: relative; }
.bar-title { flex: 1; min-width: 0; }
.bar-name { font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-sub { color: var(--muted); font-size: .85rem; }

.menu { position: relative; }
.menu summary {
  list-style: none; display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  color: inherit; border-radius: 50%;
}
.menu summary::-webkit-details-marker { display: none; }

/* Line icons (app/lib/icons.php; DESIGN.md §4): one stroke weight, the colour of the text, and
   centred in their button, so the halo round the button is centred on them too. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  display: block; flex: none; width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* On a phone the three buttons at the end of the bar crowd the group's name off the screen.
   They keep a 44px tap target through their own height; it's the space between and around them
   that goes. */
@media (max-width: 520px) {
  .bar { padding-right: max(.35rem, env(safe-area-inset-right)); }
  .bar .bar-icon, .bar .search-open, .bar .menu summary { width: 2.15rem; }
  /* Only the buttons at the end close up; the name keeps its distance from the group's picture.
     The three are spaced by what you see rather than by their boxes: the ⋮ is a sliver of ink in
     a full-sized tap target, so an even gap between the boxes looks lopsided. Measured at 390px,
     these bring the gaps between the glyphs themselves to about 21px apiece. */
  .bar .bar-icon { margin-right: .25rem; }          /* the book sits left, not the search right */
  .bar .bar-icon + .search-open { margin-left: -.4rem; }
  .bar .search-open + .menu, .bar .bar-icon + .menu { margin-left: -.6rem; }
  .bar .group-avatar.sm { width: 38px; height: 38px; font-size: 21px; }
  .bar .bar-name { font-size: 1rem; }
}

/* On the narrowest phones (an SE, say) everything gives a little more, so that the group's name
   is never cut short. */
@media (max-width: 359px) {
  .bar { padding-left: max(.45rem, env(safe-area-inset-left)); padding-right: max(.45rem, env(safe-area-inset-right)); }
  .bar .group-avatar.sm { width: 32px; height: 32px; font-size: 18px; }
  .bar .bar-icon, .bar .search-open, .bar .menu summary { width: 1.9rem; }
  .bar .ic { width: 22px; height: 22px; }
  .bar .bar-name { font-size: .92rem; }
  .bar .bar-sub { font-size: .75rem; }
}
.menu[open] > summary { --ib-halo: var(--halo); }

/* The bell (assets/bell.js, lib/notify.php): beside the name in every header, a circle with the
   number waiting — drawn round a 0 when nothing is, filled with the lists' unread colour when
   something is — as tall as the magnifying glass beside it (Larry). It widens into a pill for
   more figures. */
.bell {
  flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap);
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 50%;
}
.bell:hover, .bell[aria-expanded="true"] { --ib-halo: var(--halo); }
.bell[hidden] { display: none; }
.bell-n {
  position: relative; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; box-sizing: border-box;
  display: grid; place-items: center; border: 1.5px solid currentColor; opacity: .75;
  font-size: .62rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; pointer-events: none;
}
.bell-n.on { background: var(--accent); border-color: var(--accent); color: #fff; opacity: 1; }
@media (max-width: 520px) { .bar .bell { width: 2.15rem; } }
@media (max-width: 359px) { .bar .bell { width: 1.9rem; } }
.bell-menu {
  position: fixed; z-index: 30; width: min(21rem, calc(100vw - 16px)); max-height: calc(100dvh - 5rem); overflow-y: auto;
  background: var(--popover); border: 1px solid var(--popover-edge); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: .35rem 0;
}
.bell-sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem;
  min-height: var(--tap); padding: .5rem 1rem; color: var(--text);
}
.bell-sec > summary::-webkit-details-marker { display: none; }
.bell-sec > summary::after { content: '›'; color: var(--muted); font-size: 1.15rem; line-height: 1; transition: transform .15s ease; }
.bell-sec[open] > summary::after { transform: rotate(90deg); }
.bell-sec > summary:hover { background: var(--halo); }
.bell-sec[open] > summary { color: var(--muted); font-weight: 600; }
.bell-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem .5rem 1.75rem; color: inherit; text-decoration: none; }
.bell-item:hover { background: var(--halo); }
.bell-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-sub { display: block; color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; }
.bell-count {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600;
}
.bell-none { margin: 0; padding: .7rem 1rem; color: var(--muted); }
.bell-set { display: block; border-top: 1px solid var(--divider); margin-top: .3rem; padding: .6rem 1rem .35rem; font-size: .85rem; color: var(--accent); text-decoration: none; }
.bell-set:hover { text-decoration: underline; }
/* Its settings page (bell.php): the group of choices is a plain list under its heading, and its
   notes wrap (a fieldset is as wide as its longest line unless told otherwise). */
.bell-page fieldset { min-width: 0; border: 0; padding: 0; margin: 1.25rem 0 0; }
.bell-page fieldset:disabled { opacity: .55; }
.bell-page legend { padding: 0; margin-bottom: .5rem; }
.bell-page p { margin: 0; }
.bell-days { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.menu nav {
  position: absolute; right: 0; top: calc(var(--tap) + 4px); min-width: min(12rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: calc(100vh - var(--tap) - 24px); max-height: calc(100dvh - var(--tap) - 24px); overflow-y: auto;
  background: var(--popover); border: 1px solid var(--popover-edge); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: .35rem 0; z-index: 20;
}
.menu nav a, .menu nav button {
  display: block; width: 100%; text-align: left;
  padding: .7rem 1rem; min-height: var(--tap);
  color: var(--text); text-decoration: none; background: none; border: 0;
}
.menu nav a:hover, .menu nav button:hover { background: var(--halo); }
/* Every item on one line: the menu is widened to its longest item, not the text wrapped (DESIGN.md §5). */
.menu nav { width: max-content; }
.menu nav a, .menu nav button, .menu nav summary { white-space: nowrap; }
/* Short screens (an iPhone SE is 667 px tall): rows of 44 px, the least a finger needs, so the
   fullest menu (the reader's: 13 rows with a section open) fits without scrolling. */
@media (max-height: 700px) {
  .menu nav a, .menu nav button, .menu nav details.submenu > summary { min-height: 44px; padding-top: .55rem; padding-bottom: .55rem; }
  .menu nav .text-size { min-height: 44px; }
}
.menu nav .menu-note { color: var(--muted); margin-left: .35rem; }
.menu nav a.menu-off { color: var(--muted); cursor: default; }
.menu nav a.menu-off:hover { background: none; }
.menu nav .text-size { display: flex; align-items: center; min-height: var(--tap); padding: 0 .5rem 0 1rem; }
.text-size span { flex: 1; }
.menu nav .text-size button { width: var(--tap); padding: 0; display: grid; place-items: center; border-radius: 50%; font-weight: 600; color: var(--link); }
.menu nav .text-size button:first-of-type { font-size: .85rem; }
.menu nav .text-size button:disabled { color: var(--muted); opacity: .5; background: none; }

.menu nav .submenu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: auto; height: auto; min-height: var(--tap); border-radius: 0; background: none;
  padding: .7rem 1rem; font-size: 1rem; color: var(--text);
}
.menu nav .submenu > summary::-webkit-details-marker { display: none; }
.menu nav .submenu > summary::after {
  content: '›'; color: var(--muted); font-size: 1.15rem; line-height: 1;
  transition: transform .15s ease;
}
.menu nav .submenu[open] > summary::after { transform: rotate(90deg); }
.menu nav .submenu > summary:hover { background: var(--halo); }
.menu nav .submenu[open] > summary { color: var(--muted); font-weight: 600; }
.menu nav .submenu-body a,
.menu nav .submenu-body button { padding-left: 1.75rem; }
.menu nav .submenu-body .text-size { padding-left: 1.75rem; padding-right: calc(1rem + 3px); }

/* ---- Page body ---- */
.page { max-width: 40rem; margin: 0 auto; padding: 1rem max(1rem, env(safe-area-inset-left)); }
.center { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem 1rem; }
.card {
  background: var(--panel); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: 0 1px 2px var(--shadow);
}
.signin { width: 100%; max-width: 24rem; text-align: center; }
.signin form { text-align: left; }
.group-avatar {
  width: 88px; height: 88px; margin: .25rem auto 1rem;
  border-radius: 33%; display: grid; place-items: center; font-size: 44px;
  background: linear-gradient(#72d5fd, #2a9ef1);
}
img.group-avatar { background: none; object-fit: cover; display: block; }
.tg-login { min-height: 48px; margin: 1.25rem 0 .5rem; display: flex; justify-content: center; }
.or { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }

.profile-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.profile-head p { margin: .25rem 0 0; }

/* ---- Forms ---- */
.stack { display: grid; gap: 1rem; margin-top: .5rem; }
label { display: grid; gap: .35rem; font-size: .92rem; color: var(--muted); }
input {
  font: inherit; font-size: 1rem; /* 16px+ stops iOS zooming in on focus */
  color: var(--text);
  width: 100%; min-height: var(--tap); padding: .6rem .8rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
/* A text box shows it has the cursor; a checkbox or radio button shows its tick, which is enough
   (a keyboard user still gets the browser's own ring). */
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
/* The browser's own file button is a grey slab that ignores the theme; dress it as one of ours. */
input[type="file"] { padding: .45rem .5rem; cursor: pointer; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: .9rem; font-weight: 600; margin-right: .7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: .35rem .8rem;
  background: var(--bg); color: var(--text);
}
input[type="file"]::file-selector-button:hover { background: var(--divider); }
button.primary {
  min-height: var(--tap); border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 1rem;
}
button.primary:hover { background: var(--accent-dark); }
button.link { background: none; border: 0; color: var(--accent); padding: .5rem; min-height: 40px; }
button.link.danger { color: var(--danger); }

.notice { padding: .7rem .9rem; border-radius: 10px; background: var(--ok-bg); color: var(--text); text-align: left; }
.notice.error { background: var(--error-bg); color: var(--error-text); }

/* ---- Avatars: Telegram's seven peer colors ---- */
.avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.avatar.lg { width: 64px; height: 64px; font-size: 1.35rem; }
img.avatar { object-fit: cover; background: var(--hover); }
.avatar.xl { width: 96px; height: 96px; font-size: 2rem; }
.avatar.c0 { background: linear-gradient(#ff845e, #d45246); }
.avatar.c1 { background: linear-gradient(#febb5b, #f68136); }
.avatar.c2 { background: linear-gradient(#b694f9, #6c61df); }
.avatar.c3 { background: linear-gradient(#9ad164, #46ba43); }
.avatar.c4 { background: linear-gradient(#53edd6, #28c9b7); }
.avatar.c5 { background: linear-gradient(#5caffa, #408acf); }
.avatar.c6 { background: linear-gradient(#ff8aac, #d95574); }

/* ---- Lists (admin) ---- */
.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: .75rem; }
.tabs a {
  flex: none; padding: .55rem .9rem; border-radius: 999px; min-height: 44px;
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; color: var(--muted); background: var(--panel);
}
.tabs a.on { background: var(--accent); color: #fff; }
.tabs .count { font-size: .8rem; opacity: .8; }
.search { margin-bottom: .75rem; }
.list { list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.list li { display: flex; gap: .75rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.list.compact li { padding: .55rem 1rem; }
.grow { flex: 1; min-width: 10rem; }
.name { font-weight: 600; }
.badge-role { font-size: .75rem; font-weight: 500; color: var(--accent); margin-left: .35rem; }
.row-actions { display: flex; gap: .25rem; margin-left: auto; }
.section { font-size: 1rem; color: var(--muted); margin: 1.5rem .25rem .5rem; font-weight: 600; }

.credits { text-align: center; margin: 1.5rem .5rem; }
.photo-form { margin: 0 0 1rem; display: grid; gap: .5rem; }
/* A grid stretches its child, which would centre this lone button's label. */
.photo-form > button.link { justify-self: start; padding-inline: 0; }
.row-buttons { display: flex; justify-content: flex-end; gap: .5rem; }
.row-buttons.left { justify-content: flex-start; align-items: center; }
button.primary.pad { padding: 0 1.2rem; }

.invites summary { cursor: pointer; padding: .25rem 0; }
.inline-invite { display: grid; gap: .75rem; margin: 1rem 0; }
.new-link { display: grid; gap: .5rem; margin-bottom: 1rem; }
.link-box { font-size: .9rem; }
.card.invites { margin-bottom: 1rem; }
.card + .card { margin-top: 1rem; }
.card-title { font-size: 1.1rem; margin: 0 0 .5rem; }
.steps { padding-left: 1.3rem; display: grid; gap: .6rem; }
.install h1 { margin-top: .25rem; }
#push-actions button.primary { width: 100%; }

/* Checkboxes and radio buttons with their label on one line. */
.checkbox { display: flex; gap: .6rem; align-items: center; color: var(--text); font-size: 1rem; min-height: 44px; }
.checkbox input, .page form.stack .checkbox input, .box .checkbox input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; accent-color: var(--accent); }

/* Every ✕ that closes or dismisses something, one size throughout (Larry, 2026-10-03: "a common
   largish size for fat fingers"): a 44px round tap target with a large glyph. "html" puts this
   above each panel's own rule for its button, which places it; this only sizes it. */
html :is(.pl-close, .b-close, .b-il-close, .b-comm-close, .fwd-close, .votes-close, .gif-close,
         .quote-close, .viewer-close, .banner-x, .cb-cancel, .toast button, .rs-close, .rs-sheet-x, .zr-close) {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; flex: none;
  display: inline-grid; place-items: center; border-radius: 50%;
  font-size: 1.35rem; line-height: 1;
}

/* The ordinary pages' bar (page_start: Parallel, Lexicon, My account, …) keeps its contents within
   the page's column on a wide screen, as the reader's does: the back arrow's glyph over the
   column's left edge, the menu's over its right (each glyph sits inside its tap target: 12px from
   its left, 22px from its right, measured). On a phone, the usual edges. */
.page-bar {
  padding-left: max(.75rem, env(safe-area-inset-left), calc(50% - 19rem - 12px));
  padding-right: max(.75rem, env(safe-area-inset-right), calc(50% - 19rem - 22px));
}


/* Search from a selection (T9, sel-search.js): two pills by the selected words. */
.sel-search { position: fixed; z-index: 60; display: flex; gap: .35rem; padding: .3rem; border-radius: 999px;
  background: var(--popover); border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.sel-search button { font: inherit; font-size: .88rem; border: 0; border-radius: 999px; padding: .4rem .8rem; min-height: 36px;
  background: var(--accent); color: #fff; cursor: pointer; white-space: nowrap; }
.sel-search button:hover { filter: brightness(1.1); }

/* The pages behind ‹ (T21, trail.js): a menu as the ⋮ menus are (DESIGN.md §5), under the back arrow. */
.trail-menu { position: fixed; z-index: 70; min-width: min(14rem, calc(100vw - 16px)); max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 90px); overflow-y: auto; background: var(--popover); border: 1px solid var(--popover-edge);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: .35rem 0; }
.trail-menu button { display: block; width: 100%; text-align: left; padding: .7rem 1rem; min-height: var(--tap); font: inherit;
  color: var(--text); background: none; border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.trail-menu button:hover, .trail-menu button:focus { background: var(--halo); outline: none; }
.trail-none { margin: 0; padding: .7rem 1rem; color: var(--muted); }
.bar-back { -webkit-touch-callout: none; user-select: none; }   /* (a long press opens the list, not the phone's own menu) */
.trail-menu .trail-home { border-top: 1px solid var(--divider); margin-top: .25rem; color: var(--link); }