/* Adullam's look: a warm refuge, soft-edged and lit from below.
   One typeface for the interface (Inter) and one for Scripture (Source Serif 4),
   so a quoted verse always reads as the text itself rather than as UI.
   Controls are pills, cards are generously rounded, and the main surfaces
   (the welcome preview, the verse of the day, sign in, signed out) carry a soft
   radial glow built from --glow and --glow-strong. The primary button is a
   gradient from --ember to --ember-hi with an --ember-glow shadow beneath it.
   Every colour comes from the theme tokens below, so a theme is one block and
   nothing else in this file needs to know which one is active. Themes are set
   on <html data-theme="..."> by the early script in index.html (and changed in
   Settings by web/cave.js), defaulting to Dawn, or Twilight in dark mode. */

/* The signature layer. These defaults leave every free theme exactly as it
   was; a supporter theme overrides them in its own block below
   (so this block must stay above the themes, since they tie on specificity).
   --aura         a fixed background painted behind the whole app
   --ember-grad   the primary button and Aquila's avatar
   --title-ink    a gradient through page titles (with --title-fill: transparent)
   --card-tint    a faint sheen over every card
   --lift         the shadow that lifts cards off the page
   --sheen        a highlight along a primary button's top edge
   --bar-glass    how much of the ground shows in the frosted top bar
   --ornament     a still picture fixed behind the app (Almond's branch, Cedar's sky),
                  with --ornament-fade to soften it
   --aura-motion  the animation that lets --aura drift (always still for reduced motion)
   --edge         the border of feature cards (verse of the day, the fast, the Bible door)
   --nav-active   the lit nav item
   --grad-size    how wide --ember-grad is laid, so hovering a button slides along it
   --select       text selection, with --select-ink for its text */
:root {
  --aura: none;
  --ember-grad: linear-gradient(135deg, var(--ember) 0%, var(--ember-hi) 100%);
  --title-ink: none; --title-fill: currentColor;
  --card-tint: none; --lift: none; --sheen: 0 0 #0000;
  --bar-glass: 92%;
  --ornament: none; --aura-motion: none;
  --edge: linear-gradient(var(--ember-line), var(--ember-line));
  --nav-active: var(--ember-bg);
  --grad-size: 100%;
  --select: Highlight; --select-ink: HighlightText;
}

:root, [data-theme="dawn"] {
  --ground: #FBF6EE; --surface: #FFFDF9; --raised: #F3EADC; --line: #E6D9C6; --line-2: #D6C4AA;
  --text: #2B2018; --soft: #4A3B2E; --muted: #6B5A49; --faint: #7A6755;
  --ember: #B5541C; --ember-hi: #8F3E10; --ember-ink: #FFFFFF; --ember-bg: #FBE7D3; --ember-line: #F0C9A3;
  --sage: #356B41; --sage-bg: #E4F1E5; --sage-line: #B9D8BE;
  --glow: #FBE1C6; --glow-strong: #F6CFA6; --well: #F6EEE2; --hover: #F1E6D6; --card-warm: #FFF3E6; --divider: #EADFCF;
  --danger: #B3261E; --shadow: rgba(80, 50, 20, 0.16); --ember-glow: rgba(181, 84, 28, 0.32); --ring: rgba(181, 84, 28, 0.18);
  --art-dim: #D6B48C;
  --shine: rgba(255, 255, 255, 0.9);
  /* Verse highlights: a fill behind the words, and a stronger edge for dots and card borders. */
  --hl-gold: #FBE7A1; --hl-green: #D9EDC9; --hl-blue: #D6E6F5; --hl-rose: #F7D7DC;
  --hl-gold-edge: #C9940E; --hl-green-edge: #4F8F3C; --hl-blue-edge: #3F78BA; --hl-rose-edge: #BF4A60;
  --g-law: #9A4A0B; --g-history: #0F6B63; --g-poetry: #B4235F; --g-prophecy: #6D3FC4; --g-gospel: #1F57C9; --g-epistle: #0C7A55; --g-apocalyptic: #B42318;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--body);
  --scripture: "Source Serif 4", Georgia, "Times New Roman", serif;
  --radius: 18px; --radius-sm: 12px; --pill: 999px;
  color-scheme: light;
}
/* Lily: clean white for anyone who finds Dawn too warm, with the same ember
   accent so it still feels like Adullam. */
[data-theme="lily"] {
  --ground: #FFFFFF; --surface: #FFFFFF; --raised: #F3F3F4; --line: #E5E5E8; --line-2: #D2D2D7;
  --text: #1C1C1E; --soft: #3A3A3C; --muted: #5E5E63; --faint: #67676C;
  --ember: #B5541C; --ember-hi: #8F3E10; --ember-ink: #FFFFFF; --ember-bg: #FCEBDD; --ember-line: #F2CFAF;
  --sage: #356B41; --sage-bg: #E6F2E8; --sage-line: #BCDAC1;
  --glow: #F8F0E8; --glow-strong: #F2E2D2; --well: #F7F7F8; --hover: #F2F2F4; --card-warm: #FFFAF5; --divider: #ECECEF;
  --danger: #B3261E; --shadow: rgba(20, 20, 30, 0.12); --ember-glow: rgba(181, 84, 28, 0.28); --ring: rgba(181, 84, 28, 0.16);
  --art-dim: #CFC6BC;
  --shine: rgba(255, 255, 255, 0.9);
  --hl-gold: #FBE7A1; --hl-green: #D9EDC9; --hl-blue: #D6E6F5; --hl-rose: #F7D7DC;
  --hl-gold-edge: #C9940E; --hl-green-edge: #4F8F3C; --hl-blue-edge: #3F78BA; --hl-rose-edge: #BF4A60;
  --g-law: #9A4A0B; --g-history: #0F6B63; --g-poetry: #B4235F; --g-prophecy: #6D3FC4; --g-gospel: #1F57C9; --g-epistle: #0C7A55; --g-apocalyptic: #B42318;
  color-scheme: light;
}
[data-theme="olive"] {
  --ground: #F3F5EC; --surface: #FFFFFB; --raised: #E7ECDC; --line: #D6DDC6; --line-2: #BFC9A9;
  --text: #1F2A1C; --soft: #3D4A37; --muted: #56634E; --faint: #5F6B57;
  --ember: #556B2F; --ember-hi: #3E5020; --ember-ink: #FFFFFF; --ember-bg: #E6EDD3; --ember-line: #C8D6A6;
  --sage: #2C6E7F; --sage-bg: #DDEDF0; --sage-line: #B5D6DE;
  --glow: #DDE7C6; --glow-strong: #CBDBA9; --well: #EEF1E4; --hover: #E9EEDD; --card-warm: #F6F8EC; --divider: #DDE3CF;
  --danger: #A3261E; --shadow: rgba(40, 55, 30, 0.16); --ember-glow: rgba(85, 107, 47, 0.32); --ring: rgba(85, 107, 47, 0.2);
  --art-dim: #A9B98A;
  --shine: rgba(255, 255, 255, 0.9);
  --hl-gold: #FBE7A1; --hl-green: #D9EDC9; --hl-blue: #D6E6F5; --hl-rose: #F7D7DC;
  --hl-gold-edge: #C9940E; --hl-green-edge: #4F8F3C; --hl-blue-edge: #3F78BA; --hl-rose-edge: #BF4A60;
  --g-law: #9A4A0B; --g-history: #0F6B63; --g-poetry: #B4235F; --g-prophecy: #6D3FC4; --g-gospel: #1F57C9; --g-epistle: #0C7A55; --g-apocalyptic: #B42318;
  color-scheme: light;
}
[data-theme="twilight"] {
  --ground: #23233A; --surface: #2C2D47; --raised: #36385A; --line: #44466B; --line-2: #55588A;
  --text: #F3EEE6; --soft: #DAD3DF; --muted: #B9B4CC; --faint: #9A95B3;
  --ember: #F2B35E; --ember-hi: #FFD49A; --ember-ink: #241A0C; --ember-bg: #3A3348; --ember-line: #5D5070;
  --sage: #9CCBA6; --sage-bg: #2A3A38; --sage-line: #3F5A52;
  --glow: #4A3A55; --glow-strong: #5B4560; --well: #1C1D30; --hover: #33344F; --card-warm: #33304A; --divider: #3A3B5A;
  --danger: #FFB4A0; --shadow: rgba(0, 0, 0, 0.4); --ember-glow: rgba(242, 179, 94, 0.4); --ring: rgba(242, 179, 94, 0.22);
  --art-dim: #6E6488;
  --shine: rgba(255, 255, 255, 0.16);
  --hl-gold: rgba(242, 196, 80, 0.28); --hl-green: rgba(120, 200, 120, 0.24); --hl-blue: rgba(110, 160, 240, 0.28); --hl-rose: rgba(240, 120, 150, 0.26);
  --hl-gold-edge: #F2C450; --hl-green-edge: #8FD18F; --hl-blue-edge: #8DB6F5; --hl-rose-edge: #F09AB0;
  --g-law: #FBBF24; --g-history: #2DD4BF; --g-poetry: #F472B6; --g-prophecy: #C4B5FD; --g-gospel: #7DB4FF; --g-epistle: #4ADE80; --g-apocalyptic: #FB7185;
  color-scheme: dark;
}
[data-theme="hearth"] {
  --ground: #1B1511; --surface: #241C16; --raised: #2E241C; --line: #3F3227; --line-2: #4F3F30;
  --text: #F4ECE2; --soft: #D9CBBB; --muted: #BFAE9C; --faint: #968472;
  --ember: #F4A14C; --ember-hi: #FFC38A; --ember-ink: #1A120B; --ember-bg: #2E1F12; --ember-line: #4F361E;
  --sage: #8FB996; --sage-bg: #1E2A1F; --sage-line: #2E4231;
  --glow: #3F2813; --glow-strong: #4F3015; --well: #1F1813; --hover: #2A211A; --card-warm: #261B12; --divider: #33281F;
  --danger: #FFB4A0; --shadow: rgba(0, 0, 0, 0.45); --ember-glow: rgba(244, 161, 76, 0.5); --ring: rgba(244, 161, 76, 0.2);
  --art-dim: #7A5530;
  --shine: rgba(255, 255, 255, 0.14);
  --hl-gold: rgba(242, 196, 80, 0.28); --hl-green: rgba(120, 200, 120, 0.24); --hl-blue: rgba(110, 160, 240, 0.28); --hl-rose: rgba(240, 120, 150, 0.26);
  --hl-gold-edge: #F2C450; --hl-green-edge: #8FD18F; --hl-blue-edge: #8DB6F5; --hl-rose-edge: #F09AB0;
  --g-law: #FBBF24; --g-history: #2DD4BF; --g-poetry: #F472B6; --g-prophecy: #C4B5FD; --g-gospel: #7DB4FF; --g-epistle: #4ADE80; --g-apocalyptic: #FB7185;
  color-scheme: dark;
}
/* The supporter themes, for friends of the cave (app/support.py). Almond is
   light, after Aaron's rod that budded (Numbers 17:8): porcelain white with
   blossom rose running into plum. Cedar is dark, after the cedars of Lebanon
   (Psalm 92:12): a forest at night lit with champagne gold.
   web/cave.js::SUPPORTER_THEMES offers them only to supporters. Besides their
   colours they switch on the signature layer below (--aura, --ember-grad,
   --title-ink and the rest), which the four free themes leave off. */
