/* Shared reading controls for the standalone Tehilim and Tanya apps. */
/* Use synthetic bold: the upstream Bold face intentionally hides cantillation. */
@font-face {
  font-family: "TaameyFrank";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/taamey-frank-400.woff2") format("woff2");
}
:root {
  --sr-paper: #fff;
  --sr-card: #fff;
  --sr-soft: #f4f4ef;
  --sr-ink: #151515;
  --sr-muted: #74746d;
  --sr-line: #e6e6df;
  --sr-yellow: #ffcb08;
  --sr-read: #6e3fb0;
  --sr-toolbar-height: 64px;
  --sr-font-size: 32px;
  --sr-weight: 700;
  --sr-line-height: 1.65;
  --sr-measure: 30em;
  --sr-font-family: "TaameyFrank", "Noto Serif Hebrew", serif;
  --th-bg: var(--sr-paper);
  --th-bg-card: var(--sr-card);
  --th-bg-card-2: var(--sr-soft);
  --th-ink: var(--sr-ink);
  --th-ink-2: var(--sr-ink);
  --th-ink-soft: var(--sr-muted);
  --th-accent: var(--sr-ink);
  --th-accent-2: #b68b00;
  --th-line: var(--sr-line);
  --tn-bg: var(--sr-paper);
  --tn-bg-card: var(--sr-card);
  --tn-bg-card-2: var(--sr-soft);
  --tn-ink: var(--sr-ink);
  --tn-ink-2: var(--sr-ink);
  --tn-ink-soft: var(--sr-muted);
  --tn-accent: var(--sr-ink);
  --tn-accent-2: #b68b00;
  --tn-line: var(--sr-line);
}
@font-face {
  font-family: "MekorotVilna";font-style: normal;font-weight: 400;font-display: swap;
  src: url("fonts/mekorot-vilna/Mekorot-Vilna.woff2") format("woff2");
  unicode-range: U+0000-05A1,U+05A3-05B9,U+05BB-05C4,U+05C6,U+05C8-10FFFF;
}
@font-face {
  font-family: "MekorotVilna";font-style: normal;font-weight: 700;font-display: swap;
  src: url("fonts/mekorot-vilna/Mekorot-Vilna-Bold.woff2") format("woff2");
  unicode-range: U+0000-05A1,U+05A3-05B9,U+05BB-05C4,U+05C6,U+05C8-10FFFF;
}
html[data-sr-intros="false"] .sr-book-intro { display:none !important; }

html[data-sr-paper="dark"] {
  color-scheme: dark;
  --sr-paper: #131313;
  --sr-card: #1d1d1d;
  --sr-soft: #292929;
  --sr-ink: #f3f2ee;
  --sr-muted: #b0b0a9;
  --sr-line: #3c3c39;
  --sr-read: #b99af0;
  --th-danger: #ff9292;
  --tn-danger: #ff9292;
  --th-success: #8ed9a9;
  --tn-success: #8ed9a9;
  --th-claim: #edd078;
  --tn-claim: #edd078;
}

html[data-sr-paper="light"] { color-scheme: light; }
/* A pre-existing accessibility choice takes precedence over the color theme. */
html[data-th-contrast], html[data-tn-contrast] {
  color-scheme: light;
  --sr-paper: #fff;
  --sr-card: #fff;
  --sr-soft: #f1f1f1;
  --sr-ink: #000;
  --sr-muted: #222;
  --sr-line: #000;
  --sr-read: #4d218a;
}

