/* ===========================================================================
   RYBPEC — app.css
   Page compositions built on the tokens and components in theme.css.
   Load order matters: theme.css first, then this file.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Flash message region
   --------------------------------------------------------------------------- */
.flash-region { padding-top: var(--sp-05); }

/* ---------------------------------------------------------------------------
   1. Landing page
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-10) var(--sp-09);
  background:
    radial-gradient(70rem 34rem at 12% -10%, var(--surface-sage), transparent 62%),
    radial-gradient(52rem 30rem at 92% 8%, var(--accent-surface), transparent 60%);
}
.hero__grid { display: grid; gap: var(--sp-08); align-items: center; }
@media (min-width: 66rem) {
  .hero { padding-block: var(--sp-12) var(--sp-11); }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-10); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-03);
  padding: var(--sp-02) var(--sp-05) var(--sp-02) var(--sp-03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--layer-01);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.hero__title { margin-block: var(--sp-05) var(--sp-05); }
.hero__title em { font-style: normal; color: var(--primary); font-family: var(--font-serif); }
.hero__lead { font-size: 1.0625rem; line-height: 1.65; color: var(--text-secondary); max-width: 38rem; }
.hero__actions { margin-top: var(--sp-07); display: flex; flex-wrap: wrap; gap: var(--sp-04); }
.hero__note { margin-top: var(--sp-05); display: flex; align-items: center; gap: var(--sp-03); }

/* Scripture card that anchors the hero visually. */
.verse-card {
  position: relative;
  padding: var(--sp-08);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--brand-from), var(--brand-to));
  color: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.verse-card::after {
  content: '';
  position: absolute;
  inset: auto -18% -42% auto;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.verse-card__quote {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  line-height: 1.5;
}
.verse-card__cite { position: relative; margin-top: var(--sp-06); font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; font-style: normal; }
.verse-card__strip { position: relative; margin-top: var(--sp-07); padding-top: var(--sp-06); border-top: 1px solid rgba(255, 255, 255, 0.22); display: flex; gap: var(--sp-07); }
.verse-card__stat { font-size: 0.8125rem; opacity: 0.85; }
.verse-card__stat b { display: block; font-size: 1.5rem; font-weight: 600; opacity: 1; font-variant-numeric: tabular-nums; }

.feature-grid { display: grid; gap: var(--sp-05); }
@media (min-width: 42rem) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--sp-05);
  border-radius: var(--radius-md);
  background: var(--surface-sage);
  color: var(--primary);
}
.feature h3 { margin-bottom: var(--sp-03); }
.feature p { color: var(--text-secondary); font-size: 0.9375rem; }

/* Numbered journey steps */
.steps { display: grid; gap: var(--sp-05); counter-reset: step; }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--sp-06); border-top: 2px solid var(--border-subtle); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-03);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}
.step h3 { margin-bottom: var(--sp-02); }
.step p { color: var(--text-secondary); font-size: 0.9375rem; }

.cta-band {
  padding: var(--sp-09);
  border-radius: var(--radius-xl);
  background: var(--surface-sage);
  border: 1px solid var(--sage-soft);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   1b. The challenge brief (welcome.php and help.php)
   The banner echoes the printed brief: a sage field with gold discs.
   --------------------------------------------------------------------------- */
/* The sage field with gold discs from the printed brief. Shared by the welcome
   page and the registration page — --tall is the full-height version. */
.brand-band {
  position: relative;
  overflow: hidden;
  /* Grows with the viewport instead of jumping at a breakpoint, so it is
     never a wall of colour on a short phone or a thin strip on a desktop. */
  padding-block: clamp(var(--sp-07), 6vw, var(--sp-09));
  background: linear-gradient(140deg, var(--brand-from), var(--brand-to));
  color: #fff;
  text-align: center;
}
.brand-band--tall { padding-block: clamp(var(--sp-08), 9vw, var(--sp-11)); }

/* Sized in vw so the discs stay in the corners rather than creeping under the
   text on a narrow screen. */
.brand-band::before,
.brand-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.42;
}
.brand-band::before {
  width: clamp(7rem, 22vw, 15rem);
  height: clamp(7rem, 22vw, 15rem);
  left: clamp(-6rem, -9vw, -3rem);
  top: clamp(-7rem, -10vw, -3.5rem);
}
.brand-band::after {
  width: clamp(5rem, 16vw, 11rem);
  height: clamp(5rem, 16vw, 11rem);
  right: clamp(-4rem, -6vw, -2rem);
  bottom: clamp(-5rem, -7vw, -2.5rem);
}