[data-theme="almond"] {
  --ground: #FAF7F8; --surface: #FFFFFF; --raised: #F3ECEF; --line: #ECE2E6; --line-2: #DCCBD2;
  --text: #1F1720; --soft: #3F3240; --muted: #645465; --faint: #736274;
  --ember: #B02F62; --ember-hi: #6C2E92; --ember-ink: #FFFFFF; --ember-bg: #FBE6EF; --ember-line: #EFC6D7;
  --sage: #2D6B57; --sage-bg: #E2F1EB; --sage-line: #B8DACB;
  --glow: #F9DDE8; --glow-strong: #F0C4D8; --well: #F6F1F4; --hover: #F4EBF0; --card-warm: #FFF4F8; --divider: #EFE6EA;
  --danger: #B3261E; --shadow: rgba(70, 30, 70, 0.14); --ember-glow: rgba(176, 47, 98, 0.4); --ring: rgba(176, 47, 98, 0.18);
  --art-dim: #D9AEC4;
  --shine: rgba(255, 255, 255, 0.9);
  --hl-gold: #FBE7A1; --hl-green: #D9EDC9; --hl-blue: #D6E6F5; --hl-rose: #F7D7DC;
  --hl-gold-edge: #C9940E; --hl-green-edge: #4F8F3C; --hl-blue-edge: #3F78BA; --hl-rose-edge: #BF4A60;
  --g-law: #9A4A0B; --g-history: #0F6B63; --g-poetry: #B4235F; --g-prophecy: #6D3FC4; --g-gospel: #1F57C9; --g-epistle: #0C7A55; --g-apocalyptic: #B42318;
  /* Signature: a blossom, lilac and apricot dawn behind everything. */
  --aura:
    radial-gradient(42rem 30rem at 6% -8%, rgba(244, 168, 200, 0.42), transparent 70%),
    radial-gradient(38rem 28rem at 98% 2%, rgba(186, 166, 245, 0.34), transparent 70%),
    radial-gradient(52rem 30rem at 50% 110%, rgba(255, 200, 172, 0.3), transparent 70%);
  --ember-grad: linear-gradient(135deg, #C4356C 0%, #9C2F80 55%, #6C2E92 100%);
  --title-ink: linear-gradient(105deg, #2A1530 0%, #9C2F6E 62%, #6C2E92 100%);
  --title-fill: transparent;
  --lift: 0 1px 2px rgba(70, 30, 70, 0.05), 0 16px 36px -24px rgba(108, 46, 146, 0.32);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --bar-glass: 70%;
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='240' viewBox='0 0 560 240'%3E %3Cdefs%3E%3Cg id='b'%3E%3Cg fill='%23F5B8CE' fill-opacity='.6'%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(288)'/%3E%3C/g%3E%3Cg fill='%23FFF' fill-opacity='.55' transform='scale(.55)'%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='3.2' fill='%23B02F62' fill-opacity='.55'/%3E%3Cg fill='%239C2F6E' fill-opacity='.45'%3E%3Ccircle cx='4' cy='-5' r='1.1'/%3E%3Ccircle cx='-5' cy='-3' r='1.1'/%3E%3Ccircle cx='1' cy='6' r='1.1'/%3E%3Ccircle cx='6' cy='3' r='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='u'%3E%3Cellipse rx='4' ry='6.5' fill='%23E68FB2' fill-opacity='.55'/%3E%3Cpath d='M0 6 L0 11' stroke='%239C6B7C' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/g%3E%3C/defs%3E %3Cg fill='none' stroke='%238E5A6C' stroke-opacity='.28' stroke-linecap='round'%3E %3Cpath d='M575 30 C 500 50, 440 70, 380 100 S 250 110, 140 80' stroke-width='3.2'/%3E %3Cpath d='M440 72 C 455 100, 470 115, 500 112' stroke-width='2'/%3E %3Cpath d='M330 104 C 320 130, 330 150, 360 160' stroke-width='1.8'/%3E %3Cpath d='M250 104 C 240 120, 255 140, 280 148' stroke-width='1.5'/%3E%3C/g%3E %3Cuse href='%23b' transform='translate(468 52) scale(1.25) rotate(10)'/%3E%3Cuse href='%23b' transform='translate(404 92) scale(1.0) rotate(-20)'/%3E%3Cuse href='%23b' transform='translate(330 112) scale(1.15) rotate(35)'/%3E%3Cuse href='%23b' transform='translate(250 104) scale(0.85) rotate(5)'/%3E%3Cuse href='%23b' transform='translate(518 104) scale(0.8) rotate(50)'/%3E%3Cuse href='%23b' transform='translate(372 150) scale(0.7) rotate(15)'/%3E%3Cuse href='%23b' transform='translate(196 78) scale(0.75) rotate(-30)'/%3E%3Cuse href='%23b' transform='translate(286 150) scale(0.6) rotate(60)'/%3E %3Cuse href='%23u' transform='translate(430 60) rotate(-35)'/%3E%3Cuse href='%23u' transform='translate(300 92) rotate(20)'/%3E%3Cuse href='%23u' transform='translate(220 120) rotate(40)'/%3E%3Cuse href='%23u' transform='translate(150 82) rotate(-50)'/%3E  %3C/svg%3E") right -40px top 56px / min(480px, 40vw) auto no-repeat;
  --aura-motion: aura-drift 26s ease-in-out infinite alternate;
  --edge: linear-gradient(135deg, #F2A9C4 0%, #FFFFFF 38%, #FFFFFF 58%, #C9B6F2 100%);
  --nav-active: linear-gradient(135deg, #FBE3EE 0%, #EEE5FB 100%);
  --grad-size: 180%;
  --select: #F7CADB; --select-ink: #1F1720;
  color-scheme: light;
}
[data-theme="cedar"] {
  --ground: #08110E; --surface: #0F1B17; --raised: #16251F; --line: #20332B; --line-2: #2C463B;
  --text: #EDF3EE; --soft: #CAD7CE; --muted: #A0B4A8; --faint: #829689;
  --ember: #EBC57E; --ember-hi: #FFE4AA; --ember-ink: #16110A; --ember-bg: #1E291D; --ember-line: #45482B;
  --sage: #8CD3B1; --sage-bg: #10261E; --sage-line: #21453A;
  --glow: #1E3326; --glow-strong: #2A4130; --well: #0A1512; --hover: #172720; --card-warm: #12201A; --divider: #1A2B24;
  --danger: #FFB4A0; --shadow: rgba(0, 0, 0, 0.55); --ember-glow: rgba(235, 197, 126, 0.38); --ring: rgba(235, 197, 126, 0.2);
  --art-dim: #4F6E5C;
  --shine: rgba(255, 255, 255, 0.14);
  --hl-gold: rgba(242, 196, 80, 0.28); --hl-green: rgba(120, 200, 120, 0.24); --hl-blue: rgba(110, 160, 240, 0.28); --hl-rose: rgba(240, 120, 150, 0.26);
  --hl-gold-edge: #F2C450; --hl-green-edge: #8FD18F; --hl-blue-edge: #8DB6F5; --hl-rose-edge: #F09AB0;
  --g-law: #FBBF24; --g-history: #2DD4BF; --g-poetry: #F472B6; --g-prophecy: #C4B5FD; --g-gospel: #7DB4FF; --g-epistle: #4ADE80; --g-apocalyptic: #FB7185;
  /* Signature: deep green light through the trees, and a little gold. */
  --aura:
    radial-gradient(44rem 32rem at 4% -10%, rgba(38, 140, 104, 0.3), transparent 70%),
    radial-gradient(36rem 26rem at 100% 0%, rgba(235, 197, 126, 0.13), transparent 70%),
    radial-gradient(56rem 32rem at 50% 114%, rgba(20, 100, 84, 0.28), transparent 70%);
  --ember-grad: linear-gradient(135deg, #FFE9B5 0%, #EBC57E 48%, #C9974A 100%);
  --title-ink: linear-gradient(105deg, #F5F1E4 0%, #F3D79A 65%, #E2B86E 100%);
  --title-fill: transparent;
  --card-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 45%);
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 46px -28px rgba(0, 0, 0, 0.8);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --bar-glass: 66%;
  --ornament:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='240' viewBox='0 0 1200 240'%3E%3Ccircle cx='862' cy='132' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='193' cy='145' r='1.4' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='159' cy='146' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='53' cy='164' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='321' cy='186' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='243' cy='172' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='887' cy='92' r='1.1' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='336' cy='176' r='0.8' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='466' cy='155' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='778' cy='167' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='202' cy='210' r='1.4' fill='%23F3D79A' fill-opacity='0.25'/%3E%3Ccircle cx='705' cy='96' r='0.8' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='669' cy='180' r='0.6' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='1002' cy='39' r='0.8' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='751' cy='56' r='1.4' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='439' cy='47' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='150' cy='35' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='996' cy='174' r='0.6' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='1039' cy='85' r='1.4' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='1074' cy='26' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='455' cy='93' r='1.1' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='351' cy='184' r='0.8' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='801' cy='204' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='138' cy='195' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='379' cy='83' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='77' cy='201' r='0.6' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='817' cy='0' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='1150' cy='33' r='0.8' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='141' cy='209' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='323' cy='98' r='1.1' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='77' cy='130' r='0.8' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='1044' cy='140' r='0.6' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='1104' cy='163' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='585' cy='206' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='681' cy='1' r='0.8' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='866' cy='78' r='1.1' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='441' cy='202' r='1.1' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='201' cy='6' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='487' cy='218' r='1.1' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='946' cy='65' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='125' cy='108' r='1.4' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='164' cy='207' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='875' cy='8' r='1.4' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='458' cy='15' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='708' cy='91' r='0.8' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='50' cy='46' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='509' cy='184' r='0.6' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='798' cy='146' r='0.6' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='942' cy='2' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='1021' cy='52' r='0.8' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='44' cy='166' r='1.4' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='819' cy='167' r='1.4' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='775' cy='115' r='1.1' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='1078' cy='175' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='915' cy='210' r='1.1' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='1191' cy='166' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='77' cy='179' r='1.1' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='446' cy='96' r='0.8' fill='%23F3D79A' fill-opacity='0.25'/%3E%3Ccircle cx='826' cy='77' r='1.1' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='823' cy='196' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='362' cy='77' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='1098' cy='204' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='1096' cy='180' r='0.8' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='16' cy='220' r='1.4' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='638' cy='64' r='0.8' fill='%23F3D79A' fill-opacity='0.25'/%3E%3Ccircle cx='1155' cy='110' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='1137' cy='87' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='767' cy='115' r='1.1' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='930' cy='180' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='543' cy='174' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3C/svg%3E") center top 40px / 1200px auto repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='190' viewBox='0 0 1200 190'%3E %3Cpath d='M0 150 C 200 120, 380 160, 600 138 S 1000 120, 1200 146 V190 H0Z' fill='%230B1713'/%3E%3Cg fill='%230C1A15'%3E%3Crect x='37.9' y='138.5' width='4.2' height='31.5'/%3E%3Cellipse cx='39.2' cy='147.6' rx='33.2' ry='4.9'/%3E%3Cellipse cx='40.4' cy='135.0' rx='27.3' ry='4.9'/%3E%3Cellipse cx='41.1' cy='123.8' rx='21.7' ry='4.9'/%3E%3Cellipse cx='39.6' cy='114.0' rx='15.4' ry='4.9'/%3E%3Cellipse cx='37.7' cy='105.6' rx='9.1' ry='4.9'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='167.2' y='127.2' width='5.7' height='42.8'/%3E%3Cellipse cx='173.0' cy='139.6' rx='45.1' ry='6.7'/%3E%3Cellipse cx='166.4' cy='122.5' rx='37.1' ry='6.7'/%3E%3Cellipse cx='169.3' cy='107.3' rx='29.4' ry='6.7'/%3E%3Cellipse cx='167.2' cy='94.0' rx='20.9' ry='6.7'/%3E%3Cellipse cx='171.0' cy='82.6' rx='12.3' ry='6.7'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='297.0' y='124.5' width='6.1' height='45.5'/%3E%3Cellipse cx='297.3' cy='137.7' rx='48.0' ry='7.1'/%3E%3Cellipse cx='298.3' cy='119.5' rx='39.4' ry='7.1'/%3E%3Cellipse cx='301.1' cy='103.3' rx='31.3' ry='7.1'/%3E%3Cellipse cx='298.0' cy='89.2' rx='22.2' ry='7.1'/%3E%3Cellipse cx='299.3' cy='77.1' rx='13.1' ry='7.1'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='427.4' y='130.4' width='5.3' height='39.6'/%3E%3Cellipse cx='428.9' cy='141.8' rx='41.8' ry='6.2'/%3E%3Cellipse cx='428.6' cy='126.0' rx='34.3' ry='6.2'/%3E%3Cellipse cx='430.6' cy='111.9' rx='27.3' ry='6.2'/%3E%3Cellipse cx='429.6' cy='99.6' rx='19.4' ry='6.2'/%3E%3Cellipse cx='432.8' cy='89.0' rx='11.4' ry='6.2'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='557.3' y='129.9' width='5.3' height='40.1'/%3E%3Cellipse cx='557.0' cy='141.5' rx='42.3' ry='6.2'/%3E%3Cellipse cx='556.7' cy='125.5' rx='34.7' ry='6.2'/%3E%3Cellipse cx='559.9' cy='111.3' rx='27.6' ry='6.2'/%3E%3Cellipse cx='562.9' cy='98.8' rx='19.6' ry='6.2'/%3E%3Cellipse cx='558.4' cy='88.1' rx='11.6' ry='6.2'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='687.2' y='128.2' width='5.6' height='41.9'/%3E%3Cellipse cx='692.3' cy='140.2' rx='44.2' ry='6.5'/%3E%3Cellipse cx='686.9' cy='123.5' rx='36.3' ry='6.5'/%3E%3Cellipse cx='688.1' cy='108.6' rx='28.8' ry='6.5'/%3E%3Cellipse cx='686.7' cy='95.6' rx='20.5' ry='6.5'/%3E%3Cellipse cx='689.2' cy='84.4' rx='12.1' ry='6.5'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='817.9' y='138.5' width='4.2' height='31.5'/%3E%3Cellipse cx='819.4' cy='147.6' rx='33.2' ry='4.9'/%3E%3Cellipse cx='820.3' cy='135.0' rx='27.3' ry='4.9'/%3E%3Cellipse cx='822.1' cy='123.8' rx='21.7' ry='4.9'/%3E%3Cellipse cx='819.0' cy='114.0' rx='15.4' ry='4.9'/%3E%3Cellipse cx='819.2' cy='105.6' rx='9.1' ry='4.9'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='947.6' y='134.4' width='4.7' height='35.6'/%3E%3Cellipse cx='951.4' cy='144.7' rx='37.5' ry='5.5'/%3E%3Cellipse cx='951.9' cy='130.5' rx='30.8' ry='5.5'/%3E%3Cellipse cx='952.1' cy='117.9' rx='24.5' ry='5.5'/%3E%3Cellipse cx='951.2' cy='106.8' rx='17.4' ry='5.5'/%3E%3Cellipse cx='950.5' cy='97.3' rx='10.3' ry='5.5'/%3E%3C/g%3E%3Cg fill='%230C1A15'%3E%3Crect x='1077.5' y='132.7' width='5.0' height='37.4'/%3E%3Cellipse cx='1083.0' cy='143.4' rx='39.4' ry='5.8'/%3E%3Cellipse cx='1081.3' cy='128.5' rx='32.4' ry='5.8'/%3E%3Cellipse cx='1082.5' cy='115.2' rx='25.7' ry='5.8'/%3E%3Cellipse cx='1080.0' cy='103.6' rx='18.3' ry='5.8'/%3E%3Cellipse cx='1076.9' cy='93.6' rx='10.8' ry='5.8'/%3E%3C/g%3E %3Cpath d='M0 172 C 260 150, 520 180, 760 162 S 1080 160, 1200 170 V190 H0Z' fill='%230E1D17'/%3E%3Cg fill='%230F2019'%3E%3Crect x='96.5' y='130.2' width='6.9' height='51.8'/%3E%3Cellipse cx='99.0' cy='145.2' rx='54.6' ry='8.1'/%3E%3Cellipse cx='96.7' cy='124.5' rx='44.9' ry='8.1'/%3E%3Cellipse cx='102.1' cy='106.1' rx='35.6' ry='8.1'/%3E%3Cellipse cx='104.3' cy='90.0' rx='25.3' ry='8.1'/%3E%3Cellipse cx='99.3' cy='76.2' rx='15.0' ry='8.1'/%3E%3C/g%3E%3Cg fill='%230F2019'%3E%3Crect x='306.2' y='125.3' width='7.6' height='56.7'/%3E%3Cellipse cx='309.5' cy='141.7' rx='59.8' ry='8.8'/%3E%3Cellipse cx='309.7' cy='119.0' rx='49.1' ry='8.8'/%3E%3Cellipse cx='310.0' cy='98.8' rx='39.1' ry='8.8'/%3E%3Cellipse cx='307.7' cy='81.2' rx='27.7' ry='8.8'/%3E%3Cellipse cx='306.8' cy='66.1' rx='16.4' ry='8.8'/%3E%3C/g%3E%3Cg fill='%230F2019'%3E%3Crect x='516.5' y='128.9' width='7.1' height='53.1'/%3E%3Cellipse cx='522.6' cy='144.2' rx='56.0' ry='8.3'/%3E%3Cellipse cx='523.0' cy='123.0' rx='46.0' ry='8.3'/%3E%3Cellipse cx='517.1' cy='104.1' rx='36.6' ry='8.3'/%3E%3Cellipse cx='518.6' cy='87.6' rx='26.0' ry='8.3'/%3E%3Cellipse cx='517.0' cy='73.4' rx='15.3' ry='8.3'/%3E%3C/g%3E%3Cg fill='%230F2019'%3E%3Crect x='725.8' y='119.0' width='8.4' height='63.0'/%3E%3Cellipse cx='726.6' cy='137.2' rx='66.5' ry='9.8'/%3E%3Cellipse cx='732.1' cy='112.0' rx='54.6' ry='9.8'/%3E%3Cellipse cx='732.9' cy='89.6' rx='43.4' ry='9.8'/%3E%3Cellipse cx='733.4' cy='70.0' rx='30.8' ry='9.8'/%3E%3Cellipse cx='724.6' cy='53.2' rx='18.2' ry='9.8'/%3E%3C/g%3E%3Cg fill='%230F2019'%3E%3Crect x='936.4' y='128.0' width='7.2' height='54.0'/%3E%3Cellipse cx='942.8' cy='143.6' rx='57.0' ry='8.4'/%3E%3Cellipse cx='936.3' cy='122.0' rx='46.8' ry='8.4'/%3E%3Cellipse cx='936.4' cy='102.8' rx='37.2' ry='8.4'/%3E%3Cellipse cx='940.2' cy='86.0' rx='26.4' ry='8.4'/%3E%3Cellipse cx='937.9' cy='71.6' rx='15.6' ry='8.4'/%3E%3C/g%3E%3Cg fill='%230F2019'%3E%3Crect x='1146.4' y='128.0' width='7.2' height='54.0'/%3E%3Cellipse cx='1148.0' cy='143.6' rx='57.0' ry='8.4'/%3E%3Cellipse cx='1148.3' cy='122.0' rx='46.8' ry='8.4'/%3E%3Cellipse cx='1152.5' cy='102.8' rx='37.2' ry='8.4'/%3E%3Cellipse cx='1151.9' cy='86.0' rx='26.4' ry='8.4'/%3E%3Cellipse cx='1147.6' cy='71.6' rx='15.6' ry='8.4'/%3E%3C/g%3E %3Crect y='182' width='1200' height='8' fill='%230F2019'/%3E%3C/svg%3E") center bottom / 1200px auto repeat-x;
  --aura-motion: aura-drift 32s ease-in-out infinite alternate;
  --edge: linear-gradient(135deg, #F3D79A 0%, rgba(235, 197, 126, 0.18) 30%, #2C463B 62%, #EBC57E 100%);
  --nav-active: linear-gradient(135deg, rgba(235, 197, 126, 0.2) 0%, rgba(140, 211, 177, 0.12) 100%);
  --grad-size: 180%;
  --select: rgba(235, 197, 126, 0.38); --select-ink: #FFFFFF;
  color-scheme: dark;
}

/* Control sizes, the same in every theme. A mouse gets compact controls; a
   touch screen gets a few pixels more so every tap target stays comfortable.
   Buttons, chips, icon buttons and selects all read their height from here,
   so the whole interface scales together. */
:root { --h-btn: 40px; --h-btn-sm: 32px; --h-chip: 32px; --h-icon: 36px; }
@media (pointer: coarse) { :root { --h-btn: 42px; --h-btn-sm: 36px; --h-chip: 34px; --h-icon: 38px; } }

/* Older names web/graph.js's styles still use. */
:root { --bg: var(--ground); --border: var(--line); --text-soft: var(--muted); --text-faint: var(--faint); --accent: var(--ember); --font: var(--body); --shadow-lg: 0 16px 36px var(--shadow); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--ground); color: var(--text);
  font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
/* On a phone the composer and tab bar cover the bottom of the screen, so
   Cedar's ridge of trees would only peek out in pieces: keep the sky and grain. */
@media (max-width: 720px) { [data-theme="cedar"] { --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='240' viewBox='0 0 1200 240'%3E%3Ccircle cx='862' cy='132' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='193' cy='145' r='1.4' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='159' cy='146' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='53' cy='164' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='321' cy='186' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='243' cy='172' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='887' cy='92' r='1.1' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='336' cy='176' r='0.8' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='466' cy='155' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='778' cy='167' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='202' cy='210' r='1.4' fill='%23F3D79A' fill-opacity='0.25'/%3E%3Ccircle cx='705' cy='96' r='0.8' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='669' cy='180' r='0.6' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='1002' cy='39' r='0.8' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='751' cy='56' r='1.4' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='439' cy='47' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='150' cy='35' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='996' cy='174' r='0.6' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='1039' cy='85' r='1.4' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='1074' cy='26' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='455' cy='93' r='1.1' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='351' cy='184' r='0.8' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='801' cy='204' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='138' cy='195' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='379' cy='83' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='77' cy='201' r='0.6' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='817' cy='0' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='1150' cy='33' r='0.8' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='141' cy='209' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='323' cy='98' r='1.1' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='77' cy='130' r='0.8' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='1044' cy='140' r='0.6' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='1104' cy='163' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='585' cy='206' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='681' cy='1' r='0.8' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='866' cy='78' r='1.1' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='441' cy='202' r='1.1' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='201' cy='6' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='487' cy='218' r='1.1' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='946' cy='65' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='125' cy='108' r='1.4' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='164' cy='207' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='875' cy='8' r='1.4' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='458' cy='15' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='708' cy='91' r='0.8' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='50' cy='46' r='0.8' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='509' cy='184' r='0.6' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='798' cy='146' r='0.6' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='942' cy='2' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='1021' cy='52' r='0.8' fill='%23F3D79A' fill-opacity='0.7'/%3E%3Ccircle cx='44' cy='166' r='1.4' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='819' cy='167' r='1.4' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='775' cy='115' r='1.1' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='1078' cy='175' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='915' cy='210' r='1.1' fill='%23FFF' fill-opacity='0.25'/%3E%3Ccircle cx='1191' cy='166' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='77' cy='179' r='1.1' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='446' cy='96' r='0.8' fill='%23F3D79A' fill-opacity='0.25'/%3E%3Ccircle cx='826' cy='77' r='1.1' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='823' cy='196' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='362' cy='77' r='0.8' fill='%23FFF' fill-opacity='0.5'/%3E%3Ccircle cx='1098' cy='204' r='1.4' fill='%23F3D79A' fill-opacity='0.5'/%3E%3Ccircle cx='1096' cy='180' r='0.8' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='16' cy='220' r='1.4' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='638' cy='64' r='0.8' fill='%23F3D79A' fill-opacity='0.25'/%3E%3Ccircle cx='1155' cy='110' r='1.1' fill='%23FFF' fill-opacity='0.35'/%3E%3Ccircle cx='1137' cy='87' r='0.8' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='767' cy='115' r='1.1' fill='%23F3D79A' fill-opacity='0.35'/%3E%3Ccircle cx='930' cy='180' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3Ccircle cx='543' cy='174' r='1.4' fill='%23FFF' fill-opacity='0.7'/%3E%3C/svg%3E") center top 40px / 1200px auto repeat-x; } }
/* On a phone Almond's branch shrinks to a sprig in the corner and fades, so
   the page title and text that pass over it stay clean. */
@media (max-width: 720px) { [data-theme="almond"] { --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='240' viewBox='0 0 560 240'%3E %3Cdefs%3E%3Cg id='b'%3E%3Cg fill='%23F5B8CE' fill-opacity='.6'%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(288)'/%3E%3C/g%3E%3Cg fill='%23FFF' fill-opacity='.55' transform='scale(.55)'%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(0)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-11' rx='7.5' ry='11' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='3.2' fill='%23B02F62' fill-opacity='.55'/%3E%3Cg fill='%239C2F6E' fill-opacity='.45'%3E%3Ccircle cx='4' cy='-5' r='1.1'/%3E%3Ccircle cx='-5' cy='-3' r='1.1'/%3E%3Ccircle cx='1' cy='6' r='1.1'/%3E%3Ccircle cx='6' cy='3' r='1'/%3E%3C/g%3E%3C/g%3E%3Cg id='u'%3E%3Cellipse rx='4' ry='6.5' fill='%23E68FB2' fill-opacity='.55'/%3E%3Cpath d='M0 6 L0 11' stroke='%239C6B7C' stroke-opacity='.35' stroke-width='1.5'/%3E%3C/g%3E%3C/defs%3E %3Cg fill='none' stroke='%238E5A6C' stroke-opacity='.28' stroke-linecap='round'%3E %3Cpath d='M575 30 C 500 50, 440 70, 380 100 S 250 110, 140 80' stroke-width='3.2'/%3E %3Cpath d='M440 72 C 455 100, 470 115, 500 112' stroke-width='2'/%3E %3Cpath d='M330 104 C 320 130, 330 150, 360 160' stroke-width='1.8'/%3E %3Cpath d='M250 104 C 240 120, 255 140, 280 148' stroke-width='1.5'/%3E%3C/g%3E %3Cuse href='%23b' transform='translate(468 52) scale(1.25) rotate(10)'/%3E%3Cuse href='%23b' transform='translate(404 92) scale(1.0) rotate(-20)'/%3E%3Cuse href='%23b' transform='translate(330 112) scale(1.15) rotate(35)'/%3E%3Cuse href='%23b' transform='translate(250 104) scale(0.85) rotate(5)'/%3E%3Cuse href='%23b' transform='translate(518 104) scale(0.8) rotate(50)'/%3E%3Cuse href='%23b' transform='translate(372 150) scale(0.7) rotate(15)'/%3E%3Cuse href='%23b' transform='translate(196 78) scale(0.75) rotate(-30)'/%3E%3Cuse href='%23b' transform='translate(286 150) scale(0.6) rotate(60)'/%3E %3Cuse href='%23u' transform='translate(430 60) rotate(-35)'/%3E%3Cuse href='%23u' transform='translate(300 92) rotate(20)'/%3E%3Cuse href='%23u' transform='translate(220 120) rotate(40)'/%3E%3Cuse href='%23u' transform='translate(150 82) rotate(-50)'/%3E  %3C/svg%3E") right -36px top 52px / 230px auto no-repeat; --ornament-fade: 0.55; } }
/* The signature layer's two fixed pictures: --aura drifting slowly behind
   everything, and --ornament still above it. Both are "none" in the free themes. */
body::before { content: ""; position: fixed; inset: -6%; z-index: -1; pointer-events: none; background: var(--aura); animation: var(--aura-motion); will-change: transform; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--ornament); opacity: var(--ornament-fade, 1); }
@keyframes aura-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, 2%, 0) scale(1.07); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
::selection { background: var(--select); color: var(--select-ink); }
a { color: var(--ember); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--faint); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--ground); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
/* The page gutter: 20px, or 16px on a phone (the 720px block), shared with
   the top bar so the logo and the page content start on the same line. */
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* Inline SVG presentation attributes can't read tokens, so CSS repaints them. */
svg [fill="#F4A14C"], svg[fill="#F4A14C"] { fill: var(--ember); }
svg [stroke="#F4A14C"], svg[stroke="#F4A14C"] { stroke: var(--ember); }
svg [stroke="#8FB996"] { stroke: var(--sage); }
svg [stroke="#7A5530"] { stroke: var(--art-dim); }

@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.fade-in { animation: rise 0.3s ease both; }

/* ---------- Type ---------- */
.page-title { font: 600 clamp(26px, 3.4vw, 34px)/1.2 var(--body); letter-spacing: -0.02em; }
/* Supporter themes run --title-ink through the big headings. fit-content keeps
   the gradient across the words rather than across the empty line after them. */
.page-title, .h-hero, .h-form { width: fit-content; max-width: 100%; background-image: var(--title-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--title-fill); }
.page-sub { color: var(--muted); font-size: 16px; margin-top: 6px; max-width: 620px; }
.eyebrow { color: var(--muted); font-size: 14px; font-weight: 500; margin: 0 0 4px; }
/* Card and section labels: sentence case, never shouted. */
.kicker { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 10px; letter-spacing: 0; }
.kicker.ember { color: var(--ember); }
.section-title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
/* Scripture quoted on screen, in any card or panel. */
.scripture { font-family: var(--scripture); font-size: 19px; line-height: 1.55; color: var(--text); }
.scripture-lg { font-family: var(--scripture); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: var(--text); }
.verse-ref { color: var(--ember); font-weight: 600; font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--h-btn); padding: 7px 18px;
  border-radius: var(--pill); font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, background-position 0.5s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: default; }
/* The one gradient button: ember into its deeper (light themes) or brighter
   (dark themes) partner, lit from beneath by --ember-glow. */
.btn-ember { background: var(--ember-grad); background-size: var(--grad-size) 100%; background-position: 0% 50%; color: var(--ember-ink); box-shadow: var(--sheen), 0 6px 16px -8px var(--ember-glow); }
.btn-ember:hover:not(:disabled) { background-position: 100% 50%; }
.btn-ember:hover:not(:disabled) { filter: brightness(1.06); color: var(--ember-ink); box-shadow: var(--sheen), 0 8px 20px -8px var(--ember-glow); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ember); color: var(--ember-hi); }
.btn-quiet { background: transparent; color: var(--text); }
.btn-quiet:hover { background: var(--hover); }
.btn-sm { min-height: var(--h-btn-sm); padding: 5px 14px; font-size: 13px; }
/* Full-width form buttons (sign in) keep a little more presence. */
.btn-block { width: 100%; min-height: 44px; font-size: 15px; }
/* For buttons whose label is a sentence (a suggested follow-up question). */
.btn-wrap { white-space: normal; text-align: left; max-width: 100%; }
.linkish { background: none; border: 0; color: var(--ember); font-weight: 600; padding: 6px 2px; text-decoration: none; }
.linkish:hover { color: var(--ember-hi); text-decoration: underline; }
/* Actions under an answer or a card: small outlined pills with an icon. */
.act {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; padding: 5px 12px; min-height: var(--h-chip);
  border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent; color: var(--soft); text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.act:hover { border-color: var(--ember); color: var(--ember-hi); }
.act svg { width: 15px; height: 15px; flex: none; }
.act { white-space: nowrap; }
/* Secondary actions in a crowded row: the icon alone (the button keeps its aria-label). */
.act-icon { padding-left: 8px; padding-right: 8px; }
.act-icon span { display: none; }
.act.is-done { border-color: var(--sage); color: var(--sage); background: var(--sage-bg); }
.act.danger:hover { border-color: var(--danger); color: var(--danger); }
/* One quiet line above a list: a count, and a small dropdown filter (web/cave.js::listBar). */
.list-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
.list-count { font-size: 14px; color: var(--faint); }
.filter-select { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 4px 12px; font-size: 13px; font-weight: 500; min-height: var(--h-btn-sm); max-width: 60%; }
.filter-select:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
/* The prayer list is one readable column, so its bar matches that width. */
/* The reader bar's two page links sit together on the right, before the translation. */
.reader-saved-link { margin-left: 0; }
.iconbtn {
  width: var(--h-icon); height: var(--h-icon); flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--hover);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ember);
  transition: border-color 0.15s ease;
}
.iconbtn:hover { border-color: var(--ember); }
.iconbtn svg { width: 18px; height: 18px; }
/* Names web/graph.js and the journal sheet use */
.chip-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 12px; min-height: var(--h-chip); border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent; color: var(--soft); }
.chip-btn:hover { border-color: var(--ember); color: var(--ember-hi); }
.chip-btn.is-done { border-color: var(--sage); color: var(--sage); background: var(--sage-bg); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--pill); min-height: var(--h-btn); padding: 7px 18px; font-size: 14px; font-weight: 600; background: var(--ember-grad); color: var(--ember-ink); box-shadow: var(--sheen), 0 6px 16px -8px var(--ember-glow); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.icon-btn { width: var(--h-icon); height: var(--h-icon); flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { border-color: var(--ember); color: var(--ember); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ground) var(--bar-glass), transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--divider); }
/* The bar spans the whole window (logo at the far left, account at the far
   right), so it lines up with the Aquila rail, which also starts at the edge. */
.topbar-inner { display: flex; align-items: center; gap: 20px; height: 60px; max-width: none; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font: 600 17px/1 var(--body); letter-spacing: -0.01em; }
.logo svg { width: 22px; height: 22px; flex: none; }
.appnav { display: flex; gap: 2px; }
.appnav a, .appnav button { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 6px 13px; border-radius: var(--pill); background: none; border: 0; }
.appnav a:hover, .appnav button:hover { color: var(--text); background: var(--hover); }
.appnav a[aria-current="page"] { color: var(--ember-hi); background: var(--nav-active); font-weight: 600; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; position: relative; }
/* The account chip: a soft avatar with initials and a chevron, in a quiet
   outlined pill that warms on hover and while its menu is open. */
.me { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.me:hover, .me[aria-expanded="true"] { border-color: var(--ember-line); background: var(--card-warm); color: var(--text); }
.me-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--body); letter-spacing: 0.02em; color: var(--ember-hi); background: radial-gradient(circle at 30% 25%, var(--glow) 0%, var(--ember-bg) 70%); box-shadow: inset 0 0 0 1px var(--ember-line); }
.me svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s ease; }
.me[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu { position: absolute; right: 0; top: 46px; z-index: 40; width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 16px 36px -8px var(--shadow); animation: rise 0.18s ease both; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.menu-head strong { display: block; font-weight: 600; font-size: 14px; }
.menu-head span { display: block; font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.menu a, .menu button.menu-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none; background: none; border: 0; font-size: 14px; }
.menu a:hover, .menu button.menu-item:hover { background: var(--hover); }
.menu .danger { color: var(--danger); }

/* Theme swatches: the theme's ground with its accent tucked in the corner */
.themes { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; padding: 0; border: 2px solid var(--sw-line); background: var(--sw-bg); position: relative; overflow: hidden; }
.swatch::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 55%; height: 55%; border-radius: 50%; background: var(--sw-accent); border: 2px solid var(--sw-bg); }
.swatch[aria-pressed="true"] { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ember); }
.swatch[data-set-theme="dawn"], .swatch[data-swatch="dawn"] { --sw-bg: #FBF6EE; --sw-accent: #B5541C; --sw-line: #E6D9C6; }
.swatch[data-set-theme="lily"], .swatch[data-swatch="lily"] { --sw-bg: #FFFFFF; --sw-accent: #B5541C; --sw-line: #D2D2D7; }
.swatch[data-set-theme="olive"], .swatch[data-swatch="olive"] { --sw-bg: #F3F5EC; --sw-accent: #556B2F; --sw-line: #D6DDC6; }
.swatch[data-set-theme="twilight"], .swatch[data-swatch="twilight"] { --sw-bg: #23233A; --sw-accent: #F2B35E; --sw-line: #44466B; }
.swatch[data-set-theme="hearth"], .swatch[data-swatch="hearth"] { --sw-bg: #1B1511; --sw-accent: #F4A14C; --sw-line: #3F3227; }
.swatch[data-set-theme="almond"], .swatch[data-swatch="almond"] { --sw-bg: #FAF7F8; --sw-accent: linear-gradient(135deg, #C4356C, #6C2E92); --sw-line: #EFC6D7; }
.swatch[data-set-theme="cedar"], .swatch[data-swatch="cedar"] { --sw-bg: #08110E; --sw-accent: linear-gradient(135deg, #FFE9B5, #C9974A); --sw-line: #2C463B; }
/* The labelled version in Settings */
.theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-option { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 7px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); text-align: left; font-size: 14px; font-weight: 500; }
.theme-option .swatch { pointer-events: none; }
.theme-option[aria-pressed="true"] { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }

/* Signed-in phone nav */
.tabbar { display: none; }

/* ---------- Shared surfaces ---------- */
.page { padding-top: 32px; padding-bottom: 64px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.card { background: var(--card-tint), var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--lift); }
/* A warm card glows from its top corner, the way the hero panels glow from below. */
.card.warm { background: radial-gradient(120% 140% at 100% 0%, var(--glow) 0%, var(--card-warm) 55%) padding-box, var(--edge) border-box; border-color: transparent; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head .kicker { margin: 0; }
.card-actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 16px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.row-between .kicker { margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 11px; border-radius: var(--pill); background: var(--raised); border: 1px solid var(--line); color: var(--text); }
/* Aquila's mark: the wing (AQUILA_MARK in index.html) on the ember gradient, lit softly from beneath. */
.avatar-a { width: 30px; height: 30px; border-radius: 50%; background: var(--ember-grad); color: var(--ember-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 6px 16px -6px var(--ember-glow); }
.avatar-a svg { width: 64%; height: 64%; }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.empty strong { display: block; color: var(--text); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.empty .btn { margin-top: 16px; }
.error { color: var(--danger); font-size: 14px; margin-top: 8px; }
.error:empty { display: none; }
.error.is-gentle { color: var(--muted); } /* a daily limit, not a failure */

/* One ask box, used on welcome, home, and in the Ask composer. A pill while it
   holds one line; the composer's grows, so it gets a large radius instead. */
.ask-box { display: flex; gap: 4px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 4px 4px 4px 18px; box-shadow: 0 10px 30px -22px var(--shadow); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.ask-box:focus-within { border-color: var(--ember); box-shadow: 0 0 0 4px var(--ring); }
/* Inputs stay at 16px so phones don't zoom in when they're focused. */
.ask-box input, .ask-box textarea { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 16px; padding: 8px 0; resize: none; line-height: 1.45; max-height: 9rem; }
/* The send button matches the mic beside it, so the box stays one slim line. */
.ask-box .btn { min-height: var(--h-icon); padding: 5px 16px; }
.topics { display: flex; flex-wrap: wrap; gap: 6px; }
.topic { min-height: var(--h-chip); padding: 5px 13px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--soft); font-size: 13px; font-weight: 500; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.12s ease; }
.topic:hover { transform: translateY(-1px); border-color: var(--line-2); }
.topic[aria-pressed="true"] { border-color: var(--ember); background: var(--glow); color: var(--ember-hi); }

/* ---------- Welcome ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.h-hero { font: 600 clamp(32px, 4.6vw, 48px)/1.12 var(--body); letter-spacing: -0.025em; margin: 0 0 16px; }
.lede { font-size: 18px; color: var(--muted); max-width: 480px; margin: 0 0 24px; }
.hero .ask-box { max-width: 560px; }
.hero .try-line { max-width: 560px; margin-top: 10px; }
.hero-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; }
.voice-link { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14.5px; font-weight: 500; background: none; border: 0; padding: 4px 0; }
.voice-link:hover { color: var(--text); }
.voice-link svg { width: 18px; height: 18px; color: var(--ember); }
.preview { border-radius: 28px; padding: 24px; border: 1px solid var(--line); background: radial-gradient(120% 80% at 50% 100%, var(--glow) 0%, var(--surface) 55%, var(--well) 100%); box-shadow: 0 24px 56px -30px var(--shadow); }
.preview-q { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
/* The example answer, kept tight: sections close together, then the same
   quiet footer every real answer has (references, action icons, Keep going). */
.preview .msg-head .checked { margin-left: auto; font-size: 12px; white-space: nowrap; }
.checked svg { width: 13px; height: 13px; flex: none; }
.preview .sec-h { font-size: 13px; margin: 12px 0 3px; }
.preview .msg-head + .sec-h { margin-top: 0; }
.preview-verse { font-size: 17px; line-height: 1.5; margin: 0; }
.preview .verse-ref { margin: 4px 0 0; font-size: 13px; }
.preview-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.preview-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider); }
.preview-refs { display: flex; gap: 12px; font-size: 13px; }
.preview-refs a { color: var(--ember); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ember-line); text-underline-offset: 3px; }
.preview-acts { display: flex; gap: 2px; }
.preview-acts i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); }
.preview-acts svg { width: 16px; height: 16px; }
.preview-next { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--well); font-size: 13.5px; color: var(--text); }
.preview-next span { flex: none; white-space: nowrap; color: var(--faint); font-size: 12.5px; }
.preview-next svg { width: 15px; height: 15px; margin-left: auto; flex: none; color: var(--faint); }
.preview-q strong { color: var(--text); font-weight: 500; }
.sec-h { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.checked { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--sage); }
/* The welcome page's five highlights (index.html): Amens leading across the
   row, then Pray with Aquila, Declare, sermon notes and church, each a headline, one sentence and a small made-up
   example. Two by two on a wide screen; a row that swipes on a phone. */
/* The four highlights under Aquila: Amens across the page, the cave as a
   phone open on Refuge, then sermon notes and Declare side by side. */
.key-features { display: grid; gap: 12px; margin-top: 14px; }
.spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Amens leads the highlights: its own warmer card, the headline larger, a
   few plain facts, and the wall as people see it (a request, good news and a
   kind word back). */
.spot.is-amens { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; column-gap: 32px; align-items: center; padding: 28px; border-color: var(--ember-line); background: radial-gradient(110% 90% at 0% 0%, var(--glow-strong) 0%, var(--card-warm) 45%, var(--surface) 100%); box-shadow: 0 26px 54px -34px var(--ember-glow); }
.spot.is-amens .amens-copy { grid-column: 1; }
.spot.is-amens h3 { font-size: clamp(24px, 2.4vw, 28px); margin-bottom: 8px; }
.spot.is-amens .amens-copy > p:not(.spot-kicker) { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
.amens-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.amens-facts li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text); }
.amens-facts svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--surface); color: var(--ember); box-shadow: 0 0 0 1px var(--ember-line); }
.spot.is-amens .spot-demo { grid-column: 2; grid-row: 1; margin-top: 0; align-self: center; }
.amens-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.amens-wall .mock-word { grid-column: 1 / -1; }
.amens-post { align-content: start; }
.amens-post.is-joy .mock-label { color: var(--sage) !important; }
.amens-post.is-joy .mock-btn { background: var(--sage-bg); color: var(--sage); }
/* The cave: what it holds on one side, and on the other a phone open on
   Refuge, rising from the card's foot. Its rooms borrow Refuge's own tile
   look (.tile-icon, .tile-name, .tile-badge), so the two never drift. */
