/* Amen Prayers design system. Linked from every board.

   COLOR: one source of truth. Components read the semantic tokens below and never write a hex.
   Brother / Sister mode (amen-data.js puts theme-m / theme-w on <html>; a board root may carry it too)
   re-points the SAME tokens, so surfaces, borders, text, accent, hover, focus ring, selection, scrim and
   shadows all follow the mode with no per-element patches. Every mode block lists every token and no token
   refers to another, so a mode class works on any element. Add a token to all three blocks or to none. */

:root {
  color-scheme: light;

  /* Surfaces */
  --page: #FBF9F6;           /* app background */
  --surface: #FFFFFF;        /* cards, inputs, sheets, switch knobs */
  --sunken: #F1E9DC;         /* recessed fills, selected rows, chips on */
  --glow: #F3E3C3;           /* the soft lit fill of Ask and the tab you are on */
  --hover: rgb(38 35 32 / .05);  /* row hover, laid over any surface */

  /* Lines */
  --line: #E5DFD6;           /* borders, dividers */
  --line-soft: #EFEAE3;      /* hairlines inside a card */
  --line-accent: #E2D2B5;    /* accent-tinted border, selection */
  --line-strong: #1F1C19;    /* the chosen option's border */

  /* Text */
  --ink: #1F1C19;
  --ink-2: #4D4842;
  --ink-3: #66605A;          /* meta, placeholders (4.9:1 or more on every surface above) */
  --ink-4: #B5ADA3;          /* decorative only: grips, empty radios. Never text */

  /* Accent: gold, or the mode's blue / rose */
  --accent: #A07C45;         /* fills, rings, icons */
  --accent-text: #7C5C2C;    /* accent as text on a surface (4.8:1 or more) */
  --accent-deep: #664A22;    /* pressed, text on --glow */
  --accent-soft: #D4B47E;
  --brand: #C9A974;          /* the wordmark dove and period */

  /* Solid controls: ink in the default theme, the mode's accent in a mode */
  --primary: #1F1C19;
  --on-primary: #FBF9F6;
  --on-primary-2: #E4D9C8;
  --on-accent: #FFFFFF;

  /* Overlays */
  --scrim: rgb(38 35 32 / .32);
  --shadow-1: 0 1px 2px rgb(38 35 32 / .06);
  --shadow-2: 0 6px 24px rgb(38 35 32 / .14);        /* drawer, sheet */
  --shadow-pop: 0 18px 40px -16px rgb(38 35 32 / .35); /* popover menu */
  --shadow-big: 0 22px 48px -24px rgb(38 35 32 / .40); /* the round action */
  --shadow-accent: 0 22px 48px -20px rgb(160 124 69 / .60);   /* the round action, given */
  --shadow-accent-sm: 0 18px 36px -18px rgb(160 124 69 / .60);
  --shadow-knob: 0 1px 3px rgb(38 35 32 / .20);
  --edge-shade: rgb(38 35 32 / .10);   /* lit-edge motif: sides darker */
  --edge-light: rgb(255 255 255 / .95);/* top and bottom catch the light */

  /* Status: the same in every mode */
  --danger: #A0402B;
  --danger-soft: #F6E3DD;
  --danger-line: #E8C4BA;
  --success: #4F7A4A;

  /* Tab icons (amen-icons.js), flat: gold, deep gold, terracotta, blue, deep blue, cream, wood. A cool family in Brother mode, a rose family in Sister mode. */
  --ic-a: #EEC465; --ic-a2: #E0A940; --ic-b: #C96F4F; --ic-c: #76A5CC; --ic-c2: #5C89AB; --ic-d: #F7E3A6; --ic-n: #C9A06E;

  /* The sign-in dove's glass: the circle's colour before its picture arrives, so nothing flashes. Never remapped. */
  --dove-glass: #C9D8E6;

  /* Mode identities: fixed, for showing the OTHER mode (a suggestion, a legend). Never remapped. */
  --sister-bg: #FCEEF3; --sister-surface: #FFF8FB; --sister-line: #F1D3DF; --sister-ink: #3A1F2B; --sister-ink-2: #7A5363; --sister-accent: #B04A72;
  --brother-bg: #EEF3FC; --brother-surface: #F8FAFF; --brother-line: #D3DFF1; --brother-ink: #1C2638; --brother-ink-2: #53627A; --brother-accent: #3A67AE;

  /* Type */
  --serif: Fraunces, Georgia, serif;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --t-micro: 11px;   /* counts, eyebrow caps (0.08em, uppercase) */
  --t-small: 12px;   /* meta, badges */
  --t-label: 13px;   /* chips, buttons, tabs */
  --t-body: 15px;    /* UI body, list rows */
  --t-lead: 17px;    /* card prayer text */
  --t-title: 20px;   /* sheet titles */
  --t-h2: 24px;      /* screen titles */
  --t-h1: 28px;
  --t-prayer: clamp(22px, min(8.2cqw, 5cqh), 32px); /* Focus prayer */
  --lh-tight: 1.15;  /* display, Amen */
  --lh-head: 1.28;   /* headings, prayers */
  --lh-ui: 1.35;     /* labels, buttons (2 lines max) */
  --lh-body: 1.5;    /* paragraphs */

  /* Space: 4pt grid. --s-icon is the one half step: icon to label. */
  --s1: 4px; --s-icon: 6px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px;
  --gutter: clamp(14px, 5.6cqw, 22px);

  /* Radius */
  --r-bar: 2px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-sheet: 24px; --r-pill: 999px;

  /* Layers */
  --z-bar: 5; --z-raised: 10; --z-sheet: 20; --z-drawer: 40; --z-toast: 60; --z-pop: 1000;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --d-fast: 120ms; --d-base: 220ms; --d-slow: 320ms;

  --tap: 44px;
}

