/*
 * הסידור.
 *
 * הקורא הוא המסך היחיד באתר שבו הטקסט הוא המוצר. לכן אין כאן
 * כרטיסים, אין מסגרות סביב פסקאות, ואין צל. מה שיש: רוחב שורה
 * שנוח לקרוא בו, גובה שורה נדיב, וניקוד שלא נדרס.
 *
 * הכל בנוי על מערכת העיצוב של האתר. אין כאן פונט שני, אין ערכת
 * צבעים שנייה, ואין ספרייה.
 */

/* ============================================================
   1. משתני הקורא
   ============================================================ */

.mvs-reader {
	/* גודל הטקסט נשלט על ידי המשתמש ונשמר בדפדפן. */
	--mvs-fs: 1.28rem;
	--mvs-lh: 2.05;
	--mvs-measure: 34rem;

	--mvs-paper: #fffdf8;
	--mvs-ink: #17182c;
	--mvs-ink-2: #4a4f6b;
	--mvs-ink-3: #6f748f;
	--mvs-line: #ece7dc;
	--mvs-accent: var(--mv-accent-600, #8a651d);
	--mvs-bar-h: 46px;
}

.mvs-reader[data-mvs-size="s"]  { --mvs-fs: 1.12rem; --mvs-lh: 1.95; }
.mvs-reader[data-mvs-size="m"]  { --mvs-fs: 1.28rem; --mvs-lh: 2.05; }
.mvs-reader[data-mvs-size="l"]  { --mvs-fs: 1.45rem; --mvs-lh: 2.1; }
.mvs-reader[data-mvs-size="xl"] { --mvs-fs: 1.66rem; --mvs-lh: 2.15; }
.mvs-reader[data-mvs-size="xxl"]{ --mvs-fs: 1.92rem; --mvs-lh: 2.2; }

/* ============================================================
   2. מצב כהה
   ============================================================
   הניגודיות נבדקה: הדיו על הנייר הכהה נותן 13.9:1, והמשני 7.4:1.
   שניהם מעל AA בהפרש נוח, כי טקסט תפילה נקרא לאורך זמן. */

.mvs-reader[data-mvs-theme="dark"] {
	--mvs-paper: #14161f;
	--mvs-ink: #eef0f6;
	--mvs-ink-2: #b9bfd2;
	--mvs-ink-3: #9aa1b8;
	--mvs-line: #2a2e3d;
	--mvs-accent: #e6c98c;
}

@media ( prefers-color-scheme: dark ) {
	.mvs-reader[data-mvs-theme="system"] {
		--mvs-paper: #14161f;
		--mvs-ink: #eef0f6;
		--mvs-ink-2: #b9bfd2;
		--mvs-ink-3: #9aa1b8;
		--mvs-line: #2a2e3d;
		--mvs-accent: #e6c98c;
	}
}

.mvs-reader {
	background: var(--mvs-paper);
	color: var(--mvs-ink);
}

/* ============================================================
   3. הסרגל
   ============================================================ */

.mvs-bar {
	position: sticky;
	top: calc( var(--mv-header-h, 58px) + var(--mv-strip-h, 32px) );
	z-index: 40;
	background: color-mix( in srgb, var(--mvs-paper) 92%, transparent );
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--mvs-line);
}

@supports not ( background: color-mix( in srgb, red 50%, blue ) ) {
	.mvs-bar { background: var(--mvs-paper); }
}

.mvs-bar__in {
	display: flex;
	align-items: center;
	gap: var(--mv-3);
	max-width: 62rem;
	margin: 0 auto;
	padding: 6px var(--mv-4);
	min-height: var(--mvs-bar-h);
}

.mvs-bar__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	color: var(--mvs-ink-2);
	flex: none;
}
.mvs-bar__back:hover { background: var(--mv-bg-2); color: var(--mvs-ink); text-decoration: none; }

.mvs-bar__title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.mvs-bar__title span {
	font-weight: 700;
	font-size: .98rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mvs-bar__title small { font-size: .74rem; color: var(--mvs-ink-3); }

.mvs-bar__tools { display: flex; gap: 2px; flex: none; }

.mvs-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--mvs-ink-2);
	cursor: pointer;
}
.mvs-tool:hover { background: var(--mv-bg-2); color: var(--mvs-ink); }
.mvs-tool__aa { font-weight: 700; font-size: .92rem; }

