/* reflect.css — lifted out of reflect.html verbatim when each feature on that page got its
   own page. Shared by reflect.html and its feature pages; nothing was restyled.
   ========================================================================== */

.page-hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.view { display: none; }
.view.is-active { display: block; animation: view-in 500ms var(--ease-out); }

@keyframes view-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============ Full examination ============ */

.exam-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 820px) {
  /* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` floors at the rail's min-content,
     so the horizontal rail widened the page instead of scrolling itself. */
  .exam-layout { grid-template-columns: minmax(0, 1fr); }
}

.exam-rail {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0.15rem;
}

@media (max-width: 820px) {
  .exam-rail {
    position: static;
    grid-auto-flow: column;
    overflow-x: auto;
    gap: 0.3rem;
    padding-bottom: 0.5rem;
  }
}

.rail-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-sm);
  text-align: left;
  font-size: 0.8rem;
  color: var(--ink-3);
  transition: background 200ms, color 200ms;
  white-space: nowrap;
}

.rail-item:hover { background: var(--paper-2); color: var(--ink); }

.rail-item .rn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  min-width: 1.6rem;
  color: var(--ink-3);
  transition: color 200ms;
}

.rail-item.is-current { background: color-mix(in oklab, var(--purple) 8%, var(--tint)); color: var(--ink); font-weight: 500; }
.rail-item.is-current .rn { color: var(--purple-ink); }

.rail-item .flag {
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--orange);
  opacity: 0;
  transition: opacity 200ms;
}
.rail-item.has-marks .flag { opacity: 1; }

@media (max-width: 820px) {
  .rail-item { padding: 0.45rem 0.7rem; }
  .rail-item .theme-label { display: none; }
  .rail-item .flag { margin-left: 0.15rem; }
}

/* commandment panel */
.cmd-head {
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative;
  overflow: hidden;
  margin-bottom: 1.8rem;
}

.cmd-head .rn {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(3.2rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--purple);
  opacity: 0.9;
}

.cmd-head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  font-weight: 500;
  margin-top: 0.8rem;
  max-width: 30rem;
}

.cmd-head .theme {
  margin-top: 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--purple) 75%, var(--ink));
}

.exam-hint {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.q-list { display: grid; gap: 0.65rem; }

/* The row is a container, not a button, because the count stepper lives inside
   it (ADR-013) and a button inside a button is neither valid nor reachable by
   keyboard. `.q-toggle` is the mark control; `.q-count` is its sibling. */
.q-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--ink-2);
  transition: border-color 220ms, background 220ms, transform 220ms var(--ease-out);
}

.q-toggle {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: inherit;
  padding: 1.05rem 1.2rem;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  color: inherit;
  cursor: pointer;
}

.q-item:hover { border-color: var(--hairline-2); transform: translateY(-1px); }

.q-item .mark {
  flex-shrink: 0;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background 220ms, border-color 220ms, color 220ms;
}

.q-item.is-marked {
  background: color-mix(in oklab, var(--purple) 5%, var(--tint));
  border-color: color-mix(in oklab, var(--purple) 38%, transparent);
  color: var(--ink);
}

.q-item.is-marked .mark {
  background: var(--purple-fill);
  border-color: var(--purple-fill);
  color: white;
}

.q-body { display: block; }
.q-text { display: block; }

/* Gravity (ADR-011). Deliberately typographic, not chromatic: the token system
   reserves --blue for Mass and --orange for Adoration, and inventing a red
   would violate INV-10 — but more to the point, this must read as information
   and never as an alarm (spec/screens/confess.md). `light` renders nothing at
   all; an absence, not a reassuring badge. */
.grav {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.14rem 0.55rem;
}

.grav--grave { color: var(--ink-2); border-color: var(--hairline-2); }

.summary-group .grav { margin: 0 0 0 0.5rem; vertical-align: 1px; }

/* Counts — "kind and number" (ADR-013). Appears only on a marked item: an
   unmarked one is not a quantity of zero, and offering it a stepper invites
   reading the examination as a tally sheet. Quiet by construction — nothing
   here totals, ranks or intensifies with the number (spec/screens/confess.md). */
