/* ═══════════════════════════════════════════════════════════
   Visit Mary: three colours, one face, two-pixel corners.
   Paper #fdf6ed, ink #1d1c1c, Marian blue #1161aa, read off RYBitten's
   1961 Itten chromatic circle. Dark mode swaps paper and ink; the blue
   stays a surface and a bead there, never text.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Rosarivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rosarivo-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rosarivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rosarivo-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rosarivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rosarivo-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rosarivo';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/rosarivo-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Georgia, sized to Rosarivo's metrics (fontTools, 2026-09-12), so the swap
   lands on the same lines and the page does not move. */
@font-face {
  font-family: 'Rosarivo Fallback';
  src: local('Georgia');
  size-adjust: 107.96%;
  ascent-override: 90.68%;
  descent-override: 39.27%;
  line-gap-override: 0%;
}

:root {
  --paper: #fdf6ed;
  --ink: #1d1c1c;
  --mary: #1161aa;
  --ink-rgb: 29, 28, 28;
  --paper-rgb: 253, 246, 237;
  --mary-rgb: 17, 97, 170;

  /* Roles. Text and rules are ink; surfaces are paper; the blue is one accent. */
  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--paper);
  --card-foreground: var(--ink);
  --muted: rgba(var(--ink-rgb), 0.05);
  --muted-foreground: rgba(var(--ink-rgb), 0.74);
  --accent: rgba(var(--ink-rgb), 0.05);
  --border: rgba(var(--ink-rgb), 0.22);
  --hover-overlay: rgba(var(--ink-rgb), 0.05);
  --dots: rgba(var(--ink-rgb), 0.08);

  /* The blue as ink (light mode only) and as a fill (both modes). */
  --accent-ink: var(--mary);
  --accent-fill: var(--mary);
  --on-accent: #fdf6ed;
  --mary-ink: var(--accent-ink);
  --mary-foreground: var(--on-accent);
  --mary-light: rgba(var(--mary-rgb), 0.10);
  --mary-glow: rgba(var(--mary-rgb), 0.10);
  --mary-soft: rgba(var(--mary-rgb), 0.05);
  --mary-shadow: transparent;
  --mary-border-subtle: rgba(var(--mary-rgb), 0.3);

  /* There is no gold any more; anything that asked for it gets the accent. */
  --gold: var(--accent-ink);
  --gold-soft: rgba(var(--mary-rgb), 0.10);
  --gold-warm: var(--accent-ink);

  /* The prayer screen is the same paper as the rest of the book. */
  --parchment-bg: var(--paper);
  --parchment-ink: var(--ink);
  --parchment-scripture: var(--ink);
  --parchment-faded: rgba(var(--ink-rgb), 0.62);
  --parchment-muted: rgba(var(--ink-rgb), 0.68);
  --parchment-rule: rgba(var(--ink-rgb), 0.18);
  --parchment-accent: var(--accent-ink);

  --radius: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --font-serif: 'Rosarivo', 'Rosarivo Fallback', Georgia, serif;
  --font-sans: 'Rosarivo', 'Rosarivo Fallback', Georgia, serif;
}

/* Dark: paper and ink change places. The blue keeps to fills and beads. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --paper: #1d1c1c;
    --ink: #fdf6ed;
    --ink-rgb: 253, 246, 237;
    --paper-rgb: 29, 28, 28;
    --accent-ink: #fdf6ed;
    --mary-light: rgba(var(--mary-rgb), 0.28);
    --mary-glow: rgba(var(--mary-rgb), 0.22);
    --mary-soft: rgba(var(--mary-rgb), 0.12);
    --gold-soft: rgba(var(--mary-rgb), 0.22);
    --mary-border-subtle: rgba(var(--mary-rgb), 0.5);
  }
}
:root.dark {
  --paper: #1d1c1c;
  --ink: #fdf6ed;
  --ink-rgb: 253, 246, 237;
  --paper-rgb: 29, 28, 28;
  --accent-ink: #fdf6ed;
  --mary-light: rgba(var(--mary-rgb), 0.28);
  --mary-glow: rgba(var(--mary-rgb), 0.22);
  --mary-soft: rgba(var(--mary-rgb), 0.12);
  --gold-soft: rgba(var(--mary-rgb), 0.22);
  --mary-border-subtle: rgba(var(--mary-rgb), 0.5);
}

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

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

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Rosarivo', 'Rosarivo Fallback', Georgia, serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ─── Site Header ─────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(var(--paper-rgb), 0.94);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .site-header {
    background: rgba(var(--paper-rgb), 0.94);
  }
}
.dark .site-header {
  background: rgba(var(--paper-rgb), 0.94);
}

.site-header-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--mary);
  font-size: 0.875rem;
  font-weight: 400;
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
}

/* Header nav links to sister apps — hidden on mobile, shown on wider screens */
.header-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 400px) {
  .header-nav { display: flex; }
}