.cave-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); column-gap: 40px; align-items: end; padding: 32px 36px 0; border: 1px solid var(--ember-line); border-radius: var(--radius); overflow: hidden; background: radial-gradient(70% 90% at 85% 100%, var(--glow-strong) 0%, transparent 70%), radial-gradient(100% 110% at 0% 0%, var(--glow) 0%, var(--card-warm) 50%, var(--surface) 100%); box-shadow: 0 26px 54px -34px var(--ember-glow); }
.cave-copy { align-self: center; padding-bottom: 32px; }
.cave-copy h3 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.015em; }
.cave-copy > p:not(.spot-kicker) { margin: 0; max-width: 460px; color: var(--soft); font-size: 15px; line-height: 1.5; }
.cave-copy .btn { margin-top: 20px; }
.cave-phone { justify-self: center; width: min(100%, 340px); display: grid; gap: 12px; padding: 16px 14px 20px; border: 8px solid var(--line-2); border-bottom: 0; border-radius: 38px 38px 0 0; background: var(--ground); box-shadow: 0 -10px 50px -20px var(--ember-glow); }
.phone-head { display: flex; align-items: center; gap: 8px; margin: 2px 4px 0; font-size: 16px; font-weight: 600; }
.phone-head svg { width: 20px; height: 20px; color: var(--ember); }
.phone-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: var(--pill); background: var(--well); font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center; }
.phone-tabs span { padding: 6px 0; border-radius: var(--pill); }
.phone-tabs .is-on { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px -4px var(--shadow); }
.phone-private { display: flex; align-items: center; gap: 6px; margin: 0 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.phone-private svg, .phone-help svg { width: 13px; height: 13px; color: var(--sage); flex: none; }
.phone-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.phone-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 84px; padding: 11px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.phone-tile.is-wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; border-color: var(--ember-line); background: radial-gradient(140% 160% at 0% 0%, var(--glow) 0%, var(--card-warm) 70%); }
.phone-tile .tile-icon { width: 30px; height: 30px; }
.phone-tile .tile-icon svg { width: 16px; height: 16px; }
.phone-tile.is-wide .tile-icon { background: var(--ember-grad); color: var(--ember-ink); box-shadow: var(--sheen); }
.phone-tile .tile-name { font-size: 13px; }
.phone-tile .tile-badge { top: 10px; right: 10px; }
.phone-help { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 11px; border-radius: var(--pill); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--soft); }
.spot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto 1fr; column-gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(120% 100% at 0% 0%, var(--glow) 0%, var(--surface) 60%); box-shadow: 0 18px 40px -32px var(--shadow); }
.spot > :not(.spot-demo) { grid-column: 1; }
.spot-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ember); }
.spot-kicker svg { width: 18px; height: 18px; }
.spot h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.spot > p:not(.spot-kicker) { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.spot-demo { grid-column: 2; grid-row: 1 / -1; align-self: center; display: grid; gap: 8px; }
.mock-label { color: var(--ember) !important; font-weight: 600; }
.mock-amen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.mock-amen small { white-space: nowrap; }
.mock-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember-hi); font-size: 12.5px; font-weight: 600; }
.mock-btn svg { width: 14px; height: 14px; }
.mock-faces { display: flex; }
.mock-faces i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ember-line); }
.mock-faces i + i { margin-left: -6px; background: var(--sage-line); }
.mock-faces i:last-child { background: var(--glow-strong); }
.mock-word { font-family: var(--scripture); font-size: 14px; color: var(--soft); }
.mock-word small { display: block; font-family: var(--body); margin-bottom: 2px; }
.mock-h { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--soft); }
.mock-refs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 13px; }
.mock-refs b { color: var(--ember); font-weight: 600; }
.mock-prayer { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--soft); }
.mock-declare { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.mock-declare li { display: grid; gap: 1px; font-size: 14px; font-weight: 500; line-height: 1.35; padding-left: 10px; border-left: 2px solid var(--ember-line); }
.mock-declare b { font-size: 12px; font-weight: 600; color: var(--ember); }
.mock-amen-word { font-size: 14px; color: var(--ember-hi); }
.mock-link { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-radius: var(--pill); background: var(--well); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.mock-link svg { width: 14px; height: 14px; flex: none; }
.mock-points { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: var(--soft); }
.mock-points li::marker { color: var(--ember); font-weight: 600; }
.mock-todo { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 13px; color: var(--soft); }
.mock-todo i { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ember); }
/* A tiny Connections graph: solid lines close in meaning, dashed ones the
   classic cross-references, as the real graph draws them. */
.mock-graph { width: 100%; max-width: 290px; height: auto; justify-self: center; overflow: visible; }
.mock-graph path { fill: none; stroke-width: 1.6; }
.mock-graph path.is-meaning { stroke: var(--line-2); }
.mock-graph path.is-xref { stroke: var(--ember); stroke-dasharray: 4 4; opacity: 0.7; }
.mock-graph circle { fill: var(--surface); stroke: var(--ember); stroke-width: 1.6; }
.mock-graph circle.is-seed { fill: var(--ember); }
.mock-graph text { font: 500 11px var(--body); fill: var(--muted); }
.mock-graph text.is-seed { font-weight: 700; fill: var(--text); }
.mock-legend { display: flex; gap: 14px; margin: 0; font-size: 11.5px; color: var(--muted); }
.mock-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mock-legend span::before { content: ""; width: 16px; border-top: 2px solid var(--line-2); }
.mock-legend .is-xref::before { border-top: 2px dashed var(--ember); }
.mock-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.mock-steps li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--soft); }
.mock-steps svg { width: 14px; height: 14px; flex: none; color: var(--sage); }
.tour-more { margin-top: 32px; }
/* The welcome's promises: what stays private, and why it's free. */
.promise.is-between { margin-top: 28px; }
.promise { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.promise-part { padding: 24px 26px; }
.promise-part.is-gift { display: grid; align-content: start; gap: 12px; background: radial-gradient(120% 120% at 100% 0%, var(--glow) 0%, var(--card-warm) 70%); border-left: 1px solid var(--line); }
.promise-part.is-gift p:not(.promise-kicker) { margin: 0; color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.promise-part.is-gift .btn { justify-self: start; }
.promise-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text); }
.promise-part.is-gift .promise-kicker { margin: 0; }
.promise-kicker svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--sage-bg); color: var(--sage); }
.is-gift .promise-kicker svg { background: var(--ember-bg); color: var(--ember); }
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.promise li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: var(--soft); }
.promise li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

/* The welcome tour (index.html): segmented tabs over one panel at a time,
   the copy beside a small made-up example of that part in use. Panels share
   one grid cell, so the tallest sets the height and switching never jumps. */
.tour { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(90% 120% at 100% 0%, var(--glow) 0%, var(--surface) 55%); overflow: hidden; }
.tour-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--divider); overflow-x: auto; scrollbar-width: none; }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--h-btn-sm); padding: 0 14px; border: 0; border-radius: var(--pill); background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tour-tabs button svg { width: 17px; height: 17px; }
.tour-tabs button:hover { color: var(--text); }
.tour-tabs button[aria-selected="true"] { background: var(--ember-bg); color: var(--ember-hi); }
.tour-panels { display: grid; }
.tour-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px; }
.tour-panel:not(.is-active) { visibility: hidden; }
.tour-panel.is-active .tour-copy, .tour-panel.is-active .tour-mock { animation: rise 0.25s ease both; }
.tour-copy h3 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 6px; }
.tour-copy > p { color: var(--muted); margin: 0 0 16px; }
.tour-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tour-feats li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); }
.tour-feats svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }

/* The made-up examples: small cards built from the app's own tokens. */
.tour-mock { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--divider); }
.mock-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px -14px var(--shadow); font-size: 14px; }
.mock-card strong { font-weight: 600; }
.mock-card small, .mock-sub { color: var(--muted); font-size: 12.5px; }
.mock-row { display: flex; align-items: center; gap: 10px; }
.mock-row > div { display: grid; min-width: 0; flex: 1; }
.mock-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }
.mock-ico svg { width: 16px; height: 16px; }
.mock-row.is-answered .mock-ico { background: var(--sage-bg); color: var(--sage); }
.mock-live .mock-ico { background: var(--danger); color: var(--surface); }
.mock-live .mock-ico svg { fill: currentColor; }
.mock-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sage); }
.mock-tag svg { width: 13px; height: 13px; }
.mock-count { flex: none; font-size: 12px; font-weight: 600; color: var(--ember-hi); }
.mock-kicker { margin: 0; font-size: 12px; font-weight: 600; color: var(--ember); }
.mock-ask { margin: 0; justify-self: end; max-width: 90%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--ember-bg); color: var(--ember-hi); font-size: 13.5px; }
.mock-bar { height: 5px; border-radius: var(--pill); background: var(--raised); overflow: hidden; }
.mock-bar span { display: block; height: 100%; background: var(--ember-grad); border-radius: inherit; }
.mock-list, .mock-areas { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.mock-list li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.mock-list li b { margin-left: auto; color: var(--text); font-weight: 600; }
.mock-list svg, .mock-list i { flex: none; width: 15px; height: 15px; }
.mock-list .is-done svg { color: var(--sage); }
.mock-list i { border-radius: 50%; border: 2px solid var(--ember); }
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--raised); }
.mock-dots i.on { background: var(--ember); }
.mock-still { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.mock-still > div { display: grid; }
.mock-orb { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, var(--ember-hi) 0%, var(--ember) 45%, var(--ember-bg) 72%); box-shadow: 0 0 0 6px var(--ember-bg); animation: mock-breathe 4s ease-in-out infinite; }
@keyframes mock-breathe { 50% { transform: scale(0.82); } }
.mock-areas li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.mock-areas li > span { display: grid; min-width: 0; }
.mock-areas li small { font-weight: 400; }
/* A reflection's look back: three numbers (the cave's arch marks the ones
   Adullam counts), answered prayers as stones of help, and the year ahead. */
.mock-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mock-stats > div { display: grid; gap: 1px; }
.mock-stats b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mock-stats small { display: block; line-height: 1.3; }
.mock-stats small .mock-arch { display: inline-block; vertical-align: -1px; margin-right: 3px; }
.mock-arch { width: 10px; height: 10px; flex: none; color: var(--ember); }
.mock-stones { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding-top: 8px; border-top: 1px solid var(--divider); font-size: 12.5px; color: var(--muted); }
.mock-stones svg { width: 18px; height: 18px; flex: none; color: var(--sage); }
.mock-stones strong { color: var(--text); }
.mock-ahead, .mock-word-year { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; }
.mock-ahead b { font-size: 12px; font-weight: 600; color: var(--sage); }
.mock-word-year { color: var(--muted); }
.mock-word-year strong { color: var(--text); margin-left: 4px; }
.mock-word-year b { font-size: 12.5px; font-weight: 600; color: var(--ember); }
.mock-areas b { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--pill); }
.mock-areas .steady { background: var(--sage-bg); color: var(--sage); }
.mock-areas .thriving { background: var(--ember-bg); color: var(--ember-hi); }
.mock-areas .mixed { background: var(--raised); color: var(--muted); }
/* Where the name comes from: the sign-in page's arch and quote, as one band. */
.name-band { display: flex; gap: 28px; align-items: center; padding: 28px; }
.name-band .arch { flex: none; color: var(--ember); }
.name-band > div { max-width: 640px; }
.site-foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; color: var(--faint); font-size: 14px; border-top: 1px solid var(--divider); padding-top: 24px; padding-bottom: 40px; }
.section { padding-bottom: 56px; }

/* ---------- Privacy and terms ---------- */
.legal { max-width: 720px; padding-bottom: 56px; line-height: 1.6; }
.legal h2 { font-size: 19px; margin: 32px 0 8px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }

/* ---------- Sign in ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.story { padding: 32px 48px; display: flex; flex-direction: column; gap: 40px; background: radial-gradient(90% 70% at 50% 100%, var(--glow-strong) 0%, var(--surface) 50%, var(--ground) 100%); border-right: 1px solid var(--divider); }
.story > div { margin-block: auto; max-width: 480px; }
.story-quote { font-family: var(--scripture); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.45; margin: 0 0 12px; }
.formside { display: flex; align-items: center; justify-content: center; padding: 48px 16px; }
.formbox { width: 100%; max-width: 400px; }
.h-form { font: 600 30px/1.2 var(--body); letter-spacing: -0.02em; margin: 0 0 6px; }
.field-label { display: block; font-size: 14px; font-weight: 500; color: var(--soft); margin: 0 0 6px; }
.field { display: block; width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 16px; margin: 0 0 14px; }
.field:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--faint); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
/* A segmented control: a sunken track with the chosen option raised on it.
   The sign-in switch uses it, and so do the cave's tabs (.tabs below). */
.seg { display: flex; background: var(--raised); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; margin-bottom: 22px; }
.seg button { flex: 1; border: 0; border-radius: var(--pill); min-height: var(--h-btn-sm); padding: 5px 10px; font-size: 14px; font-weight: 600; background: transparent; color: var(--muted); transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow), 0 0 0 1px var(--line); }
.form-msg { font-size: 14px; margin: 0 0 14px; color: var(--muted); }
.form-msg.bad { color: var(--danger); }
.form-msg:empty { display: none; }

/* ---------- Home ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.maincol, .sidecol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bar { height: 8px; border-radius: var(--pill); background: var(--raised); overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember) 0%, var(--ember-hi) 100%); border-radius: var(--pill); transition: width 0.4s ease; }
.progress-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--faint); margin: 8px 0 14px; }
.chapter { padding: 5px 12px; border-radius: var(--pill); background: var(--raised); font-size: 13px; font-weight: 600; color: var(--text); border: 0; }
a.chapter { text-decoration: none; }
a.chapter:hover, button.chapter:hover { background: var(--hover); color: var(--ember-hi); }

/* Shaping a plan with Aquila (home card and Reading plans in the Bible) */
/* Plan with Aquila (cave.js::planBuilder): a head line and one ask box. */
.plan-ask { margin: 0 0 24px; }
.plan-ask-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.plan-ask-head .title-info { margin: 0; }
.plan-ask-title { margin: 0; font-size: 15px; font-weight: 600; }
.plan-ask-whole { font-size: 13.5px; padding: 4px 0; white-space: nowrap; }
/* "Try" lines (plan ideas, the welcome's starting questions): one line that
   scrolls sideways on a narrow screen, fading at its edge. Never pills. */
.plan-ideas { display: none; }
.try-line { display: flex; }
.plan-ideas, .try-line { align-items: center; gap: 4px; margin: 8px 0 0; padding: 0 4px; font-size: 13.5px; color: var(--faint); white-space: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.plan-ideas::-webkit-scrollbar, .try-line::-webkit-scrollbar { display: none; }
.plan-ask:focus-within:not(.has-text) .plan-ideas { display: flex; }
.plan-ideas span, .try-line span { flex: none; margin-right: 4px; }
.plan-ideas button, .try-line button { flex: none; padding: 3px 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--soft); font: inherit; cursor: pointer; }
.plan-ideas button:hover, .try-line button:hover { background: var(--hover); color: var(--ember-hi); }
.plan-ideas button + button::before, .try-line button + button::before { content: "·"; margin-right: 8px; color: var(--faint); pointer-events: none; }
.plan-ideas button:last-child, .try-line button:last-child { margin-right: 24px; }

/* ---------- Ask Aquila ---------- */
.ask-layout { display: flex; min-height: calc(100vh - 61px); }
.rail { flex: 0 0 264px; min-width: 0; border-right: 1px solid var(--divider); padding: 16px 12px 16px 20px; position: sticky; top: 61px; height: calc(100vh - 61px); overflow-y: auto; background: var(--well); }
.rail-new { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--h-btn); margin-bottom: 18px; border: 1px solid var(--ember-line); border-radius: var(--pill); background: var(--ember-bg); color: var(--ember-hi); font: 600 14px/1 var(--body); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
.rail-new:hover { border-color: var(--ember); }
.rail-new:active { transform: scale(0.98); }
.rail-new svg, .ask-toolbar .btn svg { width: 16px; height: 16px; }
.rail-label { font-size: 12px; font-weight: 600; color: var(--faint); padding: 0 12px; margin: 14px 0 4px; }
.rail-label:first-child { margin-top: 0; }
.rail-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; color: var(--soft); background: none; border: 0; margin-bottom: 2px; font-size: 14px; }
.rail-item:hover { background: var(--hover); }
.rail-item[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line), inset 3px 0 0 var(--ember); }
.rail-item small { display: block; color: var(--faint); font-size: 12px; }
.rail-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Auto side margins on a flex child shrink it to its content, so the thread
   and composer need an explicit width to fill the column. */
.ask-main > .wrap { width: 100%; }
.ask-toolbar { display: none; }
.ask-toolbar .btn-quiet { margin-left: -12px; }
.thread { flex: 1; padding-top: 28px; padding-bottom: 24px; }
.thread-inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.ask-empty { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ask-empty .title-info { justify-content: center; }
.ask-empty .page-title { margin: 6px 0 4px; }
.ask-empty-mark { width: 56px; height: 56px; box-shadow: 0 0 0 8px var(--ember-bg), 0 18px 40px -12px var(--ember-glow); }
/* A new conversation sits in the middle of the page: the mark and question,
   the text box, then the starters. Once it begins, the box goes back to the
   foot and the starters away. */
.ask-main:has(#askEmpty:not([hidden])) .thread { flex: 0 0 auto; margin-top: auto; padding-bottom: 20px; }
.ask-main:has(#askEmpty:not([hidden])) .composer { position: static; margin-bottom: auto; padding-bottom: 12vh; background: none; }
.ask-main:has(#askEmpty[hidden]) .starter-cards { display: none; }
/* The starters: four small cards in a row, an icon and a word each. */
.starter-cards { max-width: 720px; margin: 14px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.starter-card { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--h-btn); padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--soft); font: 500 14px/1.2 var(--body); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.starter-card:hover { border-color: var(--ember-line); color: var(--text); transform: translateY(-1px); }
.starter-card:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.starter-icon { display: grid; place-items: center; color: var(--ember); }
.starter-icon svg { width: 16px; height: 16px; }
.msg-me { align-self: flex-end; max-width: 85%; background: var(--card-warm); border: 1px solid var(--ember-line); border-radius: 20px 20px 6px 20px; padding: 12px 17px; font-size: 16px; white-space: pre-wrap; animation: rise 0.25s ease both; }
.msg-aquila { animation: rise 0.25s ease both; }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
/* Progress shows one line: the step underway, or the last one finished. */
.stages { display: flex; gap: 6px; margin: 0 0 12px; min-height: 20px; }
.stage { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--faint); }
.stage.active { color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
.stage.ok { display: none; color: var(--sage); }
.stage.ok:last-child { display: inline-flex; }
.memory-mark { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ember-hi); background: var(--ember-bg); border: 1px solid var(--ember-line); border-radius: var(--pill); padding: 5px 12px; margin: 0 0 14px; text-decoration: none; }
.memory-mark svg { width: 13px; height: 13px; }
.memory-mark:hover { text-decoration: underline; }
.answer { white-space: pre-wrap; font-size: 17px; line-height: 1.7; color: var(--text); }
/* The four study headings from SYNTHESIZE_SYSTEM_PROMPT, as ruled section headings. */
.answer .heading { display: block; font: 600 15px/1.3 var(--body); color: var(--text); margin: 24px 0 6px; padding-top: 16px; border-top: 1px solid var(--divider); }
.answer .heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Under an answer: two quiet lines, the references and then the actions,
   with no pills, so the answer itself keeps the space. */
.cites { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 18px; align-items: baseline; }
.cites:not(:empty)::before { content: attr(data-translation); font-size: 12px; font-weight: 700; color: var(--faint); }
.citation { font-size: 13.5px; font-weight: 600; padding: 2px 0; border: 0; background: none; color: var(--ember-hi); }
.citation:hover { text-decoration: underline; }
.answer-actions { display: flex; flex-wrap: wrap; gap: 0; margin: 6px 0 0 -6px; }
.answer-actions .act { gap: 5px; border-color: transparent; padding: 4px 6px; color: var(--muted); font-weight: 500; }
.answer-actions .act:hover { border-color: transparent; background: var(--hover); color: var(--text); }
.answer-actions .act.is-done { border-color: transparent; background: transparent; color: var(--sage); }
.answer-actions .act.is-playing { color: var(--ember); }
.answer-actions .act-icon { min-width: var(--h-chip); justify-content: center; }
.followups { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider); }
.followups:empty { display: none; }
.followups .kicker { margin: 0; }
.followup { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.followup::after { content: "\2192"; color: var(--ember); flex: none; transition: transform 0.15s ease; }
.followup:hover { border-color: var(--ember-line); background: var(--card-warm); }
.followup:hover::after { transform: translateX(3px); }
.thinking { display: inline-flex; gap: 5px; padding: 6px 0; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: pulse 1.1s ease-in-out infinite; }
.thinking span:nth-child(2) { animation-delay: 0.15s; }
.thinking span:nth-child(3) { animation-delay: 0.3s; }
.composer { position: sticky; bottom: 0; z-index: 5; padding-top: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--ground) 70%, transparent); }
.composer .ask-box { max-width: 720px; margin: 0 auto; align-items: flex-end; border-radius: 26px; padding: 6px 6px 6px 20px; box-shadow: 0 18px 44px -26px var(--shadow), 0 1px 0 var(--line); }
.composer .ask-box textarea { padding: 10px 0; }
.composer-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--ember-grad); color: var(--ember-ink); box-shadow: 0 6px 16px -6px var(--ember-glow); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
.composer-send svg { width: 19px; height: 19px; }
.composer-send:active { transform: scale(0.94); }
.composer .ask-box:has(textarea:placeholder-shown) .composer-send:not(.loading) { background: var(--raised); color: var(--faint); box-shadow: none; }
.composer .error { max-width: 720px; margin: 8px auto 0; }
.composer-note { max-width: 720px; margin: 8px auto 0; font-size: 12px; color: var(--faint); text-align: center; }
#submit.loading .send-label { display: none; }
@media (max-width: 560px) {
  .starter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask-main:has(#askEmpty:not([hidden])) .composer { padding-bottom: 6vh; }
}
#submit .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
#submit.loading .spinner { display: inline-block; }

/* ---------- Cave ---------- */
/* The cave's tabs, as a segmented control (the same look as .seg): a sunken
   track sized to its tabs, the open one raised. On a phone it fills the width
   and all five tabs share it (see the 720px block), so none hide off screen. */
.tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; margin: 0 0 24px; padding: 3px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--raised); border: 1px solid var(--line); border-radius: var(--pill); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: var(--h-btn-sm); background: transparent; border: 0; border-radius: var(--pill); color: var(--muted); font-size: 14px; font-weight: 600; padding: 5px 16px; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px var(--shadow), 0 0 0 1px var(--line); }
.moods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.mood { min-height: var(--h-chip); padding: 5px 13px; border-radius: var(--pill); border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; text-transform: capitalize; }
.mood:hover { background: var(--hover); }
.mood[aria-pressed="true"] { border-color: var(--ember); color: var(--ember-hi); background: var(--ember-bg); }
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.15s ease, border-color 0.15s ease; animation: rise 0.25s ease both; }
.entry:hover { transform: translateY(-2px); border-color: var(--line-2); }
.entry-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--faint); }
.badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember-hi); text-transform: capitalize; }
.badge.plain { background: var(--raised); color: var(--muted); }
.entry h3 { font-size: 17px; line-height: 1.35; }
.entry .verse { font-family: var(--scripture); color: var(--soft); font-size: 16px; }
.entry .refl { color: var(--text); white-space: pre-wrap; font-size: 15px; }
.entry textarea { width: 100%; min-height: 6rem; background: var(--ground); border: 1px solid var(--ember); border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical; }
/* An entry's actions: the likely next step in words, then a few round icons
   (Connections, Edit) and the "⋯" menu with Share and Delete. */
