/* Visit Mary: the beads. The strip above Continue is the group in your hand;
   the loop is the whole rosary. Loaded after style.css. */

/* The prayer scrolls inside its own column so the beads and Continue stay
   in reach: the screen is the viewport, not the page. */
#prayer-screen.active { height: 100dvh; min-height: 0; }
#prayer-screen .prayer-body { min-height: 0; }

/* ─── The strip ───────────────────────────────────────── */

.bead-strip {
  background: var(--parchment-bg);
  border-top: 1px solid var(--parchment-rule);
  padding: 0.5rem 1rem 0.25rem;
  color: var(--parchment-ink);
}
.bead-strip[hidden] { display: none; }

.bead-strip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.25rem 0;
  color: var(--parchment-muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  min-height: 32px;
}
.bead-strip-heading .bead-strip-name {
  color: var(--parchment-ink);
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bead-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.25rem 0 0.375rem;
  flex-wrap: nowrap;
}

/* Every bead is a 44px target; the visible bead is drawn inside it. */
.bead {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 1 2.75rem;
  min-width: 1.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--parchment-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: none;
  border-radius: 0;
  font: inherit;
  animation: none;
}
.bead::before {
  content: '';
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--parchment-ink);
  background: transparent;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.bead-large::before { width: 1.125rem; height: 1.125rem; }
.bead-chain::before { width: 0.375rem; height: 0.375rem; border-width: 1px; }
.bead-crucifix::before, .bead-medal::before { display: none; }
.bead svg { width: 1.25rem; height: 1.25rem; display: block; }
.bead-medal svg { width: 1rem; height: 1rem; }

.bead.is-done::before { background: var(--parchment-ink); }
.bead.is-now::before { background: var(--parchment-accent); border-color: var(--parchment-accent); transform: scale(1.35); }
.bead.is-now { color: var(--parchment-accent); }
.bead.is-done { color: var(--parchment-ink); }
.bead:not(.is-done):not(.is-now) { color: var(--parchment-muted); }
.bead:focus-visible { outline: 2px solid var(--parchment-accent); outline-offset: -4px; }
.bead:hover::before { transform: scale(1.2); }
.bead.is-now:hover::before { transform: scale(1.35); }

@media (max-width: 360px) {
  .bead { width: 2.25rem; }
}

/* ─── The loop ────────────────────────────────────────── */

.bead-loop-panel {
  background: var(--parchment-bg);
  color: var(--parchment-ink);
  padding: 1rem 1.25rem 1.25rem;
}
.bead-loop-panel[hidden] { display: none; }

.bead-loop { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.bead-loop-chain { fill: none; stroke: var(--parchment-rule); stroke-width: 1; }
.bead-loop-bead { cursor: pointer; }
.bead-loop-small, .bead-loop-large { fill: var(--parchment-bg); stroke: var(--parchment-ink); stroke-width: 1.2; }
.bead-loop-chain-bead { fill: var(--parchment-rule); }
circle.bead-loop-chain { fill: var(--parchment-muted); stroke: none; }
.bead-loop-crucifix path { stroke: var(--parchment-ink); stroke-width: 2.4; stroke-linecap: square; fill: none; }
.bead-loop-medal { fill: var(--parchment-ink); }
.bead-loop-bead.is-done, .bead-loop-medal.is-done { fill: var(--parchment-ink); }
.bead-loop-bead.is-now { fill: var(--parchment-accent); stroke: var(--parchment-accent); }
.bead-loop-crucifix.is-now path { stroke: var(--parchment-accent); }
.bead-loop-medal.is-now { fill: var(--parchment-accent); }

.bead-loop-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  border-top: 1px solid var(--parchment-rule);
}
.bead-loop-decade button {
  width: 100%;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--parchment-rule);
  padding: 0.5rem 0;
  color: var(--parchment-muted);
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  min-height: 40px;
}
.bead-loop-decade.is-now button { color: var(--parchment-ink); }
.bead-loop-ordinal {
  flex: 0 0 1.25rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--parchment-muted);
}
.bead-loop-decade.is-now .bead-loop-ordinal { color: var(--parchment-accent); }

.bead-loop-close {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--parchment-ink);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Phone: the loop is a sheet over the prayer, opened from the strip. */
@media (max-width: 899px) {
  .bead-loop-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    overflow-y: auto;
    padding-top: max(1.5rem, env(safe-area-inset-top));
    display: none;
  }
  #prayer-screen.loop-open .bead-loop-panel:not([hidden]) { display: block; }
  .bead-loop-close { display: block; }
}

