/* 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;
  /* Color by job (card #393, DESIGN.md §2): the main button green, charts a muted slate, the accent for "here". */
  --button: #1e7a46;
  --button-hover: #19683b;
  --button-ink: #ffffff;
  --chart: #6f86a3;
  --selected: #137a7f;
  --selected-ink: #ffffff;
  --badge: #e8a93b;
  --badge-ink: #1a1205;
  --mark: #b7791f;
  --bg: #f4f4f5;
  --panel: #ffffff;
  --hover: #f4f4f5;
  --text: #000000;
  --muted: #686d72;
  --border: #dadce0;
  --popover: #ffffff;
  --scroll-shade: rgba(0,0,0,.28);   /* a menu's edge with more beyond it (card #217) */
  --popover-edge: rgba(0,0,0,.12);
  --popover-hover: #f1f1f4;
  /* One look for each kind of thing (card #343, DESIGN.md §2a): a group of items in a menu, the chosen item in a list,
     a card on the page, a menu over the page, a text field. Light raises a level by its edge and shadow, dark by a
     lighter surface. */
  --group-fill: rgba(0,0,0,.045);
  --chosen: rgba(51,144,236,.16);
  --card: #ffffff;
  --mk-well: #d2e4fc;           /* the plan maker's scrolling question box: plainly blue, apart from its card (#600) */
  --mk-rim: #3390ec;            /* its rim, the accent's blue */
  --mk-muted: #555a60;          /* its gray and link text, darker to read on the blue (4.5 to 1 at least) */
  --mk-link: #17589e;
  --mk-shade: rgba(16,56,110,.35); /* its edge shades, blue not gray */
  --mk-track: #b5cff2;          /* its scroll bar's track */
  --mk-rule: #8fb0de;           /* a line inside it, plain on the blue (1.7 to 1; the page's divider was 1.05, #945) */
  --card-edge: #b8bcc3;
  /* A card's and a menu's shadows: their colors by themselves, so they fade at sunrise and sunset (#773); the dark
     theme's shadow is one layer of its own, the light theme's two (a layer in transparent draws nothing). */
  --card-shade-1: rgba(0,0,0,.06); --card-shade-2: rgba(0,0,0,.07);
  --card-shadow: 0 1px 2px var(--card-shade-1), 0 4px 14px var(--card-shade-2);
  --popover-rim: #9ea3ab;
  --lift-1: rgba(0,0,0,.12); --lift-2: rgba(0,0,0,.30); --lift-3: transparent;
  --popover-lift: 0 2px 6px var(--lift-1), 0 16px 40px var(--lift-2), 0 12px 32px var(--lift-3);
  --field-edge: #9ea4ae;
  /* The one halo for hover, press and open, everywhere: a wash of the theme's text color, so it
     stands off any surface beneath it (page, bar, menu, sheet) by the same amount. */
  --halo: rgba(0,0,0,.10);
  --brighten: #ffffff;         /* under the pointer, a lift that brightens (the Donate button, #680) */
  --divider: #e7e7e9;
  --danger: #d32f2f;
  --marker: #d32f2f;           /* the reader's place marker (bible.css .b-marker) */
  --spell-red: #e0262b;        /* the spellcheck's underlines (chat.css .spell-layer) */
  --spell-blue: #1f6cbf;
  --danger-fill: #d32f2f;      /* a red button, white words on it (button.primary.danger) */
  --danger-fill-dark: #b71c1c;
  --ok-bg: #e7f6e9;
  --done: #2e8a3e;          /* a finished step (extra readings, card #26) */
  --launch-ready: #2e8a3e; --launch-ready-text: #fff;     /* the launch bar (card #419): Ready, To check, Built, Not started */
  --launch-check: #f2c230; --launch-check-text: #2b2400;
  --launch-built: #8dbbe6; --launch-built-text: #0d2740;  /* Built, waiting for its live check (card #460) */
  --launch-open: #d5d8dc; --launch-open-text: #3d4248;
  --error-bg: #fdecea;
  --error-text: #9b1c1c;
  --muted-badge: #8e9499;
  --shadow: rgba(114,114,114,.25);
  /* Chat */
  /* The chat's background: its colors one by one, so they fade with the rest at sunrise and sunset (#733) */
  --wall-1: #dbddbb; --wall-2: #6ba587; --wall-2-at: 35%; --wall-3: #d5d88d; --wall-4: #88b884;
  --wallpaper: linear-gradient(135deg, var(--wall-1) 0%, var(--wall-2) var(--wall-2-at), var(--wall-3) 70%, var(--wall-4) 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);
  --lines-1: #2d4a26; --lines-2: #2d4a26; --lines-3: #2d4a26; --lines-4: #2d4a26;
  --wp-lines: linear-gradient(135deg, var(--lines-1) 0%, var(--lines-2) 40%, var(--lines-3) 70%, var(--lines-4) 100%);
  --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;
  --chip-radius: 8px;   /* a choice's chip: rectangular, not a pill (card #254) */
  --tap: 48px;
  font-size: 17px;
/* design-ok: px-base */ }

/* 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: #4a86d5;
  --pill: #2c6abb;
  --accent-dark: #689adc;
  --accent-soft: rgba(74,134,213,.18);
  --accent-ring: rgba(74,134,213,.6);
  --link: #7fb2ff;
  --button: #27794d;
  --button-hover: #2b7f50;
  --button-ink: #ffffff;
  --chart: #4f6b88;
  --selected: #1f7a80;
  --selected-ink: #ffffff;
  --badge: #e0a43a;
  --badge-ink: #0f1115;
  --mark: #c9963a;
  /* A lone Back glyph needs more than the accent, which is a dim blue here. */
  --back-ink: #7fb2ff;
  --bg: #0f1115;
  --panel: #1a1d23;
  --hover: #262b33;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --border: #3a3f48;
  --popover: #2c3038;          /* a menu is a surface above the page, and should look it */
  --scroll-shade: rgba(0,0,0,.65);
  --popover-edge: #4d535d;
  --popover-hover: #3a3f48;
  --group-fill: rgba(255,255,255,.06);
  --chosen: rgba(74,134,213,.26);
  --card: #1f232a;
  --mk-well: #182c4d;
  --mk-rim: #4a86d5;
  --mk-muted: #9aa0a6;
  --mk-link: #7fb2ff;
  --mk-shade: rgba(0,0,0,.65);
  --mk-track: #2a3f63;
  --mk-rule: #35507c;
  --card-edge: #4a505a;          /* 2.33:1 on the page: the dark floor of the principles, 2.2 (card #230) */
  --card-shade-1: transparent; --card-shade-2: rgba(0,0,0,.35);   /* so 0 4px 14px rgba(0,0,0,.35) */
  --card-shadow: 0 1px 2px var(--card-shade-1), 0 4px 14px var(--card-shade-2);
  --popover-rim: #4d535d;
  --lift-1: transparent; --lift-2: transparent; --lift-3: rgba(0,0,0,.6);   /* so 0 12px 32px rgba(0,0,0,.6) */
  --popover-lift: 0 2px 6px var(--lift-1), 0 16px 40px var(--lift-2), 0 12px 32px var(--lift-3);
  --field-edge: #77808c;
  --halo: rgba(255,255,255,.10);
  --brighten: rgba(255,255,255,.14);
  --divider: #2a2e35;
  --danger: #ff6b6b;
  --marker: #ff6b6b;
  --spell-red: #ff5a5f;
  --spell-blue: #6fb0ff;
  --danger-fill: #c62828;
  --danger-fill-dark: #a31f1f;
  --ok-bg: #1f3324;
  --done: #4cc46a;          /* a finished step (extra readings, card #26) */
  --launch-ready: #2f7d40; --launch-ready-text: #fff;     /* the launch bar (card #419): Ready, To check, Built, Not started */
  --launch-check: #c99a1c; --launch-check-text: #1e1a08;
  --launch-built: #2f6492; --launch-built-text: #e8f1fa;  /* Built, waiting for its live check (card #460) */
  --launch-open: #3a3f47; --launch-open-text: #d2d6db;
  --error-bg: #3a1f1f;
  --error-text: #ffb4ab;
  --muted-badge: #717579;
  --shadow: rgba(0,0,0,.45);
  --wall-1: #0c0f13; --wall-2: #10141a; --wall-2-at: 40%; --wall-3: #0f1317; --wall-4: #0c0f13;
  --chip-bg: rgba(72, 87, 97, .6);
  --bubble-in: #2a2e35;
  --bubble-out: #2b5278;
  --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);
  --lines-1: #3d6b8f; --lines-2: #2f7a5c; --lines-3: #4f6b88; --lines-4: #3f63a0;
  --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;
}
/* The same for a device set to dark, before theme.js has run or where it can't (tests/design_rules_check.py keeps the
   two identical). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent: #4a86d5;
    --pill: #2c6abb;
    --accent-dark: #689adc;
    --accent-soft: rgba(74,134,213,.18);
    --accent-ring: rgba(74,134,213,.6);
    --link: #7fb2ff;
    --button: #27794d;
    --button-hover: #2b7f50;
    --button-ink: #ffffff;
    --chart: #4f6b88;
    --selected: #1f7a80;
    --selected-ink: #ffffff;
    --badge: #e0a43a;
    --badge-ink: #0f1115;
    --mark: #c9963a;
    /* A lone Back glyph needs more than the accent, which is a dim blue here. */
    --back-ink: #7fb2ff;
    --bg: #0f1115;
    --panel: #1a1d23;
    --hover: #262b33;
    --text: #e8eaed;
    --muted: #9aa0a6;
    --border: #3a3f48;
    --popover: #2c3038;          /* a menu is a surface above the page, and should look it */
    --scroll-shade: rgba(0,0,0,.65);
    --popover-edge: #4d535d;
    --popover-hover: #3a3f48;
    --group-fill: rgba(255,255,255,.06);
    --chosen: rgba(74,134,213,.26);
    --card: #1f232a;
    --mk-well: #182c4d;
    --mk-rim: #4a86d5;
    --mk-muted: #9aa0a6;
    --mk-link: #7fb2ff;
    --mk-shade: rgba(0,0,0,.65);
    --mk-track: #2a3f63;
    --mk-rule: #35507c;
    --card-edge: #4a505a;          /* 2.33:1 on the page: the dark floor of the principles, 2.2 (card #230) */
    --card-shade-1: transparent; --card-shade-2: rgba(0,0,0,.35);   /* so 0 4px 14px rgba(0,0,0,.35) */
    --card-shadow: 0 1px 2px var(--card-shade-1), 0 4px 14px var(--card-shade-2);
    --popover-rim: #4d535d;
    --lift-1: transparent; --lift-2: transparent; --lift-3: rgba(0,0,0,.6);   /* so 0 12px 32px rgba(0,0,0,.6) */
    --popover-lift: 0 2px 6px var(--lift-1), 0 16px 40px var(--lift-2), 0 12px 32px var(--lift-3);
    --field-edge: #77808c;
    --halo: rgba(255,255,255,.10);
    --brighten: rgba(255,255,255,.14);
    --divider: #2a2e35;
    --danger: #ff6b6b;
    --marker: #ff6b6b;
    --spell-red: #ff5a5f;
    --spell-blue: #6fb0ff;
    --danger-fill: #c62828;
    --danger-fill-dark: #a31f1f;
    --ok-bg: #1f3324;
    --done: #4cc46a;          /* a finished step (extra readings, card #26) */
    --launch-ready: #2f7d40; --launch-ready-text: #fff;     /* the launch bar (card #419): Ready, To check, Built, Not started */
    --launch-check: #c99a1c; --launch-check-text: #1e1a08;
    --launch-built: #2f6492; --launch-built-text: #e8f1fa;  /* Built, waiting for its live check (card #460) */
    --launch-open: #3a3f47; --launch-open-text: #d2d6db;
    --error-bg: #3a1f1f;
    --error-text: #ffb4ab;
    --muted-badge: #717579;
    --shadow: rgba(0,0,0,.45);
    --wall-1: #0c0f13; --wall-2: #10141a; --wall-2-at: 40%; --wall-3: #0f1317; --wall-4: #0c0f13;
    --chip-bg: rgba(72, 87, 97, .6);
    --bubble-in: #2a2e35;
    --bubble-out: #2b5278;
    --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);
    --lines-1: #3d6b8f; --lines-2: #2f7a5c; --lines-3: #4f6b88; --lines-4: #3f63a0;
    --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%; }