/* ============================================================
   4. גוף הקורא
   ============================================================ */

.mvs-wrap { max-width: 62rem; padding-top: var(--mv-5); }

.mvs-head { margin-bottom: var(--mv-5); }
.mvs-head h1 { font-size: clamp( 1.5rem, 4vw, 2rem ); margin: 0 0 var(--mv-2); color: var(--mvs-ink); }
.mvs-head__lede { margin: 0 0 var(--mv-3); color: var(--mvs-ink-2); }
.mvs-head__meta { display: flex; flex-wrap: wrap; gap: var(--mv-2) var(--mv-4); margin: 0; font-size: .82rem; color: var(--mvs-ink-3); }
.mvs-head__meta span::before { content: "· "; color: var(--mv-line-2); }
.mvs-head__meta span:first-child::before { content: none; }

.mvs-text {
	max-width: var(--mvs-measure);
	margin: var(--mv-6) auto 0;
}

.mvs-part {
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--mvs-accent);
	text-transform: none;
	margin: var(--mv-9) 0 var(--mv-3);
	padding-bottom: var(--mv-2);
	border-bottom: 1px solid var(--mvs-line);
}
.mvs-part:first-child { margin-top: 0; }

.mvs-sec {
	margin: 0 0 var(--mv-7);
	scroll-margin-top: calc( var(--mv-header-h, 58px) + var(--mv-strip-h, 32px) + var(--mvs-bar-h) + 12px );
	/* הסידור ארוך במכוון. זה מונע מהדפדפן לפרוס קטעים שלא נראים. */
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}

.mvs-sec__h {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 var(--mv-2);
	color: var(--mvs-ink-2);
}

.mvs-sec__note {
	margin: 0 0 var(--mv-3);
	padding: var(--mv-2) var(--mv-3);
	border-inline-start: 3px solid var(--mvs-accent);
	background: color-mix( in srgb, var(--mvs-accent) 8%, transparent );
	border-radius: 0 8px 8px 0;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--mvs-ink-2);
}

/* ---- הטקסט עצמו ---- */

.mvs-p {
	font-size: var(--mvs-fs);
	line-height: var(--mvs-lh);
	margin: 0 0 .7em;
	color: var(--mvs-ink);
	text-align: start;
	overflow-wrap: break-word;
	/* ניקוד: בלי זה חלק מהדפדפנים דוחסים את הסימנים אל האות. */
	font-feature-settings: "kern" 1;
	font-variant-ligatures: none;
}

.mvs-p:last-child { margin-bottom: 0; }

/*
 * small במקור מסמן שני דברים: הוראה, ופסוק רשות שהוא טקסט תפילה.
 * שניהם קטנים ומשניים ויזואלית. מה שנבדל ביניהם הוא ההסתרה:
 * `.mvs-i` - הוראה, מזוהה בכך שאין בה ניקוד - היא היחידה שיורדת
 * כשמבקשים "טקסט תפילה בלבד". פסוק מנוקד נשאר תמיד.
 */
.mvs-p small {
	display: inline;
	font-size: .78em;
	line-height: 1.75;
	color: var(--mvs-ink-2);
	font-weight: 400;
}

.mvs-p small.mvs-i {
	font-size: .68em;
	color: var(--mvs-ink-3);
	font-style: normal;
}

.mvs-p big {
	display: block;
	font-size: 1em;
	font-weight: 700;
	color: var(--mvs-ink-2);
	margin-bottom: .2em;
}
.mvs-p big b { font-weight: 700; }

.mvs-reader.is-hiding-instructions .mvs-p small.mvs-i { display: none; }
.mvs-reader.is-hiding-instructions .mvs-p:empty { display: none; }

/* קטע שאינו נאמר היום: מקופל, אבל לא נמחק. */
.mvs-sec.is-skipped { opacity: .55; }
.mvs-sec.is-skipped .mvs-body { display: none; }
.mvs-sec.is-skipped .mvs-sec__h::after {
	content: " - לא נאמר היום";
	font-weight: 400;
	font-size: .8em;
	color: var(--mvs-ink-3);
}
.mvs-reader[data-mvs-mode="full"] .mvs-sec.is-skipped { opacity: 1; }
.mvs-reader[data-mvs-mode="full"] .mvs-sec.is-skipped .mvs-body { display: block; }

