/* Rhythm: the week ring, the two dot rows, the celebration card, and Stats.
   Gold only. There is no red, orange or amber anywhere in this file, in either
   theme, because nothing here is ever a failure. */

/* ------------------------------------------------------------- the ring */

.rhythm-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 .4rem;
}
.rhythm-head .today-date { margin: 0; }

.rhythm-ring {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: visible;
}
.rhythm-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.rhythm-ring .track { stroke: var(--rule); }
.rhythm-ring .fill { stroke: var(--gold); }
.rhythm-ring.sweeping .fill {
  transition: stroke-dashoffset 640ms cubic-bezier(.22, .61, .36, 1);
}
.rhythm-ring.pulse { animation: rhythm-pulse 220ms cubic-bezier(.22, .61, .36, 1); }
@keyframes rhythm-pulse {
  0% { transform: scale(1); }
  55% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------- the week rows */

.rhythm-week { margin: 2.4rem 0 2.2rem; }
.rhythm-row + .rhythm-row { margin-top: 1.1rem; }

.rhythm-row-label {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .7rem;
}

.rhythm-dots {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: max-content;
}
.rhythm-dots i {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--rule);
  transition: background .3s var(--ease, ease);
}
.rhythm-dots i.on { background: var(--gold); }
.rhythm-dots i.now { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 24%, transparent); }
/* A day that has not happened yet is lighter than an absent one, so an empty
   Friday on a Wednesday does not read as a gap. */
.rhythm-dots i.future { background: var(--rule-soft); }

/* The mark, after the fourth position. It says where the week is aiming, and
   it is a hairline rather than a wall. */
.rhythm-dots .mark {
  width: 1px;
  height: 1.05rem;
  background: var(--gold-soft);
  opacity: .7;
  margin: 0 .15rem;
  flex: 0 0 1px;
}

.rhythm-line {
  margin: .9rem 0 0;
  font-size: .86rem;
  color: var(--ink-3);
  max-width: 30rem;
}
.rhythm-line strong {
  color: var(--ink-2);
  font-weight: 600;
}

/* ------------------------------------------------------------ the repair */

.rhythm-repair {
  margin: 1.2rem 0 0;
  padding: .9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.rhythm-repair p {
  margin: 0 0 .7rem;
  font-size: .9rem;
  color: var(--ink-2);
  max-width: 32rem;
}

/* ------------------------------------------------------- celebration card */

.rhythm-toasts {
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: center;
  pointer-events: none;
  width: min(30rem, calc(100vw - 2rem));
}

.rhythm-card {
  pointer-events: auto;
  width: 100%;
  padding: 1.05rem 1.2rem;
  border-radius: .8rem;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: rhythm-in 320ms cubic-bezier(.22, .61, .36, 1);
}
.rhythm-card.large {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--rule));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent),
              0 16px 44px -20px rgba(0, 0, 0, .5);
}
.rhythm-card.still { animation: rhythm-fade 160ms linear; }
.rhythm-card.going { animation: rhythm-out 260ms ease forwards; }
.rhythm-card.still.going { animation: rhythm-fade-out 160ms linear forwards; }

.rhythm-copy {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}
.rhythm-dismiss {
  flex: 0 0 auto;
  border: 0;
  background: none;
  cursor: pointer;
  font: 600 .74rem/1 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .4rem .2rem;
}
.rhythm-dismiss:hover { color: var(--gold); }
.rhythm-card.note .rhythm-copy { font-size: .95rem; color: var(--ink-2); }

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

/* The OS flag is honoured in CSS as well as at the call site, so a card that
   somehow arrives on a reduced motion machine still cannot slide. */
@media (prefers-reduced-motion: reduce) {
  .rhythm-card,
  .rhythm-card.going { animation-duration: 160ms; animation-timing-function: linear; }
  .rhythm-ring.sweeping .fill { transition: none; }
  .rhythm-ring.pulse { animation: none; }
}

/* ------------------------------------------------------------- the bloom */

.rhythm-bloom {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

/* ------------------------------------------------------------------ stats */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 2.4rem;
}
.stat {
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule-soft);
  border-radius: .7rem;
  background: var(--paper-2);
}
.stat .n {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.9rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat .k {
  display: block;
  margin-top: .4rem;
  font: 600 .66rem/1.3 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ladder { margin: 0 0 2.4rem; padding: 0; list-style: none; }
.ladder li {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ladder .rung {
  font: 600 .78rem/1 var(--ui);
  color: var(--ink-2);
}
.ladder .bar {
  height: .45rem;
  border-radius: .3rem;
  background: var(--rule-soft);
  overflow: hidden;
}
.ladder .bar i {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: .3rem;
}
.ladder .count {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: .86rem;
}

.milestones { margin: 0 0 2.4rem; padding: 0; list-style: none; }
.milestones li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.milestones .when {
  font: 600 .66rem/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .35rem;
}
.milestones .what {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 1rem;
  color: var(--ink);
}

/* The year. One square a day, gold where you were there. Fifty three columns
   so it lays out the way a calendar does, scrolling on a narrow screen. */
.year-wrap { overflow-x: auto; padding-bottom: .6rem; margin: 0 0 1rem; }
.year {
  display: grid;
  grid-template-rows: repeat(7, .62rem);
  grid-auto-flow: column;
  grid-auto-columns: .62rem;
  gap: 3px;
  width: max-content;
}
.year i {
  width: .62rem;
  height: .62rem;
  border-radius: 2px;
  background: var(--rule-soft);
}
.year i.on { background: var(--gold); }
.year i.on.deep { background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.year i.blank { background: none; }

.stats-note {
  margin: 0 0 2.2rem;
  font-size: .86rem;
  color: var(--ink-3);
  max-width: 32rem;
}

.rhythm-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-soft);
}
.rhythm-prefs label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  color: var(--ink-2);
}
.rhythm-prefs input[type="range"] { accent-color: var(--gold); }
.rhythm-prefs input[type="checkbox"] { accent-color: var(--gold); }

@media (max-width: 640px) {
  .ladder li { grid-template-columns: 7rem 1fr auto; gap: .7rem; }
  .rhythm-toasts { bottom: 1.2rem; }
}

/* The Stats link in the header. Quiet, beside the mark, never a badge and
   never carrying a number. */
.mark-link {
  font: 600 .68rem/1 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  padding: .35rem .1rem;
  margin-left: .9rem;
}
.mark-link:hover { color: var(--gold); }
/* Hidden on the reader, but it keeps its box. Removing it moves the whole
   toolbar on every route change, which the shell measures as layout shift. */
body[data-route="read"] .mark-link { visibility: hidden; }

/* The rung a verse is on, on its row in the memory list. A label, not a score,
   and it never sits next to a number out of ten. */
.mem-rung {
  display: inline-block;
  font: 600 .64rem/1 var(--ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 1rem;
  padding: .25rem .5rem;
  margin-right: .5rem;
}
.mem-rung.learning { color: var(--ink-3); border-color: var(--rule); }