/* Desktop: the loop is a column beside the prayer, the Met object page turned round. */
@media (min-width: 900px) {
  #prayer-screen.active {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      'header header'
      'audio audio'
      'font font'
      'progress progress'
      'loop body'
      'strip strip'
      'nav nav';
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    height: 100dvh;
  }
  #prayer-screen .bead-loop-panel { overflow-y: auto; max-height: 100%; }
  #prayer-screen .prayer-header { grid-area: header; }
  #prayer-screen .audio-player-bar { grid-area: audio; }
  #prayer-screen .font-panel { grid-area: font; }
  #prayer-screen .rosary-progress { grid-area: progress; }
  #prayer-screen .bead-loop-panel { grid-area: loop; border-right: 1px solid var(--parchment-rule); align-self: start; position: sticky; top: 3.5rem; }
  #prayer-screen .prayer-body { grid-area: body; }
  #prayer-screen .bead-strip { grid-area: strip; }
  #prayer-screen .prayer-nav { grid-area: nav; }
  .bead-strip-heading { cursor: default; }
}

/* ─── World Mission Rosary ────────────────────────────────
   Sheen's five colours, one per decade. Beads ahead are a wash of their
   colour, prayed beads are solid, the bead in hand is solid with an ink ring.
   Every bead keeps an edge so white on paper and yellow on paper still read. */
:root {
  --m1: #2f7d4a; --m1-edge: #1f5a34;
  --m2: #1161aa; --m2-edge: #0b467d;
  --m3: #ffffff; --m3-edge: rgba(var(--ink-rgb), 0.5);
  --m4: #b8322a; --m4-edge: #8a221c;
  --m5: #e3b020; --m5-edge: #94700c;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --m1: #4fae70; --m1-edge: #4fae70;
    --m2: #4b93dc; --m2-edge: #4b93dc;
    --m3: #fdf6ed; --m3-edge: #fdf6ed;
    --m4: #e2564b; --m4-edge: #e2564b;
    --m5: #f0c43c; --m5-edge: #f0c43c;
  }
}
:root.dark {
  --m1: #4fae70; --m1-edge: #4fae70;
  --m2: #4b93dc; --m2-edge: #4b93dc;
  --m3: #fdf6ed; --m3-edge: #fdf6ed;
  --m4: #e2564b; --m4-edge: #e2564b;
  --m5: #f0c43c; --m5-edge: #f0c43c;
}
.mission-1 { --mc: var(--m1); --me: var(--m1-edge); }
.mission-2 { --mc: var(--m2); --me: var(--m2-edge); }
.mission-3 { --mc: var(--m3); --me: var(--m3-edge); }
.mission-4 { --mc: var(--m4); --me: var(--m4-edge); }
.mission-5 { --mc: var(--m5); --me: var(--m5-edge); }

.bead.bead-mission::before { background: color-mix(in srgb, var(--mc) 32%, transparent); border-color: var(--me); opacity: 0.55; }
.bead.bead-mission.is-done::before,
.bead.bead-mission.is-now::before { opacity: 1; }
/* A prayed bead is a bead: solid, with a soft highlight. */
.bead.bead-mission.is-done::before {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 45%, var(--mc)), var(--mc) 60%);
  border-color: var(--me);
}
/* White on cream paper needs the pearl's shadow to be seen at all. */
:root:not(.dark) .bead.bead-mission.mission-3.is-done::before { background: radial-gradient(circle at 35% 30%, #fff, #ddd6cb 85%); }
@media (prefers-color-scheme: dark) { :root:not(.light) .bead.bead-mission.mission-3.is-done::before { background: var(--m3); } }
.bead.bead-mission.is-now::before {
  background: var(--mc);
  border-color: var(--me);
  box-shadow: 0 0 0 2px var(--parchment-bg), 0 0 0 3.5px var(--parchment-ink);
}

.bead-loop-bead.bead-loop-mission { fill: color-mix(in srgb, var(--mc) 32%, var(--parchment-bg)); stroke: var(--me); stroke-opacity: 0.5; }
.bead-loop-bead.bead-loop-mission.is-done { fill: var(--mc); stroke-opacity: 1; }
:root:not(.dark) .bead-loop-bead.bead-loop-mission.mission-3.is-done { fill: #e4ddd2; }
@media (prefers-color-scheme: dark) { :root:not(.light) .bead-loop-bead.bead-loop-mission.mission-3.is-done { fill: var(--m3); } }
.bead-loop-bead.bead-loop-mission.is-now { fill: var(--mc); stroke: var(--parchment-ink); stroke-opacity: 1; stroke-width: 2.2; }

.mission-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--mc);
  border: 1px solid var(--me);
  margin-inline-end: 0.375rem;
  vertical-align: 0.05em;
}
.bead-strip-region { margin-inline-start: 0.5rem; white-space: nowrap; }
.bead-loop-name { flex: 1 1 auto; min-width: 0; }
.bead-loop-region {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.6875rem;
  color: var(--parchment-muted);
}
.bead-loop-note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--parchment-muted); }
.bead-loop-note summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.bead-loop-meaning { list-style: none; padding: 0; margin: 0.25rem 0 0; line-height: 1.5; }
.bead-loop-meaning li { display: flex; align-items: baseline; margin: 0.375rem 0; color: var(--parchment-ink); }
@media (min-width: 900px) {
  .bead-loop-decade button { flex-wrap: wrap; row-gap: 0.125rem; }
  .bead-loop-region { flex-basis: 100%; padding-inline-start: 2rem; }
}