/* Manifess app. Same "first light" look as the landing page:
   pearl and lilac haze, an apricot sun, plum ink.
   Type: Cormorant Garamond (semibold headings, medium italic for spoken lines, never below ~18px), Jost for everything else. */
:root {
  --pearl: #fbf8fd;
  --mist: #efe7f8;
  --lilac: #cbb9ec;
  --apricot: #ffc9a0;
  --blush: #f3a7a4;
  --gold: #ffd98a;
  --plum: #2e1a3b;
  --plum-hover: #45295a;
  --plum-soft: #5b4868;
  --copper: #8a5a43;
  --error: #a3374a;
  --line: rgba(46, 26, 59, 0.1);
  --line-strong: rgba(46, 26, 59, 0.22);
  --panel-line: rgba(203, 185, 236, 0.55);
  --on-sun: #2e1a3b; /* text and icons on the peach "sun" surfaces; stays dark in both themes */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sun: radial-gradient(circle at 40% 35%, #fff4e8, var(--apricot) 55%, var(--blush));
  --sun-midday: radial-gradient(circle at 40% 35%, #fffbea, var(--gold) 60%, #f5c06a);
  --sun-evening: radial-gradient(circle at 40% 35%, #f3ecff, var(--lilac) 55%, #8f72bd);
  --tabbar: 68px;
  --radius: 28px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; /* older phones */
  min-height: 100dvh;
  background: var(--pearl);
  color: var(--plum);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
svg { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #e58f5e; outline-offset: 3px; border-radius: 10px; }
h1[tabindex='-1']:focus { outline: none; } /* focused on a new view for screen readers, not for typing */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--plum-soft); font-weight: 400; }
.note { font-size: 15px; color: var(--plum-soft); }

/* Dawn haze behind everything */
.haze {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 45% at 10% 0%, rgba(255, 214, 184, 0.7), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 6%, rgba(214, 198, 246, 0.75), transparent 70%),
    linear-gradient(180deg, #f5eefb 0%, var(--pearl) 45%);
}

/* ---------- Layout ---------- */
.topbar {
  max-width: 640px;
  margin: 0 auto;
  /* Clear of the phone's status bar, with room to breathe below it. */
  padding: calc(20px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 24px/1 var(--serif);
  text-decoration: none;
  padding-block: 6px;
}
.shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px calc(32px + env(safe-area-inset-bottom));
}
body.has-tabbar .shell { padding-bottom: calc(var(--tabbar) + 60px + env(safe-area-inset-bottom)); }
.view { display: flex; flex-direction: column; gap: 18px; }
.view > *, .quiz > * { min-width: 0; }
.view--center {
  min-height: 62vh; /* older phones */
  min-height: 62dvh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.panel {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--panel-line);
  padding: 24px 20px;
  box-shadow: 0 24px 50px -40px rgba(46, 26, 59, 0.45);
}
.panel--dawn {
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 196, 160, 0.55), transparent 70%),
    linear-gradient(180deg, #f6eefc 0%, #fdeee9 100%);
}

.page__header { display: grid; gap: 8px; padding-top: 6px; }
.page__kicker { font-size: 15px; font-weight: 500; color: var(--copper); }
.page__title { font: 600 clamp(36px, 9vw, 46px)/1.05 var(--serif); }
.page__lead { color: var(--plum-soft); max-width: 34em; }
.card { display: grid; gap: 12px; }
.card__title { font: 600 26px/1.15 var(--serif); }
.card__lead { color: var(--plum-soft); font-size: 16px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row--center { justify-content: center; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: var(--pearl);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(46, 26, 59, 0.6);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.btn:hover { background: var(--plum-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--block { width: 100%; }

/* ---------- Premium screen ---------- */
/* ---------- Paywall: fits one phone screen, a clear choice and one button ---------- */
.pw { display: grid; gap: 14px; max-width: 460px; margin: 0 auto; padding: 4px 4px 24px; position: relative; }
.pw::before { content: ''; position: absolute; inset: -60px -40px auto; height: 260px; background: radial-gradient(closest-side, rgba(255, 196, 150, 0.32), transparent); pointer-events: none; z-index: -1; }
.pw__top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.pw__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: inherit; cursor: pointer; }
.pw__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pw__close[hidden] + .pw__restore { margin-left: auto; }
.pw__restore { border: 0; background: none; color: inherit; opacity: 0.7; font: 500 15px/1 var(--sans); padding: 12px 4px; cursor: pointer; }
.pw__label { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #f0a77a; }
.pw__label svg { width: 16px; height: 16px; fill: currentColor; }
.pw__title { font: 600 34px/1.08 var(--serif); margin-top: -4px; }
.pw__words { margin: 2px 0 0; display: grid; gap: 8px; }
.pw__words figcaption { font: 500 13px/1.3 var(--sans); color: var(--plum-soft); }
.pw__words blockquote { margin: 0; display: grid; gap: 6px; }
.pw__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pw__perks li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.3; }
.pw__perks svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(255, 196, 150, 0.16); fill: none; stroke: #f0a77a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pw__timeline { list-style: none; margin: 2px 0 0; padding: 0 0 0 18px; display: grid; gap: 10px; border-left: 2px solid rgba(240, 167, 122, 0.45); }
.pw__timeline li { display: grid; gap: 1px; position: relative; font-size: 15px; }
.pw__timeline li::before { content: ''; position: absolute; left: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #f0a77a; }
.pw__timeline li + li::before { background: transparent; border: 2px solid #f0a77a; }
.pw__when { font-weight: 600; }
.pw__what { opacity: 0.75; }
.pw__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.pw__plans > .note, .pw__plans > .form__error { grid-column: 1 / -1; text-align: center; }
.pw__plans > .btn { grid-column: 1 / -1; justify-self: center; }
.pw-plan { position: relative; display: grid; justify-items: start; gap: 2px; padding: 18px 14px 14px; border-radius: 20px; border: 1.5px solid var(--line-strong); background: rgba(255, 255, 255, 0.6); cursor: pointer; min-height: 132px; }
.pw-plan input { position: absolute; opacity: 0; pointer-events: none; }
.pw-plan__name { font: 600 15px/1.2 var(--sans); }
.pw-plan__price { font: 600 26px/1.1 var(--serif); margin-top: 6px; }
.pw-plan__per { font-size: 13px; opacity: 0.7; }
.pw-plan__bill { font-size: 13px; opacity: 0.7; margin-top: 4px; }
.pw-plan__badge { position: absolute; top: -11px; left: 12px; font: 600 12px/1 var(--sans); color: #2a1408; background: linear-gradient(160deg, #ffc9a0, #f0a77a); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.pw-plan__check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.pw-plan--on { border-color: #f0a77a; box-shadow: 0 0 0 1px #f0a77a, 0 10px 30px -14px rgba(240, 167, 122, 0.7); }
.pw-plan--on .pw-plan__check { border-color: #f0a77a; background: #f0a77a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%232a1408' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.pw-plan--loading { cursor: default; background: linear-gradient(100deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.05) 70%) 0 0 / 300% 100%; animation: pw-shimmer 1.4s linear infinite; }
@keyframes pw-shimmer { to { background-position: -150% 0; } }
.pw__buy { min-height: 58px; font-size: 18px; margin-top: 4px; }
.pw__fine { font-size: 13px; line-height: 1.45; text-align: center; opacity: 0.7; margin-top: -4px; }
.pw__links { display: flex; justify-content: center; gap: 10px; font-size: 13px; opacity: 0.7; }
[data-theme='dark'] .pw-plan { background: rgba(255, 255, 255, 0.05); }
[data-theme='light'] .pw__close { background: rgba(46, 26, 59, 0.06); }
/* Settings > Manifess Pro */
.pro-status { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 201, 160, 0.22), rgba(243, 167, 164, 0.16)); border: 1px solid var(--line); }
.pro-status__label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.pro-status__title { font: 600 26px/1.15 var(--serif); }
.pro-status__detail { opacity: 0.85; }
.pro-alert { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--error); color: var(--error); font-weight: 500; }
.settings-actions { display: grid; gap: 10px; justify-items: stretch; }
.settings-actions .btn--quiet { justify-self: center; }
.pro-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pro-perks li { padding-left: 26px; position: relative; }
.pro-perks li::before { content: ''; position: absolute; left: 4px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(160deg, #ffc9a0, #f3a7a4); }
.pro-links { display: flex; gap: 16px; font-size: 14px; }

/* Continue with Google (Google's sign-in button style: white, with the colored G). */
.btn--google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #1f1f1f; border: 1px solid #747775; box-shadow: none; }
.btn--google:hover { background: #f7f8f8; }
.btn__google { width: 20px; height: 20px; flex: none; }
/* Google or email, as two equal buttons. */
.auth__choices { display: grid; gap: 12px; margin-top: 10px; }
.btn--email { gap: 12px; text-decoration: none; }
.btn__mail { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.auth__fine { font-size: 13px; line-height: 1.45; color: var(--plum-soft); text-align: center; }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--danger { background: var(--error); }
.btn--danger:hover { background: #8a2c3e; }
.btn--ghost {
  background: rgba(255, 255, 255, 0.7);
  color: var(--plum);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover { background: #fff; }
.btn--quiet {
  background: transparent;
  color: var(--plum-soft);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 10px;
}
.btn--quiet:hover { background: transparent; color: var(--plum); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.chip svg { width: 16px; height: 16px; fill: currentColor; }

input:not([type='checkbox']):not([type='radio']):not([type='range']),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 17px;
  line-height: 1.5;
}
.row > input, .row > select { flex: 1; min-width: 0; width: auto; }
textarea { resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: #9b8ca6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #c58a6a; box-shadow: 0 0 0 3px rgba(255, 186, 150, 0.35); }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: 500; font-size: 15px; }
.field__hint { font-size: 14px; color: var(--plum-soft); }
.form__error { color: var(--error); font-size: 15px; font-weight: 500; }
.form__error:empty { display: none; }

/* ---------- Sign up and sign in ---------- */
.auth { display: grid; gap: 14px; padding: 28px 22px; margin-top: 8px; }
.auth__title { font: 600 clamp(34px, 8.5vw, 42px)/1.05 var(--serif); }
.auth__lead { color: var(--plum-soft); }
.auth .form { margin-top: 6px; }
.auth__switch { font-size: 15px; color: var(--plum-soft); text-align: center; }
.auth__sent { font-weight: 500; }

/* Checkboxes and radio buttons with their words beside them */
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--plum); }
.check a { text-underline-offset: 3px; }


/* Reporting a practice */
.report { display: grid; justify-items: center; gap: 10px; }
.report__open { font-size: 14px; }
.report__form { display: grid; gap: 14px; width: 100%; padding: 16px; border-radius: 16px; background: rgba(239, 231, 248, 0.55); }
.report__reasons { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.report__reasons legend { margin-bottom: 8px; padding: 0; }

.words__edit > summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.words__edit[open] { display: grid; gap: 10px; }
.about-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.about-links a { text-underline-offset: 3px; }

/* ---------- Questionnaire ---------- */
.quiz { display: grid; gap: 14px; }
.quiz__progress {
  height: 6px;
  border-radius: 6px;
  background: rgba(46, 26, 59, 0.08);
  overflow: hidden;
}
.quiz__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--apricot), var(--blush));
  transition: width 0.4s ease;
}
.quiz__count { font-size: 14px; color: var(--plum-soft); }
.quiz__step { display: grid; gap: 14px; padding: 26px 20px; }
.quiz__title { font: 600 clamp(28px, 7vw, 36px)/1.12 var(--serif); }
.quiz__hint { color: var(--plum-soft); }
.quiz__body { display: grid; gap: 12px; }
.quiz__body + .quiz__body { margin-top: 10px; }
.quiz__body .field__hint { margin-top: -6px; }
.quiz__body .mic__status:empty { display: none; }
.quiz__intro { display: grid; gap: 12px; color: var(--plum-soft); }
.quiz__nav { display: flex; justify-content: space-between; gap: 10px; }
.quiz__nav .btn { flex: 1; }
.quiz__nav .btn--ghost { flex: 0 0 auto; }
.quiz__saved { font-size: 13px; color: var(--plum-soft); text-align: center; min-height: 1.2em; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: 16px;
  cursor: pointer;
  user-select: none;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
/* .is-checked / .is-disabled are set by the app (syncChoices), since older phones don't support :has(). */
.choice.is-checked {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--pearl);
}
.choice:has(input:focus-visible) { outline: 3px solid #e58f5e; outline-offset: 3px; }
.choice.is-disabled { opacity: 0.7; cursor: default; }
.choices--stack { display: grid; }
.choices--stack .choice { border-radius: 18px; min-height: 54px; }
.choices__label { font-weight: 500; font-size: 15px; margin-top: 6px; }

/* Voice answers */
.mic { display: grid; gap: 8px; }
.mic__button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 0;
  background: var(--plum);
  color: var(--pearl);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.mic__button svg { width: 18px; height: 18px; fill: currentColor; }
.mic__button:disabled { opacity: 0.55; cursor: default; }
.mic[data-state='recording'] .mic__button { background: #8d3b55; }
.mic__dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd4d4;
  animation: pulse 1.2s ease-in-out infinite;
}
.mic[data-state='recording'] .mic__dot { display: inline-block; }
.mic[data-state='recording'] .mic__icon { display: none; }
.mic__status { font-size: 14px; color: var(--plum-soft); min-height: 1.2em; }
.mic__status--error { color: var(--error); }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } }

/* Practice choices in the questionnaire and settings */
.practice-rows { display: grid; gap: 10px; }
.practice-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-areas: 'sun name toggle' 'sun time time';
  align-items: center;
  gap: 10px 12px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
}
.practice-row.is-changed { border-color: var(--copper); box-shadow: inset 0 0 0 1px var(--copper); }
.practice-row__sun { grid-area: sun; align-self: start; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); }
.practice-row--midday .practice-row__sun { background: var(--sun-midday); }
.practice-row--evening .practice-row__sun { background: var(--sun-evening); }
.practice-row__name { grid-area: name; min-width: 0; font-weight: 500; line-height: 1.25; }
.practice-row__name small { display: block; font-weight: 400; font-size: 13px; color: var(--plum-soft); }
.practice-row .switch { grid-area: toggle; }
.practice-row input[type='time'] { grid-area: time; width: 100%; max-width: 190px; min-height: 44px; padding: 6px 12px; font-size: 16px; }
.practice-row input[type='time']:disabled { opacity: 0.4; }

.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; }
/* The invisible checkbox reaches past the switch, so the tap target is 44px tall. */
.switch input { position: absolute; top: -8px; left: -4px; width: calc(100% + 8px); height: calc(100% + 16px); margin: 0; opacity: 0; cursor: pointer; }
.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(46, 26, 59, 0.18);
  transition: background-color 0.2s ease;
  pointer-events: none;
}
.switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(46, 26, 59, 0.3);
  transition: transform 0.2s ease;
}
.switch input:checked + span { background: var(--plum); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid #e58f5e; outline-offset: 2px; }

/* ---------- Writing and reveal ---------- */
.orb {
  display: block;
  width: 180px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff7ef 0%, #ffe6cf 30%, #ffcaa6 58%, #f6aea6 80%, #e9a7c0 100%);
  box-shadow: 0 0 40px 6px rgba(255, 196, 160, 0.5), 0 0 90px 30px rgba(212, 194, 246, 0.4);
}
.orb--small { width: 72px; }

/* The Ripples mark, moving: a sun with rings that spread out and fade, one after another.
   Its size is set on the element (width); the sun is 40% of it. */
.ripples { position: relative; display: grid; place-items: center; width: 120px; aspect-ratio: 1; }
.ripples b, .ripples i { position: absolute; width: 40%; height: 40%; border-radius: 50%; }
.ripples b {
  background: radial-gradient(circle at 50% 40%, #fff8f0 0%, #ffe6cf 32%, #ffcaa6 60%, #f6aea6 82%, #e9a7c0 100%);
  box-shadow: 0 0 24px 6px rgba(255, 196, 160, 0.45);
}
.ripples i { border: 1.5px solid #f0a77a; opacity: 0; animation: ripple 3.6s ease-out infinite; }
.ripples i:nth-child(2) { animation-delay: 1.2s; }
.ripples i:nth-child(3) { animation-delay: 2.4s; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } }
.ripples--load { width: 130px; }
.loading__name { font: 600 34px/1 var(--serif); }
/* While loading, the name shows in the middle, so not in the top bar too. */
body:not([data-view]) .topbar .brand, body[data-view='loading-view'] .topbar .brand { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ripples i { animation: none; opacity: 0.5; }
  .ripples i:nth-child(1) { transform: scale(1.4); }
  .ripples i:nth-child(2) { transform: scale(1.8); opacity: 0.3; }
  .ripples i:nth-child(3) { transform: scale(2.2); opacity: 0.15; }
}
.orb--breathe { animation: breathe 6s ease-in-out infinite; margin-bottom: 18px; }
@keyframes breathe { 50% { transform: scale(1.06); } }
/* ---------- Writing the declaration: the Ripples logo ----------
   The logo stays in place; its rings spread out one after another and reach further as it's
   written (app.js moves them). Under it: the percentage, the title and one changing line.
   Dark in both themes. Above the Today bar (10), under toasts (20), tips and the celebration. */
.writing {
  --w-bg: #15101c; --w-ink: #f5edf9; --w-ink-soft: #c6b7d2; --w-accent: #ffc9a0;
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  overflow-x: hidden; overflow-y: auto;
  padding-top: calc(7vh + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)));
  padding-bottom: calc(28px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)));
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
  background:
    radial-gradient(ellipse 80% 40% at 50% 18%, rgba(255, 180, 140, 0.12), transparent 70%),
    var(--w-bg);
  color: var(--w-ink);
}
.writing__mark { position: relative; flex: none; display: grid; place-items: center; width: 230px; height: 230px; }
.writing__sun, .writing__ring { position: absolute; width: 58px; height: 58px; border-radius: 50%; }
.writing__sun {
  background: radial-gradient(circle at 50% 40%, #fff8f0 0%, #ffe6cf 32%, #ffcaa6 60%, #f6aea6 82%, #e9a7c0 100%);
  box-shadow: 0 0 30px 8px rgba(255, 196, 160, 0.5);
}
.writing__ring { border: 1.5px solid #ffc9a0; opacity: 0; }
.writing__pct { margin-top: 2px; font: 400 54px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.writing__pct small { font-size: 24px; color: var(--w-ink-soft); margin-left: 3px; vertical-align: 0.9em; }
.writing__copy { display: grid; gap: 10px; justify-items: center; text-align: center; width: 100%; max-width: 440px; margin-top: 18px; }
.writing__title { font: 600 32px/1.1 var(--serif); }
.writing__note { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--w-accent); max-width: 30ch; }
.writing__line { font-size: 16.5px; line-height: 1.45; color: var(--w-ink-soft); max-width: 30ch; min-height: 2.9em; transition: opacity 0.6s; }
.writing__line.is-out { opacity: 0; }
.writing__failed { display: grid; gap: 12px; }
.writing__remind { width: 100%; margin-top: 4px; }
/* Dark in both themes, so its notice, error and quiet button are too. */
.writing .notice { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; color: var(--w-ink); }
.writing .form__error { color: #ff8fa1; }
.writing .btn--quiet { color: var(--w-ink-soft); }
@media (max-height: 700px) { .writing__mark { width: 190px; height: 190px; } }

.declaration { padding: 26px 22px; }
.declaration__lines { display: grid; gap: 14px; }
.declaration__lines li {
  font: italic 500 21px/1.35 var(--serif);
  padding-left: 18px;
  position: relative;
}
.declaration__lines li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apricot);
}
/* Their main affirmation, said in every session. */
.declaration__lines li.reveal__main { font-weight: 600; }
.reveal__main-label {
  display: block;
  font: 500 12px/1.4 var(--sans);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 2px;
}
.declaration__edit { display: grid; gap: 12px; }
.reveal__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reveal__actions .btn:first-child { flex: 1 1 160px; }

/* ---------- Day ---------- */
/* The theme sits in the top bar in place of the name, on one line: a long one gets a
   smaller size (fitDayTheme in app.js). */
.day__theme { flex: 1; min-width: 0; margin: 0 12px 0 0; padding-block: 6px; font: 600 26px/1.2 var(--serif); white-space: nowrap; overflow: hidden; }
.day__theme:not([hidden]) ~ .brand { display: none; }

/* The date in a pill, with an arrow on each side. */
.daynav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.daynav[hidden] { display: none; }
.daynav__arrow {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(46, 26, 59, 0.06); color: var(--plum); cursor: pointer;
}
.daynav__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.daynav__arrow:disabled { opacity: 0.35; cursor: default; }
.daynav__date {
  padding: 11px 24px; border-radius: 999px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, 0.55);
  color: var(--plum); font: 500 15px/1.2 var(--sans); letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
}
[data-theme='dark'] .daynav__arrow { background: rgba(255, 255, 255, 0.06); }
[data-theme='dark'] .daynav__date { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }

/* Breathing room between the date, the sessions, the player and the tabs. */
#day-view .slots { margin-top: 6px; }
#day-view .practice { margin-top: 8px; }
.practice .ptabs { margin: 10px 0 4px; }

/* Their free first day, after the paywall: the way back to the trial. Orange wash like the Pro card. */
.trial-banner { display: grid; gap: 12px; margin-top: 14px; padding: 16px; border-radius: 20px; border: 1px solid rgba(240, 167, 122, 0.55); background: linear-gradient(160deg, rgba(255, 201, 160, 0.26), rgba(243, 167, 164, 0.18)); color: inherit; text-decoration: none; }
.trial-banner__top { display: flex; align-items: center; gap: 14px; }
.trial-banner__sun { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 5px rgba(255, 201, 160, 0.3), 0 0 22px rgba(255, 170, 120, 0.6); }
.trial-banner__text { display: grid; gap: 2px; min-width: 0; }
.trial-banner__title { font: 600 21px/1.15 var(--serif); }
.trial-banner__sub { font-size: 13px; line-height: 1.35; color: var(--plum-soft); }
.trial-banner__btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 999px; background: linear-gradient(160deg, #ffc9a0, #f0a77a); color: #2a1408; font: 600 16px/1 var(--sans); box-shadow: 0 10px 28px -14px rgba(240, 167, 122, 0.8); }
.trial-banner__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.notice { display: grid; gap: 12px; padding: 18px 18px; }
.notice__text { font-weight: 500; }
/* A notice someone can close: the ✕ sits in the corner and the text leaves room for it. */
.notice--closable { position: relative; }
.notice__close + .notice__text { padding-right: 36px; }
.notice__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.notice__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.slots {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--panel-line);
  overflow-x: auto;
}
.slot {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--plum-soft);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.slot small { font-size: 13px; font-weight: 400; }
.slot__sun { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); flex: none; }
.slot[data-slot='midday'] .slot__sun { background: var(--sun-midday); }
.slot[data-slot='evening'] .slot__sun { background: var(--sun-evening); }
/* The selected practice fills with its own sun color. */
.slot[aria-pressed='true'] { color: var(--on-sun); background: radial-gradient(circle at 30% 25%, #fff4e8, #ffc9a0 60%, #f6b39b); box-shadow: 0 8px 18px -10px rgba(240, 140, 90, 0.8); }
.slot[data-slot='midday'][aria-pressed='true'] { background: radial-gradient(circle at 30% 25%, #fffbea, #ffe7a6 60%, #f8cf7a); box-shadow: 0 8px 18px -10px rgba(230, 170, 60, 0.8); }
.slot[data-slot='evening'][aria-pressed='true'] { background: radial-gradient(circle at 30% 25%, #f6f0ff, #dccdf5 60%, #c2aceb); box-shadow: 0 8px 18px -10px rgba(130, 100, 200, 0.8); }
.slot[aria-pressed='true'] small { color: var(--plum-soft); }
.slot__flame { display: inline-flex; flex: none; }
.slot__flame svg { width: 14px; height: 14px; fill: #d9692f; }
/* On phones the time goes under the name, so all three tabs fit. */
@media (max-width: 520px) {
  .slot { flex: 1 1 0; min-width: 0; flex-wrap: wrap; column-gap: 6px; row-gap: 0; padding: 6px 8px; line-height: 1.2; }
  .slot small { flex-basis: 100%; text-align: center; }
}

.practice { display: grid; gap: 16px; }
/* C2: the session sits on the page itself, not in a card. */
.practice.panel, [data-theme='dark'] .practice.panel { background: none; border: 0; box-shadow: none; padding: 4px 2px 0; }
.practice__title { font: 600 28px/1.15 var(--serif); }
.practice__affirmation {
  font: italic 500 23px/1.3 var(--serif);
  padding: 18px 18px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 90% at 50% 120%, rgba(255, 196, 160, 0.55), transparent 70%),
    linear-gradient(180deg, #f8f1fd, #fdf0ea);
}

/* A glowing play button with back 15 seconds on its left and speed on its right;
   under them, a thin bar to drag, with the times at its ends. */
.player {
  display: grid;
  gap: 12px;
}
.player__row { display: flex; align-items: center; gap: 12px; }
.player__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
/* One line; a long title gets a smaller size (fitPlayerTitle in app.js). */
.player__title { font: 600 22px/1.12 var(--serif); overflow: hidden; white-space: nowrap; }
.player__play {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  color: var(--on-sun);
  background: var(--sun);
  box-shadow: 0 0 0 6px rgba(255, 201, 160, 0.25), 0 0 24px rgba(255, 186, 150, 0.6);
  cursor: pointer;
}
.player__play svg { width: 22px; height: 22px; fill: currentColor; }
.player .icon-pause, .player .icon-replay { display: none; }
.player[data-state='playing'] .icon-play { display: none; }
.player[data-state='playing'] .icon-pause { display: block; }
.player[data-state='ended'] .icon-play { display: none; }
.player[data-state='ended'] .icon-replay { display: block; }
.player__track { display: grid; gap: 4px; }
/* pointer-events: none lets taps here reach the seek bar's taller hit area. */
.player__times { font-size: 13px; color: var(--plum-soft); font-variant-numeric: tabular-nums; }
.player__side {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 0; background: rgba(46, 26, 59, 0.06);
  color: var(--plum); font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer;
}
.player__side svg { width: 20px; height: 20px; fill: currentColor; }
.player__side:hover { background: #fff; }
.player__back svg { width: 24px; height: 24px; }
.player__back text { font: 700 7.5px/1 var(--sans); fill: currentColor; }
/* 44px tall to tap, with negative margins so it still takes 22px of space. */
#seek {
  --p: 0%;
  width: 100%;
  height: 44px;
  margin: -11px 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
#seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f2a98d var(--p), rgba(46, 26, 59, 0.12) var(--p));
}
#seek::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f2a98d var(--p), rgba(46, 26, 59, 0.12) var(--p));
}
#seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--plum);
  border: 2px solid #fff;
}
#seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--plum); border: 2px solid #fff; }

/* Tabs under the player: Words (read along), Today's step, Full script. */
.ptabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 24px; background: rgba(46, 26, 59, 0.06); }
.ptabs__tab { min-height: 40px; padding: 8px 6px; border: 0; border-radius: 20px; background: none; color: var(--plum-soft); font: 500 14px/1.1 var(--sans); cursor: pointer; }
.ptabs__tab[aria-selected='true'] { background: var(--plum); color: var(--pearl); }
.ptabs__tab[hidden] { display: none; }
.ppanel { display: grid; gap: 12px; }
.ppanel[hidden] { display: none; }

/* The words, like song lyrics: the line being read is bright, the rest faded; the list
   slides up so the current line sits near the top, and fades out at the bottom. */
.lyrics { position: relative; height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.lyrics[hidden] { display: none; }
.lyrics__lines { position: relative; display: grid; gap: 18px; padding-top: 4px; transition: transform 0.6s ease; }
.lyrics__line { font: 600 23px/1.3 var(--serif); color: var(--plum); opacity: 0.36; transition: opacity 0.4s; }
.lyrics__line.is-past { opacity: 0.22; }
.lyrics__line.is-now { opacity: 1; }
.lyrics__line--repeat { font-style: italic; }
.lyrics__turn { display: block; margin-top: 6px; font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); visibility: hidden; }
.lyrics__line.is-turn .lyrics__turn { visibility: visible; }


/* How they feel after a session: five choices in a row, the chosen one filled with the sun. */
.feeling { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(239, 231, 248, 0.6); text-align: center; }
.feeling__title { margin: 0; font: 500 16px/1.3 var(--sans); }
.feeling__choices { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.feeling__btn {
  padding: 10px 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--plum);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
}
.feeling__btn[aria-pressed='true'] { background: var(--sun); color: var(--on-sun); border-color: transparent; }
.feeling__note { margin: 0; font-size: 14px; color: var(--plum-soft); }
.feeling__note:empty { display: none; }
[data-theme='dark'] .feeling { background: rgba(255, 255, 255, 0.05); }

.status {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 16px;
  border-radius: 18px;
  background: rgba(239, 231, 248, 0.6);
}
.status__text { color: var(--plum-soft); }
.status[data-busy] .status__text::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--sun);
  animation: pulse 1.4s ease-in-out infinite;
  vertical-align: 0.05em;
}

.practice__sections { display: grid; gap: 18px; }
.psection { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.psection__label { font: 600 22px/1.2 var(--serif); }
.psection p { color: var(--plum-soft); }
.psection__list { display: grid; gap: 8px; }
.psection__list li { position: relative; padding-left: 18px; }
.psection__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--apricot);
}
.psection--affirmations .psection__list li,
.psection--declaration .psection__list li { font: italic 500 20px/1.35 var(--serif); }
.psection--affirmations .psection__list li::before,
.psection--declaration .psection__list li::before { top: 0.6em; }
.psection--action, .psection--reviewAction {
  border-top: 0;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff3ea, #fbeef4);
}
.psection--action p, .psection--reviewAction p { color: var(--plum); }
/* Readings (the morning script and the evening gratitude) are set to be read aloud. */
.psection--script p, .psection--gratitude p { font: 500 20px/1.5 var(--serif); color: var(--plum); }
.psection--closingDeclaration { text-align: center; }
.psection--closingDeclaration p { font: italic 500 24px/1.3 var(--serif); color: var(--plum); }

.practice__script { display: grid; gap: 10px; color: var(--plum-soft); }
#ppanel-script .practice__links, #ppanel-script .report { margin-top: 6px; }

.reflection { display: grid; gap: 10px; }
.reflection .mic { justify-items: start; }
/* Crisis support under the reflection. */
.support { display: grid; gap: 10px; padding: 18px; border-radius: 20px; border: 1px solid var(--line-strong); background: var(--mist); scroll-margin-bottom: calc(var(--tabbar) + 40px); }
.support p { margin: 0; }
.support__title { font: 600 22px/1.2 var(--serif); }
.support__text { line-height: 1.5; }
.support__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.support__fine { font-size: 14px; color: var(--plum-soft); }

/* ---------- History ---------- */

/* ---------- Settings ---------- */

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  height: var(--tabbar);
  display: flex;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--panel-line);
  box-shadow: 0 18px 40px -20px rgba(46, 26, 59, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 10;
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--plum-soft);
  text-decoration: none;
}
.tabbar svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.tabbar a[aria-current='page'] { background: var(--plum); color: var(--pearl); }
/* The page fades out just above the bar, so content never runs right into it. */
body.has-tabbar::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar) + 44px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)));
  background: linear-gradient(to bottom, rgba(21, 16, 28, 0), var(--pearl) 55%);
  pointer-events: none;
  z-index: 9; /* under the bar (10) */
}
[data-theme='light'] body.has-tabbar::after { background: linear-gradient(to bottom, rgba(251, 248, 253, 0), var(--pearl) 55%); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(460px, calc(100% - 24px));
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--plum);
  color: var(--pearl);
  font-size: 15px;
  box-shadow: 0 18px 40px -16px rgba(46, 26, 59, 0.6);
  z-index: 20;
}