/* Brother mode: a whisper of blue on the page, the mode carried by the blue accent (a full-screen tint tired the eyes).
   Same roles, same contrast targets as the default theme. */
.theme-m {
  --page: #F2F5FA; --surface: #FFFFFF; --sunken: #E7EDF6; --glow: #D9E4F5; --hover: rgb(28 38 56 / .05);
  --line: #D6DFEC; --line-soft: #E6ECF4; --line-accent: #BFD0EA; --line-strong: #3A67AE;
  --ink: #121B2B; --ink-2: #3B4A63; --ink-3: #4F5D75; --ink-4: #95A3BB;
  --accent: #3A67AE; --accent-text: #2F5CA3; --accent-deep: #25467F; --accent-soft: #A9BFE6; --brand: #7E9CD3;
  --primary: #3A67AE; --on-primary: #FFFFFF; --on-primary-2: #C9D8F2; --on-accent: #FFFFFF;
  --scrim: rgb(28 38 56 / .36);
  --shadow-1: 0 1px 2px rgb(28 38 56 / .08);
  --shadow-2: 0 6px 24px rgb(28 38 56 / .16);
  --shadow-pop: 0 18px 40px -16px rgb(28 38 56 / .38);
  --shadow-big: 0 22px 48px -24px rgb(28 38 56 / .42);
  --shadow-accent: 0 22px 48px -20px rgb(58 103 174 / .50);
  --shadow-accent-sm: 0 18px 36px -18px rgb(58 103 174 / .50);
  --shadow-knob: 0 1px 3px rgb(28 38 56 / .22);
  --edge-shade: rgb(28 38 56 / .10); --edge-light: rgb(255 255 255 / .95);
  --ic-a: #93B2EA; --ic-a2: #6F96DA; --ic-b: #2F58A0; --ic-c: #4F7FCB; --ic-c2: #3A66AE; --ic-d: #EAF2FF; --ic-n: #8FA9D6;
}