/* The drawer the count row travels in. `0fr → 1fr` on a one-row grid is the
   only way to transition to a height the browser has to measure: `height: auto`
   is not animatable, and a `max-height` guess is either a clipped drawer on a
   narrow phone (where the band chips wrap to a third line) or a lazy first half
   of the travel on a wide one. The child needs `min-height: 0` and `overflow:
   hidden` or it refuses to be smaller than its content and nothing moves. */
.q-count-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 240ms var(--ease-out), opacity 240ms var(--ease-out);
}

/* Not `--dur`: 480ms under a finger that just tapped a question reads as the
   app thinking, and the neighbouring press feedback on this screen already
   runs at 220ms. */
.q-count-wrap.is-shut { grid-template-rows: 0fr; opacity: 0; }

/* The block padding has to travel too. A `0fr` track collapses the row to zero
   CONTENT height, and the drawer's own 0.8rem/1.05rem of air is not content —
   it survived, and the shut drawer left a 28px stub under every unmarked
   question. Measured, not reasoned about. */
.q-count-wrap > .q-count {
  min-height: 0;
  overflow: hidden;
  transition: padding-top 240ms var(--ease-out), padding-bottom 240ms var(--ease-out);
}

.q-count-wrap.is-shut > .q-count { padding-top: 0; padding-bottom: 0; }

.q-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  padding: 0 1.2rem 1.05rem calc(1.2rem + 24px + 1rem);
  border-top: 1px solid color-mix(in oklab, var(--purple) 14%, transparent);
  margin-top: -0.15rem;
  padding-top: 0.8rem;
}

.q-count-lbl {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 0.15rem;
}

.q-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.q-step button {
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: background 180ms, color 180ms;
}

.q-step button:hover { background: color-mix(in oklab, var(--purple) 9%, var(--tint)); }
.q-step button[disabled] { color: var(--ink-3); cursor: default; background: none; opacity: 0.45; }

/* Tabular so the row does not shift width as the reader steps through 9 → 10. */
.q-step .q-val {
  min-width: 4.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding: 0.3rem 0.2rem;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}

/* Absent reads as an invitation, never as "once" — the count is optional and
   doing nothing must look like doing nothing. */
.q-step .q-val.is-empty { color: var(--ink-3); }

.band-chip {
  font: inherit;
  font-size: 0.76rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.26rem 0.7rem;
  cursor: pointer;
  transition: border-color 180ms, background 180ms, color 180ms;
}

.band-chip:hover { border-color: var(--hairline-2); }

.band-chip.is-on {
  background: var(--purple-fill);
  border-color: var(--purple-fill);
  color: white;
}

/* Holy Days of Obligation — resolved live from check_liturgical_day (INV-08),
   never a corpus list. Absent entirely when the call fails. */
.holy-days {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.holy-days li { display: flex; justify-content: space-between; gap: 1rem; }
.hd-name { color: var(--ink-2); }
.hd-date { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* State-of-life filter. Display-only — it never deletes a mark. */
.audience-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.8rem;
}

.aud-lbl {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 0.4rem;
}

.aud-chip {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.34rem 0.9rem;
  cursor: pointer;
  transition: border-color 220ms, background 220ms, color 220ms;
}

.aud-chip:hover { border-color: var(--hairline-2); }

.aud-chip.is-on {
  background: var(--purple-fill);
  border-color: var(--purple-fill);
  color: white;
}

.exam-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.exam-nav .count { font-size: 0.8rem; color: var(--ink-3); }

/* Prev · count · Next in a no-wrap row has a min-content width of its own, and
   below ~360px that width — not the viewport — is what sets the DOCUMENT width:
   every screen on the page scrolled sideways by 20px, from a row at the bottom
   of it. It is the page that looks broken, never the row, which is why this
   survived a mobile pass. The row wraps instead, and the caption takes the
   second line so the two controls keep theirs. At 30rem, not 23rem, since the
   paired groups' labels ("Next · VII & X", ADR-137) widened the row. */
@media (max-width: 30rem) {
  .exam-nav { flex-wrap: wrap; row-gap: 0.7rem; }
  .exam-nav .count { order: 3; flex: 1 0 100%; text-align: center; }
}

/* The finish row carries three actions, so it wraps rather than forcing the
   confession link onto a second line at narrow widths. */
.exam-nav--finish { flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem; }
.exam-nav--finish .btn { flex: 0 1 auto; }
.exam-nav--finish #clearBtn { margin-right: auto; }

/* The hint explains what "finish" does and what it does NOT do (the marks
   stay). It sits under the action row, so it needs its own air — and a reading
   measure, since it is a sentence rather than a label. */
.exam-hint--finish {
  margin-top: 1rem;
  margin-left: auto;
  max-width: var(--measure);
  text-align: right;
  display: block;
}

/* Three actions do not fit side by side on a phone, and letting them wrap on
   their own produces a staircase — each button ending at a different edge.
   Stack them full-width instead, in the order they are meant to be read. */
@media (max-width: 820px) {
  .exam-nav--finish { flex-direction: column; align-items: stretch; }
  .exam-nav--finish .btn { flex: 1 1 auto; width: 100%; }
  .exam-nav--finish #clearBtn { margin-right: 0; order: 3; }
  .exam-hint--finish { text-align: left; margin-left: 0; }
}

/* saved examinations (ADR-012 rule 7 — the reader's own record) */
.saved-exams { margin-top: clamp(3rem, 7vw, 4.5rem); }
.saved-exams > h2 { margin-bottom: 1.2rem; }

.sx { padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; }

.sx-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}

