/* The app: library, upload sheet, and the pack page. */

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in oklch, var(--paper) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
  view-transition-name: bar;
}
#bar-right { display: flex; align-items: center; gap: .6rem; }
.chip {
  padding: .35rem .75rem; border-radius: 99px; font: 600 .8rem/1.2 var(--sans); text-decoration: none;
  background: var(--season-soft); color: color-mix(in oklch, var(--season) 80%, var(--ink));
}
.chip.warn { background: color-mix(in oklch, var(--rubric) 14%, var(--paper)); color: var(--rubric); }
.avatar {
  inline-size: 40px; block-size: 40px; border-radius: 50%; border: 1px solid var(--line-2); cursor: pointer;
  background: radial-gradient(circle at 30% 25%, var(--season-glow), var(--season)); color: white;
  font: 600 1.05rem/1 var(--serif);
}
.menu {
  inset: auto; position-area: bottom span-left; margin: .5rem 0 0;
  min-inline-size: 240px; padding: .5rem; border: 1px solid var(--line); border-radius: 18px; corner-shape: squircle;
  background: var(--card); color: var(--ink); box-shadow: 0 24px 60px -20px oklch(20% 0.05 270 / .35);
  opacity: 1; transform: none; transition: opacity .18s, transform .18s var(--ease), display .18s allow-discrete, overlay .18s allow-discrete;
}
.menu:not(:popover-open) { opacity: 0; transform: translateY(-6px) scale(.98); }
@starting-style { .menu:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
/* Without anchor positioning, the menu sits under the top-right corner. */
@supports not (position-area: bottom) { .menu { position: fixed; inset: 64px 1rem auto auto; } }
.menu a, .menu button { display: block; inline-size: 100%; text-align: start; padding: .7rem .8rem; border: 0; background: none; border-radius: 10px; text-decoration: none; cursor: pointer; font-size: .95rem; }
.menu a:hover, .menu button:hover { background: var(--paper-2); }
.menu-who { margin: .2rem .8rem .5rem; font: 500 1.05rem/1.3 var(--serif); }
.menu-who span { display: block; font: .8rem var(--sans); color: var(--ink-3); }

main { min-block-size: calc(100dvh - 66px); }

/* ---------- sign in ---------- */
.signin { position: relative; display: grid; place-items: center; padding: 8vh 1rem 12vh; overflow: hidden; min-block-size: calc(100dvh - 66px); }
.signin-glass {
  position: absolute; inset: -20% -10% auto; block-size: 90%; pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 30%, color-mix(in oklch, var(--season-glow) 45%, transparent), transparent 70%),
    radial-gradient(35% 45% at 70% 25%, color-mix(in oklch, var(--gold) 35%, transparent), transparent 70%),
    radial-gradient(30% 40% at 55% 60%, color-mix(in oklch, var(--rubric) 18%, transparent), transparent 70%);
  filter: blur(30px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(3%, 4%, 0) rotate(4deg); } }
.signin-card { position: relative; inline-size: min(440px, 100%); padding: 2.25rem 2rem 1.75rem; display: grid; gap: .9rem; }
.signin-card h1 { font-size: 2rem; }
.signin-card .muted { margin: 0; }
.code { font: 600 2rem/1 var(--serif); letter-spacing: .5em; text-align: center; padding: .8rem 0 .8rem .5em; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink); inline-size: 100%; font-variant-numeric: tabular-nums; }
.err { color: var(--rubric); margin: 0; min-block-size: 1.2em; font-size: .93rem; }
.err.big { font-size: 1.1rem; }

