/* KidsCompass — shared stylesheet
 *
 * Two pages share this file:
 *   - index.html (the entry page) — full-bleed night-sky scene with form.
 *   - app.html   (the chat / story page) — warm two-column layout.
 */

/* ==========================================================
   Shared tokens (used by app.html; entry page overrides below)
   ========================================================== */

:root {
  /* Reading stage — warm ivory, cozy, easy on the eyes. */
  --bg:           #FAF3E4;
  --bg-soft:      #F0E4C8;        /* sidebar — warmer amber, like firelight */
  --bg-soft-deep: #E8D6B0;        /* deeper amber for the sidebar's lower edge */
  --ink:          #2A2017;
  --ink-soft:     #6A574A;
  --rule:         #E2D4B6;
  --accent:       #1E5F5A;
  --accent-hover: #174945;
  --accent-soft:  #E0EDE8;
  --gold:         #B08A3E;
  --gold-soft:    #D4B36A;
  --label:        #8A6B2C;
  --shadow:       0 1px 0 rgba(42, 32, 23, 0.04), 0 8px 24px rgba(42, 32, 23, 0.06);
  --shadow-soft:  0 1px 0 rgba(42, 32, 23, 0.03), 0 4px 14px rgba(42, 32, 23, 0.04);
  --focus-ring:   0 0 0 3px rgba(30, 95, 90, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* ==========================================================
   ENTRY PAGE (index.html)
   ----------------------------------------------------------
   Full-bleed painted night-sky scene. The form sits over the
   right portion of the painting itself, with a soft local
   gradient only behind the form for text legibility.
   ========================================================== */

.entry-body {
  --night-ink:       #F8EFD8;
  --night-ink-soft:  #DCC9A0;
  --night-rule:      rgba(245, 220, 170, 0.30);
  --night-input-bg:  rgba(20, 14, 10, 0.55);
  --night-gold:      #E9B254;
  --night-gold-soft: #F2C572;
  background: #07090F;
  color: var(--night-ink);
  overflow: hidden;
}

/* The painted scene fills the whole viewport. No separate form column.
   A small brightness lift makes the night feel more inviting without
   washing out the lantern's warmth or the moon's contrast. */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('assets/lantern_in_night_sky.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0A0F18;
  filter: brightness(1.18) saturate(1.05);
  animation: scene-breath 14s ease-in-out infinite;
}

/*
  Soft local gradient behind the form area only. Keeps the right side
  readable without dividing the page. Lighter than before so the brighter
  scene shows through.
*/
.scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 55% 75% at 80% 50%,
      rgba(14, 16, 21, 0.50) 0%,
      rgba(14, 16, 21, 0.30) 40%,
      rgba(14, 16, 21, 0.10) 70%,
      rgba(14, 16, 21, 0)    100%
    );
}

@keyframes scene-breath {
  0%, 100% { transform: scale(1.00); filter: brightness(1.18) saturate(1.05); }
  50%      { transform: scale(1.015); filter: brightness(1.23) saturate(1.05); }
}

/* The form lives in the right portion of the painting. */
.entry {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 40px clamp(32px, 6vw, 80px) 40px 0;
}

.entry-card {
  width: 100%;
  max-width: 460px;
  text-align: left;
}

.entry .greeting {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 56px);
  color: var(--night-ink);
  margin: 0 0 18px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}

.entry .intro {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  color: var(--night-ink-soft);
  margin: 0 0 24px;
  max-width: 40ch;
  line-height: 1.6;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.entry .subline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 21px;
  color: var(--night-ink-soft);
  margin: 0 0 36px;
  max-width: 36ch;
  line-height: 1.5;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.entry .name-form {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}

.entry .name-box {
  display: flex;
  align-items: stretch;
  background: var(--night-input-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--night-rule);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(245, 220, 170, 0.06) inset,
    0 10px 32px rgba(0, 0, 0, 0.40);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  margin-bottom: 14px;
}

.entry .name-box:focus-within {
  border-color: rgba(233, 178, 84, 0.70);
  background: rgba(40, 26, 18, 0.65);
  box-shadow:
    0 0 0 3px rgba(233, 178, 84, 0.18),
    0 1px 0 rgba(245, 220, 170, 0.08) inset,
    0 10px 32px rgba(0, 0, 0, 0.40);
}

.entry .name-box input {
  flex: 1;
  min-width: 0;                  /* allow flex shrink — prevents button clip */
  border: none;
  outline: none;
  background: transparent;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 19px;
  color: var(--night-ink);
  min-height: 52px;
}

.entry .name-box input::placeholder {
  color: rgba(245, 220, 170, 0.50);
  font-style: italic;
}

.entry .name-box button {
  flex-shrink: 0;                /* never let the button get squished */
  appearance: none;
  border: none;
  background: var(--night-gold);
  color: #2A1B0F;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  padding: 0 22px;
  cursor: pointer;
  transition: background 160ms ease;
  min-height: 52px;
  white-space: nowrap;
}

.entry .name-box button:hover { background: var(--night-gold-soft); }

.entry .skip {
  background: transparent;
  border: none;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--night-ink-soft);
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(245, 220, 170, 0.30);
  text-underline-offset: 4px;
  transition: color 160ms ease;
  align-self: flex-start;
}

.entry .skip:hover { color: var(--night-ink); }

.entry .privacy-note {
  margin-top: 28px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--night-ink-soft);
  opacity: 0.85;
  max-width: 38ch;
  line-height: 1.5;
}

/* On the entry (night) page, focus rings should be warm gold, not green. */
.entry-body :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(233, 178, 84, 0.28);
  border-radius: 6px;
}

/* ==========================================================
   APP / STORY PAGE (app.html)
   ----------------------------------------------------------
   Two-column warm-ivory reading surface. Sidebar carries
   amber tones from the entry's lantern. Reading stage stays
   light and easy on the eyes.
   ========================================================== */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  background: var(--bg);
}

/* ---------- Sidebar ---------- */

/*
  Sidebar — the landing-page lantern scene is the background, with a dark
  ink wash on top to keep text readable. Top half = brand + section links.
  Bottom half (starts at midpoint) = "Your Stories" scrollable list.
*/
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background-color: #0A0F18;
  border-right: 1px solid rgba(176, 138, 62, 0.18);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  isolation: isolate;
  color: #F4E8CD;
}