.sx-when { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); }
.sx-n { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

.sx-group { display: flex; gap: 0.7rem; align-items: baseline; margin-top: 0.55rem; }

.sx-group .rn {
  font-family: var(--serif);
  font-style: italic;
  color: var(--purple);
  font-size: 0.98rem;
  flex: 0 0 1.6rem;
}

.sx-group ul { list-style: none; display: grid; gap: 0.3rem; margin: 0; flex: 1; }
.sx-group li { font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }

/* summary */
.summary-empty {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
}

.summary-empty .big {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  font-weight: 500;
  max-width: 26rem;
  margin: 1rem auto 0.8rem;
}

.summary-group { margin-bottom: 1.8rem; }

.summary-group .gh {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}

.summary-group .gh .rn {
  font-family: var(--serif);
  font-style: italic;
  color: var(--purple);
  font-size: 1.15rem;
}

.summary-group .gh .gt { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.summary-group ul { list-style: none; display: grid; gap: 0.45rem; }

.summary-group li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}

.summary-group li::before {
  content: "✦";
  color: var(--purple);
  font-size: 0.7rem;
}

/* ============ Daily examen ============ */

.daily-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* `minmax(0, 1fr)`, not `1fr`: a bare `1fr` floors the column at its widest
   unbreakable child, and `.btn` is `nowrap` — at 320px "Complete tonight's
   examen" made the whole page scroll sideways. The button wraps instead. */
@media (max-width: 860px) {
  .daily-layout { grid-template-columns: minmax(0, 1fr); }
  .daily-actions .btn { white-space: normal; text-align: center; }
}

.daily-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}

.daily-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.daily-card__head .t { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; }
.daily-card__head .d { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

.dq {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 0.9rem;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-2);
  transition: background 200ms;
}

.dq:hover { background: var(--paper-2); }

.dq .fc-check { width: 21px; height: 21px; border-radius: 8px; margin-top: 2px; }

.dq.is-done { color: var(--ink-3); }
.dq.is-done .fc-check { background: var(--purple-fill); border-color: var(--purple-fill); }

.dq .custom-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-ink);
  display: block;
  margin-top: 0.2rem;
}

.daily-actions {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

#completeBtn.is-done {
  background: color-mix(in oklab, var(--purple) 12%, var(--tint));
  color: var(--purple);
  box-shadow: none;
  pointer-events: none;
}

#completeBtn.is-ready { animation: complete-glow 2.6s ease-in-out infinite; }

@keyframes complete-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--purple) 30%, transparent); }
  50% { box-shadow: 0 0 0 10px transparent; }
}