/* Sister mode: a whisper of rose on the page, the mode carried by the rose accent. */
.theme-w {
  --page: #FBF3F6; --surface: #FFFFFF; --sunken: #F5E6EC; --glow: #F3DCE5; --hover: rgb(58 31 43 / .05);
  --line: #EDD7E0; --line-soft: #F4E7EC; --line-accent: #E5BFCF; --line-strong: #B04A72;
  --ink: #2E1621; --ink-2: #5F3B4C; --ink-3: #6E4558; --ink-4: #C7A3B3;
  --accent: #B04A72; --accent-text: #92335B; --accent-deep: #7C2549; --accent-soft: #E8A9C2; --brand: #D88BAA;
  --primary: #A8436B; --on-primary: #FFFFFF; --on-primary-2: #F6D5E2; --on-accent: #FFFFFF;
  --scrim: rgb(58 31 43 / .34);
  --shadow-1: 0 1px 2px rgb(58 31 43 / .08);
  --shadow-2: 0 6px 24px rgb(58 31 43 / .16);
  --shadow-pop: 0 18px 40px -16px rgb(58 31 43 / .36);
  --shadow-big: 0 22px 48px -24px rgb(58 31 43 / .40);
  --shadow-accent: 0 22px 48px -20px rgb(176 74 114 / .50);
  --shadow-accent-sm: 0 18px 36px -18px rgb(176 74 114 / .50);
  --shadow-knob: 0 1px 3px rgb(58 31 43 / .22);
  --edge-shade: rgb(58 31 43 / .10); --edge-light: rgb(255 255 255 / .95);
  --ic-a: #F5B3CA; --ic-a2: #E78FB0; --ic-b: #A83F68; --ic-c: #C9A4E8; --ic-c2: #A57CD3; --ic-d: #FFF0F5; --ic-n: #D197B0;
}

/* Mode identity scope: shows a mode's OWN colors anywhere (a suggestion to switch, a legend), whatever mode the page is in. */
.mid-w { --m-bg: var(--sister-bg); --m-surface: var(--sister-surface); --m-line: var(--sister-line); --m-ink: var(--sister-ink); --m-ink-2: var(--sister-ink-2); --m-accent: var(--sister-accent); }
.mid-m { --m-bg: var(--brother-bg); --m-surface: var(--brother-surface); --m-line: var(--brother-line); --m-ink: var(--brother-ink); --m-ink-2: var(--brother-ink-2); --m-accent: var(--brother-accent); }

/* Moving between screens: the page crossfades (a cross-document view transition) while the bottom bar stays exactly where it is,
   so tapping a tab feels like one app, not a reload. Browsers without it just navigate. */