/* Top and bottom halves split evenly — "Your Stories" header lands at the midpoint. */
.sidebar-top {
  flex: 1 1 50%;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 24px 16px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 178, 84, 0.20) transparent;
}

.sidebar-top::-webkit-scrollbar { width: 4px; }
.sidebar-top::-webkit-scrollbar-track { background: transparent; }
.sidebar-top::-webkit-scrollbar-thumb { background: rgba(233, 178, 84, 0.20); border-radius: 4px; }

.sidebar-bottom {
  flex: 1 1 50%;
  min-height: 0;
  padding: 18px 24px 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(176, 138, 62, 0.18);
  padding: 14px 24px 18px;
  background: rgba(7, 9, 15, 0.78);
}

/*
  The landing-page lantern scene as the sidebar's own background, shifted
  so the moon and night sky dominate (the lantern itself is cropped out
  to the side). A lighter vignette keeps the cream sidebar text legible
  while still letting the moon and stars come through.
*/
.ambience {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('assets/lantern_in_night_sky.png');
  background-size: cover;
  /* Shift right + slightly up — the lantern lives in the lower-left of
     the original image, so this composition shows the upper-right where
     the crescent moon and stars are. */
  background-position: 78% 22%;
  background-repeat: no-repeat;
  background-color: #0A0F18;
  filter: brightness(0.95) saturate(1.0);
}

.ambience::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(7, 9, 15, 0.45) 0%,
      rgba(7, 9, 15, 0.30) 30%,
      rgba(7, 9, 15, 0.25) 65%,
      rgba(7, 9, 15, 0.50) 100%
    );
}

.sidebar > *:not(.ambience) { position: relative; z-index: 1; }

/* ----- Unified section headers (My Journal / Activities / Rewards / Your Stories) ----- */

.side-section-header {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  color: #F8EFD8;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 10px 4px;
  margin: 0;
  line-height: 1.3;
  transition: color 120ms ease;
}

a.side-section-header:hover { color: #E9B254; }

a.side-section-header:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(233, 178, 84, 0.45);
  border-radius: 4px;
}

/* Nav wrapper for the three top-half section links. */
.sidebar-sections {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

/* ----- Section dividers ----- */

.side-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right,
    rgba(176, 138, 62, 0) 0%,
    rgba(176, 138, 62, 0.45) 50%,
    rgba(176, 138, 62, 0) 100%);
  margin: 4px 0;
}

/* Stronger divider between top and bottom halves (the midpoint line). */
.side-divider--major {
  height: 1px;
  background: linear-gradient(to right,
    rgba(233, 178, 84, 0) 0%,
    rgba(233, 178, 84, 0.55) 50%,
    rgba(233, 178, 84, 0) 100%);
  margin: 0;
  position: relative;
  z-index: 1;
}

.sidebar .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 4px;
  margin-bottom: 18px;
}

.sidebar .wordmark {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  color: #F8EFD8;
  margin: 0;
  letter-spacing: 0.005em;
}

.sidebar .tagline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: #DCC9A0;
  margin: 0;
  max-width: 28ch;
  line-height: 1.5;
}

/* Single rotating suggestion — sits below the ask box, not in the sidebar */
.single-suggestion {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 10px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: color 120ms ease;
  line-height: 1.5;
  display: block;
  text-decoration: underline;
  text-decoration-color: rgba(106, 87, 74, 0.25);
  text-underline-offset: 3px;
}

.single-suggestion:hover { color: var(--accent); text-decoration-color: rgba(30, 95, 90, 0.35); }

/* ----- "Your Stories" history list (sidebar-bottom) ----- */

.history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 2px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 178, 84, 0.30) transparent;
}

.history-list::-webkit-scrollbar { width: 5px; }
.history-list::-webkit-scrollbar-track { background: transparent; }
.history-list::-webkit-scrollbar-thumb { background: rgba(233, 178, 84, 0.30); border-radius: 4px; }

.history-empty {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #DCC9A0;
  margin: 0;
  opacity: 0.7;
  padding: 6px 4px;
}