/* streak panel */
.streak-panel {
  background: linear-gradient(170deg, #FFF9EF, #FDF3E1);
  border: 1px solid color-mix(in oklab, var(--orange) 26%, transparent);
  border-radius: var(--r-arch);
  padding: 2.6rem 1.8rem 1.8rem;
  text-align: center;
  position: sticky;
  top: 6.5rem;
}

@media (max-width: 860px) { .streak-panel { position: static; border-radius: var(--r-lg); padding-top: 1.8rem; } }

.streak-panel .flame {
  width: 64px; height: 64px;
  margin: 0 auto 0.9rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--orange) 16%, var(--tint));
  display: grid;
  place-items: center;
  color: var(--orange);
  animation: flame-breathe 3.2s ease-in-out infinite;
}

@keyframes flame-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--orange) 24%, transparent); }
  50% { box-shadow: 0 0 0 12px transparent; }
}

.streak-panel .n {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.streak-panel .l {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-top: 0.5rem;
}

.week-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.week-dots .wd { display: grid; gap: 0.35rem; justify-items: center; }

.week-dots .dot {
  width: 12px; height: 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--orange) 14%, var(--tint));
  border: 1px solid color-mix(in oklab, var(--orange) 30%, transparent);
}

.week-dots .wd.is-done .dot { background: var(--orange); border-color: var(--orange); }

.week-dots .wl { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-3); }

.streak-panel .hint { font-size: 0.78rem; color: var(--ink-3); margin-top: 1.4rem; line-height: 1.5; }

/* customize */
.customize { margin-top: clamp(3rem, 7vw, 4.5rem); }

.customize summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  padding-block: 1rem;
  border-top: 1px solid var(--hairline);
}

.customize summary::-webkit-details-marker { display: none; }

.customize summary .chevron {
  margin-left: auto;
  transition: transform 300ms var(--ease-out);
  color: var(--purple);
}

.customize[open] summary .chevron { transform: rotate(180deg); }

.customize-body {
  display: grid;
  gap: 2rem;
  padding-block: 0.8rem 1.5rem;
}

.bank-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.2rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
}

.bank-item .txt { flex: 1; line-height: 1.5; }

/* ADR-027: the selection list is the corpus, so it is grouped by commandment —
   an ungrouped list of every matter is unreadable and hides the shape the
   reader already knows the examination by. */
.bank-group + .bank-group { margin-top: 1.6rem; }

.bank-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hairline-2);
}

.daily-empty {
  padding: 1.2rem 0.2rem 0.4rem;
  display: grid;
  gap: 0.7rem;
  color: var(--ink-2);
  line-height: 1.6;
}

.daily-empty .muted { font-size: 0.88rem; }

.switch {
  flex-shrink: 0;
  width: 40px; height: 24px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--hairline-2);
  position: relative;
  transition: background 240ms, border-color 240ms;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: translate 240ms var(--ease-out);
}

.switch.is-on { background: var(--purple); border-color: var(--purple); }
.switch.is-on::after { translate: 16px 0; }

.custom-add { display: flex; gap: 0.6rem; margin-top: 1rem; }

.custom-list { list-style: none; display: grid; gap: 0.5rem; margin-top: 1rem; }

.custom-list li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: color-mix(in oklab, var(--orange) 7%, var(--tint));
  border: 1px solid color-mix(in oklab, var(--orange) 22%, transparent);
  border-radius: var(--r-sm);
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
}

.custom-list li .txt { flex: 1; }

.custom-list li .del {
  color: var(--ink-3);
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  transition: color 200ms, background 200ms;
  font-size: 1rem;
  line-height: 1;
}

.custom-list li .del:hover { color: #C0392B; background: rgba(192, 57, 43, 0.08); }

.customize h3 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 0.6rem;
}

.customize .sub { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 0.8rem; line-height: 1.5; }

.sx-empty { color: var(--ink-3); font-size: 0.9rem; line-height: 1.6; padding: 0.6rem 0 0.2rem; }

.custom-add { display: grid; grid-template-columns: 1fr auto auto; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 40rem) { .custom-add { grid-template-columns: 1fr; } }
.custom-add .field { min-width: 0; }

