/* THE SHARED LOOK (nav/ui.css): one frame for every window on the site, and one set of controls in them.

   Every app's window had its own header, close, back, buttons, and chips, each drawn its own way (some 27 headers, 90
   button classes). They all had the same shape: a Back if there's somewhere back, a small kicker over a title, the
   app's own tools, and Close. This gives them all the same look, by naming each app's own classes here, so no app's
   markup or insides change. Loaded after every app's stylesheet, so it has the last word.

   Each window says which door it's behind (data-door on its root: bible, study, people, live; nav/doors.js) and its
   kicker takes that door's color, so you always know where you are. Gold stays the one color for doing things.

   A new app uses the shared names directly (.ui-head, .ui-titles, .ui-kicker, .ui-title, .x-close, .ui-back, .ui-btn,
   .ui-btn.is-soft, .ui-chip, .ui-filter, .ui-seg, .ui-tools, .ui-pills, .ui-label, .ui-toast, .ui-field, .ui-sw); the older apps'
   own classes are named beside them. See CLAUDE.md, "The shared look". */
/* ---- the page under any window holds still (nav/layers.js marks it, html.win-open): a drag on a window where there's
   nothing to scroll doesn't move the page behind it (#480) */
html.win-open, html.win-open body { overflow: hidden; }
:root { --door-bible: #A6773A; --door-study: #46596B; --door-people: #6C4A73; --door-live: #3E7A4C; }
[data-door="bible"] { --door: var(--door-bible); }
[data-door="study"] { --door: var(--door-study); }
[data-door="people"] { --door: var(--door-people); }
[data-door="live"] { --door: var(--door-live); }

/* ---- the header: Back · kicker over title · the app's tools · Close */
.ui-head, .kg-head, .km-head, .cp-head, .pj-head, .gl-head, .wbw-head, .sb-head, .hc-head, .nt-head, .dn-head, .mz-head, .gst-head, .rv-head, .gp-bar, .app-shell-head, .dv-app-head, .fm-sheet-head, .tr-head-row {
  display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 12px 14px 10px 18px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--bg-raised); border-bottom: 1px solid var(--rule); box-sizing: border-box; }
.ui-titles, .cp-titles, .pj-titles, .gl-titles, .wbw-titles, .sb-titles, .hc-titles, .dn-titles, .tr-titles, .nt-head > div:first-child, .mz-ttl, .gst-title, .rv-title, .app-shell-title, .dv-app-title, .fm-sheet-title, .gp-titles {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; text-align: left; }
.ui-kicker, .cp-kicker, .pj-kicker, .gl-kicker, .wbw-kicker, .sb-kicker, .hc-kicker, .dn-kicker, .tr-kicker, .nt-head small, .mz-ttl small, .gst-title small, .rv-title small, .app-shell-title small, .dv-app-title small, .fm-sheet-title small, .gp-titles small {
  display: block; margin: 0; font: 800 10.5px/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--door, var(--gold)); }
.ui-title, .cp-title, .pj-title, .gl-title, .wbw-title, .sb-title, .hc-title, .dn-title, .tr-title, .nt-head h2, .mz-ttl h2, .gst-title, .rv-title, .app-shell-title, .dv-app-title, .fm-sheet-title, .gp-titles b {
  margin: 0; font: italic 400 22px/1.2 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---- Close: one pill */
.x-close, .nt-x, .mz-x, .gst-x, .rv-x, .gp-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 38px; padding: 0 14px; margin: 0;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 14px var(--sans); cursor: pointer; white-space: nowrap; }
.gp-close { padding-left: 8px; }
.x-close:active, .nt-x:active, .mz-x:active, .gst-x:active, .rv-x:active, .gp-close:active { transform: scale(0.96); }
/* ---- Back: one round button (or a pill, with a name) */
.ui-back, .cp-back, .pj-back, .gl-back, .hc-back, .mz-hub {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin-left: -6px;
  border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); font: 700 15px var(--sans); cursor: pointer; }