/* An ordinary page keeps the scroll bar's room whether or not it is long enough to need one, so its centered column
   stands in the same place on a long page and a short one (card #396: My reading plan's tabs). */
html:has(body > main.page) { scrollbar-gutter: stable; }
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); }

/* What a member types into a form's boxes (settings, account, sign-up, sign-in, requests, feedback) is set apart
   from the page's own labels and hints, in Literata, a book serif (card #706). Only on the form pages (layout.php's
   page_start marks them): the chat, notes, and comments, written to be read, keep the page's typeface. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("assets/fonts/Literata-Roman-latin.woff2") format("woff2");   /* relative to a.php, which serves this file */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("assets/fonts/Literata-Roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
.form-page main :is(input:not([type]), input[type=text], input[type=email], input[type=search], input[type=url], input[type=tel], textarea) {
  font-family: Literata, Georgia, "Times New Roman", serif;
}
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: #e3ebf3; }
:root[data-theme="dark"] { --bar-rule: rgba(255,255,255,.16); --bar-shade: rgba(0,0,0,.35); --list-bg: #111317; }
@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: #111317; }
}
.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); }
/* Back to the chat, the speech bubble close beside ‹ (app/lib/menu.php, card #80), in the same ink. */
.bar-chat {
  display: grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); margin-left: -.6rem; border-radius: 50%;
  text-decoration: none; color: var(--back-ink);
}
.bar-chat .ic { width: 22px; height: 22px; }
/* It is the bell too (card #80): the number waiting fills it, white on the accent color, centered in its circle
   (the icon's center); with nothing waiting it stays hollow and empty. */
.bar-chat > * { grid-area: 1 / 1; }
.bar-chat.has-n .ic { width: 25px; height: 25px; fill: var(--accent); stroke: var(--accent); }
.bar-chat-n {
  position: relative; color: #fff; font-size: .6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.bar-chat:not(.has-n) .bar-chat-n { display: none; }
.bar-chat[aria-expanded="true"] { --ib-halo: var(--halo); }
.bar-chat:hover { --ib-halo: var(--halo); }

/* Halos on icon buttons (DESIGN.md §3): one 40px circle centered 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-chat, .bar-icon, .search-open, .menu > summary, .topic-menu, .call-btn, .dm-back, .dm-arch-back, .b-search, .b-listen, .bell,
.composer .attach, .menu-reactions .more-rx, .icon-opt, .rs-map-tools button, .b-actions .b-acts button, .note-tool, .b-as-btn, .bp-step { position: relative; }
.bar-back::before, .bar-chat::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,
.composer .attach::before, .menu-reactions .more-rx::before, .icon-opt::before, .rs-map-tools button::before, .b-actions .b-acts button::before, .note-tool::before, .b-as-btn::before, .bp-step::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-chat, .bar-icon, .search-open, .menu > summary, .topic-menu, .call-btn, .dm-back, .dm-arch-back, .b-search, .b-listen, .bell,
    .composer .attach, .menu-reactions .more-rx, .icon-opt, .rs-map-tools button, .b-actions .b-acts button, .note-tool, .b-as-btn, .bp-step) > :is(.ic, svg, span, b, i, s) { 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.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; }
.bible-link { display: grid; place-items: center; width: var(--tap); height: var(--tap); color: inherit; border-radius: 50%; }   /* (a visitor's, #516) */
.bible-link:hover { --ib-halo: var(--halo); }

/* Line icons (app/lib/icons.php; DESIGN.md §4): one stroke weight, the color of the text, and
   centered in their button, so the halo round the button is centered 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;
}
/* The header's Bible (card #757; Larry: "let's make the Bible icon gold and filled (to stand out)"): the way back to
   reading, filled in the counts' gold and drawn in the darker gold of small marks, so its spine still shows. */
.bar :is(.bible-menu > summary, .bible-link) .ic { fill: url(#i-gold); stroke: var(--mark);
  /* Thinner outer and spine lines than the other icons' 1.8, and a little larger, 26px to their 24 (card #768; Larry:
     "Thinner is better"; "it should be very slightly larger. Maybe 5-10% larger"). */
  stroke-width: 1.2; width: 26px; height: 26px; /* design-ok: bible-thin */
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--badge) 65%, transparent)); }
/* Its shine (Larry: "Give the Bible a more golden/shining gloss"): the sheen drawn in icons.php, light at the top
   corner, a bright band across, the darker gold at the foot; in the logo's pale golds, those of its book (card #769;
   Larry: "make the book icon a similar gold to the logo"). */
#i-gold .g-light { stop-color: #fce7a6; /* design-ok: same-both-themes */ }
#i-gold .g-gold { stop-color: #f1d27e; /* design-ok: same-both-themes */ }
#i-gold .g-band { stop-color: #fff0c2; /* design-ok: same-both-themes */ }
#i-gold .g-foot { stop-color: #d9ad4f; /* design-ok: same-both-themes */ }

/* 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 .search-open, .bar .menu summary, .bar .bible-link { 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 :is(.bible-menu, .bible-link) { margin-right: .25rem; }        /* the book sits left, not the search right */
  .bar .bible-menu + .search-open { margin-left: -.4rem; }
  .bar .search-open + .menu, .bar :is(.bible-menu, .bible-link) + .menu { margin-left: -.6rem; }
  .bar .group-avatar.sm { width: 38px; height: 38px; font-size: 21px; /* design-ok: px-initials */ }
  .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; /* design-ok: px-initials */ }
  .bar .search-open, .bar .menu summary, .bar .bible-link { width: 1.9rem; }
  .bar .ic { width: 22px; height: 22px; }
  .bar :is(.bible-menu > summary, .bible-link) .ic { width: 24px; height: 24px; }   /* (the Bible a little larger) */
  .bar .bar-name { font-size: .92rem; }
  .bar .bar-sub { font-size: .75rem; }
}
.menu > summary:hover, .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 color 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(--badge); border-color: var(--badge); color: var(--badge-ink); opacity: 1; }
/* A report waits, for a group's leaders (§10.5, card #179; Larry: "Special notification colors when there is an
   unaddressed report"): the count, the bubble, and the Reports line's count are red until each is dealt with. */
.bell-n.on.report { background: var(--danger-fill); border-color: var(--danger-fill); }
.bar-chat.has-n.report .ic { fill: var(--danger-fill); stroke: var(--danger-fill); }
.bell-sec[data-sec="reports"] .bell-count { background: var(--danger-fill); }
@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-rim); border-radius: var(--radius);
  box-shadow: var(--popover-lift); 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(--text); font-weight: 700; }
/* An open section's items: a group, on a shaded panel with the accent bar (card #343, DESIGN.md §2a), as in ⋮. */
.bell-sec[open] > .bell-body { margin: 0 .5rem .4rem; border-radius: 10px; overflow: hidden; background: var(--group-fill); }
.bell-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem .5rem 1.1rem; color: inherit; text-decoration: none; }
.bell-item:hover { background: var(--halo); }
/* The chat, at the top of the list opened from the speech bubble (card #80): a button like button.primary, with
   the bubble's icon. */
.bell-chat {
  justify-content: center; gap: .5rem; min-height: var(--tap); margin: .25rem .75rem .5rem; padding: 0 1rem;
  border-radius: 10px; background: var(--button); color: var(--button-ink); font-weight: 600;
}
.bell-chat:hover { background: var(--button-hover); /* design-ok: filled-hover */ }
.bell-chat .ic { width: 20px; height: 20px; }
.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(--badge); color: var(--badge-ink); font-size: .75rem; font-weight: 600;
}
.bell-welcome { padding-bottom: .3rem; }   /* card #753 */
.bell-welcome p { margin: .6rem 1rem .6rem; }
.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; }
/* At the foot of the Bible pages' bubble list (card #752): your groups to switch to and Join or start a study, as in
   ⋮ > Groups (the rules below, under Switch group), a rule above. */
