/* ============================================================
   Serenity — stylesheet
   ============================================================ */

:root {
  --bg-1: #F0F8F0;
  --bg-2: #E8F5E8;
  --bg-3: #DFF3EE;
  --bg-4: #F8FFF8;

  --card: rgba(255, 255, 255, 0.62);
  --card-line: rgba(45, 90, 110, 0.10);
  --glass: rgba(255, 255, 255, 0.34);
  --glass-edge: rgba(255, 255, 255, 0.72);
  --glass-field: rgba(255, 255, 255, 0.34);
  --glass-glint: rgba(255, 255, 255, 0.55);
  --glass-sheen: linear-gradient(145deg,
    rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.02) 68%, rgba(255, 255, 255, 0.16) 100%);
  --veil: rgba(28, 52, 60, 0.10);
  --danger: #B84A5E;

  --ink: #2C5566;
  --ink-soft: #6B8FA3;
  --ink-faint: #93AEBC;
  --accent: #7FA88A;
  --accent-soft: rgba(127, 168, 138, 0.16);
  --wisdom-bg: rgba(232, 241, 245, 0.72);
  --wisdom-edge: #6B8FA3;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --shell: min(560px, 100%);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.night {
  --bg-1: #131C2B;
  --bg-2: #16213E;
  --bg-3: #0F2A3C;
  --bg-4: #1A2233;

  --card: rgba(20, 32, 48, 0.60);
  --card-line: rgba(160, 200, 220, 0.12);
  --glass: rgba(28, 40, 62, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-field: rgba(255, 255, 255, 0.07);
  --glass-glint: rgba(255, 255, 255, 0.14);
  --glass-sheen: linear-gradient(145deg,
    rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 42%,
    rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.05) 100%);
  --veil: rgba(6, 14, 22, 0.32);
  --danger: #E08797;

  --ink: #DCE9F0;
  --ink-soft: #93B2C4;
  --ink-faint: #6E8A9C;
  --accent: #9CC6A8;
  --accent-soft: rgba(156, 198, 168, 0.14);
  --wisdom-bg: rgba(18, 30, 46, 0.66);
  --wisdom-edge: #7FA6BC;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  background: linear-gradient(150deg, var(--bg-1) 0%, var(--bg-2) 38%, var(--bg-3) 70%, var(--bg-4) 100%);
  transition: background 1.6s var(--ease), color .5s var(--ease);
  display: flex;
  justify-content: center;
  padding: clamp(10px, 2.4vw, 22px);
  padding-top: max(clamp(10px, 2.4vw, 22px), env(safe-area-inset-top));
  padding-bottom: max(clamp(10px, 2.4vw, 22px), env(safe-area-inset-bottom));
  overscroll-behavior: none;
}

/* ---------- shell ---------- */

