/* Type: route.bible's faces, self-hosted from /fonts (SIL OFL 1.1, licenses beside the files).
   Lexend sets everything; Geist sets the small uppercase labels (chips, counts, the Date | Genre switch). */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/lexend/lexend-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; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/lexend/lexend-latin.woff2") format("woff2");
  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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist/geist-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; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/geist/geist-latin.woff2") format("woff2");
  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; }

/* route.bible's palette (static/css/tokens.css): warm paper in light, true black in dark; square corners;
   solid "inverted" blocks for the primary action and section bars. Muted text is a step darker than
   route.bible's in light mode so it reads at 5.3:1 on the page and 4.6:1 on a highlighted row (theirs is 4.2:1). */
:root {
  --bg: #f3f0eb;
  --surface: #faf9f6;
  --raised: #ebe8e3;
  --fg: #241f19;
  --fg-2: #5e554a;
  --muted: #6a6156;
  --line: #d8cfbf;
  --line-subtle: #e8dfd1;
  --hover: #e8dfd2;
  --hover-line: #cfc4b3;
  --accent: #241f19;
  --on-accent: #f3f0eb;
  --brand: #ef8747;
  --focus: #b35f2f;
  --shadow: 0 8px 20px rgb(85 63 35 / .12);
  --danger: #b3261e;
  --danger-soft: #d07474;
  --on-danger: #fff;
  --font-sans: "Lexend", "Helvetica Neue", sans-serif;
  --font-label: "Geist", "Lexend", "Helvetica Neue", sans-serif;
  --ease: .15s ease;
  --yellow: #f5d547;
  --green: #8fd18b;
  --blue: #8cc4f2;
  --pink: #f4a6c9;
  --purple: #c3a6f2;
  --orange: #f6b26b;
  font: 16px/1.58 var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark: the system's choice unless the header's theme button picked one (data-theme on <html>, set
   before first paint by /theme.js), like route.bible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000;
    --surface: #08090c;
    --raised: #0e0f12;
    --fg: #f1f3f7;
    --fg-2: #cfd4dd;
    --muted: #a1a7b2;
    /* route.bible's hairlines (#13151a) all but vanish on a monitor; these sit where its borders render. */
    --line: #1c1f26;
    --line-subtle: #13151a;
    --hover: #1e1e24;
    --hover-line: #2a2a32;
    --accent: #f1f3f7;
    --on-accent: #000;
    --brand: #564d70;
    --focus: #9f8bd8;
    --shadow: 0 8px 24px rgb(0 0 0 / .5);
    --danger: #f28b82;
    --danger-soft: #eea0a0;
    --on-danger: #000;
  }
}
:root[data-theme="dark"] {
  --bg: #000;
  --surface: #08090c;
  --raised: #0e0f12;
  --fg: #f1f3f7;
  --fg-2: #cfd4dd;
  --muted: #a1a7b2;
  /* route.bible's hairlines (#13151a) all but vanish on a monitor; these sit where its borders render. */
  --line: #1c1f26;
  --line-subtle: #13151a;
  --hover: #1e1e24;
  --hover-line: #2a2a32;
  --accent: #f1f3f7;
  --on-accent: #000;
  --brand: #564d70;
  --focus: #9f8bd8;
  --shadow: 0 8px 24px rgb(0 0 0 / .5);
  --danger: #f28b82;
  --danger-soft: #eea0a0;
  --on-danger: #000;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; }

/* route.bible's grain (static/css/app.css): in dark only, a faint glow at the top (body::before) and its
   noise tile (/monologue-noise.webp, the same file) laid over the page at 5.5% with lighten, fading toward
   the middle (body::after). Both are fixed, under the page's content and never in the way of a tap.
   route.bible shows no grain in light, and neither does this. The tile only loads once dark applies. */
body::before, body::after { content: none; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: 0;
  background:
    radial-gradient(760px 320px at 50% -6%, rgb(20 18 28 / .022), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 100%, rgb(20 18 28 / .01)), var(--bg) 62%);
}
body::after {
  z-index: 1;
  opacity: .055;
  mix-blend-mode: lighten;
  background: url("/monologue-noise.webp") left top / 512px auto repeat;
  -webkit-mask-image: radial-gradient(ellipse at 50% 34%, rgb(0 0 0 / .28) 0%, rgb(0 0 0 / .45) 28%, rgb(0 0 0 / .86) 70%, #000 100%);
  mask-image: radial-gradient(ellipse at 50% 34%, rgb(0 0 0 / .28) 0%, rgb(0 0 0 / .45) 28%, rgb(0 0 0 / .86) 70%, #000 100%);
}
:root[data-theme="dark"] body::before, :root[data-theme="dark"] body::after { content: ""; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before, :root:not([data-theme="light"]) body::after { content: ""; }
}
::selection { background: color-mix(in oklab, var(--brand) 35%, transparent); }
main { position: relative; z-index: 2; max-width: 32rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
h1 { font-size: 1.625rem; line-height: 1.15; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.035em; }
/* The start page's title, set like route.bible's wordmark. */
#start h1 { font-size: 2.75rem; letter-spacing: -.07em; margin-bottom: .75rem; }
.lede, .quiet-text { color: var(--muted); margin: 0 0 1.5rem; }
form { display: grid; gap: .75rem; margin: 0 0 1rem; }
label { display: grid; gap: .25rem; font-size: .875rem; color: var(--muted); }
input { font: inherit; font-weight: 450; color: var(--fg); background: var(--raised); border: 1px solid var(--line); border-radius: 0; padding: .625rem .875rem; width: 100%; transition: border-color var(--ease), background-color var(--ease); }
input:hover { border-color: var(--hover-line); }
input::placeholder { color: var(--muted); }
/* One focus ring everywhere: route.bible's, a solid 2px in the brand hue. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input:focus-visible { outline-offset: -1px; }
input[name="password"] { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }
button { font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: .01em; cursor: pointer; border: 1px solid var(--accent); border-radius: 0; padding: .625rem 1rem; background: var(--accent); color: var(--on-accent); transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease); }
button:hover { background: color-mix(in oklab, var(--accent) 86%, var(--bg)); }
button.quiet { background: transparent; color: var(--fg); border-color: var(--line); }
button.quiet:hover { background: var(--hover); border-color: var(--hover-line); }
#use-session { margin: 0 0 1.25rem; }
button.danger, .danger { color: var(--danger); }
button.danger:not(.quiet) { background: transparent; border-color: transparent; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.error { color: var(--danger); margin: 0; min-height: 0; font-size: .875rem; }
.error:empty { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
header .theme-toggle { margin-left: auto; }
/* The theme button, route.bible's: a square icon cell beside the ••• menu, showing the theme in use. */
.theme-toggle { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 0; color: var(--fg-2); box-shadow: none; transition: background-color var(--ease), color var(--ease), border-color var(--ease); }
.theme-toggle:hover { background: var(--hover); border-color: var(--hover-line); color: var(--fg); }
.theme-toggle svg { display: block; }
/* On the start page, which has no header, it sits in the top corner. */
#start { position: relative; }
.theme-toggle.corner { position: absolute; top: -2rem; right: 0; }
/* The library's name, edited in place: plain heading text until it has focus. */
#lib-name { min-width: 2ch; max-width: 70%; overflow-wrap: anywhere; font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.3; padding: .125rem .375rem; margin-left: -.375rem; border-radius: 0; outline: none; cursor: text; -webkit-user-modify: read-write-plaintext-only; transition: background-color var(--ease), box-shadow var(--ease); }
#lib-name:focus { box-shadow: inset 0 0 0 1px var(--line); background: var(--raised); }
/* A message: route.bible's quiet panel, a raised block with a brand edge. */
#flash { font-size: .875rem; color: var(--fg-2); margin: 0 0 1rem; padding: .625rem .875rem; background: var(--raised); box-shadow: inset 3px 0 0 var(--brand); overflow-wrap: anywhere; }
#flash:empty { display: none; }
#flash button { background: none; border: 0; color: var(--fg); padding: 0; font-size: inherit; text-decoration: underline; text-underline-offset: .2em; }
#continue-row { align-items: center; flex-wrap: nowrap; }
#continue-row > button { flex: 1; }
.note { margin: -.75rem 0 1.5rem; padding: .625rem .875rem; background: var(--raised); border: 1px solid var(--line-subtle); font-size: .875rem; color: var(--fg-2); }
.offer { margin: 0 0 1rem; padding: .75rem .875rem; background: var(--raised); border: 1px solid var(--line-subtle); box-shadow: inset 3px 0 0 var(--brand); font-size: .875rem; }
.offer p { margin: 0 0 .625rem; }
.offer .row { align-items: center; }
.offer button.quiet { padding: .375rem .75rem; }
.offer button.link { flex: none; padding: .375rem .25rem; }

details { position: relative; }
summary { list-style: none; cursor: pointer; padding: .25rem .5rem; border-radius: 0; color: var(--muted); letter-spacing: .1em; transition: background-color var(--ease), color var(--ease); }
summary::-webkit-details-marker { display: none; }
#menu > summary:hover, #menu[open] > summary { background: var(--hover); color: var(--fg); }
/* Popovers: route.bible's autocomplete panel, square on the soft surface, rows that light up with an edge. */
details > div { position: absolute; right: 0; top: 2.25rem; z-index: 20; display: grid; min-width: 11rem; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); }
details > div button { background: transparent; border: 0; color: var(--fg); text-align: left; font-weight: 500; padding: .5rem .625rem; box-shadow: inset 3px 0 0 transparent; }
details > div button.danger { color: var(--danger); }
details > div button:hover { background: var(--hover); box-shadow: inset 3px 0 0 var(--brand); }
/* The ••• menu: a few places to go, then Log out on its own. */
#menu > div { min-width: 12rem; padding: 0; }
#menu > div button { padding: .6875rem .875rem; }
#menu > div hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* The add form, built like route.bible's search row: the color in a square cell, the field, and the
   action as one inverted block, all one height and joined edge to edge. */
#add { grid-template-columns: auto 1fr auto; align-items: stretch; gap: 0; }
#add .error { grid-column: 1 / -1; margin-top: .5rem; }
#add > button[type="submit"] { height: 2.75rem; padding: 0 1.125rem; }
/* scripture-inline's <si-passage-input> reads these tokens inside its shadow root. Its --accent is the
   highlighted suggestion, so it gets the hover color here rather than ours (which fills buttons). */
si-passage-input {
  min-width: 0;
  --input: var(--line); --border: var(--line); --ring: var(--focus); --radius: 0px;
  --popover: var(--surface); --popover-foreground: var(--fg);
  --accent: var(--hover); --accent-foreground: var(--fg); --muted-foreground: var(--muted);
  --destructive: var(--danger);
  --font-sans: "Lexend", "Helvetica Neue", sans-serif;
}
si-passage-input::part(input) { height: 2.75rem; padding: 0 .875rem; font-size: 1rem; font-weight: 450; line-height: 1.5; border-radius: 0; box-shadow: none; background: var(--raised); transition: border-color .15s, background-color .15s; }
si-passage-input::part(input):hover { border-color: var(--hover-line); }
si-passage-input::part(input):focus-visible { box-shadow: none; outline: 2px solid var(--focus); outline-offset: -1px; }
/* The field is narrow on a phone, beside the colors; its suggestions get room to read on one line. They
   hang from the field's bottom edge, square, like route.bible's. */
si-passage-input::part(listbox) { top: calc(100% - 1px); right: auto; padding: 0; width: max-content; min-width: 100%; max-width: min(20rem, calc(100vw - 2.5rem)); border-radius: 0; box-shadow: var(--shadow); }
si-passage-input::part(option) { white-space: nowrap; padding: .625rem .875rem; border-radius: 0; border-bottom: 1px solid var(--line-subtle); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; transition: background-color .15s; }
si-passage-input::part(option):last-child { border-bottom: 0; }
si-passage-input::part(count) { font-family: var(--font-label); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
/* The add form's color: a dot like a row's, in a square cell joined to the field, centered over the
   row dots below (rows pad var(--gutter) on the left). */
#add-dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: var(--raised); border: 1px solid var(--line); border-right: 0; border-radius: 0; }
#add-dot:hover { background: var(--hover); }
#add-dot .dot { width: .875rem; height: .875rem; border: 0; }
#add-dot:hover .dot { box-shadow: 0 0 0 3px var(--line); }
.dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; padding: 0; display: inline-block; flex: none; background: var(--yellow); border: 2px solid transparent; transition: box-shadow var(--ease); }
.dot:hover { background: var(--yellow); }
.dot[data-color="green"] { background: var(--green); }
.dot[data-color="blue"] { background: var(--blue); }
.dot[data-color="pink"] { background: var(--pink); }
.dot[data-color="purple"] { background: var(--purple); }
.dot[data-color="orange"] { background: var(--orange); }
button.dot[aria-pressed="true"] { border-color: var(--fg); }

/* The list, in groups: each a disclosure whose whole header toggles it. The header is route.bible's
   section bar, an inverted block; the rows under it are its result rows, with an edge on hover. */
:root { --gutter: .9375rem; }
#list .rows { list-style: none; margin: 0 0 .5rem; padding: 0; }
#list .rows > li { border-bottom: 1px solid var(--line-subtle); }
#list .rows > li:last-child { border-bottom: 0; }
#list .group { margin: 0 0 .375rem; }
#list .group > summary { display: flex; align-items: center; gap: .5rem; min-height: 2.25rem; padding: .375rem .8rem .375rem var(--gutter); letter-spacing: -.01em; border-radius: 0; background: var(--accent); color: var(--on-accent); font-size: .9375rem; font-weight: 650; line-height: 1.3; user-select: none; -webkit-user-select: none; }
#list .group > summary::before { content: ""; flex: none; width: .4rem; height: .4rem; margin: 0 .3rem 0 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
#list .group[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
#list .group > summary:hover { background: color-mix(in oklab, var(--accent) 86%, var(--bg)); }
#list .group > summary:focus-visible { outline-offset: 2px; }
#list .group .count { margin-left: auto; font-family: var(--font-label); font-size: .8125rem; font-weight: 500; color: color-mix(in oklab, var(--on-accent) 78%, transparent); font-variant-numeric: tabular-nums; }
/* Date | Genre: a compact segmented control above the list, in route.bible's small uppercase label type. */
.segmented { display: inline-flex; margin: 0 0 .75rem; padding: 0; border: 1px solid var(--line); border-radius: 0; }
.segmented[hidden] { display: none; }
.segmented button { padding: .3125rem .75rem; font-family: var(--font-label); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: transparent; border: 0; color: var(--muted); border-radius: 0; }
.segmented button:hover { background: var(--hover); color: var(--fg); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.row { display: flex; align-items: center; gap: .625rem; padding: .375rem 0 .375rem var(--gutter); }
.row > .dot { width: .875rem; height: .875rem; border: 0; position: relative; }
.row > .dot::after { content: ""; position: absolute; inset: -.75rem; }
#list .row { position: relative; box-shadow: inset 3px 0 0 transparent; transition: background-color var(--ease), box-shadow var(--ease); }
@media (hover: hover) { #list .row:hover { background: var(--raised); box-shadow: inset 3px 0 0 var(--brand); } }
.row .ref { white-space: nowrap; font-weight: 600; letter-spacing: -.015em; }
/* One link opens the row: its ::after covers the whole line, and the row's buttons sit above it. */
.row-link { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .625rem; color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
.row > button, .actions > button { position: relative; z-index: 1; }
/* The row's three icons as one compact group: no gap between their 32px tap targets. */
.actions { display: flex; align-items: center; flex: none; margin-right: 0; }
.actions .icon { min-width: 2rem; height: 2rem; padding: 0 .4375rem; }
/* A row being edited: its passage field where the reference was, set like the reference (bold, same
   size, no padding or border, a hairline underline), so the row keeps its exact size. The suggestions
   float over the list below instead of pushing it. */
.ref-edit { flex: 1; min-width: 0; margin: 0; display: block; }
.ref-edit si-passage-input { display: block; height: 1.5rem; }
.ref-edit si-passage-input::part(input) {
  display: block; width: 100%; height: 1.5rem; margin: 0; padding: 0; border: 0; border-radius: 0;
  font: 600 1rem/1.5rem "Lexend", "Helvetica Neue", sans-serif; letter-spacing: -.015em;
  color: var(--fg); background: transparent; outline: none;
  box-shadow: inset 0 -1px 0 var(--muted);
}
.ref-edit si-passage-input::part(input):focus-visible { box-shadow: inset 0 -2px 0 var(--focus); }
.ref-edit[data-invalid] si-passage-input::part(input) { box-shadow: inset 0 -1px 0 var(--danger); }
.ref-edit si-passage-input::part(listbox) { position: absolute; top: calc(100% + .375rem); left: 0; z-index: 30; }
.row .quote { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.icon { display: inline-grid; place-items: center; flex: none; min-width: 2.25rem; height: 2.25rem; padding: 0 .375rem; background: transparent; color: var(--muted); border: 0; border-radius: 0; font-size: .8125rem; }
.icon:hover { background: transparent; }
.icon svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon:hover, .icon:focus-visible { color: var(--fg); }
.icon.trash { color: var(--danger-soft); }
.icon.trash:hover, .icon.trash:focus-visible { color: var(--danger); }
/* Armed Delete: white on deep red in light mode (6.5:1), black on soft red in dark mode (8.8:1). */
.actions .icon[data-confirm], .actions .icon.trash[data-confirm]:is(:hover, :focus-visible) { color: var(--on-danger); background: var(--danger); padding: 0 .75rem; }
.actions .icon[data-confirm]:last-child { margin-right: .375rem; }
#danger { margin-top: 2.5rem; }
/* For developers: links to the spec, on the Sync screen only. */
#dev-links { margin-top: 2.5rem; font-size: .875rem; color: var(--muted); }
#dev-links p { margin: 0 0 .25rem; }
#dev-links .dev-title { color: var(--fg); font-weight: 600; }
#dev-links a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; transition: color var(--ease), text-decoration-color var(--ease); }
#dev-links a:hover { color: var(--fg); text-decoration-color: currentColor; }
#dev-links + #danger { margin-top: 1.5rem; }
#danger summary, .lost-key summary { letter-spacing: 0; padding: .25rem 0; font-size: .875rem; }
#danger summary:hover, .lost-key summary:hover { color: var(--fg); }
#danger p { margin: .5rem 0 .75rem; font-size: .875rem; }
.lost-key { margin-top: .75rem; }
.lost-key p { margin: .5rem 0 0; color: var(--muted); font-size: .875rem; }
#color-pop { position: fixed; inset: auto; margin: 0; display: none; gap: .5rem; padding: .625rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 0; box-shadow: var(--shadow); }
#color-pop:popover-open { display: flex; }
#color-pop .dot { width: 1.75rem; height: 1.75rem; }
button.link { background: transparent; border: 0; color: var(--muted); padding: 0; text-align: left; font-size: .875rem; font-weight: 500; flex: 1; border-radius: 0; }
button.link:hover { background: transparent; color: var(--fg); }
button.link[data-state="error"] { color: var(--danger); }
.dot[data-color="own"] { background: transparent; }

/* Color filters: route.bible's chips, small uppercase Geist in a square hairline box. */
#filters { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 .75rem; }
#filters:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .5rem; font-family: var(--font-label); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 0; }
.chip:hover { background: var(--hover); color: var(--fg); border-color: var(--hover-line); }
.chip[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); }
.chip .dot { width: .625rem; height: .625rem; border: 0; }


#color-list { list-style: none; margin: 0 0 1rem; padding: 0; }
#color-list li { display: flex; align-items: center; gap: .75rem; padding: .375rem 0; }
#color-list input:not([type="color"]) { flex: 1; }
input[type="color"] { width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; flex: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
#add-color { grid-template-columns: auto 1fr auto; align-items: center; }

.check { display: flex; align-items: flex-start; gap: .75rem; color: var(--fg); font-size: 1rem; padding: .875rem 0; border-top: 1px solid var(--line); }
.check input[type="checkbox"] { width: auto; margin: .3rem 0 0; accent-color: var(--accent); }
.check small { display: block; color: var(--muted); font-size: .8125rem; }
.check.folder { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.check.folder > span, .check.access > span { flex: 1 1 14rem; }
.check.access { flex-wrap: wrap; justify-content: space-between; }
#key-reveal { margin: 0 0 .75rem; }
#key-reveal[hidden] { display: none; }
.status-line { font-size: .875rem; color: var(--fg-2); margin: 0 0 1rem; padding: .5rem .875rem; background: var(--raised); box-shadow: inset 3px 0 0 var(--brand); overflow-wrap: anywhere; }
.status-line:empty { display: none; }
.backup-actions { margin: 0 0 1rem; padding: 0; }
.check.access .row { padding-left: 0; }
.key-box { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin: 0 0 1rem; background: var(--raised); border: 1px solid var(--line); border-radius: 0; }
.key-box code { flex: 1; font-size: 1rem; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; }

/* A row's passage text (scripture-inline's <si-passage>), under the row, in route.bible's reading type. */
.verse-text {
  display: block;
  padding: 0 .75rem .875rem calc(var(--gutter) + 1.5rem);
  --scripture-font-size: .9375rem;
  --scripture-line-height: 1.65;
  --scripture-font-family: "Lexend", "Helvetica Neue", sans-serif;
  --scripture-max-width: none;
  --yv-foreground: var(--fg-2);
  --yv-muted-foreground: var(--muted);
  --yv-background: transparent;
}
.icon.text[aria-expanded="true"] { color: var(--fg); }

/* The start screen: passkey first when this browser has passkeys, then the key form, then a way to start. */
button.wide { width: 100%; padding: .8125rem 1rem; }
#start.has-passkey #unlock-form button[type="submit"] { background: transparent; color: var(--fg); border-color: var(--line); }
#start.has-passkey #unlock-form button[type="submit"]:hover { background: var(--hover); border-color: var(--hover-line); }
#start label.light { font-size: .8125rem; }
#start label.light input { padding: .5rem .875rem; font-size: .9375rem; }
.divider { display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; color: var(--muted); font-family: var(--font-label); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.new-here { margin: 2.5rem 0 0; color: var(--muted); font-size: .875rem; }
.new-here button.link { display: inline; flex: none; color: var(--fg); text-decoration: underline; text-underline-offset: .2em; font-size: inherit; }