.bell-groups { border-top: 1px solid var(--divider); margin-top: .3rem; padding-top: .3rem; }
.bell-groups :is(a, button) {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: var(--tap); padding: .5rem 1rem .5rem 1.1rem;
  color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.bell-groups :is(a, button):hover { background: var(--halo); }
/* 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-rim); border-radius: var(--radius);
  box-shadow: var(--popover-lift); 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, many Androids 740): rows of 44 px, the least a finger needs, so the
   fullest menu (a day's reading's: 14 rows) scrolls as little as it can. */
@media (max-height: 760px) {
  .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; }
/* The one menu's three parts (app/lib/menu.php, card #80): where you were, this page, the rest of the site, divided
   by a thin rule; the first left out when nothing in it goes anywhere. */
.menu nav .menu-where { border-bottom: 1px solid var(--popover-edge); margin-bottom: .35rem; padding-bottom: .35rem; }
.menu nav .menu-where:not(:has(> a:not([hidden]))) { display: none; }
/* A bar button with nothing under it is not shown (card #513; Larry: "When this (or other) button has no options under
   it, hide it (them)."): e.g. a visitor's book button in the reader on a computer, its translation beside it in the bar. */
details.menu:has(> nav):not(:has(> nav :is(a, button, summary):not([hidden], [hidden] *))) { display: none; }
.menu nav .menu-site { border-top: 1px solid var(--popover-edge); margin-top: .35rem; padding-top: .35rem; }
/* A page with no items of its own: one rule between the parts, not two. */
.menu nav .menu-page:empty { display: none; }
.menu nav .menu-page:empty + .menu-site { border-top: 0; margin-top: 0; padding-top: 0; }
/* A section opens in place, under its name, and the menu scrolls (card #217; Larry: "I think I want the menu to scroll
   on the phone (noticeably), and when you open a submenu, it expands in place"), theme.js bringing the section up to
   one row below the top. Noticeably: a shade at the edge that has more beyond it (scroll shadows: the covers move with
   the items, the shades stay), since a phone shows no scroll bar till you scroll. */
.menu nav, .ctx:has(> .ctx-site) {
  overscroll-behavior: contain;
  background:
    linear-gradient(var(--popover) 30%, transparent) top / 100% 2.5rem no-repeat local,
    linear-gradient(transparent, var(--popover) 70%) bottom / 100% 2.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--scroll-shade), transparent) top / 100% 1rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--scroll-shade), transparent) bottom / 100% 1rem no-repeat scroll,
    var(--popover);
}
.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, .b-tr-bar .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, .b-tr-bar .submenu > summary::-webkit-details-marker { display: none; }
.menu nav .submenu > summary::after, .b-tr-bar .submenu > summary::after {
  content: '›'; color: var(--muted); font-size: 1.15rem; line-height: 1;
  transition: transform .15s ease;
}
.menu nav .submenu[open] > summary::after, .b-tr-bar .submenu[open] > summary::after { transform: rotate(90deg); }
.menu nav .submenu > summary:hover, .b-tr-bar .submenu > summary:hover { background: var(--halo); }
/* Open, a section's name stays at full strength, a heading over its items, which sit together on a shaded panel
   (card #343, DESIGN.md §2a), with no bar: the accent bar marks only the chosen item, so one inside an open section
   shows one bar, not two (card #476). */
.menu nav .submenu[open] > summary, .b-tr-bar .submenu[open] > summary { color: var(--text); font-weight: 700; }
.menu nav .submenu[open] > .submenu-body {
  margin: 0 .5rem .4rem; border-radius: 10px; overflow: hidden; background: var(--group-fill);
}
.menu nav .submenu-body a,
.menu nav .submenu-body button { padding-left: 1.1rem; }
.menu nav .submenu-body .text-size { padding-left: 1.1rem; padding-right: calc(.5rem + 3px); }
/* The Bible menu (app/lib/menu.php bible_menu(), card #216): the book on every bar. Its translation opens in place, the
   rest staying in view, the codes wrapping as chips on a computer and a phone alike (Larry, 19 Oct: "wrap the
   translation codes on the phone, too"); where you were below it, under a rule. */
.bible-menu nav .menu-where { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; border-top: 1px solid var(--popover-edge); margin-top: .35rem; padding-top: .35rem; }
/* (No translation above it: the chat's, and a chapter's on a computer, where it is in the bar; card #254.) */
.bible-menu nav > .menu-where:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.bible-tr b { font-weight: 600; }
/* The translation in use: the chosen item's look (card #343, DESIGN.md §2a), blue on a soft blue fill, with a bar. */
.bible-tr .bible-vers .on { color: var(--accent); font-weight: 600; background: var(--chosen); box-shadow: inset 3px 0 0 var(--accent); }
.bible-tr .bible-vers button:disabled { opacity: .5; cursor: default; background: none; }
.bible-tr .bible-vers small { font-size: .7em; margin-left: .3em; }
.bible-menu nav .b-ver-targ > summary { padding-left: 1.1rem; }
/* Upload: an action, not a translation, so in the accent, with a plus (and a dashed outline). */
.bible-tr .bible-vers .b-ver-upload { color: var(--accent); font-weight: 600; }
.bible-tr .bible-vers .b-ver-upload::before { content: '+ '; }
/* Anchored to the bar rather than to the book, which stands well in from the edge: the menu keeps on screen. */
.pane-list .bar .bible-menu { position: static; }
.pane-list .bar .bible-menu > nav { right: 8px; top: 100%; }
.bible-menu > nav { width: 24rem; }
.bible-tr .bible-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .25rem .6rem .5rem 1.1rem; }
/* Rectangular chips, not round-ended pills (card #254; Larry, 20 Oct: "the translations should be in rectangularish
   chips, not pills"), as the books are on a phone. (.bible-tr .bible-vers: above the submenus' indent, which bible.css
   repeats after this file.) */
.bible-tr .bible-vers .bible-chips :is(a, button) {
  display: inline-flex; align-items: center; width: auto; min-height: 44px; padding: 0 .85rem;
  border: 1px solid var(--popover-edge); border-radius: var(--chip-radius);
}
.bible-tr .bible-chips .on { border-color: var(--accent); }
.bible-tr .bible-chips .b-ver-upload { border-style: dashed; border-color: var(--accent); }
.bible-tr .b-ver-targ .bible-chips { padding-left: 1.85rem; }
/* A translation's sentence (card #839, tr-gloss.js): a line of its own under the row of chips the translation is on,
   sliding open there. */
.bible-tr .bible-chips .tr-gloss {
  flex-basis: 100%; margin: 0; padding: 0 .2rem .15rem; overflow: hidden;
  font-size: .85rem; line-height: 1.35; color: var(--muted); white-space: normal;
}
.bible-tr .bible-chips .tr-gloss.in { animation: tr-gloss-in .2s ease-out; }
@keyframes tr-gloss-in { from { max-height: 0; opacity: 0; } to { max-height: 6rem; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bible-tr .bible-chips .tr-gloss.in { animation: none; } }
/* The translation in the bar, beside the book (card #254), where there's room: its code alone, a text button whose halo
   fills its own shape (DESIGN.md §3), opening the same list as in the menu, as a menu of its own. On a phone bible.js
   puts it back in the menu; until then it is hidden there. */
.bar > .b-tr-bar > summary { width: auto; padding: 0 .6rem; border-radius: var(--chip-radius); font-size: .95rem; cursor: pointer; }
.bar > .b-tr-bar > summary::before { display: none; }
.bar > .b-tr-bar > summary:hover, .bar > .b-tr-bar[open] > summary { background: var(--halo); }
.bar > .b-tr-bar .tr-label { display: none; }
/* A book's topic: its book, on the bar, in the same kind of text button (card #748; chat/050-topic-view.js bookButton()). */
.bar > a.bar-book, .bar > details.bar-book > summary {
  display: flex; align-items: center; width: auto; height: 34px; padding: 0 .6rem; border-radius: var(--chip-radius);
  font-size: .95rem; color: var(--text); text-decoration: none; white-space: nowrap; cursor: pointer; flex: none;
}
.bar > details.bar-book > summary::before { display: none; }
.bar > a.bar-book:hover, .bar > details.bar-book > summary:hover, .bar > details.bar-book[open] > summary { background: var(--halo); }
@media (max-width: 430px) {   /* tighter on a phone, so the topic's name keeps whole words ("Minor / Prophets") */
  .bar > a.bar-book, .bar > details.bar-book > summary { padding: 0 .3rem; font-size: .85rem; }
  .bar > details.bar-book > summary { white-space: normal; width: min-content; line-height: 1.15; text-align: center; }   /* "Hos.–" over "Mal." */
}
.bar > .b-tr-bar > .bible-vers {
  position: absolute; right: 0; top: calc(var(--tap) + 4px); z-index: 20; width: 24rem; max-height: calc(100dvh - var(--tap) - 24px); overflow-y: auto;
  background: var(--popover); border: 1px solid var(--popover-rim); border-radius: var(--radius);
  box-shadow: var(--popover-lift); padding: .35rem 0;
}
.bar > .b-tr-bar .bible-chips { padding-left: 1rem; }
.bar > .b-tr-bar .bible-chips :is(a, button) { color: var(--text); text-decoration: none; background: none; }
.bar > .b-tr-bar .bible-chips :is(.on, .b-ver-upload) { color: var(--accent); }
.bar > .b-tr-bar .bible-chips .on { background: var(--chosen); box-shadow: inset 3px 0 0 var(--accent); }
.bar > .b-tr-bar .bible-chips :is(a, button):hover { background: var(--halo); }
.bar > .b-tr-bar .menu-label { display: block; padding: .5rem 1rem .25rem; font-size: .85rem; color: var(--muted); }
.bar > .b-tr-bar .b-ver-targ .bible-chips { padding-left: 1.75rem; }
@media (max-width: 759px) { .bar > .b-tr-bar { display: none; } }
@media (max-width: 759px) {
  .bar .bible-menu { position: static; }
  .bar .bible-menu > nav { right: 8px; top: 100%; width: min(24rem, calc(100vw - 16px)); }
}
/* Account > Switch group (app/lib/menu.php menu_groups(), cards #152, #155): each group its color dot with its
   initials, its name, its waiting count, the one you're in checked; then Add group and Leave group, a rule below. */
.menu nav .menu-groups { border-bottom: 1px solid var(--popover-edge); margin-bottom: .35rem; padding-bottom: .35rem; }
:is(.menu nav, .bell-groups) .menu-label { display: block; padding: .5rem 1rem .25rem 1.1rem; font-size: .85rem; color: var(--muted); }
.menu nav .menu-groups form button { display: flex; align-items: center; gap: .6rem; width: 100%; }
.menu-group-dot {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--group-color, #2a6fb5); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
}
.menu-group-dot .group-mark { display: block; height: 1rem; width: auto; }   /* a group's logo, card #417 */
/* A group's own picture (card #231): the whole circle, cropped round, here and in the logo's switcher (chat.css .gw-dot). */
.menu-group-dot { position: relative; }   /* (.gw-dot is already absolute) */
.menu-group-dot .group-photo, .gw-dot .group-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none;
}
.menu-group-name { flex: 1; text-align: left; }
.menu-group-n {
  min-width: 1.35rem; padding: 0 .35rem; border-radius: .7rem; background: var(--accent, #2a6fb5); color: #fff;
  font-size: .75rem; font-weight: 600; line-height: 1.35rem; text-align: center;
}
.menu-group-check { color: var(--link); font-weight: 700; }
/* Site > All groups with its waiting requests (card #227). */
.menu nav a.menu-count-link { display: flex; align-items: center; gap: .6rem; }
/* The Site heading's number, the sum of its parts' (card #870), beside its arrow. */
.menu nav .submenu > summary > .menu-group-n { margin-left: auto; }
:is(.menu nav, .bell-groups) .menu-group-on .menu-group-name { font-weight: 600; }
/* The group you're in: the chosen item's look (card #343, DESIGN.md §2a), its ✓ kept. */
.menu nav .menu-group-on, .bell-groups .menu-group-on { background: var(--chosen); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
/* A group's page (admin/group.php): its picture, or its dot at the same size; the groups page's list (groups.php). */
.menu-group-dot.big { width: 6rem; height: 6rem; font-size: 2rem; }
.group-picture { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; flex: none; }
.group-list li { display: flex; align-items: center; gap: .75rem; }
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }   /* a member's own text with its line breaks */
fieldset.stack { min-width: 0; border: 0; padding: 0; margin: 0; }
fieldset.stack legend { padding: 0; margin-bottom: .25rem; }
/* The weekdays off in a row (Choose premade). */
.plan-off { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
/* The plan maker (cards #496-#503; plan.md, "Phone flow"): a screen per question, headed by it. With its script, one
   screen at a time, and Back, the step count, and Next fixed at the foot of the screen, the live line above them;
   without it, every screen one under another. */
/* How long, or how much a day (#582; Larry: "GREY OUT the words, words/numbers in boxes, and links on unselected
   options"): all but the chosen option's radio grayed; the paces too. */
.mk-measure .mk-m:not(:has(input[type=radio]:checked)) > label > span,
.mk-measure .mk-m:not(:has(input[type=radio]:checked)) > :not(label),
.mk-pace label:not(:has(input[type=radio]:checked)) > span { opacity: .5; }
/* Question 3: the main reading as questions 1 and 2 left it, fixed (#582). */
.mk-chosen { position: relative; padding: .5rem 4.5rem .5rem .8rem; border: 1px solid var(--border); border-left: 5px solid var(--mk-rim);
  border-radius: 10px; background: var(--group-fill); }
/* "Change", back to question 1, at the card's top right (#606). */
.mk-chosen .mk-back1 { position: absolute; top: .5rem; right: .8rem; }
/* (In the question box's blue, a white card, as the fields are, #600.) */
.plan-maker form.mk.mk-js .mk-chosen { background: var(--card); border-color: var(--mk-rim); }
.plan-maker form.mk.mk-js .mk-chosen, .plan-maker form.mk.mk-js .mk-rcard { border-left-width: 5px; }
.mk-chosen p { margin: 0; }
fieldset.stack legend.mk-q { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
/* The maker's heading (#582): a title over the six questions, larger than they are, the card heading's short rule
   beneath it and a clear space before the first question; each question numbered as its step. */
.plan-maker .mk-title { font-size: 1.45rem; font-weight: 700; line-height: 1.25; margin: 0 0 1.25rem; }
.plan-maker .mk-title::after { content: ""; display: block; width: 2.6rem; height: 3px; margin-top: .45rem; border-radius: 2px; background: var(--accent); }
.plan-maker .mk-qn { color: var(--muted); font-weight: 700; }
.mk.mk-js .mk-screen:not(.mk-on) { display: none; }
/* A scroll bar inside the tab (#585; Larry: "I can't see immediately whether or not I'm at the bottom of the window"):
   the question scrolls in a box of its own, down to the bar with Back and Next at the window's foot (plan-maker.js sets
   --mk-h), a scroll bar always shown beside it, and a shade at an edge with more beyond it (the menu's way, above). */
.plan-maker form.mk.mk-js {
  max-height: max(16rem, var(--mk-h, 70vh)); overflow-y: auto; overscroll-behavior: contain;
  margin: -.25rem -.75rem -.25rem -.25rem; padding: .6rem .6rem .6rem .75rem;
  /* (A blue tint of its own, rimmed, sunk in, a firmer edge at its foot, #600; Larry: "Put some sort of border/edge at
     the bottom of the scrolling area … make the entire scrollable area a different shade than the surrounding," then
     "simply not different enough. I need something quite different in appearance.") */
  --muted: var(--mk-muted); --link: var(--mk-link); --scroll-shade: var(--mk-shade); --divider: var(--mk-rule);
  border: 1px solid var(--mk-rim); border-bottom-width: 3px; border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .12);
  background:
    linear-gradient(var(--mk-well) 30%, transparent) top / 100% 2.5rem no-repeat local,
    linear-gradient(transparent, var(--mk-well) 70%) bottom / 100% 2.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--scroll-shade), transparent) top / 100% 1rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--scroll-shade), transparent) bottom / 100% 1rem no-repeat scroll,
    var(--mk-well);
}
.plan-maker form.mk.mk-js::-webkit-scrollbar { width: 10px; }
.plan-maker form.mk.mk-js::-webkit-scrollbar-track { background: var(--mk-track); border-radius: 5px; }
.plan-maker form.mk.mk-js::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 5px; }
@supports not selector(::-webkit-scrollbar) {
  .plan-maker form.mk.mk-js { scrollbar-color: var(--muted) var(--mk-track); }
}
/* A phone shows its scroll bar only while the finger moves: there the plan maker draws its own, a rail beside the box
   with a thumb for what is in view (plan-maker.js; shown only where the browser's bar takes no room). */