.custom-list { list-style: none; display: grid; gap: 0.5rem; margin-top: 1rem; }
.custom-list li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem; border-radius: var(--r-sm);
  background: var(--paper-3); font-size: 0.9rem; color: var(--ink-2);
}
.custom-list li.none { background: none; color: var(--ink-3); font-size: 0.85rem; padding-inline: 0.2rem; }
.custom-list li .txt { flex: 1; line-height: 1.5; }
.custom-list li .cmd { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-3); }
.custom-list li .del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px;
  border: 0; background: none; color: var(--ink-3); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.custom-list li .del:hover { color: var(--purple); background: var(--paper); }
.custom-list li .del:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.confess-row {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out);
}
.confess-row:hover { border-color: var(--hairline-2); }
.confess-row:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.confess-row .ic { color: var(--purple); display: grid; place-items: center; }
.confess-row .t { flex: 1; font-size: 0.95rem; }
.confess-row .arrow { color: var(--ink-3); font-size: 1.3rem; line-height: 1; }

/* ---- the stats bar (1.2.9 rule 7: tokens only, accents in order) ---- */
.stats-section { padding-top: 1.6rem; }

/* One card holding three readings, parted by hairlines — iOS's
   `ExamineStatsBar` on its card surface. Three cards side by side read as three
   things to choose between; this reports where the reader stands, so it is one
   thing. Three across at every width, as on iOS, which holds it at ~98pt a cell. */
.stats-strip {
  display: flex;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

/* Every cell is a link (3.5.1 rule 5) — including the em-dash one, whose
   destination is where the missing date gets entered (rule 7). `.stat-cell` is
   the static markup the script replaces, which the design canvas shows; it is
   not `.stat`, because the CSP probe reads `.stat` as proof the script ran. */
.stat, .stat-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 1.3rem;
  container-type: inline-size;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out);
}
.stats-strip > * + * { border-left: 1px solid var(--hairline); }
.stat:hover { background: var(--purple-mist); }
/* Inset: the card clips anything drawn outside a cell. */
.stat:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }

/* 1.2.9 rule 7: the glyph rides BESIDE the number, so cells whose labels run
   to different heights still line up on their numbers. */
