/* The rep screen: a ring of 100 river stones, the words inside it. */

.rep {
  position: fixed;
  inset: 0;
  z-index: 10;
  /* See-through: the garden behind has glided in to the stone. */
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  overscroll-behavior: none;
}
.rep[hidden] { display: none; }
/* The same soft wash of plain sand as the garden's header, behind the
   top buttons. It stays put while the buttons fade during a rep. */
.rep::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(env(safe-area-inset-top, 0px) + 150px);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--sand) 92%, transparent) 0%,
    color-mix(in srgb, var(--sand) 70%, transparent) 40%,
    color-mix(in srgb, var(--sand) 25%, transparent) 75%,
    transparent 100%);
  pointer-events: none;
}
.rep-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
  transition: opacity 0.6s;
}
.rep.active .rep-bar { opacity: 0.32; }
/* Whatever has focus stays fully visible. */
.rep.active .rep-bar:focus-within { opacity: 1; }
.rep-bar .icon-btn { font-size: 1.3rem; }
.rep-tools { display: flex; gap: 8px; }
.rep-back {
  display: flex; align-items: center; gap: 6px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--veil);
  color: var(--ink);
  font: 400 1.05rem/1 var(--serif);
  cursor: pointer;
}
.rep-back svg, .rep-tools svg { width: 20px; height: 20px; display: block; margin: auto; }
.rep-tools svg[hidden] { display: none; }

.rep-stage { position: static; }
.rep-ring { position: static; }
svg.beads {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: beads-in 0.6s 0.55s both;
}
@keyframes beads-in { from { opacity: 0; } }
.ripple { fill: none; stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }

.rep-inner {
  position: absolute;
  top: var(--below, 60%);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 32rem);
  text-align: center;
  transition: top 0.9s cubic-bezier(.4,0,.2,1);
}
/* A soft pool of plain sand behind the words and the finish, so they read
   cleanly where a much-chanted stone's rings run on beneath them. */
.rep-inner::before, .rep-card::before {
  content: "";
  position: absolute;
  inset: -36px -40px;
  z-index: -1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--sand) 94%, transparent) 0%,
    color-mix(in srgb, var(--sand) 80%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
}
.rep-text:focus { outline: none; }
.rep-switch {
  border: 0;
  padding: 2px 2px;
  background: none;
  color: var(--ink);
  font: italic 1rem/1.4 var(--serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  cursor: pointer;
}
.rep-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rep-count {
  font: 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 14px;
}
.rep-text {
  font: 400 clamp(1.3rem, 5.4vw, 2rem)/1.3 var(--serif);
  overflow-wrap: anywhere;
  cursor: text;
  user-select: none;
  -webkit-user-select: none;
}
.rep-text .ghost { color: var(--muted); opacity: 0.7; }
.rep-text .done { color: var(--ink); }
.rep-text .miss { color: var(--ink); background: color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
/* Speaking: the whole line brightens as more of it is heard. */
.rep-text .said {
  color: var(--ink);
  opacity: 0.62;
  transition: opacity 0.3s ease-out;
}
/* A counted rep: full strength, and a light passes along it. */
.rep-text .said.shimmer {
  animation: said-shimmer 0.9s ease-out;
  background: linear-gradient(100deg, var(--ink) 0 38%, color-mix(in srgb, var(--ink) 30%, var(--sand)) 50%, var(--ink) 62% 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes said-shimmer {
  0% { background-position: 100% 0; opacity: 1; }
  80% { opacity: 1; }
  100% { background-position: 0 0; }
}
.rep-text .caret { display: inline-block; width: 0; border-left: 1.5px solid var(--ink); height: 1.05em; margin: 0 -0.75px; vertical-align: -0.16em; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.rep-text { transition: opacity 0.5s; }

/* The real input: invisible, over the words, so taps focus it. */
.rep-input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 16px; /* keeps iOS from zooming */
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  cursor: text;
}
.rep-hint {
  margin-top: 16px;
  min-height: 1.4em;
  font: italic 1rem/1.4 var(--serif);
  color: var(--muted);
}
.rep-mic {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  margin-right: 8px;
  vertical-align: 0.05em;
  animation: mic 1.6s ease-in-out infinite;
}
@keyframes mic { 50% { transform: scale(0.55); opacity: 0.4; } }

/* Session choice, the finish, and the note: quiet cards in the ring. */
.rep-card {
  position: absolute;
  top: var(--below, 60%);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 26rem);
  text-align: center;
  transition: top 0.9s cubic-bezier(.4,0,.2,1);
}
.rep-card[hidden] { display: none; }
/* While a card shows, it takes the words' place inside the ring. */
.rep:has(.rep-card:not([hidden])) .rep-inner { visibility: hidden; }
.rep-card h2 { font: 400 clamp(1.3rem, 5vw, 1.8rem)/1.25 var(--serif); margin-bottom: 6px; }
.rep-card p { font: italic 1rem/1.45 var(--serif); color: var(--muted); }
.rep-card .row { justify-content: center; margin-top: 18px; }
.rep-card .row button { flex: 0 1 auto; }
.rep-card .stack { display: grid; gap: 8px; margin-top: 16px; }
.rep-card .stack.row2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 460px) {
  .rep-back { padding: 0; width: 44px; justify-content: center; }
  .rep-back span { display: none; }
  .rep-tools { gap: 6px; }
}
.rep-note {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 68px);
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 30rem);
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 1.05rem/1.5 var(--serif);
  z-index: 2;
}
.rep-note[hidden] { display: none; }
.rep-note h2 { font: 400 1.3rem/1.2 var(--serif); margin-bottom: 8px; }
.rep-note p + p { margin-top: 8px; }
.rep-note .close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font: 300 1.5rem/1 var(--serif); cursor: pointer; }

.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .rep-inner, .rep-card { transition: none; }
  svg.beads { animation: none; }
  .rep-mic, .rep-text .caret { animation: none; }
}

/* At 100: the affirmation itself, settled, and two small choices. */
.rep-card .done-words {
  font: 400 clamp(1.5rem, 6.4vw, 2.2rem)/1.25 var(--serif);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.rep-card .done-count {
  margin-top: 10px;
  font: 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.done-row { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.done-row button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--sand) 70%, transparent);
  color: var(--ink);
  font: 1rem/1 var(--serif);
  cursor: pointer;
}
#rep-done:not([hidden]) > div { animation: done-in 1.2s ease-out both; }
@keyframes done-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #rep-done:not([hidden]) > div { animation: none; } }