.plan-maker { position: relative; }
.mk-rail { position: absolute; top: var(--rail-top); right: calc(.5rem + 2px); width: 5px; height: var(--rail-h);
  border-radius: 3px; background: var(--mk-track); pointer-events: none; }
.mk-rail[hidden] { display: none; }
.mk-rail > span { position: absolute; left: 0; right: 0; top: var(--thumb-y); height: var(--thumb-h); border-radius: 3px; background: var(--muted); }
.mk:not(.mk-js) .mk-screen + .mk-screen { border-top: 1px solid var(--divider); padding-top: 1rem; }
.mk-advice p { margin: .25rem 0 0; }
/* "How to use this, shown by examples" (#586): each example folded, its steps numbered as the questions are. */
details.disclose.mk-example { margin: .25rem 0 0 1rem; }
/* (Larry, October 29: the long examples in the link's blue were "hard and annoying to read": the text's own color, the
   arrow in the link's; one open at a time, by their shared name in maker.php; room before "Try a quick run".) */
details.disclose.mk-example > summary { color: var(--text); }
details.disclose.mk-example > summary::after { color: var(--link); }
/* A line between each two (Larry, November 3: "there should be lines between the three worked examples"). */
details.disclose.mk-example + details.disclose.mk-example { border-top: 1px solid var(--divider); padding-top: .5rem; margin-top: .5rem; }
.mk-advice > p.small { margin-top: .75rem; }
.mk-advice p.mk-how { font-weight: 600; margin: .5rem 0 .25rem; }
.mk-steps { margin: 0 0 .5rem; padding-left: 1.5rem; }
.mk-steps li + li { margin-top: .35rem; }
.mk-choices { display: flex; flex-direction: column; }
.mk-books { display: none; }
.mk-screen:has(input[name=books][value=choose]:checked) .mk-books { display: grid; gap: 0; }
.mk-books details.disclose { margin-bottom: 0; }
.mk-book-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); column-gap: 1rem; padding: .25rem 0 .5rem; }
.mk-count { color: var(--muted); font-weight: 400; }
/* Screen 1's ready-made plans to edit (#527), folded under the checklist. */
details.disclose.mk-premade { margin: .5rem 0 0; }
.mk-sub { display: block; }
.mk-orders, .mk-events .mk-choices:has(.mk-sub) { gap: .5rem; }   /* (options with a line under them, spaced as the orders: #649) */
.mk-blocked[hidden], .mk-settled[hidden] { display: none; }
ul.mk-settled { margin: 0; padding-left: 1.2rem; }
/* Screen 3 (#606): each reading added a card of its own, its edge in one of four of the name colors in turn (reading 1's
   is the accent's blue); folded to its line, "Remove" at its top right; inside, the lettered parts and its first week. */
p.mk-explain { margin: 0; }
.mk-readings { gap: .5rem; margin-top: 0; }
.mk-rcard { position: relative; border: 1px solid var(--border); border-left: 5px solid var(--mk-edge, var(--border)); border-radius: 10px;
  background: var(--card); padding: 0 .8rem; }