.header-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  color: var(--muted-foreground);
  transition: all 0.15s;
  text-decoration: none;
}

.header-nav-link:hover {
  color: var(--mary);
  background: var(--hover-overlay);
}

/* Language toggle */
.lang-toggle {
  background: none;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted-foreground);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 400;
  font-family: var(--font-sans, 'Rosarivo', 'Rosarivo Fallback', Georgia, serif);
  transition: all 0.2s ease;
  line-height: 1;
}

.lang-toggle:hover {
  color: var(--foreground);
  background: var(--muted);
  border-color: var(--foreground);
}

.lang-toggle-prayer {
  padding: 0.2rem 0.4rem;
  font-size: 0.625rem;
  border-color: var(--parchment-rule);
  color: var(--parchment-faded);
}

.lang-toggle-prayer:hover {
  color: var(--parchment-ink);
  border-color: var(--parchment-ink);
  background: var(--parchment-rule);
}

/* Language picker dropdown */
.lang-picker {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 2px;
  min-width: 11rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.375rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.125rem;
  animation: langPickerIn 0.15s ease-out;
}

@keyframes langPickerIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lang-picker-item {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans, 'Rosarivo', 'Rosarivo Fallback', Georgia, serif);
  color: var(--foreground);
  text-align: center;
  border-radius: 2px;
  transition: all 0.15s ease;
  line-height: 1.3;
}

.lang-picker-item:hover {
  background: var(--muted);
}

/* --accent is a surface token (identical to --muted, inverting with the theme),
   so as a text colour it rendered the selected language all but invisible in
   both themes. Text takes --mary-ink; only the tint behind it takes --mary. */
.lang-picker-active {
  font-weight: 400;
  color: var(--mary-ink);
  background: color-mix(in oklch, var(--mary) 10%, transparent);
}

.lang-picker-active:hover {
  background: color-mix(in oklch, var(--mary) 15%, transparent);
}

/* Touch targets (WCAG 2.2 SC 2.5.8).
   The header chrome is small by design: the EN pill is 33x21, the theme and
   account icons 28 and 26 square. Rather than resize the visuals, extend an
   invisible hit area. Height grows to 44px, which the header has room for.
   Width grows by only 6px total, i.e. 3px per side, so neighbouring targets
   meet exactly across the 6px gap and never overlap and steal each other's
   taps. Never give these a background: the box must stay invisible. */
.site-logo,
.auth-icon-btn,
.lang-toggle,
.theme-toggle,
.player-btn {
  position: relative;
}

.site-logo::after,
.auth-icon-btn::after,
.lang-toggle::after,
.theme-toggle::after,
.player-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 6px);
  height: 44px;
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted-foreground);
  padding: 0.375rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  color: var(--foreground);
  background: var(--muted);
}

/* Show sun in dark mode, moon in light mode */
.theme-icon-moon { display: block; }
.theme-icon-sun { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not(.light) .theme-icon-moon { display: none; }
  :root:not(.light) .theme-icon-sun { display: block; }
}
.dark .theme-icon-moon { display: none; }
.dark .theme-icon-sun { display: block; }
.light .theme-icon-moon { display: block; }
.light .theme-icon-sun { display: none; }