.mz-hub { width: auto; padding: 0 12px 0 10px; border-radius: 999px; display: inline-flex; gap: 4px; }
.ui-back[hidden], .cp-back[hidden], .pj-back[hidden], .gl-back[hidden], .hc-back[hidden], .mz-hub[hidden] { display: none; }
/* (Back with where it goes, in words: a pill, not a round) */
.ui-back.is-named { width: auto; padding: 0 12px 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; }
.ui-back.is-named svg { width: 17px; height: 17px; flex: none; }
.ui-back.is-named[hidden] { display: none; }
.ui-back.is-named span { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px var(--sans); }
/* ---- the gold button: for doing the thing */
.ui-btn, .cp-btn, .gl-btn, .pj-btn, .hc-btn, .wbw-btn, .nt-primary, .mz-primary, .me-primary, .gp-print, .bp-sbtn, .gst-go, .gst-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 20px;
  border: none; border-radius: 999px; background: var(--gold); color: var(--on-gold, #221E19); font: 800 15px var(--sans); cursor: pointer; }
/* (a mouse over a button: it answers, a shade deeper, as an outlined one does; only where there's a mouse, so a phone's tap
   leaves none behind; House Church's own, its accent's, its own. From the owner: "when you hover over the I'll build it myself button it highlights. The same thing
   needs to happen with the Build my path button") */
@media (hover: hover) {
  .ui-btn, .cp-btn, .gl-btn, .pj-btn, .wbw-btn, .nt-primary, .mz-primary, .me-primary, .gp-print, .bp-sbtn, .gst-go, .gst-next { transition: background-color 0.15s ease, box-shadow 0.15s ease; }
  .ui-btn:not(.is-soft):not(:disabled):hover, .cp-btn:not(.is-soft):not(:disabled):hover, .gl-btn:not(.is-soft):not(:disabled):hover, .pj-btn:not(.is-soft):not(:disabled):hover, .wbw-btn:not(.is-soft):not(:disabled):hover, .nt-primary:not(:disabled):hover, .mz-primary:not(:disabled):hover, .me-primary:not(:disabled):hover, .gp-print:not(:disabled):hover, .bp-sbtn:not(.is-soft):not(:disabled):hover, .gst-go:not(:disabled):hover, .gst-next:not(:disabled):hover {
    background: color-mix(in srgb, var(--gold) 86%, var(--ink)); box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--gold) 70%, transparent); }
  .ui-btn.is-soft:not(:disabled):hover, .cp-btn.is-soft:not(:disabled):hover, .gl-btn.is-soft:not(:disabled):hover, .pj-btn.is-soft:not(:disabled):hover, .wbw-btn.is-soft:not(:disabled):hover, .nt-soft:not(:disabled):hover, .mz-soft:not(:disabled):hover, .me-soft:not(:disabled):hover, .bp-sbtn.is-soft:not(:disabled):hover {
    background: color-mix(in srgb, var(--ink) 12%, var(--bg-raised)); }
}
/* (a gold button the width of its column is a block, so its column's auto margins center it: Goals' New goal) */
.gl-btn.gl-wide { display: flex; }
/* ---- the soft button: the other thing */
.ui-btn.is-soft, .cp-btn.is-soft, .gl-btn.is-soft, .pj-btn.is-soft, .hc-btn.is-soft, .wbw-btn.is-soft, .nt-soft, .mz-soft, .me-soft, .bp-sbtn.is-soft, .hc-lsoft {
  background: color-mix(in srgb, var(--ink) 7%, var(--bg-raised)); color: var(--ink); font-weight: 700; }
/* ---- a chip: a small thing to tap in a row of them */
.ui-chip, .cp-chip, .nt-chip, .gst-chip, .dn-chip, .rv-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink); font: 600 13.5px var(--sans); cursor: pointer; }

/* ---- a segmented switch: the modes of one view (Read · Look up · Learn; One family · Whole tree; Count up · Count down) */
.ui-seg, .cp-tabs, .hc-tabs, .gp-seg, .cp-mode, .tr-modes { display: flex; gap: 3px; padding: 4px; border: none; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.tr-modes, .cp-mode { display: inline-flex; }
.ui-seg > button, .cp-tab, .hc-tabs button, .gp-seg label, .cp-mode button, .tr-modes button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; margin: 0;
  border: none; border-radius: 10px; background: none; color: var(--muted); font: 700 13.5px var(--sans); text-align: center; cursor: pointer; box-shadow: none; }
.ui-seg > button.is-on, .ui-seg > button[aria-pressed="true"], .cp-tab[aria-selected="true"], .hc-tabs button.is-on, .gp-seg label.is-on, .cp-mode button[aria-pressed="true"], .tr-modes button[aria-pressed="true"] {
  background: var(--bg-raised); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
/* ---- a toolbar: tools to use on what's below it (the thought flow diagram's New line, Indent, Bold, …), on a quiet
   track like the segmented switch's; a tool that's on (a pen held), soft gold */
.ui-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.ui-tools > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 34px; padding: 0 9px; margin: 0; border: none; border-radius: 9px; background: none; color: var(--ink); font: 700 13.5px var(--sans); cursor: pointer; box-shadow: none; }
.ui-tools > button.is-on { background: color-mix(in srgb, var(--gold) 20%, var(--bg-raised)); box-shadow: inset 0 0 0 1.5px var(--gold); }
.ui-tools > button:disabled { opacity: 0.35; cursor: default; }
.ui-tools > button svg { width: 17px; height: 17px; flex: none; }
/* ---- pills in a row: the parts of an app (Today · Journal · Answered; the churches' views). The row itself: as much room
   above it as below, between the header's line and its own */
