/* ── CSS Custom Properties (Theming) ──────────────────────────────────── */
:root {
  --color-bg: #f5f4ef;
  --color-bg-end: #e8e6df;
  --color-text: #1a1a2e;
  --color-text-muted: rgba(26, 26, 46, 0.55);
  --color-link: #2c5f8a;
  --color-accent: #2c5f8a;
  --color-bg-nav: rgba(245, 244, 239, 0.95);
  --color-nav-icon: rgba(26, 26, 46, 0.45);
  --color-nav-active: #1a1a2e;
  --font-quote: 'Playfair Display', 'Roboto Slab', Georgia, serif;
  --font-ui: 'Open Sans Condensed', system-ui, sans-serif;
  --nav-height: 72px;
  --nav-total-height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  --font-size-quote:        clamp(1.5rem,  6vmin, 6rem);
  --font-size-quote-smaller: clamp(1.25rem, 6vmin, 5rem);
}

[data-theme="dark"] {
  --color-bg: #0d1b2a;
  --color-bg-end: #1e2d40;
  --color-text: #e8e6e1;
  --color-text-muted: rgba(232, 230, 225, 0.55);
  --color-link: #7db8d4;
  --color-accent: #7db8d4;
  --color-bg-nav: rgba(8, 14, 26, 0.97);
  --color-nav-icon: rgba(232, 230, 225, 0.45);
  --color-nav-active: #ffffff;
}

/* ── Reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Ensure CSS `display` values never override the HTML `hidden` attribute */
[hidden] {
  display: none !important;
}

html {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Fill iOS safe-area gaps (notch / Dynamic Island / home indicator) with
     the theme background so no white bars appear in portrait or landscape. */
  background-color: var(--color-bg);
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 16px;
  font-family: var(--font-ui);
  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg-end) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

a {
  color: var(--color-link);
}

strong {
  font-weight: 700;
  font-size: larger;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.clock-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(100vh - var(--nav-total-height));
  min-height: calc(100dvh - var(--nav-total-height));
  /* Top inset keeps content below the status bar / Dynamic Island;
     side insets avoid the notch in landscape; bottom keeps room for the nav. */
  padding: calc(2rem + env(safe-area-inset-top, 0px))
           max(1.5rem, env(safe-area-inset-right, 0px))
           2rem
           max(1.5rem, env(safe-area-inset-left, 0px));
  overflow: hidden;
}

.clock-content {
  max-width: 100%;
  width: 100%;
}

/* ── Attribution ──────────────────────────────────────────────────────── */
.attribution {
  text-align: right;
  margin-top: 1rem;
}

.author-credit {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 2.5vmin, 1.1rem);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
}

/* ── Ghost "View Book" Button ─────────────────────────────────────────── */
.book-btn {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--color-accent);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 2vmin, 0.85rem);
  letter-spacing: 0.08em;
  color: var(--color-accent);
  background: transparent;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s;
  white-space: normal;
}

.book-btn:hover {
  background-color: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
}

.book-title-plain {
  display: block;
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 2vmin, 0.95rem);
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.25rem;
}

/* ── Quote Text ───────────────────────────────────────────────────────── */
.quote-text {
  font-size: var(--font-size-quote);
  line-height: 1.2;
  font-family: var(--font-quote);
  font-weight: 400;
  margin-bottom: 0;
}

.quote-text.smaller {
  font-size: var(--font-size-quote-smaller);
}

/* ── Minute-transition fade ─────────────────────────────────────────── */
/* At each minute boundary the content wrapper snaps to opacity:0, new
   content is rendered, then .fading is removed to start a 60 s fade-in.
   Only the non-bold portions participate so the time phrase is always visible. */
.clock-content.fading .quote-text span {
  -webkit-animation: fadeOut 60s;
  -moz-animation: fadeOut 60s;
  -o-animation: fadeOut 60s;
  animation: fadeOut 60s;
}
.clock-content.fading .quote-text strong {
  opacity: 1;
}
@-webkit-keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0; }
}
@-moz-keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0; }
}
@-o-keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0; }
}
@keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0; }
}

/* ── Nav Bar Footer ───────────────────────────────────────────────────── */
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--color-bg-nav);
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  /* Side insets keep the nav buttons away from the notch in landscape. */
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}

.mode-nav {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 480px;
  height: var(--nav-height);
}

/* ── Nav Buttons ──────────────────────────────────────────────────────── */
.mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.25rem 0.4rem;
  /* minimum 44×44px touch target per AC 1.2 */
  min-width: 44px;
  min-height: 44px;
  height: 100%;
  gap: 0.2rem;
  color: var(--color-nav-icon);
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.mode-btn:hover {
  color: var(--color-text);
}

.mode-btn.active {
  color: var(--color-nav-active);
  border-top: 2px solid var(--color-nav-active);
  padding-top: calc(0.5rem - 2px);
}

.mode-btn svg {
  flex-shrink: 0;
}

.nav-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Info Panel ───────────────────────────────────────────────────────── */
.info-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  padding: 0;
  min-height: calc(100vh - var(--nav-total-height));
  min-height: calc(100dvh - var(--nav-total-height));
  width: 100%;
}

.info-text {
  margin-bottom: 0.75rem;
}

.info-text a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
}

.info-text a:hover {
  opacity: 0.8;
}

/* ── Nav Bar Hidden State (shake toggle) ─────────────────────────────── */
/* When the nav bar is hidden, allow the content areas to occupy the full
   viewport height instead of the reduced
   calc(100dvh - var(--nav-total-height)). */
body.nav-hidden .clock-container,
body.nav-hidden .info-panel {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Swipe Navigation Animations ─────────────────────────────────────── */
/* will-change is scoped to the animation classes so it's only active during
   transitions, avoiding permanent memory overhead on low-end devices. */
.slide-out-left  { animation: slideOutLeft  0.22s ease forwards; will-change: transform; }
.slide-out-right { animation: slideOutRight 0.22s ease forwards; will-change: transform; }
.slide-in-left   { animation: slideInLeft   0.22s ease both;     will-change: transform; }
.slide-in-right  { animation: slideInRight  0.22s ease both;     will-change: transform; }
.swipe-bounce-left  { animation: swipeBounceLeft  0.3s ease; will-change: transform; }
.swipe-bounce-right { animation: swipeBounceRight 0.3s ease; will-change: transform; }

@keyframes slideOutLeft {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-40px); opacity: 0; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);   opacity: 1; }
  to   { transform: translateX(40px); opacity: 0; }
}
@keyframes slideInLeft {
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes swipeBounceLeft {
  0%, 100% { transform: translateX(0); }
  40%      { transform: translateX(-12px); }
  70%      { transform: translateX(4px); }
}
@keyframes swipeBounceRight {
  0%, 100% { transform: translateX(0); }
  40%      { transform: translateX(12px); }
  70%      { transform: translateX(-4px); }
}