/* Keeps the words clear of the discs on every width. */
.brand-band > .container { position: relative; }
.brand-band__org,
.brand-band__title,
.brand-band__sub { max-width: 32rem; margin-inline: auto; }

.brand-band__org {
  font-family: var(--font-serif);
  font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
  letter-spacing: 0.14em;
}
.brand-band__title {
  font-family: var(--font-serif);
  font-weight: 400;
  margin-block: var(--sp-03);
  text-wrap: balance;
}
.brand-band__sub { font-size: clamp(0.875rem, 0.82rem + 0.3vw, 0.9375rem); letter-spacing: 0.04em; }

/* Label-and-value rows for the summary table. */
.spec-list {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
  overflow: hidden;
}
.spec-list__row {
  display: grid;
  gap: var(--sp-02);
  padding: var(--sp-05) var(--sp-06);
  border-top: 1px solid var(--border-subtle);
}
.spec-list__row:first-child { border-top: 0; }
@media (min-width: 42rem) {
  .spec-list__row { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-06); align-items: start; }
}
.spec-list__term { font-size: 0.875rem; font-weight: 700; color: var(--text-secondary); }
.spec-list dd { margin: 0; }

.tick-list { list-style: none; display: grid; gap: var(--sp-03); }
.tick-list li { display: flex; align-items: flex-start; gap: var(--sp-03); }
.tick-list li > span { min-width: 0; }   /* let long lines wrap, not overflow */
.tick-list .icon { color: var(--primary); flex: none; margin-top: 0.15rem; }

.brief-quote {
  margin: 0;
  padding-left: var(--sp-05);
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.7;
}
.brief-quote cite {
  display: block;
  margin-top: var(--sp-03);
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pull-quote {
  padding: var(--sp-06);
  border-radius: var(--radius-lg);
  background: var(--surface-sage);
  border: 1px dashed var(--sage);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.9375rem;
}

/* These three grids sit inside the narrow reading column, so they must respond
   to the space they are given rather than to the viewport. A viewport media
   query would put four book cards across a 46rem column on a wide screen and
   squeeze each to a sliver; auto-fit measures the container instead. */
.book-grid {
  display: grid;
  gap: var(--sp-05);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.duty-grid {
  display: grid;
  gap: var(--sp-05);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.award-grid {
  list-style: none;
  display: grid;
  gap: var(--sp-03);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.award {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-04) var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--layer-01);
  font-size: 0.9375rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.award__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent-surface);
  color: var(--accent);
}

.sign-off {
  padding: clamp(var(--sp-07), 6vw, var(--sp-09)) var(--sp-05);
  border-radius: var(--radius-xl);
  background: var(--sage-soft);
  color: var(--text-primary);
  text-align: center;
}
.sign-off__line {
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.25rem);
  line-height: 1.8;
}
.sign-off__by { margin-top: var(--sp-04); font-size: 0.875rem; letter-spacing: 0.06em; }

.welcome-actions { padding-block: var(--sp-08) var(--sp-10); text-align: center; }
/* A thumb-width button on a phone, its natural width once there is room. */
.welcome-actions .btn { width: 100%; }
@media (min-width: 30rem) { .welcome-actions .btn { width: auto; min-width: 16rem; } }

/* ---------------------------------------------------------------------------
   2. Authentication pages
   --------------------------------------------------------------------------- */
.auth {
  display: grid;
  min-height: calc(100dvh - var(--header-h));
}
@media (min-width: 66rem) { .auth { grid-template-columns: 1fr 1fr; } }

.auth__aside {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-10);
  background: linear-gradient(160deg, var(--brand-from), var(--brand-to));
  color: #fff;
}
@media (min-width: 66rem) { .auth__aside { display: flex; } }
.auth__aside-eyebrow { color: rgba(255, 255, 255, 0.78); }
.auth__aside-quote { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.55; }
.auth__aside-list { list-style: none; display: grid; gap: var(--sp-04); font-size: 0.9375rem; }
.auth__aside-list li { display: flex; align-items: flex-start; gap: var(--sp-03); }

.auth__main { display: grid; place-items: center; padding: var(--sp-07) var(--sp-05) var(--sp-09); }
.auth__card { width: 100%; max-width: 27rem; }
.auth__title { margin-bottom: var(--sp-03); }
.auth__lead { color: var(--text-secondary); margin-bottom: var(--sp-07); }
.auth__alt { margin-top: var(--sp-06); text-align: center; font-size: 0.9375rem; color: var(--text-secondary); }