/*
  Each story card uses the warm parchment story-page background (--bg) so the
  list visually echoes the reading stage on the right.
*/
.history-entry {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 36px 10px 12px; /* right padding reserves room for the × */
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.history-entry:hover {
  background: #FFFEFA;
  border-color: var(--gold-soft);
  transform: translateY(-1px);
}

.history-entry:focus-visible {
  box-shadow: 0 0 0 2px rgba(233, 178, 84, 0.55), 0 1px 2px rgba(0, 0, 0, 0.20);
  border-color: var(--gold-soft);
}

/* Single-line truncated story title (the child's question). */
.history-question {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Per-entry delete button. Faint until the entry is hovered/focused.
   min-width/height are bumped to 44px to meet iOS touch-target guidance
   — easy to mis-tap delete instead of opening the story otherwise. */
.history-entry-del {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  appearance: none;
  background: none;
  border: none;
  color: rgba(106, 87, 74, 0.45);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease, background 120ms ease;
}

.history-entry:hover .history-entry-del { color: rgba(106, 87, 74, 0.85); }
.history-entry-del:hover { color: #B0392B; background: rgba(176, 57, 43, 0.08); }
.history-entry-del:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(176, 57, 43, 0.40);
}

/* ----- Delete-confirm modal (shown when a history entry's × is clicked) ----- */

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(7, 9, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: confirm-in 160ms ease-out;
}

@keyframes confirm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.confirm-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 28px 22px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}

.confirm-message {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 22px;
  line-height: 1.45;
}

.confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-cancel,
.confirm-delete {
  appearance: none;
  border: 1px solid var(--rule);
  background: #FFFEFA;
  border-radius: 8px;
  padding: 10px 22px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.confirm-cancel { color: var(--ink); }
.confirm-cancel:hover { background: var(--bg); border-color: var(--ink-soft); }

.confirm-delete {
  background: #B0392B;
  border-color: #B0392B;
  color: #FFFEFA;
}
.confirm-delete:hover { background: #8E2D22; border-color: #8E2D22; }

/* ----- Activity example text ----- */

.activity-example {
  background: rgba(30, 95, 90, 0.06);
  border-left: 3px solid rgba(30, 95, 90, 0.25);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.activity-example-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--label);
}

/* ----- Sidebar footer (Hijri date only) ----- */
/* (The "Every answer comes from…" line and "For parents" link were moved
   off the sidebar — they now live on index.html and the parent page.) */

/* (The faint lantern+crescent watermark that used to sit behind the
   empty-state greeting has been removed — see the matching note in
   app.js. The .motif rules and the .empty-state .motif--watermark
   override below were removed along with it.) */

/* ---------- Right column: reading stage ---------- */

.content {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/*
  The "reading as Noah · switch" pill in the top-right of the content area.
  Three pieces: a gold initial-avatar, a stacked label + name, and a teal
  pill button for switching identity. Sits on a soft parchment background
  with a faint shadow so it reads as a proper UI element on the page.
*/
.id-chip {
  position: absolute;
  top: 22px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFEFA;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 6px 5px 6px;
  z-index: 5;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 2px 8px rgba(42, 32, 23, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.id-chip:hover {
  border-color: var(--gold-soft);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 4px 14px rgba(42, 32, 23, 0.12);
}

/* Avatar — kid's first initial inside a warm gold gradient. */
.id-chip-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  color: #FFFEFA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.30) inset,
    0 1px 2px rgba(42, 32, 23, 0.15);
}

/* Stacked text: italic "reading as" on top, name in bold underneath. */
.id-chip-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  padding: 0 4px;
}

.id-chip-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.id-chip-text strong {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  color: var(--ink);
  letter-spacing: 0.005em;
}

/* Switch — small teal pill that flips to a filled state on hover. */
.id-chip-switch {
  appearance: none;
  background: var(--accent-soft);
  border: none;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 4px;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.id-chip-switch:hover {
  background: var(--accent);
  color: #FFFEFA;
  transform: translateY(-1px);
}

.id-chip-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 95, 90, 0.30);
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 64px 40px;
}

.stage-inner {
  width: 100%;
  max-width: 640px;
}

/* Cross-fade for state transitions. */
.stage-inner > * {
  animation: stage-in 220ms ease-out both;
}

@keyframes stage-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stage-inner > *[tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* ----- Empty / greeting state ----- */

.empty-state {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

/* (.empty-state .motif--watermark positioning rules were removed when
   the watermark itself was retired from app.js.) */

.empty-state > * { position: relative; z-index: 1; }

.empty-state .greeting {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 44px;
  line-height: 1.35;
  max-width: 22ch;
}

.empty-state .greeting .name {
  color: var(--ink);
  font-weight: 600;
}

.ask-form {
  width: 100%;
  max-width: 520px;
}

.ask-box {
  display: flex;
  align-items: stretch;
  background: #FFFEFA;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ask-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 95, 90, 0.12), var(--shadow);
}

.ask-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 18px 20px;
  font-family: inherit;
  font-size: 18px;
  color: var(--ink);
  min-height: 44px;
}

.ask-box input::placeholder {
  color: #A89E91;
  font-style: italic;
}

.ask-box button {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: var(--accent);
  color: #FFFEFA;
  font-size: 16px;
  font-weight: 500;
  padding: 0 26px;
  cursor: pointer;
  transition: background 120ms ease;
  min-height: 44px;
}

.ask-box button:hover { background: var(--accent-hover); }

/* Mic button — sits between the text input and the Ask button. */
.ask-box .mic-btn {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  width: 44px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease;
  border-left: 1px solid var(--rule);
  min-height: 44px;
}

.ask-box .mic-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ask-box .mic-btn:hover { color: var(--accent); }

/* Pulsing ring when actively listening */
.ask-box .mic-btn--listening {
  color: #C0392B;
  animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ----- Response state ----- */

/* Loading line shown under the question chip while the pipeline runs.
   Italic, soft color, gently animated opacity so the page feels alive
   without spinning anything. The kid sees their question echoed back
   immediately; this line acknowledges the wait. */
.response--loading .loading {
  text-align: center;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 40px 0;
  animation: kc-loading-pulse 1.6s ease-in-out infinite;
}

@keyframes kc-loading-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.response .question-bar { text-align: center; margin-bottom: 28px; }

.response .question-bar .label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.response .question-bar .question {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.response .block { margin-bottom: 24px; }

/* Bridge line between the brief answer and the story.
   Same font, size, and color as the surrounding answer and story bodies —
   it's just one more sentence in the same voice. */
.response .bridge {
  margin: 0 0 24px;
  max-width: 60ch;
}

.response .answer p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 60ch;
}

.response .block-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--label);
  margin-bottom: 8px;
}

.response .story p {
  margin: 0 0 1em;
  max-width: 62ch;
}
.response .story p:last-child { margin-bottom: 0; }

/* ----- Sources section (always visible, prominent heading) ----- */

.sources-section {
  margin: 28px 0 20px;
}

/* A soft closing line at the end of the story before the sources block.
   Centered ornamental hairline — feels like the end of a chapter. */
.story-end-line {
  width: 80px;
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(to right,
    rgba(176, 138, 62, 0) 0%,
    rgba(176, 138, 62, 0.55) 50%,
    rgba(176, 138, 62, 0) 100%);
}

.sources-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-style: normal;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
  text-align: center;
}

.sources-body {
  background: #FBF5E6;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-soft);
  border-radius: 10px;
  padding: 16px 20px;
}

.sources-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}

.sources-body li { margin-bottom: 12px; }
.sources-body li:last-child { margin-bottom: 0; }
.sources-body .ref { color: var(--ink); font-weight: 600; }

/* Arabic verse beneath a Qur'an source citation — large, child-friendly.
   Scheherazade New is purpose-designed for clear Arabic reading (full
   harakat, open glyphs); Amiri / Noto Naskh kept as fallbacks. */
.source-arabic {
  font-family: 'Scheherazade New', 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  font-size: 28px;
  line-height: 2.1;
  font-weight: 500;
  color: var(--gold);
  margin: 14px 0 6px;
  text-align: right;
}