body[data-study-app] {
  padding-top: calc(var(--sr-toolbar-height) + env(safe-area-inset-top, 0px));
  background: var(--sr-paper);
  color: var(--sr-ink);
  touch-action: auto;
}
.tehilim-header, .tanya-header { position: static; }
.tehilim-main, .tanya-main { min-width: 0; }
html[data-sr-rail="true"] body:not(.sr-no-content) :is(.tehilim-main, .tanya-main) {
  padding-inline-start: 40px;
}
[data-study-content] {
  max-width: var(--sr-measure);
  font-family: var(--sr-font-family);
  font-size: var(--sr-font-size);
  font-weight: var(--sr-weight);
  line-height: var(--sr-line-height);
  letter-spacing: normal;
  text-align: right;
  color: var(--sr-ink);
  margin-inline: auto;
  overflow-wrap: break-word;
}
body[data-study-app="tehilim"] [data-study-content] {
  font-size: calc(var(--sr-font-size) * (1 + var(--th-font-step, 0)));
}
body[data-study-app="tanya"] [data-study-content] {
  font-size: calc(var(--sr-font-size) * (1 + var(--tn-font-step, 0)));
}
[data-study-content] .sr-unit {
  text-indent: 0;
  margin: 0 0 .75em;
  transition: color .9s ease, opacity .9s ease;
  scroll-margin-top: calc(var(--sr-toolbar-height) + 36px);
}
[data-study-content] .sr-unit:first-child::first-letter {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}
[data-study-content] .sr-unit :is(strong, b, em, small, sup, span, a) { color: inherit; }
[data-study-content] .sr-unit :is(strong, b) { font-weight: inherit; }
html[data-sr-tint="purple"] [data-study-content] .sr-past,
html[data-sr-tint="purple"] [data-study-content] .sr-past * { color: var(--sr-read); }
html[data-sr-tint="fade"] [data-study-content] .sr-past { opacity: .38; }
html[data-sr-lay="flow"] [data-study-content] .sr-unit {
  display: inline;
  margin: 0;
}
html[data-sr-lay="flow"] [data-study-content] .sr-unit::after { content: " "; white-space: pre-wrap; }
[data-study-content] .sr-number {
  display: inline-block;
  margin-inline-end: .55em;
  min-width: 1.3em;
  font: 500 .48em/1.5 "Rubik", Arial, sans-serif;
  color: var(--sr-muted);
  vertical-align: middle;
  user-select: none;
}
html[data-sr-nums="false"] .sr-number { display: none; }
.sr-ktiv { font-size: .7em; }

/* Live book layout: the text stays selectable and every reading setting works. */
.sr-book-title { display: none; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] .tehilim-reader {
  box-shadow: none;
  border-color: transparent;
  padding: 10px 0 24px;
}
html[data-sr-lay="book"] body[data-study-app="tehilim"]:not(.sr-no-content) .tehilim-header { display:none; }
html[data-sr-lay="book"] body[data-study-app="tehilim"]:not(.sr-no-content) .tehilim-main { padding-top:16px; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] :is(.tehilim-chapter-eyebrow, .tehilim-chapter-progress, .sr-standard-title) { display: none; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] .tehilim-chapter-head { margin-bottom: 12px; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] .tehilim-chapter-num {
  margin: 0;
  font-family: var(--sr-font-family);
  font-size: calc(var(--sr-font-size) * 1.15);
  font-weight: var(--sr-weight);
  line-height: 1.4;
}
html[data-sr-lay="book"] body[data-study-app="tehilim"] .sr-book-title { display: inline; }
body[data-study-app="tehilim"] :is(.sr-book-intro, .sr-book-day) {
  display: block;
  max-width: calc(var(--sr-measure) * 1.5);
  margin: 0 auto 16px;
  font-family: var(--sr-font-family);
  font-size: clamp(14px, calc(var(--sr-font-size) * .65), 24px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--sr-ink);
}
body[data-study-app="tehilim"] .sr-book-intro { text-align: justify; }
body[data-study-app="tehilim"] .sr-book-day { text-align: right; margin-bottom: 6px; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] [data-study-content] {
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}
html[data-sr-lay="book"] body[data-study-app="tehilim"] .sr-unit { display: inline; margin: 0; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] .sr-unit::after { content: " "; white-space: pre-wrap; }
html[data-sr-lay="book"] body[data-study-app="tehilim"] .sr-number {
  min-width: 0;
  margin-inline-end: .18em;
  font-family: var(--sr-font-family);
  font-size: .55em;
  font-weight: 400;
  color: inherit;
  vertical-align: baseline;
}