.entry .entry-actions { display: flex; align-items: center; gap: 4px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--divider); }
.entry-icons { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.text-act { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-btn-sm); padding: 0 8px 0 0; border: 0; background: none; color: var(--ember); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.text-act svg { width: 16px; height: 16px; flex: none; }
.text-act:hover { color: var(--ember-hi); }
.icon-act { width: var(--h-btn-sm); height: var(--h-btn-sm); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); transition: background-color 0.15s ease, color 0.15s ease; }
.icon-act svg { width: 18px; height: 18px; }
.icon-act:hover, .icon-act.is-on { background: var(--hover); color: var(--text); }
.icon-act.is-on { color: var(--sage); }
/* The "⋯" menu sits at the foot of a card, so it opens upward, inside the
   card, and the card rises above its neighbours while it's open. */
.entry:has(.more-menu) { position: relative; z-index: 5; }
.entry .entry-actions .more-menu { top: auto; bottom: calc(100% + 4px); }
/* cave.js::unhide flips a menu that would open under a bar or off screen. */
.more .more-menu.is-below { top: calc(100% + 4px); bottom: auto; }
.more .more-menu.is-above { top: auto; bottom: calc(100% + 4px); }
.tag { font-size: 13px; color: var(--ember); }
.plan-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.plan-item .overview { color: var(--muted); font-size: 15px; margin: 2px 0 14px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.refs .kicker { margin: 0 6px 0 0; }

/* ---------- Settings ---------- */
.settings { max-width: 720px; }
.settings .card { margin-bottom: 16px; }
.settings .section-title { margin-bottom: 4px; }
.settings .section-sub { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.setting-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.setting-row .field { margin: 0; flex: 1 1 220px; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; margin: 0 0 16px; }
.switch input { width: 20px; height: 20px; accent-color: var(--ember); }
.memory-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.memory-list li { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--divider); }
.memory-list p { font-size: 15px; }
.memory-list small { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; }
.memory-list .act { flex: none; }

/* ---------- Signed out ---------- */
.farewell { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(70% 55% at 50% 100%, var(--glow) 0%, var(--surface) 55%, var(--ground) 100%); }
.farewell main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px 64px; }

/* ---------- Sheets (journal, conversations on a phone) ---------- */
.sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(10, 8, 6, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: appear 0.15s ease both; }
.sheet { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px; width: 100%; max-width: 460px; max-height: calc(100% - 16px); overflow-y: auto; padding: 24px; box-shadow: 0 24px 60px var(--shadow); }
.sheet h3 { font-size: 19px; margin: 0 0 4px; }
.sheet .sheet-lede { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.sheet label.field-wrap { display: block; font-size: 14px; font-weight: 500; color: var(--soft); margin: 0 0 14px; }
.sheet .field-wrap input, .sheet .field-wrap textarea { display: block; width: 100%; margin-top: 6px; background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 16px; }
.sheet .field-wrap textarea { min-height: 7rem; resize: vertical; }
.sheet .field-wrap input:focus, .sheet .field-wrap textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.sheet .moods { margin: 6px 0 16px; }
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.journal-preview { background: var(--well); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 15px; color: var(--soft); margin-bottom: 16px; max-height: 8rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.journal-preview strong { color: var(--text); display: block; margin-bottom: 2px; font-weight: 600; }

/* ---------- Voice ---------- */
.callbar { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(110px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 14px; font-size: 14px; box-shadow: 0 16px 36px var(--shadow); }
.callbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); animation: pulse 2.4s ease-in-out infinite; }
.callbar-time { color: var(--faint); margin-left: 6px; font-variant-numeric: tabular-nums; }
.callbar-end { font-weight: 600; color: #fff; background: #C2331F; border: 0; border-radius: 999px; padding: 8px 14px; }
.call-transcript { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(166px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: min(24rem, calc(100vw - 32px)); max-height: 38vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 16px 36px var(--shadow); }
.call-transcript-line { font-size: 15px; }
.call-transcript-line .who { display: block; font-size: 12px; color: var(--faint); font-weight: 600; }
.call-transcript-line.caller .who { color: var(--ember); }
body.voice-mounted .webrtc_widget_outer_wrapper,
body.voice-mounted .voice_connect_widget_outer_wrapper,
body.voice-mounted .vc_widget_outer_wrapper { display: none !important; }
.disclaimer-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(10, 8, 6, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.disclaimer-modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 440px; padding: 22px; box-shadow: 0 24px 60px var(--shadow); }
.disclaimer-modal h3 { font-size: 19px; margin: 0 0 10px; }
.disclaimer-modal p { color: var(--muted); font-size: 15px; margin: 0 0 12px; }

/* Toasts (cave.js::toast): a small card with an icon for its tone, from the
   bottom on a wide screen and from the top on a phone, so it never sits on
   the tab bar, the composer or the player. The line along the bottom is the
   time left, and it holds while the card is hovered or focused. */
.toasts { position: fixed; z-index: 80; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { --tone: var(--sage); --tone-bg: var(--sage-bg); position: relative; overflow: hidden; pointer-events: auto; touch-action: pan-y; display: flex; align-items: center; gap: 10px; padding: 9px 6px 9px 10px; background: color-mix(in srgb, var(--surface) 98%, transparent); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 36px var(--shadow), 0 2px 6px var(--shadow); animation: toast-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; transition: transform 0.2s ease, opacity 0.2s ease; }
.toast.is-info { --tone: var(--ember); --tone-bg: var(--ember-bg); }
.toast.is-error { --tone: var(--danger); --tone-bg: color-mix(in srgb, var(--danger) 13%, var(--surface)); }
.toast.is-dragging { transition: none; }
.toast.is-leaving { animation: toast-out 0.22s ease forwards; }
.toast-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tone-bg); color: var(--tone); }
.toast-icon svg { width: 15px; height: 15px; }
.toast-text { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.toast-action { flex: none; display: inline-flex; align-items: center; min-height: var(--h-btn-sm); padding: 0 12px; border: 0; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember-hi); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.toast-action:hover { background: var(--ember-line); }
.toast-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.toast-close:hover { background: var(--hover); color: var(--text); }
.toast-close svg { width: 14px; height: 14px; }
.toast-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--tone); opacity: 0.55; transform-origin: left; animation: toast-timer var(--toast-ms) linear forwards; }
@media (hover: hover) { .toast:hover .toast-timer { animation-play-state: paused; } }
.toast:focus-within .toast-timer, .toast.is-dragging .toast-timer { animation-play-state: paused; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes toast-timer { to { transform: scaleX(0); } }
@media (max-width: 720px) {
  .toasts { bottom: auto; top: calc(10px + env(safe-area-inset-top, 0px)); flex-direction: column-reverse; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(0.97); } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
}

/* ---------- Knowledge graph (web/graph.js) ---------- */
.graph-overlay { position: fixed; inset: 0; z-index: 50; background: var(--ground); display: flex; flex-direction: column; animation: appear 0.2s ease both; }
.graph-top { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--divider); background: var(--surface); }
.graph-top h3 { font-size: 18px; }
.graph-top .graph-sub { font-size: 14px; color: var(--faint); }
.graph-search { display: flex; gap: 8px; margin-left: auto; }
.graph-search input { width: 15rem; font-size: 15px; background: var(--ground); border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 16px; min-height: var(--h-btn); }
.graph-search input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.graph-stage { flex: 1; min-height: 0; position: relative; }
.graph-stage svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.graph-stage svg:active { cursor: grabbing; }
.graph-node circle { stroke: var(--surface); stroke-width: 2px; cursor: pointer; }
.graph-node.seed circle { stroke: var(--text); stroke-width: 2.5px; }
.graph-node.selected circle { stroke: var(--ember); stroke-width: 3.5px; }
.graph-node.expanded circle { stroke-dasharray: 3 2; }
.graph-node:focus { outline: none; }
.graph-node:focus-visible circle { stroke: var(--ember); stroke-width: 3.5px; }
.graph-node text { font: 500 11px/1 var(--body); fill: var(--muted); cursor: pointer; paint-order: stroke; stroke: var(--ground); stroke-width: 3px; }
.graph-node.seed text { fill: var(--text); font-size: 12.5px; font-weight: 600; }
/* Lines: soft solid for close in meaning, dashed accent for a classic
   cross-reference, solid accent when a pair is both (web/graph.js::linkClass). */
.graph-link { stroke: var(--faint); }
.graph-link.cross-ref { stroke: var(--ember); stroke-dasharray: 5 4; }
.graph-link.both { stroke: var(--ember); }
.graph-link.selected { stroke: var(--ember-hi); stroke-opacity: 1; stroke-width: 4px; }
.graph-link.is-hidden, .graph-link-hit.is-hidden { display: none; }
/* A wide invisible line over each one, so a thin line is easy to tap. */
.graph-link-hit { stroke: transparent; stroke-width: 14px; cursor: pointer; }
.graph-kinds { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-top: 6px; border-top: 1px solid var(--divider); }
.graph-kind { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; color: var(--soft); font-size: 13px; font-weight: 500; }
.graph-kind svg { width: 26px; height: 8px; }
.graph-kind line { stroke-width: 2.5; stroke-linecap: round; }
.graph-kind.kind-cross_ref line { stroke: var(--ember); stroke-dasharray: 4 3; }
.graph-kind.kind-meaning line { stroke: var(--faint); }
.graph-kind[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.graph-credit { margin-left: auto; font-size: 12px; color: var(--faint); }
/* The side panel for a line: both passages and why they connect. */
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.panel-tag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--pill); background: var(--raised); color: var(--muted); }
.panel-tag.cross-ref { background: var(--ember-bg); color: var(--ember-hi); }
.panel-quote { display: block; width: 100%; text-align: left; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 8px; color: var(--text); }
.panel-quote:hover { border-color: var(--ember-line); }
.panel-quote strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.panel-quote span { font-family: var(--scripture); font-size: 15px; line-height: 1.5; }
.graph-panel .panel-why-label { font: 600 13px/1.3 var(--body); color: var(--muted); margin: 14px 0 4px; }
.graph-panel .panel-why-text { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--text); }
.panel-why.is-loading .panel-why-text { color: var(--faint); animation: pulse 1.4s ease-in-out infinite; }
.panel-links { margin-top: 6px; }
.panel-link { display: flex; align-items: baseline; gap: 8px; width: 100%; background: none; border: 0; border-top: 1px solid var(--divider); padding: 8px 0; text-align: left; color: var(--text); font-size: 14px; }
.panel-link strong { font-weight: 600; white-space: nowrap; }
.panel-link span { color: var(--faint); font-size: 12px; }
.panel-link em { margin-left: auto; font-style: normal; color: var(--ember); font-weight: 600; font-size: 13px; }
.panel-link:hover em { color: var(--ember-hi); }
.graph-panel .panel-credit { font-family: var(--body); font-size: 12px; color: var(--faint); margin: 12px 0 0; line-height: 1.5; }
.graph-legend { position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: min(36rem, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; color: var(--muted); }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; }
.graph-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.graph-hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--faint); background: var(--surface); border: 1px solid var(--line); border-radius: var(--pill); padding: 6px 14px; white-space: nowrap; }
.graph-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); text-align: center; padding: 16px; pointer-events: none; }
/* The empty graph's starting points (graph.js::showStarters). */
.graph-starters { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px 96px; text-align: center; overflow-y: auto; }
.graph-starters p { color: var(--muted); font-size: 15px; max-width: 30rem; }
.graph-starter-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(36rem, 100%); }
.graph-starter { display: grid; align-content: start; gap: 2px; text-align: left; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.graph-starter:hover { border-color: var(--ember-line); }
.graph-starter:active { transform: scale(0.98); }
.graph-starter:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.graph-starter strong { font-size: 15px; font-weight: 600; }
.graph-starter small { font-size: 13px; color: var(--muted); }
.graph-panel { position: absolute; top: 16px; right: 16px; width: min(22rem, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 16px 36px var(--shadow); animation: appear 0.2s ease both; }
.graph-panel h4 { font-size: 17px; margin: 0 0 4px; }
.graph-panel .panel-meta { font-size: 13px; color: var(--faint); margin-bottom: 10px; text-transform: capitalize; }
.graph-panel p { margin: 0 0 14px; font-family: var(--scripture); font-size: 17px; line-height: 1.55; }
.graph-panel .card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- The Bible reader (web/reader.js) ---------- */
/* The Bible tab's front page (web/reader.js::showHub): three ways in, the
   first one, reading, a little warmer than the others. */
.bible-doors { display: grid; gap: 12px; max-width: 640px; }
.bible-door { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.bible-door:hover { border-color: var(--ember-line); color: var(--text); }
.bible-door:active { transform: scale(0.99); }
.bible-door:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.bible-door.is-primary { padding: 20px 18px; border-color: transparent; background: radial-gradient(120% 160% at 100% 0%, var(--glow) 0%, var(--card-warm) 60%) padding-box, var(--edge) border-box; }
.bible-door-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember); }
.bible-door-icon svg { width: 20px; height: 20px; display: block; }
.bible-door-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.bible-door-text strong { font-size: 16px; font-weight: 600; }
.bible-door.is-primary .bible-door-text strong { font-size: 18px; }
.bible-door-text small { font-size: 14px; color: var(--muted); }
.bible-door-count { flex: none; min-width: 26px; padding: 2px 9px; border-radius: var(--pill); background: var(--raised); color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.bible-door-count.is-due { background: var(--ember-grad); color: var(--ember-ink); }
.bible-door-go { flex: none; color: var(--faint); }
.bible-door-go svg { width: 18px; height: 18px; display: block; }
.reader-bar { position: sticky; top: 60px; z-index: 20; background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--divider); }
.reader-bar-inner { display: flex; align-items: center; gap: 6px; min-height: 52px; max-width: 760px; }
.reader-pick { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--text); font: 600 16px/1.2 var(--body); padding: 6px 10px; margin-left: -10px; border-radius: var(--pill); min-width: 0; }
.reader-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-pick svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.reader-pick:hover { background: var(--hover); }
/* My notes sits on the right, just before the translation picker. */
.reader-notes-link { margin-left: auto; }
.reader-back { text-decoration: none; }
.reader-back svg { color: var(--muted); }
.reader-translation { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 4px 10px; font-size: 13px; font-weight: 600; min-height: var(--h-btn-sm); }
.reader-translation:disabled { opacity: 0.75; }
/* Previous and next chapter share one pill, split down the middle. */
.reader-arrows { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: var(--pill); background: var(--hover); overflow: hidden; }
.reader-arrows .iconbtn { width: var(--h-btn-sm); height: var(--h-btn-sm); border: 0; border-radius: 0; background: transparent; }
.reader-arrows .iconbtn + .iconbtn { border-left: 1px solid var(--line); }
.reader-arrows .iconbtn:hover { background: var(--glow); }
.reader-arrows .iconbtn svg { width: 16px; height: 16px; }
.reader { max-width: 760px; padding-bottom: 140px; }
.chapter-title { font: 600 clamp(28px, 4vw, 38px)/1.15 var(--body); letter-spacing: -0.02em; margin: 0 0 20px; }
.chapter-text { font-family: var(--scripture); font-size: 20px; line-height: 1.75; color: var(--text); }
.chapter-text .v { border-radius: 4px; cursor: pointer; transition: background-color 0.15s ease; -webkit-tap-highlight-color: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.chapter-text .v:hover { background: var(--hover); }
.chapter-text .v:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
/* Highlights paint behind the verse; a selection, being temporary, shows over them. */
.chapter-text .v.hl-gold { background: var(--hl-gold); }
.chapter-text .v.hl-green { background: var(--hl-green); }
.chapter-text .v.hl-blue { background: var(--hl-blue); }
.chapter-text .v.hl-rose { background: var(--hl-rose); }
.chapter-text .v.is-selected { background: var(--ember-bg); text-decoration: underline; text-decoration-color: var(--ember); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.chapter-text .v.is-focus { background: var(--glow); }
.chapter-text .vn { font: 600 12px/1 var(--body); color: var(--faint); margin-right: 3px; vertical-align: super; }
.chapter-text .v.has-note .vn { color: var(--ember); }
.chapter-text .v.has-note .vn::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); margin-left: 2px; vertical-align: 2px; }
.chapter-text.poetry .v { display: block; padding-left: 1.4em; text-indent: -1.4em; margin-bottom: 4px; }
.chapter-steps { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--divider); }
.chapter-step { gap: 6px; }
.chapter-step svg { width: 16px; height: 16px; }
.reader-notes { margin-top: 36px; }
.reader-notes .section-title { margin-bottom: 14px; }
.reader-hint { font-size: 15px; }
.verse-bar { position: fixed; z-index: 34; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 20px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--pill); box-shadow: 0 18px 44px var(--shadow); animation: rise 0.18s ease both; }
.verse-bar-ref { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.verse-bar-actions { display: flex; gap: 2px; margin-left: auto; }
.sheet-wide { max-width: 640px; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.picker-head h3 { margin: 0; }
.book-group { margin-top: 12px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 4px; }
.book-btn { text-align: left; border: 0; background: transparent; color: var(--soft); font-size: 14px; padding: 6px 12px; border-radius: var(--pill); min-height: var(--h-chip); }
.book-btn:hover, .chapter-num:hover { background: var(--hover); color: var(--text); }
.book-btn.is-here, .chapter-num.is-here { background: var(--ember-bg); color: var(--ember-hi); font-weight: 600; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 10px; }
.chapter-num { border: 1px solid var(--line); background: var(--surface); color: var(--soft); border-radius: var(--pill); min-height: var(--h-icon); font-size: 14px; font-variant-numeric: tabular-nums; }
.note-preview { border-left: 3px solid var(--ember); }
.note-card h3 a { color: inherit; text-decoration: none; }
.note-card h3 a:hover { color: var(--ember); }

/* Highlight colours outside the text: swatches in the picker, dots, card edges */
.hl-picker { position: absolute; right: 8px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--pill); box-shadow: 0 14px 32px var(--shadow); animation: rise 0.15s ease both; }
.hl-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); padding: 0; transition: transform 0.12s ease; }
.hl-swatch:hover { transform: scale(1.08); }
.hl-swatch.hl-gold, .hl-dot.hl-gold { background: var(--hl-gold); border-color: var(--hl-gold-edge); }
.hl-swatch.hl-green, .hl-dot.hl-green { background: var(--hl-green); border-color: var(--hl-green-edge); }
.hl-swatch.hl-blue, .hl-dot.hl-blue { background: var(--hl-blue); border-color: var(--hl-blue-edge); }
.hl-swatch.hl-rose, .hl-dot.hl-rose { background: var(--hl-rose); border-color: var(--hl-rose-edge); }
.hl-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid; flex: none; }
.mood .hl-dot { margin-right: 6px; vertical-align: -1px; }
.highlight-card { border-left-width: 4px; }
.hl-edge-gold { border-left-color: var(--hl-gold-edge); }
.hl-edge-green { border-left-color: var(--hl-green-edge); }
.hl-edge-blue { border-left-color: var(--hl-blue-edge); }
.hl-edge-rose { border-left-color: var(--hl-rose-edge); }
.highlight-card h3 a, .saved-card h3 a { color: inherit; text-decoration: none; }
.highlight-card h3 a:hover, .saved-card h3 a:hover { color: var(--ember); }
.cave-section + .cave-section { margin-top: 36px; }
.cave-section .row-between .moods { margin: 0; }

/* ---------- Prayers (web/prayers.js) ---------- */
/* This week and Fasting across the top, side by side when there's room,
   then the list. */
.prayers-layout { display: grid; gap: 20px; align-items: start; }
.prayer-main { display: grid; gap: 0; min-width: 0; }
.practice-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.prayers-layout > .practice-link { justify-self: start; }

/* One row per prayer: a tick, its words on one line and how long it's been
   carried. Opened, the words show whole with the verse, the declaration and
   what can be done. */
.prayer-rows { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.prayer-row + .prayer-row { border-top: 1px solid var(--divider); }
.prayer-row { transition: background-color 0.2s ease; }
.prayer-row.is-open { background: radial-gradient(120% 100% at 0% 0%, var(--glow) 0%, var(--surface) 55%); }
.prayer-row.is-answered.is-open { background: radial-gradient(120% 100% at 0% 0%, var(--sage-bg) 0%, var(--surface) 55%); }
.prayer-row-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; }
.prayer-tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; padding: 0; border-radius: 50%; border: 1.8px solid var(--line-2); background: var(--surface); color: var(--surface); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.prayer-tick:hover:not(:disabled) { border-color: var(--sage); }
.prayer-tick:active { transform: scale(0.92); }
.prayer-tick:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.prayer-tick svg { width: 15px; height: 15px; }
.prayer-tick.is-done { border-color: var(--sage); background: var(--sage); }
.prayer-tick.is-answered { border: 0; background: var(--sage-bg); color: var(--sage); cursor: default; }
.prayer-row-toggle { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.prayer-row-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 6px; }
.prayer-row-text { grid-column: 1; font-size: 16px; line-height: 1.45; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prayer-row.is-open .prayer-row-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.prayer-row-line { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.prayer-row.is-answered .prayer-row-line { color: var(--sage); }
.prayer-row-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--ember-hi); font-weight: 500; }
.prayer-row-mark svg { width: 13px; height: 13px; }
.prayer-row-chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; color: var(--faint); transition: transform 0.2s ease; }
.prayer-row-chevron svg { width: 18px; height: 18px; }
.prayer-row.is-open .prayer-row-chevron { transform: rotate(180deg); }
.prayer-row-body { display: grid; gap: 12px; padding: 0 16px 14px 54px; animation: rise 0.2s ease both; }
.prayer-row-body[hidden] { display: none; }
.prayer-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
.prayer-row-actions .more { margin-left: auto; }
/* The passage under a prayer: a plain link, not a pill. */
.prayer-passage { justify-self: start; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ember-hi); }
.prayer-passage svg { width: 15px; height: 15px; }
.prayer-passage:hover { text-decoration: underline; }
/* The declaration kept with a prayer: one card, one tap to open and speak it. */
.prayer-declaration { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--ember-line); background: var(--card-warm); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.prayer-declaration:hover { border-color: var(--ember); box-shadow: 0 10px 22px -18px var(--ember-glow); }
.prayer-declaration-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ember-grad); color: var(--ember-ink); box-shadow: var(--sheen); }
.prayer-declaration-icon svg { width: 17px; height: 17px; }
.prayer-declaration-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.prayer-declaration-text strong { font-size: 14.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prayer-declaration-text small { font-size: 12.5px; color: var(--muted); }
.prayer-declaration-go { flex: none; font-size: 13.5px; font-weight: 600; color: var(--ember); }
.badge.answered, .badge.learned { background: var(--sage-bg); color: var(--sage); }
.badge.answered { display: inline-flex; align-items: center; gap: 4px; text-transform: none; }
.badge.answered svg { width: 12px; height: 12px; }
.answer-note { background: var(--sage-bg); border-radius: var(--radius-sm); padding: 10px 14px; }
.answer-note strong { display: block; font-size: 13px; font-weight: 600; color: var(--sage); margin-bottom: 2px; }
.answer-note p { font-size: 15px; color: var(--text); white-space: pre-wrap; }
.text-act.is-done { color: var(--sage); }
.text-act.is-quiet { color: var(--muted); font-weight: 500; }
.text-act.is-quiet:hover { color: var(--sage); }

/* This week of prayer and fasting. Each folds to its title and a summary
   line; the toggle reuses the prayer row's chevron. */
.practice-card { display: grid; gap: 12px; align-content: start; padding: 16px; }
.practice-card .card-head { margin: 0; align-items: center; flex-wrap: nowrap; }
.practice-toggle { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: var(--h-icon); padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.practice-toggle:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 6px; }
.practice-summary { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.practice-card.is-open .practice-summary { visibility: hidden; } /* the open card says it in full */
.practice-card.is-open .prayer-row-chevron { transform: rotate(180deg); }
.practice-body { display: grid; gap: 12px; animation: rise 0.2s ease both; }
.practice-body[hidden] { display: none; }
.practice-body > .practice-link { justify-self: start; }
.practice-aside { font-size: 13px; }
.practice-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.practice-foot .faint { font-size: 12.5px; flex: 1 1 120px; }
.practice-link { font-size: 13px; padding: 0; }
.practice-card .week-dots { justify-content: space-between; }
.practice-card.is-fasting { border-color: transparent; background: radial-gradient(120% 140% at 100% 0%, var(--glow) 0%, var(--surface) 60%) padding-box, var(--edge) border-box; }
.fast { display: grid; gap: 10px; }
.fast + .fast { padding-top: 12px; border-top: 1px solid var(--divider); }
.fast-head { display: flex; align-items: flex-start; gap: 8px; }
.fast-title { display: grid; gap: 1px; flex: 1; min-width: 0; }
.fast-title strong { font-size: 15px; font-weight: 600; }
.fast-title .faint { font-size: 13px; }
.fast-head .more { margin: -6px -8px 0 0; }
.fast-intention { font-size: 14px; color: var(--soft); line-height: 1.5; white-space: pre-wrap; }
/* "Prayer list" and its info button share a line with the filter. */
.prayer-list-bar .title-info { margin: 0; }
@media (max-width: 560px) {
  .prayer-row-head { padding: 13px 10px 13px 12px; gap: 10px; }
  .prayer-row-body { padding: 0 12px 13px 48px; }
}
.setup-note { max-width: 760px; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--well); color: var(--muted); font-size: 14px; }
.past-list { display: grid; gap: 4px; margin: 6px 0 4px; }
.past-item { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--divider); font-size: 14px; }
.past-item:first-child { border-top: 0; }
.past-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.past-head .more { margin: -6px -8px -6px 0; }
.past-item .faint { font-size: 13px; }