.app {
  position: relative;
  width: var(--shell);
  min-height: calc(100dvh - clamp(20px, 4.8vw, 44px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--card-line);
  border-radius: 26px;
  box-shadow: 0 10px 40px rgba(30, 60, 75, 0.10);
  padding: clamp(26px, 6vw, 46px) clamp(20px, 5vw, 38px) clamp(18px, 4vw, 30px);
  overflow: hidden;
  transition: background .6s var(--ease), border-color .6s var(--ease);
}

/* ---------- masthead ---------- */

.masthead { text-align: center; padding-bottom: clamp(16px, 3.5vw, 26px); border-bottom: 1px solid var(--card-line); }

.wordmark {
  font-family: var(--sans);
  font-size: clamp(38px, 11vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.tagline {
  margin-top: 6px;
  font-size: clamp(14px, 3.6vw, 17px);
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---------- stage ---------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 2.2vw, 16px);
  padding: clamp(20px, 5vw, 34px) 0;
  cursor: pointer;
}

/* Lives in the footer, within thumb reach, just above Back / Next. */
.stage-tools {
  display: flex;
  justify-content: center;
  gap: 4px;
}
#searchBtn svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
#personalizeBtn svg { stroke-width: 1.7; stroke-linecap: round; }
#personalHint { margin: -2px 2px 10px; }

/* ---------- feedback form ---------- */

#feedbackForm { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fb-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.fb-q { display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink); margin-bottom: 4px; }
.fb-q textarea, .fb-q input { margin-top: 6px; }
.modal .fb-q textarea { min-height: 62px; }
.modal .fb-q input[type="file"] { font-size: 13px; padding: 9px 12px; }
.fb-opt { color: var(--ink-faint); }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-status { min-height: 1.2em; margin: 8px 2px 0; font-size: 13px; color: var(--accent); }
.fb-status.is-error { color: var(--danger); }
.hint a { color: inherit; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 9px 20px;
  border-radius: 999px;
  max-width: 100%;
}

.affirmation {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 5.6vw, 30px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 22ch;
  margin: clamp(4px, 1.5vw, 10px) 0;
  text-wrap: balance;
}

.stage.turning .pill,
.stage.turning .affirmation { opacity: 0; transform: translateY(7px); }

.pill, .affirmation {
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}

/* ---------- wisdom ---------- */

.wisdom {
  width: 100%;
  margin-top: clamp(8px, 2.4vw, 18px);
  padding: 16px 20px;
  background: var(--wisdom-bg);
  border-left: 3px solid var(--wisdom-edge);
  border-radius: 4px 14px 14px 4px;
  transition: opacity .4s var(--ease);
}

.wisdom-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 5px;
}

.wisdom-text {
  font-size: clamp(14px, 3.7vw, 16px);
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---------- footer ---------- */

.footdeck { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.cycle { width: 62px; height: 2px; border-radius: 2px; background: var(--card-line); overflow: hidden; }
.cycle-fill { display: block; height: 100%; width: 0; background: var(--accent); }

.nav { display: flex; gap: 8px; }

.nav-btn {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .25s, border-color .25s, opacity .25s;
}
.nav-btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); }
.nav-btn:active:not(:disabled) { transform: scale(.97); }
.nav-btn:disabled { opacity: .3; cursor: default; }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ---------- buttons ---------- */

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color .25s, background .25s, transform .2s;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.icon-btn:hover { color: var(--ink); background: var(--accent-soft); }
.icon-btn:active { transform: scale(.92); }

/* the gear now sits with the other tools in the footer */

#favoriteBtn.is-on { color: #D07B8C; }
#favoriteBtn.is-on svg { fill: currentColor; }

/* ---------- settings panel ---------- */

/* Only a light tint here — the blur belongs to the panel above it, so the
   app's colour shows through the glass rather than through grey. */
.scrim, .modal-scrim {
  position: fixed; inset: 0;
  background: var(--veil);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
  z-index: 20;
}
.scrim.is-open, .modal-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Frosted glass: a light tint, a blur that still lets shape and colour
   through, a diagonal sheen and a bright hairline edge. */
.panel, .modal {
  background: var(--glass-sheen), var(--glass);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 64px rgba(12, 30, 40, 0.26), inset 0 1px 0 var(--glass-glint);
}

.panel {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  bottom: max(10px, env(safe-area-inset-bottom));
  right: 10px;
  width: min(360px, calc(100vw - 20px));
  z-index: 30;
  border-radius: 26px;
  padding: 22px;
  overflow-y: auto;
  transform: translateX(calc(100% + 20px));
  transition: transform .38s var(--ease);
}
.panel.is-open { transform: translateX(0); }

.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel-head h2 { font-size: 19px; font-weight: 500; color: var(--ink); }

.panel-group { padding: 16px 0; border-top: 1px solid var(--card-line); }
.panel-group h3 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}

.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 7px 0;
  font-size: 14.5px; color: var(--ink);
}

.hint { font-size: 12px; line-height: 1.5; color: var(--ink-faint); margin-top: 8px; }