.ui-pills, .pj-tabs, .dn-tabs { padding-top: 10px; padding-bottom: 10px; }
.ui-pills > button, .pj-tabs button, .dn-tabs button, .nt-tabs button {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; margin: 0;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--muted); font: 700 13.5px var(--sans); white-space: nowrap; cursor: pointer; }
.ui-pills > button.is-on, .pj-tabs button.is-on, .dn-tabs button.is-on, .nt-tabs button.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
/* ---- a named list: a box with its name at the top (small caps, quiet) and rows inside it, each a row with a small icon,
   a title, a line of small print under it (a kicker first, in the door's color, saying what the row is), and something
   at its end (an arrow, or what's next). Where the home page's "Where you were", Goals' list, and Guided study's "Your
   studies" draw their rows; the older names beside the shared ones. A row's icon takes --c, the row's door's color. */
.ui-list, .hy-box, .gl-home, .gl-list, .hy-list:not(.hy-box > .hy-list) { border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); overflow: hidden; }
/* (a row in a door's color: the icon and the kicker; .door-bible, .door-study, .door-people, .door-live on the row) */
.ui-row.door-bible, .hy-item.door-bible { --c: var(--door-bible); } .ui-row.door-study, .hy-item.door-study { --c: var(--door-study); }
.ui-row.door-people, .hy-item.door-people { --c: var(--door-people); } .ui-row.door-live, .hy-item.door-live { --c: var(--door-live); }
body.site-dark .ui-row.door-bible, body.site-dark .hy-item.door-bible { --c: #D4A95A; } body.site-dark .ui-row.door-study, body.site-dark .hy-item.door-study { --c: #9DB0C4; }
body.site-dark .ui-row.door-people, body.site-dark .hy-item.door-people { --c: #C39BC9; } body.site-dark .ui-row.door-live, body.site-dark .hy-item.door-live { --c: #8CC49A; }
.ui-list-h, .hy-h, .gl-list-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 2px; font: 800 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* A named list that folds (details.ui-list.ui-fold > summary.ui-list-h > span (+ small, a count)): closed, only its name
   and count show, with a chevron; a tap opens it. For the parts of a page that aren't what to do now (a goal's page) */
details.ui-fold > summary { list-style: none; cursor: pointer; padding-bottom: 12px; -webkit-tap-highlight-color: transparent; }
details.ui-fold > summary::-webkit-details-marker { display: none; }
details.ui-fold > summary > span { flex: 1; }
details.ui-fold > summary > small { font: 700 12px var(--sans); letter-spacing: 0; text-transform: none; }
details.ui-fold > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: 0 3px 3px 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s ease; }
details.ui-fold[open] > summary { padding-bottom: 2px; }
details.ui-fold[open] > summary::after { margin: 3px 3px 0 0; transform: rotate(-135deg); }
.ui-rows, .ui-list > ul, .hy-list, .gl-list > ul { list-style: none; margin: 0; padding: 0; }
.ui-rows > li + li, .hy-list > li + li, .gl-list > ul > li + li { border-top: 1px solid var(--rule); }
.ui-row, .hy-item, .gl-lrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: none; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
a.ui-row, a.ui-row:hover { text-decoration: none; } /* (a row that's a link, to another site: a row, not underlined) */
@media (hover: hover) { .ui-row:hover, .hy-item:hover, .gl-lrow:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); } }
.ui-row:focus-visible, .hy-item:focus-visible, .gl-lrow:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ui-row-ic, .hy-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--c, var(--gold)) 14%, transparent); color: var(--c, var(--gold)); }
.ui-row-ic svg, .hy-ic svg { width: 18px; height: 18px; }
.ui-row > span, .hy-item > span, .gl-lrow > span.gl-lrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-row b, .hy-item b, .gl-lrow b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 14.5px/1.25 var(--sans); } /* (a long title takes a second line, then …) */
.ui-row small, .hy-item small, .gl-lrow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 12px; color: var(--muted); }
.ui-row-k, .hy-app, .gl-lrow-k { font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c, var(--gold)); }
.ui-row em, .hy-item em, .gl-lrow em { flex: none; font-style: normal; color: var(--muted); }
/* A named list's rows that swipe (ul.ui-swipe > li[data-id] > .rbx-act.is-ren + .rbx-act.is-rem + .rbx-in > the row, then
   .ui-swipe-ed and .ui-swipe-rm): right to change it, left to delete it, as the Bible's ribbons do (Bible.rowSwipe,
   reader/reader.js), wired to the list once it's drawn; on a computer, a quiet pencil and × at the row's end instead.
   One renamed in place is li.is-edit: a .ui-field, Save, Cancel. (The Guided study's list, .gst-mine, is the same.) */