.mk-rcard.mk-c1 { --mk-edge: var(--n3); }
.mk-rcard.mk-c2 { --mk-edge: var(--n1); }
.mk-rcard.mk-c3 { --mk-edge: var(--n2); }
.mk-rcard.mk-c4 { --mk-edge: var(--n4); }
.plan-maker form.mk.mk-js .mk-rcard { border-color: var(--mk-rim); border-left-color: var(--mk-edge); }
.mk-rcard > .mk-remove { position: absolute; top: 0; right: .3rem; z-index: 1; }
.mk-readings details.disclose { margin-bottom: 0; }
.mk-readings details.disclose > summary { padding-right: 5rem; }
.mk-rname { font-weight: 600; }
.mk-rbody { gap: .75rem; padding: 0 0 .75rem; margin-top: .25rem; }
.mk-rpart { display: grid; gap: .25rem; }
p.mk-part-q, .mk-part-q { display: block; font-weight: 600; margin: 0; }
.mk-rpart > label:not(.checkbox) { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.mk-rpart.mk-choices { gap: .4rem; }
/* A select is as wide as its longest choice unless told otherwise, which ran past the card on a phone. */
.mk-rbody select { width: 100%; min-width: 0; }
.mk-week-box[hidden] { display: none; }
ol.mk-week { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
ol.mk-week li { padding: .15rem 0; color: var(--muted); }
ol.mk-week li + li { border-top: 1px solid var(--divider); }
ol.mk-week b { color: var(--text); font-weight: 600; }
ol.mk-week .mk-day { display: inline-block; min-width: 3.6rem; color: var(--muted); }
ol.mk-week li.mk-before { font-style: italic; }
.mk-none-yet[hidden] { display: none; }
.mk-rbooks { gap: 0; }
/* "Unselect all" under a checklist: the Parallel page's None button (parallel.css .pl-none), at the right (#526). */
.plan-maker .mk-none { justify-self: end; font-size: .85rem; }
.mk-rbooks[hidden] { display: none; }
.mk-daily > span { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
/* Inside a .checkbox, whose inputs are 22px boxes (a rule further down, so this one needs the extra class): the number box keeps its own size. */
.plan-maker form.mk .mk-daily input.mk-n { width: 4.5rem; height: auto; min-height: 40px; padding: .3rem .6rem; }
.mk-sub-q { font-weight: 600; margin: .25rem 0 0; }
.mk-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-pick { display: flex; flex-direction: column; max-width: 100%; }
.plan-maker .mk-pick > button { text-align: left; }
.plan-maker .mk-pick > button:hover:not(:disabled) { background: var(--halo); }
/* Screen 5: three measures, each a choice with its field (and the length's quick picks) under it. */
.mk-measure { gap: .5rem; }
.mk-m { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.mk-m > input { width: 10rem; max-width: 100%; margin-left: calc(22px + .6rem); }
/* Question 4's days for book introductions (#604): the two choices only while the box is checked; others' box wider. */
.mk-intro-box { display: grid; gap: .5rem; }
.mk-intro-box:not(:has(input[name=intros_on]:checked)) > .mk-intros { display: none; }
.mk-intros { margin-left: calc(22px + .6rem); }
.mk-intros .mk-m > input[type=text] { width: 18rem; max-width: calc(100% - 22px - .6rem); box-sizing: border-box; }
.mk-intro-what { margin: 0 0 0 calc(22px + .6rem); }
.mk-quick { display: flex; flex-wrap: wrap; column-gap: 1rem; margin-left: calc(22px + .6rem); }
.mk-range { margin: 0; }
.mk-summary { margin: 0; }
.mk-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--divider); }
.mk-summary dt { grid-column: 1; font-size: .85rem; color: var(--muted); }
.mk-summary dd { grid-column: 1; margin: 0; overflow-wrap: anywhere; }
.mk-summary dd[data-sum="readings"] { white-space: pre-line; }   /* each reading on its line (#650) */
.mk-summary dd.mk-change { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.mk-change a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; }
/* The notes (rule: "Confirmed"): neutral, just above Save, which becomes "Yes, save it" while there are any. */
.notice.mk-notes { background: var(--accent-soft); border-left: 4px solid var(--accent); }
.mk-notes .warn-head { font-weight: 700; margin: 0 0 .25rem; }
.mk-notes ul { margin: 0 0 .75rem; padding-left: 1.2rem; }
.mk:has(.mk-notes:not([hidden])) .mk-screen > button.primary:not(.mk-yes) { display: none; }
.mk-bar { position: sticky; bottom: 0; z-index: 5; margin: 1rem -1.25rem -1.25rem; padding: .5rem 1.25rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--divider); border-radius: 0 0 var(--radius) var(--radius); }
.mk-line { margin: 0 0 .4rem; min-height: 1.2em; }
.mk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Back, a button like Next but outlined (#582); Next's label, "Next: 3. Should any books be set apart (and treated
   specially in the plan)?", wraps rather than widen the page, and where it would have under 14rem (a phone) it takes a
   row of its own, full width, rather than stand eight lines tall (#605). */
.mk-nav .mk-back { min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--button); border-radius: 10px;
  background: none; color: var(--text); font-weight: 600; text-decoration: none; }
.mk-nav .mk-back:hover:not(:disabled) { background: var(--halo); }
.mk-nav .mk-back.mk-off { visibility: hidden; }
.mk-nav .mk-step { color: var(--muted); white-space: nowrap; }
/* Start over (#587; Larry: "How do I erase all my choices and start over?"), under the count: the page again without the
   kept answers, after asking. */
.mk-nav .mk-mid { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.mk-nav .mk-restart { white-space: nowrap; }
.mk-nav .mk-next { flex: 1 1 14rem; margin-left: auto; min-width: 0; line-height: 1.25; padding-block: .45rem; text-align: center; }
/* On a phone, where Next takes a row of its own, the count and Start over sit in the bar's middle and the line above them
   is centered too (#946; Larry: "“1 of 6” and the line are not properly centered, as they appear to be designed to be"). */
.mk-bar { container-type: inline-size; }
@container (max-width: 26rem) {
  .mk-line { text-align: center; }
  .mk-nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .mk-nav .mk-back { justify-self: start; }
  .mk-nav .mk-next { grid-column: 1 / -1; margin-left: 0; }
}
/* A church plan (card #384) reads every date of its calendar: "Begin with" for one, and no weekdays off. */
.premade-more .stack > p { margin: 0; }
.claude-spend > p { margin: 0; }   /* the admin page's Claude's spending (card #575) */
/* Each ready-made plan a card (card #385): radio, name, figures as chips, and a strip of the Bible (each book as wide as
   it is long, darker where read more often); its details only while it is chosen, lined up under its name. */
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
/* The circle chooses a plan; the title area opens and closes its details (card #392). */
.plan-opt { position: relative; border: 1px solid var(--border); border-radius: var(--radius); }
.plan-opt:has(.plan-radio:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-radio { position: absolute; top: calc(.75rem + 1px); left: .75rem; z-index: 1; width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.plan-pick { display: block; list-style: none; padding: .75rem .75rem .75rem calc(.75rem + 22px + .75rem); border-radius: calc(var(--radius) - 1px); cursor: pointer; color: var(--text); }
.plan-pick::-webkit-details-marker { display: none; }
.plan-pick:hover { background: var(--halo); }
.plan-pick:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
.plan-body { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.plan-name { font-weight: 600; line-height: 1.3; }
.plan-name::after { content: '›'; display: inline-block; margin-left: .4rem; font-weight: 400; font-size: 1.15rem; line-height: 1; transition: transform .15s ease; }
.plan-more[open] .plan-name::after { transform: rotate(90deg); }
/* A plan's figures in one plain line (card #394: pills wrapped badly on phones); it breaks only between figures. */
.plan-line { font-size: .85rem; line-height: 1.45; color: var(--text); }
.plan-line > span { white-space: nowrap; }
.plan-strip { display: block; width: 100%; height: 10px; border-radius: 3px; }
.plan-strip rect { fill: var(--chart); }
.plan-strip rect.track { fill: var(--divider); }
.plan-detail { padding: 0 .75rem .75rem calc(.75rem + 22px + .75rem); font-size: .92rem; }
.plan-detail > p { margin: 0 0 .6rem; }
/* The whole-Bible switch on the 2019 and 1928 Prayer Books' plans (card #441), shown while the plan is chosen. */
.plan-whole { padding: 0 .75rem .75rem calc(.75rem + 22px + .75rem); }
.plan-whole > p { margin: 0; }
.plan-opt:not(:has(.plan-radio:checked)) .plan-whole { display: none; }
@media (max-width: 520px) {
  .plan-detail, .plan-whole { padding-left: .75rem; }
}
/* The work a day (card #387): five rising bars, as many lit as the plan is heavy, before its minutes. */
.plan-line .plan-load { display: inline-flex; align-items: center; gap: .35rem; vertical-align: top; }
.plan-load svg { width: 1.2rem; height: .7rem; flex: none; }
.plan-load rect { fill: var(--divider); }
.plan-load rect.on { fill: var(--accent); }
/* A plan's sample days (card #389): the day, its passages, its minutes. */
.plan-samples > p { margin: .6rem 0 .25rem; }
.plan-sample { display: flex; flex-direction: column; gap: .3rem; }
.plan-sample > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem; gap: 0 .75rem; }
.plan-sample-day { font-weight: 600; }
.plan-sample-min { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .plan-sample > div { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-sample-text { grid-column: 1 / -1; grid-row: 2; }
}
.premade form:not(:has([data-calendar]:checked)) .plan-from,
.premade form:has([data-calendar]:checked) fieldset:has(> .plan-off) { display: none; }
.premade form:has([data-calendar]:checked, [data-chapters]:checked) .plan-cut { display: none; }   /* (#666) */
.premade form:not(:has([data-chrono]:checked)) .mk-events,                     /* a chronological plan's order (#780) */
.premade form:has([data-chrono]:checked):has([name=ev_by][value=passage]:checked) .plan-cut { display: none; }
.premade form:has([data-calendar="advent"]:checked) .from-year,
.premade form:has([data-calendar="september"]:checked) .from-year,
.premade form:not(:has([data-calendar="september"]:checked)) .from-september,
.premade form:not(:has([data-calendar="advent"]:checked)) .from-advent,
.premade form:not(:has([data-years="2"]:checked)) .from-two { display: none; }
.premade form:not(:has([data-years="3"]:checked)) .from-three { display: none; }

/* ---- 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(--card); border: 1px solid var(--card-edge); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--card-shadow);
}
.signin { width: 100%; max-width: 24rem; text-align: center; }
.signin form { text-align: left; }
/* Its plain notices too ("We sent it again.", "Wrong username or password.": #754); the striped spam notice is a callout,
   read from the left. */
.signin .notice:not(.spam-notice) { text-align: center; }
.signin form:not(:has(input:not([type=hidden]), select, textarea)) { text-align: center; }   /* a form that is only a button (Confirm, Send it again: #455) */
.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);
/* design-ok: px-initials */ /* design-ok: same-both-themes */ }
img.group-avatar { background: none; object-fit: cover; display: block; }
/* "beta" at the lower right corner of the site's name (card #702): laid over, hanging below the words' last letters,
   so it takes no room of its own and nothing beside the name moves. The wrapper is the words' own width (cut short
   with them in the bar), so the tag stays at their end. */
.beta-name { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.bar .beta-name { display: flow-root; width: fit-content; }   /* (holds the name's -7px reach margins inside it) */
.beta-tag { position: absolute; right: 0; top: 100%; transform: translateY(-30%); pointer-events: none;
  padding: .1rem .3rem .12rem; border-radius: 0; background: var(--selected);   /* square corners (Larry) */ color: var(--selected-ink);
  -webkit-text-fill-color: currentColor; font-size: .65rem; font-weight: 700; line-height: 1; letter-spacing: .03em;
  white-space: nowrap; text-transform: none; }
.bar .beta-tag { font-size: .55rem; padding: .08rem .28rem .1rem; transform: translateY(-30%); }
.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; }

/* Controls that look smaller than 44px keep their look and get an invisible 44px reach (DESIGN.md, 5): an ::after
   as wide as the control and at least 44px tall, centered on it. A new small control joins this list (in markup:
   class="reach"); a row of them that wraps is spaced so the reaches meet without overlapping. */
:where(.reach, .b-where, .bar-home, .banner-go, button.rx, .b-tab, .pl-tools button, .rs-card a.rs-chip,
  .b-steps a, .b-top a, .b-top .b-top-intro, .ex-btn, .ex-seq .ex-mark, .ex-seq .ex-ok, .spell-pop .sp-sugg button) { position: relative; }
:is(.reach, .b-where, .bar-home, .banner-go, button.rx, .b-tab, .pl-tools button, .rs-card a.rs-chip,
  .b-steps a, .b-top a, .b-top .b-top-intro, .ex-btn, .ex-seq .ex-mark, .ex-seq .ex-ok, .spell-pop .sp-sugg button)::after {
  content: ""; display: block; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 44px); transform: translateY(-50%);
}

/* ---- Forms ---- */
.stack { display: grid; gap: 1rem; margin-top: .5rem; }
/* What a box asks: as large and bright as an option (DESIGN.md 6i, card #678). */
label { display: grid; gap: .35rem; font-size: 1rem; color: var(--text); }
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(--field-edge); border-radius: 10px; background: var(--panel);
}
select {
  font: inherit; font-size: 1rem; color: var(--text);
  min-height: var(--tap); padding: 0 .8rem;
  border: 1px solid var(--field-edge); border-radius: 10px; background: var(--panel);
}
/* A text box of several lines, drawn as the one-line box is (card #343: every text field has the field edge). */
textarea {
  font: inherit; font-size: 1rem; color: var(--text);
  width: 100%; padding: .6rem .8rem; resize: vertical;
  border: 1px solid var(--field-edge); border-radius: 10px; background: var(--panel);
}
/* A text box shows it has the cursor; a checkbox or radio button shows its check mark, 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; }
/* A length-limited box's room left (gauge.js, card #677): a thin bar and "N left", red in the last tenth. */
.gauge { display: flex; align-items: center; gap: .6rem; }
.gauge-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.gauge-bar i { display: block; height: 100%; background: var(--accent); }
.gauge.low .gauge-bar i { background: var(--danger); }
.gauge.low .gauge-left { color: var(--danger); }
/* Boxes that belong together (a group's short and long versions: card #677), framed, under a heading of their own. */
fieldset.together { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1rem 1rem; margin: 0; display: grid; gap: 1rem; }
fieldset.together legend { padding: 0 .35rem; font-weight: 600; color: var(--text); }
/* The browser's own file button is a gray 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); /* design-ok: filled-hover */ }
button.primary {   /* (room either side of its words everywhere, #644; .pad, once added by hand, is now the same) */
  min-height: var(--tap); border: 0; border-radius: 10px; padding-inline: 1.2rem;
  background: var(--button); color: var(--button-ink); font-weight: 600; font-size: 1rem;
}
button.primary:hover:not(:disabled) { background: var(--button-hover); /* design-ok: filled-hover */ }
/* Disabled, it looks it: gray and faint (Larry, 20 Oct, of a disabled Save drawn as usual: "This is an error"). */
button.primary:disabled { filter: grayscale(1); opacity: .45; }
/* A destructive action standing alone (Delete all bookmarks): button.primary in red. */
button.primary.danger { background: var(--danger-fill); }
button.primary.danger:hover:not(:disabled) { background: var(--danger-fill-dark); /* design-ok: filled-hover */ }
button.link { background: none; border: 0; color: var(--accent); padding: .5rem; min-height: 44px; }
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); }
/* A field's message when the form is sent with it empty or wrong (card #818, form-msg.js): under the field. */
.field-msg { font-size: .88rem; color: var(--error-text); }
.field-msg[hidden] { display: none; }
/* A warning before a change that can't be undone and touches other people (a group's Change group plan, card #197):
   the error colors with a red edge, a bold first line, and a short list. */