/* Plain-English child-friendly rendering shown directly under the Arabic. */
.source-translation {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 4px 0 6px;
  padding: 8px 12px;
  background: rgba(176, 138, 62, 0.08);
  border-left: 2px solid var(--gold-soft);
  border-radius: 0 6px 6px 0;
}

.source-translation::before {
  content: "What it means: ";
  font-style: italic;
  font-weight: 600;
  color: var(--label);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Lookup hint beneath each source item */
.source-lookup {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 8px;
}

/* ----- Dua block (response when the kid explicitly asks for a dua) ----- */

.dua {
  margin: 8px 0 20px;
}

.dua-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.dua-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 56ch;
}

/* The Arabic of the dua — same family/size as the Quran citations in the
   "Where this comes from" section. Slightly larger because here the dua
   IS the centerpiece. */
.dua-arabic {
  font-family: 'Scheherazade New', 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  font-size: 30px;
  line-height: 2.2;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 14px;
  text-align: right;
}

/* Kid-friendly translation — matches .source-translation styling so the
   visual vocabulary is consistent between the two places it appears. */
.dua-translation {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 18px;
  padding: 12px 16px;
  background: rgba(176, 138, 62, 0.08);
  border-left: 3px solid var(--gold-soft);
  border-radius: 0 8px 8px 0;
}

.dua-translation::before {
  content: "What it means: ";
  font-style: italic;
  font-weight: 600;
  color: var(--label);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* When and why to say this dua. */
.dua-context {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 60ch;
}

.dua-context::before {
  content: "When to say it: ";
  font-weight: 600;
  font-style: normal;
  color: var(--label);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Citation row at the bottom of the dua block. */
.dua-source {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  color: var(--ink-soft);
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}

.dua-source-ref {
  font-weight: 600;
  color: var(--ink);
}

.dua-source-lookup {
  font-style: italic;
  color: var(--ink-soft);
}
.response .sources .ref { color: var(--ink); font-weight: 500; }

/* ----- Muted text-link (used across multiple screens) ----- */

.next-link {
  appearance: none;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(106, 87, 74, 0.30);
  text-underline-offset: 3px;
  transition: color 120ms ease;
  /* iOS guidance: tap targets >= 44px. Bumped from 36px. */
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
}

.next-link:hover { color: var(--ink); }

/* ----- Story Continue button ----- */

.story-continue {
  display: block;
  margin: 28px 0 8px;
  appearance: none;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: #FFFEFA;
  cursor: pointer;
  transition: background 120ms ease;
}

.story-continue:hover { background: var(--accent-hover); }

/* ----- Activity / Commitment / Check-in screens ----- */

.activity-state,
.checkin-state {
  max-width: 580px;
  padding-top: 40px;
}

.activity-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.3;
}

.activity-prompt {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 56ch;
}

.activity-textarea {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: #FFFEFA;
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: var(--shadow-soft);
}

.activity-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 95, 90, 0.10), var(--shadow-soft);
}

.activity-textarea::placeholder {
  color: #A89E91;
  font-style: italic;
}

.activity-btn-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.activity-continue {
  appearance: none;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #FFFEFA;
  cursor: pointer;
  transition: background 120ms ease;
}

.activity-continue:hover { background: var(--accent-hover); }

.go-btn {
  padding: 14px 32px;
  font-size: 17px;
}

/* Check-in specific */

.checkin-greeting {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 24px;
}

.checkin-commitment {
  background: #FBF5E6;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-soft);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.checkin-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--label);
  margin: 0 0 6px;
}

.checkin-text {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

.checkin-prompt {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 52ch;
}

/* ----- Journal panel (sidebar) ----- */

.journal-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 16px;
}

.journal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.journal-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #E9B254;
  letter-spacing: 0.01em;
}

.journal-list {
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Subtle scrollbar on the dark sidebar */
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 178, 84, 0.30) transparent;
}

.journal-list::-webkit-scrollbar { width: 4px; }
.journal-list::-webkit-scrollbar-track { background: transparent; }
.journal-list::-webkit-scrollbar-thumb { background: rgba(233, 178, 84, 0.30); border-radius: 4px; }

.journal-empty {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #C9BFA8;
  margin: 0;
  opacity: 0.75;
}

.journal-entry {
  position: relative;
  background: rgba(248, 239, 216, 0.10);
  border: 1px solid rgba(176, 138, 62, 0.20);
  border-radius: 8px;
  padding: 8px 28px 8px 10px; /* right padding makes room for the × button */
  transition: background 120ms ease;
}

.journal-entry:hover { background: rgba(248, 239, 216, 0.16); }

.journal-entry-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: #E9B254;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.journal-entry-text {
  font-size: 13px;
  color: #F4E8CD;
  line-height: 1.45;
}

.journal-entry-del {
  position: absolute;
  top: 6px;
  right: 6px;
  appearance: none;
  background: none;
  border: none;
  color: rgba(200, 180, 140, 0.50);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 120ms ease;
}

.journal-entry-del:hover { color: #F4E8CD; }

/* ----- Hijri date (sidebar footer) — bigger + more visible ----- */

.hijri-date {
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hijri-date-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #F4E8CD;
  margin: 0;
  opacity: 1;
  letter-spacing: 0.01em;
}

/* Occasion nudge — warmer gold when an occasion is near. Now clickable:
   tapping it opens a popup with a kid-friendly story about the day. */
.hijri-occasion {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #E9B254;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Button variant — same look as the span, but keyboard- and click-able. */
.hijri-occasion--btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 8px;
  margin: 2px 0 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(233, 178, 84, 0.40);
  text-underline-offset: 4px;
  border-radius: 4px;
  transition: color 120ms ease, background 120ms ease, text-decoration-color 120ms ease;
}

.hijri-occasion--btn:hover {
  color: #F2C572;
  background: rgba(233, 178, 84, 0.08);
  text-decoration-color: rgba(233, 178, 84, 0.75);
}

.hijri-occasion--btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(233, 178, 84, 0.55);
}

/* ----- Occasion popup (reuses .confirm-overlay backdrop) ----- */