.ui-swipe > li { position: relative; overflow: hidden; }
.ui-swipe .rbx-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; padding: 0; border-radius: 0; background: var(--bg-raised); touch-action: pan-y; }
.ui-swipe .rbx-in > :first-child { flex: 1; min-width: 0; }
.ui-swipe .rbx-in > .ui-grip:first-child { flex: none; } .ui-swipe .rbx-in > .ui-grip:first-child + * { flex: 1; min-width: 0; } /* (a grip first in the row, then the row) */
.ui-swipe .rbx-act { position: absolute; inset: 0; display: none; align-items: center; gap: 7px; padding: 0 18px; border-radius: 0; font: 700 13.5px var(--sans); }
.ui-swipe .rbx-act svg { width: 16px; height: 16px; flex: none; }
.ui-swipe .rbx-act.is-ren { justify-content: flex-start; background: color-mix(in srgb, var(--gold) 40%, var(--bg-raised)); color: var(--ink); }
.ui-swipe .rbx-act.is-rem { justify-content: flex-end; background: #B3402F; color: #fff; }
.ui-swipe > li[data-dir="r"] .rbx-act.is-ren, .ui-swipe > li[data-dir="l"] .rbx-act.is-rem { display: flex; }
.ui-swipe > li.is-far .rbx-act.is-ren { background: var(--gold); color: var(--on-gold, #fff); }
.ui-swipe > li.is-far .rbx-act.is-rem { background: #9E2A1E; }
.ui-swipe-ed, .ui-swipe-rm { display: none; flex: none; place-items: center; width: 34px; height: 34px; margin-right: 10px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--muted); font: 400 20px/1 var(--sans); cursor: pointer; opacity: 0.6; }
.ui-swipe-ed { margin-right: 6px; }
.ui-swipe-ed svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .ui-swipe-ed, .ui-swipe-rm { display: grid; } .ui-swipe-ed:hover, .ui-swipe-rm:hover { opacity: 1; color: var(--ink); } }
.ui-swipe > li.is-edit .rbx-in { gap: 8px; padding: 8px 10px 8px 14px; }
.ui-swipe > li.is-edit .ui-field { flex: 1; min-width: 0; padding: 8px 12px; border-color: var(--gold); border-radius: 12px; font: 600 16px var(--sans); }
.ui-swipe > li.is-edit .ui-btn { min-height: 38px; padding: 0 14px; }
/* Rows put in order by dragging (Bible.rowSwipe(ul, { …, sort(ids) })): a grip at the row's left (.ui-grip, a button, so the
   arrow keys move it too), taken at once; or the row anywhere, after a moment's hold. The row lifts and follows; the
   others make room. */
.ui-grip { flex: none; display: grid; place-items: center; width: 26px; height: 40px; margin: 0 -2px 0 -8px; padding: 0; border: none; border-radius: 8px; background: none; color: color-mix(in srgb, var(--muted) 70%, transparent); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.ui-grip svg { width: 16px; height: 16px; }
.ui-grip:hover, .ui-grip:focus-visible { color: var(--gold); }
.ui-swipe.is-sortable > li { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ui-swipe.is-sorting > li { transition: transform 0.18s ease; }
.ui-swipe.is-sorting > li.is-lift { transition: none; z-index: 3; overflow: visible; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.ui-swipe > li.is-lift .rbx-in { background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); }
.ui-swipe.is-sorting > li.is-lift .ui-grip { color: var(--gold); cursor: grabbing; }
.ui-swipe.is-sorting { cursor: grabbing; }
/* ---- a section's label: small caps, quiet */
.ui-label, .cp-sub, .pj-sub, .gl-sub, .hc-sub, .nt-h4, .gst-h, .dr-h, .dv-h3, .br-set-h { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* ---- a toast: one look (each app keeps its own place and timing) */
.ui-toast, .cp-toast, .pj-toast, .gl-toast, .hc-toast, .nt-toast, .mz-toast, .dv-toast, .gw-toast, .sh-toast, .gp-toast {
  padding: 11px 18px; border-radius: 14px; background: var(--ink); color: var(--bg); font: 600 14px/1.4 var(--sans); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5); }
/* (the kids' apps keep their big Back and their emoji in the shared frame) */
.kg-head, .km-head { gap: 10px; } .kg-back, .km-back { border: none; }
/* (the tree's title row sits inside its header, which has the padding already; and its own bar keeps its tools) */
.tr-head-row { margin: -12px -16px 8px; margin-top: calc(-1 * max(12px, env(safe-area-inset-top))); }
.tr-head .tr-close { margin-left: 0; }
/* ---- a field to type in */
.ui-field, .cp-find-r input, .cp-note-in, .bp-in, .tr-find input, .nt-search { border: 1.5px solid var(--rule); border-radius: 14px; background: var(--bg-raised); color: var(--ink); font-family: var(--sans); font-size: 16px; }
.ui-field:focus, .cp-find-r input:focus, .cp-note-in:focus, .bp-in:focus, .tr-find input:focus, .nt-search:focus-within { outline: none; border-color: var(--gold); }

/* ---- Devotions' tabs: the shared switch, its icons kept over their names */
.dv-tabbar { display: flex; gap: 3px; padding: 4px; border: none; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.dv-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 2px; border: none; border-radius: 10px; background: none; color: var(--muted); font: 700 11px var(--sans); cursor: pointer; box-shadow: none; }
.dv-tab.is-on { background: var(--bg-raised); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.dv-tab.is-on svg { color: var(--door, var(--gold)); }
/* ---- "What is this?" beside a title: one small round button */
.fd-about-toggle { width: 34px; height: 34px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--ink); opacity: 1; }
/* ---- a tool in a header (Foundations' "Study all cards"): quiet, like the others; gold is for the thing to do */
.fd-btn.fd-study-all, body.site-dark .fd-btn.fd-study-all { min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 13px var(--sans); box-shadow: none; }
/* ---- the page apps (Faithful Through the Ages, the Library, Which Bible?, Courses, Who's Who): the header names them
   now, so the big name under it, said twice, goes; their filters and "about" stay */
.app-shell-body > .wit-head > .wit-eyebrow, .app-shell-body > .wit-head > .wit-title { display: none; }
.app-shell-body > .wit-head { margin-top: 6px; }
/* (a phone: a long title a size smaller, whole, rather than cut) */
@media (max-width: 430px) { .ui-title, .cp-title, .pj-title, .gl-title, .wbw-title, .sb-title, .hc-title, .dn-title, .tr-title, .nt-head h2, .mz-ttl h2, .gst-title, .rv-title, .app-shell-title, .dv-app-title, .fm-sheet-title, .gp-titles b { font-size: 19px; } }

/* ---- a filter chip: one look wherever a list is filtered (Faithful's All · Filter, Which Bible's kinds of reading,
   Courses' topics and levels, Memorize's decks, the reader's chips); chosen, soft gold */
.ui-filter, .finder-opt, .wit-fbtn, .mz-decks button, .br-chip, .dv-mem-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--bg-raised); color: var(--ink); font: 600 13.5px var(--sans); cursor: pointer; }
.ui-filter.is-on, .finder-opt.is-on, .wit-fbtn.is-on, .mz-decks button.is-on, .br-chip.is-on, .dv-mem-chip.is-on {
  border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--bg-raised)); color: var(--ink); box-shadow: none; }