/* --- The registration journey -------------------------------------------
   A three-step flow when JavaScript is available, one plain form when it is
   not. Everything that only makes sense while stepping is scoped to
   form[data-stepped], which app.js sets — so nothing is hidden or broken for
   a reader without scripts. */

/* The card lifts over the band, which ties the two together and keeps the
   form the obvious subject of the page. */
.join { position: relative; z-index: var(--z-base); padding-bottom: var(--sp-10); }
.join__card {
  margin-top: clamp(calc(var(--sp-07) * -1), -4vw, calc(var(--sp-05) * -1));
  padding: clamp(var(--sp-06), 5vw, var(--sp-08));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--layer-01);
  box-shadow: var(--shadow-md);
}

/* Progress. The label carries the state in words, so this reads correctly even
   with no stylesheet at all; the bar is decoration layered on top. */
.journey-progress { margin-bottom: var(--sp-07); }
.journey-progress__label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-02) var(--sp-04);
  justify-content: space-between;
  margin-bottom: var(--sp-03);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-helper);
}
.journey-progress__title { color: var(--primary); }
.journey-progress__track { display: flex; gap: var(--sp-02); }
.journey-progress__track span {
  flex: 1;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--layer-03);
  transition: background-color var(--dur-moderate) var(--ease-productive);
}
.journey-progress__track span.is-done { background: var(--sage); }
.journey-progress__track span.is-current { background: var(--primary); }

/* A legend cannot be a flex container reliably, so the two lines are spans. */
.step-head { padding: 0; margin-bottom: var(--sp-06); }
.step-head__title { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.step-head__hint {
  display: block;
  margin-top: var(--sp-02);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Two fields share a row once there is room for both to stay usable. */
.field-row {
  display: grid;
  gap: 0 var(--sp-05);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start;
}

.checkbox--tight { min-height: 2.25rem; margin-top: var(--sp-03); font-size: 0.8125rem; }

.join__assurance {
  list-style: none;
  display: grid;
  gap: var(--sp-03);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: var(--sp-07);
}
.join__assurance li {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.join__assurance .icon { color: var(--primary); flex: none; }

.join__verse { margin-top: var(--sp-08); text-align: center; }
.join__verse blockquote {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 34rem;
  margin-inline: auto;
}
.join__verse figcaption {
  margin-top: var(--sp-03);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-helper);
}

.join__alt { margin-top: var(--sp-07); text-align: center; font-size: 0.9375rem; color: var(--text-secondary); }

.form-step { border: 0; padding: 0; margin: 0; }
.form-step + .form-step {
  margin-top: var(--sp-08);
  padding-top: var(--sp-07);
  border-top: 1px solid var(--border-subtle);
}
form[data-stepped] .form-step + .form-step { margin-top: 0; padding-top: 0; border-top: 0; }

.form-step__actions { display: flex; flex-wrap: wrap; gap: var(--sp-04); margin-top: var(--sp-07); }
/* Primary sits at the trailing edge on a wide screen, on top on a narrow one
   (column-reverse), which is where a thumb lands. */
.form-step__actions .btn--primary { margin-left: auto; }
@media (max-width: 30rem) {
  .form-step__actions { flex-direction: column-reverse; }
  .form-step__actions .btn { width: 100%; margin-left: 0; }
}

/* The Back and Continue buttons only work with script, so only script shows them. */
[data-step-next],
[data-step-back] { display: none; }
form[data-stepped] [data-step-next],
form[data-stepped] [data-step-back] { display: inline-flex; }

/* Conditional block — collapsed only while script is driving the form. */
form[data-stepped] .reveal[data-collapsed='true'] { display: none; }

/* --- Choice cards (radio groups that do not look like radios) ------------- */
.choice-grid { display: grid; gap: var(--sp-04); }
@media (min-width: 34rem) { .choice-grid { grid-template-columns: 1fr 1fr; } }

.choice { position: relative; display: block; cursor: pointer; }
.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.choice__body {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-04);
  min-height: 3.5rem;
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
  transition:
    border-color var(--dur-fast) var(--ease-productive),
    background-color var(--dur-fast) var(--ease-productive);
}
.choice:hover .choice__body { border-color: var(--border-interactive); background: var(--layer-hover); }
.choice input:checked + .choice__body { border-color: var(--primary); background: var(--surface-sage); }
.choice input:focus-visible + .choice__body { outline: 2px solid var(--focus); outline-offset: 2px; }

.choice__body > span { min-width: 0; }
.choice__icon { color: var(--primary); flex: none; margin-top: 0.1rem; }
.choice__title { display: block; font-size: 0.9375rem; font-weight: 600; }
.choice__blurb { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--text-secondary); }