/* ============================================================
   5. רצועת ההקשר
   ============================================================ */

.mvs-ctx {
	margin: var(--mv-5) 0;
	padding: var(--mv-4);
	border: 1px solid var(--mvs-line);
	border-radius: var(--mv-r, 16px);
	background: var(--mv-surface, #fff);
}
.mvs-reader .mvs-ctx { background: transparent; }

.mvs-ctx__date { margin: 0 0 var(--mv-2); display: flex; gap: var(--mv-2); align-items: baseline; flex-wrap: wrap; }
.mvs-ctx__date span { font-size: .84rem; color: var(--mvs-ink-3); }
.mvs-ctx__none { margin: 0; font-size: .86rem; color: var(--mvs-ink-3); }
.mvs-ctx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mv-2); }

.mvs-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .8rem;
	border: 1px solid var(--mv-line);
	background: var(--mv-bg, #f4f5f9);
	color: var(--mv-ink-2);
}
.mvs-tag__when { font-size: .74rem; color: var(--mv-ink-3); }
.mvs-tag--add { border-color: var(--mv-accent-300, #e0c489); background: var(--mv-accent-50, #fbf5e9); color: var(--mv-accent-700, #6b4e16); }
.mvs-tag--skip { border-color: #cfd4e4; background: #eef1fa; color: var(--mv-primary-600, #26326e); }
.mvs-tag--custom { border-color: #cfd4e4; background: #fff; color: var(--mv-ink-2); }
.mvs-ctx--compact .mvs-tag { font-size: .76rem; padding: 3px 9px; }

/* ============================================================
   6. מצבי תצוגה
   ============================================================ */

.mvs-modes { display: flex; flex-wrap: wrap; gap: var(--mv-2); margin: var(--mv-4) 0 var(--mv-2); }

.mvs-mode {
	border: 1px solid var(--mv-line-2);
	background: var(--mv-surface, #fff);
	color: var(--mv-ink-2);
	border-radius: 999px;
	padding: 7px 14px;
	font: inherit;
	font-size: .84rem;
	cursor: pointer;
}
.mvs-mode:hover { border-color: var(--mv-primary-300); color: var(--mv-primary-600); }
.mvs-mode.is-on,
.mvs-mode[aria-pressed="true"] {
	background: var(--mv-primary);
	border-color: var(--mv-primary);
	color: #fff;
}
.mvs-modenote { margin: 0 0 var(--mv-5); font-size: .82rem; color: var(--mvs-ink-3); }

/* ============================================================
   7. גיליונות
   ============================================================ */

.mvs-sheet { position: fixed; inset: 0; z-index: 210; display: flex; }
.mvs-sheet[hidden] { display: none; }
.mvs-sheet::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10,12,28,.42);
	opacity: 0;
	transition: opacity .18s ease;
}
.mvs-sheet.is-open::before { opacity: 1; }

.mvs-sheet__panel {
	position: relative;
	margin-top: auto;
	width: 100%;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	background: var(--mv-surface, #fff);
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -12px 40px rgba(10,12,28,.18);
	transform: translateY(14px);
	opacity: 0;
	transition: transform .2s ease, opacity .2s ease;
	padding-bottom: env( safe-area-inset-bottom, 0px );
}
.mvs-sheet.is-open .mvs-sheet__panel { transform: none; opacity: 1; }

.mvs-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mv-3);
	padding: var(--mv-4) var(--mv-5);
	border-bottom: 1px solid var(--mv-line);
}
.mvs-sheet__head h2 { margin: 0; font-size: 1rem; }

.mvs-sheet__x {
	border: 0;
	background: transparent;
	color: var(--mv-ink-3);
	width: 36px; height: 36px;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.mvs-sheet__x:hover { background: var(--mv-bg-2); color: var(--mv-ink); }

.mvs-sheet__body { padding: var(--mv-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }

@media ( min-width: 720px ) {
	.mvs-sheet { align-items: center; justify-content: center; padding: var(--mv-6); }
	.mvs-sheet__panel {
		margin: 0;
		max-width: 32rem;
		max-height: 78vh;
		border-radius: 18px;
		box-shadow: 0 24px 60px rgba(10,12,28,.24);
	}
}

/* ---- תוכן העניינים ---- */

.mvs-toc__g { margin: var(--mv-4) 0 var(--mv-2); font-size: .78rem; font-weight: 700; color: var(--mv-accent-600); }
.mvs-toc__g:first-child { margin-top: 0; }
.mvs-toc__list { list-style: none; margin: 0; padding: 0; }
.mvs-toc__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mv-3);
	padding: 9px 10px;
	border-radius: 10px;
	color: var(--mv-ink);
}
.mvs-toc__list a:hover { background: var(--mv-primary-50); text-decoration: none; }
.mvs-toc__list small { color: var(--mv-ink-3); font-size: .74rem; white-space: nowrap; }

/* ---- תצוגה ---- */

.mvs-field { border: 0; padding: 0; margin: 0 0 var(--mv-6); }
.mvs-field legend { font-size: .8rem; font-weight: 700; color: var(--mv-ink-3); padding: 0; margin-bottom: var(--mv-3); }
.mvs-size { display: flex; align-items: center; gap: var(--mv-3); }
.mvs-size__out { flex: 1; text-align: center; font-weight: 700; }

.mvs-theme { display: flex; gap: var(--mv-2); flex-wrap: wrap; }
.mvs-theme__opt {
	flex: 1 1 auto;
	border: 1px solid var(--mv-line-2);
	background: var(--mv-surface, #fff);
	color: var(--mv-ink-2);
	border-radius: 10px;
	padding: 9px 12px;
	font: inherit;
	font-size: .86rem;
	cursor: pointer;
	text-align: center;
}
.mvs-theme__opt.is-on,
.mvs-theme__opt[aria-checked="true"] { background: var(--mv-primary); border-color: var(--mv-primary); color: #fff; }
.mvs-theme__opt:hover { border-color: var(--mv-primary-300); }
.mvs-theme__opt.is-on:hover,
.mvs-theme__opt[aria-checked="true"]:hover { color: #fff; }

.mvs-check { display: flex; gap: var(--mv-3); align-items: flex-start; margin-bottom: var(--mv-3); font-size: .9rem; }
.mvs-check input { margin-top: 4px; }

/* ============================================================
   8. מסך הבית של הסידור
   ============================================================ */

.mvs-now {
	margin: var(--mv-6) 0;
	padding: var(--mv-6);
	border-radius: var(--mv-r, 16px);
	background: linear-gradient( 160deg, var(--mv-primary) 0%, var(--mv-primary-700) 100% );
	color: #fff;
}
.mvs-now__eyebrow { margin: 0 0 var(--mv-2); font-size: .78rem; letter-spacing: .06em; color: rgba(255,255,255,.78); }
.mvs-now__title { margin: 0; font-size: clamp( 1.5rem, 5vw, 2.1rem ); font-weight: 700; line-height: 1.2; }
.mvs-now__sub { margin: var(--mv-2) 0 0; color: rgba(255,255,255,.86); font-size: .92rem; }
.mvs-now__extra { margin: var(--mv-1) 0 0; color: rgba(255,255,255,.86); font-size: .88rem; }
.mvs-now__actions { display: flex; flex-wrap: wrap; gap: var(--mv-2); margin-top: var(--mv-5); }
.mvs-now__actions .mv-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.mvs-now__actions .mv-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.mvs-prefs, .mvs-search, .mvs-group, .mvs-about { margin-top: var(--mv-8); }
.mvs-prefs h2, .mvs-group h2 { font-size: 1.05rem; }

.mvs-nusach { display: flex; flex-wrap: wrap; gap: var(--mv-2); margin: var(--mv-3) 0; }
.mvs-nusach__opt {
	border: 1px solid var(--mv-line-2);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .9rem;
	color: var(--mv-ink-2);
	background: var(--mv-surface, #fff);
}
.mvs-nusach__opt:hover { border-color: var(--mv-primary-300); color: var(--mv-primary-600); text-decoration: none; }
.mvs-nusach__opt.is-on { background: var(--mv-primary); border-color: var(--mv-primary); color: #fff; }
.mvs-nusach__opt.is-on:hover { color: #fff; }

.mvs-grid { display: grid; gap: var(--mv-3); grid-template-columns: 1fr; margin-top: var(--mv-4); }
@media ( min-width: 560px ) { .mvs-grid { grid-template-columns: repeat( 2, minmax(0,1fr) ); } }
@media ( min-width: 900px ) { .mvs-grid { grid-template-columns: repeat( 3, minmax(0,1fr) ); } }

.mvs-card {
	display: flex;
	align-items: center;
	gap: var(--mv-4);
	padding: var(--mv-4) var(--mv-5);
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-r, 16px);
	background: var(--mv-surface, #fff);
	color: var(--mv-ink);
	min-height: 76px;
}
.mvs-card:hover { border-color: var(--mv-primary-300); text-decoration: none; box-shadow: 0 6px 20px rgba(29,38,87,.07); }
.mvs-card__icon { flex: none; color: var(--mv-primary-600); display: inline-flex; }
.mvs-card__body { display: flex; flex-direction: column; min-width: 0; }
.mvs-card__title { font-weight: 700; }
.mvs-card__when { font-size: .8rem; color: var(--mv-ink-3); }
.mvs-card.is-missing { opacity: .62; }

.mvs-resume, .mvs-favs { margin-top: var(--mv-6); }
.mvs-resume { display: flex; align-items: center; flex-wrap: wrap; gap: var(--mv-3); }
.mvs-resume p { margin: 0; font-size: .88rem; color: var(--mv-ink-3); }

/* ============================================================
   9. תחתית עמוד התפילה
   ============================================================ */

.mvs-after, .mvs-nusach-block, .mvs-credits { margin-top: var(--mv-9); }
.mvs-after h2, .mvs-nusach-block h2, .mvs-credits h2 { font-size: 1rem; }

.mvs-adds { list-style: none; margin: var(--mv-4) 0 0; padding: 0; display: grid; gap: var(--mv-3); }
.mvs-adds li { padding: var(--mv-4); border: 1px solid var(--mvs-line); border-radius: 12px; }
.mvs-adds__h { margin: 0 0 var(--mv-1); font-weight: 700; display: flex; gap: var(--mv-2); align-items: baseline; flex-wrap: wrap; }
.mvs-adds__h span { font-weight: 400; font-size: .78rem; color: var(--mvs-ink-3); }
.mvs-adds__d { margin: 0; font-size: .9rem; color: var(--mvs-ink-2); }
.mvs-adds__s { margin: var(--mv-2) 0 0; font-size: .78rem; color: var(--mvs-ink-3); }

.mvs-credits ul { list-style: none; margin: var(--mv-3) 0; padding: 0; display: grid; gap: var(--mv-2); }
.mvs-credits li { display: flex; flex-wrap: wrap; gap: var(--mv-2); align-items: baseline; font-size: .88rem; }
.mvs-credits__lic { font-size: .78rem; color: var(--mvs-ink-3); }
.mvs-credits__note { font-size: .82rem; color: var(--mvs-ink-3); margin: 0; }

.mvs-blocked { margin-top: var(--mv-4); font-size: .86rem; color: var(--mvs-ink-3); }
.mvs-blocked summary { cursor: pointer; }
.mvs-blocked ul { margin: var(--mv-2) 0 0; }

.mvs-related { display: flex; flex-wrap: wrap; gap: var(--mv-2) var(--mv-4); margin: var(--mv-8) 0 0; font-size: .88rem; }

/* ============================================================
   10. מובייל
   ============================================================ */

@media ( max-width: 560px ) {
	.mvs-wrap { padding-inline: var(--mv-4); }
	.mvs-text { --mvs-measure: 100%; }
	.mvs-now { padding: var(--mv-5); }
	.mvs-bar__in { padding-inline: var(--mv-3); }
	.mvs-reader { padding-bottom: calc( var(--mv-bottomnav-h, 54px) + var(--mv-6) ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mvs-sheet::before,
	.mvs-sheet__panel { transition: none; }
	html { scroll-behavior: auto; }
}