/* ---------- fields ---------- */
.field { display: grid; gap: .35rem; font-size: .9rem; color: var(--ink-2); font-weight: 550; }
.field em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  padding: .75rem .85rem; min-block-size: 46px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { field-sizing: content; min-block-size: 5lh; resize: vertical; }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--season); box-shadow: 0 0 0 4px color-mix(in oklch, var(--season) 18%, transparent); }
.row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- library ---------- */
.lib, .narrow, .pack { inline-size: min(1180px, 100% - 2rem); margin-inline: auto; padding-block: 2.5rem 6rem; }
.narrow { inline-size: min(680px, 100% - 2rem); }
.narrow h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.lib-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.75rem; }
.lib-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.nudge {
  display: block; padding: 1rem 1.2rem; margin-block-end: 1.5rem; border-radius: 16px; text-decoration: none;
  background: var(--season-soft); border: 1px dashed color-mix(in oklch, var(--season) 40%, transparent); cursor: pointer;
}
.nudge span { display: inline-block; margin-inline-start: .4rem; font-weight: 650; color: color-mix(in oklch, var(--season) 75%, var(--ink)); text-decoration: underline; }
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.scard {
  position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.4rem 1.4rem 1.2rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
  overflow: hidden;
}
.scard::before { /* a sliver of window-light along the top edge */
  content: ''; position: absolute; inset: 0 0 auto; block-size: 3px;
  background: linear-gradient(90deg, var(--season), var(--gold), var(--rubric));
  opacity: .75;
}
.scard:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px oklch(20% 0.06 270 / .38); border-color: var(--line-2); }
.scard h3 { font-size: 1.45rem; }
.scard .passage { margin: 0; font: italic 400 1rem var(--serif); color: var(--ink-2); }
.scard .idea { margin: .2rem 0 0; color: var(--ink-2); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.status { margin: auto 0 0; padding-block-start: .8rem; font-size: .85rem; color: var(--ink-3); display: flex; align-items: center; gap: .5rem; }
.status.done span { margin-inline-start: auto; color: color-mix(in oklch, var(--season) 75%, var(--ink)); font-weight: 600; }
.status.busy { color: color-mix(in oklch, var(--season) 80%, var(--ink)); font-weight: 600; }
.scard.failed .status { color: var(--rubric); font-weight: 600; }
.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--season); animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.6); opacity: .4; } }

.empty { display: grid; justify-items: center; text-align: center; gap: .9rem; padding: 6vh 1rem; max-inline-size: 560px; margin: 0 auto; }
.empty h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.empty p { margin: 0; color: var(--ink-2); }
.empty-arch {
  inline-size: 120px; block-size: 170px; margin-block-end: .5rem;
  border-radius: 60px 60px 8px 8px / 70px 70px 8px 8px;
  background:
    linear-gradient(transparent 49%, color-mix(in oklch, var(--ink) 30%, transparent) 49% 51%, transparent 51%) 0 0 / 100% 34px,
    linear-gradient(90deg, transparent 48%, color-mix(in oklch, var(--ink) 30%, transparent) 48% 52%, transparent 52%),
    linear-gradient(160deg, var(--season-glow), var(--season) 60%, var(--gold));
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--line-2), 0 30px 60px -20px var(--season);
}

/* ---------- sheets ---------- */
.sheet {
  inline-size: min(640px, 100% - 1.5rem); max-block-size: min(92dvh, 900px); padding: 0; border: 1px solid var(--line); border-radius: 26px; corner-shape: squircle;
  background: var(--card); color: var(--ink); box-shadow: 0 40px 100px -30px oklch(15% 0.05 270 / .55);
  opacity: 1; transform: none;
  transition: opacity .25s, transform .3s var(--ease), display .3s allow-discrete, overlay .3s allow-discrete;
}
.sheet:not([open]) { opacity: 0; transform: translateY(24px); }
@starting-style { .sheet[open] { opacity: 0; transform: translateY(24px); } }
.sheet::backdrop { background: oklch(15% 0.03 270 / .45); backdrop-filter: blur(6px); }
@media (max-width: 640px) { .sheet { margin: auto 0 0; inline-size: 100%; max-inline-size: 100%; border-radius: 26px 26px 0 0; } }
.sheet-body { display: grid; gap: 1rem; padding: 1.5rem clamp(1.1rem, 4vw, 2rem) 1.75rem; }
.sheet-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.sheet-head h2, .sheet-body > h2 { font-size: 1.75rem; }
.x { inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; background: var(--paper-2); font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none; }
.note { padding: .8rem 1rem; border-radius: 12px; background: var(--gold-soft); margin: 0; font-size: .95rem; }

