/* The Comfort Project
   Foundation: LoveWorld portal rules (brain/docs/REDESIGN.md) + Arc UI components (uiarc.dev, MIT) ported to plain CSS.
   Navy carries text and actions. Gold has three jobs: the Give button, the active nav marker, the focus ring.
   Hairlines over shadows (except tactile buttons), concentric radii, one easing family.
   No italics, no kicker labels, no decorative numbering, no glass, no stock imagery. */
:root {
  color-scheme: light;
  --ink: #071d3a;
  --ink-2: #0b2a50;
  --ink-3: #153b62;
  --gold: #f2b705;
  --gold-hover: #ffc929;
  --gold-soft: #fff6d6;
  --paper: #f5f6f4;
  --surface: #ffffff;
  --surface-muted: #eef0ee;
  --text: #071d3a;
  --text-2: #3e4a5c;
  --text-3: #5f6b7a;
  --border: #e3e6e9;
  --border-strong: #c7cdd4;
  --line-dark: rgb(255 255 255 / .16);
  --success: #17663a;
  --danger: #b42318;

  --shadow-resting: 0 1px 2px rgb(7 29 58 / .05);
  --shadow-raised: 0 8px 24px -8px rgb(7 29 58 / .18), 0 2px 6px rgb(7 29 58 / .06);
  --shadow-floating: 0 20px 48px rgb(7 29 58 / .14), 0 3px 10px rgb(7 29 58 / .06);

  --f-display: "Schibsted Grotesk", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --f-figures: "Instrument Sans", system-ui, sans-serif; /* figures use tabular numerals, not a mono face */

  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --h4: 1.125rem;
  --h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --radius-control: .5rem;
  --radius-panel: 1rem;
  --radius-surface: 1.25rem;
  --control-sm: 2.25rem; --control-md: 2.75rem; --control-lg: 3.125rem;

  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.22, 1, .36, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --d-fast: 160ms; --d-standard: 240ms;

  --gutter: clamp(16px, 3.4vw, 40px);
  --max: 1200px;
  --section: clamp(56px, 8vw, 112px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--text); font: 400 var(--text-base)/1.6 var(--f-body); letter-spacing: -.003em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
main { flex: 1 0 auto; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
em, i:not([class*="ph"]), cite, address, dfn { font-style: normal; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 0; text-wrap: balance; color: inherit; }
h1 { font-size: var(--h1); line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: var(--h2); letter-spacing: -.025em; }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: var(--text-lg); line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.muted { color: var(--text-3); }
.fig { font-family: var(--f-figures); font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 500; }
.ref { font-family: var(--f-body); font-size: var(--text-sm); font-weight: 500; color: var(--text-3); margin: 12px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-control); }
.skip:focus { top: 12px; }
.hp { position: absolute; left: -9999px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section-sm { padding-block: clamp(36px, 5vw, 72px); }
.band { background: var(--surface); border-block: 1px solid var(--border); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.head p { margin: 10px 0 0; color: var(--text-2); max-width: 58ch; }
.dark { background: var(--ink); color: #fff; --text: #fff; --text-2: rgb(255 255 255 / .78); --text-3: rgb(255 255 255 / .62); --border: var(--line-dark); --border-strong: rgb(255 255 255 / .3); --surface: rgb(255 255 255 / .04); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Buttons: affectUI gradient body + gradient rim, Astryx hover overlay, Arc press ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-md); padding: 0 18px 0 20px; border: 1px solid transparent; border-radius: 12px;
  color: #fff; font: 500 .9375rem/1 var(--f-body); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(var(--ink-3), var(--ink-2)) padding-box, linear-gradient(#2c5784, var(--ink-2) 45%, #04142a) border-box;
  box-shadow: 0 0 0 1px #04142a, 0 2px 4px rgb(7 29 58 / .14), inset 0 1px 0 rgb(255 255 255 / .08);
  transition: background-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard), transform var(--d-fast) var(--ease-standard), color var(--d-fast) var(--ease-standard);
}
.btn i { font-size: 1.1em; transition: transform 200ms var(--ease-standard); }
.btn:active:not(:disabled) { transform: scale(.97); }
@media (pointer: coarse) { .btn:active { transform: none; } }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-gold { color: var(--ink); font-weight: 600; background: linear-gradient(#f6c42a, var(--gold)) padding-box, linear-gradient(#ffd964, #e0a800 60%, #b98700) border-box; box-shadow: 0 1px 2px rgb(7 29 58 / .16), 0 2px 6px rgb(185 135 0 / .16), inset 0 1px 0 rgb(255 255 255 / .35); }
.btn-secondary { color: var(--ink); background: #fff; border-color: var(--border); box-shadow: 0 1px 2px rgb(7 29 58 / .06); }
.btn-ghost { color: var(--text-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn-light { color: var(--ink); background: #fff; border-color: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .2); }
.btn-lg { min-height: var(--control-lg); padding: 0 20px 0 22px; }
.btn-sm { min-height: var(--control-sm); padding: 0 12px; font-size: var(--text-sm); border-radius: 10px; }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: linear-gradient(#1b4672, #0e3159) padding-box, linear-gradient(#2c5784, var(--ink-2) 45%, #04142a) border-box; box-shadow: 0 0 0 1px #04142a, 0 4px 10px rgb(7 29 58 / .18), inset 0 1px 0 rgb(255 255 255 / .1); }
  .btn-gold:hover:not(:disabled) { background: linear-gradient(#f8cc45, #f4be1a) padding-box, linear-gradient(#ffd964, #e0a800 60%, #b98700) border-box; box-shadow: 0 1px 2px rgb(7 29 58 / .16), 0 4px 12px rgb(185 135 0 / .22), inset 0 1px 0 rgb(255 255 255 / .4); }
  .btn-secondary:hover:not(:disabled) { background: linear-gradient(rgb(7 29 58 / .035), rgb(7 29 58 / .035)), #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .06), 0 2px 6px rgb(7 29 58 / .05); }
  .btn-ghost:hover:not(:disabled) { background: var(--surface-muted); box-shadow: none; color: var(--text); }
  .btn-light:hover:not(:disabled) { background: var(--paper); }
  .btn:hover i.ph-arrow-right { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) { .btn, .btn i { transition: none; } .btn:active { transform: none; } }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: text-decoration-color var(--d-fast); }
@media (hover: hover) and (pointer: fine) { .text-link:hover { text-decoration-color: currentColor; } }

/* ---------- Badge (Arc) ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-muted); color: var(--text-2); font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap; text-transform: capitalize; }
.badge--new, .badge--pending { color: #7a5800; background: var(--gold-soft); border-color: #f0d98a; }
.badge--praying, .badge--reviewing, .badge--contacted { color: var(--ink-3); background: rgb(7 29 58 / .06); border-color: rgb(7 29 58 / .16); }
.badge--approved, .badge--paid, .badge--followed_up, .badge--active { color: var(--success); background: color-mix(in oklab, var(--success) 10%, #fff); border-color: color-mix(in oklab, var(--success) 25%, var(--border)); }
.badge--declined, .badge--failed, .badge--suspended, .badge--refunded { color: var(--danger); background: color-mix(in oklab, var(--danger) 8%, #fff); border-color: color-mix(in oklab, var(--danger) 22%, var(--border)); }

/* ---------- Top bar (light chrome, always visible) ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--border); }
.topbar-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text b { font: 700 1.0625rem/1.15 var(--f-display); letter-spacing: -.02em; }
.brand-text small { font-size: .75rem; color: var(--text-3); }
.nav-links { display: flex; gap: 2px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav-links a { position: relative; display: block; padding: 10px 10px; border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 500; color: var(--text-2); text-decoration: none; transition: color var(--d-fast), background-color var(--d-fast); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -13px; height: 2px; background: var(--gold); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--text); background: var(--surface-muted); } }
.nav-cta { display: flex; gap: 8px; align-items: center; }
.nav-links a { white-space: nowrap; }
.nav-me { gap: 6px; }
/* signed in, the name button joins the bar: drop the name before any link has to wrap */
@media (max-width: 1400px) { .nav-me { width: var(--control-md); padding: 0; justify-content: center; } .nav-me-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .nav-me i { font-size: 1.25rem; } }
.nav-toggle { display: none; width: var(--control-md); height: var(--control-md); border-radius: var(--radius-control); border: 1px solid var(--border-strong); background: #fff; font-size: 1.25rem; cursor: pointer; place-items: center; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 59; background: rgb(7 29 58 / .45); opacity: 0; visibility: hidden; transition: opacity var(--d-standard) var(--ease-standard), visibility 0s linear var(--d-standard); }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer { position: fixed; z-index: 60; top: 8px; right: 8px; bottom: 8px; width: min(360px, calc(100vw - 16px)); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-surface); box-shadow: var(--shadow-floating); padding: 16px; display: flex; flex-direction: column; gap: 2px; transform: translateX(calc(100% + 16px)); visibility: hidden; transition: transform 300ms var(--ease-enter), visibility 0s linear 300ms; overflow-y: auto; }
.drawer.is-open { transform: none; visibility: visible; transition: transform 300ms var(--ease-enter), visibility 0s; }
.drawer a.d-link { padding: 12px; border-radius: var(--radius-control); text-decoration: none; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .drawer a.d-link:hover { background: var(--surface-muted); } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px 12px; }
@media (max-width: 1279px) { .nav-links, .nav-cta .hide-md { display: none; } .nav-toggle { display: inline-grid; } .nav-cta { margin-left: auto; } }

/* ---------- Home intro (typographic, no photo) ---------- */
.intro { background: #fff; border-bottom: 1px solid var(--border); padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 80px); }
.intro-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.intro h1 { max-width: 16ch; }
.intro .lead { margin: 20px 0 28px; }
@media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } }

/* Help routes: one bordered group, divided rows (Arc composition, useLayouts stacked list) */
.routes { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.routes a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 20px; color: var(--ink); text-decoration: none; border-top: 1px solid #eef0f2; transition: background-color var(--d-fast) var(--ease-standard); }
.routes a:first-child { border-top: 0; }
.routes a span { display: grid; gap: 2px; }
.routes b { font-weight: 600; }
.routes small { color: var(--text-3); font-size: var(--text-sm); }
.routes i { flex: none; color: #8a96a3; transition: transform var(--d-fast) var(--ease-standard), color var(--d-fast); }
.routes a:active { background: #f7f8f9; }
@media (hover: hover) and (pointer: fine) { .routes a:hover { background: #f9faf9; } .routes a:hover i { color: var(--ink); transform: translateX(2px); } }

/* ---------- Persona directory ---------- */
.directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 40px); }
.directory section h3 { font-size: var(--h4); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.directory a { display: grid; gap: 2px; padding: 14px 12px; margin: 0 -12px; border-bottom: 1px solid var(--border); text-decoration: none; border-radius: var(--radius-control); transition: background-color var(--d-fast); }
.directory a b { font-weight: 600; font-size: 1.0625rem; }
.directory a small { color: var(--text-3); font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) { .directory a:hover { background: #fff; } .directory a:hover b { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 900px) { .directory { grid-template-columns: 1fr; gap: 32px; } }
.finder { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-surface); background: #fff; }
.finder h3 { grid-column: 1 / -1; font-size: var(--h4); }
@media (max-width: 900px) { .finder { grid-template-columns: 1fr; } }

/* ---------- Columns with a rule on top ---------- */
.cols { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: clamp(20px, 3vw, 40px); }
.col { border-top: 2px solid var(--ink); padding-top: 16px; display: grid; gap: 6px; align-content: start; text-decoration: none; }
.col h3 { font-size: var(--h3); }
.col .sub { color: var(--text-3); font-size: var(--text-sm); }
.col p { margin: 6px 0 0; color: var(--text-2); }
.dark .col { border-color: var(--gold); }
@media (hover: hover) and (pointer: fine) { a.col:hover h3 { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 960px) { .cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }

/* ---------- Scripture ---------- */
.verse blockquote { margin: 0; max-width: 30ch; font: 500 var(--h2)/1.25 var(--f-display); letter-spacing: -.02em; }
.verse .w { opacity: .22; transition: opacity var(--d-standard); }
.verse .w.is-lit, .no-motion .verse .w { opacity: 1; }
.verse-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-surface); background: var(--ink); color: #fff; }
.verse-card blockquote { margin: 0; font: 500 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.3 var(--f-display); letter-spacing: -.02em; }
.verse-card .ref { color: rgb(255 255 255 / .65); }

/* ---------- Episodes ---------- */
.ep-list { display: grid; border-top: 1px solid var(--border); }
.ep-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.ep-row .thumb { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--ink-3); display: grid; place-items: center; color: rgb(255 255 255 / .6); font-size: 1.5rem; }
.ep-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ep-row b { display: block; font-weight: 600; }
.ep-row small { color: var(--text-3); font-size: var(--text-sm); }
@media (hover: hover) and (pointer: fine) { .ep-row:hover b { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 560px) { .ep-row { grid-template-columns: 112px 1fr; } .ep-row > :last-child { display: none; } }
.media-frame { aspect-ratio: 16 / 9; border-radius: var(--radius-surface); overflow: hidden; background: var(--ink); display: grid; place-items: center; color: rgb(255 255 255 / .6); }
.media-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Give band ---------- */
.give { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-surface); background: var(--ink); color: #fff; }
.give p { color: rgb(255 255 255 / .78); margin: 12px 0 0; max-width: 62ch; }
.quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-amounts a { min-width: 72px; text-align: center; padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: var(--radius-control); text-decoration: none; font-family: var(--f-figures); transition: border-color var(--d-fast), background-color var(--d-fast), transform var(--d-fast) var(--ease-standard); }
.quick-amounts a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .quick-amounts a:hover { border-color: #fff; background: rgb(255 255 255 / .08); } }
@media (max-width: 860px) { .give { grid-template-columns: 1fr; } }

/* ---------- Inner pages ---------- */
.page-head { background: #fff; border-bottom: 1px solid var(--border); padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 3vw, 44px); margin-bottom: clamp(28px, 4vw, 48px); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: 14px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); color: var(--text-3); margin-bottom: 16px; }
.crumbs a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--text); text-decoration: underline; } }
.crumbs i { font-size: .75rem; }
.suggested { width: fit-content; padding: 6px 12px; border-radius: 999px; background: var(--gold-soft); color: #6b4e00; font-size: var(--text-sm); font-weight: 500; margin-bottom: 16px; }
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.reasons > div { border-top: 1px solid var(--border); padding-top: 16px; }
.reasons h3 { font-size: var(--h3); }
.reasons p { margin: 8px 0 0; color: var(--text-2); font-size: 1.0625rem; max-width: 52ch; }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; } }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ticks i { color: var(--success); flex: none; transform: translateY(2px); }
.cta-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
@media (max-width: 760px) { .cta-card { grid-template-columns: 1fr; } }
.thanks { text-align: center; padding: clamp(48px, 9vw, 112px) 0; }
.thanks .tick { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 1.5rem; }
.thanks h1 { margin: 0 auto; max-width: 18ch; }
.thanks .lead { margin: 14px auto 24px; }
.thanks .row { justify-content: center; }

/* Accordion (Arc) */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 var(--text-lg)/1.35 var(--f-display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; transition: transform var(--d-standard) var(--ease-standard); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .answer { padding: 0 40px 18px 0; color: var(--text-2); }

/* ---------- Cards, lists, notices ---------- */
.card { border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface); padding: clamp(20px, 2.4vw, 28px); }
a.card { display: block; text-decoration: none; transition: border-color var(--d-fast), transform var(--d-standard) var(--ease-standard), box-shadow var(--d-standard) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { a.card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-raised); } }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-title h2, .card-title h3 { font-size: var(--h4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; }
.list li:last-child { border-bottom: 0; }
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-panel); background: var(--gold-soft); color: #5c4300; font-size: var(--text-sm); border: 1px solid #f0d98a; }
.notice i { font-size: 1.25rem; flex: none; }
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 20px; color: var(--text-3); }
.empty i { font-size: 2rem; color: var(--border-strong); }
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--text-2); max-width: 68ch; }
.prose h2 { font-size: var(--h3); margin: 1.6em 0 .5em; color: var(--text); }
.prose b { color: var(--text); }
.prose ul { padding-left: 1.2em; }

/* ---------- Forms (Arc input, radio cards, stepper) ---------- */
.form { display: grid; gap: 20px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-2 { grid-template-columns: 1fr; } }
.field { display: grid; min-width: 0; align-content: start; }
.field > label, .label { margin-bottom: 8px; font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.hint { padding-top: 6px; font-size: var(--text-xs); color: var(--text-3); margin: 0; }
.input, .select, .textarea { width: 100%; height: var(--control-md); min-height: var(--control-md); line-height: 1.2; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: #fff; color: var(--ink); font-size: var(--text-sm); outline: none; box-shadow: inset 0 1px 2px rgb(7 29 58 / .04); transition: border-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast); }
.select { appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233e4a5c' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 01-11.32 0l-80-80a8 8 0 0111.32-11.32L128 164.69l74.34-74.35a8 8 0 0111.32 11.32z'/%3E%3C/svg%3E") no-repeat right 12px center; }
.textarea { height: auto; min-height: 150px; padding: 12px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
@media (hover: hover) and (pointer: fine) { .input:hover, .select:hover, .textarea:hover { border-color: var(--ink); } }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgb(242 183 5 / .35); }
.field-error { padding-top: 6px; margin: 0; font-size: var(--text-xs); color: var(--danger); }
.check { position: relative; display: block; padding-left: 28px; font-size: var(--text-sm); line-height: 1.5; cursor: pointer; }
.check input { position: absolute; left: 0; top: 1px; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.option { position: relative; display: block; }
.option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; }
.option span { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: #fff; font-size: var(--text-sm); font-weight: 500; box-shadow: 0 1px 2px rgb(7 29 58 / .05); transition: border-color var(--d-fast), box-shadow var(--d-fast), transform var(--d-fast) var(--ease-standard); }
.option input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), 0 2px 6px rgb(7 29 58 / .1); }
.option input:active + span { transform: scale(.98); }
.option input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .option:hover span { border-color: var(--ink); } }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amounts .option span { justify-content: center; font-family: var(--f-figures); font-size: var(--text-lg); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); padding: 3px; gap: 2px; width: fit-content; }
.seg label { position: relative; display: inline-flex; }
.seg label input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg label span { min-height: var(--control-sm); padding: 0 14px; border-radius: 5px; color: var(--text-3); font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; transition: color var(--d-fast), background-color var(--d-fast); }
.seg input:checked + span { color: var(--text); background: #fff; box-shadow: 0 1px 2px rgb(7 29 58 / .1), inset 0 0 0 1px var(--border); }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
.form-card { border: 1px solid var(--border); border-radius: var(--radius-surface); background: #fff; padding: clamp(20px, 4vw, 36px); }
.form-shell { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.form-aside { position: sticky; top: 92px; display: grid; gap: 16px; }
@media (max-width: 960px) { .form-shell { grid-template-columns: 1fr; } .form-aside { position: static; } }
.stepper { display: flex; gap: 6px; list-style: none; margin: 0 0 24px; padding: 0; }
.stepper li { flex: 1; display: grid; gap: 8px; font-size: var(--text-xs); color: var(--text-3); }
.stepper li::before { content: ""; height: 4px; border-radius: 4px; background: var(--surface-muted); transition: background-color var(--d-standard); }
.stepper li.is-done::before { background: var(--ink); }
.stepper li.is-done { color: var(--text); }
.step-panel[hidden] { display: none; }
.auth-shell { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: stretch; }
.auth-shell .verse-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; }
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-shell .verse-card { min-height: 0; } }

/* Toasts (Arc) */
.toasts { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: #fff; color: var(--ink); box-shadow: var(--shadow-floating); font-size: var(--text-sm); animation: toast-in 280ms var(--ease-enter) both; }
.toast.is-leaving { animation: toast-out 160ms var(--ease-exit) both; }
.toast > i { font-size: 1.25rem; flex: none; }
.toast-success > i { color: var(--success); } .toast-info > i { color: var(--ink-3); } .toast-error > i { color: var(--danger); }
.toast button { margin-left: auto; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: 6px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ---------- Footer (compact, pinned to bottom on short pages) ---------- */
.footer { flex-shrink: 0; background: var(--ink); color: #fff; padding: 48px 0 24px; margin-top: var(--section); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line-dark); }
.footer .brand { color: #fff; }
.footer .brand-text small { color: rgb(255 255 255 / .6); }
.footer p { color: rgb(255 255 255 / .7); font-size: var(--text-sm); margin: 14px 0 0; max-width: 38ch; }
.footer h4 { font: 600 var(--text-sm)/1 var(--f-body); letter-spacing: 0; margin: 4px 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: rgb(255 255 255 / .72); text-decoration: none; font-size: var(--text-sm); transition: color var(--d-fast); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: #fff; text-decoration: underline; } }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: var(--text-xs); color: rgb(255 255 255 / .55); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Motion setup ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-enter), transform 500ms var(--ease-enter); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.btn-outline-light { color: #fff; background: transparent; border-color: rgb(255 255 255 / .35); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn-outline-light:hover:not(:disabled) { background: rgb(255 255 255 / .08); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .verse .w { opacity: 1; }
}

/* Crisis help (shown when Jev flags risk) */
.crisis { text-align: left; margin-bottom: 40px; padding: 24px; border: 2px solid var(--danger); border-radius: var(--radius-surface); background: #fff; }
.crisis h2 { font-size: var(--h3); margin-bottom: 8px; }
.crisis .row { margin: 16px 0 8px; }

/* Ask a question (Praxiom) */
.chat { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.chat-q { justify-self: end; max-width: 80%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; }
.chat-a { max-width: 90%; padding: 16px 18px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--border); color: var(--text-2); }
.chat-a p:last-child { margin-bottom: 0; }
.is-busy { opacity: .6; pointer-events: none; }

/* ---------- Photography (documentary) ---------- */
.photo { position: relative; overflow: hidden; background: var(--surface-muted); border-radius: var(--radius-surface); }
.photo img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgb(0 0 0 / .08); outline-offset: -1px; }
.photo figcaption { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--ink); font-size: var(--text-sm); box-shadow: 0 6px 18px rgb(7 29 58 / .14); }
.photo figcaption b { font-weight: 600; }
.intro-grid.has-photo { grid-template-columns: 6fr 5fr; align-items: stretch; }
.intro-photo { aspect-ratio: 4 / 5; max-height: 640px; }
@media (max-width: 900px) { .intro-grid.has-photo { grid-template-columns: 1fr; } .intro-photo { aspect-ratio: 4 / 3; } }
.col .col-photo { aspect-ratio: 4 / 3; margin-bottom: 12px; border-radius: var(--radius-panel); overflow: hidden; background: var(--surface-muted); }
.col .col-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { a.col:hover .col-photo img { transform: scale(1.03); } }
.studio-shot { aspect-ratio: 16 / 9; }
.give.has-photo { grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; align-items: stretch; }
.give.has-photo .give-copy { padding: clamp(28px, 4vw, 48px); display: grid; gap: 16px; align-content: center; }
.give.has-photo .photo { border-radius: 0; min-height: 320px; }
@media (max-width: 860px) { .give.has-photo { grid-template-columns: 1fr; } }
.head-photo { aspect-ratio: 4 / 3; }

/* ---------- Page loader (uiball dot spinner) ---------- */
.page-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgb(245 246 244 / .86); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-standard), visibility 0s linear 200ms; }
.page-loader { grid-auto-flow: row; align-content: center; gap: 18px; }
.loader-label { margin: 0; font-weight: 600; color: var(--ink); text-align: center; }
.loader-label:empty { display: none; }
.is-loading .page-loader { opacity: 1; visibility: visible; transition-delay: 0s; }
.loader-dots { --uib-size: 40px; --uib-color: var(--ink); --uib-speed: 1.5s; --dot-size: calc(var(--uib-size) * .17); position: relative; display: flex; align-items: center; justify-content: flex-start; height: var(--uib-size); width: var(--uib-size); animation: loader-smooth calc(var(--uib-speed) * 1.8) linear infinite; }
.loader-dots .dot { position: absolute; top: 0; left: 0; display: flex; align-items: flex-start; justify-content: center; height: 100%; width: 100%; animation: loader-rotate var(--uib-speed) ease-in-out infinite; }
.loader-dots .dot::before { content: ""; height: var(--dot-size); width: var(--dot-size); border-radius: 50%; background-color: var(--uib-color); }
.loader-dots .dot:nth-child(2), .loader-dots .dot:nth-child(2)::before { animation-delay: calc(var(--uib-speed) * -.835 * .5); }
.loader-dots .dot:nth-child(3), .loader-dots .dot:nth-child(3)::before { animation-delay: calc(var(--uib-speed) * -.668 * .5); }
.loader-dots .dot:nth-child(4), .loader-dots .dot:nth-child(4)::before { animation-delay: calc(var(--uib-speed) * -.501 * .5); }
.loader-dots .dot:nth-child(5), .loader-dots .dot:nth-child(5)::before { animation-delay: calc(var(--uib-speed) * -.334 * .5); }
.loader-dots .dot:nth-child(6), .loader-dots .dot:nth-child(6)::before { animation-delay: calc(var(--uib-speed) * -.167 * .5); }
@keyframes loader-rotate { 0% { transform: rotate(0deg); } 65%, 100% { transform: rotate(360deg); } }
@keyframes loader-smooth { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader-dots, .loader-dots .dot { animation-duration: 3s !important; animation-iteration-count: infinite !important; } }

/* ---------- Join: one block for everyone (partials/picker.php) ---------- */
.joinall { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.joinall-who { padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 18px 40px -28px rgb(7 29 58 / .35); }
.joinall-main { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 520px; border-radius: 20px; background: var(--ink); color: #fff; }
.joinall-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.joinall-main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(4 16 33 / .96) 0%, rgb(4 16 33 / .82) 42%, rgb(4 16 33 / .1) 78%); }
.joinall-copy { padding: clamp(24px, 3vw, 40px); }
.joinall h3 { margin: 0 0 10px; font-size: var(--h3); letter-spacing: -.02em; }
.joinall-lead { margin: 0 0 16px; color: rgb(255 255 255 / .86); line-height: 1.6; max-width: 54ch; }
.joinall-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 24px; }
.joinall-links a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(242 183 5 / .6); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .joinall-links a:hover { text-decoration-color: var(--gold); } }
.joinall-who > .muted { margin: 0 0 18px; line-height: 1.6; }
.joinall-group { padding: 12px 0; border-top: 1px solid var(--border); }
.joinall-group p { margin: 0 0 8px; font-size: var(--text-sm); font-weight: 600; color: var(--text-3); }
.joinall-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.joinall-group li { padding: 6px 11px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.joinall .own-words { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .joinall { grid-template-columns: 1fr; }
  .joinall-main { min-height: 460px; }
}
.own-words { margin-top: 24px; display: grid; gap: 8px; }
.own-words label { font-weight: 600; }
.own-words-row { display: flex; gap: 8px; }
.own-words .textarea { width: 100%; min-height: 96px; resize: vertical; }
.own-words > .btn { justify-self: start; }
.rh-shimmer { display: inline-block; background-image: linear-gradient(90deg, var(--text-3) 35%, var(--ink) 50%, var(--text-3) 65%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rh-shimmer 1.8s linear infinite; }
@keyframes rh-shimmer { from { background-position: 150% center; } to { background-position: -50% center; } }
.own-words-row .input { min-height: var(--control-lg); flex: 1; }
@media (max-width: 640px) { .own-words-row { flex-direction: column; } }

/* /join: guided-start card (Arc cta row; hover lift per transitions.dev card hover) */

/* Dark sections: nav hover pill must stay dark so link text stays readable */
.section-watch .nav-pill { background: rgb(255 255 255 / .1); }
@media (hover: hover) and (pointer: fine) { .section-watch .nav-links a:hover { color: #fff; } }

/* About: structure diagram (from the owner's own structure graphic) and pulled statements */
.statement { margin: 0; max-width: 24ch; font: 600 var(--h1)/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.dark .statement { color: #fff; }
.structure { display: grid; gap: 12px; }
.structure .node { padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: #fff; text-align: center; text-decoration: none; transition: border-color var(--d-fast), box-shadow var(--d-standard) var(--ease-standard), transform var(--d-standard) var(--ease-standard); }
.structure .node b { display: block; font: 600 var(--h3)/1.2 var(--f-display); letter-spacing: -.02em; }
.structure .node small { color: var(--text-3); font-size: var(--text-sm); }
.structure .node.top { background: var(--ink); border-color: var(--ink); color: #fff; padding: 32px 24px; }
.structure .node.top b { font-size: var(--h2); }
.structure .node.top small { color: rgb(255 255 255 / .7); }
.structure .row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.structure .node.base { background: var(--paper); }
.structure .link-down { justify-self: center; color: var(--text-3); font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .structure a.node:hover { border-color: var(--border-strong); box-shadow: var(--shadow-raised); transform: translateY(-2px); } }
@media (max-width: 900px) { .structure .row4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .structure .row4 { grid-template-columns: 1fr; } }

/* Header search button */
.nav-search { display: inline-grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 1.2rem; transition: background-color var(--d-fast), color var(--d-fast); }
@media (hover: hover) and (pointer: fine) { .nav-search:hover { background: var(--surface-muted); color: var(--ink); } }
.section-watch .nav-search { color: rgb(255 255 255 / .8); }
@media (hover: hover) and (pointer: fine) { .section-watch .nav-search:hover { background: rgb(255 255 255 / .1); color: #fff; } }

/* Phones: keep the top bar inside 390px (search moves into the drawer) */
@media (max-width: 560px) {
  .topbar-in { gap: 10px; }
  .brand-text small { display: none; }
  .brand-text b { font-size: .9375rem; }
  .nav-search { display: none; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn-gold { padding: 0 14px; }
}

/* Praxiom's note after the join stepper */
.join-note { display: grid; grid-template-columns: 28px 1fr; gap: 12px; margin: 0 0 20px; padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 8px 24px -16px rgb(7 29 58 / .3); }
.join-note img { border-radius: 8px; }
.join-note p { margin: 0; line-height: 1.6; color: var(--ink); }
.join-note .join-note-label { margin-bottom: 2px; font-size: var(--text-xs); font-weight: 600; color: var(--text-3); }
.join-summary { margin: 0 0 16px; padding: 4px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.join-summary div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.join-summary div:last-child { border-bottom: 0; }
.join-summary dt { font-size: var(--text-sm); color: var(--text-3); }
.join-summary dd { margin: 0; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.join-edit { margin-bottom: 18px; }
.join-edit > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.join-edit > summary::-webkit-details-marker { display: none; }
.join-edit > summary i { transition: transform 150ms ease-out; }
.join-edit[open] > summary { margin-bottom: 14px; }
.join-edit[open] > summary i { transform: rotate(180deg); }

/* About: Scripture quoted inside the owner's text */
.about-verse { margin: 24px 0; padding: 20px 22px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.about-verse p { margin: 0 0 8px; font-size: 1.1875rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.about-verse cite { font-style: normal; font-size: var(--text-sm); color: var(--text-3); }

/* Personalisation: Praxiom's mark where it writes */
.ai-mark { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-3); }
.ai-mark img { border-radius: 5px; }
.fy-loading { margin: 0; }
.fy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fy-item { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink); text-decoration: none; transition-property: box-shadow, background-color; transition-duration: 150ms; transition-timing-function: ease-out; }
.fy-kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-3); }
.fy-item b { font-weight: 600; line-height: 1.35; }
.fy-why { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; }
@media (hover: hover) and (pointer: fine) { .fy-item:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--border-strong); } }
.cm-fit { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgb(242 183 5 / .14); color: var(--ink); font-size: var(--text-sm); line-height: 1.45; }
.cm-fit img { border-radius: 5px; flex: none; margin-top: 1px; }
.cm-fit[hidden], .cm-fit-none[hidden] { display: none; }
.cm-fit-none { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--border); }