@view-transition { navigation: auto; }
nav[aria-label="Main"] { view-transition-name: tabbar; }
::view-transition-group(root) { animation-duration: 180ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* Mode confirmed at page load: no color transitions for two frames (amen-data.js). */
html.mode-instant, html.mode-instant * { transition: none !important; }

/* Base */
html, body { background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
html { transition: background-color var(--d-slow) var(--ease), color var(--d-slow) var(--ease); }
button, a, [role="button"], input, textarea, select { font: inherit; }
button, a, [role="button"] { cursor: pointer; touch-action: manipulation; }
body { margin: 0; }
a { color: var(--accent-text); }
a:hover { color: var(--accent-deep); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* A control drawn smaller than 44px keeps its look and gets a 44px hit area: add class="hit" (needs position). */
.hit::after { content: ""; position: absolute; inset: -4px; }

/* Interaction: every tappable thing behaves the same */
button, a, [role="button"], [role="switch"], [role="tab"], label[for] {
  transition: background-color var(--d-base) var(--ease), color var(--d-base) var(--ease),
    border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease),
    opacity var(--d-base) var(--ease), transform var(--d-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover, a:hover, [role="button"]:hover { filter: brightness(.97); }
  /* Rows (menus, lists, popovers) take the mode's hover tint; solid controls lift instead of dim. */
  [role="menuitem"]:hover, [role="menuitemradio"]:hover, [role="option"]:hover { background-color: var(--hover); filter: none; }
}
button:not(:disabled):active, a:active, [role="button"]:active { transform: scale(.97); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; }
[role="menuitem"]:focus-visible, [role="menuitemradio"]:focus-visible { background-color: var(--hover); outline-offset: -2px; }
button:disabled, [aria-disabled="true"] { opacity: .45; cursor: default; }
::selection { background: var(--line-accent); color: var(--ink); }
input, textarea { caret-color: var(--accent); accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input[type="range"] { accent-color: var(--accent); }

/* Text behavior */
h1, h2, h3, [data-ds="title"] { text-wrap: balance; }
p, [data-ds="prayer"] { text-wrap: pretty; hyphens: manual; }
[data-ds="prayer"] { font-family: var(--serif); font-weight: 300; line-height: var(--lh-head); letter-spacing: -0.01em; }

/* Components */
/* Label: one word ideally; shrinks once, then wraps to two lines, then truncates. */
.ds-label { font: 500 clamp(12px, 3.4cqw, var(--t-label))/var(--lh-ui) var(--sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ds-eyebrow { font: 600 var(--t-micro)/var(--lh-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* Section heading above a grouped list (Settings, Group admin). */
.ds-section { margin: var(--s5) 0 var(--s2); padding: 0 var(--s1); font: 600 var(--t-micro)/var(--lh-ui) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ds-meta { font: 400 var(--t-small)/var(--lh-ui) var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Button: ONE pattern, three sizes, four looks. Every pill button in every board uses these classes; a board only adds layout
   (width, flex, margin) inline. Sizes: --sm 36 (compact, keeps a 44 hit area), default 44, --lg 52 (the main action of a page or sheet).
   Looks: default (white with a line), --primary (solid), --soft (sunken, no line), --accent (lit), --ghost (text). */
.ds-btn { position: relative; box-sizing: border-box; height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 var(--t-body)/1 var(--sans); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-icon); flex-shrink: 0; }
.ds-btn--sm { height: 36px; padding: 0 var(--s3); font-size: var(--t-label); }
.ds-btn--sm::after { content: ""; position: absolute; inset: -4px 0; } /* 44 hit area */
.ds-btn--lg { height: 52px; padding: 0 var(--s5); }
.ds-btn--primary { background: var(--primary); border-color: transparent; color: var(--on-primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), var(--shadow-1); }
.ds-btn--soft { background: var(--sunken); border-color: transparent; color: var(--ink); }
.ds-btn--accent { background: var(--sunken); border: 1.5px solid var(--accent); color: var(--accent-deep); }
.ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.ds-btn--danger { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }
.ds-btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .ds-btn:not(.ds-btn--primary):not(:disabled):hover { border-color: var(--line-accent); filter: none; }
  .ds-btn--primary:not(:disabled):hover { filter: brightness(1.08); }
}

/* Segmented control: a sunken track, the chosen option is a white thumb. Used for any 2–5 exclusive choices
   (group type, Main action, gender, believer). Markup: <div role="radiogroup" class="ds-seg"><button role="radio" aria-checked>.
   --icons: square icon options. --fit: hugs its content instead of filling the row. */
.ds-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: var(--s1); border-radius: var(--r-pill); background: var(--sunken); }
.ds-seg--fit { display: inline-grid; grid-auto-columns: auto; }
.ds-seg [role="radio"] { position: relative; min-width: 0; height: 36px; padding: 0 var(--s3); border-radius: var(--r-pill); color: var(--ink-3); font: 500 var(--t-label)/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-icon); }
.ds-seg [role="radio"]::after { content: ""; position: absolute; inset: -4px 0; }
.ds-seg [role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 .5px var(--edge-shade); }
.ds-seg--icons [role="radio"] { width: 56px; height: 44px; padding: 0; }
.ds-seg--icons [role="radio"][aria-checked="true"] { color: var(--accent-deep); }
@media (hover: hover) and (pointer: fine) { .ds-seg [role="radio"][aria-checked="false"]:hover { color: var(--ink); filter: none; } }

/* Toast: one past-tense word, the same place on every screen (under the top bar), the same pill. --action holds an Undo. */
.ds-toast { position: absolute; left: 50%; top: 72px; z-index: var(--z-toast); transform: translateX(-50%); max-width: calc(100% - 2 * var(--gutter)); box-sizing: border-box;
  display: inline-flex; align-items: center; gap: var(--s-icon); min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-pill);
  background: var(--primary); color: var(--on-primary); font: 500 var(--t-label)/1 var(--sans); white-space: nowrap; box-shadow: var(--shadow-pop);
  animation: ds-toast-in var(--d-slow) var(--ease-out); pointer-events: auto; }
.ds-toast--action { padding: 0 var(--s1) 0 var(--s4); }
.ds-toast--action button { height: 32px; padding: 0 var(--s3); border-radius: var(--r-pill); color: var(--on-primary-2); font-weight: 600; }
@keyframes ds-toast-in { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } }

/* Sheet: rises from the bottom over a scrim. .ds-sheet-wrap fills the screen; .ds-sheet is the panel; .ds-grab the handle. */
.ds-sheet-wrap { position: absolute; inset: 0; z-index: var(--z-sheet); display: flex; flex-direction: column; justify-content: flex-end; }
.ds-scrim { position: absolute; inset: 0; background: var(--scrim); animation: ds-fade var(--d-base) var(--ease); }
.ds-grab { display: block; width: 36px; height: 4px; margin: 0 auto; border-radius: var(--r-pill); background: var(--ink-4); opacity: .6; }

/* Sub-page header (Journal, Settings, Group, Moderation, Ask): back or close at 44, title in the serif. */
.ds-header { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--gutter) var(--s-icon); }
/* The chevron and the page name are one back button: tap either. */
.ds-backlink { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap); margin-left: -12px; padding: 0 var(--s2) 0 12px; border-radius: var(--r-pill); color: var(--ink); text-decoration: none; min-width: 0; }
.ds-backlink .ds-title { flex: 0 1 auto; }
.ds-back { flex: none; width: var(--tap); height: var(--tap); margin-left: -12px; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.ds-title { flex: 1; min-width: 0; margin: 0; font: 300 var(--t-h2)/var(--lh-tight) var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grouped list: a white card of rows (Settings, Group admin). */
.ds-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ds-row { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s2) var(--s4); box-sizing: border-box; border-bottom: 1px solid var(--line-soft); font-size: var(--t-body); }
.ds-row:last-child { border-bottom: 0; }

/* Swipe on a list item (amen-gestures.js): drag right or left; the action is uncovered as you pull, and passing the
   threshold arms it (a small buzz). Hold for a menu. Every gesture also has a visible button. */
.ds-swipe { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ds-swipe::before, .ds-swipe::after { position: absolute; top: 6px; bottom: 6px; display: flex; align-items: center; box-sizing: border-box; padding: 0 var(--s4);
  font: 600 var(--t-label)/1 var(--sans); white-space: nowrap; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--d-fast) var(--ease), filter var(--d-fast) var(--ease); }
.ds-swipe::before { content: attr(data-right); right: 100%; width: var(--pull, 0px); justify-content: flex-end; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--accent); color: var(--on-accent); }
.ds-swipe::after { content: attr(data-left); left: 100%; width: var(--pull-l, 0px); justify-content: flex-start; border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--primary); color: var(--on-primary); }
.ds-swipe[data-left-tone="danger"]::after { background: var(--danger); color: var(--on-accent); }
.ds-swipe[data-pull="right"]::before, .ds-swipe[data-pull="left"]::after { opacity: .55; }
.ds-swipe[data-armed][data-pull="right"]::before, .ds-swipe[data-armed][data-pull="left"]::after { opacity: 1; }
.ds-swipe.ds-settling { transition: transform var(--d-base) var(--ease-out); }
.ds-held { transform: scale(.985); transition: transform var(--d-base) var(--ease); }
.ds-sheet-wrap[style*="fixed"] { z-index: var(--z-pop); }
.ds-sheet [role="menuitem"] { font: 400 var(--t-body)/1.35 var(--sans); color: var(--ink); }
.ds-sheet [role="menuitem"]:last-of-type { border-bottom: 0; }

/* Art (the rest picture, empty states): drawn on white, multiplied onto the page so its white becomes the page colour in
   every mode, with no box and no cut-out fringe. */
.ds-art { display: block; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }

/* Two-line clamp for labels (was .lbl in four boards). */
.ds-lines2, .lbl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; text-align: left; }