/* A ghost button that has been done ("Prayed today"), in the answered green. */
.btn.is-done { border-color: var(--sage-line); background: var(--sage-bg); color: var(--sage); }
.btn.is-done:hover:not(:disabled) { border-color: var(--sage); color: var(--sage); }
.btn svg, .act svg { flex: none; }
.btn svg { width: 15px; height: 15px; }

/* ---------- Shared small parts ---------- */
/* The "⋯" menu (cave.js::moreMenu): a quiet round button, and a small card of
   actions that opens beneath it, aligned to its right edge. */
.more { position: relative; flex: none; }
.more-btn { width: var(--h-btn-sm); height: var(--h-btn-sm); border-radius: 50%; border: 0; background: transparent; color: var(--faint); display: grid; place-items: center; padding: 0; transition: background-color 0.15s ease, color 0.15s ease; }
.more-btn svg { width: 18px; height: 18px; }
.more-btn:hover, .more-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; padding: 5px; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 32px -8px var(--shadow); animation: rise 0.14s ease both; }
.more-item { text-align: left; border: 0; background: none; color: var(--text); font-size: 14px; padding: 8px 10px; border-radius: 9px; white-space: nowrap; }
.more-item:hover, .more-item:focus-visible { background: var(--hover); outline: none; }
.more-item.danger { color: var(--danger); }

/* This week as dots (cave.js::weekDots): done days filled, today ringed,
   days still to come dashed. Dots that mark a day are buttons. */
.week-dots { display: flex; gap: 6px; }
.wd-col { display: grid; justify-items: center; gap: 3px; }
.wd { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; padding: 0; display: block; }
button.wd { cursor: pointer; transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease; }
button.wd:hover { border-color: var(--sage); }
button.wd:active { transform: scale(0.88); }
.wd.done { background: var(--sage); border-color: var(--sage); }
.wd.today { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--ember-line); }
.wd.future { border-style: dashed; opacity: 0.55; }
.wd-label { font-size: 10.5px; font-weight: 600; color: var(--faint); line-height: 1; }
/* Touch screens get bigger dots to tap. */
@media (pointer: coarse) { .wd { width: 24px; height: 24px; } }

/* Sheet controls: a segmented choice, a hint under it, two fields side by
   side, quick picks, and optional fields folded away. */
.seg-sheet { margin: 0 0 6px; }
.seg-sheet button { font-size: 13px; padding-inline: 6px; }
.seg-hint { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.sheet .field-wrap > .seg-sheet { margin-top: 6px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 12px; }
.sheet select.field, .sheet .field-wrap select { display: block; width: 100%; margin-top: 6px; background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 16px; }
.sheet .field-wrap .field { margin: 6px 0 0; background: var(--ground); }
.quick-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.quick-picks button { min-height: 28px; padding: 3px 11px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--soft); font-size: 12.5px; font-weight: 600; }
.quick-picks button:hover { border-color: var(--ember); color: var(--ember-hi); }
.more-fields { margin: 0 0 14px; border-top: 1px solid var(--divider); padding-top: 10px; }
.more-fields summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted); padding: 4px 0; list-style-position: inside; }
.more-fields summary:hover { color: var(--text); }
.more-fields[open] summary { margin-bottom: 10px; }
/* Short notes in a sheet ("Why it matters", what a fast is for) start small. */
.sheet .field-wrap textarea[rows="2"] { min-height: 4.5rem; }

/* ---------- Saved (web/saved.js) ----------
   An answer shows its opening, fading out, until "Read all" opens the rest. */
.saved-card .badge { text-transform: none; }
.saved-card .entry-actions .more { margin-left: auto; }
.saved-answer { font-size: 15px; line-height: 1.6; color: var(--soft); white-space: pre-wrap; max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.saved-card.is-open .saved-answer { max-height: none; -webkit-mask-image: none; mask-image: none; }
.saved-answer .heading { margin-top: 14px; padding-top: 10px; }

/* ---------- Responsive ---------- */
/* ---------- Refuge (web/refuge.js): a quiet room for every season ----------
   Stepping in settles the page: the cave's title and tabs fade back and a
   soft glow rises from the top. Every colour is a theme token. */
body.in-refuge { background: radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--glow) 60%, var(--ground)) 0%, var(--ground) 75%) fixed, var(--ground); }
body.in-refuge [data-view="cave"] .page-head, body.in-refuge [data-view="cave"] .tabs { opacity: 0.55; transition: opacity 0.4s ease; }
body.in-refuge [data-view="cave"] .page-head:hover, body.in-refuge [data-view="cave"] .tabs:hover, body.in-refuge [data-view="cave"] .tabs:focus-within { opacity: 1; }
.refuge { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.refuge > * { min-width: 0; }
.refuge h2 { letter-spacing: -0.015em; }
.refuge-promise { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.refuge-promise svg { width: 15px; height: 15px; color: var(--sage); flex: none; }

/* The opening screen: a quiet "Private to you", five rooms as tiles (icon
   and name, explained behind the info button), and a way to a person. Talk
   with Aquila is the wide, warm one. Six columns on a wide screen put every
   room on one row; two on a phone make a short block of tiles. */
.refuge-home { display: grid; gap: 12px; }
.refuge-bar { display: flex; align-items: center; gap: 4px; }
.refuge-private { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.refuge-private svg { width: 14px; height: 14px; color: var(--sage); flex: none; }
.refuge-rooms { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.refuge-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 104px; padding: 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.refuge-tile.is-wide { grid-column: span 2; border-color: var(--ember-line); background: radial-gradient(140% 160% at 0% 0%, var(--glow) 0%, var(--card-warm) 70%); }
.refuge-tile:hover { transform: translateY(-1px); border-color: var(--ember-line); box-shadow: 0 12px 26px -18px var(--ember-glow); }
.refuge-tile:active { transform: scale(0.98); }
.refuge-tile:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.tile-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }
.tile-icon svg { width: 18px; height: 18px; }
.refuge-tile.is-wide .tile-icon { background: var(--ember-grad); color: var(--ember-ink); box-shadow: var(--sheen); }
.tile-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.tile-badge { position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--ember-grad); color: var(--ember-ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.refuge-help { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-btn-sm); padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line); background: transparent; color: var(--soft); font-size: 13.5px; font-weight: 500; }
.refuge-help:hover { border-color: var(--sage-line); background: var(--sage-bg); color: var(--text); }
.refuge-help svg { width: 15px; height: 15px; color: var(--sage); flex: none; }

/* Under the rooms: today's habits as chips, and what's been kept */
.refuge-section { display: grid; gap: 10px; }
.refuge-sub { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0; }
.refuge-section .title-info { margin: 0; }
.today-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.today-chip { max-width: 100%; }
.today-chip.is-done { cursor: default; }
.today-chip svg { width: 14px; height: 14px; }
/* A tablet: Talk with Aquila across the top, the other four in one row. */
@media (min-width: 561px) and (max-width: 820px) {
  .refuge-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .refuge-tile.is-wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
}

/* Kept writing and talks, blurred until tapped */
.kept-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.kept { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); transition: opacity 0.4s ease, transform 0.4s ease; }
.kept.is-going { opacity: 0; transform: translateY(-8px); }
.kept-main { flex: 1; min-width: 0; }
.kept-kind { display: block; font-size: 12px; color: var(--faint); margin-bottom: 2px; }
.kept-text { color: var(--text); font-size: 15px; filter: blur(5px); user-select: none; transition: filter 0.25s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-radius: 6px; }
.kept.is-open .kept-text { filter: none; user-select: auto; white-space: pre-wrap; }
.kept-actions { display: flex; gap: 6px; flex: none; }

/* Rooms */
.room { display: grid; gap: 18px; }
.room-head h2 { font-size: 26px; margin: 4px 0 6px; }
.back { background: none; border: 0; color: var(--muted); font-size: 14px; font-weight: 600; padding: 6px 0; display: inline-flex; align-items: center; gap: 6px; }
.back:hover { color: var(--text); }
.back svg { width: 16px; height: 16px; }

/* Write it out: a page that feels like paper, not a form */
.write-body { display: grid; gap: 18px; }
.refuge-page { width: 100%; min-height: 300px; resize: vertical; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); padding: 22px 24px; font-size: 17px; line-height: 1.75; color: var(--text); }
.refuge-page.refuge-page-sm { min-height: 110px; }
.refuge-page:focus { outline: none; border-color: var(--ember-line); box-shadow: 0 0 0 4px var(--ring); }
.lament-step { display: grid; gap: 8px; }
.lament-step label { font-weight: 600; font-size: 16px; }
.lament-step .hint { color: var(--faint); font-size: 14px; margin-top: -4px; }
.release-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.release-row .faint { margin-right: auto; font-size: 14px; }
/* Write it out: the shapes, then A nudge and Focus at the end of the row. */
.write-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.write-tools-end { display: flex; gap: 6px; }
.write-nudge { margin: 0 0 -6px; font-size: 16px; font-style: italic; color: var(--muted); }
/* Focus: the writing room fills the screen, above the bars and below sheets
   and toasts, so "Make it a goal" and its messages still show. */
body.write-focus .write-room { position: fixed; inset: 0; z-index: 55; overflow-y: auto; background: var(--ground); padding: max(20px, env(safe-area-inset-top)) max(20px, calc((100vw - 760px) / 2)) max(24px, env(safe-area-inset-bottom)); animation: appear 0.2s ease both; }
body.write-focus .write-room .back, body.write-focus .write-room .room-head { display: none; }
body.write-focus .write-room .refuge-page { min-height: 60vh; border-color: transparent; background: transparent; box-shadow: none; padding-inline: 0; }
body.write-focus .write-room .refuge-page.refuge-page-sm { min-height: 18vh; }
/* Talk with Aquila: a quiet Listen under each reply, and a message that can be sent again. */
.listen-btn { display: inline-grid; place-items: center; width: var(--h-icon); height: var(--h-icon); margin-top: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.listen-btn svg { width: 17px; height: 17px; }
.listen-btn:hover, .listen-btn[aria-pressed="true"] { color: var(--ember); background: var(--ember-bg); }
.talk-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soft-composer .iconbtn:disabled { opacity: 0.45; cursor: default; }
/* Pebbles: a step added right on the card. */
.step-add { width: 100%; margin-top: 4px; padding: 6px 0 6px 27px; border: 0; border-bottom: 1px dashed var(--line-2); background: transparent; color: var(--text); font-size: 16px; }
.step-add:focus { outline: none; border-bottom-color: var(--ember); }
.step-add::placeholder { color: var(--faint); }
/* Be still: the last seven days as dots above the count. */
.still-week { display: grid; justify-items: center; gap: 8px; }
.releasing { min-height: 260px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); padding: 22px 24px; font-size: 17px; line-height: 1.75; overflow: hidden; }
.releasing span { display: inline-block; white-space: pre; animation: drift 2.6s ease-in forwards; }
@keyframes drift { 0% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(-90px) scale(0.92); filter: blur(6px); color: var(--ember); } }
.released { text-align: center; padding: 52px 24px; border-radius: 30px; background: radial-gradient(100% 100% at 50% 0%, var(--glow) 0%, var(--card-warm) 65%); border: 1px solid var(--ember-line); }
.released h2 { font-size: 26px; margin-bottom: 6px; }
.released .scripture-lg { max-width: 520px; margin: 26px auto 6px; }

/* Talk with Aquila: softer than a study answer, no headings or citations */
.talk-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.talk-actions { display: flex; gap: 8px; }
.soft-thread { display: flex; flex-direction: column; gap: 18px; padding: 4px 0; }
.soft-aq { display: flex; gap: 12px; align-items: flex-start; max-width: 92%; animation: rise 0.3s ease both; }
/* Aquila in Refuge: her wing mark (.avatar-a), a little larger than in a
   study answer, ringed by a soft halo of the theme's glow so she reads as
   present rather than as a badge. */
.refuge-aq { width: 34px; height: 34px; margin-top: 2px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--glow) 75%, transparent), 0 10px 24px -8px var(--ember-glow); }
.refuge-aq.is-listening { animation: aq-breathe 2.4s ease-in-out infinite; }
@keyframes aq-breathe {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 60%, transparent), 0 10px 24px -8px var(--ember-glow); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--glow) 90%, transparent), 0 12px 30px -6px var(--ember-glow); }
}
/* The Talk with Aquila tile shows the same mark on its warm circle. */
.tile-icon svg path[d^="M5 18"] { stroke-width: 2.2; }
.soft-aq .words { background: var(--card-warm); border: 1px solid var(--ember-line); border-radius: 6px 20px 20px 20px; padding: 13px 18px; font-size: 16.5px; line-height: 1.65; min-width: 0; }
.soft-aq .words > * + * { margin-top: 10px; }
.soft-aq .words .verse-ref { display: inline-block; margin-right: 12px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; }
.soft-composer { display: flex; gap: 8px; align-items: flex-end; padding: 6px 6px 6px 20px; border-radius: 26px; border: 1px solid var(--line-2); background: var(--surface); }
.soft-composer textarea { flex: 1; border: 0; background: transparent; resize: none; padding: 10px 0; font-size: 16px; min-height: 44px; max-height: 160px; }
.soft-composer textarea:focus { outline: none; }
.soft-composer:focus-within { border-color: var(--ember-line); box-shadow: 0 0 0 4px var(--ring); }
/* Talk out loud sits quietly beside Send, the only way into the voice call. */
.soft-composer .soft-mic { border: 0; background: transparent; color: var(--muted); }
.soft-composer .soft-mic:hover { background: var(--hover); color: var(--ember); }
.listening { display: flex; gap: 12px; align-items: center; }
.care-card { padding: 6px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--sage-line); display: grid; }
.care-line { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--divider); font-size: 15px; }
.care-line:first-child { border-top: 0; }
.care-line strong { display: block; font-weight: 600; }
.care-line span { display: block; font-size: 13px; color: var(--muted); }
.care-panel { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border-radius: var(--radius-sm); background: var(--sage-bg); border: 1px solid var(--sage-line); font-size: 15px; }

/* Pebbles (refuge.js::pebblesRoom): habits as a list of rows, goals as cards */
.pebbles { display: grid; gap: 22px; }
.pebbles > .list-bar { margin: 0; }
.pebble-section { display: grid; gap: 10px; }
.pebble-section .kicker { margin: 0; }
.pebble-section .row-between { margin: 0; }
.pebble-tally { font-size: 13px; }
.pebbles-empty .pebbles-starts { justify-content: center; margin-top: 16px; }
.pebbles-empty .btn { margin-top: 0; }

/* A habit row: today's check, its name and count, the week, and its menu.
   On a phone the week drops under the name (see the 720px block). */
.habit-list { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; }
.habit-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "check main week more"; gap: 4px 14px; align-items: center; padding: 12px 10px 12px 16px; }
.habit-row + .habit-row { border-top: 1px solid var(--divider); }
.habit-row > .habit-check { grid-area: check; }
.habit-row > .habit-main { grid-area: main; }
.habit-row > .week-dots { grid-area: week; }
.habit-row > .more { grid-area: more; }
.habit-check { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); background: transparent; color: transparent; display: grid; place-items: center; padding: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; }
.habit-check svg { width: 16px; height: 16px; }
button.habit-check:hover { border-color: var(--sage); color: var(--sage-line); }
button.habit-check:active { transform: scale(0.92); }
.habit-row.is-done .habit-check, .habit-row.is-quiet .habit-check { background: var(--sage); border-color: var(--sage); color: var(--surface); }
.habit-row.is-quiet .habit-check { opacity: 0.6; }
.habit-main { display: grid; gap: 1px; min-width: 0; }
.habit-main strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.habit-row.is-done .habit-main strong { color: var(--muted); }
.habit-sub { font-size: 13px; color: var(--faint); }
.habit-sub.is-met { color: var(--sage); font-weight: 500; }

/* A goal card: its title and menu, how far along, and the next thing to do. */
.goal-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.goal-card { gap: 12px; }
.goal-card:hover { transform: none; }
.goal-head { display: flex; align-items: flex-start; gap: 8px; }
.goal-head h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.goal-head .more { margin: -4px -6px 0 0; }
.goal-card .entry-actions { padding-top: 0; }
.goal-card.is-complete { border-color: var(--ember-line); background: radial-gradient(120% 140% at 100% 0%, var(--glow) 0%, var(--surface) 60%); }
.goal-card.is-fulfilled { background: radial-gradient(120% 140% at 100% 0%, var(--sage-bg) 0%, var(--surface) 60%); border-color: var(--sage-line); }
.goal-card.is-aside { opacity: 0.75; }
.goal-progress { display: grid; gap: 8px; }
.goal-card.is-fulfilled .bar span { background: var(--sage); }
.goal-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }
.count-btn { background: none; border: 0; padding: 2px 0; font: inherit; color: inherit; text-decoration: underline dotted var(--line-2); text-underline-offset: 4px; }
.count-btn:hover { color: var(--ember-hi); text-decoration-color: var(--ember); }
/* Minus and plus share one pill, split down the middle. */
.stepper { display: inline-flex; flex: none; border: 1px solid var(--line-2); border-radius: var(--pill); overflow: hidden; }
.stepper button { width: var(--h-btn-sm); height: var(--h-chip); border: 0; background: transparent; color: var(--text); font-size: 17px; font-weight: 500; line-height: 1; }
.stepper button + button { border-left: 1px solid var(--line-2); }
.stepper button:hover:not(:disabled) { background: var(--hover); color: var(--ember-hi); }
.stepper button:disabled { color: var(--faint); cursor: default; }
.due { font-size: 13px; color: var(--muted); }
.due.is-soon { color: var(--ember-hi); font-weight: 500; }
.due.is-late { color: var(--danger); font-weight: 500; }
.steps { display: grid; gap: 2px; }
.step { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; padding: 3px 0; cursor: pointer; }
.step input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--sage); }
.step.done span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* Be still */
/* Be still (web/refuge.js::stillRoom): the choices, then a full-screen
   session. The light is a lit sphere, glowing in the
   theme's ember, and grows and shrinks with the breath over the exact
   seconds of each part, set from the script as a transition duration. */
.still { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 8px 0 40px; }
.still h2 { font-size: 26px; margin: 0; }
.still-hint { font-size: 13px; color: var(--faint); margin: 0; }
.still .mood, .still-session .mood { text-transform: none; }
.still-orb { position: relative; width: 208px; height: 208px; margin: 12px auto 0; border: 0; border-radius: 50%; padding: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.still-orb:focus-visible { outline: 2px solid var(--ember); outline-offset: 8px; }
.still-orb-light {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--surface) 0%, var(--card-warm) 34%, var(--ember-bg) 68%, var(--ember-line) 100%);
  box-shadow: 0 0 70px 4px var(--ember-glow), inset -10px -14px 26px -8px color-mix(in srgb, var(--ember) 24%, transparent), inset 8px 10px 18px -10px var(--shine);
  animation: still-idle 8s ease-in-out infinite; transition: scale 0.25s ease;
}
.still-orb:hover .still-orb-light { scale: 1.04; }
.still-orb:active .still-orb-light { scale: 0.97; }
.still-orb-text { position: relative; display: grid; gap: 2px; }
.still-orb-text strong { font-size: 21px; font-weight: 600; color: var(--text); }
.still-orb-text small { font-size: 13px; color: var(--muted); }
@keyframes still-idle { 0%, 100% { transform: scale(0.93); } 50% { transform: scale(1); } }
.still-options { width: 100%; max-width: 580px; display: grid; gap: 20px; text-align: left; }
.still-field { display: grid; gap: 8px; }
.still-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.still-options .moods, .still-options .seg { margin: 0; }
.still-preview { display: grid; gap: 4px; align-content: center; min-height: 92px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--raised); border: 1px solid var(--line); }
.still-line { display: flex; gap: 12px; align-items: baseline; margin: 0; }
.still-cue { flex: none; width: 28px; font-size: 11.5px; font-weight: 700; color: var(--ember-hi); }
.still-line .scripture { font-size: 18px; line-height: 1.4; }
.still-preview .verse-ref { margin: 4px 0 0 40px; }
.still-switch { margin: 0; font-size: 14px; }
.still-tally { font-size: 13px; color: var(--faint); margin: 0; }

body.still-open { overflow: hidden; }
.still-session {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px));
  background: radial-gradient(80% 60% at 50% 40%, var(--glow) 0%, var(--ground) 72%); color: var(--text);
  animation: appear 0.4s ease both;
}
.still-session:focus { outline: none; }
.still-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 760px; margin: 0 auto; }
.still-ref { font-size: 13px; color: var(--faint); }
.still-top-actions { display: inline-flex; gap: 8px; }
.still-icon-btn { display: grid; place-items: center; width: var(--h-icon); height: var(--h-icon); padding: 0; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.still-icon-btn:hover { color: var(--text); }
.still-icon-btn svg { width: 18px; height: 18px; display: block; }
.still-icon-btn[aria-pressed="true"] { color: var(--ember); border-color: var(--ember-line); background: var(--ember-bg); }
.still-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; overflow-y: auto; }
.still-stage { position: relative; width: min(300px, 74vw, 46vh); aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.still-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.still-ring circle { fill: none; stroke-width: 3; }
.still-ring-track { stroke: var(--line); }
.still-ring-fill { stroke: var(--ember); stroke-linecap: round; transition: stroke-dashoffset 0.25s linear, stroke 0.3s ease; }
.still-session.is-paused .still-ring-fill { stroke: var(--faint); }
.still-light {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--surface) 0%, var(--card-warm) 34%, var(--ember-bg) 68%, var(--ember-line) 100%);
  box-shadow: 0 0 90px 10px var(--ember-glow), inset -12px -16px 30px -8px color-mix(in srgb, var(--ember) 26%, transparent), inset 8px 10px 20px -10px var(--shine);
  transform: scale(0.55); transition: transform 4s cubic-bezier(0.45, 0, 0.55, 1);
}
.still-center { position: relative; display: grid; gap: 2px; }
.still-phase { font-size: 22px; font-weight: 600; margin: 0; }
.still-count { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; margin: 0; }
.still-words { font-size: clamp(22px, 5vw, 32px); line-height: 1.35; max-width: 600px; min-height: 2.7em; margin: 0; opacity: 0; transition: opacity 0.5s ease; }
.still-words.is-shown { opacity: 1; }
.still-words:empty { display: none; }
.still-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.still-left { min-width: 72px; font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.still-after { display: grid; gap: 12px; justify-items: center; max-width: 540px; }
.still-after h2 { font-size: 26px; margin: 8px 0 0; }
.still-after .muted { margin: 0; }
.still-after-light { position: relative; width: 96px; height: 96px; }
.still-verse { margin: 6px 0 0; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.still-verse .scripture { font-size: 18px; line-height: 1.5; margin: 0 0 4px; }
.still-verse .verse-ref { margin: 0; }
.still-ask { font-weight: 600; margin: 10px 0 0; }
.still-feel { justify-content: center; margin: 0; }
.still-reply { display: grid; gap: 12px; justify-items: center; }
.still-reply p { margin: 0; }
.still-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
/* With reduced motion the light doesn't grow; it brightens and dims instead. */
@media (prefers-reduced-motion: reduce) {
  .still-orb-light { animation: none; }
  .still-light { transform: none !important; transition: opacity 1.2s ease !important; opacity: 0.55; }
  .still-session[data-phase="in"] .still-light, .still-session[data-phase="hold"] .still-light { opacity: 1; }
}

/* Amens: Refuge's wall, and its card on the home screen */
.wall-section { display: grid; gap: 12px; }
.wall-section .kicker { margin: 6px 0 0; }
.burden { display: grid; gap: 12px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); animation: rise 0.25s ease both; }
.burden-who { font-size: 13px; color: var(--faint); display: flex; gap: 8px; align-items: center; }
.burden-who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember-glow); }
.burden-rejoice .burden-who::before { background: var(--sage); box-shadow: none; }
.burden-text { font-size: 16.5px; line-height: 1.6; white-space: pre-wrap; }
.burden-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.burden-actions .report { margin-left: auto; background: none; border: 0; color: var(--faint); font-size: 13px; padding: 6px 4px; }
.burden-actions .report:hover { color: var(--danger); }
.burden.is-mine { background: radial-gradient(120% 140% at 100% 0%, var(--glow) 0%, var(--card-warm) 55%); border-color: var(--ember-line); }
/* Saying amen (refuge.js::REACTIONS): "Say a prayer" or "Rejoice with them",
   which turns to Amen once said, with the people who said it underneath. */