/* A real radio mark, so "selected" is carried by shape as well as colour. */
.choice__body::after {
  content: '';
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-left: auto;
  margin-top: 0.1rem;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
}
.choice input:checked + .choice__body::after {
  border-color: var(--primary);
  background: radial-gradient(var(--primary) 0 45%, transparent 47%);
}

/* Password strength meter */
.strength { margin-top: var(--sp-03); }
.strength__track { display: flex; gap: var(--sp-02); }
.strength__seg { height: 4px; flex: 1; border-radius: var(--radius-pill); background: var(--layer-03); transition: background-color var(--dur-moderate) var(--ease-productive); }
.strength[data-level='1'] .strength__seg:nth-child(-n+1) { background: var(--support-error); }
.strength[data-level='2'] .strength__seg:nth-child(-n+2) { background: var(--support-warning); }
.strength[data-level='3'] .strength__seg:nth-child(-n+3) { background: var(--accent); }
.strength[data-level='4'] .strength__seg { background: var(--support-success); }
.strength__label { margin-top: var(--sp-02); font-size: 0.75rem; color: var(--text-helper); }

/* ---------------------------------------------------------------------------
   3. Dashboard
   --------------------------------------------------------------------------- */
.journey {
  display: grid;
  gap: var(--sp-06);
  padding: var(--sp-07);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--layer-01), var(--surface-sage));
  border: 1px solid var(--sage-soft);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) { .journey { grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-08); } }

.journey__meta { display: flex; flex-wrap: wrap; gap: var(--sp-06); margin-top: var(--sp-05); }
.journey__stat { font-size: 0.8125rem; color: var(--text-helper); }
.journey__stat b { display: block; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Two panels side by side on anything wider than a phone. */
.duo { display: grid; gap: var(--sp-05); }
@media (min-width: 48rem) { .duo { grid-template-columns: 1fr 1.4fr; align-items: stretch; } }

.stat-grid { display: grid; gap: var(--sp-05); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.stat { display: grid; gap: var(--sp-02); }
.stat__label { display: flex; align-items: center; gap: var(--sp-03); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-helper); }
.stat__value { font-size: 2rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__hint { font-size: 0.8125rem; color: var(--text-secondary); }

/* Weekly grouping — three themed blocks of seven days */
.week__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-04);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--sp-05);
  border-bottom: 2px solid var(--border-subtle);
}

.week__focus {
  margin-top: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--layer-01);
}
.week__focus summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
  min-height: 3rem;
  padding: var(--sp-03) var(--sp-05);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.week__focus summary::-webkit-details-marker { display: none; }
.week__focus summary:hover { background: var(--layer-hover); border-radius: var(--radius-md); }
.week__focus summary .icon { color: var(--text-helper); flex: none; transition: transform var(--dur-moderate) var(--ease-productive); }
.week__focus[open] summary .icon { transform: rotate(180deg); }
.week__focus-body { padding: 0 var(--sp-05) var(--sp-05); font-size: 1rem; }

/* The day tiles */
.day-grid {
  display: grid;
  gap: var(--sp-04);
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
@media (max-width: 26rem) { .day-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-03); } }

.day-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-03);
  min-height: 8.25rem;
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-productive),
    box-shadow var(--dur-fast) var(--ease-productive),
    border-color var(--dur-fast) var(--ease-productive);
}
a.day-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-interactive); }
.day-tile__num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-helper);
}
.day-tile__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; }
.day-tile__foot { margin-top: auto; font-size: 0.75rem; color: var(--text-helper); display: flex; align-items: center; gap: var(--sp-02); }

.day-tile--done { background: var(--support-success-surface); border-color: color-mix(in srgb, var(--support-success) 30%, transparent); }
.day-tile--done .day-tile__foot { color: var(--support-success); }
.day-tile--current { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent); background: var(--layer-01); }
.day-tile--current .day-tile__num { color: var(--primary); }
.day-tile--locked { background: var(--layer-02); border-style: dashed; color: var(--text-disabled); cursor: not-allowed; }
.day-tile--locked .day-tile__title { color: var(--text-helper); }

.day-badge {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--support-success);
  color: #fff;
}
.day-tile--current .day-badge { background: var(--primary); }
.day-tile--locked .day-badge { background: transparent; color: var(--text-disabled); }

/* Next-up call to action */
.next-up {
  display: grid;
  gap: var(--sp-05);
  padding: var(--sp-07);
  border-radius: var(--radius-xl);
  background: var(--layer-01);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) { .next-up { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-07); } }
.next-up__scripture { font-family: var(--font-serif); color: var(--text-secondary); }