/* Shared motion, so no board redefines these. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ds-chip { min-height: 32px; padding: 0 var(--s3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 var(--t-label)/1 var(--sans); display: inline-flex; align-items: center; gap: var(--s-icon); position: relative; }
.ds-chip::after { content: ""; position: absolute; inset: -6px 0; } /* 44px hit area */
.ds-chip[aria-pressed="true"] { background: var(--sunken); border: 1.5px solid var(--accent); color: var(--accent-deep); }
.ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--shadow-1); }
.ds-sheet { position: relative; box-sizing: border-box; background: var(--page); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: var(--s2) var(--gutter) max(24px, env(safe-area-inset-bottom)); box-shadow: var(--shadow-2); animation: sheetUp 260ms var(--ease); }
.ds-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent-text); color: var(--on-accent); font: 600 10px/18px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.ds-switch { display: inline-block; flex: none; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--line); position: relative; transition: background-color var(--d-base) var(--ease); }
.ds-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--on-accent); box-shadow: var(--shadow-knob); transition: transform var(--d-base) var(--ease); }
.ds-switch[aria-checked="true"] { background: var(--primary); }
.ds-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Field: a text box. Pill for one line (search, name), --area for writing (a prayer, a request). */
.ds-field { box-sizing: border-box; display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: 400 var(--t-body)/1.35 var(--sans); }
.ds-field--area { align-items: flex-start; min-height: 120px; padding: var(--s3) var(--s4); border-radius: var(--r-lg); font: 300 var(--t-lead)/var(--lh-head) var(--serif); }
.ds-field input, .ds-field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; resize: none; }