/* ---------- Wider screens ---------- */
@media (min-width: 720px) {
  .panel { padding: 30px 30px; }
  .quiz__step { padding: 34px 32px; }
  .auth { padding: 36px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb--breathe, .mic__dot, .status[data-busy] .status__text::before { animation: none; }
  .quiz__fill, .switch span, .switch span::after { transition: none; }
}

/* Settings: drafting a declaration from the profile */
.note--error { color: var(--error); }

/* ---------- Streak (top of today) ---------- */
.streak__pill {
  display: inline-flex; align-items: center; gap: 5px; flex: none; margin: 0;
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(46, 26, 59, 0.07); border: 0;
  color: var(--plum); font: 600 14px/1 var(--sans); font-variant-numeric: lining-nums;
  text-decoration: none;
}
.streak__flame, .streak__pill svg { width: 16px; height: 16px; fill: #a0704f; }
.streak__pill svg { width: 13px; height: 13px; }
[data-theme='dark'] .streak__pill:not(.streak__pill--lit) svg { fill: #d9a98a; }
.streak__pill--lit { background: #fff1e6; border-color: #ffc9a0; }
.streak__pill--lit svg { fill: #f08a4b; }

/* ---------- Journey ---------- */
.back { color: var(--plum-soft); font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

.journey__tree { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--panel-line); box-shadow: 0 24px 50px -40px rgba(46, 26, 59, 0.45); }
.journey__tree svg { display: block; width: 100%; height: auto; }
.tree--waiting { filter: grayscale(0.6) opacity(0.7); }
.journey__today { font-size: 14px; color: var(--plum-soft); text-align: center; margin-top: -4px; }
.journey__card { display: grid; gap: 12px; }
.journey__label { display: block; font: 600 12px/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum-soft); }
.journey__level { display: flex; align-items: center; gap: 14px; }
.journey__orb, .level__orb { flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4e8, #ffc9a0 55%, #f3a7a4); }
.journey__orb { width: 52px; height: 52px; box-shadow: 0 0 0 5px rgba(255, 201, 160, 0.3), 0 0 22px rgba(255, 170, 120, 0.6); }
.journey__level-name { display: block; font: 600 30px/1.1 var(--serif); color: var(--plum); }
.journey__progress { height: 8px; border-radius: 8px; background: var(--mist); overflow: hidden; }
.journey__progress i { display: block; height: 100%; background: linear-gradient(90deg, #ffc9a0, #f3a7a4); }
.levels { display: grid; gap: 8px; }
.level { border: 1px solid var(--line); border-radius: 16px; }
.level__row { display: grid; grid-template-columns: 40px 1fr auto 24px; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; list-style: none; }
.level__row::-webkit-details-marker { display: none; }
.level__orb { width: 40px; height: 40px; }
.level--ahead .level__orb { background: var(--mist); }
.level__name { font: 600 21px/1.1 var(--serif); color: var(--plum); }
.level__when { font-size: 14px; color: var(--plum-soft); }
.level__info { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--plum-soft); font: italic 600 15px/1 var(--serif); color: var(--plum-soft); }
.level[open] .level__info { background: var(--plum); border-color: var(--plum); color: var(--pearl); }
.level__more { display: grid; gap: 8px; padding: 0 14px 14px 64px; font-size: 15px; color: var(--plum-soft); }
.level__more strong { font-weight: 500; color: var(--plum); }
.level__day { font-size: 13px; }
.level--now { border-color: #f0a274; box-shadow: inset 0 0 0 1px #f0a274; }
.level--now .level__orb { box-shadow: 0 0 0 4px rgba(255, 201, 160, 0.35), 0 0 18px rgba(255, 170, 120, 0.6); }
.level--ahead .level__row { opacity: 0.85; }
@media (max-width: 420px) { .level__more { padding-left: 14px; } }
.journey__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.journey__stat { display: grid; gap: 6px; padding: 14px; }
.journey__big { font: 600 34px/1 var(--serif); color: var(--plum); }

/* ---------- Celebration after a practice ---------- */
.celebrate {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(46, 26, 59, 0.45);
}
.celebrate__card {
  width: 100%; max-width: 380px; display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 24px 22px; border-radius: var(--radius); background: var(--pearl);
  box-shadow: 0 24px 60px -20px rgba(46, 26, 59, 0.5);
  animation: celebrate-in 0.45s ease-out;
}
.celebrate__plant { width: 100%; max-width: 280px; }
.celebrate__plant svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.celebrate__count { display: inline-flex; align-items: center; gap: 6px; font: 600 44px/1 var(--serif); color: var(--plum); }
.celebrate__count svg { width: 30px; height: 30px; fill: #f08a4b; }
.celebrate__title { font: 600 30px/1.1 var(--serif); color: var(--plum); }
.celebrate__text { color: var(--plum-soft); }
.celebrate__line { font: italic 500 22px/1.3 var(--serif); color: var(--plum); }
.celebrate .btn { width: 100%; margin-top: 6px; }
@keyframes celebrate-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .celebrate__card { animation: none; } }

/* Cormorant's old-style figures make 1 and 10 look like I and IO. */
.journey__big, .celebrate__count, .streak__pill { font-variant-numeric: lining-nums; }

/* ---------- Welcome (first open, before an account) ---------- */
.welcome { min-height: calc(100vh - 150px); min-height: calc(100dvh - 150px); justify-content: space-between; }
.welcome__slide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 6vh; }
.welcome__ripples { width: 190px; margin-bottom: 6px; }
.welcome__brand { font: 600 46px/1 var(--serif); }
.welcome__line { font: italic 500 25px/1.3 var(--serif); max-width: 340px; }
.welcome__title { font: 600 clamp(34px, 8.5vw, 42px)/1.08 var(--serif); }
.welcome__lead { color: var(--plum-soft); max-width: 360px; }
.welcome__sample { width: 100%; max-width: 380px; display: grid; justify-items: center; gap: 12px; padding: 22px 18px; }
.welcome__play {
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--sun); color: var(--on-sun); box-shadow: 0 0 0 9px rgba(255, 201, 160, 0.3);
}
.welcome__play svg { width: 26px; height: 26px; fill: currentColor; }
.welcome__play .icon-pause, .welcome__play.is-playing .icon-play { display: none; }
.welcome__play.is-playing .icon-pause { display: block; }
.welcome__sample-text { font: italic 500 21px/1.35 var(--serif); }
.welcome__list { width: 100%; max-width: 380px; padding: 6px 18px; text-align: left; }
.welcome__list li { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.welcome__list li:last-child { border-bottom: 0; }
.welcome__list strong { display: block; font-weight: 500; }
.welcome__list span span, .welcome__list li > span:last-child { color: var(--plum-soft); }
.welcome__list strong { color: var(--plum); }
.welcome__dot { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--sun); }
.welcome__dot--evening { background: var(--sun-evening); }
.welcome__flame { flex: 0 0 28px; width: 28px; height: 28px; fill: #e8834f; }
.welcome__foot { display: grid; gap: 12px; justify-items: center; padding-bottom: 8px; }
.welcome__dots { display: flex; gap: 7px; }
.welcome__dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--lilac); transition: width 0.2s ease; }
.welcome__dots span.is-on { width: 22px; background: var(--plum); }
.welcome__note { font-size: 14px; color: var(--plum-soft); text-align: center; }
.welcome__login { font-size: 15px; color: var(--plum-soft); }

/* ---------- First-practice tips ---------- */
.tips {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar) + 18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100% - 24px));
  padding: 18px 18px 14px;
  border-radius: 22px;
  background: var(--plum);
  color: var(--pearl);
  box-shadow: 0 22px 50px -14px rgba(46, 26, 59, 0.7);
  z-index: 25;
}
.tips__title { font: 600 23px/1.2 var(--serif); margin-bottom: 4px; }
.tips__text { font-size: 15px; opacity: 0.92; }
.tips__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tips__count { font-size: 13px; opacity: 0.7; margin-right: auto; }
.tips__skip { background: none; border: 0; color: var(--pearl); opacity: 0.8; font-size: 15px; cursor: pointer; padding: 8px; }
.tips .btn { background: var(--pearl); color: var(--plum); }
.tip-target { position: relative; z-index: 24; box-shadow: 0 0 0 4px var(--pearl), 0 0 0 8px #e8834f !important; border-radius: 22px; }
.mic__ask { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: 16px; background: var(--mist); font-size: 14px; color: var(--plum-soft); }
body[data-view="welcome-view"] .topbar .brand { visibility: hidden; } /* the welcome screen shows the name large */
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.starter { border: 1px solid var(--panel-line); background: #fff; color: var(--plum-soft); border-radius: 999px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.starter:hover { color: var(--plum); border-color: var(--lilac); }

/* Show / hide password (added by addPasswordToggles in app.js). */
.password { position: relative; display: block; }
.password > input:not([type='checkbox']):not([type='radio']):not([type='range']) { padding-right: 56px; }
.password__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--plum-soft);
  cursor: pointer;
}
.password__toggle:focus-visible { outline: 2px solid #c58a6a; }
.password__toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Dark mode ----------
   theme.js sets data-theme on <html> before the page draws: "dark" or "light", from the
   setting in Settings (Match my phone / Light / Dark). The colors above are the light theme;
   this swaps the tokens and the few surfaces that use plain white. */
:root[data-theme='dark'] {
  --pearl: #15101c;
  --mist: #241a30;
  --lilac: #8f78bf;
  --plum: #f2eaf7;
  --plum-hover: #ffffff;
  --plum-soft: #bcadc9;
  --copper: #e3ab8b;
  --error: #ff8fa1;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);
  --panel-line: rgba(203, 185, 236, 0.16);
  --surface: #1e1628;
  color-scheme: dark;
}
[data-theme='dark'] .haze {
  background:
    radial-gradient(ellipse 80% 45% at 10% 0%, rgba(255, 160, 120, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 50% at 100% 6%, rgba(150, 120, 220, 0.22), transparent 70%),
    linear-gradient(180deg, #1c1426 0%, var(--pearl) 45%);
}
[data-theme='dark'] .panel { background: rgba(255, 255, 255, 0.045); box-shadow: none; }
[data-theme='dark'] .panel--dawn {
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 160, 120, 0.16), transparent 70%),
    linear-gradient(180deg, #211830 0%, #24192a 100%);
}
[data-theme='dark'] .btn, [data-theme='dark'] .toast, [data-theme='dark'] .tips { box-shadow: none; }
[data-theme='dark'] .btn--danger { color: #2a0f17; }
[data-theme='dark'] .btn--danger:hover { background: #ffa7b5; }
[data-theme='dark'] .btn--ghost, [data-theme='dark'] .chip, [data-theme='dark'] .player__side,
[data-theme='dark'] .streak__pill, [data-theme='dark'] .starter,
[data-theme='dark'] .slots { background: rgba(255, 255, 255, 0.06); }
[data-theme='dark'] .btn--ghost:hover, [data-theme='dark'] .player__side:hover { background: rgba(255, 255, 255, 0.12); }
[data-theme='dark'] input:not([type='checkbox']):not([type='radio']):not([type='range']),
[data-theme='dark'] select, [data-theme='dark'] textarea,
[data-theme='dark'] .choice, [data-theme='dark'] .practice-row { background: var(--surface); }
[data-theme='dark'] .ptabs, [data-theme='dark'] .player__side { background: rgba(255, 255, 255, 0.06); }
[data-theme='dark'] #seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, #f2a98d var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
[data-theme='dark'] .choice.is-checked { background: var(--plum); }
[data-theme='dark'] input::placeholder, [data-theme='dark'] textarea::placeholder { color: #8d7e9a; }
[data-theme='dark'] .report__form, [data-theme='dark'] .status { background: rgba(255, 255, 255, 0.05); }
[data-theme='dark'] .quiz__progress { background: rgba(255, 255, 255, 0.14); }
[data-theme='dark'] .switch span { background: rgba(255, 255, 255, 0.22); }
[data-theme='dark'] .switch input:checked + span { background: #f0a274; }
/* The practice tabs keep their sunrise colors, so their text stays dark. */
[data-theme='dark'] .slot[aria-pressed='true'], [data-theme='dark'] .slot[aria-pressed='true'] small { color: #2e1a3b; }
[data-theme='dark'] .practice__affirmation {
  background:
    radial-gradient(ellipse 80% 90% at 50% 120%, rgba(255, 160, 120, 0.18), transparent 70%),
    linear-gradient(180deg, #221930, #261a28);
}
[data-theme='dark'] .psection--action, [data-theme='dark'] .psection--reviewAction { background: linear-gradient(160deg, #2a1e26, #261b2c); }
[data-theme='dark'] #seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, #f2a98d var(--p), rgba(255, 255, 255, 0.16) var(--p)); }
[data-theme='dark'] #seek::-moz-range-track { background: linear-gradient(90deg, #f2a98d var(--p), rgba(255, 255, 255, 0.16) var(--p)); }
[data-theme='dark'] #seek::-webkit-slider-thumb, [data-theme='dark'] #seek::-moz-range-thumb { border-color: var(--pearl); }
/* Dark: the bar gets its own lighter surface, a warm edge and a shadow, so cards scrolling under it don't blend in. */
[data-theme='dark'] .tabbar {
  background: rgba(50, 36, 68, 0.96);
  border-color: rgba(255, 220, 200, 0.16);
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .streak__pill--lit { background: rgba(240, 138, 75, 0.16); border-color: rgba(255, 201, 160, 0.4); }
[data-theme='dark'] .celebrate { background: rgba(0, 0, 0, 0.6); }
[data-theme='dark'] .mic[data-state='recording'] .mic__button { background: #d9708f; }

/* ---------- Settings ---------- */
.settings__group { display: grid; gap: 10px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.settings__subtitle { font: 600 21px/1.2 var(--serif); }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.answers__item {
  display: grid;
  gap: 2px;
  padding: 12px 40px 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.answers__item::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--plum-soft);
  border-top: 2px solid var(--plum-soft);
  transform: translateY(-50%) rotate(45deg);
}
.answers__item:hover { border-color: var(--line-strong); }
.answers__title { font-weight: 500; }
.answers__text { font-size: 15px; color: var(--plum-soft); }
.answers__text--empty { font-style: italic; }
.answers__rewrite { display: grid; gap: 10px; justify-items: start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 201, 160, 0.25); }
.theme-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.theme-choice .row { margin-top: 6px; }
[data-theme='dark'] .answers__item { background: rgba(255, 255, 255, 0.05); }
[data-theme='dark'] .answers__rewrite { background: rgba(255, 160, 120, 0.12); }

/* Voice list in Settings */
.voices { display: grid; gap: 8px; }
.voice { display: flex; align-items: center; gap: 8px; }
.voice__pick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.voice__pick input { width: 18px; height: 18px; accent-color: var(--plum); }
.voice__pick.is-checked { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }
.voice__pick:has(input:focus-visible) { outline: 3px solid #e58f5e; outline-offset: 2px; }
.voice__play {
  flex: 0 0 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  color: var(--plum);
  cursor: pointer;
}
.voice__play svg { width: 20px; height: 20px; fill: currentColor; }
[data-theme='dark'] .voice__pick, [data-theme='dark'] .voice__play { background: rgba(255, 255, 255, 0.05); }
/* While a sample plays, its button is filled in and shows Stop, so it's clear how to stop it. */
.voice__play[aria-pressed='true'], [data-theme='dark'] .voice__play[aria-pressed='true'] { background: var(--plum); border-color: var(--plum); color: #fff; }

/* Light theme: a thin warm rim so the pale suns and orbs stand out from the pale page. */
[data-theme='light'] .orb,
[data-theme='light'] .practice-row__sun,
[data-theme='light'] .slot__sun,
[data-theme='light'] .player__play,
[data-theme='light'] .welcome__play,
[data-theme='light'] .welcome__dot,
[data-theme='light'] .journey__orb,
[data-theme='light'] .level__orb,

/* Female / Male switch above the voice list */
.voice-gender { gap: 8px; margin-bottom: 4px; }
.choice-btn { min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--plum); font: 500 15px var(--sans); cursor: pointer; }
.choice-btn[aria-pressed='true'] { background: var(--plum); border-color: var(--plum); color: var(--pearl); }
.choice-btn:focus-visible { outline: 3px solid #e58f5e; outline-offset: 2px; }

/* Your declaration, shown in full in Settings */
.decl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.decl-list li { position: relative; padding-left: 18px; font: italic 500 19px/1.35 var(--serif); color: var(--plum); }
.decl-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--apricot); }

/* Own affirmations */
.own-badge { margin: 0; font-size: 14px; color: var(--copper); }
.own-form { display: grid; gap: 12px; }
.reveal__own { justify-self: start; }

/* ---------- Settings menu: one row per section, each opening its own screen ---------- */
.settings-menu { display: grid; gap: 8px; }
.settings-menu__label {
  font: 600 13px/1 var(--sans, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--plum-soft);
  margin: 18px 4px 2px;
}
.settings-menu__label:first-child { margin-top: 4px; }
.settings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 40px 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--panel-line);
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.settings-row::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--plum-soft);
  border-top: 2px solid var(--plum-soft);
  transform: translateY(-50%) rotate(45deg);
}
.settings-row:active { transform: scale(0.99); }
.settings-row__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(214, 130, 90, 0.14);
  color: var(--copper);
}
.settings-row__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-row__text { display: grid; gap: 2px; min-width: 0; }
.settings-row__title { font-size: 17px; font-weight: 500; }
.settings-row__value { font-size: 15px; color: var(--plum-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-row__value:empty { display: none; }
.settings-foot { display: grid; gap: 4px; justify-items: center; text-align: center; padding-top: 18px; margin-top: 10px; border-top: 1px solid var(--line); }
.settings-foot__out { margin-top: 10px; width: 100%; }
.settings-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.settings-save .btn:disabled { opacity: 0.45; }
[data-theme='dark'] .settings-row { background: rgba(255, 255, 255, 0.05); }
[data-theme='dark'] .settings-row__icon { background: rgba(255, 180, 140, 0.14); }
.name-show { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 4px 4px 4px 16px; border-radius: 14px; border: 1px solid var(--line); }
.name-show__text { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-edit { display: grid; gap: 10px; }

/* ---------- Behind the phone's own bars ---------- */
/* On newer Android the app draws under the clock bar and the back/home buttons. These solid
   strips (the page color, light or dark) keep the page from showing through behind them. On
   phones that don't draw under the bars, the insets are 0 and nothing shows. */
html::before,
html::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--pearl);
  pointer-events: none;
}
html::before { top: 0; height: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); }
/* The bottom fades into black, where the phone's white back/home buttons sit (the bar itself
   is black on phones that draw it, set in the Android theme). */
html::after {
  bottom: 0;
  height: calc(28px + max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 28px, #000);
  z-index: 9; /* under the Today / History / Settings bar (10), over the page */
}

/* ---------- History calendar ---------- */
.cal { display: grid; gap: 14px; padding: 18px 14px; }
.cal__nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.cal__title { text-align: center; font: 600 24px/1.1 var(--serif); }
.cal__arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.7);
  display: grid; place-items: center; color: var(--plum); cursor: pointer;
}
.cal__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal__arrow:disabled { opacity: 0.3; cursor: default; }
.cal__body { display: grid; gap: 6px; transition: opacity 0.15s ease; touch-action: pan-y; }
.cal__body--out { opacity: 0; transition-duration: 0.1s; }
.cal__weekdays, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__weekdays span { text-align: center; font: 600 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--plum-soft); padding-bottom: 4px; }
.cal__grid { row-gap: 4px; }
.cal__cell { display: grid; justify-items: center; align-content: center; min-height: 46px; color: var(--plum); text-decoration: none; }
.cal__circle {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  font: 500 15px/1 var(--sans); font-variant-numeric: lining-nums; border: 1.5px solid transparent;
}
.cal__cell--saved .cal__circle { border-color: var(--line-strong); }
.cal__cell--done .cal__circle { background: linear-gradient(160deg, #ffc9a0, #f3a7a4); border-color: #e8834f; color: #2e1a3b; font-weight: 600; }
.cal__cell--rest .cal__circle { background: var(--mist); }
.cal__cell--today .cal__circle { border: 2px solid #f0a274; font-weight: 600; }
.cal__cell--future .cal__circle, .cal__cell--none .cal__circle { color: var(--plum-soft); opacity: 0.7; }
.cal__cell--missed .cal__circle { color: var(--plum-soft); }
a.cal__cell:active .cal__circle { transform: scale(0.94); }
.cal__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 13px; color: var(--plum-soft); }
.cal__legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal__key { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; display: inline-block; }
.cal__key--done { background: linear-gradient(160deg, #ffc9a0, #f3a7a4); border: 1px solid #e8834f; }
.cal__key--rest { background: var(--mist); }
.cal__key--today { border: 2px solid #f0a274; }
.cal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; padding: 16px 10px; }
.cal-stats strong { display: block; font: 600 26px/1.1 var(--serif); font-variant-numeric: lining-nums; }
.cal-stats span { font-size: 13px; color: var(--plum-soft); }
[data-theme='dark'] .cal__arrow { background: rgba(255, 255, 255, 0.06); }
[data-theme='dark'] .cal__cell--rest .cal__circle, [data-theme='dark'] .cal__key--rest { background: rgba(255, 255, 255, 0.14); }
/* Under the "Today's step" tab, a lone step doesn't repeat that heading. */
#practice-sections > .psection:only-child > .psection__label { display: none; }

/* ---------- Sign in and create account (A): the logo, name and an affirmation in the
   middle, the buttons at the bottom; after "email", a smaller logo and the form in a card. */
.auth--split {
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 4px 8px;
  margin-top: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.auth__hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 12px 0 20px; }
.auth__ripples { width: 190px; }
.auth__name { font: 600 46px/1 var(--serif); margin-top: 4px; }
.auth__affirmation { font: italic 500 25px/1.3 var(--serif); max-width: 310px; color: var(--plum); opacity: 0.88; }
.auth--split .auth__choices { margin-top: 0; }
.auth--split .btn--google, .auth--split .btn--email { min-height: 56px; font-size: 17px; }
/* Choosing: the title stays for screen readers only; the hero says who we are. */
.auth--split[data-mode='choose'] .auth__title,
.auth--split[data-mode='choose'] .auth__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Email: smaller logo, centred title, the form as a card at the bottom. */
.auth--split[data-mode='email'] .auth__hero { flex: 0 0 auto; padding: 8px 0 0; gap: 0; }
.auth--split[data-mode='email'] .auth__ripples { width: 120px; }
.auth--split[data-mode='email'] .auth__name, .auth--split[data-mode='email'] .auth__affirmation { display: none; }
.auth--split[data-mode='email'] .auth__title { text-align: center; font-size: 34px; }
.auth--split[data-mode='email'] .auth__lead { text-align: center; margin-top: -6px; }
.auth--split[data-mode='email'] .form {
  margin-top: auto;
  padding: 20px 18px 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--panel-line);
}
[data-theme='dark'] .auth--split[data-mode='email'] .form { background: rgba(255, 255, 255, 0.05); }
/* The name is in the middle of these screens, so not in the top bar too. */
body[data-view='login-view'] .topbar .brand, body[data-view='signup-view'] .topbar .brand { visibility: hidden; }