/* Completion celebration */
.finale {
  padding: var(--sp-09);
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--brand-from), var(--brand-to));
  color: #fff;
  text-align: center;
}
.finale .btn--tertiary { --btn-fg: #fff; --btn-border: rgba(255, 255, 255, 0.5); --btn-bg-hover: rgba(255, 255, 255, 0.14); }

/* ===========================================================================
   3b. The game layer
   Progress you can feel: a well that fills, a streak that burns, milestones
   that unlock. Every state is carried by shape and text as well as colour.
   =========================================================================== */

/* --- The well ------------------------------------------------------------
   A vessel that fills as the reader draws from it. One element, one custom
   property, no images and no canvas. */
.well {
  --fill: 0%;
  position: relative;
  flex: none;
  width: 8.5rem;
  height: 11.5rem;
  border: 2px solid var(--border-strong);
  border-radius: 14px 14px 46px 46px / 14px 14px 34px 34px;
  background: linear-gradient(180deg, var(--layer-03), var(--layer-02));
  box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  justify-self: center;
}

.well__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill);
  background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
  transition: height 900ms var(--ease-productive);
}

/* Two slow, offset blobs make the surface wobble like water. */
.well__wave {
  position: absolute;
  left: 50%;
  top: -9.4rem;
  width: 10rem;
  height: 10rem;
  margin-left: -5rem;
  border-radius: 42%;
  background: var(--water-top);
  animation: well-wave 9s linear infinite;
}
.well__wave--slow {
  top: -9.7rem;
  opacity: 0.55;
  animation-duration: 14s;
  animation-direction: reverse;
}
@keyframes well-wave {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Week marks at a third and two thirds of the way up. */
.well__mark {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-strong);
  opacity: 0.55;
}
.well__mark--w1 { bottom: 33.33%; }
.well__mark--w2 { bottom: 66.66%; }

.well__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.22) 0 22%, transparent 42%);
  pointer-events: none;
}

/* --- Level ---------------------------------------------------------------- */
.level {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-03) var(--sp-05) var(--sp-03) var(--sp-03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--layer-01);
  width: max-content;
  max-width: 100%;
}
.level__badge {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: linear-gradient(140deg, var(--brand-from), var(--brand-to));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.level__title { font-size: 0.9375rem; font-weight: 600; line-height: 1.2; }
.level__blurb { font-size: 0.75rem; color: var(--text-helper); }

/* --- Streak --------------------------------------------------------------- */
.streak {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
}
.streak__flame {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--streak-surface);
  color: var(--streak);
}
/* A live streak breathes; a cold one does not. */
.streak--hot .streak__flame { animation: flame-pulse 2.6s var(--ease-productive) infinite; }
.streak--cold .streak__flame { background: var(--layer-02); color: var(--text-disabled); }
.streak--risk { border-color: var(--support-warning); background: var(--support-warning-surface); }
.streak__value { font-size: 1.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.streak__label { font-size: 0.8125rem; color: var(--text-secondary); }

/* The last seven days, one dot each, today last. A filled dot was read; a
   dashed one was missed and then caught up; a grey one was missed. */
.streak__week {
  display: flex;
  gap: var(--sp-02);
  margin: var(--sp-03) 0 0;
  padding: 0;
  list-style: none;
}
.streak__day {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-helper);
}
.streak__day--read    { background: var(--streak); border-color: var(--streak); color: var(--layer-01); }
.streak__day--bridged { border-style: dashed; border-color: var(--streak); color: var(--streak); }
.streak__day--missed  { background: var(--layer-02); border-color: transparent; color: var(--text-disabled); }
.streak__day--today   { border-color: var(--primary); color: var(--primary); }
.streak__day--idle    { opacity: 0.45; }
.streak--risk .streak__day--today { border-color: var(--support-warning); color: var(--support-warning); }