/* Avatar: a person's initial in the serif. Tag: a small fact on a post (Day 2 of 30, Urgent). Icon button: 44, no fill. */
.ds-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sunken); color: var(--accent-deep); font: 400 13px/1 var(--serif); }
.ds-avatar--lg { width: 56px; height: 56px; font-size: 24px; }
.ds-tag { display: inline-flex; align-items: center; gap: var(--s1); height: 22px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--sunken); color: var(--accent-deep); font: 500 var(--t-small)/1 var(--sans); white-space: nowrap; }
.ds-tag--urgent { background: var(--danger-soft); color: var(--danger); }
.ds-icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--r-pill); color: var(--ink-2); }

/* Amen: the one button set in the serif. Given (aria-pressed) turns it the accent. */
.ds-btn--amen { font: 400 var(--t-lead)/1 var(--serif); }
.ds-btn--amen[aria-pressed="true"] { background: var(--accent-text); border-color: transparent; color: var(--on-accent); }
.scrim { background: var(--scrim); }

@keyframes ds-rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes ds-fade { from { opacity: 0; } }

/* Numbers never jump */
[data-ds="count"], .ds-badge, .ds-meta { font-variant-numeric: tabular-nums; }

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  button:active, a:active { transform: none; }
}

/* Switch on a native checkbox: <input type="checkbox" role="switch" class="sw"> */
input.sw { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 32px; margin: 0; border-radius: var(--r-pill); background: var(--line); cursor: pointer; transition: background-color var(--d-base) var(--ease); }
input.sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--on-accent); box-shadow: var(--shadow-knob); transition: transform var(--d-base) var(--ease); }
input.sw:checked { background: var(--primary); }
input.sw:checked::after { transform: translateX(20px); }

/* Glass bars: sticky top and bottom bars blur what scrolls beneath them (tinted by the page, so by the mode). */
.glass { background: color-mix(in srgb, var(--page) 72%, transparent) !important; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.glass-top { position: absolute; top: 0; left: 0; right: 0; z-index: var(--z-bar); }
.glass-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); }

/* Bottom nav (Main, Browse, Journal, You): each tab is a flat multicolor icon (amen-icons.js), no pill behind it.
   Inactive: the same artwork in gray. Active (aria-current): full color. The animation plays ONCE when you tap the tab
   (JS adds .play): Pray, the hands meet with a little twist and sparkles pop above. Browse, three books stand and one
   slides off with a twist and back. Tokens recolor everything in Brother and Sister mode. */