.stats-strip .v {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.stats-strip .ic { width: 15px; height: 15px; flex: none; }
/* Rule 7's order: accent (streak) · brand (confession) · brandStrong (total). */
.stat--streak .ic { color: var(--orange-mark); }   /* informational icon (ADR-094) */
.stat--confession .ic { color: var(--purple); }
.stat--total .ic { color: var(--purple-deep); }
/* `--purple-deep` holds its hex in dark, where it vanishes into the surface;
   iOS's brandStrong goes lighter than brand there, and so does this. */
[data-theme="dark"] .stat--total .ic { color: var(--purple-ink); }

.stats-strip .n {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.65rem;
  font-size: min(1.65rem, 30cqi);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The unit-bearing label, then the fixed line naming what the number
   measures (1.2.9 rule 8). On a phone a third of the card is ~75px, narrower
   than "EXAMINATIONS" or "Today" at full size: the `cqi` sizes shrink them
   only once the cell is that narrow, as iOS's `minimumScaleFactor` does. */
.stats-strip .l {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.stats-strip .d {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-3);
}

/* The one state where a value cannot be drawn: a fresh browser at `sync`
   before its first unlock. It says so rather than keeping a plaintext copy.
   The card is already the surface, so this is only its text. */
.stats-locked {
  padding: 1rem 1.3rem;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.55;
}

.stats-locked a { color: var(--purple); }

@media (max-width: 34rem) {
  .stat, .stat-cell { padding: 0.9rem 0.7rem; }
  .stats-strip .v { gap: 0.3rem; }
  .stats-strip .ic { width: 13px; height: 13px; }
  .stats-strip .l { font-size: min(0.6875rem, 12cqi); letter-spacing: 0.04em; }
  .stats-strip .d { font-size: min(0.6875rem, 13cqi); }
}

/* ============ Filled by the examination renderer ==========================
   Three rules the two examination screens need and the stylesheet never had,
   because the markup they apply to is written by the module rather than by the
   page: the commandment head's own surface, the count that trails a marked
   matter in the summary, and the daily row's text column.
   ====================================================================== */

/* The one washed surface on the full examination — the same stained-glass
   light as the "since your last confession" card: `.glass-light` carries the
   wash, so the head needs nothing of its own but the ink sitting on it. */
.cmd-head h2 { font-weight: 400; }

/* "kind and number" carried into the summary. It trails the matter rather than
   leading it, and it never grows louder with the number. */
.summary-group li .cnt {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.dq .txt { flex: 1; }

/* The streak panel's wash is stated in literals rather than tokens (it is the
   one warm surface in the app), so dark theme has to state its ink in literals
   too: --ink inverts to near-white and the number disappears into the cream. */
[data-theme="dark"] .streak-panel .n { color: #2A1B08; }
[data-theme="dark"] .streak-panel .l { color: #8A5A10; }
[data-theme="dark"] .streak-panel .hint { color: #6B5638; }
[data-theme="dark"] .week-dots .wl { color: #8A7657; }

/* Same reason, one element in: an undone dot and the flame badge are mixed
   toward --tint, which inverts to near-black under the panel's cream — a dot
   that reads as kept when nothing was kept. Both are pinned cream-relative;
   the kept dot keeps its orange. */
[data-theme="dark"] .week-dots .dot { background: #F3E3C6; }
[data-theme="dark"] .week-dots .wd.is-done .dot { background: var(--orange); }
[data-theme="dark"] .streak-panel .flame { background: #FBEBCE; }

/* Before the examen is set up there is nothing to complete, and the card's own
   primary button must not shout over the one action that does something. */
#completeBtn[disabled] {
  background: var(--paper-3);
  color: var(--ink-3);
  box-shadow: none;
  cursor: default;
}
#completeBtn[disabled]:hover { transform: none; box-shadow: none; }


/* ── Reflect overview, two acts ──────────────────────────────────────────────
   The page has a shape: the two things you DO, then the three ways you read
   back what you did. Everything below belongs to that split. */

/* The heading of each act. A word and a rule — it divides, it does not shout. */
.act-rule {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.act-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.act-pair { display: flex; flex-wrap: wrap; gap: 1rem; }

/* The two doing-cards. The lead one carries the tinted ground and the purple
   mark, because one thing on this page begins an examination. */
.do-card {
  flex: 1 1 20rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.do-card--lead {
  flex-grow: 1.35;
  flex-basis: 24rem;
  background: var(--paper-2);
  border-color: color-mix(in oklab, var(--purple) 24%, var(--hairline));
  box-shadow: none;
}
.do-card:hover { transform: translateY(-2px); border-color: var(--hairline-2); }
.do-card--lead:hover { border-color: color-mix(in oklab, var(--purple) 40%, var(--hairline)); }

.do-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}
.do-card__ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: var(--purple-fill);
  color: #fff;
}
.do-card__ic--quiet {
  background: color-mix(in oklab, var(--purple) 9%, var(--tint));
  color: var(--purple);
}
.do-card__when {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.do-card__k {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 1.85rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.do-card__d {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.do-card__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--purple-soft);
  padding-left: 0.9rem;
  text-wrap: pretty;
}
.do-card .mv-rail, .do-card .mv-check { margin-top: 0.1rem; }
.do-card__go { align-self: flex-start; margin-top: auto; padding-top: 0.3rem; }
.do-card .btn.do-card__go { margin-top: auto; }

/* The three reading-back cards. Lighter than the doing pair by design: same
   family, less weight. */
.back-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
}
.back-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.35rem 1.4rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.back-card:hover { transform: translateY(-2px); border-color: var(--hairline-2); }
.back-card__ic { color: var(--purple); display: block; }
.back-card__k {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
}
.back-card__d {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.back-card__f {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--ink-2);
}

/* The door to Confession. Named, not presented: it gets a surface because it
   closes the page, but its list is plain text rather than three more taps. */
.confess-band {
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: start;
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.confess-band__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.confess-band__k {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
}
.confess-band__d {
  margin: 0;
  max-width: 32rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.confess-band__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.3rem;
}
.confess-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.confess-band__list li {
  display: grid;
  gap: 0.15rem;
  padding-left: 0.95rem;
  border-left: 2px solid var(--hairline-2);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.confess-band__list li span {
  font-size: 0.94rem;
  color: var(--ink);
}
@media (max-width: 52rem) {
  .confess-band { grid-template-columns: 1fr; }
}

/* Two commandments examined together get a longer numeral, so it is set
   smaller rather than allowed to run off the head. */
.cmd-head .rn--pair { font-size: clamp(2.3rem, 4.6vw, 3.2rem); }

/* The state-of-life gate. It replaces the questions rather than sitting above
   them: nothing to scroll past, so the choice cannot be made by accident. */
.aud-gate {
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.aud-gate__k {
  margin: 0.7rem 0 0.7rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  color: var(--ink);
}
.aud-gate__d {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.aud-gate__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 1.2rem;
}
.aud-gate .aud-chip { font-size: 0.9rem; padding: 0.6rem 1.1rem; }

/* The rail also carries the two pages that are not commandments: the state of
   life it was filtered by, and the review at the end. They are set apart by a
   rule rather than by colour, and each reports its own state under its name. */
.rail-sep {
  display: block;
  height: 1px;
  background: var(--hairline);
  margin: 0.45rem 0.8rem;
}
.rail-item--meta { align-items: flex-start; padding-block: 0.6rem; }
.rail-item--meta .rn {
  display: grid;
  place-items: center;
  padding-top: 0.05rem;
}
.rail-item--meta .meta-body { display: grid; gap: 0.1rem; min-width: 0; }
.rail-item--meta .meta-sub {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-item--meta.is-current .meta-sub { color: var(--ink-2); }
.aud-gate .btn { margin-bottom: 1.2rem; }
@media (max-width: 820px) {
  .rail-sep { display: none; }
  .rail-item--meta .meta-body { display: none; }
}

/* The way through to the setup page. A quiet row under tonight's list — it
   names where it goes and says what is there, and it is not a second primary. */
.setup-link {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper-2);
  transition: border-color var(--dur) var(--ease-out);
}
.setup-link:hover { border-color: var(--hairline-2); }
.setup-link:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.setup-link .ic { color: var(--purple); display: grid; place-items: center; padding-top: 0.1rem; }
.setup-link .b { display: grid; gap: 0.2rem; flex: 1; min-width: 0; }
.setup-link .t { font-size: 0.95rem; color: var(--ink); }
.setup-link .s { font-size: 0.85rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.setup-link .arrow { color: var(--ink-3); font-size: 1.3rem; line-height: 1; }

/* The setup as its own page: no drawer to open, so the two halves sit side by
   side and the page ends by pointing back at tonight. */
.setup-page { margin-top: 0; }
.setup-grid { padding-top: 0; }
@media (min-width: 62rem) {
  .setup-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2.4rem, 5vw, 4.5rem);
    align-items: start;
  }
}
.setup-done {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}

/* Select-all, said as what it will do. Set as plain type rather than a button
   shape: it belongs to the group's rule, not on top of the list. */
.bank-all {
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple);
  background: none;
  border: 0;
  padding: 0.15rem 0;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.bank-all:hover { border-bottom-color: color-mix(in oklab, var(--purple) 45%, transparent); }
.bank-all:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.bank-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-bottom: 0.7rem;
}
.bank-top__n {
  font-size: 0.78rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.bank-top .bank-all { font-size: 0.76rem; }

/* Two lines: the question, then where it belongs and the way to add it. */
.setup-page .custom-add { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.custom-add__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }

/* Which past day a run is recording (ADR-115). Fixed, because it has to be true
   on every screen of the examination and the examination is eight screens long:
   a banner that scrolls away is a banner the reader saw once, and the day it
   names becomes immutable the moment they save. */
.backdate-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 40;
  pointer-events: none;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--orange) 35%, transparent);
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.10);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

/* The examination's prayers (web.md §7.3), on the devotion card (ADR-142):
   the body is the reader's prayer text size, drawn by `.dv-card` in
   styles.css. Nothing here may set the stanza's size or leading — a per-screen
   override in place of the size token is what ADR-121 exists to stop. */
.exam-prayer { max-width: var(--measure); }

/* The daily examen's folds: one page, so the prayers open in place above and
   below tonight's list instead of being pages of a run. */
.prayer-fold { border-top: 1px solid var(--hairline); }
#dailyPrayerAfter .prayer-fold { margin-top: 1rem; }
.prayer-fold summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  padding: 0.85rem 0.2rem;
  min-height: 44px;
}
.prayer-fold summary::-webkit-details-marker { display: none; }
.prayer-fold__k {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in oklab, var(--purple) 75%, var(--ink));
}
.prayer-fold__t { font-size: 0.88rem; color: var(--ink-2); flex: 1 1 12rem; }
.prayer-fold__chev { color: var(--purple); align-self: center; transition: transform 300ms var(--ease-out); }
.prayer-fold[open] .prayer-fold__chev { transform: rotate(180deg); }
.exam-prayer--fold { padding: 0.2rem 0 1.2rem; }
@media (prefers-reduced-motion: reduce) { .prayer-fold__chev { transition: none; } }

/* The save celebration (web.md §7.4) — the reference's flame medallion, on the
   shared modal (`IC._modal`). Warm, because the streak surfaces are: the same
   orange disc the daily panel's flame sits on. */
.ic-dialog.celebrate { text-align: center; max-width: 25rem; }
.celebrate__medal {
  width: 84px; height: 84px;
  margin: 0.4rem auto 0.9rem;
  border-radius: 999px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--orange) 16%, var(--tint));
  color: var(--orange);
  animation: flame-breathe 3.2s ease-in-out infinite;
}
.celebrate__medal svg { width: 44px; height: 44px; }
.celebrate__medal:not(.is-quiet) svg { animation: celebrate-arrive 700ms var(--ease-out) both; }
.celebrate__core { fill: color-mix(in oklab, var(--orange) 38%, white); }
@keyframes celebrate-arrive {
  from { transform: scale(0.6) translateY(6px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.celebrate__n {
  font-family: var(--serif);
  font-size: 3.2rem; font-weight: 600; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.celebrate__pill {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--orange) 16%, var(--tint));
  color: var(--orange-ink);
}
.ic-dialog.celebrate h3 { margin-top: 1rem; }
.celebrate__freeze {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--orange) 30%, transparent);
  background: color-mix(in oklab, var(--orange) 10%, var(--tint));
  color: var(--orange-ink);
  font-size: 0.86rem; font-weight: 500;
  text-decoration: none;
}
.celebrate__freeze span[aria-hidden] { font-size: 1.25rem; line-height: 1; }
.ic-dialog.celebrate .ic-dialog__actions { justify-content: center; margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
  .celebrate__medal, .celebrate__medal:not(.is-quiet) svg { animation: none; }
}

/* Victories (ADR-140, spec/features/victories.md) — the daily examen's `+`.
   The warm accent, the streak's colour, and never the purple the marks are
   drawn in (rule 6): a matter avoided must not read as a matter noted. */
.q-item--daily { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.q-item--daily > .q-toggle { grid-column: 1; grid-row: 1; }
.q-item--daily > .q-victory { grid-column: 2; grid-row: 1; }
.q-item--daily > :not(.q-toggle):not(.q-victory) { grid-column: 1 / -1; }
.q-victory {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 0.45rem 0.5rem 0 0;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.q-victory:hover { border-color: color-mix(in oklab, var(--orange) 40%, var(--hairline)); color: var(--orange-ink); }
.q-victory:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.q-item.is-victory {
  border-color: color-mix(in oklab, var(--orange) 45%, var(--hairline));
  background: color-mix(in oklab, var(--orange) 9%, var(--surface));
}
/* A TINT, not the solid fill: `--orange-ink` is the orange itself in dark, so a
   solid pressed state drew the glyph orange on orange there. */
.q-item.is-victory .q-victory {
  background: color-mix(in oklab, var(--orange) 24%, var(--surface));
  border-color: var(--orange-mark);
  color: var(--orange-ink);
}
.exam-hint--victory { margin-bottom: 0.9rem; }

/* History: a day's victories, after its matters. */
.day-victories { margin-top: 1.2rem; }
.day-victories__h {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--orange-ink); margin-bottom: 0.5rem;
}
.day-victories ul { display: grid; gap: 0.45rem; padding: 0; margin: 0; list-style: none; }
.day-victories li {
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklab, var(--orange) 35%, var(--hairline));
  background: color-mix(in oklab, var(--orange) 8%, var(--surface));
  font-size: 0.9rem; line-height: 1.5; color: var(--ink-2);
}