.drop {
  display: grid; justify-items: center; gap: .35rem; text-align: center; cursor: pointer;
  padding: 1.6rem 1rem 1.4rem; border-radius: 22px; border: 1.5px dashed var(--line-2);
  background: radial-gradient(60% 80% at 50% 0%, var(--season-soft), transparent 70%), var(--paper);
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.drop:hover, .drop.over { border-color: var(--season); transform: scale(1.01); }
.drop.has { border-style: solid; border-color: color-mix(in oklch, var(--season) 60%, transparent); }
.drop-arch { inline-size: 44px; block-size: 60px; margin-block-end: .4rem; border-radius: 22px 22px 4px 4px / 28px 28px 4px 4px; background: linear-gradient(160deg, var(--season-glow), var(--season)); box-shadow: 0 10px 24px -10px var(--season); }
.drop.has .drop-arch { background: linear-gradient(160deg, var(--gold), var(--season)); }
.drop-title { font: 500 1.2rem/1.3 var(--serif); word-break: break-word; }
.drop-sub { font-size: .88rem; color: var(--ink-3); }

.progress { display: grid; gap: .6rem; }
.steps { display: flex; gap: 1rem; font-size: .9rem; color: var(--ink-3); flex-wrap: wrap; }
.steps span::before { content: '\25CB'; margin-inline-end: .35rem; }
.steps .now { color: var(--ink); font-weight: 650; }
.steps .now::before { content: '\25D0'; color: var(--season); }
.steps .done { color: color-mix(in oklch, var(--season) 70%, var(--ink)); }
.steps .done::before { content: '\25CF'; color: var(--season); }
.meter { block-size: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.meter i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: linear-gradient(90deg, var(--season), var(--gold)); transition: inline-size .3s var(--ease); }
.meter.pulse i { animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: .55; } }

/* ---------- settings ---------- */
.form { display: grid; gap: 1.1rem; padding: 1.5rem; margin-block: 1.5rem 0; }
.h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; }
.plan { padding: 1.4rem; display: grid; gap: .9rem; justify-items: start; }
.plan p { margin: 0; }
.plan .meter { inline-size: 100%; }

/* ---------- waiting ---------- */
.waiting { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: 10vh 1rem; max-inline-size: 620px; margin: 0 auto; }
.waiting h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.candle { position: relative; inline-size: 18px; block-size: 70px; border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, var(--paper-2), var(--card) 40%, var(--paper-2)); border: 1px solid var(--line-2); margin-block: 2rem .5rem; }
.candle i { position: absolute; left: 50%; bottom: 100%; inline-size: 14px; block-size: 26px; margin-left: -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(50% 70% at 50% 70%, oklch(98% 0.05 95), var(--gold) 55%, transparent 72%); opacity: .25; }
.candle.lit i { opacity: 1; animation: flicker 2.4s ease-in-out infinite; box-shadow: 0 0 40px 18px color-mix(in oklch, var(--gold) 35%, transparent); }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-1deg); } 30% { transform: scale(1.06, .96) rotate(1.5deg); } 60% { transform: scale(.97, 1.04) rotate(-.5deg); } }
.steps.big { flex-direction: column; gap: .6rem; font-size: 1.05rem; list-style: none; padding: 0; margin: .5rem 0; text-align: start; }
.steps.big li::before { content: '\25CB'; margin-inline-end: .6rem; color: var(--ink-3); }
.steps.big li.now { color: var(--ink); font-weight: 600; }
.steps.big li.now::before { content: '\25D0'; color: var(--season); display: inline-block; animation: spin 1.6s linear infinite; }
.steps.big li.done::before { content: '\2713'; color: var(--season); }
@keyframes spin { to { transform: rotate(360deg); } }
.selah { margin-block-start: 1.5rem; font: italic 400 1.1rem/1.5 var(--serif); color: var(--ink-2); }
.selah em { color: var(--ink); }