.occasion-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
}

.occasion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--rule);
  background: #FFFEFA;
}

.occasion-header-text { flex: 1; min-width: 0; }

.occasion-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.occasion-subtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--label);
  letter-spacing: 0.02em;
  margin: 6px 0 0;
}

.occasion-close {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: color 120ms ease, background 120ms ease;
  flex-shrink: 0;
}
.occasion-close:hover { color: var(--ink); background: var(--bg); }
.occasion-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 95, 90, 0.40);
}

.occasion-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 28px 26px;
  scrollbar-width: thin;
  scrollbar-color: rgba(106, 87, 74, 0.30) transparent;
}

.occasion-body::-webkit-scrollbar { width: 6px; }
.occasion-body::-webkit-scrollbar-track { background: transparent; }
.occasion-body::-webkit-scrollbar-thumb { background: rgba(106, 87, 74, 0.30); border-radius: 4px; }

.occasion-body p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 56ch;
}

.occasion-body p:last-child { margin-bottom: 0; }

/* Footer area inside the occasion popup — holds the "Add to my to-do list"
   button below the story paragraphs. */
.occasion-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   "Add to my to-do list" buttons
   ============================================================
   Used in three places (dua response, activity screen, Hijri
   occasion popup). Warm gold pill with an icon + text. The text
   wraps because some prompts (try_it / teach_it) are full
   sentences and can be longer than the button width. */

.add-todo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  appearance: none;
  background: #FBF5E6;
  border: 1px dashed var(--gold-soft);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.add-todo-btn:hover {
  background: #F4E6C0;
  border-color: var(--gold);
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(176, 138, 62, 0.18);
}

.add-todo-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(176, 138, 62, 0.35);
}

.add-todo-btn-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  color: #FFFEFA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset;
}

.add-todo-btn-text {
  flex: 1;
  min-width: 0;
}

/* Once the item is already on the kid's to-do list, the button switches
   to a solid filled state that reflects status. Still clickable in the
   sense that tapping it takes them to journal.html, but visually it
   reads as "already handled". */
.add-todo-btn--added {
  border-style: solid;
  cursor: pointer;
  transform: none;
}
.add-todo-btn--added:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(176, 138, 62, 0.18);
}

