/* =====================================================================
   Saans — page-specific layout.
   ===================================================================== */

/* ---------- Home ---------- */
.home-page { background: linear-gradient(180deg, var(--sky-top) 0%, var(--bg) 60%) no-repeat, var(--bg); }
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-7);
}
.hero__sun {
  position: relative;
  width: min(48vw, 13rem);
  aspect-ratio: 1;
  margin-bottom: var(--space-2);
}
.hero__sun svg { width: 100%; height: 100%; }
.hero__sun .s-halo { fill: var(--breath-in); opacity: 0.22; }
.hero__sun .s-out { fill: var(--breath-out); }
.hero__sun .s-in { fill: var(--breath-in); opacity: 0.4; }
.hero__sun .s-core { fill: var(--breath-core); opacity: 0.75; }
.hero__sun .s-breath { transform-box: view-box; transform-origin: 100px 100px; animation: idle-breath 10s var(--ease-calm) infinite; }
@keyframes idle-breath { 0%, 100% { transform: scale(0.86); } 40% { transform: scale(1); } }
.hero__greeting { font-size: var(--step-1); color: var(--text-muted); margin: 0; font-family: var(--font-display); font-style: italic; }
.hero h1 { margin: 0; }
.hero__sub { font-size: var(--step-1); color: var(--text-muted); max-width: 30rem; margin: 0; }
.hero__cta { margin-top: var(--space-3); }
.hero__secondary { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.hero__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-5);
  font-size: var(--step--1);
}
.hero__links a { display: inline-flex; align-items: center; min-height: var(--tap); }

.returning {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  margin-top: var(--space-2);
}
.returning__prompt { margin: 0; color: var(--text-muted); }
.returning .btn-row { justify-content: center; }
.returning__last { margin: 0; font-size: var(--step--1); color: var(--text-muted); }

.promises {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--space-5);
}
.promises h3 { font-size: var(--step-1); }

/* ---------- Library ---------- */
.library-group { margin-top: var(--space-7); }
.library-group:first-of-type { margin-top: var(--space-5); }
.library-group h2 { font-size: var(--step-2); margin-bottom: var(--space-1); }
.library-group > p { color: var(--text-muted); margin-bottom: var(--space-4); }
.card__purpose { color: var(--text-muted); font-size: var(--step--1); }

/* ---------- Detail ---------- */
.breadcrumb { font-size: var(--step--1); margin-bottom: var(--space-4); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); }
.detail-head { margin-bottom: var(--space-5); }
.detail-head .lede { margin-bottom: var(--space-3); }
.detail-start {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.detail-start h2 { font-size: var(--step-1); margin: 0; }
.facts { display: grid; gap: var(--space-2) var(--space-5); grid-template-columns: max-content 1fr; margin: 0 0 var(--space-5); }
.facts dt { font-weight: 650; }
.facts dd { margin: 0; }

/* ---------- Learn ---------- */
.level-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.level-list li { margin: 0; display: flex; gap: var(--space-3); align-items: baseline; }
.claim-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin: var(--space-5) 0; }
.claim-grid .card h2 { font-size: var(--step-1); margin: 0; }
.claim-grid ul { padding-inline-start: 1.1rem; margin: 0; }
.claim-card--know { border-top: 4px solid var(--primary); }
.claim-card--promising { border-top: 4px solid var(--calm); }
.claim-card--uncertain { border-top: 4px solid var(--accent); }
.claim-card--not { border-top: 4px solid var(--border-strong); }

/* ---------- Support ---------- */
.support-hero { margin-bottom: var(--space-5); }
.resource {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.resource h3 { margin: 0; font-size: var(--step-1); }
.resource p { margin: 0; }
.resource .btn { justify-self: start; }
.resource__meta { font-size: var(--step--1); color: var(--text-muted); }
.tel { font-size: var(--step-2); font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* ---------- History ---------- */
.stats { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.stats p { margin: 0; font-size: var(--step-1); }
.stats .stats__big { font-family: var(--font-display); font-size: var(--step-2); }
.recent { list-style: none; padding: 0; }
.recent li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.recent time { color: var(--text-muted); font-size: var(--step--1); }

/* ---------- Settings ---------- */
.settings-form section { padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.settings-form section:last-of-type { border-bottom: 0; }
.settings-form h2 { font-size: var(--step-1); margin-bottom: var(--space-3); }

/* ---------- 404 ---------- */
.lost { text-align: center; padding: var(--space-7) 0; }
.lost .btn-row { justify-content: center; }

.prose .notice + .disclosure { margin-top: var(--space-4); }