/* ---------- the pack ---------- */
.pack { display: grid; grid-template-columns: 210px minmax(0, 760px); justify-content: center; column-gap: clamp(2rem, 5vw, 4.5rem); }
.pack > :not(.secnav) { grid-column: 2; }
.sample-note { padding: .9rem 1.1rem; border-radius: 14px; background: var(--gold-soft); margin-block-end: 1.5rem; font-size: .95rem; }
.sample-note a { font-weight: 650; }
.pack-head { padding-block-end: 2rem; border-bottom: 1px solid var(--line); }
.pack-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 420; font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144; }
.by { margin: .6rem 0 0; font: italic 400 1.15rem var(--serif); color: var(--ink-2); }
.idea-wrap { margin-block: 2rem 1.2rem; padding: 1.4rem 1.6rem; border-inline-start: 3px solid var(--gold); background: linear-gradient(90deg, var(--gold-soft), transparent); border-radius: 0 16px 16px 0; }
.idea-wrap .rubric { margin-block-end: .4rem; }
.big-idea { margin: 0; font: italic 400 clamp(1.35rem, 3vw, 1.75rem)/1.35 var(--serif); }
.summary { font-size: 1.1rem; color: var(--ink-2); }
.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 2.5rem; margin-block-start: 1.5rem; }
.mini { font: 650 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.outline { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.outline li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.outline strong { display: block; font: 500 1.05rem/1.3 var(--serif); }
.outline span { display: block; font-size: .93rem; color: var(--ink-2); }
.refs { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.refs a { font: 500 1.02rem var(--serif); color: var(--ink); }
.refs span { display: block; font-size: .9rem; color: var(--ink-2); }
.ts { flex: none; min-inline-size: 3.4rem; padding: .2rem .45rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: 600 .78rem/1.3 var(--sans); color: color-mix(in oklch, var(--season) 70%, var(--ink)); font-variant-numeric: tabular-nums; cursor: pointer; }
.ts:hover { border-color: var(--season); }
.head-tools { margin-block-start: 1.5rem; }

.secnav { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 92px; align-self: start; padding-block-start: .5rem; }
.secnav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.secnav a { display: flex; align-items: baseline; gap: .7rem; padding: .55rem .7rem; border-radius: 12px; text-decoration: none; color: var(--ink-2); font-weight: 550; font-size: .95rem; transition: background .2s, color .2s; }
.secnav a span { inline-size: 2.2rem; font: 500 .95rem var(--serif); color: var(--gold); font-variant: small-caps; }
.secnav a:hover { background: var(--paper-2); color: var(--ink); }
.secnav a.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.secnav a.on span { color: var(--rubric); }
@media (max-width: 960px) {
  .pack { grid-template-columns: minmax(0, 1fr); }
  .pack > :not(.secnav) { grid-column: 1; }
  .secnav { grid-column: 1; grid-row: auto; top: 66px; z-index: 10; margin-inline: -1rem; padding: .5rem 1rem; background: color-mix(in oklch, var(--paper) 85%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .secnav ol { display: flex; overflow-x: auto; scrollbar-width: none; gap: .3rem; scroll-snap-type: x proximity; }
  .secnav a { white-space: nowrap; padding: .5rem .8rem; min-block-size: 44px; align-items: center; scroll-snap-align: start; }
  .secnav a span { inline-size: auto; }
}

.sec { position: relative; padding-block: 4rem 1rem; border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .sec > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
}}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.sec-head { display: flex; gap: 1.1rem; align-items: start; margin-block-end: 1.25rem; }
.numeral { flex: none; inline-size: 3.2rem; block-size: 4.2rem; display: grid; place-items: center; padding-block-start: .5rem; border-radius: 1.6rem 1.6rem .5rem .5rem; background: linear-gradient(170deg, var(--season-soft), var(--gold-soft)); color: var(--rubric); font: 500 1.2rem var(--serif); font-variant: small-caps; border: 1px solid var(--line); }
.sec-head h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.sec-head p { margin: .35rem 0 0; color: var(--ink-2); }
.h3 { font-size: 1.5rem; margin: 3rem 0 1rem; }

.tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1.25rem; align-items: center; }
.tool { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 40px; padding: .4rem .85rem; border: 1px solid var(--line-2); border-radius: 11px; background: var(--card); cursor: pointer; font: 600 .87rem var(--sans); color: var(--ink-2); transition: color .15s, border-color .15s; }
.tool:hover { color: var(--ink); border-color: var(--ink-3); }
.tool svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.search { display: flex; align-items: center; gap: .4rem; flex: 1 1 220px; min-block-size: 44px; padding: 0 .8rem; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); }
.search svg { inline-size: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; border: 0; background: none; font: inherit; color: var(--ink); min-block-size: 42px; outline: none; }

[contenteditable] { border-radius: 6px; transition: background .15s, box-shadow .15s; cursor: text; }
[contenteditable]:hover { background: color-mix(in oklch, var(--gold) 9%, transparent); }
[contenteditable]:focus { outline: none; background: var(--card); box-shadow: 0 0 0 2px color-mix(in oklch, var(--season) 45%, transparent); }

.transcript { max-block-size: 70vh; overflow-y: auto; padding: 1.4rem 1.6rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; font: 400 1.08rem/1.75 var(--serif); scrollbar-width: thin; }
.transcript p { margin: 0 0 1.1rem; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline; transition: opacity .2s, background .3s; border-radius: 8px; }
.transcript p.dim { opacity: .28; }
.transcript p.now { background: var(--gold-soft); box-shadow: 0 0 0 .4rem var(--gold-soft); }
.quote-pop { position: absolute; z-index: 5; padding: .55rem .9rem; border: 0; border-radius: 12px; background: var(--ink); color: var(--paper); font: 600 .88rem var(--sans); cursor: pointer; box-shadow: 0 10px 28px -10px oklch(15% 0.05 270 / .6); }

/* Documents: the guide and kids' sheet look like what they will print as. */
.doc { padding: clamp(1.4rem, 4vw, 2.6rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; box-shadow: var(--shadow); }
.doc-church { margin: 0; text-align: center; font: 650 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.doc-title { text-align: center; font-size: 1.9rem; margin: .4rem 0 1.4rem; }
.doc h4.rubric { margin-block: 1.8rem .5rem; }
.doc p { margin: 0 0 .6rem; }
.questions { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; gap: .9rem; }
.questions li { counter-increment: q; display: grid; grid-template-columns: 2rem 1fr; column-gap: .6rem; }
.questions li::before { content: counter(q); grid-row: span 2; font: 500 1.4rem/1.1 var(--serif); color: var(--gold); text-align: end; }
.questions .kind { font: 650 .66rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.prayer { font: italic 400 1.12rem/1.6 var(--serif); }
.leader { margin-block-start: 2rem; padding: 1rem 1.2rem; border-radius: 14px; background: var(--paper-2); font-size: .95rem; }
.leader h4 { font: 650 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-block-end: .4rem; }

.verse { margin: .3rem 0 .6rem; padding: .9rem 1.1rem; border-radius: 14px; background: linear-gradient(135deg, var(--season-soft), transparent 80%); border: 1px solid color-mix(in oklch, var(--season) 18%, transparent); }
.verse figcaption { display: flex; align-items: baseline; gap: .6rem; }
.verse figcaption a { font: 600 1rem var(--serif); color: color-mix(in oklch, var(--season) 70%, var(--ink)); }
.verse figcaption span { font: 650 .62rem var(--sans); letter-spacing: .12em; color: var(--ink-3); }
.verse blockquote { margin: .45rem 0 0; font: 400 1.05rem/1.6 var(--serif); }
.verse sup { font: 650 .62rem var(--sans); color: var(--rubric); margin-inline: .15rem .2rem; }
.verse.small blockquote { font-size: .98rem; }

.days { display: grid; gap: 1rem; }
.day { padding: 1.6rem clamp(1.2rem, 4vw, 2rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; box-shadow: var(--shadow); }
.day h3 { font-size: 1.6rem; margin-block-end: .8rem; }
.reflection { font: 400 1.08rem/1.7 var(--serif); }
/* An illuminated initial. */
.reflection::first-letter { float: left; font: 500 3.6rem/.85 var(--serif); padding: .35rem .5rem 0 0; color: var(--rubric); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.day .mini { margin-block: 1.2rem .3rem; }
.practice { display: flex; gap: .8rem; align-items: baseline; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: var(--gold-soft); }
.practice > span:first-child { font: 650 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rubric); flex: none; }
.print-only { display: none; }

.kids-idea { margin: 0 auto 1rem; max-inline-size: 30rem; padding: 1.1rem 1.4rem; text-align: center; border-radius: 999px; background: var(--season-soft); font: 500 1.25rem/1.4 var(--serif); }
.kids-idea p { margin: 0; }
.kq { padding-inline-start: 1.3rem; display: grid; gap: .4rem; }
.memory { margin-block: 2rem 0; padding: 1.4rem 1.4rem 1rem; border-radius: 100px 100px 18px 18px / 60px 60px 18px 18px; border: 2px solid var(--gold); text-align: center; }
.memory h4 { font: 650 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rubric); margin-block-end: .3rem; }
.memory .verse { background: none; border: 0; }
.memory .verse figcaption { justify-content: center; }
.memory blockquote { font-size: 1.25rem; }

.mail { border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.mail-meta { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; padding: 1rem 1.4rem; background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: .95rem; }
.mail-meta > span { color: var(--ink-3); font-size: .85rem; }
.mail-meta em { color: var(--ink-2); }
.mail-body { padding: 1.4rem; white-space: pre-wrap; font: 400 1.05rem/1.7 var(--serif); }

.clips { display: grid; gap: 1.2rem; }
.clip { margin: 0; display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 1.4rem; padding: 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; box-shadow: var(--shadow); align-items: start; }
@media (max-width: 560px) { .clip { grid-template-columns: 1fr; } .phone { max-inline-size: 240px; margin-inline: auto; } }
.phone { position: relative; border-radius: 22px; overflow: hidden; background: #14162a; box-shadow: 0 0 0 5px var(--paper-2), 0 0 0 6px var(--line-2), 0 20px 40px -20px oklch(15% 0.05 270 / .6); }
.phone canvas { inline-size: 100%; block-size: auto; aspect-ratio: 9 / 16; }
.phone-play { position: absolute; inset: auto auto 12px 12px; inline-size: 48px; block-size: 48px; border-radius: 50%; border: 0; background: oklch(98% 0.01 85 / .92); cursor: pointer; display: grid; place-items: center; box-shadow: 0 8px 20px -8px #0008; transition: transform .2s var(--ease); }
.phone-play:hover { transform: scale(1.08); }
.phone-play svg { inline-size: 22px; fill: #14162a; }
.phone-play.on svg { display: none; }
.phone-play.on::before { content: ''; inline-size: 14px; block-size: 14px; background: #14162a; border-radius: 3px; }
.hook { font-size: 1.4rem; margin: .1rem 0 .5rem; }
.clip-text { font: italic 400 1rem/1.6 var(--serif); color: var(--ink-2); margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.row-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.clip .meter { margin-block-start: .8rem; }

.styles { display: inline-flex; padding: .25rem; border-radius: 14px; background: var(--paper-2); margin-block-end: 1rem; }
.styles button { min-block-size: 40px; padding: .4rem 1rem; border: 0; border-radius: 11px; background: none; cursor: pointer; font: 600 .9rem var(--sans); color: var(--ink-2); }
.styles [aria-checked='true'] { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px -3px oklch(20% 0.04 270 / .25); }
.quotes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.qcard { margin: 0; }
.qcard canvas { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; border-radius: 14px; box-shadow: var(--shadow); }
.qcard figcaption { display: flex; gap: .4rem; margin-block-start: .6rem; flex-wrap: wrap; }

.trim { line-height: 2.2; max-block-size: 46vh; overflow-y: auto; padding: .5rem; border-radius: 12px; background: var(--paper); }
.trim button { border: 0; padding: .1rem .2rem; border-radius: 6px; background: none; cursor: pointer; font: 400 1.05rem var(--serif); color: var(--ink-3); }
.trim button.in { color: var(--ink); background: var(--gold-soft); }
.trim button.first { box-shadow: inset 3px 0 0 var(--season); }
.trim button.last { box-shadow: inset -3px 0 0 var(--season); }

.posts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.post, .yt { position: relative; padding: 1.1rem 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); corner-shape: squircle; box-shadow: var(--shadow); }
.post header, .yt header { display: flex; justify-content: space-between; align-items: center; margin-block-end: .5rem; }
.net { font: 650 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.post p, .yt > p { white-space: pre-wrap; margin: 0; }
.count { position: absolute; inset: auto 1rem .6rem auto; font-size: .78rem; color: var(--ink-3); }
.count.over { color: var(--rubric); font-weight: 650; }
.yt { margin-block-start: 1rem; }
.chapters { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.chapters li { display: flex; gap: .7rem; align-items: center; }

.pack-foot { padding-block: 2.5rem; font-size: .88rem; color: var(--ink-3); }

.player { position: fixed; z-index: 30; inset: auto 1rem 1rem; margin-inline: auto; max-inline-size: 560px; display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 18px; background: var(--ink); color: var(--paper); box-shadow: 0 20px 50px -18px #000a; }
.player .play { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; font-size: .9rem; }
.player input { flex: 1; accent-color: var(--gold); }
.player .pt { font: 600 .82rem var(--sans); font-variant-numeric: tabular-nums; opacity: .85; }
.player .x { background: transparent; color: var(--paper); }

.toast { position: fixed; z-index: 50; inset: auto 0 1.4rem; margin: auto; inline-size: max-content; max-inline-size: calc(100% - 2rem); padding: .75rem 1.1rem; border-radius: 14px; background: var(--ink); color: var(--paper); font-weight: 550; font-size: .95rem; box-shadow: 0 16px 40px -16px #000a; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.toast.show { opacity: 1; transform: none; }
.toast.bad { background: var(--rubric); color: white; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---------- print: only the chosen handout, as a clean page ---------- */
@media print {
  @page { margin: 16mm 18mm; }
  :root { color-scheme: light; }
  body { background: white !important; color: black; font-size: 11.5pt; }
  .bar, .secnav, .pack-head, .tools, .sec-head, .player, .toast, .sample-note, .pack-foot, .quote-pop { display: none !important; }
  .sec { display: none; border: 0; padding: 0; }
  body[data-print='guide'] #guide, body[data-print='devotional'] #devotional, body[data-print='kids'] #kids { display: block; }
  /* Printed from the browser's own menu, with no handout chosen: the whole pack, never a blank page. */
  body:not([data-print]) .sec { display: block; break-before: page; }
  body:not([data-print]) .sec-head { display: flex; }
  body:not([data-print]) .pack-head { display: block; }
  .questions li, .verse, .leader, .memory, .practice { break-inside: avoid; }
  h4, .rubric, .kind { break-after: avoid; }
  .sec > * { animation: none !important; }
  .doc, .day { border: 0; box-shadow: none; padding: 0; background: none; }
  .day { break-inside: auto; margin-block-end: 8mm; padding-block-end: 6mm; border-bottom: 1px solid #ccc; border-radius: 0; }
  .print-only { display: block; text-align: center; margin-block-end: 8mm; }
  .verse { background: none; border: 0; border-inline-start: 2px solid #999; border-radius: 0; }
  [contenteditable]:hover { background: none; }
  .pack { display: block; inline-size: auto; padding: 0; }
}

/* ---------- graphics ---------- */
.gfx-lede { margin: -.4rem 0 1rem; }
.gfx-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-block-end: .8rem; }
.gfx-bar .styles { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1.2rem; }
.chip-btn { min-block-size: 40px; padding: .4rem .85rem; border: 1px solid var(--line-2); border-radius: 99px; background: var(--card); cursor: pointer; font: 600 .87rem var(--sans); color: var(--ink-2); }
.chip-btn span { font-weight: 500; color: var(--ink-3); margin-inline-start: .2rem; }
.chip-btn[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-btn[aria-pressed='true'] span { color: color-mix(in oklch, var(--paper) 70%, transparent); }
.gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); align-items: end; margin-block-end: 1.4rem; }
.gcard { margin: 0; display: grid; gap: .5rem; }
.gcard.is-wide { grid-column: span 2; }
@media (max-width: 520px) { .gcard.is-wide { grid-column: auto; } }
.gcard canvas { inline-size: 100%; block-size: auto; border-radius: 12px; box-shadow: var(--shadow); background: var(--paper-2); }
.gcard figcaption { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; color: var(--ink-3); }
.gcard figcaption strong { display: block; color: var(--ink); font-size: .88rem; }
.gcard figcaption > span:last-child { display: flex; gap: .3rem; }
.post-img { inline-size: 100%; block-size: auto; border-radius: 10px; margin-block-end: .8rem; box-shadow: var(--shadow); }
.post header > span:last-child { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: end; }

/* ---------- inside the homepage demo ---------- */
.embed .bar, .embed .sample-note { display: none; }
.embed .secnav { top: 0; }
html.embed { scroll-padding-top: 20px; }
@media (max-width: 960px) { .embed .secnav { top: 0; } }
.replay .meter { inline-size: min(360px, 100%); }
.replay .meter i { transition: inline-size 1.1s var(--ease); }

/* ---------- print styles (public/print.js) ---------- */
.ps-doc { position: relative; }
.ps-frame { position: absolute; inset: 10px; pointer-events: none; }
.ps-corner { position: absolute; inline-size: 46px; block-size: 46px; pointer-events: none; }
.ps-corner svg { inline-size: 100%; block-size: 100%; }
.ps-corner.tl { inset: 8px auto auto 8px; }
.ps-corner.tr { inset: 8px 8px auto auto; transform: scaleX(-1); }
.ps-corner.bl { inset: auto auto 8px 8px; transform: scaleY(-1); }
.ps-corner.br { inset: auto 8px 8px auto; transform: scale(-1, -1); }
.days.ps-doc { padding: 2rem clamp(1rem, 4vw, 2rem); border-radius: var(--r); border: 1px solid var(--line); }
.days.ps-doc .day { box-shadow: none; }

.ps-list { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ps-opt { display: grid; gap: .4rem; padding: .6rem; border: 2px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; text-align: start; transition: border-color .15s, transform .15s var(--ease); }
.ps-opt:hover { transform: translateY(-2px); }
.ps-opt[aria-checked='true'] { border-color: var(--season); box-shadow: 0 0 0 3px color-mix(in oklch, var(--season) 20%, transparent); }
.ps-opt strong { font: 500 1.02rem var(--serif); }
.ps-opt small { color: var(--ink-3); font-size: .78rem; line-height: 1.35; }
.ps-opt .new { justify-self: start; padding: .1rem .5rem; border-radius: 99px; background: var(--gold-soft); font: 650 .66rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--rubric); }
.ps-swatch { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; block-size: 128px; padding: 8px 8px 0; border: 1px solid; border-radius: 10px; overflow: hidden; }
.ps-swatch img { inline-size: 100%; block-size: 46px; object-fit: cover; border-radius: 4px; }
.ps-swatch svg { inline-size: 30px; block-size: 35px; }
.ps-sw-title { font: 500 1.05rem Fraunces, Georgia, serif; }
.ps-sw-cap { position: absolute; inset: auto auto 10px 10px; inline-size: 22px; block-size: 24px; display: grid; place-items: center; font: 600 1rem Fraunces, Georgia, serif; }
.ps-sw-dots { position: absolute; inset: auto 10px 12px auto; display: flex; gap: 3px; }
.ps-sw-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; }

@media print {
  .ps-doc { padding: 6mm 9mm !important; background: var(--ps-paper) !important; }
  .ps-frame { position: fixed; inset: 0; }
  .ps-corner { position: fixed; inline-size: 14mm; block-size: 14mm; }
  .ps-corner.tl { inset: 1mm auto auto 1mm; } .ps-corner.tr { inset: 1mm 1mm auto auto; }
  .ps-corner.bl { inset: auto auto 1mm 1mm; } .ps-corner.br { inset: auto 1mm 1mm auto; }
  .ps-banner { max-block-size: 52mm; object-fit: cover; }
  .ps-head { break-after: avoid; }
}

/* art headers, credits and border bands (print.js) */
.ps-art-figure { margin: 0 0 1rem; }
.ps-banner { display: block; inline-size: 100%; block-size: auto; max-block-size: 300px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--ps-rule, #ccc), 0 0 0 4px var(--ps-paper, #fff), 0 0 0 5px var(--ps-accent2, #b08a3c); }
.ps-credit { margin-top: .55rem; text-align: center; font: italic 400 .72rem/1.4 Fraunces, Georgia, serif; color: color-mix(in oklch, var(--ps-ink, #333) 65%, transparent); }
.ps-band { position: absolute; pointer-events: none; overflow: visible; }
.ps-band.left { inset: 0 auto 0 8px; inline-size: var(--bw); block-size: 100%; }
.ps-band.top { inset: 8px 0 auto 0; block-size: var(--bh); inline-size: 100%; }
.ps-band.bottom { inset: auto 0 8px 0; block-size: var(--bh); inline-size: 100%; }
.ps-band.rays { inset: 0 0 auto 0; inline-size: 100%; block-size: 110px; }
.ps-doc.ps-pad-left { padding-inline-start: calc(clamp(1.4rem, 4vw, 2.6rem) + 54px); }
.ps-doc.ps-pad-top { padding-block-start: calc(clamp(1.4rem, 4vw, 2.6rem) + 56px); }
.ps-doc.ps-pad-y { padding-block: calc(clamp(1.4rem, 4vw, 2.6rem) + 34px); }
.ps-swatch .ps-sw-band { position: absolute; pointer-events: none; }
.ps-swatch.edge-left .ps-sw-band { inset: 0 auto 0 0; inline-size: 18px; block-size: 100%; }
.ps-swatch.edge-top .ps-sw-band { inset: 0 0 auto 0; block-size: 18px; inline-size: 100%; }
.ps-swatch.edge-left { padding-inline-start: 22px; }
.ps-swatch.edge-top { padding-block-start: 20px; }
.ps-swatch img { box-shadow: 0 0 0 1px var(--sw-b); }

@media print {
  .ps-banner { max-block-size: 62mm; }
  .ps-band { position: fixed; }
  .ps-band.left { inset: 0 auto 0 2mm; block-size: 100%; }
  .ps-band.top { inset: 0 0 auto 0; }
  .ps-band.bottom { inset: auto 0 0 0; }
  .ps-band.rays { inset: 0 0 auto 0; block-size: 24mm; }
  .ps-doc.ps-pad-left { padding-inline-start: 18mm !important; }
  .ps-doc.ps-pad-top { padding-block-start: 16mm !important; }
  .ps-doc.ps-pad-y { padding-block: 11mm !important; }
  .ps-art-figure { break-inside: avoid; }
}
.ps-head { text-align: center; margin-block-end: .4rem; }
.ps-mark { display: block; inline-size: 58px; block-size: 68px; margin: 0 auto .5rem; }
.ps-rule { block-size: 0; border: 0; inline-size: 40%; margin: .6rem auto 1.2rem; }
@media print { .ps-mark { inline-size: 16mm; block-size: 19mm; } }
@media print { .day h3, .day .rubric, .day .mini { break-after: avoid; } .day .verse, .day .practice { break-inside: avoid; } }