.add-todo-btn--added .add-todo-btn-icon {
  background: linear-gradient(135deg, #1E5F5A 0%, #174945 100%);
}

/* Pending — sits on the kid's list, waiting for them to do it. */
.add-todo-btn--added-pending {
  background: #F4E6C0;
  border-color: var(--gold);
  color: var(--ink);
}

/* Marked done — under parent review. Teal accent to signal it's moved
   past the kid's plate. */
.add-todo-btn--added-done {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.add-todo-btn--added-done .add-todo-btn-icon {
  background: linear-gradient(135deg, var(--accent) 0%, #2A8A82 100%);
}

/* Approved — parent has approved, points earned on Rewards page. */
.add-todo-btn--added-approved {
  background: linear-gradient(135deg, #FFF1C4 0%, #FCD9A1 100%);
  border-color: var(--gold);
  color: #8E5A1F;
}
.add-todo-btn--added-approved .add-todo-btn-icon {
  background: linear-gradient(135deg, var(--gold) 0%, #8E5A1F 100%);
}

/* Group used on the activity screen — wraps the two try_it/teach_it
   buttons under a small eyebrow label. */
.add-todo-group {
  margin: 18px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-todo-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 2px;
}

/* ============================================================
   Toast notifications
   ============================================================
   Single-toast UX (new replaces old). Bottom-right by default,
   centered at the bottom on narrow screens. */

.kc-toast {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #2A2017;
  color: #FAF3E4;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30), 0 2px 0 rgba(255, 255, 255, 0.05) inset;
  max-width: calc(100vw - 40px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.kc-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.kc-toast-msg {
  font-weight: 500;
}

.kc-toast-action {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #E9B254;
  text-decoration: underline;
  text-decoration-color: rgba(233, 178, 84, 0.45);
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 120ms ease;
}
.kc-toast-action:hover { color: #F2C572; }

@media (max-width: 600px) {
  .kc-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-content: space-between;
  }
}

/* Very narrow viewports (iPhone SE width and below) — the id-chip can
   blow past the right edge if the kid's name is long. Shrink the name
   text and tighten the switch pill so the chip stays inside the screen
   without truncating. */
@media (max-width: 380px) {
  .id-chip { padding: 4px 5px 4px 5px; gap: 8px; }
  .id-chip-avatar { width: 30px; height: 30px; font-size: 14px; }
  .id-chip-text { padding: 0 2px; }
  .id-chip-label { font-size: 10px; margin-bottom: 2px; }
  .id-chip-text strong { font-size: 14px; }
  .id-chip-switch {
    padding: 6px 10px;
    font-size: 12px;
    margin-left: 2px;
  }
}

/* ----- Closing state ----- */

.closing {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.closing .message {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 24ch;
  line-height: 1.4;
}

.closing .submessage {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 36px;
}

.closing .return {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 11px 22px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  min-height: 44px;
}

.closing .return:hover {
  border-color: var(--accent);
  background: #FFFEFA;
}

/* ==========================================================
   Responsive — collapse to single column under 860px
   ========================================================== */

@media (max-width: 860px) {
  /* App page mobile. */
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(176, 138, 62, 0.22);
  }
  .sidebar-top { padding: 20px 20px 12px; }
  .sidebar-bottom { max-height: 120px; padding: 10px 20px; }
  .sidebar-footer { padding: 10px 20px 16px; display: none; }
  .ambience { display: none; }
  .stage { padding: 72px 28px 56px; }
  .id-chip { top: 16px; right: 16px; }

  /* Entry page mobile: form stacks below the scene. */
  .entry {
    padding: 56vh 24px 48px;
    justify-content: center;
  }
  .entry-card {
    max-width: 100%;
    text-align: center;
  }
  .entry .skip { align-self: center; }
  .entry .greeting { font-size: 36px; }
  .entry .subline { font-size: 18px; margin-bottom: 28px; }
  .entry .subline,
  .entry .name-form { margin-left: auto; margin-right: auto; }
  /* On mobile, deepen the bottom of the scene so the form is readable. */
  .scene-overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(14, 16, 21, 0)    50%,
        rgba(14, 16, 21, 0.55) 80%,
        rgba(14, 16, 21, 0.85) 100%
      );
  }
}

/* ==========================================================
   Utility
   ========================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   Pause ambient animations when the tab is hidden
   ========================================================== */

.kc-paused .scene {
  animation-play-state: paused;
}

/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .scene {
    animation: none !important;
  }
  .stage-inner > * {
    animation: none !important;
  }
  *, *::before, *::after {
    transition-duration: 0ms !important;
  }
}

/* ==========================================================
   Dark mode
   ----------------------------------------------------------
   Tweens often use phones in bed — the bright parchment is harsh.
   This swaps the warm-ivory base tokens for a deep-walnut surface
   and forces dark surfaces on every card across the app.

   Notes on the cascade:
   - Many card backgrounds are hardcoded as hex literals in the
     inline <style> blocks of journal.html, activities.html,
     rewards.html, parents.html. Inline page styles ship AFTER
     this stylesheet in the cascade, so they would win on
     specificity tie. To override without touching every page's
     inline styles, the surface rules below use !important. This
     is the limited, principled use of !important — reserved for
     user-preference overrides (color-scheme).

   - The entry page (index.html) is a painted night-sky scene
     with its own --night-* token scope. It is INTENTIONALLY
     UNTOUCHED here: the global :root token swap below changes
     --bg / --ink etc., but the entry form references --night-*
     tokens which we deliberately do not redefine. Result: the
     entry page looks the same in both light and dark mode.
   ========================================================== */

/* ==========================================================
   30-minute "take a breath" reminder modal
   ----------------------------------------------------------
   A polite, name-personalized nudge that fires every 30 minutes
   of active app use. Same warm tone as the rest of the app —
   no countdown timer in the UI, no nag pattern. One message,
   one button to dismiss. See kc_timer.js for the trigger logic.
   ========================================================== */

.kc-reminder-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;          /* above kc-toast, peek/occasion overlays */
  background: rgba(7, 9, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.kc-reminder-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.kc-reminder-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 32px 32px 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(8px) scale(0.985);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
  text-align: left;
}
.kc-reminder-overlay.is-open .kc-reminder-card {
  transform: translateY(0) scale(1);
}

.kc-reminder-eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 10px;
}

.kc-reminder-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.3;
}

.kc-reminder-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 22px;
  line-height: 1.55;
}

.kc-reminder-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.kc-reminder-todo,
.kc-reminder-ok {
  appearance: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.kc-reminder-todo {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.kc-reminder-todo:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.kc-reminder-ok {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #FFFEFA;
  font-weight: 500;
}
.kc-reminder-ok:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

@media (max-width: 540px) {
  .kc-reminder-card { padding: 26px 22px 20px; }
  .kc-reminder-heading { font-size: 20px; }
  .kc-reminder-actions { justify-content: stretch; }
  .kc-reminder-todo, .kc-reminder-ok { flex: 1; text-align: center; justify-content: center; }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Previously --bg was #14100C (near-pure-black walnut). That read
       as a "void" next to the sidebar's painted lantern scene and was
       hard on the eyes for long reading. Lifted to a softer dark
       walnut (#211A14) — still parchment-by-night in voice, but the
       surface has light enough that the cream text isn't shouting
       against a black hole. Cards step up clearly from this base. */
    --bg:           #211A14;
    --bg-soft:      #2A2118;
    --bg-soft-deep: #312719;
    --ink:          #F5ECD3;   /* warm cream — slightly creamier */
    --ink-soft:     #DCC9A5;   /* lifted for stronger body contrast */
    --rule:         #3F352A;
    --accent:       #65B7AE;
    --accent-hover: #7DCEC5;
    --accent-soft:  #1F3B38;
    --gold:         #E4C57A;
    --gold-soft:    #B89556;
    --label:        #E4C57A;
    --shadow:       0 1px 0 rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-soft:  0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.30);
    --focus-ring:   0 0 0 3px rgba(101, 183, 174, 0.32);
  }

  /* ---------- Card surfaces (override inline hex literals) ----------
     One walnut tone for primary cards. Note: .entry-card is a name
     collision — index.html's form card uses the same class and must
     stay transparent over the night-sky painting. We scope .entry-card
     to non-entry pages with body:not(.entry-body). */
  /* .response itself is INTENTIONALLY excluded — in light mode it has
     no background, border, or padding; it just sits on the parchment
     page. Adding a surface to it would create a card that doesn't
     exist in light mode (visible as a "boxed-in" refusal screen). The
     nested .arabic / .arabic-card surfaces inside .response do get
     overridden because they ARE meant to be cards. */
  body:not(.entry-body) .entry-card,
  .response .arabic, .response .arabic-card,
  .todo-card, .new-entry-card, .review-pending-card,
  .stat-tile, .activity-card,
  .kid-card, .review-card, .occasion-card, .peek-card, .peek-item,
  .confirm-card, .ask-box, .ask-input,
  .add-kid-form,
  .commit-card, .checkin-card, .approved-card, .progress-card,
  .badge-card, .tier-card, .privacy-box, .sources-box,
  .parents-section, .id-chip, .kc-toast {
    background: #2C231A !important;
    color: var(--ink);
    border-color: #3F352A !important;
  }

  /* General form inputs — covers .ask-form input/textarea AND any
     standalone <input>/<textarea> in parents.html (add-kid form),
     activities, etc. Excludes inputs already styled via more specific
     rules (e.g. confirm modal buttons aren't form inputs). */
  body:not(.entry-body) input[type="text"],
  body:not(.entry-body) input[type="password"],
  body:not(.entry-body) input[type="number"],
  body:not(.entry-body) input[type="email"],
  body:not(.entry-body) input[type="tel"],
  body:not(.entry-body) input:not([type]),
  body:not(.entry-body) textarea {
    background: #251E17 !important;
    color: var(--ink) !important;
    border-color: #3F352A !important;
  }

  /* Activity-card "Already here" / "Coming soon" pill tags. */
  .activity-tag {
    background: #34291E !important;
    color: var(--gold) !important;
  }
  .activity-card.coming-soon .activity-tag {
    background: rgba(101, 183, 174, 0.14) !important;
    color: var(--accent) !important;
  }

  /* Confirm modal Cancel button — had a hard cream bg + dim text, made
     it look disabled. Flip to walnut with full-strength cream text. */
  .confirm-cancel {
    background: #34291E !important;
    color: var(--ink) !important;
    border-color: #5A4631 !important;
  }
  .confirm-cancel:hover {
    background: #3F3326 !important;
    border-color: var(--ink-soft) !important;
  }

  /* Sources panel at the bottom of a story (Sahih Muslim / Qur'an refs).
     Was a strong cream panel — totally washed out the cream-on-cream
     reference text. Flip to walnut with the gold left-rule preserved. */
  .sources-body {
    background: #2C231A !important;
    border-color: #3F352A !important;
    border-left-color: var(--gold-soft) !important;
  }
  .sources-body .ref { color: var(--ink) !important; }

  /* Activity reflection textarea — white in light mode means kid-typed
     text was unreadable cream-on-white-ish. Walnut bg + cream text. */
  .activity-textarea {
    background: #251E17 !important;
    color: var(--ink) !important;
    border-color: #3F352A !important;
  }
  .activity-textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(101, 183, 174, 0.18) !important;
  }
  .activity-textarea::placeholder {
    color: rgba(220, 201, 165, 0.55) !important;
  }

  /* "Add to my to-do list" buttons (dua / activity / occasion screens).
     Default state was cream-on-dashed-gold with cream text — invisible
     in dark mode. Walnut + dashed gold border preserves the "draft"
     feel, full-strength cream text restores readability. */
  .add-todo-btn {
    background: #2C231A !important;
    border-color: var(--gold-soft) !important;
    color: var(--ink) !important;
  }
  .add-todo-btn:hover {
    background: #34291E !important;
    border-color: var(--gold) !important;
  }
  .add-todo-btn--added-pending {
    background: rgba(228, 197, 122, 0.12) !important;
    border-color: var(--gold) !important;
    color: var(--ink) !important;
  }
  .add-todo-btn--added-approved {
    background:
      linear-gradient(135deg, #4A3320 0%, #34281C 100%) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
  }

  /* Check-in screen "Last time you wrote" card */
  .checkin-commitment {
    background: #2C231A !important;
    border-color: #3F352A !important;
    border-left-color: var(--gold-soft) !important;
  }

  /* Closing screen "return" button hover — was hard cream flash */
  .closing .return:hover {
    background: rgba(228, 197, 122, 0.10) !important;
    color: var(--ink) !important;
  }

  /* Elevated / featured surfaces — one step warmer/lighter than the
     base card colour so the hierarchy survives. */
  .journal-hero {
    background:
      linear-gradient(135deg, rgba(101, 183, 174, 0.10) 0%, rgba(228, 197, 122, 0.14) 100%),
      #34291E !important;
    border-color: #3F352A !important;
  }

  /* Rewards page level banner — deep amber, raised. */
  .score-banner {
    background:
      linear-gradient(135deg, #4A3320 0%, #34281C 100%) !important;
    color: var(--ink) !important;
    border-color: #5A3F26 !important;
  }
  .score-banner .score-label,
  .score-banner .score-value,
  .score-banner .score-detail { color: var(--ink) !important; }

  /* Activities "coming soon" cards — quieter, dashed, slightly recessed
     from the base bg so they read as "muted, not finished yet". */
  .activity-card.coming-soon {
    background: #251E17 !important;
    border-color: #3F352A !important;
    border-style: dashed !important;
  }
  .activity-card.coming-soon h3 { color: var(--accent) !important; }

  /* Stat tile colored icon backplates */
  .stat-tile.tile-streak .stat-icon { background: #34281C !important; color: var(--gold) !important; }
  .stat-tile.tile-todos  .stat-icon { background: #1F3B38 !important; color: var(--accent) !important; }
  .stat-tile.tile-notes  .stat-icon { background: #3A2A1E !important; color: #E0A07A !important; }

  /* Rejected to-do card — slightly warmer than the base card for the
     "try again" affordance. */
  .todo-card[data-rejected="true"] {
    background: #34281C !important;
    border-color: rgba(228, 165, 107, 0.45) !important;
  }

  /* Tab strip + tab states */
  .tabs {
    background: #1F1813 !important;
    border-color: #3F352A !important;
  }
  .tab { color: var(--ink-soft) !important; }
  .tab:hover {
    background: rgba(228, 197, 122, 0.08) !important;
    color: var(--ink) !important;
  }
  .tab[aria-selected="true"] {
    background: #34291E !important;
    color: var(--ink) !important;
    border-color: #5A4631 !important;
  }
  .tab[aria-selected="true"] .tab-count {
    background: var(--accent) !important;
    color: #211A14 !important;
  }

  /* Lined-paper textarea in the notebook composer */
  .new-entry-textarea {
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 27px,
        rgba(228, 197, 122, 0.10) 27px,
        rgba(228, 197, 122, 0.10) 28px
      ),
      #251E17 !important;
    color: var(--ink) !important;
    border-color: #3F352A !important;
  }

  /* Chips and small surface accents */
  .mood-chip, .todo-source-chip, .review-source-chip,
  .stat-tile .stat-icon, .source-chip {
    background: #34291E !important;
    color: var(--ink-soft);
    border-color: #3F352A !important;
  }
  .mood-chip.is-selected {
    background: #1F3B38 !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
  }

  /* Rewards table */
  .rewards-table, .rewards-table tr, .rewards-table td, .rewards-table th {
    background: #2C231A !important;
    color: var(--ink);
    border-color: #3F352A !important;
  }
  .rewards-table thead, .rewards-table thead th {
    background: #34291E !important;
    color: var(--label);
  }
  .progress-fill, .progress-bar > div {
    background: var(--accent) !important;
  }

  /* Empty states (dashed boxes) */
  .j-empty, .todos-empty, .review-pending-empty, .entries-empty,
  .panel-note {
    background: rgba(44, 35, 26, 0.55) !important;
    border-color: #3F352A !important;
    color: var(--ink-soft);
  }

  /* Buttons that ride dark surfaces */
  .new-entry-save, .ask-submit, .next-link.primary, .commit-btn {
    color: #211A14;
  }
  .todo-del, .entry-del, .history-entry-del, .kid-remove-btn {
    color: var(--ink-soft);
  }

  /* Sidebar (app.html). The .ambience layer (painted lantern scene)
     sits behind .sidebar > * — don't paint over it; leave the sidebar
     bg transparent so the painting shows through, and just adjust the
     border-rule between sidebar and reading stage. */
  .sidebar {
    background: transparent !important;
    border-color: #3F352A !important;
  }
  .history-entry {
    background: transparent !important;
    border-color: #3F352A !important;
  }
  .history-entry:hover {
    background: rgba(228, 197, 122, 0.05) !important;
  }

  /* Occasion + peek modal heads */
  .occasion-header, .peek-header {
    background: #34291E !important;
    color: var(--ink) !important;
    border-bottom-color: #3F352A !important;
  }
  .occasion-header h2, .occasion-header .occasion-sub,
  .peek-title, .peek-sub {
    color: var(--ink) !important;
  }
  .occasion-body, .peek-body {
    background: #2C231A !important;
    color: var(--ink);
  }
  .occasion-overlay, .peek-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
  }
  .occasion-close, .peek-close {
    color: var(--ink-soft) !important;
  }
  .occasion-close:hover, .peek-close:hover {
    color: var(--ink) !important;
    background: rgba(228, 197, 122, 0.10) !important;
  }

  /* (Lantern/crescent watermark override removed — the watermark
     itself was retired from app.js.) */

  /* Notebook entry top-ribbon stays accent-colored — fine as is. */

  /* id-chip avatar (gold-on-cream → gold-on-walnut) */
  .id-chip-avatar { color: #211A14 !important; }

  /* Input/textarea text + placeholder readability */
  textarea, input[type="text"], input[type="password"], input[type="number"] {
    color: var(--ink);
  }
  ::placeholder { color: rgba(215, 196, 154, 0.55); }
  :-ms-input-placeholder { color: rgba(215, 196, 154, 0.55); }

  /* Journal hero text shouldn't be cream-on-cream — re-anchor on walnut. */
  .journal-hero .hero-title,
  .journal-hero .stat-num { color: var(--ink) !important; }
  .journal-hero .hero-eyebrow { color: var(--gold) !important; }
  .journal-hero .hero-sub,
  .journal-hero .stat-label { color: var(--ink-soft) !important; }

  /* ---- Night-mode polish (round 2) ----
     Things that were still rendering cream-on-walnut or low contrast
     after the first dark-mode pass. Tightening each one here keeps
     the patches grouped and easy to revisit. */

  /* Activities page state badges (Long-running / Due / Streak / Cold / New)
     — base CSS gives them a hard cream fill that read as a flashlight
     against the dark cards. Flip to walnut chips with their accent
     color preserved. */
  .state-badge {
    background: #34291E !important;
    color: var(--label) !important;
  }
  .state-badge.tone-due {
    background: rgba(228, 197, 122, 0.18) !important;
    color: var(--gold) !important;
  }
  .state-badge.tone-streak {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
  }
  .state-badge.tone-cold {
    background: #2C231A !important;
    color: var(--ink-soft) !important;
  }
  .state-badge.tone-new {
    background: rgba(101, 183, 174, 0.14) !important;
    color: var(--accent) !important;
  }

  /* "Pick up here" pin — base CSS has cream-on-gold which is
     ~3:1 contrast. Dark walnut text on the gold pill reads far
     better, both visually and accessibly. */
  .lead-pin {
    color: #211A14 !important;
    background: var(--gold) !important;
  }

  /* Activities Today rail items — bright cream surfaces glow against
     the dark page. Walnut walnut walnut. */
  .today-item {
    background: #2C231A !important;
    border-color: #3F352A !important;
    color: var(--ink) !important;
  }
  .today-item .ti-action { color: var(--ink) !important; }
  .today-item .ti-source { color: var(--gold) !important; }

  /* The lead activity card had a warmer cream override that beat the
     generic .activity-card walnut fill in light mode and was being
     overridden in dark mode — re-anchor it on a slightly warmer
     walnut so the lead card still feels lifted. */
  .activity-card.is-lead {
    background: #34281C !important;
    border-left-color: var(--gold) !important;
  }
  .activity-card.is-lead:hover {
    border-left-color: var(--accent) !important;
  }

  /* Parents page — section dividers and add-kid form draft border
     were both walnut-on-walnut, hard to spot. Lift the section h2
     rule slightly and keep the add-kid form's dashed border gold
     so it still reads as a "drafty" affordance at night.

     Important: the broad background override above gives
     .parents-section a walnut "card" surface in dark mode, but in
     light mode the section is a flat block with no padding. That
     mismatch was leaving the h2 and body copy jammed against the
     card's edges (gold underline running edge-to-edge, body text
     starting at x=0). Adding padding + a soft radius here completes
     the card so the content breathes inside it. */
  .parents-section {
    padding: 22px 26px 24px !important;
    border-radius: 14px !important;
  }
  .parents-section h2 {
    border-bottom-color: var(--gold-soft) !important;
  }
  .add-kid-form {
    background: #2C231A !important;
    border-color: var(--gold-soft) !important;
  }

  /* Rewards page "How to earn more" — new card-tile points grid.
     Tiles use #FFFEFA in light mode; walnut at night. The gold
     points number stays gold so the eye still lands on it. */
  .how-to-tile {
    background: #2C231A !important;
    border-color: #3F352A !important;
  }
  .how-to-tile .tile-name { color: var(--ink-soft) !important; }
  .how-to-tile .tile-pts { color: var(--gold) !important; }
  .how-to-grid-label { color: var(--gold) !important; }
  .step-text strong { color: var(--accent) !important; }

  /* 30-minute reminder modal — dark walnut card on a dimmed page. */
  .kc-reminder-card {
    background: #2C231A !important;
    border-color: #3F352A !important;
  }
}