@keyframes flame-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* --- Milestones ----------------------------------------------------------- */
.milestone-grid {
  display: grid;
  gap: var(--sp-04);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.milestone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-04);
  align-items: start;
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
}
.milestone__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--layer-02);
  color: var(--text-disabled);
  border: 2px solid transparent;
}
.milestone__name { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.milestone__goal { font-size: 0.75rem; color: var(--text-helper); margin-top: var(--sp-02); }
.milestone__meter { margin-top: var(--sp-03); display: grid; gap: var(--sp-02); }
.milestone__count { font-size: 0.6875rem; color: var(--text-helper); font-variant-numeric: tabular-nums; }

/* Earned: full colour, tier ring, and the word "Earned" — never colour alone. */
.milestone--earned { background: var(--layer-01); border-color: var(--tier, var(--tier-bronze)); }
.milestone--earned .milestone__icon {
  background: color-mix(in srgb, var(--tier, var(--tier-bronze)) 14%, transparent);
  border-color: var(--tier, var(--tier-bronze));
  color: var(--tier, var(--tier-bronze));
}
.milestone--bronze { --tier: var(--tier-bronze); }
.milestone--silver { --tier: var(--tier-silver); }
.milestone--gold   { --tier: var(--tier-gold); }

.milestone--locked { background: var(--layer-02); border-style: dashed; }
.milestone--locked .milestone__name { color: var(--text-secondary); }

/* --- Week medal ----------------------------------------------------------- */
.week-medal {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tier-gold) 16%, transparent);
  color: var(--tier-gold);
  border: 1px solid var(--tier-gold);
}

/* --- Celebration ---------------------------------------------------------- */
.celebration {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-05);
  background: var(--overlay);
  animation: fade-in var(--dur-moderate) var(--ease-entrance) both;
}
.celebration__card {
  position: relative;
  width: min(30rem, 100%);
  max-height: 90dvh;
  overflow-y: auto;
  padding: var(--sp-08);
  border-radius: var(--radius-xl);
  background: var(--layer-01);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: celebrate-in 320ms var(--ease-entrance) both;
}
.celebration__seal {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--sp-05);
  border-radius: var(--radius-pill);
  background: linear-gradient(140deg, var(--brand-from), var(--brand-to));
  color: #fff;
}
.celebration__unlocks { display: grid; gap: var(--sp-03); margin-top: var(--sp-06); text-align: left; }
.celebration__unlock {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-04);
  border: 1px solid var(--tier, var(--tier-bronze));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tier, var(--tier-bronze)) 10%, transparent);
  animation: unlock-in 420ms var(--ease-entrance) both;
}
.celebration__unlock:nth-child(2) { animation-delay: 120ms; }
.celebration__unlock:nth-child(3) { animation-delay: 240ms; }
.celebration__unlock .icon { color: var(--tier, var(--tier-bronze)); flex: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes celebrate-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes unlock-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Confetti is decoration only: it is aria-hidden, and reduced motion skips it
   entirely (app.js never creates the pieces). */
.confetti { position: fixed; inset: 0; z-index: var(--z-toast); pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute;
  top: -5vh;
  width: 0.5rem;
  height: 0.85rem;
  border-radius: 1px;
  opacity: 0.9;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(108vh) rotate(720deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .well__wave { animation: none; }
  .streak--hot .streak__flame { animation: none; }
  .well__water { transition: none; }
}

/* ---------------------------------------------------------------------------
   4. Day reader
   --------------------------------------------------------------------------- */
.reader { display: grid; gap: var(--sp-07); }
@media (min-width: 66rem) { .reader { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; gap: var(--sp-09); } }

.reader__section { padding-block: var(--sp-06); border-top: 1px solid var(--border-subtle); }
.reader__section:first-of-type { border-top: 0; padding-top: 0; }
.reader__section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  margin-bottom: var(--sp-05);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-helper);
}
.reader__section-head .icon { color: var(--primary); }

/* The chapter to read: the single most important thing on the page. */
.reading-card {
  display: grid;
  gap: var(--sp-03);
  padding: var(--sp-07);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--primary), var(--bg-brand));
  color: #fff;
  box-shadow: var(--shadow-md);
}
.reading-card__ref {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem);
  line-height: 1.2;
}
.reading-card__hint { font-size: 0.875rem; opacity: 0.85; }

/* The journalling question. */
.prompt-card {
  margin: 0;
  padding: var(--sp-06) var(--sp-07);
  border-radius: var(--radius-lg);
  background: var(--accent-surface);
  border-left: 4px solid var(--accent);
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
}

/* Writing space that feels like a notebook rather than a form field. */
.journal-input {
  min-height: 12rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.assignment-block {
  padding: var(--sp-07);
  border-radius: var(--radius-lg);
  background: var(--surface-sage);
  border: 1px dashed var(--sage);
}

.week-focus-aside { font-size: 0.9375rem; line-height: 1.65; }

.scripture {
  margin: 0;
  padding: var(--sp-07);
  border-radius: var(--radius-lg);
  background: var(--surface-sage);
  border-left: 4px solid var(--accent);
}
.scripture p {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.65;
}
.scripture cite { display: block; margin-top: var(--sp-05); font-style: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }

/* --- Voice reflection player ---------------------------------------------
   Native <audio controls> is the baseline and stays if script never runs.
   .is-enhanced is added by app.js once it has built the custom controls. */
.voice__audio { width: 100%; }
.voice.is-enhanced .voice__audio { display: none; }

.voice__player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'play scrub'
    'play meta';
  align-items: center;
  gap: var(--sp-02) var(--sp-05);
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
  box-shadow: var(--shadow-sm);
}