.amen-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: var(--pill); background: var(--ember-grad); color: var(--ember-ink); font: 600 14px/1.2 var(--body); cursor: pointer; box-shadow: 0 8px 22px -10px var(--ember-glow); transition: transform 0.15s ease, filter 0.15s ease, background 0.3s ease, color 0.3s ease; }
.amen-btn:hover:not(:disabled) { filter: brightness(1.06); }
.amen-btn:active:not(:disabled) { transform: scale(0.96); }
.amen-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.amen-btn svg { width: 17px; height: 17px; flex: none; }
.amen-btn.is-done { background: var(--sage-bg); color: var(--sage); box-shadow: inset 0 0 0 1px var(--sage-line); cursor: default; }
.amen-btn.is-saying { animation: amen-said 0.7s ease; }
.amen-btn.is-saying svg { animation: amen-check 0.45s ease both; }
@keyframes amen-said { 0% { transform: scale(0.94); box-shadow: 0 0 0 0 var(--sage-line); } 45% { transform: scale(1.06); box-shadow: 0 0 0 10px transparent; } 100% { transform: scale(1); box-shadow: inset 0 0 0 1px var(--sage-line); } }
@keyframes amen-check { from { opacity: 0; transform: scale(0.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.amen-people { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin: 0; }
.amen-faces { display: inline-flex; flex: none; }
.amen-faces:empty { display: none; }
.amen-face { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); margin-left: -7px; background: var(--ember-bg); }
.amen-face:first-child { margin-left: 0; }
.amen-face-1 { background: var(--ember-grad); }
.amen-face-2 { background: var(--sage); }
.amen-face-3 { background: var(--ember-line); }
/* What the person who shared sees come back. */
.amen-summary { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.amen-summary.has-amens { background: var(--sage-bg); border-color: var(--sage-line); }
.amen-summary-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember); }
.amen-summary.has-amens .amen-summary-icon { background: var(--surface); color: var(--sage); }
.amen-summary-icon svg { width: 21px; height: 21px; display: block; }
.amen-summary-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.amen-summary-text strong { font-size: 16px; font-weight: 600; color: var(--text); }
.amen-summary-text span { font-size: 13.5px; color: var(--muted); }
.amen-summary .amen-face { border-color: var(--sage-bg); }
@media (prefers-reduced-motion: reduce) { .amen-btn.is-saying, .amen-btn.is-saying svg { animation: none; } }
.encouragements { display: grid; gap: 6px; }
.encouragement { font-size: 15px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.encouragement .scripture { font-size: 16px; }
/* The Amens share box (web/refuge.js::shareBox): a compact composer, one
   line until it's tapped, then the two kinds and the share button open
   beneath what's written. */
.amens-composer { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 4px 10px 4px 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.amens-composer:hover { border-color: var(--line-2); }
.amens-composer:focus-within { border-color: var(--ember-line); box-shadow: 0 0 0 3px var(--ring); }
.amens-composer-row { display: flex; align-items: flex-start; gap: 10px; }
.amens-composer-icon { flex: none; color: var(--ember); padding-top: 11px; }
.amens-composer-icon svg { width: 18px; height: 18px; display: block; }
.amens-composer-text { flex: 1; min-width: 0; min-height: 42px; border: 0; background: transparent; resize: none; overflow: hidden; color: var(--text); font: 16px/1.5 var(--body); padding: 9px 0; outline: none; }
.amens-composer-text::placeholder { color: var(--faint); }
.amens-composer.is-open .amens-composer-text { min-height: 76px; }
.amens-composer-more { display: none; padding: 0 0 8px; }
.amens-composer.is-open .amens-composer-more { display: block; animation: rise 0.18s ease both; }
.amens-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--divider); padding-top: 10px; }
.amens-composer-kinds { margin: 0; }
.amens-composer-kinds button { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 12px; }
.amens-composer-kinds svg { width: 15px; height: 15px; flex: none; }
.amens-composer-send { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.amens-composer-count { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.amens-composer-count.is-low { color: var(--danger); }
.amens-composer-note { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
.amens-composer .form-msg:empty { display: none; }

/* Info buttons (web/cave.js::info): a small (i) beside a title, and the
   popover it opens, so explanations are there to find rather than to wade
   through. --arrow-x points the popover's arrow back at its button. */
/* The heading runs inline so the button sits just after its last word, even
   when a long title wraps. */
.title-info { margin: 0 0 10px; }
.title-info > h1, .title-info > h2, .title-info > h3 { display: inline; margin: 0; }
.page-head .title-info, .room-head .title-info, .card-head .title-info, .ask-empty .title-info, .still .title-info { margin: 0; }
.info-btn { display: inline-grid; place-items: center; vertical-align: middle; width: var(--h-icon); height: var(--h-icon); margin: -8px 0 -6px 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); transition: color 0.15s ease, background 0.15s ease; }
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--ember); background: var(--hover); }
.info-btn svg { width: 18px; height: 18px; display: block; }
.page-title + .info-btn { margin-top: -6px; }
.page-title + .info-btn svg { width: 20px; height: 20px; }
.info-pop { position: fixed; z-index: 70; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--soft); font-size: 14px; line-height: 1.5; box-shadow: 0 16px 36px -8px var(--shadow); animation: rise 0.15s ease both; }
.info-pop p { margin: 0; }
.info-pop p + p { margin-top: 8px; }
.info-pop::before { content: ""; position: absolute; top: -6px; left: var(--arrow-x, 50%); width: 10px; height: 10px; background: var(--surface); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
.info-pop.is-above::before { top: auto; bottom: -6px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.info-more { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--ember); font-size: 14px; font-weight: 600; }
.info-more:hover { color: var(--ember-hi); }
.how-steps { list-style: none; counter-reset: how; padding: 0; margin: 0 0 8px; display: grid; gap: 14px; }
.how-steps li { counter-increment: how; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
.how-steps li::before { content: counter(how); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ember-bg); color: var(--ember-hi); font-size: 13px; font-weight: 700; }
.how-steps strong { font-size: 15px; font-weight: 600; }
.how-steps span { font-size: 14px; color: var(--muted); }
/* The Amens wall (web/refuge.js::amensRoom). A line and a bar for how much
   of the wall this person has stood with, three tabs (To pray for, Prayed,
   Yours), and cards: ember for a prayer request, sage for good news. */
.amens-pulse { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--ember-line); background: radial-gradient(120% 160% at 0% 0%, var(--glow) 0%, var(--card-warm) 60%, var(--surface) 100%); }
.amens-pulse[hidden] { display: none; }
.amens-pulse.is-done { border-color: var(--sage-line); background: radial-gradient(120% 160% at 0% 0%, var(--sage-bg) 0%, var(--surface) 75%); }
.amens-pulse-icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ember-grad); color: var(--ember-ink); box-shadow: var(--sheen), 0 8px 20px -10px var(--ember-glow); }
.amens-pulse.is-done .amens-pulse-icon { background: var(--sage); color: var(--surface); box-shadow: none; }
.amens-pulse-icon svg { width: 21px; height: 21px; }
.amens-pulse-text { display: grid; gap: 1px; min-width: 0; }
.amens-pulse-text strong { font-size: 16px; font-weight: 600; }
.amens-pulse-text span { font-size: 13.5px; color: var(--muted); }
.amens-pulse-bar { height: 6px; border-radius: var(--pill); background: var(--well); overflow: hidden; }
.amens-pulse-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ember-grad); transition: width 0.5s ease; }
.amens-pulse.is-done .amens-pulse-bar span { background: var(--sage); }
.amens-tabs { margin: 0; }
.amens-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.amens-tab-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember-hi); font-size: 11.5px; font-weight: 700; line-height: 20px; font-variant-numeric: tabular-nums; }
.amens-tab-count:empty { display: none; }
.amens-panel { display: grid; gap: 12px; }
.amens-panel[hidden] { display: none; }

/* To pray for: one card per post, read like a letter, its ask at the foot. */
.amen-stream { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.amen-stream .amen-empty { grid-column: 1 / -1; }
.amen-card { position: relative; display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: radial-gradient(130% 90% at 0% 0%, var(--glow) 0%, var(--surface) 55%); box-shadow: 0 14px 34px -28px var(--shadow); overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, height 0.4s ease, opacity 0.3s ease, padding 0.4s ease; }
.amen-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ember-grad); }
.amen-card-rejoice { background: radial-gradient(130% 90% at 0% 0%, var(--sage-bg) 0%, var(--surface) 55%); }
.amen-card-rejoice::before { background: var(--sage); }
.amen-card.is-carried { border-color: var(--sage-line); box-shadow: 0 0 0 3px var(--sage-bg), 0 14px 34px -26px var(--shadow); }
.amen-card.is-leaving { opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
.amen-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.amen-kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: var(--pill); background: var(--ember-bg); color: var(--ember-hi); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.amen-kind-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); }
.amen-kind-icon svg { width: 13px; height: 13px; }
.amen-kind-rejoice { background: var(--sage-bg); color: var(--sage); }
.amen-when { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.amen-card-head .more { margin-left: auto; }
.amen-card-text { margin: 0; font-size: 17px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.amen-card .answered-note { margin: 0; }
.amen-card-foot { display: grid; gap: 10px; }
.amen-card-foot .amen-people { font-size: 13.5px; }
.amen-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.amen-card-rejoice .amen-btn:not(.is-done) { background: var(--sage); color: var(--surface); box-shadow: 0 8px 22px -12px var(--sage); }
.amen-words { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-btn-sm); padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); color: var(--soft); font: 500 13.5px/1 var(--body); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.amen-words svg { width: 15px; height: 15px; flex: none; }
.amen-words:hover:not(:disabled) { border-color: var(--ember-line); color: var(--text); }
.amen-words.is-done { border-color: transparent; background: none; color: var(--sage); cursor: default; }

/* Prayed: quieter rows with a tick; a tap on the words shows all of them. */
.amen-done-list { display: grid; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.amen-done-list .amen-empty { border: 0; border-radius: 0; }
.amen-done { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px; }
.amen-done + .amen-done { border-top: 1px solid var(--divider); }
.amen-done-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sage-bg); color: var(--sage); }
.amen-done-mark svg { width: 15px; height: 15px; }
.amen-done-body { display: grid; gap: 4px; min-width: 0; }
.amen-done-meta { margin: 0; font-size: 12.5px; color: var(--faint); }
.amen-done-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft); cursor: pointer; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.amen-done-text.is-open { display: block; white-space: pre-wrap; }
.amen-done-people { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13px; color: var(--sage); }
.amen-done-people .amen-face { width: 18px; height: 18px; }
.amen-done .amen-words { align-self: center; }

/* Yours: each post with where it stands and what came back. */
.amen-mine-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.amen-mine { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.amen-mine:hover { border-color: var(--ember-line); transform: translateY(-1px); box-shadow: 0 12px 26px -20px var(--ember-glow); }
.amen-mine:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.amen-mine-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.amen-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.amen-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.amen-status.is-shared { color: var(--ember-hi); }
.amen-status.is-shared::before { background: var(--ember); box-shadow: 0 0 0 3px var(--ember-bg); }
.amen-status.is-answered { color: var(--sage); }
.amen-status.is-answered::before { background: var(--sage); }
.amen-status.is-waiting::before { background: var(--ember-line); animation: waiting-pulse 2.4s ease-in-out infinite; }
.amen-mine-text { font-size: 15px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.amen-mine-back { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.amen-mine-back.has-amens { color: var(--sage); font-weight: 500; }
.amen-mine-stat { display: inline-flex; align-items: center; gap: 5px; }
.amen-mine-stat svg { width: 14px; height: 14px; flex: none; }
.amen-sheet .burden { padding: 0; border: 0; background: none; animation: none; }

/* An empty view: an icon, a line, and what will happen. */
.amen-empty { display: grid; justify-items: center; gap: 4px; padding: 30px 20px; border-radius: var(--radius); border: 1px dashed var(--line-2); text-align: center; }
.amen-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }
.amen-empty-icon svg { width: 22px; height: 22px; }
.amen-empty strong { font-size: 16px; font-weight: 600; }
.amen-empty span:last-child { max-width: 360px; font-size: 14px; color: var(--muted); }
@keyframes waiting-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ring); } 50% { box-shadow: 0 0 0 4px var(--ring); } }
@media (prefers-reduced-motion: reduce) { .amen-status.is-waiting::before { animation: none; } .amens-pulse-bar span { transition: none; } }
@media (max-width: 560px) {
  .amen-card { padding: 16px 14px 14px; }
  .amen-card-text { font-size: 16px; }
  .amen-card-actions { justify-content: stretch; }
  .amen-card-actions .amen-btn { flex: 1; justify-content: center; }
  .amen-done { grid-template-columns: auto minmax(0, 1fr); }
  .amen-done .amen-words { grid-column: 2; justify-self: start; }
}
.choice-list { display: grid; gap: 8px; margin: 6px 0 16px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.choice:has(input:checked) { border-color: var(--ember); background: var(--ember-bg); }
.choice input { margin-top: 4px; accent-color: var(--ember); }

/* Someone to talk to */
.help-card { display: grid; gap: 14px; }
.help-card.urgent { border-color: var(--sage-line); background: radial-gradient(120% 140% at 0% 0%, var(--sage-bg) 0%, var(--surface) 60%); }
.help-line { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--divider); }
.help-line:first-child { border-top: 0; }
.help-line strong { display: block; font-weight: 600; }
.help-line span { font-size: 14px; color: var(--muted); }
.say-this { font-size: 16px; line-height: 1.6; padding: 14px 18px; border-left: 3px solid var(--ember); background: var(--well); border-radius: 0 14px 14px 0; }


/* The admin desk */
.desk-note { font-size: 14px; color: var(--soft); padding: 8px 12px; border-radius: 12px; background: var(--well); }
.desk-reports { font-size: 14px; padding: 10px 14px; border-radius: 12px; background: var(--ember-bg); border: 1px solid var(--ember-line); }
.desk-reports strong { display: block; font-weight: 600; margin-bottom: 4px; }
.desk-reports p + p { margin-top: 4px; }
.desk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin: 0 0 18px; }
.desk-stat { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; transition: border-color 0.15s ease; }
.desk-stat strong { font-size: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.desk-stat:hover { border-color: var(--ember-line); }
.desk-stat.urgent { border-color: var(--danger); }
.desk-stat.urgent strong { color: var(--danger); }
.desk-list { display: grid; gap: 12px; }
.desk-card .badge { text-transform: none; }
.desk-card.is-urgent { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.badge.urgent { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.desk-trail summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.desk-trail ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--divider); display: grid; gap: 8px; font-size: 13px; }
.desk-trail li { display: grid; gap: 2px; }
.desk-trail time { color: var(--faint); }
.desk-trail li p { color: var(--soft); }
.desk-log { list-style: none; margin: 0; padding: 0; display: grid; }
.desk-log-row { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--divider); font-size: 14px; }
.desk-log-row:first-child { border-top: 0; }
.desk-log-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.desk-log-head .faint { font-size: 13px; }
.desk-log-note { color: var(--soft); }
.desk-log-post { color: var(--muted); font-size: 13px; }
.desk-more { justify-self: center; margin-top: 12px; }

/* Past conversations with Aquila: open, or rename and delete */
.rail-row { position: relative; }
.rail-row .rail-item { padding-right: 38px; }
.rail-more { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--faint); display: grid; place-items: center; opacity: 0; transition: opacity 0.15s ease; }
.rail-more svg { width: 16px; height: 16px; }
.rail-row:hover .rail-more, .rail-row:focus-within .rail-more, .conv-list .rail-more { opacity: 1; }
.rail-more:hover { background: var(--hover); color: var(--text); }
@media (hover: none) { .rail-more { opacity: 1; } }
.danger-text { color: var(--danger); }
/* Refuge's badges are short sentences ("Waiting to be read"), so they keep sentence case. */
.refuge .badge { text-transform: none; }
#deskPanel .refuge { margin: 0; }

@media (max-width: 980px) {
  .rail { display: none; }
  body.signed-in .ask-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 32px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .appnav { display: none; }
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .topbar-inner { height: 56px; gap: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hide-sm { display: none !important; }
  .page { padding-top: 20px; padding-bottom: 40px; }
  .card { padding: 16px; }
  .entry { padding: 16px; }
  /* All five cave tabs share the width, so none of them hides off screen. */
  .tabs { width: 100%; margin-bottom: 18px; }
  .tabs button { flex: 1 1 auto; padding: 5px 6px; font-size: 13px; }
  /* Sheets rise from the bottom edge, where a thumb already is. */
  .sheet-overlay { align-items: flex-end; padding: 0; }
  .sheet {
    max-width: none; max-height: 92dvh; border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 22px max(18px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    animation: sheet-up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .name-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .name-band .arch { width: 56px; height: auto; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .story { padding: 24px 16px; gap: 20px; border-right: 0; border-bottom: 1px solid var(--divider); }
  .story svg.arch { width: 72px; height: auto; }
  .story .muted { display: none; }
  .formside { padding: 32px 16px 48px; align-items: flex-start; }
  .page-head { margin-bottom: 18px; }
  .ask-empty { padding-top: 16px; }
  .answer { font-size: 16.5px; }
  /* The tabbar shows for guests too (Bible, Aquila, Map), so these no longer
     wait on body.signed-in. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* A frosted bar, always 60px above the safe area (the composer, the verse
     bar and the graph are placed against that height). */
  .tabbar {
    display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    min-height: calc(60px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--divider);
    padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  .tabbar a, .tabbar button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; font-size: 11px; line-height: 1.2; font-weight: 500; color: var(--muted); text-decoration: none; background: none; border: 0; }
  /* Each icon sits in a pill that fills in for the tab you're on. */
  .tabbar svg { width: 52px; height: 28px; padding: 4px 15px; border-radius: var(--pill); transition: background-color 0.2s ease, color 0.2s ease; }
  .tabbar [aria-current="page"] { color: var(--ember-hi); font-weight: 600; }
  .tabbar [aria-current="page"] svg { background: var(--nav-active); color: var(--ember); }
  .composer { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
  /* Aquila fills exactly the space between the 57px top bar and the tab bar,
     so an empty conversation doesn't scroll into blank space. */
  .ask-layout { min-height: calc(100dvh - 57px - 60px - env(safe-area-inset-bottom, 0px)); }
  .callbar { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  .call-transcript { bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
  .reader-bar { top: 56px; }
  .verse-bar { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); left: 8px; right: 8px; transform: none; width: auto; }
  .verse-bar-actions .act span { display: none; }
  .verse-bar-actions .act { padding: 6px 8px; border-color: transparent; }
  .verse-bar { padding-left: 14px; }
  .chapter-text { font-size: 19px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .graph-search { margin-left: 0; width: 100%; order: 3; }
  .graph-search input { flex: 1; width: auto; }
  .graph-top .graph-sub, .graph-hint { display: none; }
  /* Phones keep the line key (and the credit) but drop the colour key. */
  .graph-legend > span { display: none; }
  .graph-legend { padding: 6px 10px; }
  .graph-kinds { border-top: 0; padding-top: 0; }
  .graph-panel { top: auto; bottom: 16px; max-height: 48%; }
  /* The graph stops above the tab bar so the tabs stay in reach. The bar is
     hidden on the welcome and sign-in screens, and then the graph fills the
     screen as before. */
  #tabbar:not([hidden]) ~ .graph-overlay { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body:has(> .graph-overlay) .tabbar { z-index: 51; }
  .graph-starter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg-me { max-width: 92%; }
  .reader-notes-link span, .reader-saved-link span { display: none; }
  .reader-notes-link, .reader-saved-link { padding-left: 8px; padding-right: 8px; }
  .reader-bar-inner { gap: 4px; }
  /* Two tiles a row, Talk with Aquila across the top as a short wide one. */
  .refuge-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .refuge-tile { min-height: 88px; padding: 12px; gap: 12px; }
  .refuge-tile.is-wide { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
  /* A secondary action shows its icon alone, so a card's actions fit one line. */
  /* Prayer and fasting stack; a habit's week drops under its name. */
  .habit-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "check main more" ". week week"; padding: 12px 6px 12px 12px; row-gap: 10px; }
  .habit-row > .week-dots { justify-content: space-between; padding-right: 10px; }
  .kept { flex-wrap: wrap; }
  .kept-actions { width: 100%; justify-content: flex-end; }
}
/* ---------- Sermon notes (web/sermons.js) ---------- */
/* The cave's Sermons tab: the list beside the open note, which is a page of
   blocks, and below it what the note connects to. The read-only page a
   shared link opens (#sermon/<token>) reuses the block styles. */
.ref-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ref-chips:empty { display: none; }
.ref-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--pill); border: 1px solid var(--ember-line); background: var(--ember-bg); color: var(--ember-hi); font-size: 13px; font-weight: 600; text-decoration: none; }
.ref-chip:hover { border-color: var(--ember); color: var(--ember-hi); }
.ref-chip svg { width: 13px; height: 13px; flex: none; }

.sermons { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
/* Before a note is picked the list stands alone, its notes laid out as cards. */
.sermons.is-list { grid-template-columns: minmax(0, 1fr); }
.sermons.is-list .sermon-main { display: none; }
.sermons.is-list .sermon-list { position: static; max-height: none; }
.sermons.is-list .sermon-items { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.sermons.is-list .sermon-item { border-color: var(--line); background: var(--surface); padding: 14px 16px; }
.sermons.is-list .sermon-item:hover { border-color: var(--ember-line); background: var(--surface); }
.sermon-back { justify-self: start; }
/* Scrolled to on a phone; the margin keeps them clear of the sticky header. */
.sermons, .sermon-main { scroll-margin-top: 72px; }
.sermon-back svg { width: 16px; height: 16px; }
.sermon-list { padding: 12px; display: grid; gap: 10px; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; min-width: 0; }
.sermon-search { margin: 0; padding: 9px 14px; font-size: 14px; border-radius: var(--pill); background: var(--well); }
.sermon-items { display: grid; gap: 4px; }
.sermon-item { display: grid; gap: 3px; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; color: var(--text); }
.sermon-item:hover { background: var(--hover); }
.sermon-item[aria-current="true"] { background: var(--card-warm); border-color: var(--ember-line); }
.sermon-item strong { font-size: 15px; line-height: 1.35; }
.sermon-item > span { font-size: 13px; color: var(--muted); }
.sermon-item-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sermon-item-foot .verse-ref { font-size: 13px; }

.sermon-main { display: grid; gap: 16px; min-width: 0; }
.sermon-editor { display: grid; gap: 16px; min-width: 0; background: radial-gradient(130% 80% at 100% 0%, var(--glow) 0%, var(--surface) 40%); border-color: var(--ember-line); }
.sermon-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sermon-saved { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--sage); }
.sermon-saved svg { width: 14px; height: 14px; }
.sermon-saved.is-error { color: var(--danger); }
.sermon-title { width: 100%; border: 0; background: none; padding: 0; font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); }
.sermon-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; }
.sermon-meta-field { display: grid; gap: 2px; font-size: 12px; font-weight: 600; color: var(--faint); }
.sermon-meta-input { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 4px 0 6px; font-size: 15px; font-weight: 500; color: var(--text); }
.sermon-meta-input:focus { border-bottom-color: var(--ember); }
.sermon-editor input, .sermon-editor textarea { font-family: inherit; }
.sermon-editor input:focus, .sermon-editor textarea:focus { outline: none; }
.sermon-editor input:focus-visible, .sermon-editor textarea:focus-visible { box-shadow: 0 0 0 3px var(--ring); border-radius: 8px; }
.sermon-editor input::placeholder, .sermon-editor textarea::placeholder { color: var(--faint); }

.sermon-blocks { display: grid; gap: 12px; }
.sermon-block { position: relative; display: grid; gap: 8px; animation: rise 0.2s ease both; }
.sermon-tools { position: absolute; top: -6px; right: 0; z-index: 1; display: flex; gap: 2px; padding: 2px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); opacity: 0; transition: opacity 0.15s ease; }
/* Shown on hover, or when tabbed into, but not just because the text is
   focused: while typing it would sit over the end of the first line. */
.sermon-block:hover .sermon-tools, .sermon-tools:focus-within { opacity: 1; }
@media (hover: none) { .sermon-tools { position: static; opacity: 1; justify-self: end; } }
.sermon-tools button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; }
.sermon-tools button:hover { background: var(--hover); color: var(--text); }
.sermon-tools svg { width: 15px; height: 15px; }
.sermon-text, .sermon-heading, .sermon-quote-text { width: 100%; border: 0; background: none; resize: none; overflow: hidden; padding: 4px 0; color: var(--soft); font-size: 16.5px; line-height: 1.7; }
.sermon-heading { font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--text); padding-right: 100px; }
.sermon-verse { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--card-warm); border: 1px solid var(--ember-line); }
.sermon-verse .scripture { font-size: 18px; }
.sermon-verse .muted { font-size: 14px; }
.sermon-verse-ref { width: 16ch; max-width: 100%; border: 0; border-bottom: 1px dashed var(--ember-line); background: none; padding: 0 0 2px; color: var(--ember); font-size: 14px; font-weight: 600; }
.sermon-photo { display: grid; gap: 6px; margin: 0; }
.sermon-photo img { display: block; width: 100%; max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.sermon-caption { border: 0; background: none; padding: 2px 0; font-size: 14px; color: var(--muted); }
.sermon-drop { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm); background: var(--well); color: var(--muted); font-size: 14px; text-align: center; cursor: pointer; }
.sermon-drop svg { width: 22px; height: 22px; display: block; }
.sermon-drop strong { color: var(--text); }
.sermon-drop.is-over { border-color: var(--ember); color: var(--ember-hi); }
.sermon-quote { margin: 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--ember); display: grid; gap: 2px; }
.sermon-quote-text { font-size: 18px; font-weight: 600; line-height: 1.45; color: var(--text); padding-right: 100px; }
.sermon-quote-who { border: 0; background: none; padding: 0; font-size: 13px; color: var(--faint); }
@media (hover: none) { .sermon-heading, .sermon-quote-text { padding-right: 0; } }
.sermon-todo { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sage-bg); border: 1px solid var(--sage-line); }
.sermon-todo .kicker { margin: 0; color: var(--sage); }
.sermon-todo-rows { display: grid; gap: 2px; }
.sermon-todo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.sermon-to-prayers { margin-top: 2px; }
.sermon-todo-row input[type="checkbox"] { width: 17px; height: 17px; margin: 6px 0 0; accent-color: var(--sage); }
.sermon-todo-text { min-width: 0; width: 100%; border: 0; background: none; resize: none; overflow: hidden; padding: 4px 0; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.sermon-todo-row.is-done .sermon-todo-text { text-decoration: line-through; color: var(--muted); }
.sermon-to-prayers { border: 0; background: none; padding: 4px 8px; border-radius: var(--pill); font-size: 12px; font-weight: 600; color: var(--sage); white-space: nowrap; text-decoration: none; }
.sermon-to-prayers:hover { background: var(--surface); }
.sermon-to-prayers.is-done { color: var(--faint); }
.sermon-add-step { justify-self: start; border: 0; background: none; padding: 2px 0; font-size: 13px; font-weight: 600; color: var(--sage); }
.sermon-link { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--well); border: 1px solid var(--line); }
.sermon-link-icon svg { width: 18px; height: 18px; display: block; color: var(--ember); }
.sermon-link-fields { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sermon-link-label { border: 0; background: none; padding: 2px 0; font-size: 15px; font-weight: 600; color: var(--text); }
.sermon-link-url { border: 0; background: none; padding: 2px 0; font-size: 13px; color: var(--muted); }
.sermon-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.sermon-add .kicker { margin: 0 4px 0 0; }
.sermon-add button { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--soft); }
.sermon-add button:hover { border-color: var(--ember); color: var(--ember-hi); }
.sermon-add svg { width: 16px; height: 16px; }