.mz-decks button.is-on small { color: var(--muted); opacity: 1; }
/* ---- more pills in a row: Courses · Seminaries; Which Bible's Spectrum · Compare · History; the reader's split view */
.deeper-tab, .bb-tab, .bs-tab {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; margin: 0;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--bg-raised); color: var(--muted); font: 700 13.5px var(--sans); white-space: nowrap; cursor: pointer; box-shadow: none; }
.deeper-tab.is-on, .bb-tab.is-on, .bs-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.bs-tab { flex: none; }
/* ---- an on/off toggle: one size and one color (gold) everywhere: the reader's links and settings, the tree's Kids mode,
   the account menu's switches; the reader's words of Jesus keep their red */
/* (a switch written as a button keeps none of a button's own border or padding: with them it had a dark rim and its knob off
   center. From the owner: "The toggle icons are not crisp and clean. They look distorted") */
.ui-sw, .br-sw, .tr-switch, .me-sw-t, .ad-sw { position: relative; flex: none; box-sizing: border-box; width: 36px; height: 20px; margin: 0; padding: 0; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 999px; background: color-mix(in srgb, var(--muted) 35%, transparent); transition: background 0.2s; }
.ui-sw::after, .br-sw::after, .tr-switch::after, .me-sw-t::after, .ad-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.ui-sw.is-on, .ad-sw.is-on, .br-links.is-on .br-sw, .bp-set-sw.is-on .br-sw, .tr-kids-toggle input:checked + .tr-switch, .me-sw-t.is-on { background: var(--gold); }
.br-redsw.is-on .br-sw { background: var(--wj, #B3261E); }
.ui-sw.is-on::after, .ad-sw.is-on::after, .br-links.is-on .br-sw::after, .bp-set-sw.is-on .br-sw::after, .tr-kids-toggle input:checked + .tr-switch::after { transform: translateX(16px); }
.br-tools .br-sw { width: 36px; height: 20px; } .br-tools .br-sw::after { width: 16px; height: 16px; }
.br-tools .br-links.is-on .br-sw::after { transform: translateX(16px); }

/* Every app's top bar (nav/bars.js): a tool not on the bar (no room, or not chosen); More (⋯), round as the flag is,
   after the tools; and its menu: the tools under it, and choosing them (Customize the top bar) */
.bar-out { display: none !important; }
.ui-more { position: relative; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0 6px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--muted); cursor: pointer; vertical-align: middle; -webkit-tap-highlight-color: transparent; }
.ui-more svg { width: 17px; height: 17px; }
.ui-more:hover, .ui-more:focus-visible, .ui-more[aria-expanded="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, var(--rule)); }
.ui-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ui-menu { position: fixed; z-index: 2147483499; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--rule); border-radius: 18px; background: var(--bg-raised); color: var(--ink); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22); }
.ui-menu[hidden] { display: none; }
.ui-menu-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: none; border-radius: 12px; background: none; color: var(--ink); font: 600 14.5px/1.3 var(--sans); text-align: left; cursor: pointer; }
@media (hover: hover) { button.ui-menu-row:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); } }
.ui-menu-row > span:not(.ui-menu-ic) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-menu-row small { font: 500 12px/1.35 var(--sans); color: var(--muted); }
.ui-menu-row.is-on .ui-menu-ic { color: var(--gold); }
.ui-menu-row.is-quiet { color: var(--muted); font-weight: 700; }
.ui-menu-row.is-set { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* (Customize the top bar: each row taken anywhere on it, nav/bars.js) */
/* (More's first line: its tools can go on the bar; and one carried up there, the bar it's going to marked, nav/bars.js. From the
   owner: "There needs to be a little hint for them to know the settings can be moved from inside the settings menu to the bar") */
.ui-menu-hint { display: flex; align-items: center; gap: 8px; margin: 2px 4px 6px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 9%, transparent); color: var(--ink); font: 600 12.5px/1.35 var(--sans); }
.ui-menu-hint svg { flex: none; width: 16px; height: 16px; color: var(--gold); }
.ui-menu .ui-menu-row[data-bar-run] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.ui-menu.is-carrying { opacity: 0.55; }
.ui-menu-row.is-lift { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.bar-ghost { position: fixed; z-index: 2147483600; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--gold); border-radius: 50%; background: var(--bg-raised); color: var(--ink); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45); transform: translate(-50%, -50%) scale(1.06); pointer-events: none; }
.bar-ghost svg { width: 20px; height: 20px; }
.bar-drop { outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 14px; }
/* (an app's More as its bar's settings, arranged the Bible's way: reader/headbar.js, nav/bars.js) */
.hb-panel { padding: 8px 10px; }
.hb-panel .hb-hint { margin: 2px 0 6px; }
.hb-panel .br-set-row { min-height: 46px; padding: 6px 4px; }
.hb-panel .hb-panel-in > :last-child .ui-menu-row { margin-top: 4px; }
.hb-panel .hb-edit-go:has(.hb-editbar) { margin: 0 -10px; padding: 8px 10px 4px; }
.hb-panel.hb-edit-on .hb-panel-fold { opacity: 0.35; pointer-events: none; }
.ui-menu-row.is-set .ui-sw { cursor: pointer; }
.ui-menu-row.is-set > .ui-grip { margin: 0 -6px 0 -6px; height: 32px; } /* (Customize the top bar: each tool put in its order by its grip, nav/bars.js) */
.ui-menu-row.is-lift { position: relative; z-index: 2; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }
.ui-menu-row.is-lift .ui-grip { color: var(--gold); cursor: grabbing; }
.ui-menu-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); }
.ui-menu-ic svg { width: 18px; height: 18px; }
.ui-menu-tx { font: 800 13px var(--sans); }
.ui-menu-hr { height: 1px; margin: 4px 8px; border: none; background: var(--rule); }
.ui-menu-h { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 6px; }
.ui-menu-h b { font: italic 600 19px/1.2 var(--serif); }
.ui-menu-h small { font: 13px/1.45 var(--sans); color: var(--muted); }
.ui-menu-b { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 6px 4px; }

