/*
 * Selah — App Shell Styles
 *
 * Phone-first, single-column layout.
 * No breakpoints needed — mobile is the only target.
 * No component frameworks — pure CSS.
 */

/* ── Reset & Base ────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure the HTML hidden attribute always wins over author CSS display values.
   Without this, display:flex overlays remain visible despite hidden=true. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── App Container ───────────────────────────────────────── */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: var(--max-width-app);
  margin: 0 auto;
  position: relative;
}

/* ── Main Content Area ───────────────────────────────────── */

.app-main {
  flex: 1;
  padding: var(--space-page-y) var(--space-page-x);
  padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + var(--space-6));
  overflow-y: auto;
}

/* ── Section Label ───────────────────────────────────────── */
/* The small-caps section headers seen in mockups:
   "TODAY'S THREE STONES", "THIS WEEK'S INTENTIONS", "RECENT" */

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

/* ── Typography Utilities ────────────────────────────────── */

.heading-1 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.heading-2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.heading-3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

.subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.body-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

.body-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.caption {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

/* ── Screen Transitions ──────────────────────────────────── */

.screen {
  display: none;
  animation: fadeIn var(--duration-normal) var(--ease-default);
}

.screen.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Offline Banner ──────────────────────────────────────── */

.offline-banner {
  display: none;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-warm);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.offline-banner.visible {
  display: block;
}

/* ── Sabbath Screen ──────────────────────────────────────── */
/* Full-viewport quiet display — just a verse and rest */

.sabbath-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-12) var(--space-page-x);
  padding-bottom: calc(var(--nav-height) + var(--safe-area-bottom) + var(--space-12));
  text-align: center;
  background: var(--color-bg);
}

/* When Sabbath mode is active, nav is hidden — no extra padding needed */
.sabbath-active .sabbath-screen {
  padding-bottom: var(--space-12);
}

.sabbath-verse {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-2xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 28ch;
}

.sabbath-ref {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-4);
  letter-spacing: var(--tracking-wide);
}

.sabbath-greeting {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  margin-top: var(--space-10);
}

.sabbath-ornament {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: var(--color-text-tertiary);
}

.sabbath-ornament-line {
  width: 3rem;
  height: 1px;
  background: var(--color-border);
}

.sabbath-ornament-dot {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-text-tertiary);
}

/* Sabbath empty state — restful prompt when no verse is curated */

.sabbath-empty-state {
  max-width: 24ch;
}

.sabbath-empty-prompt {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.sabbath-empty-hint {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-tertiary);
  margin-top: var(--space-3);
}