.sr-toolbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--sr-paper);
  border-bottom: 1px solid var(--sr-line);
  box-shadow: 0 2px 8px #00000008;
}
.sr-toolbar-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--sr-toolbar-height);
  max-width: 1100px;
  margin-inline: auto;
  padding: 5px 12px;
}
.sr-button, .sr-close, .sr-segment button, .sr-nav-links a, .sr-locations button,
.sr-confirm-actions button, .sr-confirm-actions a, .sr-reset {
  font: inherit;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--sr-ink);
  background: var(--sr-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
}
.sr-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sr-icon-button, .sr-close { width: 44px; min-width: 44px; padding: 4px; font-size: 23px; }
.sr-toolbar .sr-button { flex-shrink: 0; min-width: 44px; background: transparent; }
.sr-toolbar a:hover, .sr-nav-links a:hover { color: var(--sr-ink); text-decoration: none; }
.sr-status {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.sr-toolbar .sr-button:hover, .sr-close:hover { background: var(--sr-soft); }
.sr-button svg { width: 23px; height: 23px; }
.sr-dialog {
  width: min(620px, calc(100vw - 24px));
  max-width: none;
  max-height: min(88vh, 880px);
  max-height: min(88dvh, 880px);
  margin: auto auto 0;
  padding: 18px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  color: var(--sr-ink);
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 48px #0003;
  overflow-y: auto;
  overscroll-behavior: contain;
  font: 16px/1.6 "Rubik", "Segoe UI", Arial, sans-serif;
}
.sr-dialog::backdrop { background: #0007; }
.sr-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sr-dialog-head h2 { margin: 0; font-size: 21px; }
.sr-section { padding-block: 18px; border-bottom: 1px solid var(--sr-line); }
.sr-section:last-child { border-bottom: 0; }
.sr-label { display: block; margin-bottom: 10px; font-weight: 600; color: var(--sr-muted); }
.sr-segment { display: flex; gap: 4px; background: var(--sr-soft); padding: 4px; border-radius: 14px; }
.sr-segment button { flex: 1; min-width: 0; font-weight: 600; padding-inline: 8px; }
.sr-segment button[aria-pressed="true"] { background: #151515; color: #fff; }
html[data-sr-paper="dark"] .sr-segment button[aria-pressed="true"] { background: var(--sr-yellow); color: #151515; }
.sr-row, .sr-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; }
.sr-switch-row { cursor: pointer; flex-wrap: wrap; }
.sr-switch-row > span { flex: 1; }
.sr-switch-row .sr-setting-note { flex-basis: 100%; margin-top: -10px; }
.sr-switch-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 32px;
  margin: 6px 0;
  background: var(--sr-line);
  border: 1px solid var(--sr-muted);
  border-radius: 20px;
  cursor: pointer;
}
.sr-switch-row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sr-muted);
  transition: transform .15s ease;
}
.sr-switch-row input[type="checkbox"]:checked { background: var(--sr-yellow); border-color: var(--sr-yellow); }
.sr-switch-row input[type="checkbox"]:checked::before { transform: translateX(22px); background: #151515; }
.sr-switch-row:has(input:disabled) { opacity: .5; cursor: default; }
.sr-switch-row input:disabled { cursor: default; }
.sr-range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 14px; margin-block: 14px; }
.sr-range-row input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 32px; accent-color: #d3a700; }
.sr-range-row output { font-variant-numeric: tabular-nums; }
.sr-setting-note, .sr-message { color: var(--sr-muted); font-size: 14px; line-height: 1.6; margin: 8px 0; }
.sr-preview { font: var(--sr-weight) var(--sr-font-size)/var(--sr-line-height) var(--sr-font-family); padding: 12px; text-align: center; background: var(--sr-soft); border-radius: 14px; }
.sr-reset { display: block; margin: 16px auto 0; background: transparent; color: var(--sr-muted); }
.sr-done { display:block; margin:20px auto; padding:12px 20px; border:0; border-radius:16px; background:var(--sr-soft); color:var(--sr-ink); font:700 16px/1.5 "Rubik",sans-serif; cursor:pointer; }
.sr-done[aria-pressed="true"] { background:var(--sr-yellow); color:#151515; }
.sr-message { position:fixed; z-index:120; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); padding:10px 16px; border-radius:16px; background:var(--sr-ink); color:var(--sr-paper); box-shadow:0 4px 16px #0003; }
.sr-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 16px; }
.sr-nav-links a { display: flex; align-items: center; text-align: center; justify-content: center; }
.sr-locations { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-locations button { min-width: 44px; }
.sr-confirm-actions { display: flex; gap: 10px; margin-top: 18px; }
.sr-confirm-actions > * { flex: 1; font-weight: 700; }
.sr-confirm-actions > :first-child { background: var(--sr-yellow); color: #151515; }
.sr-rail {
  position: fixed;
  z-index: 40;
  inset-inline-start: 5px;
  top: calc(var(--sr-toolbar-height) + env(safe-area-inset-top, 0px) + 32px);
  bottom: max(90px, env(safe-area-inset-bottom, 0px));
  width: 24px;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.sr-rail::-webkit-scrollbar { display: none; }
#sr-rail-items { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#sr-rail-items button {
  display: block;
  width: 18px;
  min-height: 18px;
  padding: 0;
  border: 3px solid var(--sr-paper);
  border-radius: 10px;
  background: var(--sr-line);
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
#sr-rail-items button.sr-past, #sr-rail-items button.sr-done { background: var(--sr-read); }
#sr-rail-items button[aria-current="true"], #sr-rail-items button[aria-current="location"],
#sr-rail-items button.sr-current { background: var(--sr-yellow); }
html[data-sr-rail="false"] #sr-rail, .sr-no-content #sr-rail { display: none; }
.sr-no-content #sr-status { visibility: hidden; }

/* The original application keeps its existing navigation, forms and workflow. */
:is(.tehilim-btn-primary, .tanya-btn-primary, .tehilim-nav-cta, .tanya-nav-cta,
    .tanya-mode-active, .tehilim-tts-btn, .tanya-tts-btn) {
  background: var(--sr-yellow);
  border-color: var(--sr-yellow);
  color: #151515 !important;
}
html[data-sr-paper="dark"] :is(.tehilim-cell-claimed, .tanya-cell-claimed,
    .tehilim-cell-read, .tanya-cell-read, .tehilim-cell-multi, .tanya-cell-multi,
    .tehilim-dedication, .tanya-dedication, .tehilim-tzedaka, .tanya-tzedaka,
    .tehilim-link-box, .tanya-link-box, .tehilim-form-error, .tanya-form-error,
    .tehilim-banner-success, .tanya-banner-success) { background: var(--sr-soft) !important; }
body[data-study-app] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  background-color: var(--sr-card);
  color: var(--sr-ink);
  border-color: var(--sr-line);
}
body[data-study-app] :is(.sr-toolbar, .sr-dialog, .sr-rail) :focus-visible {
  outline: 3px solid var(--sr-read);
  outline-offset: 3px;
}
body[data-study-app] [hidden] { display: none !important; }

@media (max-width: 520px) {
  .sr-toolbar-inner { gap: 2px; padding-inline: 6px; }
  .sr-toolbar .sr-button { padding-inline: 5px; font-size: 14px; }
  .sr-status { font-size: 12px; }
  .sr-dialog { width: 100%; padding-inline: 18px; border-inline: 0; }
  .sr-nav-links { grid-template-columns: 1fr; }
  [data-study-content] { max-width: 100%; }
  .tehilim-reader, .tanya-reader { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-study-content] .sr-unit, .sr-switch-row input[type="checkbox"]::before { transition: none; }
}
html[data-th-no-motion] [data-study-content] .sr-unit,
html[data-tn-no-motion] [data-study-content] .sr-unit,
html[data-th-no-motion] .sr-switch-row input[type="checkbox"]::before,
html[data-tn-no-motion] .sr-switch-row input[type="checkbox"]::before { transition: none; }