/* ---- your favorites (nav/favorites.js): the star in each app's top bar, its choice, and its toast */
/* a number in a small circle (a count on a button: Gathered, Your notes here, the flag's, the Me button's, critique mode's,
   When the Bible Was Written's): centered in its circle by the box itself, not by its line's height, so a border taken off
   or a size changed can't leave it high. Each app's own class, named here as the older apps' are. From the owner: "The
   number in the gathered circle is not centered. Make sure this is not an issue on other places where this is displayed
   as well" (Gathered's, in the reader's settings, had lost its border and kept its line, 2px high) */
:is(.br-kept-n, .nh-n, .rp-flag-n, .me-badge, .me-yours i, .cq-n, .wbw-n):not([hidden]) { display: grid; place-items: center; }
.fav-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg-raised); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fav-btn svg { width: 17px; height: 17px; }
.fav-btn.is-on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); }
.fav-btn.is-on svg { fill: currentColor; }
.fav-btn[hidden] { display: none; }
.fav-menu-h { margin: 4px 10px 6px; font: 800 10.5px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fav-menu .ui-menu-ic svg { width: 18px; height: 18px; }
.fav-toast, .dp-toast { position: fixed; left: 50%; bottom: calc(var(--bnav-h, 0px) + 22px + env(safe-area-inset-bottom)); z-index: 2147483500; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.fav-toast.is-on, .dp-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fav-toast button, .dp-toast button { padding: 0; border: none; background: none; color: var(--gold); font: 800 14px var(--sans); cursor: pointer; }

/* ---- New here (nav/whatsnew.js): the first time a new thing is there for someone, a note pointing at it */
.nh-cue { position: fixed; left: 0; top: 0; z-index: 1000; display: flex; align-items: flex-start; gap: 8px; width: max-content; max-width: min(340px, calc(100vw - 20px)); padding: 10px 8px 10px 12px; border-radius: 14px; background: var(--ink); color: var(--bg-raised); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); font: 500 13.5px/1.4 var(--sans); opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.nh-cue.is-on { opacity: 1; transform: none; pointer-events: auto; }
.nh-cue > b { flex: none; margin-top: 1px; padding: 1px 6px; border-radius: 999px; background: var(--gold); color: var(--on-gold, #fff); font: 800 10px/1.5 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.nh-cue > span { flex: 1; min-width: 0; text-transform: none; letter-spacing: 0; }
.nh-cue > button { flex: none; width: 24px; height: 24px; margin: -3px 0 -3px 2px; padding: 0; border: none; border-radius: 50%; background: none; color: inherit; opacity: 0.7; font: 400 18px/1 var(--sans); cursor: pointer; }
.nh-cue > button:hover { opacity: 1; }
.nh-arrow { position: absolute; left: var(--ax, 50%); top: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.nh-cue.is-above .nh-arrow { top: auto; bottom: -5px; }

/* ---- a person's first letter, for a picture (yours in Me, and everyone's in House Church, Notes' household, critiques,
   Admin): in the logo's own Cinzel (brand/font/cinzel-initials.woff2: its capitals and numbers, built by
   brand/tools/build-logo.py), as the logo's "UNDEFILED" is. From the owner (#557): "Make the first letter username image
   option use the same font as our logo" */
@font-face { font-family: 'Cinzel Initials'; src: url('../brand/font/cinzel-initials.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
:is(.me-av, .nt-av, .hc-av, .ad-av, .cq-av):not(.has-art) { font-family: 'Cinzel Initials', Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: 0; line-height: 1; padding-top: 0.06em; }

/* ---- the top bar steps away (nav/tuck.js): every app's top folds away once its page is scrolled down, a slim bar
   left in its place (a chevron breathing in it) brings it back at a tap, and so does a firm pull down from the very top
   (.tk-pull, its arrow stretching till it turns gold). The family tree's way, the whole site's */
.tk { position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none; } /* (over the page, under what an app opens over it: a photograph full size, a 3D model, its own menus. From the owner: "The new drop arrow bar is covering up the x here") */
.tk-pos { position: relative; } .tk-flow { display: flow-root; }
.tk.is-own { z-index: 40; } /* (the Bible reader's: over its words and its Study pane; its settings and menus open with its top shown) */
.tk.is-stick { position: sticky; height: 0; } .tk.is-stick > .tk-bar { position: absolute; top: 0; left: 0; right: 0; } .tk.is-stick > .tk-pull { top: var(--tk-h, 22px); } /* (over a top held at the top of what scrolls) */
.tk-bar { pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 0; margin: 0; padding: 0 16px; overflow: hidden; border: 0; background: var(--bg); color: var(--muted); font: italic 600 13px/1 var(--serif); cursor: pointer; opacity: 0; transition: height 0.32s ease, opacity 0.25s ease, padding 0.32s ease; -webkit-tap-highlight-color: transparent; }
.tk-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-bar svg { flex: none; width: 13px; height: 13px; animation: tk-breathe 2.4s ease-in-out infinite; }
@keyframes tk-breathe { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(3px); opacity: 1; } }
.tk-on > .tk > .tk-bar, .tk.is-own.is-on > .tk-bar { height: var(--tk-h, 22px); padding: 0 16px; opacity: 1; box-shadow: inset 0 -1px 0 var(--rule); }
.tk-on > .tk.is-top > .tk-bar, .tk.is-own.is-on > .tk-bar { padding-top: max(0px, calc(var(--tk-h, 22px) - 22px)); } /* (the notch's room as nav/tuck.js measured it, the same that it left under the bar: never taller than that room, over the rows under it) */
.tk.is-own:not(.is-on) .tk-bar { pointer-events: none; }
.tk-anim > .tk-row { transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) !important; } /* (the spacing never eases: it changes at once and the rows slide, nav/tuck.js flip) */
.tk-on > .tk-row { opacity: 0 !important; pointer-events: none !important; }
.tk-on > .tk-row.tk-fl { transform: translateY(calc(-100% - 12px)) !important; }
.tk-pull { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; --k: 0; }
.tk-pull.is-on { opacity: 1; }
.tk-pull-ar { display: flex; flex-direction: column; align-items: center; color: var(--muted); transition: color 0.15s ease; }
.tk-pull-ar i { display: block; width: 3px; height: calc(6px + var(--k) * 46px); border-radius: 2px; background: currentColor; opacity: 0.7; }
.tk-pull-ar svg { width: 24px; height: 24px; margin-top: -8px; transform: scale(calc(0.8 + var(--k) * 0.4)); }
.tk-pull b { padding: 4px 10px; border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--rule); font: 600 12.5px var(--sans); color: var(--muted); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.4); }
.tk-pull.is-ready .tk-pull-ar { color: var(--gold); }
.tk-pull.is-ready b { color: var(--ink); border-color: var(--gold); }
/* (an app's own rows under the top bar tuck away too, when asked: a grabber, the short rounded line under them, tapped or
   drawn up (nav/tuck.js, stage nav:tuckrows)) */
.tk-gp { position: relative; }
.tk-grab { position: absolute; z-index: 3; width: 64px; height: 18px; margin: -9px 0 0 -32px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; transition: top 0.32s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease; }
.tk-grab i { display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--muted); opacity: 0.35; transition: opacity 0.15s ease, width 0.15s ease; }
.tk-grab:hover i, .tk-grab:focus-visible i, .tk-grab:active i { opacity: 0.75; width: 40px; }
.tk-grab:focus-visible { outline: none; } .tk-grab:focus-visible i { box-shadow: 0 0 0 2px var(--gold); }
.tk-grab.tk-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tk-bar, .tk-anim > .tk-row { transition: none !important; } .tk-bar svg { animation: none; } .tk-grab { transition: none; } }

/* ---- sections of your own, arranged (nav/arrange.js): Edit at a section's top; editing, its things a list to drag into
   order, favorite, or hide (a hidden one still listed, marked Hidden), the section's own ☆ and ↑ ↓; Done */
.arr-gone { display: none !important; }
.arr-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 10px; }
.arr-bar small { font: 600 12px var(--sans); color: var(--muted); }
.arr-bar .ui-chip, .arr-ed .ui-chip { display: inline-flex; align-items: center; gap: 6px; }
.arr-bar svg, .arr-ed .ui-chip svg { width: 15px; height: 15px; }
.arr-editing[data-arr-body] > :not(.arr-ed), .arr-editing [data-arr-body] > :not(.arr-ed) { display: none !important; } /* (a list's own editing: the list itself is its section, nav/arrange.js) */
.arr-ed { display: flex; flex-direction: column; gap: 10px; }
.arr-ed-h { display: flex; flex-direction: column; gap: 3px; }
.arr-ed-h b { font: italic 600 18px/1.25 var(--serif); color: var(--ink); }
.arr-ed-h small { font: 13px/1.45 var(--sans); color: var(--muted); }
.arr-ed-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.arr-ed-sec .ui-chip.is-on { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--rule)); background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); }
.arr-mv { display: inline-flex; gap: 6px; margin-left: auto; }
.arr-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg-raised); overflow: hidden; }
.arr-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 8px 4px 10px; border-bottom: 1px solid var(--rule); background: var(--bg-raised); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; } /* (taken anywhere on it: nav/arrange.js) */
.arr-row .arr-ic { cursor: pointer; }
.arr-row:last-child { border-bottom: none; }
.arr-row.is-lift { position: relative; z-index: 2; background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }
.arr-row.is-lift .ui-grip { color: var(--gold); cursor: grabbing; }
.arr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arr-t b { font: 600 14.5px/1.3 var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr-t small { font: 700 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.arr-row.is-hid .arr-t b { color: var(--muted); }
.arr-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.arr-ic svg { width: 19px; height: 19px; }
.arr-ic.is-on { color: var(--gold); }
.arr-ed-b { display: flex; justify-content: flex-end; }

/* At an end, nothing past it (Kit.endNote, nav/kit.js): a word that fades in over the page and out again, softly. A book's
   first and last parts (over its page), or over the screen itself (.is-screen) */
.ui-endnote { position: absolute; left: 50%; top: 34%; z-index: 30; padding: 9px 16px; border: 1px solid var(--rule); border-radius: 999px; background: color-mix(in srgb, var(--bg-raised, #FBF7EE) 92%, transparent); color: var(--muted); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); font: italic 15px/1.3 var(--serif, Georgia, serif); letter-spacing: 0.01em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.45s ease, transform 0.45s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ui-endnote.is-screen { position: fixed; top: 42%; z-index: 40; }
.ui-endnote.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ui-endnote { transition: opacity 0.3s ease; transform: translate(-50%, 0); } }