.sermon-connected { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.sermon-panel { display: grid; gap: 10px; padding: 20px; min-width: 0; }
.sermon-panel .section-title { margin: 0; font-size: 16px; }
.sermon-panel .linkish { justify-self: start; font-size: 14px; }
.sermon-actions { display: grid; gap: 8px; }
.sermon-actions .btn { justify-content: flex-start; white-space: normal; text-align: left; }
.sermon-actions svg { width: 16px; height: 16px; flex: none; }
.sermon-linked { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--well); color: var(--soft); font-size: 14px; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
.sermon-linked:hover { border-color: var(--ember-line); color: var(--text); }
.sermon-linked .faint { font-size: 12px; font-weight: 600; }
.sermon-empty { display: grid; justify-items: start; gap: 10px; max-width: 580px; }
.sermon-empty-icon svg { width: 28px; height: 28px; display: block; color: var(--ember); }
.sermon-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sermon-format { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--well); color: var(--text); text-align: left; }
.sermon-format:hover:not(:disabled) { border-color: var(--ember); }
.sermon-format span { font-size: 12.5px; color: var(--muted); }

.sermon-read { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.sermon-read .kicker { margin: 0; }
.sermon-read-blocks { display: grid; gap: 16px; margin-top: 8px; }
.sermon-read-block { display: grid; gap: 8px; }
.sermon-read-text { font-size: 17px; line-height: 1.75; color: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.sermon-read-heading { font-size: 20px; font-weight: 700; margin-top: 6px; }
.sermon-read-quote { font-size: 18px; font-weight: 600; line-height: 1.45; }
.sermon-read-caption { font-size: 14px; color: var(--muted); }
.sermon-read-step { display: flex; gap: 8px; align-items: center; font-size: 15.5px; min-height: 24px; }
.sermon-read-step svg { width: 16px; height: 16px; flex: none; color: var(--sage); }
.sermon-read-step.is-done span { text-decoration: line-through; color: var(--muted); }
.sermon-read-foot { display: grid; gap: 10px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .sermons { grid-template-columns: minmax(0, 1fr); }
  .sermon-list { position: static; max-height: none; }
  /* On a phone an open note takes the list's place; All sermons goes back. */
  .sermons:not(.is-list) .sermon-list { display: none; }
  /* The list stacks top to bottom, one sermon a row, never a sideways carousel. */
  .sermons.is-list .sermon-items { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   Support Adullam (web/support.js): the page, the home card, the welcome
   band, and the marks a friend of the cave carries.
   --------------------------------------------------------------------- */
.support-options { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; max-width: 880px; }
.support-option { display: flex; flex-direction: column; }
.support-option-title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.support-option > p { margin: 0 0 14px; }
.support-gifts { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.support-gifts li { position: relative; padding-left: 22px; color: var(--soft); font-size: 15px; }
.support-gifts li::before { content: ""; position: absolute; left: 3px; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px var(--ember-bg); }
.support-swatches { display: flex; gap: 8px; margin: 0 0 20px; }
.support-swatches .swatch { display: inline-block; }
.support-option-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.support-thanks { color: var(--sage); font-weight: 600; margin: 0; }
.support-note { font-size: 14px; margin: 0; }
.support-small { font-size: 14px; margin: 18px 0 0; max-width: 620px; }
.support-verse { margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--divider); max-width: 620px; }
.support-verse p { font-size: 18px; margin: 0 0 8px; color: var(--soft); }
.farewell-support { margin: 26px 0 0; font-size: 14px; }

/* The account menu's way in, and the tag a friend of the cave sees there */
.menu .menu-support { display: flex; align-items: center; gap: 8px; color: var(--ember-hi); }
.menu .menu-support svg { width: 16px; height: 16px; flex: none; }
.menu-head .friend-tag { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: var(--pill); font: normal 600 12px/1.5 var(--body); color: var(--ember-hi); background: var(--ember-bg); border: 1px solid var(--ember-line); }

/* A small ember on the account chip of a friend of the cave */
.me-avatar { position: relative; }
.me.supporter .me-avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--ember-hi), var(--ember)); box-shadow: 0 0 0 2px var(--surface); }

/* Supporter themes in Settings: marked with an ember, softer until unlocked */
.theme-friend { margin-left: auto; display: inline-flex; color: var(--ember); }
.theme-friend svg { width: 13px; height: 13px; fill: currentColor; }
.theme-option.locked { color: var(--muted); }
.theme-option.locked .swatch { opacity: 0.7; }

@media (max-width: 720px) {
  .support-options { grid-template-columns: minmax(0, 1fr); }
}

/* Ways to give (web/support.js), on the Support page and the desk's Giving
   tab: a round mark in the theme's colours (never a company's logo), the
   name and handle, then Copy and Give. */
.give-list { list-style: none; margin: 0; padding: 0; display: grid; }
.give-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--divider); }
.give-row:first-child { border-top: 0; padding-top: 4px; }
.give-row.is-off { opacity: 0.6; }
.give-mark { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: var(--raised); color: var(--soft); }
.give-mark-paypal, .give-mark-card { background: var(--hl-blue); color: var(--text); }
.give-mark-venmo { background: var(--ember-bg); color: var(--ember-hi); }
.give-mark-cashapp { background: var(--sage-bg); color: var(--sage); }
.give-mark-zelle { background: var(--hl-rose); color: var(--text); }
.give-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.give-row-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.give-row-text .badge { text-transform: none; font-size: 11.5px; padding: 1px 8px; }
.give-handle { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.give-row-text small { font-size: 13px; overflow-wrap: anywhere; }
.give-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.give-row-actions { flex: none; display: flex; align-items: center; gap: 6px; }
.support-monthly-ways { display: flex; flex-wrap: wrap; gap: 8px; }
.giving-admin { display: grid; gap: 16px; max-width: 760px; margin-top: 16px; }
.giving-card { display: grid; gap: 10px; }
.giving-card .card-head { margin: 0; align-items: center; }
.giving-stripe { margin: 4px 0 0; font-size: 13.5px; }
.giving-friends { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.giving-friends .field { flex: 1 1 220px; margin: 0; }
.sheet .field-wrap small { display: block; margin-top: 6px; font-weight: 400; font-size: 13px; }
.sheet .check-row { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; color: var(--soft); cursor: pointer; }
.sheet .check-row input { width: 18px; height: 18px; accent-color: var(--ember); }
@media (max-width: 480px) {
  /* Copy and Give drop under the name rather than squeezing it. */
  .give-row { flex-wrap: wrap; }
  .give-row-actions { width: 100%; padding-left: 48px; }
}


/* A post's status reads in sentence case, like every other label. */
.burden.is-mine .badge { text-transform: none; }

/* =====================================================================
   Reflections (web/reflections.js): New entry's menu, the plan pinned in the
   Journal, and a reflection's three stages.
   ===================================================================== */
.new-entry-menu { position: fixed; top: 0; right: 0; min-width: 240px; }
.new-entry-item { display: grid; gap: 1px; white-space: normal; }
.new-entry-item strong { font-size: 14px; font-weight: 600; }
.new-entry-item span { font-size: 12.5px; color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.journal-pinned { margin-bottom: 16px; align-items: start; }
.refl-entry .badge { text-transform: none; }

.refl-mark { width: 13px; height: 13px; flex: none; color: var(--ember); }
.refl-kicker, .refl-entry .tag { display: inline-flex; align-items: center; gap: 6px; }
.refl-entry-word { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ember-hi); }
/* A kept reflection's word and verse on one line, under its name. */
.refl-entry-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 2px 0 0; }
.refl-entry-line a.refl-ref { font-size: 14px; color: var(--ember); text-decoration: none; }
.refl-entry-line a.refl-ref:hover, .refl-plan-verse footer a:hover { text-decoration: underline; }
.refl-plan-verse footer a { color: inherit; font-weight: 600; text-decoration: none; }
/* How far through the plan's stretch today is. */
.refl-stretch { display: grid; gap: 5px; }
.refl-stretch small { font-size: 12.5px; color: var(--muted); }

/* The plan someone is living in */
.refl-plan { display: grid; gap: 12px; align-content: start; }
.refl-plan .kicker { margin: 0; }
.refl-plan-word { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); }
.refl-plan-word.small { font-size: 24px; margin-bottom: 2px; }
.refl-plan-verse { margin: 0; display: grid; gap: 4px; }
.refl-plan-verse .scripture { font-size: 16px; color: var(--soft); }
.refl-ref { font-size: 12.5px; font-weight: 600; color: var(--ember); }
.refl-plan-area { display: grid; gap: 2px; font-size: 14px; }
.refl-plan-area b { font-weight: 600; }
.refl-plan-area b span { color: var(--ember); font-weight: 500; }
.refl-plan-area ul { margin: 0; padding-left: 18px; color: var(--soft); }
.refl-plan-area small { color: var(--faint); font-size: 12.5px; }

/* A reflection, open */
.refl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.refl-backlink { color: var(--ember); font-weight: 600; font-size: 14px; text-decoration: none; }
.refl-backlink:hover { color: var(--ember-hi); }
.refl-status { margin-left: auto; font-size: 13px; color: var(--faint); }
.refl-status.bad { color: var(--danger); }
.refl-head { margin: 6px 0 14px; }
.refl-head .kicker { margin: 0 0 4px; }
/* The reflection's name is a heading you can type into: it only looks like a
   field when it's hovered or focused. */
.refl-title { display: block; width: 100%; max-width: 720px; margin: 0 -8px; padding: 2px 8px; font: 700 clamp(22px, 3vw, 28px)/1.2 var(--body); letter-spacing: -0.01em; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); }
.refl-title::placeholder { color: var(--faint); }
.refl-title:hover { border-color: var(--line); }
.refl-title:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.refl-dates-line { font-size: 14px; color: var(--muted); margin-top: 2px; }
.refl-plan-title { font-size: 17px; font-weight: 600; line-height: 1.3; margin: -4px 0 0; }
.refl-name-field { margin-top: 2px; }
.refl-stages { max-width: 460px; margin-bottom: 18px; }
.refl-body { display: grid; gap: 18px; max-width: 720px; }
.refl-stage-title { font-size: 20px; }
.refl-lede { color: var(--muted); font-size: 15px; margin-top: -10px; }
.refl-note { font-size: 13px; color: var(--muted); }
.refl-note.bad { color: var(--danger); }
.refl-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; max-width: 720px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--divider); }

.refl-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--soft); }
.refl-field input, .refl-field textarea { width: 100%; font: 16px/1.5 var(--body); font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 9px 12px; }
.refl-field textarea { min-height: 5.5rem; resize: vertical; }
.refl-field input:focus, .refl-field textarea:focus, .refl-body input:focus, .refl-body select:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.refl-word input { font-size: 26px; font-weight: 700; text-align: center; letter-spacing: -0.01em; padding: 12px; }
.refl-verse-text { margin-top: -10px; font-size: 15px; }
.refl-verse-text .scripture { font-size: 16px; color: var(--soft); }

/* The summary, folded into one line until it's opened */
.refl-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.refl-summary > summary { list-style: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; background: radial-gradient(120% 220% at 0% 0%, var(--glow) 0%, var(--surface) 70%); }
.refl-summary > summary::-webkit-details-marker { display: none; }
.refl-summary-badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ember-bg); color: var(--ember); }
.refl-summary-badge svg { width: 18px; height: 18px; }
.refl-summary-title { display: grid; min-width: 0; }
.refl-summary-title strong { font-size: 15px; font-weight: 600; }
.refl-summary-title span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.refl-chev { width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s ease; }
.refl-summary[open] .refl-chev { transform: rotate(180deg); }
.refl-summary-body { padding: 14px; display: grid; gap: 14px; border-top: 1px solid var(--divider); }

.refl-group { display: grid; gap: 10px; }
.refl-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.refl-group-head h4, .refl-panel h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.refl-group-head small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--faint); }
.refl-block-title { font-size: 15px; font-weight: 600; margin: 0; }
.refl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 10px; }
.refl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.refl-chips .chip-btn { border-style: dashed; }
.refl-passage { text-decoration: none; text-transform: none; }

.refl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.refl-tile { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 10px 9px; display: grid; gap: 3px; align-content: start; }
.refl-tile > strong, .refl-tile-num { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--ember-hi); font-variant-numeric: tabular-nums; }
.refl-tile > span { display: flex; align-items: center; gap: 4px; padding-right: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.refl-tile input { width: 100%; min-width: 0; border: 0; border-bottom: 1px dashed var(--line-2); border-radius: 0; background: none; padding: 0 0 1px; color: var(--text); font-family: var(--body); }
.refl-tile input:focus { box-shadow: none; border-bottom-color: var(--ember); }
.refl-tile-num { width: calc(100% - 20px) !important; -moz-appearance: textfield; }
.refl-tile-num::-webkit-inner-spin-button, .refl-tile-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.refl-tile input.refl-tile-num { color: var(--ember-hi); }
.refl-tile input.refl-tile-label { font-size: 13px; color: var(--muted); }
.refl-tile input:disabled { border-bottom-color: transparent; }
.refl-last-time { font-size: 11.5px; color: var(--faint); }
.refl-tile-add { border-style: dashed; background: none; color: var(--ember); font-size: 13px; font-weight: 600; place-items: center; min-height: 70px; cursor: pointer; }
.refl-tile-add:hover { border-color: var(--ember); }
.refl-x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); font-size: 17px; line-height: 1; }
.refl-x:hover { background: var(--hover); color: var(--text); }
.refl-tile .refl-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; font-size: 15px; }

.refl-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.refl-goals li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 14px; }
.refl-goal-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.refl-status-pill { border: 0; padding: 3px 10px; border-radius: var(--pill); font: 600 12px var(--body); white-space: nowrap; background: var(--ember-bg); color: var(--ember-hi); }
.refl-status-pill.reached { background: var(--sage-bg); color: var(--sage); }
.refl-status-pill.not_this_time { background: var(--raised); color: var(--muted); }
button.refl-status-pill { cursor: pointer; }
.refl-add { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.refl-add input { flex: 1 1 160px; min-width: 0; font: 16px var(--body); color: var(--text); background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 5px 14px; min-height: var(--h-btn-sm); }
.refl-add button { flex: none; }

.refl-review { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.refl-review li { display: grid; gap: 5px; font-size: 14px; }
.refl-review-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.refl-review-top > span { min-width: 0; }
.refl-review-top small { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.refl-review-top small.met { color: var(--sage); font-weight: 600; }
.refl-area-tag { color: var(--faint); font-size: 12.5px; }
.refl-bar { height: 5px; border-radius: 5px; background: var(--raised); overflow: hidden; }
.refl-bar i { display: block; height: 100%; border-radius: 5px; background: var(--ember); }
.refl-stones-verse { margin: 0; display: grid; gap: 2px; }
.refl-stones-verse .scripture { font-size: 16px; color: var(--soft); }
.refl-stones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.refl-stones li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.refl-stones li::before { content: ""; width: 13px; height: 10px; margin-top: 5px; border-radius: 50% 50% 45% 55%; background: linear-gradient(160deg, var(--line-2), var(--muted)); }
.refl-stones small { color: var(--faint); font-size: 12px; white-space: nowrap; }

/* Areas of life */
.refl-area-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.refl-area-chips button { min-height: var(--h-chip); padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--surface); color: var(--soft); font-size: 13px; font-weight: 600; }
.refl-area-chips button[aria-pressed="true"] { background: var(--ember-bg); border-color: var(--ember-line); color: var(--ember-hi); }
.refl-area-chips .refl-area-own { border-style: dashed; background: none; color: var(--ember); }
.refl-area-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.refl-area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 9px; align-content: start; }
.refl-area header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.refl-area header strong { font-size: 15px; font-weight: 600; }
.refl-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 2px 0 -3px; }
.refl-seg { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.refl-seg button { padding: 4px 2px; font-size: 13px; min-height: var(--h-btn-sm); }
.refl-seg button[aria-pressed="true"] { color: var(--ember-hi); }
.refl-area-note { width: 100%; font: 16px var(--body); color: var(--text); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 11px; }
.refl-agoals { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.refl-agoal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; padding: 8px 8px 8px 11px; border-radius: 12px; background: var(--ground); border: 1px solid var(--divider); }
.refl-agoal strong { font-size: 14px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.refl-agoal-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.refl-select, .refl-small-input { min-height: var(--h-chip); font: 14px var(--body); color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 0 10px; max-width: 100%; }
.refl-small-input { width: 8.5em; font-size: 16px; }
.refl-select:disabled, .refl-small-input:disabled { opacity: 0.75; }
.refl-track { display: inline-flex; align-items: center; min-height: var(--h-chip); padding: 0 11px; border: 1px dashed var(--line-2); border-radius: var(--pill); background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.refl-track.on { border-style: solid; border-color: var(--ember-line); background: var(--ember-bg); color: var(--ember-hi); }

.refl-checks { display: grid; gap: 8px; }
.refl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; }
.refl-check input { margin-top: 3px; accent-color: var(--ember); }
.refl-check span { display: grid; }
.refl-check small { color: var(--muted); font-size: 12.5px; }

/* Starting one */
.refl-span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: stretch; margin: 0 0 12px; }
.refl-span-box { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; display: grid; gap: 1px; min-width: 0; }
.refl-span-box small { font-size: 12px; color: var(--muted); }
.refl-span-box strong { font-size: 14px; font-weight: 600; }
.refl-span-arrow { align-self: center; color: var(--faint); }
.refl-step { align-self: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0; }
.refl-step:hover { background: var(--hover); color: var(--text); }
.refl-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.refl-dates label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.refl-dates input { font: 16px var(--body); color: var(--text); background: var(--ground); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 7px 10px; width: 100%; min-width: 0; }
/* A season has no arrows, so its two stretches take the room. */
.refl-span:has(> .refl-step[hidden]) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.refl-last { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
[hidden].refl-dates, [hidden].refl-step, [hidden].refl-last, [hidden].refl-add, [hidden].refl-stones-verse, [hidden].refl-plan-verse { display: none; }

@media (max-width: 560px) {
  .refl-span { grid-template-columns: auto minmax(0, 1fr) auto; }
  .refl-span-arrow { display: none; }
  .refl-span > .refl-span-box:nth-of-type(1) { grid-column: 2; }
  .refl-span > .refl-step:last-child { grid-row: 1; grid-column: 3; }
  .refl-span > .refl-span-box:nth-of-type(2) { grid-column: 1 / -1; }
  .refl-span:has(> .refl-step[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .refl-span:has(> .refl-step[hidden]) > .refl-span-box { grid-column: auto; }
  .refl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .refl-plan-word { font-size: 30px; }
}

/* =====================================================================
   Church (web/church.js): your churches, sermons and Listen. Compact on
   purpose: short rows, small type, few words. Every colour is a token, so
   it follows the theme.
   ===================================================================== */
.church-top { display: grid; gap: 12px; margin-bottom: 16px; }
.church-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.church-add { color: var(--ember); }
.church-seg { display: flex; padding: 3px; gap: 2px; width: min(100%, 420px); background: var(--raised); border: 1px solid var(--line); border-radius: var(--pill); }
.church-seg a { flex: 1; display: grid; place-items: center; min-height: var(--h-btn-sm); border-radius: var(--pill); color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; }
.church-seg a:hover { color: var(--text); }
.church-seg a[aria-current="page"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px var(--shadow), 0 0 0 1px var(--line); }
.church-back-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.church-back { display: inline-flex; align-items: center; gap: 4px; }
.church-back svg { width: 18px; height: 18px; }
.church-back-actions { display: inline-flex; gap: 6px; }

.church-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.church-av.is-big { width: 52px; height: 52px; font-size: 16px; }
.church-av-0 { background: var(--ember-bg); color: var(--ember-hi); }
.church-av-1 { background: var(--sage-bg); color: var(--sage); }
.church-av-2 { background: var(--hl-blue); color: var(--text); }
.church-av-3 { background: var(--hl-rose); color: var(--text); }
.live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--pill); background: var(--danger); color: var(--surface); font-size: 11.5px; font-weight: 700; }
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.35; } }

/* Lists: one card, rows divided by a hairline. */
.church-list { padding: 4px 0; display: flex; flex-direction: column; }
.church-list > * + * { border-top: 1px solid var(--divider); }
.church-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.church-row-text strong { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.church-row-text small { font-size: 13px; color: var(--muted); }
.church-row-text small .verse-ref { font-size: 13px; }
.church-next { flex: none; font-size: 13px; font-weight: 600; color: var(--ember-hi); white-space: nowrap; }
.church-next.is-live { color: var(--danger); }

.church-item-row { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; }
.church-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; color: inherit; text-decoration: none; }
.church-item-main:hover .church-row-text strong { color: var(--ember-hi); }
.church-info { position: relative; flex: none; width: var(--h-icon); height: var(--h-icon); display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.church-info svg { width: 20px; height: 20px; display: block; }
.church-info:hover { background: var(--hover); color: var(--text); }
.church-info.has-new, .church-info.is-open { color: var(--ember); }
.church-info.is-open { background: var(--ember-bg); }
.church-info-count { position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--pill); background: var(--ember); color: var(--ember-ink); font-size: 10.5px; font-weight: 700; line-height: 17px; box-shadow: 0 0 0 2px var(--surface); }
.church-notes { display: grid; gap: 6px; padding: 0 14px 12px 64px; }
.church-note { display: flex; gap: 10px; margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--well); font-size: 14px; }
.church-note-when { flex: none; min-width: 44px; font-size: 12px; font-weight: 700; color: var(--ember-hi); padding-top: 1px; }

.church-week-card { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--card-warm); border: 1px solid var(--ember-line); color: var(--text); text-decoration: none; }
.church-week-card:hover { border-color: var(--ember); }
.church-week-text { flex: 1; display: grid; gap: 5px; }
.church-week-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.church-week-top strong { color: var(--ember-hi); }
.church-week-title { font-size: 15px; font-weight: 600; }
.church-bars { display: flex; gap: 4px; }
.church-bars span { flex: 1; height: 5px; border-radius: var(--pill); background: var(--ember-line); }
.church-bars span.is-done { background: var(--ember); }
.church-go { color: var(--faint); }
.church-go svg { width: 18px; height: 18px; display: block; }
.church-empty { display: grid; gap: 8px; justify-items: start; }
.church-empty p { margin: 0; }
.church-quiet { padding: 24px 16px; display: grid; gap: 10px; justify-items: center; font-size: 14px; }

/* One church */
.church-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.church-name { font-size: 21px; font-weight: 700; margin: 0; line-height: 1.25; }
.church-where { margin: 2px 0 0; font-size: 13.5px; }
.church-live-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--text); color: var(--ground); font-size: 14px; font-weight: 600; text-decoration: none; }
.church-live-strip > span:nth-child(2) { flex: 1; }
.church-live-strip svg { width: 16px; height: 16px; display: block; }
.church-live-strip:hover { color: var(--ground); filter: brightness(1.1); }
.church-tabs { margin-bottom: 12px; }
.church-tabs button { position: relative; }
.church-dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.church-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.church-notice { align-items: flex-start; font-size: 14px; }
.church-notice-icon { flex: none; color: var(--ember); }
.church-notice-icon svg { width: 18px; height: 18px; display: block; }
.church-date { flex: none; width: 40px; display: grid; justify-items: center; line-height: 1.1; }
.church-date small { font-size: 11px; color: var(--muted); }
.church-date strong { font-size: 17px; }
.church-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; }
.church-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; cursor: pointer; }
.church-row-main:hover { background: var(--hover); }
.church-thumb { flex: none; width: 80px; aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; background: var(--raised); }
/* A sermon's title gets two lines before it's cut, so it can be told apart. */
.church-row-text .church-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.church-thumb.is-audio { display: grid; place-items: center; color: var(--ember); }
.church-thumb.is-audio svg { width: 18px; height: 18px; }
.church-row-act { flex: none; }
.church-about-row { display: flex; gap: 12px; align-items: baseline; padding: 11px 14px; font-size: 14px; }
.church-about-row > span:first-child { flex: none; width: 96px; font-size: 13px; font-weight: 600; color: var(--muted); }
.church-links { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.church-toggle { align-items: center; justify-content: space-between; cursor: pointer; }
.church-toggle > span:first-child { width: auto; flex: 1; color: var(--text); font-weight: 500; }
.church-toggle input { width: 20px; height: 20px; accent-color: var(--ember); }
.church-remove { margin-top: 10px; color: var(--danger); }
.church-remove:hover { color: var(--danger); }

/* Adding and editing */
.church-add-title { margin-bottom: 12px; }
.church-add-body { display: grid; gap: 12px; max-width: 560px; }
.church-review-lede { margin: 0; font-size: 14px; }
.church-link-form { display: grid; gap: 4px; }
.church-link-form .field { margin: 0 0 8px; }
.church-link-hint { margin: 0 0 10px; font-size: 13.5px; }
.church-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.church-form { display: grid; gap: 12px; }
.church-form .field { margin: 0; }
.church-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soft); }
.church-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.church-times { display: grid; gap: 8px; }
.church-time-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) auto; gap: 6px; align-items: center; }
.church-more-time { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
.church-more-time svg { width: 16px; height: 16px; }
.church-links-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--soft); padding: 4px 0; }
.church-links-box[open] { display: grid; gap: 10px; }
.church-found { margin: 0; font-size: 13px; }
.church-sheet { max-width: 520px; }
.church-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.church-sheet-head h3 { margin: 0; }