.switch {
  flex: none;
  width: 46px; height: 27px;
  border: none; border-radius: 999px;
  background: var(--card-line);
  cursor: pointer; position: relative;
  transition: background .28s var(--ease);
}
.switch i {
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .28s var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] i { transform: translateX(19px); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.chip {
  font: inherit; font-size: 12px;
  color: var(--ink-soft);
  background: var(--glass-field);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.chip.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }

.panel-btn {
  display: block; width: 100%;
  font: inherit; font-size: 14px; text-align: left;
  color: var(--ink);
  background: var(--glass-field);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  padding: 12px 15px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .22s, border-color .22s;
}
.panel-btn:hover { border-color: var(--accent); }


/* ---------- modals ---------- */

.modal-scrim { display: grid; place-items: center; padding: 20px; z-index: 40; }

.modal {
  width: min(430px, 100%);
  border-radius: 26px;
  padding: 24px;
  transform: translateY(12px) scale(.98);
  transition: transform .3s var(--ease);
}

/* Browsers without backdrop-filter get an opaque panel rather than
   unreadable text over the app. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal, .panel { background: var(--bg-2); }
}
.modal-scrim.is-open .modal { transform: none; }
.modal-tall { max-height: min(76vh, 620px); display: flex; flex-direction: column; }

.modal h3 { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }

.modal-quote {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; line-height: 1.55; color: var(--ink-soft);
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--wisdom-bg); border-radius: 10px;
}

.modal textarea, .modal input, .modal select {
  width: 100%; font: inherit; font-size: 14.5px;
  color: var(--ink);
  background: var(--glass-field);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  resize: vertical;
}
.modal textarea { min-height: 108px; }
.modal :is(textarea, input, select):focus { outline: none; border-color: var(--accent); }

.modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 6px; }
.modal-actions button {
  font: inherit; font-size: 14px;
  border-radius: 999px; padding: 10px 20px; cursor: pointer;
  white-space: nowrap;
  transition: opacity .2s, background .2s, color .2s;
}
.ghost { color: var(--ink); background: var(--glass-field); border: 1px solid var(--glass-edge); }
.modal-actions .danger { color: var(--danger); margin-right: auto; }
.modal-actions .danger.is-armed { color: #fff; background: var(--danger); border-color: var(--danger); }
.solid { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.modal-actions button:hover { opacity: .84; }

.list { flex: 1; overflow-y: auto; margin: 0 -4px 12px; padding: 0 4px; }
.list-item { padding: 13px 0; border-bottom: 1px solid var(--card-line); }
.list-item:last-child { border-bottom: none; }

/* My affirmations: tap the words to show it, or Edit */
.my-item { display: flex; align-items: flex-start; gap: 12px; }
.my-show {
  flex: 1; min-width: 0;
  font: inherit; text-align: left;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.my-show .list-date, .my-show .list-quote { display: block; }
.my-edit {
  flex: none;
  font: inherit; font-size: 12.5px;
  color: var(--ink);
  background: var(--glass-field);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  padding: 6px 14px;
  margin-top: 2px;
  cursor: pointer;
}
.list-date { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.list-quote { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink); margin: 5px 0; }
.list-note { font-size: 13.5px; color: var(--ink-soft); }
.list-empty { text-align: center; font-size: 14px; color: var(--ink-faint); padding: 32px 0; }

/* ---------- responsive & motion ---------- */

@media (max-height: 700px) {
  .stage { gap: 8px; padding: 16px 0; }
  .wisdom { padding: 12px 16px; }
  .affirmation { font-size: clamp(19px, 5vw, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- audio controls ---------- */

.icon-btn .ico-stop { display: none; }
.icon-btn.is-playing .ico-play { display: none; }
.icon-btn.is-playing .ico-stop { display: block; }
.icon-btn.is-playing { color: var(--accent); background: var(--accent-soft); }

.inline-speak svg { fill: currentColor; stroke: none; }

/* A label with its own ▶ beside it: "Affirmation" and "Words of Wisdom". */
.speak-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
}
.speak-head .wisdom-label { margin-bottom: 0; }
.stage > .speak-head { margin-bottom: 0; }

.inline-speak { width: 26px; height: 26px; }
.inline-speak svg { width: 13px; height: 13px; }

/* ---------- search ---------- */

#searchInput { margin-bottom: 14px; }
#searchInput::-webkit-search-cancel-button { -webkit-appearance: none; }

.hit {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid var(--card-line);
  padding: 12px 2px;
  cursor: pointer;
}
.hit:last-child { border-bottom: none; }
.hit:hover { background: var(--accent-soft); }
.hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.hit-cat {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.hit-text {
  display: block;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.hit-text mark {
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 1px;
}

#shareBtn.is-flash { color: var(--accent); background: var(--accent-soft); }

/* ---------- blur the app behind an overlay ----------
   Only the content layers are blurred, never the overlays themselves.
   A `filter` creates a containing block, so applying it to .app would
   trap the fixed-position scrims and panel inside it. */

.masthead, .stage, .footdeck {
  transition: filter .32s var(--ease), opacity .32s var(--ease);
}
body.veiled .masthead,
body.veiled .stage,
body.veiled .footdeck {
  filter: blur(7px);
  opacity: .82;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.veiled .masthead,
  body.veiled .stage,
  body.veiled .footdeck { filter: blur(5px); }
}

/* Speaker choice sits on one line with its label, like the switches. */
.speaker-row .chips { margin: 0; flex-wrap: nowrap; }

/* ---------- day / night toggle ----------
   One round button under the masthead showing the mode in force:
   a sun by day, a moon by night. A tap turns one into the other. */

.theme-toggle {
  align-self: center;
  position: relative;
  width: 32px; height: 32px;
  margin-top: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  background: var(--accent-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .32s var(--ease), opacity .32s var(--ease), transform .15s var(--ease);
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 15px; height: 15px;
  fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.theme-toggle svg { stroke: var(--ink); }
.tt-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
body.night .tt-sun  { opacity: 0; transform: rotate(90deg) scale(.6); }
body.night .tt-moon { opacity: 1; transform: none; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

body.veiled .theme-toggle { filter: blur(7px); opacity: .82; pointer-events: none; }