.notice.warn { background: var(--error-bg); color: var(--error-text); border-left: 4px solid var(--danger); margin: 0 0 1rem; }
.notice.warn p, .notice.warn ul { margin: 0; }
.notice.warn .warn-head { font-weight: 700; margin-bottom: .35rem; }
.notice.warn ul { padding-left: 1.2rem; }
.notice.warn li + li { margin-top: .25rem; }
.notice.warn a { color: inherit; text-decoration: underline; }
/* "Check your spam or junk folder" (card #426; Larry, 26 Oct: "clearly and semi-loudly"): on every page that says an
   email was sent (lib/email.php spam_notice()). An amber edge, its first line bold. */
.notice.spam-notice { background: var(--accent-soft); border-left: 4px solid var(--badge); margin: 1rem 0; }

/* ---- 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); /* design-ok: same-both-themes */ }
.avatar.c1 { background: linear-gradient(#febb5b, #f68136); /* design-ok: same-both-themes */ }
.avatar.c2 { background: linear-gradient(#b694f9, #6c61df); /* design-ok: same-both-themes */ }
.avatar.c3 { background: linear-gradient(#9ad164, #46ba43); /* design-ok: same-both-themes */ }
.avatar.c4 { background: linear-gradient(#53edd6, #28c9b7); /* design-ok: same-both-themes */ }
.avatar.c5 { background: linear-gradient(#5caffa, #408acf); /* design-ok: same-both-themes */ }
.avatar.c6 { background: linear-gradient(#ff8aac, #d95574); /* design-ok: same-both-themes */ }

/* ---- 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(--selected); color: var(--selected-ink); }
.tabs .count { font-size: .8rem; opacity: .8; }
/* Folder tabs (My reading plan's four): tabs, not buttons. The open one is the card's own color and joins the card
   under it; the others sit on the page with the halo under the pointer. On a phone the four share the width, each
   label stacked on two lines, so all are seen at once. */
.tabs.folder { gap: .2rem; margin-bottom: 0; overflow: visible; align-items: flex-end; }
.tabs.folder a {
  border-radius: var(--radius) var(--radius) 0 0; padding: .55rem 1rem; gap: .25em; color: var(--muted); background: none;
  border-top: 3px solid transparent; border-inline: 1px solid transparent; transition: background-color .15s ease, color .15s ease;
}
.tabs.folder a:hover { background: var(--halo); color: var(--text); }
.tabs.folder a:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
/* (The open tab is the card's own surface, inside the card's edge, its foot over the card's top edge: card #343.) */
.tabs.folder a.on { background: var(--card); color: var(--text); font-weight: 600; border-top-color: var(--selected);
  border-inline-color: var(--card-edge); position: relative; z-index: 1; margin-bottom: -1px; }
/* A label that turns bold when chosen keeps its bold width always (a hidden bold copy in data-t), so choosing one
   moves none beside it (card #396): the plan tabs here, the Resources page's kinds. */
span[data-t] { display: inline-flex; flex-direction: column; }
span[data-t]::after { content: attr(data-t); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }
.tabs.folder + .card { border-top-left-radius: 0; }
/* On a computer a folder tab's label is on one line, its bold copy the whole label's (the tab's own data-t), so each
   space between its words is one space (card #583: the bold room kept word by word showed as a double space). */
@media (min-width: 521px) {
  .tabs.folder a[data-t] { display: inline-grid; align-content: center; justify-items: center; }
  .tabs.folder a[data-t] > span[data-t] { display: contents; }
  .tabs.folder a[data-t] > span[data-t]::after { content: none; }
  .tabs.folder a[data-t]::after { content: attr(data-t); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; }
}
@media (max-width: 520px) {
  .tabs.folder a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0; padding: .45rem .25rem;
    text-align: center; line-height: 1.2; }
  .tabs.folder + .card { border-top-right-radius: 0; }
}
/* A page's background text folded away behind one line, "About … ›" (My reading plan's preamble). The same › and
   halo as the bell's sections. */
details.disclose { margin-bottom: .75rem; }
details.disclose > summary {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .6rem; margin-left: -.6rem;
  border-radius: var(--radius); color: var(--link); list-style: none; transition: background-color .15s ease;
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::after { content: '›'; font-size: 1.15rem; line-height: 1; transition: transform .15s ease; }
details.disclose[open] > summary::after { transform: rotate(90deg); }
details.disclose > summary:hover { background: var(--halo); }
details.disclose > summary:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
/* The ready-made plans' folded sections (card #196): one under another in the list's own spacing. */
.premade details.disclose { margin-bottom: 0; }
.search { margin-bottom: .75rem; }
.list { list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); box-shadow: var(--card-shadow); 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: 1.15rem; color: var(--text); margin: 1.5rem .25rem .5rem; font-weight: 700; }   /* the strongest form text (6i) */

.credits { text-align: center; margin: 1.5rem .5rem; }
.photo-form { margin: 0 0 1rem; display: grid; gap: .5rem; }
/* My account's Spelling card (account.php): the colloquialisms setting, and my dictionary with a Remove by each word. */
.spell-settings, .email-settings { margin-top: 1rem; }
.spell-settings h2, .email-settings h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.spell-settings h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.spell-words { list-style: none; margin: 0; padding: 0; }
.spell-words li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--divider); }
.spell-words li:first-child { border-top: 0; }
.spell-words li span { overflow-wrap: anywhere; }
.spell-words form { margin: 0; }
/* A grid stretches its child, which would center 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; }
.schedule-card .row-buttons.left > button.link { padding-inline: 0; }   /* Delete lines up with Export */
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; }
/* How to run a group (admin/help.php, card #248): each step a card, its number in an accent circle level with its
   heading, then where it is in the menu and links to the page that does it. On a phone the text takes the card's
   whole width and the number sits beside the heading alone. */
.guide-hero { display: flex; gap: 1rem; align-items: center; }
.guide-hero .group-picture, .guide-hero .menu-group-dot.big { width: 4rem; height: 4rem; font-size: 1.4rem; flex: none; }
.guide-hero p { margin: .35rem 0 0; }
.guide-steps { list-style: none; counter-reset: step; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.guide-steps > li { counter-increment: step; position: relative; padding-left: 4.25rem; min-width: 0; }
.guide-steps > li::before {
  content: counter(step); position: absolute; left: 1.25rem; top: 1.25rem; width: 2rem; height: 2rem;
  border-radius: 50%; display: grid; place-items: center; background: var(--mark); color: var(--badge-ink); font-weight: 700;
}
.guide-steps h2 { font-size: 1.1rem; margin: 0 0 .5rem; min-height: 2rem; display: flex; align-items: center; }
.guide-steps p { margin: 0 0 .6rem; }
.guide-steps .fmt-notes { margin-bottom: .6rem; }
.guide-where { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .85rem; color: var(--muted); }
.guide-dots { display: inline-grid; place-items: center; }
.guide-dots .ic { width: 18px; height: 18px; }
.guide-go { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.guide-go a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border);
  border-radius: 10px; color: var(--link); font-weight: 600; text-decoration: none;
}
.guide-go a:hover { background: var(--halo); }
.guide-roles { margin: .25rem 0 .6rem; }
/* .fmt-table.guide-roles: above .fmt-table th, whose header-row padding and size set the label above its line. */
.fmt-table.guide-roles th {
  text-align: left; vertical-align: top; white-space: nowrap; font-size: inherit; font-weight: 600; color: var(--text);
  padding: .55rem .75rem .55rem 0; border-top: 1px solid var(--border);
}
.guide-roles tr:first-child > * { border-top: 0; }
@media (max-width: 520px) {
  .guide-steps > li { padding-left: 1.25rem; }
  .guide-steps h2 { padding-left: 2.75rem; }
}
.install h1 { margin-top: .25rem; }
/* Format comments (web/format.php): each mark beside what it makes, drawn as a comment draws it (chat.css). */
.fmt p:first-child { margin-top: 0; }
.fmt h2 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.fmt code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--code-bg); padding: 0 .2em; border-radius: 4px; }
.fmt-table { width: 100%; border-collapse: collapse; }
.fmt-table th { text-align: left; font-size: .85rem; font-weight: 600; color: var(--muted); padding: 0 .5rem .4rem 0; }
.fmt-table td { padding: .55rem .5rem .55rem 0; border-top: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.fmt-table td:first-child { width: 52%; }
/* The admin page's visitor counts (card #652): figures right-aligned, the first column as wide as it needs. */
.visit-stats > p { margin: 0; }
.visit-stats > .visit-period { margin: 0; font-size: 1.05rem; }   /* the period every number below covers (card #704) */
.visit-stats details > summary .muted { font-weight: 400; }
.visit-stats details > summary { cursor: pointer; font-weight: 600; }
.visit-stats { grid-template-columns: minmax(0, 1fr); }   /* the card's width, whatever the tables' (they scroll) */
.visit-scroll { overflow-x: auto; max-width: 100%; margin-top: .5rem; }
.visit-chart { margin: 0; }
/* Scrolled to the newest day at first (right to left on the box, left to right inside). */
.visit-chart .visit-scroll { direction: rtl; }
.visit-chart-t { direction: ltr; width: 100%; border-collapse: collapse; }
.visit-chart-t td { min-width: 3rem; padding: 0 .2rem; text-align: center; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.visit-chart-t .vc-p { color: var(--muted); font-size: .85em; }
.visit-chart-t .vc-bars svg { display: block; width: 100%; height: 7rem; }
.visit-chart-t .vc-day { padding-top: .25rem; white-space: nowrap; font-weight: 600; font-size: .85em; }
.visit-chart .vc-pages { fill: var(--card-edge); }
.visit-chart .vc-visitors { fill: var(--chart); }
.vc-key { display: inline-block; width: .8em; height: .8em; vertical-align: -.05em; }
.vc-key.vc-pages { background: var(--card-edge); }
.vc-key.vc-visitors { background: var(--chart); }
.visit-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.visit-table td:first-child { width: auto; min-width: 5em; overflow-wrap: break-word; }
.visit-table th:not(:first-child), .visit-table td.num { text-align: right; white-space: nowrap; padding-left: .75rem; }
.fmt-got blockquote { margin: 0; padding: .1rem .6rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 4px; }
.fmt-got ul, .fmt-got ol { margin: 0; padding-left: 1.2rem; }   /* the list rows (card #632): level with the typed line */
.fmt-got .spoiler { background: var(--spoiler); color: transparent; border-radius: 4px; }
.fmt-notes { padding-left: 1.2rem; display: grid; gap: .5rem; margin: 0; }
/* Downloads: the KJV read aloud, a book to a line, its chapters behind a tap (card #656). */
.dl-books { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .3rem; }
.dl-books summary { cursor: pointer; }
.dl-books p { margin: .3rem 0 .5rem 1.1rem; line-height: 2; }
.dl-books p a { display: inline-block; min-width: 2.2em; text-align: center; }
.fmt-notes li { min-width: 0; overflow-wrap: anywhere; }   /* a long unbroken run (the NASB's years, on the credits page) wraps */
.api-list li > code:first-child { word-break: break-all; }   /* a long example address fills each line, never a lone "?" (Downloads page) */
#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,
         .up-remove, .note-close, .site-notice-x, .dialog-x, .b-as-stop, .b-saved-x, .b-drive-exit) {
  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;
}
/* Under the pointer each shows the halo in its own round box; the filled ones on photos and the dark toast change
   their own fill instead. */
html :is(.fwd-close, .votes-close, .gif-close, .quote-close, .banner-x, .cb-cancel, .rs-sheet-x, .note-close, .site-notice-x, .dialog-x, .b-saved-x):hover { background: var(--halo); }
html :is(.viewer-close, .toast button):hover { background: rgba(255,255,255,.25); /* design-ok: filled-hover */ /* design-ok: same-both-themes */ }
.up-remove:hover::before { background: rgba(0,0,0,.8); /* design-ok: filled-hover */ /* design-ok: same-both-themes */ }

/* 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-rim);
  border-radius: var(--radius); box-shadow: var(--popover-lift); 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); }
/* Reduce motion (the device's setting): every animation and transition is instant, and nothing glides (Larry,
   2026-10-14: "Every animation"). (.01ms, not none, so scripts waiting for an animation's end still hear it.) */
/* A page's dialog (the Nicene Creed on apply.php, card #208): on a phone, the full width from the bottom with a band
   above it to tap away (DESIGN.md §5a); centered on a computer. Its backdrop is solid, so no page text shows around
   it (Larry: no "little stuff on the edges"). Its title and large ✕ stay at the top while the
   text scrolls under them; "Every ✕" below sizes the ✕. */
dialog.page-dialog { width: 100%; max-width: 100%; max-height: calc(100dvh - 4rem); margin: auto 0 0; padding: 1rem 1.25rem 1.25rem;
  overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 16px 16px 0 0; background: var(--panel); color: var(--text); }
/* Set per theme here, not by a token: older browsers don't pass tokens to ::backdrop. The shade the page once took
   under it, now solid. */
dialog.page-dialog::backdrop { background: #868687; }
:root[data-theme="dark"] dialog.page-dialog::backdrop { background: #080808; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.page-dialog::backdrop { background: #080808; } }
dialog.page-dialog .dialog-head { position: sticky; top: -1rem; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: -1rem -1.25rem 1rem; padding: .6rem .6rem .4rem 1.25rem; background: var(--panel); border-bottom: 1px solid var(--border); }
dialog.page-dialog h2 { margin: 0; font-size: 1.25rem; }
dialog.page-dialog .creed { margin: 0 0 1rem; line-height: 1.55; }
dialog.page-dialog .small { margin: 0 0 .8rem; }
dialog.page-dialog .row-buttons { justify-content: center; margin-top: 1rem; }
/* "All readings done for the day!": Discuss, Scheduled Readings (a plain button, to the day's topic), and Close, on one
   row on a phone (card #806). */
dialog.ex-alldone .row-buttons { gap: .25rem; flex-wrap: wrap; }   /* (onto two rows only under 360px) */
dialog.ex-alldone .row-buttons > .primary.pad { padding: 0 .65rem; }
dialog.ex-alldone .row-buttons > .link { padding-inline: .35rem; }
dialog.ex-alldone .ex-sched { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .55rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--text); text-decoration: none; white-space: nowrap; }
dialog.ex-alldone .ex-sched:hover { background: var(--halo); }
dialog.page-dialog .checks-to { margin-top: 0; }
/* Two answers, at the right: a plain one and the main one, a link drawn as button.primary (a visitor's "To start or join
   a Bible study ...", OK and Create account now, card #515). */
dialog.page-dialog .page-notice-end { justify-content: flex-end; gap: .6rem; }
/* The plain button, also the plan maker's "Also read:" choices. */
dialog.page-dialog .page-notice-end > button:not(.primary), .plan-maker .mk-pick > button {
  min-height: var(--tap); padding: 0 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
dialog.page-dialog .page-notice-acts a.primary, .not-found a.primary {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1.1rem; border-radius: 10px;
  background: var(--button); color: var(--button-ink); font-weight: 600; text-decoration: none;
}
dialog.page-dialog .page-notice-acts a.primary:hover, .not-found a.primary:hover { background: var(--button-hover); /* design-ok: filled-hover */ }
.dialog-x { border: 0; background: none; color: var(--muted); cursor: pointer; }
/* The creed's one disputed phrase: tapping it steps through the readings (card #208); looks like the reader's
   cross-reference words, the text in its own color with a dotted underline, and wraps with the line around it. */
.creed-alt { display: inline; cursor: pointer; border-radius: 4px; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
.creed-alt:hover { background: var(--halo); }
@media (min-width: 700px) {
  dialog.page-dialog { max-width: 34rem; max-height: 85vh; margin: auto; border-radius: 16px; padding: 1.25rem 1.75rem 1.5rem; }
  dialog.page-dialog .dialog-head { top: -1.25rem; margin: -1.25rem -1.75rem 1rem; padding: .7rem .8rem .5rem 1.75rem; }
}

/* Extra readings' setup page (card #26; web/extras.php, extras.js): the steps in order, each with its translation or
   commentary, moved up and down; the day's reading has no Remove. */
.ex-list { list-style: none; margin: 0 0 1rem; padding: 0; }
/* The label and the move and remove buttons on one line, the translation or commentary under them at the row's full
   width (a commentary's name is long). */
.ex-list li { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; column-gap: .4rem; row-gap: .15rem;
  min-height: 56px; padding: .35rem 0; border-bottom: 1px solid var(--divider); }
.ex-list li:last-child { border-bottom: 0; }
.ex-num { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  border: 1.8px solid var(--accent); color: var(--accent); }
.ex-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.ex-list .ex-num { grid-row: 1 / span 2; }
.ex-list .ex-what { display: contents; }
.ex-kind { grid-column: 2; grid-row: 1; font-weight: 600; }
.ex-list .ex-what > :not(.ex-kind) { grid-column: 2 / -1; grid-row: 2; }
.ex-what select { width: 100%; max-width: 24rem; min-height: 44px; }
.ex-ib { grid-row: 1; width: 36px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--muted);
  border-radius: 10px; cursor: pointer; padding: 0; }
.ex-ib:hover:not(:disabled) { background: var(--halo); }
.ex-ib:disabled { opacity: .3; cursor: default; }
.ex-ib .ic { width: 20px; height: 20px; }
.ex-up .ic { transform: rotate(180deg); }
.ex-add { display: flex; gap: .5rem; flex-wrap: wrap; }
.ex-add button { min-height: 44px; padding: 0 1rem; border: 1px dashed var(--accent); border-radius: 10px; background: none; color: var(--accent);
  font-weight: 600; font-size: .95rem; cursor: pointer; }
.ex-add button:hover:not(:disabled) { background: var(--halo); }
.ex-add button:disabled { opacity: .4; cursor: default; }
.ex-save { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.ex-across { margin: 1rem .25rem 0; }
.ex-across small { display: block; color: var(--muted); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* The Donate button (cards #431, #447; donate_button()): a small pill with a red heart, inline after a sentence on the
   welcome page and About. Quiet beside the main buttons: an edge in the gold of the site's small marks. Under the
   pointer it brightens, never grays (#680; Larry: "Don't grey out when hover. Make brighter, not darker"). The menus'
   Donate links carry the same red heart. */
a.donate { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .7rem .05rem .55rem; vertical-align: .05em;
  border: 1px solid var(--mark); border-radius: 999px; color: var(--text); font-size: .9em; font-weight: 600; line-height: 1.5;
  text-decoration: none; white-space: nowrap; }
a.donate::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }   /* a 44px tap */
a.donate .ic, .menu nav a .ic.heart { width: 1em; height: 1em; color: var(--danger); fill: currentColor; }
a.donate:hover { background: var(--brighten); border-color: var(--danger); /* design-ok: donate-brighter */ }
.menu nav a .ic.heart { display: inline-block; vertical-align: -.1em; margin-right: .4rem; }
a.donate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The plan maker's "Download as a file" (#616): the button and its "More" on one line; the note opens under both. */
/* (#723) "About this plan" over the button; the button's second line says whose plan it is, smaller. */
.mk-about { margin-top: 1rem; }
.mk-about > h2.section { margin: 0 0 .25rem; }
button.plan-go { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.plan-go-for { font-size: .8em; font-weight: 400; margin-top: .15rem; }
.mk-download { display: flow-root; margin-top: .5rem; }
.mk-download > button.link { float: left; padding-inline: 0; margin-right: 1.6rem; }
.mk-download details.disclose { margin-bottom: 0; }
.mk-download details.disclose p { clear: left; margin: 0 0 .5rem; }

/* Day and Night's turn at sunrise and sunset (card #733): for 20 seconds every color moves gradually to the new
   theme's; theme.js adds the class and takes it away (its FADE). The colors are faded where the themes set them, on the
   root, as colors registered here, and every element drawn with them follows (card #773): a fade on every element
   itself (html.theme-fade *) gave the chat list 4 frames a second for the 20 seconds in the test browser, this 25 to 29.
   A browser fades a gradient's colors only this way too (the chat's background, the chosen chat's shading, a group's
   icon, a menu's scroll shadows; Larry: "there is one thing that DOES NOT fade at all, and that is the background of
   the chat"). A new theme color set on the root joins the registered ones and the list below; one written into a
   theme's rule for an element, not through a variable, fades on that element (the rule after the list).
   tests/sky_check.js finds any color that jumps instead. */
@property --wall-1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --wall-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --wall-3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --wall-4 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lines-1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lines-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lines-3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lines-4 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tint-base { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --halo { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chosen { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --popover { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --scroll-shade { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mk-well { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --wall-2-at { syntax: '<percentage>'; inherits: true; initial-value: 35%; }
@property --tint-a { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --tint-b { syntax: '<percentage>'; inherits: true; initial-value: 55%; }
@property --wp-opacity { syntax: '<number>'; inherits: true; initial-value: .15; }
@property --ic-top { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --ic-bot { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-dark { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-ring { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-soft { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --back-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --badge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --badge-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-rule { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bar-shade { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --border { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --brighten { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bubble-in { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bubble-out { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --button { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --button-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --button-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --card { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --card-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chart { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chip-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --code-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --danger { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --danger-fill { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --danger-fill-dark { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --divider { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --done { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --error-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --error-text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --field-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --glass { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --glass-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --glass-shine { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --group-fill { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-built { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-built-text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-check { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-check-text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-open { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-open-text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-ready { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --launch-ready-text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --link { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --list-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mark { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --marker { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --meta { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mk-link { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mk-muted { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mk-rim { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mk-shade { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --mk-track { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --muted-badge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n0 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n4 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n5 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --n6 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --ok-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --out-accent { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --out-link { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --out-meta { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --out-soft { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --panel { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --pill { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --popover-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --popover-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --popover-rim { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --selected { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --selected-ink { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --shadow { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --spell-blue { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --spell-red { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --spoiler { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --unread-bar { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --card-shade-1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --card-shade-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lift-1 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lift-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --lift-3 { syntax: '<color>'; inherits: true; initial-value: transparent; }
html.theme-fade {
  transition: background-color 20s linear, color 20s linear, border-color 20s linear, outline-color 20s linear, fill 20s linear,
    stroke 20s linear, box-shadow 20s linear,
    --wall-1 20s linear, --wall-2 20s linear, --wall-3 20s linear, --wall-4 20s linear, --lines-1 20s linear,
    --lines-2 20s linear, --lines-3 20s linear, --lines-4 20s linear, --tint-base 20s linear, --halo 20s linear,
    --chosen 20s linear, --popover 20s linear, --scroll-shade 20s linear, --mk-well 20s linear,
    --wall-2-at 20s linear, --tint-a 20s linear, --tint-b 20s linear, --wp-opacity 20s linear, --ab-frame 20s linear,
    --ab-frame-edge 20s linear, --accent 20s linear, --accent-dark 20s linear, --accent-ring 20s linear,
    --accent-soft 20s linear, --back-ink 20s linear, --badge 20s linear, --badge-ink 20s linear,
    --bar-rule 20s linear, --bar-shade 20s linear, --bg 20s linear, --border 20s linear, --brighten 20s linear,
    --bubble-in 20s linear, --bubble-out 20s linear, --button 20s linear, --button-hover 20s linear,
    --button-ink 20s linear, --card 20s linear, --card-edge 20s linear, --chart 20s linear, --chip-bg 20s linear,
    --code-bg 20s linear, --danger 20s linear, --danger-fill 20s linear, --danger-fill-dark 20s linear,
    --divider 20s linear, --done 20s linear, --error-bg 20s linear, --error-text 20s linear, --field-edge 20s linear,
    --glass 20s linear, --glass-edge 20s linear, --glass-shine 20s linear, --group-fill 20s linear,
    --hover 20s linear, --launch-built 20s linear, --launch-built-text 20s linear, --launch-check 20s linear,
    --launch-check-text 20s linear, --launch-open 20s linear, --launch-open-text 20s linear,
    --launch-ready 20s linear, --launch-ready-text 20s linear, --link 20s linear, --list-bg 20s linear,
    --mark 20s linear, --marker 20s linear, --meta 20s linear, --mk-link 20s linear, --mk-muted 20s linear,
    --mk-rim 20s linear, --mk-shade 20s linear, --mk-track 20s linear, --muted 20s linear, --muted-badge 20s linear,
    --n0 20s linear, --n1 20s linear, --n2 20s linear, --n3 20s linear, --n4 20s linear, --n5 20s linear,
    --n6 20s linear, --ok-bg 20s linear, --out-accent 20s linear, --out-link 20s linear, --out-meta 20s linear,
    --out-soft 20s linear, --panel 20s linear, --pill 20s linear, --popover-edge 20s linear,
    --popover-hover 20s linear, --popover-rim 20s linear, --selected 20s linear, --selected-ink 20s linear,
    --shadow 20s linear, --spell-blue 20s linear, --spell-red 20s linear, --spoiler 20s linear, --text 20s linear,
    --unread-bar 20s linear, --b-btn 20s linear, --b-btn-edge 20s linear, --b-btn-edge-hover 20s linear,
    --b-btn-hover 20s linear, --cite-on 20s linear, --cite-ring 20s linear, --rlink 20s linear, --tlink 20s linear,
    --b-sheet 20s linear, --b-sheet-edge 20s linear, --b-sheet-rule 20s linear, --rs-card 20s linear, --rs-edge 20s linear,
    --rs-field 20s linear, --send-hover 20s linear, --send-hover-glow 20s linear, --pane-edge 20s linear, --tip-bg 20s linear,
    --tip-edge 20s linear, --tip-fg 20s linear, --wl-bevel-hi 20s linear, --wl-bevel-lo 20s linear,
    --wl-glow 20s linear, --wl-gold-1 20s linear, --wl-gold-2 20s linear, --wl-gold-3 20s linear,
    --wl-gold-edge 20s linear, --wl-gold-glint 20s linear, --wl-gold-ink 20s linear, --card-shade-1 20s linear,
    --card-shade-2 20s linear, --lift-1 20s linear, --lift-2 20s linear, --lift-3 20s linear !important;
}
/* Colors a theme's rule gives an element itself, or through a variable set below the root (the verse numbers' --b-vn,
   on the reader's body), not the root's own (chat.css, bible.css, verse-peek.css). */
html.theme-fade .pane-list .bar :is(.bar-name, .menu > summary, .search-open), html.theme-fade :is(.b-inline-note, .wj,
  .b-unlock-err, .b-chapter [class*="b-hl-"], .b-sheet, .b-peek, .b-chapter .vn, .b-pairpick-vn),
  html.theme-fade dialog.page-dialog::backdrop {
  transition: background-color 20s linear, color 20s linear, border-color 20s linear, outline-color 20s linear, fill 20s linear,
    stroke 20s linear, box-shadow 20s linear !important;
}
html.theme-fade .ticon { transition: background-color 20s linear, color 20s linear, border-color 20s linear, outline-color 20s linear, fill 20s linear,
    stroke 20s linear, box-shadow 20s linear, --ic-top 20s linear, --ic-bot 20s linear !important; }

/* The sign-up page for recordings (card #822): each question on its own card, its question in bold and its note in
   gray; the versions in two columns where there is room; the name's "(required)" shown only while credit by name is
   asked for. */
.pledge-submit { margin-top: 1.25rem; text-align: center; }   /* PayPal's own Donate button (Larry's button code) */
.pledge-submit p { margin: 0 0 .5rem; }
.pledge-go { display: inline-block; background: none; border: 0; padding: 0; min-height: 0; cursor: pointer; border-radius: 6px; }
.pledge-go img { display: block; }
.pledge .card p { margin: 0; }
.pledge-intro { display: grid; gap: .6rem; }
.pledge-none { color: var(--muted); font-size: .95rem; }
.pledge-lead { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.pledge-cost { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 6px; padding: .6rem .8rem; }
.pledge-q { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.pledge-versions { min-width: 0; border: 0; padding: 0; margin: 0; }
.pledge-versions legend { padding: 0; margin-bottom: .35rem; }
.pledge-grid { display: grid; grid-template-columns: 1fr; column-gap: 1.5rem; }
@media (min-width: 600px) {   /* read down each column, most read first */
  .pledge-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); grid-auto-flow: column; }
}
.pledge-versions .have { color: var(--muted); }
.pledge-have { display: block; font-size: .8rem; line-height: 1.2; }
.pledge-foot { font-size: .9rem; margin-top: .5rem !important; }
.pledge-dollar { position: relative; display: block; }
.pledge-dollar::before { content: "$"; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pledge-dollar input { padding-left: 1.8rem; }
.pledge-credit { gap: .5rem; }
.pledge:not(:has([name=credit]:checked)) .req { display: none; }
.pledge .req { display: inline; color: var(--muted); font-weight: 400; }