/* Listen and sermons */
/* Listen: one line with the count and its info button, and two compact
   dropdowns (season, source). On a phone the dropdowns share a line of
   their own, half each. */
.church-listen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.church-listen-count { display: flex; align-items: center; gap: 4px; min-width: 0; }
.church-listen-filters { display: flex; gap: 6px; margin-left: auto; min-width: 0; }
.church-listen-filters .filter-select { max-width: 220px; min-width: 0; }
/* minmax(0, 1fr): a long title ellipsizes instead of widening the column past the screen. */
.church-listen-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.church-listen-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.church-listen-head { font-size: 15px; font-weight: 600; margin: 0; }
.church-listen-empty { font-size: 14px; color: var(--muted); margin: 0; padding: 4px 2px; }
.church-listen-empty a { color: var(--ember); font-weight: 600; }
.church-listen-pending { font-size: 13px; color: var(--faint); margin: 0; }
@media (max-width: 560px) {
  .church-listen-filters { width: 100%; margin-left: 0; }
  .church-listen-filters .filter-select { flex: 1 1 0; max-width: none; }
}
.church-new-row { display: flex; gap: 8px; margin-bottom: 12px; }
.church-new-row .btn { display: inline-flex; align-items: center; gap: 6px; }
.church-new-row svg { width: 16px; height: 16px; }
.church-steps { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--faint); }
.church-steps li { display: flex; align-items: center; gap: 8px; }
.church-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.church-steps li.is-now { color: var(--text); }
.church-steps li.is-now::before { background: var(--ember); animation: live-pulse 1.2s ease-in-out infinite; }
.church-steps li.is-done { color: var(--muted); }
.church-steps li.is-done::before { background: var(--sage); }

/* The player (church.js::play), docked in the bottom corner on a wide
   screen and across the foot of a phone, above the tab bar. Placed with
   left/right, never a transform: the `rise` animation ends on
   `transform: none`, which once undid a translateX(-50%) and left half the
   player off the screen. `is-mini` shrinks a video to a small frame beside
   its title, still playing. The page keeps room beneath its last row the
   height of the dock (--player-room, set from church.js). */
.church-player { position: fixed; z-index: 36; right: 20px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100vw - 40px)); max-height: calc(100dvh - 96px); background: var(--text); color: var(--ground); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 44px var(--shadow); animation: rise 0.2s ease both; }
.church-player-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.church-player.is-audio .church-player-media { padding: 10px 12px 0; }
.church-player.is-audio audio { display: block; width: 100%; }
.church-player-bar { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; min-width: 0; }
.church-player-text { flex: 1; min-width: 0; display: grid; }
.church-player-text strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.church-player-text small { font-size: 12px; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.church-player .iconbtn { flex: none; color: var(--ground); background: transparent; border-color: transparent; }
.church-player .iconbtn svg { width: 18px; height: 18px; }
.church-player-notes { flex: none; }
.church-player.is-mini { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.church-player.is-mini .church-player-bar { padding-left: 10px; }
body.has-player #churchPage { padding-bottom: calc(var(--player-room, 0px) + 16px); }
/* The sermon in the player, wherever it's listed. */
.church-row.is-playing .church-row-title { color: var(--ember-hi); }
.church-row.is-playing .church-thumb { outline: 2px solid var(--ember); outline-offset: 1px; }

/* Watching live */
.church-live { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.church-live-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: #000; }
.church-live-side { display: grid; gap: 10px; padding: 16px; }
.church-live-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.church-live-notes { min-height: 200px; margin: 0; resize: vertical; }
.church-live-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.church-live-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.church-live-actions svg { width: 16px; height: 16px; }
.church-live-hint { margin: 0; font-size: 12.5px; }

/* The week after a sermon */
.church-week-head { display: grid; gap: 6px; margin-bottom: 12px; padding: 16px; }
.church-week-head small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.church-week-head > span:last-child { font-size: 13px; color: var(--muted); }
.church-steps-list { display: grid; gap: 8px; max-width: 640px; }
.church-step { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.church-step.is-open { border-color: var(--ember-line); }
.church-step-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.church-step-check { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer; border: 2px solid var(--line-2); background: var(--surface); color: transparent; }
.church-step-check svg { width: 16px; height: 16px; }
.church-step-check.is-done { border-color: var(--sage); background: var(--sage); color: var(--surface); }
.church-step-title { flex: 1; display: grid; justify-items: start; gap: 1px; min-height: 44px; align-content: center; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.church-step-title small { font-size: 12px; color: var(--muted); font-weight: 600; }
.church-step-title small.is-today { color: var(--ember-hi); }
.church-step-title strong { font-size: 15px; font-weight: 600; }
.church-step-body { display: grid; gap: 10px; justify-items: start; padding: 0 14px 14px 54px; }
.church-step-body p { margin: 0; font-size: 14.5px; }
.church-step-body .field { margin: 0; width: 100%; }

@media (max-width: 820px) {
  .church-live { grid-template-columns: minmax(0, 1fr); }
  .church-notes { padding-left: 14px; }
  .church-player { left: 12px; right: 12px; width: auto; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 150px); }
  .church-time-row { grid-template-columns: minmax(0, 1fr) minmax(128px, 1fr) auto; }
  .church-time-row > input:first-child { grid-column: 1 / -1; }
  .church-step-body { padding-left: 14px; }
}
@media (max-width: 560px) {
  /* Small, the player keeps the title and the controls, not Notes. */
  .church-player.is-mini { grid-template-columns: 96px minmax(0, 1fr); }
  .church-player.is-mini .church-player-notes { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-badge::before, .church-steps li.is-now::before { animation: none; }
}

/* Church reminders: the bell on events and gatherings (web/church.js::bell). */
.church-bell { flex: none; }
.church-row-act.is-on { color: var(--ember); border-color: var(--ember-line); background: var(--ember-bg); }
.church-bell-menu { min-width: 230px; }
.church-bell-on { margin: 0; padding: 6px 10px 8px; font-size: 12.5px; font-weight: 600; color: var(--ember-hi); border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.church-notify-row { align-items: center; }

/* Amens at scale: the wall's "Show more", the evening note's switch, and how
   many people sent the same kind word. */
.wall-more { display: flex; margin: 14px auto 0; }
.digest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 14px; color: var(--soft); }
.digest-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); flex: none; }
.digest-icon svg { width: 15px; height: 15px; }
.digest-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.digest-label input { width: 18px; height: 18px; accent-color: var(--ember); flex: none; }
.digest-allow { font-size: 13px; padding: 2px 0; }
.digest-allow[hidden] { display: none; }
.encouragement-count { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--ember-hi); background: var(--ember-bg); border-radius: var(--pill); padding: 1px 7px; white-space: nowrap; }

/* ---------- Home (cave.js::showHome) ----------
   A warm opening (the day, the greeting, the ask box and the verse), then
   one line per notification, then Today and the last conversation beside
   what's quieter, so the two columns end close together. */
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin: 0 0 18px; padding: 30px 32px; border-radius: var(--radius); border: 1px solid var(--ember-line); overflow: hidden; background: radial-gradient(60% 120% at 100% 0%, var(--glow-strong) 0%, transparent 65%), radial-gradient(90% 120% at 0% 100%, var(--glow) 0%, var(--card-warm) 45%, var(--surface) 100%); box-shadow: 0 26px 54px -38px var(--ember-glow); }
.home-hero:has(#homeVerse:empty) { grid-template-columns: minmax(0, 1fr); }
/* The cave's arch, faint in the corner behind the verse. */
.home-hero-arch { position: absolute; right: -18px; bottom: -26px; width: 220px; height: auto; color: var(--ember); opacity: 0.09; pointer-events: none; }
.home-hero-main { position: relative; display: grid; gap: 4px; min-width: 0; }
.home-hero .page-title { margin: 0 0 14px; font-size: clamp(28px, 3.6vw, 38px); }
.home-hero .home-ask { margin: 0; background: var(--surface); }
.home-hero .home-verse { position: relative; margin: 0; padding-left: 28px; border-left: 1px solid var(--ember-line); }
.home-hero .home-verse:empty { display: none; }
/* The big ask box (home and welcome): a book mark, the question, the mic,
   and a round send button that stays quiet until something is typed. */
.home-ask { margin: 0 0 20px; }
/* Where to start (cave.js::startCard): six places as compact rows, a tick
   on the ones already tried. Three across, two on a phone. */
.home-start { margin: 0 0 16px; display: grid; gap: 12px; border-color: var(--ember-line); background: radial-gradient(120% 140% at 0% 0%, var(--glow) 0%, var(--surface) 60%); }
.home-start .card-head { margin: 0; align-items: center; }
.start-title { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.start-aside { display: inline-flex; align-items: center; gap: 4px; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.start-place { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; }
.start-place:hover { transform: translateY(-1px); border-color: var(--ember-line); }
.start-place:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.start-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }
.start-icon svg { width: 17px; height: 17px; }
.start-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.start-place.is-done { background: transparent; }
.start-place.is-done .start-icon { background: var(--sage-bg); color: var(--sage); }
.start-place.is-done .start-name { color: var(--muted); }
@media (max-width: 560px) {
  .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-place { padding: 8px 10px; gap: 8px; }
  .start-name { font-size: 14px; }
}
.ask-lg { min-height: 56px; padding: 6px 6px 6px 16px; gap: 6px; box-shadow: 0 14px 34px -24px var(--shadow), 0 1px 0 var(--line); }
.ask-lg-mark { flex: none; display: grid; place-items: center; color: var(--ember); }
.ask-lg-mark svg { width: 19px; height: 19px; }
.ask-lg input { padding-left: 4px; }
.ask-lg-send { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--ember-grad, var(--ember)); color: var(--ember-ink); box-shadow: 0 6px 16px -6px var(--ember-glow); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
.ask-lg-send svg { width: 19px; height: 19px; }
.ask-lg-send:active { transform: scale(0.94); }
.ask-lg:has(input:placeholder-shown) .ask-lg-send { background: var(--raised); color: var(--faint); box-shadow: none; }

/* Amens and Declare side by side; one alone takes the row. On a phone each
   is a small tile: icon on top, then its title and one line. */
.home-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; }
.home-tiles:empty { display: none; }
.home-tile { position: relative; min-width: 0; display: grid; }
.home-tile > .info-btn { position: absolute; top: 50%; right: 40px; transform: translateY(-50%); margin: 0; }
.home-tile .home-note { height: 100%; }
@media (max-width: 720px) {
  .home-tile:not(:only-child) .home-note { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px 14px; }
  .home-tile:not(:only-child) .home-note-go { display: none; }
  .home-tile:not(:only-child) .home-note-text strong { white-space: normal; line-height: 1.3; }
  .home-tile:not(:only-child) > .info-btn { top: 6px; right: 6px; transform: none; }
}
.home-notes { display: grid; gap: 8px; margin: 0 0 14px; }
.home-notes:empty { display: none; }
[data-view="home"] .cols, [data-view="home"] .maincol, [data-view="home"] .sidecol { gap: 16px; }

/* A notification line (cave.js::homeNote): Amens, or a church going live. */
.home-note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--ember-line); background: radial-gradient(120% 220% at 0% 0%, var(--glow) 0%, var(--surface) 70%); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.home-note:hover { border-color: var(--ember); color: var(--text); }
.home-note:active { transform: scale(0.99); }
.home-note:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.home-note-icon { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }
.home-note-icon svg { width: 20px; height: 20px; display: block; }
.home-note-count { position: absolute; top: -4px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--pill); background: var(--ember-grad); color: var(--ember-ink); font-size: 11px; font-weight: 700; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); }
.home-note-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.home-note-text strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-note-text small { font-size: 13px; color: var(--muted); }
.home-note-go { flex: none; color: var(--faint); }
.home-note-go svg { width: 18px; height: 18px; display: block; }
.home-note.is-live .home-note-icon { background: var(--danger); color: var(--surface); }
.home-note.is-live .home-note-icon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--danger); animation: live-pulse 1.6s ease-in-out infinite; }

/* The streak (cave.js::emberChip): a few words after the date, an ember dot
   and "2 days", as light as the date itself. The week it opens shows a dot
   per day over its day letter. */
.home-day { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.ember-wrap { position: relative; display: inline-flex; }
.ember-wrap::before { content: "·"; margin-right: 6px; color: var(--faint); }
.ember-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; }
.ember-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.ember-chip:hover, .ember-chip[aria-expanded="true"] { color: var(--text); }
.ember-week { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 32px -8px var(--shadow); animation: rise 0.14s ease both; }
.ember-week[hidden] { display: none; }
.ember-week p { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--soft); white-space: nowrap; }
.ember-days { display: flex; gap: 8px; }
.ember-day { display: grid; justify-items: center; gap: 5px; }
.ember-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.ember-day.lit .ember-dot { background: var(--ember); }
.ember-day.today .ember-dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ember-line); }
.ember-day small { font-size: 10.5px; font-weight: 600; color: var(--faint); }
.ember-day.today small { color: var(--text); }

/* Verse for today: the text, then its reference, Reflect and "⋯" on one line. */
.home-verse:has(.more-menu) { z-index: 5; }
.hero-verse .kicker { margin: 0 0 8px; }
.home-verse .scripture-lg { margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.5; }
.home-verse-foot { display: flex; align-items: center; gap: 4px 10px; margin-top: 12px; }
.home-verse-foot .verse-ref { margin-right: auto; min-width: 0; text-decoration: none; }
.home-verse-foot .verse-ref:hover { color: var(--ember-hi); }
.home-verse-foot .text-act { padding: 0 4px; }

/* A card's quiet aside (a tally, a time) and its one link. */
.card-aside { font-size: 13px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.card-aside.is-done { color: var(--sage); font-weight: 600; }
.card-link { font-size: 13px; font-weight: 600; color: var(--ember); text-decoration: none; }
.card-link:hover { color: var(--ember-hi); }
.home-quiet { margin: 0; font-size: 14px; }

@media (max-width: 820px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 20px; }
  .home-hero .home-verse { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--ember-line); }
  .home-hero-arch { width: 150px; }
}

/* Today's head: a ring that fills as the day's ticks are done (--done, 0 to 1). */
.card-head:has(.today-progress) { align-items: center; }
.card-head:has(.today-progress) .kicker { margin: 0; }
.today-progress { display: inline-flex; align-items: center; gap: 8px; }
.today-progress[hidden] { display: none; }
.today-ring { display: grid; width: 26px; height: 26px; --done: 0; }
.today-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.today-ring circle { fill: none; stroke-width: 4; }
.today-ring .ring-track { stroke: var(--well); }
.today-ring .ring-fill { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--done) * 100); transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease; }
.today-progress.is-done .ring-fill { stroke: var(--sage); }
/* Under a row's words: a reading plan's bar, a habit's week as dots. */
.today-bar { display: block; height: 4px; margin-top: 7px; border-radius: var(--pill); background: var(--well); overflow: hidden; }
.today-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ember-grad); transition: width 0.5s ease; }
.today-dots { display: flex; gap: 5px; margin-top: 7px; }
.today-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--well); box-shadow: inset 0 0 0 1px var(--line-2); }
.today-dots i.on { background: var(--sage); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .today-ring .ring-fill, .today-bar > span { transition: none; } }

/* Today: one row each, a circle to tick on the left. */
.today-items { list-style: none; margin: 0; padding: 0; display: grid; }
.today-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--divider); }
.today-item:first-child { border-top: 0; padding-top: 2px; }
.today-item:last-child { padding-bottom: 0; }
.today-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; color: transparent; display: grid; place-items: center; padding: 0; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease; }
.today-tick svg { width: 14px; height: 14px; }
.today-tick:hover { border-color: var(--sage); }
.today-tick:active { transform: scale(0.88); }
.today-tick[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: var(--surface); }
.today-mark { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--muted); }
.today-mark svg { width: 17px; height: 17px; }
.today-body { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 2px 0; border: 0; background: none; color: var(--text); text-align: left; text-decoration: none; font: inherit; }
.today-body strong, .today-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-body strong { font-size: 15px; font-weight: 600; }
.today-body small { font-size: 13px; color: var(--muted); }
.today-body:hover strong { color: var(--ember-hi); }
.today-item.is-done .today-body strong { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
@media (pointer: coarse) { .today-tick, .today-mark { width: 30px; height: 30px; } }

/* Pick up where you left off, and Aquila's suggested next question. */
.resume { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: left; font: inherit; }
.resume:hover strong { color: var(--ember-hi); }
.resume-next { display: block; width: 100%; margin-top: 12px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--well); color: var(--soft); font-size: 13.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume-next:hover { border-color: var(--ember-line); color: var(--text); }
.revisit-quote { margin: 0 0 4px; font-size: 15px; font-style: italic; line-height: 1.5; color: var(--soft); }
.revisit-quote + .home-quiet { margin-bottom: 8px; }

/* Look back: a journal entry and an answered prayer, one under the other. */
.look-back-label { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.look-back-item + .look-back-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--divider); }

@media (prefers-reduced-motion: reduce) {
  .home-note.is-live .home-note-icon::after { animation: none; }
}

/* How long a post stays: the writer's time left, the "keep it up" line under
   the share box, and an answered prayer's note. */
.mine-time { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin: 0; }
.answered-note { font-size: 14.5px; color: var(--soft); margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--sage-bg); }
.answered-note strong { color: var(--sage); font-weight: 600; }
.keep-up-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--ember-line); border-radius: var(--radius-sm); background: var(--card-warm); }
.keep-up-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ember-bg); color: var(--ember); }
.keep-up-icon svg { width: 16px; height: 16px; }
.keep-up-text { display: grid; min-width: 0; }
.keep-up-text strong { font-size: 14px; font-weight: 600; }
.keep-up-text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.keep-up-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-left: 40px; }

/* Declare (web/declare.js): Scripture spoken aloud over what someone faces.
   The home line, the form, the words (each line in Inter with its verse in
   the serif under it), and the full-screen "Speak it aloud". */

.declare-page { max-width: 640px; }
.declare-head { display: grid; gap: 6px; margin: 0 0 20px; }
.declare-head .back { justify-self: start; }
.declare-form { display: grid; gap: 14px; }
.declare-form label.field-wrap { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.declare-form .field { margin: 0; font-weight: 400; }
.declare-form textarea.field { resize: vertical; min-height: 96px; line-height: 1.5; }
.field-hint { font-size: 13px; font-weight: 400; color: var(--muted); }
.declare-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.declare-from { display: grid; gap: 6px; font-size: 13px; }
.declare-from p { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--well); color: var(--soft); font-size: 15px; line-height: 1.5; }
.declare-note { margin: 0; font-size: 13px; text-align: center; }
.declare-kept { margin-top: 28px; }
.declare-kept-list { display: grid; gap: 8px; }
.declare-kept-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 15px; }
.declare-kept-item:hover { border-color: var(--ember-line); color: var(--text); }
.declare-kept-item > span.faint { font-size: 13px; white-space: nowrap; }
.declare-kept-main { display: grid; gap: 2px; min-width: 0; }
.declare-kept-main small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.declare-speak { margin: 0 0 16px; gap: 8px; }
.declare-speak svg { width: 18px; height: 18px; }
.declare-words { display: grid; gap: 20px; }
.declare-opening { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--ember-hi); }
.declare-line { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--divider); }
.declare-amen { padding-top: 20px; border-top: 1px solid var(--divider); }
.declare-say { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 600; }
.declare-verse { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--well); display: grid; gap: 6px; }
.declare-verse .scripture { margin: 0; font-size: 16.5px; color: var(--soft); }
.declare-ref { justify-self: start; font-size: 13px; font-weight: 600; color: var(--ember); text-decoration: none; }
.declare-ref:hover { color: var(--ember-hi); text-decoration: underline; }
/* "It is written" over each verse, and "Pray" over the prayer: small labels
   that say what to read aloud next. */
.declare-label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ember); }
.declare-prayer { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--divider); }
.declare-prayer-text { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); }
.declare-edit-prayer { resize: none; overflow: hidden; font-size: 16px; line-height: 1.55; }
.declare-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 16px 0 10px; }
.declare-actions .btn svg { width: 15px; height: 15px; }
/* Make it yours: each line's words open to edit, its verse still under it. */
.declare-editing .field-wrap { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.declare-editing .field { margin: 0; }
.declare-edit-title { font-size: 17px; font-weight: 600; }
.declare-edit-say { resize: none; overflow: hidden; font-size: 17px; font-weight: 600; line-height: 1.4; }
.declare-edit-row { display: flex; gap: 8px; align-items: flex-start; }
.declare-edit-row .field { flex: 1; }
.declare-drop { flex: none; color: var(--muted); }
.declare-drop:disabled { opacity: 0.35; cursor: default; }
.declare-editing .declare-actions { justify-content: flex-end; margin: 0; }

/* Speak it aloud: over everything, one line at a time. */
body.aloud-open { overflow: hidden; }
.aloud { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: max(14px, env(safe-area-inset-top)) 20px max(22px, env(safe-area-inset-bottom)); background: radial-gradient(90% 60% at 50% 45%, var(--glow) 0%, var(--ground) 72%); color: var(--text); animation: rise 0.16s ease both; }
.aloud:focus { outline: none; }
.aloud-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aloud-dots { display: flex; gap: 6px; }
.aloud-dots span { width: 7px; height: 7px; border-radius: var(--pill); background: var(--line-2); transition: width 0.2s ease, background-color 0.2s ease; }
.aloud-dots span.is-on { background: var(--ember); }
.aloud-dots span.is-on:last-of-type, .aloud-dots span.is-on:has(+ span:not(.is-on)) { width: 18px; }
.aloud-count { min-width: var(--h-icon); text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.aloud-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; width: 100%; max-width: 640px; margin: 0 auto; }
.aloud-say { margin: 0; font-size: clamp(26px, 4.4vw, 36px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.aloud-stage .scripture-lg { margin: 0; color: var(--soft); }
.aloud-ref { font-size: 14px; font-weight: 600; color: var(--ember); }
.aloud-label { margin: 0 0 -10px; font-size: 14px; font-weight: 600; color: var(--ember); }
/* After its verse, the declaration reads as the answer to it. */
.aloud-say.aloud-declare { font-size: clamp(22px, 3.6vw, 30px); padding-top: 18px; border-top: 1px solid var(--divider); }
.aloud-prayer { margin: 0; font-size: clamp(20px, 3.2vw, 26px); line-height: 1.5; font-weight: 500; }
.aloud-stage { overflow-y: auto; }
.aloud-foot { display: grid; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; text-align: center; }
.aloud-foot p { margin: 0; font-size: 14px; }
.aloud-buttons { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.aloud-buttons .iconbtn { width: 48px; height: 48px; color: var(--soft); }
.aloud-next { min-height: 48px; font-size: 16px; }
.aloud-foot[hidden] { display: none; }
.aloud-stage { cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* After Amen: a closing word, then say it again or close. */
.aloud-end { display: grid; gap: 14px; text-align: center; cursor: default; }
.aloud-end-line { margin: 0; font-size: 17px; color: var(--soft); }
.aloud-end .aloud-buttons { grid-template-columns: 1fr 1fr; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .aloud, .aloud-dots span { animation: none; transition: none; } }

/* The cave header menu's choices with an info button beside them. */
.new-entry-row { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.new-entry-row .more-item { flex: 1; }

/* The highlights on narrower screens: one per row, then on a phone a row
   that swipes, each card most of the width so the next one peeks in. */
@media (max-width: 980px) {
  .spots { grid-template-columns: minmax(0, 1fr); }
  .spot.is-amens { grid-template-columns: minmax(0, 1fr); }
  .spot.is-amens .spot-demo { grid-column: 1; grid-row: auto; margin-top: 20px; }
}
/* The cave on a tablet or phone: its words, then the phone beneath them. */
@media (max-width: 820px) {
  .cave-feature { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 0; }
  .cave-copy { padding-bottom: 24px; }
  .cave-phone { width: min(100%, 320px); }
}
@media (max-width: 720px) {
  .spots { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 0 16px; }
  .spots::-webkit-scrollbar { display: none; }
  .spots .spot { flex: 0 0 86%; scroll-snap-align: start; }
  .spot { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 18px; }
  .spot.is-amens { padding: 18px; }
  .spot.is-amens h3 { font-size: 20px; }
  .spot.is-amens .spot-demo { margin-top: 14px; }
  /* In the row that swipes: the request and the kind word back, stacked. */
  .amens-wall { grid-template-columns: minmax(0, 1fr); }
  .amens-post.is-joy { display: none; }
  .spot-demo { grid-column: 1; grid-row: auto; margin-top: 14px; align-self: end; }
  .spot h3 { font-size: 18px; }
}
/* The welcome page on a phone: two tiles a row, a smaller example answer, and
   no arch beside the name's story. */
@media (max-width: 720px) {
  /* All five tabs fit across a phone: words only, sharing the width. */
  .tour-tabs { padding: 4px; }
  .tour-tabs button { flex: 1 1 auto; padding: 0 6px; font-size: 13.5px; }
  .tour-tabs button svg { display: none; }
  .tour-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; align-items: start; align-content: start; }
  .tour-copy h3 { font-size: 19px; }
  .tour-feats { gap: 8px; }
  .tour-feats li { font-size: 14px; }
  .tour-mock { padding: 12px; }
  .preview { padding: 20px; border-radius: 22px; }
  .preview-refs a + a { display: none; } /* one reference, so the icons share its line */
  .name-band .arch { display: none; }
  .name-band { padding: 22px; }
  .promise { grid-template-columns: minmax(0, 1fr); }
  .promise-part { padding: 20px; }
  .promise-part.is-gift { border-left: 0; border-top: 1px solid var(--line); }
}