/* A thumb-sized target, and the only large control on the card. */
.voice__play {
  grid-area: play;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-productive);
}
.voice__play:hover { background: var(--primary-hover); }
.voice__play[data-state='loading'] { opacity: 0.7; cursor: progress; }

.voice__scrub { grid-area: scrub; width: 100%; }
.voice__meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
  font-size: 0.8125rem;
  color: var(--text-helper);
  font-variant-numeric: tabular-nums;
}

/* A real range input, so keyboard and screen-reader support come for free. */
.voice__scrub {
  appearance: none;
  height: 1.5rem;                 /* generous hit area around a slim track */
  background: transparent;
  cursor: pointer;
}
.voice__scrub::-webkit-slider-runnable-track {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--layer-03);
}
.voice__scrub::-moz-range-track {
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--layer-03);
}
.voice__scrub::-webkit-slider-thumb {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: -0.375rem;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
}
.voice__scrub::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
}
.voice__scrub:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-pill); }

.voice__speed {
  min-height: 2.25rem;
  padding-inline: var(--sp-04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--layer-02);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.voice__speed:hover { background: var(--layer-hover); color: var(--text-primary); }

.voice__error {
  margin-top: var(--sp-04);
  font-size: 0.8125rem;
  color: var(--support-error);
}

/* Room for the play button and the scrubber side by side once there is any. */
@media (min-width: 26rem) {
  .voice__player { gap: var(--sp-03) var(--sp-05); padding: var(--sp-06); }
}

/* File input — the default control is unreadable inside our field styling. */
.field__control--file { padding: var(--sp-04); line-height: 1.4; cursor: pointer; }
.field__control--file::file-selector-button {
  margin-right: var(--sp-04);
  padding: var(--sp-03) var(--sp-05);
  border: 1px solid var(--border-interactive);
  border-radius: var(--radius-md);
  background: var(--layer-01);
  color: var(--link);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.field__control--file::file-selector-button:hover { background: var(--surface-sage); }

.prayer-block {
  padding: var(--sp-07);
  border-radius: var(--radius-lg);
  background: var(--accent-surface);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.prayer-block .prose { font-style: italic; }

.challenge-block {
  display: flex;
  gap: var(--sp-05);
  padding: var(--sp-06);
  border-radius: var(--radius-lg);
  background: var(--layer-01);
  border: 1px solid var(--border-subtle);
}
.challenge-block .icon { color: var(--accent); flex: none; }

/* Sticky sidebar with the day's status and actions */
.reader__aside { display: grid; gap: var(--sp-05); }
@media (min-width: 66rem) { .reader__aside { position: sticky; top: calc(var(--header-h) + var(--sp-05)); } }

.day-pager { display: flex; gap: var(--sp-04); }
.day-pager .btn { flex: 1; }

.completed-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-05);
  border-radius: var(--radius-lg);
  background: var(--support-success-surface);
  color: var(--support-success);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   5. Admin
   --------------------------------------------------------------------------- */
.admin { display: grid; gap: var(--sp-07); align-items: start; }
@media (min-width: 66rem) { .admin { grid-template-columns: var(--sidenav-w) minmax(0, 1fr); gap: var(--sp-08); } }

.side-nav { display: grid; gap: var(--sp-02); }
@media (min-width: 66rem) { .side-nav { position: sticky; top: calc(var(--header-h) + var(--sp-05)); } }
@media (max-width: 65.99rem) {
  .side-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: var(--sp-03); scrollbar-width: thin; }
}
.side-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  min-height: 2.75rem;
  padding-inline: var(--sp-04);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-productive);
}
.side-nav__link:hover { background: var(--layer-hover); color: var(--text-primary); }
.side-nav__link.is-active { background: var(--layer-selected); color: var(--text-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-04); align-items: center; justify-content: space-between; margin-bottom: var(--sp-06); }
.search-form { display: flex; gap: var(--sp-03); flex: 1 1 16rem; max-width: 24rem; }

/* Horizontal bar chart — CSS only, values labelled directly so the chart is
   readable without relying on colour or a tooltip. */
