@font-face {
  font-family: "Noto Serif Hebrew";
  src: url("../assets/fonts/NotoSerifHebrew-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}

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

html {
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Never smooth-scroll the document — chapter jumps use fade-to-black */
  scroll-behavior: auto;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* Keep the centered date triangles put when a page grows a scrollbar. */
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  --swipe-x: 0px;
  --swipe-p: 0;
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  background: var(--bg);
  color: var(--text);
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body a,
body img {
  -webkit-user-drag: none;
}

body > .site-main,
body > .site-footer,
body > .edition-pane.is-current {
  transform: translate3d(var(--swipe-x), 0, 0);
}

body > .edition-pane.is-current {
  will-change: transform;
}

body.is-swipe-snap > .site-main,
body.is-swipe-snap > .site-footer,
body.is-swipe-snap > .edition-pane.is-current {
  transition: transform var(--swipe-snap-dur) var(--swipe-snap-ease),
    opacity var(--swipe-snap-dur) var(--swipe-snap-ease);
}

body.is-swipe-commit > .site-main,
body.is-swipe-commit > .site-footer,
body.is-swipe-commit > .edition-pane.is-current {
  transition: transform var(--swipe-commit-dur) var(--swipe-commit-ease),
    opacity var(--swipe-commit-dur) var(--swipe-commit-ease);
}

body.is-swiping,
body.is-swiping * {
  cursor: grabbing !important;
  overflow-anchor: none;
}

@media (prefers-reduced-motion: reduce) {
  body.is-swipe-snap > .site-main,
  body.is-swipe-snap > .site-footer,
  body.is-swipe-snap > .edition-pane.is-current,
  body.is-swipe-commit > .site-main,
  body.is-swipe-commit > .site-footer,
  body.is-swipe-commit > .edition-pane.is-current {
    transition: none;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--text);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

p {
  margin: 0 0 0.85em;
}

.site-main,
.reading-excerpt,
.canon-card,
.panel-scroll .verse-text,
.site-header,
.site-header *,
.active-edition-bar,
.reader-chrome,
.testament-bar,
.book-title-bar,
.edition-name-bar {
  user-select: text;
  -webkit-user-select: text;
}

.verse-text {
  user-select: text;
  -webkit-user-select: text;
}

.book-body.is-aligned .verse,
.book-body.is-aligned .verse .verse-text {
  user-select: none;
  -webkit-user-select: none;
}

.verse-text,
.reading-excerpt,
.panel-scroll .verse-text {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

:lang(he) {
  font-family: var(--font-he);
}

h1,
h2,
h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  margin: 0;
}

body > .site-header,
body > .book-title-bar,
body > .edition-name-bar,
body > .active-edition-bar,
body > .testament-bar,
body > .reader-chrome,
body > .chapter-rail {
  transform: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 var(--space-3);
  height: auto;
  min-height: 2.2rem;
  width: 100%;
  margin-left: 0;
  padding: 0.15rem var(--space-3) 0.2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header a {
  text-decoration: none;
  color: var(--text-soft);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header a:hover {
  color: var(--text);
}

.brand-block {
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
}

.brand {
  justify-self: start;
  color: var(--text-soft);
}

.brand strong {
  color: var(--text-soft);
  font-weight: 500;
}

.brand:hover,
.brand:hover strong,
.brand:focus-visible,
.brand:focus-visible strong {
  color: var(--text);
}

.header-translation {
  margin: 0;
  max-width: 22rem;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-center {
  justify-self: center;
  text-align: center;
  color: var(--text-soft) !important;
}

.nav-center:hover {
  color: var(--text) !important;
}

.nav-links {
  justify-self: end;
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.ui-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.05rem;
  border: 0;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
  line-height: 0;
}

.ui-gear svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.ui-gear:hover,
.ui-gear:focus-visible,
.ui-gear[aria-expanded="true"] {
  color: var(--text);
}

.site-main {
  width: min(100% - 2 * var(--space-5), 72rem);
  margin-inline: auto;
  padding: var(--space-6) 0 var(--space-8);
}

.site-footer {
  padding: var(--space-5);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skeleton {
  display: grid;
  gap: var(--space-3);
}

.skeleton-line {
  height: 0.9em;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--bg-soft) 0%,
    var(--bg-elevated) 50%,
    var(--bg-soft) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.status-msg {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-mute);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.status-msg[data-tone="warn"] {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--bg-elevated));
}


/* Peaceful fade-to-black veil (chapter navigation) */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 520ms step-end;
}

.page-veil.is-on {
  visibility: visible;
  pointer-events: all;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms step-start;
}

.page-veil.is-visible {
  opacity: 1;
}

.page-veil.is-out {
  opacity: 0;
  transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 640ms step-end;
}

@media (prefers-reduced-motion: reduce) {
  .page-veil {
    transition: none !important;
  }
}