.nav-tab .ind { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 32px; }
.nav-tab .ind > svg { display: block; width: 30px; height: 30px; }
.ic { width: 100%; height: 100%; overflow: visible; transition: filter var(--d-slow) var(--ease), transform var(--d-base) var(--spring); }
.nav-tab:not([aria-current]) .ic { filter: grayscale(1) brightness(.74) opacity(.92); }
.nav-tab:active .ic { transform: scale(.92); }
.ic .a { fill: var(--ic-a); } .ic .a2 { fill: var(--ic-a2); } .ic .b { fill: var(--ic-b); } .ic .c { fill: var(--ic-c); }
.ic .c2 { fill: var(--ic-c2); } .ic .d { fill: var(--ic-d); } .ic .n { fill: var(--ic-n); }
.ic .ln { fill: none; stroke: var(--ic-a2); stroke-width: 2.4; stroke-linecap: round; }
/* Sidebar set, drawn like the dock icons (flat, rounded, same palette). Brother and Sister take their own accent. */
.ic .bro { fill: var(--brother-accent); } .ic .sis { fill: var(--sister-accent); }
.ic .bro-s, .ic .sis-s { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ic .bro-s { stroke: color-mix(in srgb, var(--brother-accent) 62%, #fff); } .ic .sis-s { stroke: color-mix(in srgb, var(--sister-accent) 62%, #fff); }
.ic .spark { fill: var(--ic-a2); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ic .hand, .ic .book { transform-box: fill-box; }
.nav-tab.play .ic .hand, .nav-tab.play .ic .book, .nav-tab.play .ic .spark { will-change: transform, opacity; } /* its own layer: smooth on phones */
.ic-pray .hand-b { transform-origin: 80% 100%; } .ic-pray .hand-f { transform-origin: 20% 100%; }
.ic-browse .book { transform-origin: 0% 100%; }

.nav-tab.play .ic-pray .hand-b { animation: ic-meet-b 1000ms var(--spring) both; }
.nav-tab.play .ic-pray .hand-f { animation: ic-meet-f 1000ms var(--spring) both; }
.nav-tab.play .ic-pray .s1 { animation: ic-spark 1000ms var(--ease) 380ms both; }
.nav-tab.play .ic-pray .s2 { animation: ic-spark 1000ms var(--ease) 480ms both; }
.nav-tab.play .ic-pray .s3 { animation: ic-spark 1000ms var(--ease) 560ms both; }
.nav-tab.play .ic-browse .book-3 { animation: ic-slide 1200ms cubic-bezier(.3,.9,.3,1.15) both; }
.nav-tab.play .ic-browse .book-1 { animation: ic-hop 700ms var(--spring) 160ms both; }
.nav-tab.play .ic-browse .book-2 { animation: ic-hop 700ms var(--spring) 80ms both; }
@keyframes ic-meet-b { 0% { transform: translate(-10px, 3px) rotate(-9deg) } 40% { transform: translate(1.6px, 0) rotate(1.8deg) } 55% { transform: translate(-.7px, 0) rotate(-.7deg) } 100% { transform: none } }
@keyframes ic-meet-f { 0% { transform: translate(10px, 3px) rotate(9deg) } 40% { transform: translate(-1.6px, 0) rotate(-1.8deg) } 55% { transform: translate(.7px, 0) rotate(.7deg) } 100% { transform: none } }
@keyframes ic-spark { 0% { transform: scale(0) rotate(-90deg); opacity: 0 } 30% { transform: scale(1.3) rotate(8deg); opacity: 1 } 62% { transform: scale(1) rotate(0); opacity: 1 } 100% { transform: translateY(-5px) scale(.5) rotate(40deg); opacity: 0 } }
@keyframes ic-slide { 0% { transform: none } 14% { transform: translate(0, -.9px) rotate(2.5deg) } 38% { transform: translate(9.5px, 1.2px) rotate(20deg) } 58% { transform: translate(9.5px, 1.2px) rotate(20deg) } 82% { transform: translate(-1px, 0) rotate(-4deg) } 100% { transform: none } }
@keyframes ic-hop { 0% { transform: none } 40% { transform: translateY(-1.6px) } 100% { transform: none } }
@media (prefers-reduced-motion: reduce) { .ic * { animation: none !important } .ic { transition: none !important } }
/* Ask: a soft rounded square in the lit gold. A flat fill with one fine ring (no bevel), a warm shadow that follows the accent,
   and a bold plus. The plus turns a quarter on hover and the square gives on press. */
.fab { width: 58px; height: 58px; border-radius: 20px; background: var(--glow); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; border: 0;
  box-shadow: inset 0 0 0 1.5px var(--line-accent), 0 10px 22px -10px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms ease, border-radius 200ms ease }
.fab svg { transition: transform 320ms cubic-bezier(.34,1.56,.64,1) }
.fab:hover svg { transform: rotate(90deg) }
.fab:active { transform: scale(.94); border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--line-accent), 0 4px 10px -6px color-mix(in srgb, var(--accent) 70%, transparent) }
@media (prefers-reduced-motion: reduce) { .nav-tab .ind, .nav-tab .ind svg, .fab, .fab svg { animation: none !important; transition: none !important } }