.bar-chart { display: grid; gap: var(--sp-03); }
.bar-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 3.5rem; align-items: center; gap: var(--sp-04); font-size: 0.8125rem; }
.bar-row__label { color: var(--text-helper); font-variant-numeric: tabular-nums; }
.bar-row__track { height: 0.75rem; border-radius: var(--radius-pill); background: var(--layer-03); overflow: hidden; }
.bar-row__fill { --fill: 0%; height: 100%; width: var(--fill); min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--sage), var(--primary)); }
.bar-row__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* --- Journey tracker ------------------------------------------------------ */
.standing-grid {
  display: grid;
  gap: var(--sp-04);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.standing {
  display: grid;
  gap: var(--sp-02);
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--tone, var(--border-strong));
  border-radius: var(--radius-lg);
  background: var(--layer-01);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-productive),
              box-shadow var(--dur-fast) var(--ease-productive);
}
.standing:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }
.standing.is-active { background: var(--surface-sage); border-color: var(--primary); }
.standing__icon { color: var(--tone, var(--text-helper)); }
.standing__value { font-size: 1.75rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.standing__label { font-size: 0.8125rem; color: var(--text-secondary); }

.standing--success { --tone: var(--support-success); }
.standing--warning { --tone: var(--support-warning); }
.standing--error   { --tone: var(--support-error); }
.standing--info    { --tone: var(--support-info); }

/* A slim progress bar that sits inside a table cell. */
.progress--inline { display: block; height: 0.25rem; margin-top: var(--sp-02); max-width: 6rem; }

/* Reads and listens stacked as a pair per day. */
.bar-row--paired { align-items: start; }
.bar-row__stack { display: grid; gap: 3px; }
.bar-row__fill--listen { background: linear-gradient(90deg, var(--support-info), var(--accent)); }

/* One person's twenty-one days */
.timeline { list-style: none; display: grid; gap: var(--sp-02); }
.timeline__row {
  display: grid;
  gap: var(--sp-02) var(--sp-05);
  grid-template-columns: 1fr;
  padding: var(--sp-04) var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--layer-02);
}
.timeline__row.is-read { background: var(--layer-01); border-color: var(--sage-soft); }
@media (min-width: 48rem) {
  .timeline__row { grid-template-columns: 7rem 10rem minmax(0, 1fr); align-items: center; }
}
.timeline__day {
  display: flex;
  align-items: center;
  gap: var(--sp-02);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-helper);
}
.timeline__row.is-read .timeline__day { color: var(--support-success); }
.timeline__reading { font-size: 0.875rem; }
.timeline__marks { display: flex; flex-wrap: wrap; gap: var(--sp-02); }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-04); margin-top: var(--sp-06); font-size: 0.875rem; color: var(--text-secondary); }

.row-actions { display: flex; gap: var(--sp-02); flex-wrap: wrap; align-items: center; }

/* Long free text inside a table row, folded away until asked for. */
.row-detail { margin-top: var(--sp-03); }
.row-detail summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--link);
}
.row-detail__body {
  margin-top: var(--sp-03);
  padding: var(--sp-04);
  border-radius: var(--radius-md);
  background: var(--layer-02);
  font-size: 0.8125rem;
  line-height: 1.6;
  max-width: 32rem;
  white-space: pre-line;
}

/* Role picker inside a table row */
.role-form { display: flex; gap: var(--sp-02); align-items: center; }
.field__control--sm {
  width: auto;
  min-height: var(--control-h-sm);
  padding-inline: var(--sp-04) var(--sp-08);
  font-size: 0.875rem;
}

/* One-time secret shown after an admin password reset */
.secret {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  padding: var(--sp-04) var(--sp-05);
  border-radius: var(--radius-md);
  background: var(--layer-03);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
   6. Help page
   --------------------------------------------------------------------------- */
.faq { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--layer-01); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--border-subtle); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-04);
  min-height: 3.5rem;
  padding: var(--sp-04) var(--sp-06);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--layer-hover); }
.faq summary .icon { transition: transform var(--dur-moderate) var(--ease-productive); color: var(--text-helper); flex: none; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq__body { padding: 0 var(--sp-06) var(--sp-06); color: var(--text-secondary); max-width: var(--measure); }

/* ---------------------------------------------------------------------------
   7. Blocked / error pages
   --------------------------------------------------------------------------- */
.notice-page {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--header-h));
  padding: var(--sp-08) var(--sp-05);
  text-align: center;
}
.notice-page__inner { max-width: 30rem; display: grid; gap: var(--sp-05); justify-items: center; }
.notice-page__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--support-warning-surface);
  color: var(--support-warning);
}
.notice-page__icon--error { background: var(--support-error-surface); color: var(--support-error); }

.countdown { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }