/* Faithlete - First Light design system (v0.2), part 2 of 2: the sky,
   the page, the plan picker, journal search, and the week view. Loaded
   after styles.css. All text sits on the dark upper stops of the sky
   gradients or inside a scrim pill; contrast verified by script. */

/* ------------------------------------------------------------------ */
/* The sky: a real dawn panel on the Today view. Four phases follow    */
/* the device clock (night, dawn, day, dusk); the sun rises once per   */
/* app open. Same sky in both themes, because dawn is dawn.            */
/* ------------------------------------------------------------------ */

.sky {
  position: relative;
  border-radius: var(--radius-l);
  padding: var(--sp-5) var(--sp-5) 56px;
  margin-bottom: var(--sp-5);
  overflow: hidden;
  min-height: 200px;
  color: #f9efe4;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #2c2135 0%, #53304a 44%, #93524f 72%, #cf7a4b 88%, #f0b46a 100%);
}
.sky--night {
  background: linear-gradient(180deg, #14101f 0%, #241c31 54%, #3a2839 84%, #593140 100%);
}
.sky--day {
  background: linear-gradient(180deg, #614156 0%, #8f5a5c 62%, #d29a68 92%, #eec18a 100%);
}
.sky--dusk {
  background: linear-gradient(180deg, #33203a 0%, #6d3a52 52%, #b25a50 82%, #e19a5c 100%);
}

.sky-inner { position: relative; z-index: 3; }

.sun {
  position: absolute;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  right: 30px;
  bottom: 18px;
  background: radial-gradient(circle at 42% 38%, #fff6e3 0%, #ffd9a0 58%, #f4b465 100%);
  box-shadow: 0 0 34px 12px rgba(255, 205, 140, 0.42);
}
.sky--night .sun {
  bottom: -48px;
  opacity: 0.55;
  box-shadow: 0 0 46px 22px rgba(255, 180, 120, 0.22);
}
.sky--day .sun { bottom: 52px; right: 26px; }
.sky--dusk .sun {
  right: auto;
  left: 30px;
  bottom: 10px;
  background: radial-gradient(circle at 42% 38%, #ffe9cf 0%, #f7bd82 55%, #dd8752 100%);
}
.sky-animate .sun { animation: sunrise 1100ms ease-out; }
@keyframes sunrise {
  from { transform: translateY(46px); opacity: 0.25; }
  to { transform: translateY(0); opacity: 1; }
}

.sky-stars { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; }
.sky--night .sky-stars { opacity: 1; }
.sky--dawn .sky-stars { opacity: 0.4; }
.sky-stars i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #f4e6d4;
}
.sky-stars i:nth-child(1) { top: 14%; left: 12%; }
.sky-stars i:nth-child(2) { top: 26%; left: 30%; opacity: .7; }
.sky-stars i:nth-child(3) { top: 10%; left: 52%; }
.sky-stars i:nth-child(4) { top: 30%; left: 66%; opacity: .6; }
.sky-stars i:nth-child(5) { top: 18%; left: 84%; }
.sky-stars i:nth-child(6) { top: 42%; left: 20%; opacity: .5; }
.sky-stars i:nth-child(7) { top: 38%; left: 47%; opacity: .8; }

.sky-kicker {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #efdccb;
}
.sky-theme {
  font-family: var(--font-serif);
  font-size: 31px;
  line-height: 1.14;
  font-weight: 560;
  margin: var(--sp-2) 0 var(--sp-4);
  max-width: 78%;
  text-wrap: balance;
}

/* day picker inside the sky: always on a scrim pill so it holds
   contrast no matter which gradient stop sits behind it */
.daynav {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--sky-scrim);
  border-radius: 999px;
  padding: 4px;
}
.daynav-btn {
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #f9efe4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out;
}
.daynav-btn:hover { background: rgba(255, 240, 220, 0.14); }
.daynav-btn:disabled { opacity: 0.35; }
.daynav-btn svg { width: 17px; height: 17px; }
.daynav-label {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 0 var(--sp-1);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.daynav-past {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(240, 180, 106, 0.28);
  border-radius: 999px;
  padding: 2px 8px;
}
.chip-back {
  display: inline-flex;
  margin-left: var(--sp-2);
  border: 1px solid rgba(249, 239, 228, 0.5);
  background: var(--sky-scrim);
  color: #f9efe4;
  font-size: 12px;
  font-weight: 650;
  border-radius: 999px;
  padding: 8px 14px;
}

/* ------------------------------------------------------------------ */
/* the page: where scripture sits                                      */
/* ------------------------------------------------------------------ */

.page-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow);
}

.verse-ref {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 640;
  color: var(--gold-text);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--sp-3);
}

.verse-text {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.56;
  font-weight: 450;
  color: var(--ink);
  margin: 0 0 var(--sp-3);
}

/* psalter drop cap, only on the big Today rendering */
.verse-display::first-letter {
  font-size: 3.1em;
  line-height: 0.78;
  float: left;
  padding: 6px 10px 0 0;
  font-weight: 560;
  color: var(--accent);
}

.translation-note {
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: var(--sp-4);
}

.horizon-rule {
  height: 2px;
  border: none;
  margin: 0 0 var(--sp-4);
  background: linear-gradient(90deg, var(--gold) 0%, rgba(201, 141, 63, 0) 78%);
  border-radius: 999px;
}

.reflection-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-1);
}

.reflection-text {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}

.lookback-note {
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--bg-sunken);
  border: none;
  box-shadow: none;
}

/* streak card */
.streak-row { display: flex; align-items: center; gap: var(--sp-5); }
.streak-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.streak-figure .num {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 620;
  color: var(--gold-text);
  transition: transform 220ms ease-out;
}
.streak-figure .num.pulse { transform: scale(1.18); }
.streak-figure .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}
.streak-note { font-size: 13px; color: var(--ink-soft); flex: 1; }

/* ------------------------------------------------------------------ */
/* plan picker                                                         */
/* ------------------------------------------------------------------ */

.plan-picker { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-card {
  position: relative;
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 20px;
  overflow: hidden;
  color: inherit;
  transition: border-color 150ms ease-out, background 150ms ease-out;
}
.plan-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #53304a 0%, #93524f 55%, #f0b46a 100%);
  opacity: 0.25;
  transition: opacity 150ms ease-out;
}
.plan-card:hover { background: var(--bg-sunken); }
.plan-card.active { border-color: var(--gold); }
.plan-card.active::before { opacity: 1; }
.pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.pc-name { font-family: var(--font-serif); font-size: 19px; font-weight: 600; }
.pc-tag { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

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

.search-field { position: relative; margin-bottom: var(--sp-2); }
.search-field input {
  width: 100%;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 11px 40px 11px 40px;
  font-size: 16px;
  color: var(--ink);
  font-family: var(--font-sans);
  appearance: none;
  -webkit-appearance: none;
}
.search-icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-faint);
  display: flex;
}
.search-icon svg { width: 17px; height: 17px; }
.search-clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 20px;
  border-radius: 50%;
}
.search-clear:hover { background: var(--border); color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Week view                                                           */
/* ------------------------------------------------------------------ */

/* The band body stays in the dark zenith stops; the gold horizon is a
   thin strip painted by ::after, so no text ever sits on gold. */
.week-band {
  position: relative;
  border-radius: var(--radius-l);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + 10px);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  color: #f9efe4;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, #2c2135 0%, #4a2c44 62%, #6d3f4e 100%);
}
.week-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: linear-gradient(90deg, #cf7a4b 0%, #f0b46a 55%, #c9788b 100%);
}
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.icon-btn-sky {
  border-color: rgba(249, 239, 228, 0.35);
  background: var(--sky-scrim);
  color: #f9efe4;
  width: 38px; height: 38px;
}
.icon-btn-sky:hover { background: rgba(255, 240, 220, 0.16); color: #fff; }
.icon-btn-sky:disabled { opacity: 0.35; }
.week-title { text-align: center; }
.wt-kicker {
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #efdccb;
}
.wt-range { font-family: var(--font-serif); font-size: 21px; font-weight: 580; }

.week-dots { display: flex; justify-content: space-between; gap: var(--sp-1); }
.week-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.week-dot .di {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #f3e2d6;
}
.week-dot .mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(249, 239, 228, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c1b33;
}
.week-dot.done .mark { background: #f0b46a; border-color: #f0b46a; }
.week-dot.today .mark { border-color: #f9efe4; border-width: 2.5px; }
.week-dot.future .mark { opacity: 0.35; }
.week-dot .mark svg { width: 16px; height: 16px; }

.week-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.week-stats .stat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  text-align: center;
  padding: var(--sp-3) var(--sp-1);
}
.week-stats .num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 620;
  color: var(--gold-text);
  line-height: 1.1;
}
.week-stats .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 2px;
}

.week-h {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  margin: var(--sp-4) 0 var(--sp-2);
}

.week-read-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-1);
  color: inherit;
  transition: background 150ms ease-out;
}
button.week-read-row:hover { background: var(--bg-sunken); }
.wr-date {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wr-ref { font-family: var(--font-serif); font-size: 17px; font-weight: 570; }
.wr-theme { font-size: 13px; color: var(--ink-soft); }