@charset "utf-8";
@layer reset, vendor, tokens, base, layout, components, screens, utilities, overrides;
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.rtl.min.css") layer(vendor);
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css") layer(vendor);

/* ==== /css/lib/vendor.css ==== */


/*
	ספריות צד-שלישי — כל אחת בבקשה נפרדת משלה.

	⚠️ למה לא ב-layers.css (הקבוצה הקריטית): שם הן היו @import מתוך
	   ה-<style> המוטמע, כלומר שתי בקשות שחוסמות את הציור הראשון —
	   והספלאש אינו משתמש לא ב-Bootstrap ולא באייקון אחד. המשתמש חיכה
	   לרבע מגה בייט כדי לראות לוגו ופס התקדמות.

	⚠️ למה בכל זאת @import ולא <link> בראש העמוד: ל-<link> אין תכונה
	   שמשייכת לשכבת cascade. תגית <link> רגילה נכנסת כ-CSS **לא
	   משוכבת**, שגובר על כל שכבה — כלומר Bootstrap היה מנצח את
	   components ואת screens שלנו, וחוזרים למלחמות !important.
	   layer(vendor) הוא כל העניין, והוא קיים רק בתחביר של @import.

	   המחיר של @import — גילוי מאוחר — מנוטרל ע"י תגיות preload
	   ש-asset_builder פולט לראש העמוד, שנגזרות מהקובץ הזה עצמו.
	   כלומר ההורדה מתחילה מהבייט הראשון של ה-HTML, במקביל, ובזמן
	   שה-@import נפגש איתה היא כבר במטמון.

	   ⚠️ ה-preload הוא ללא crossorigin, וזה לא השמטה: preload עם
	      crossorigin מייצר בקשת CORS, ו-@import מייצר בקשה רגילה —
	      שתי רשומות מטמון שונות, כלומר הורדה כפולה במקום אפס.
*/






/* ==== /css/lib/components/buttons.css ==== */


/*
	button — מערכת הכפתורים הגנרית.
	מבנה אחד, סקין דרך --my_* בלבד. וריאנט חדש = הצבת משתנים.
	<button class="button button--primary">...</button>
*/

@layer components{

.button{
	--my_background_color: var(--color_white);
	--my_color: var(--text_color1);
	--my_border_color: transparent;
	--my_font_size: var(--font_size_base);
	--my_padding_block: 0.55em;
	--my_padding_inline: 1.4em;
	--my_border_radius: var(--border_radius_base);
	--my_box_shadow: var(--shadow_2);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	font-family: inherit;
	font-size: var(--my_font_size);
	font-weight: var(--font_weight_semi_bold);
	line-height: var(--line_height_loose);
	text-decoration: none;
	cursor: pointer;

	padding-block: var(--my_padding_block);
	padding-inline: var(--my_padding_inline);
	color: var(--my_color);
	background: var(--my_background_color);
	border: 1px solid var(--my_border_color);
	border-radius: var(--my_border_radius);
	box-shadow: var(--my_box_shadow);

	transition: scale 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.button:hover{
	scale: 1.03;
	box-shadow: var(--shadow_3);
}

.button:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

.button:active{
	scale: 0.98;
}

.button__icon{
	font-size: 1.1em;
	line-height: 1;
}

/* --- מצבים --- */

.button:disabled,
.button.is_disabled{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1_brightest);
	--my_box_shadow: none;
	cursor: not-allowed;
	pointer-events: none;
	scale: 1;
}

/*
	מצב טעינה — נשלט ע"י api.setButtonLoading (js/api.js) על כל פעולה
	שעוברת בשכבת ה-api. הספינר נוסף כפסאודו-אלמנט כדי שלא נדרש שינוי
	ב-HTML של אף כפתור קיים.
*/
.button.is_loading{
	pointer-events: none;
	opacity: 0.72;
	position: relative;
}

.button.is_loading::after{
	content: "";
	inline-size: 1.05em;
	block-size: 1.05em;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: buttonSpinner 0.72s linear infinite;
	flex-shrink: 0;
}

@keyframes buttonSpinner{
	to{ rotate: 360deg; }
}

/* אנימציה מכובדת להעדפת מערכת — ספינר קופא, אך המצב עדיין מסומן חזותית */
@media (prefers-reduced-motion: reduce){
	.button.is_loading::after{
		animation: none;
		opacity: 0.5;
	}
}

/* --- וריאנטים סמנטיים --- */

.button--primary{
	--my_background_color: var(--color_primary);
	--my_color: var(--color_white);
}

.button--secondary{
	--my_background_color: var(--color_secondary);
	--my_color: var(--color_white);
}

.button--success{
	--my_background_color: var(--color_success);
	--my_color: var(--color_white);
}

.button--info{
	--my_background_color: var(--color_info);
	--my_color: var(--color_white);
}

.button--warning{
	--my_background_color: var(--color_warning);
	--my_color: var(--color_warning_deeper);
}

.button--error,
.button--destructive{
	--my_background_color: var(--color_danger);
	--my_color: var(--color_white);
}

/* --- משפחת outline --- */

.button--outline{
	--my_background_color: transparent;
	--my_border_color: currentColor;
	--my_box_shadow: var(--shadow_1);
}

.button--outline.button--primary{ --my_color: var(--color_primary_deep); }
.button--outline.button--secondary{ --my_color: var(--color_warning_deep); }
.button--outline.button--error{ --my_color: var(--color_danger); }

/* --- רך / קישור טקסטואלי --- */

.button--soft{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_primary_deep);
	--my_box_shadow: var(--shadow_1);
}

.button--link{
	--my_background_color: transparent;
	--my_box_shadow: none;
	--my_padding_block: 0.2em;
	--my_padding_inline: 0.2em;
	text-decoration: underline dotted;
}

/* --- גדלים --- */

.button--narrow{
	--my_font_size: var(--font_size_small);
	--my_padding_block: 0.35em;
	--my_padding_inline: 0.9em;
}

.button--large{
	--my_font_size: var(--font_size_large);
	--my_padding_block: 0.7em;
	--my_padding_inline: 1.8em;
}

/* --- עגול (אישור/ביטול/מחיקה) --- */

.button--round{
	--my_padding_block: 0;
	--my_padding_inline: 0;
	--my_border_radius: 100%;
	width: 2.8em;
	aspect-ratio: 1 / 1;
}

/* --- צף (FAB) --- */

.button--fab{
	--my_background_color: var(--color_primary);
	--my_color: var(--color_white);
	--my_border_radius: var(--border_radius_roundest);
	--my_box_shadow: var(--shadow_4);
	--my_font_size: var(--font_size_large);

	position: fixed;
	inset-block-end: calc( var(--space_7) + var(--space_2) );
	inset-inline-start: var(--space_3);
	z-index: 50;
}


/* --- like_burst: חלקיקים שמתפוצצים סביב כפתור "לייק" (likeBurst.js) --- */

.js_like_burst{
	position: relative;
	overflow: visible;
}

.js_like_burst.is_bursting{
	animation: likeBurstPulse 0.35s ease-out;
}

.like_burst__particles{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.like_burst__particle{
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	width: 6px;
	height: 6px;
	margin: -3px;
	border-radius: 100%;
	background: var(--color_danger);
	animation-name: likeBurstFly;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
	animation-fill-mode: forwards;
}

.like_burst__particle:nth-child(3n){ background: var(--color_warning); }
.like_burst__particle:nth-child(3n+1){ background: var(--color_secondary); }

@keyframes likeBurstPulse{
	0%{ scale: 1; }
	35%{ scale: 1.35; }
	100%{ scale: 1; }
}

@keyframes likeBurstFly{
	0%{ translate: 0 0; opacity: 1; scale: 1; }
	100%{ translate: var(--particle-x) var(--particle-y); opacity: 0; scale: 0.4; }
}


/* --- לייק — לב מלא אדום כשמסומן --- */

.button.is_liked{
	--my_color: var(--color_danger);
	--my_border_color: var(--color_danger);
}

.button.is_liked i{
	animation: likeBurstPulse 0.3s ease-out;
}

}

/*
	כפתור חסום ע"י validation.guard — נראה כמנוטרל אך **נשאר לחיץ**:
	הלחיצה פותחת מודאל שמפרט מה חסר. ⚠️ בלי pointer-events:none,
	בניגוד ל-.is_disabled — שם ההבדל.
*/
.button.is_guard_blocked{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--text_color1_brightest);
	--my_box_shadow: none;
	cursor: help;
	scale: 1;
}


/* ==== /css/lib/components/fancy_button.css ==== */


/*
	fancy_button — כפתור בחירה ראשי.
	מבנה קבוע + סקין דרך משתני --my_* בלבד.
	וריאנטים: (ברירת מחדל = primary), secondary, success, info, warning,
	error/destructive, is_disabled.

	וריאנטים ספציפיים לדומיין (תלויים בטוקנים
	שמוגדרים רק ב-app/css/app/themes) יושבים ב-
	app/css/app/components/status_variants.css — ראו ההערה שם.
*/

@layer components{

.fancy_button{
	--my_color: var(--color_primary_deeper);
	--my_background_color: var(--color_white);
	--my_border_radius: var(--border_radius_base);
	--my_box_shadow: var(--box_shadow1);
	--my_accent_color: var(--color_primary);
	--my_icon: "\e545";

	display: grid;
	grid-template-columns: 88% 13%;
	align-items: center;
	width: 85%;
	padding: 4%;
	cursor: pointer;
	margin-block: 26px;
	margin-inline: auto;
	font-size: var(--font_size);
	text-decoration: none;

	border-radius: var(--my_border_radius);
	box-shadow: var(--my_box_shadow);
	background: var(--my_background_color);
	border-inline-end: 10px solid var(--my_accent_color);

	transition: scale 0.35s ease-in-out, border-inline-end-width 0.35s ease-in-out;
}

.fancy_button:hover{
	scale: 1.03;
	border-inline-end-width: 0px;
	background: var(--my_background_color);
}

.fancy_button::after{
	font-family: "FontAwesome";
	font-weight: 900;
	content: var(--my_icon);
	font-size: calc( var(--font_size) * 2 );
	text-decoration: none;

	border-radius: 100%;
	background: var(--my_accent_color);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	align-items: center;
	color: var(--color_white);
	display: flex;
	justify-content: center;
}

.fancy_button__text{
	display: flex;
	flex-direction: column;
	text-align: start;
	color: var(--text_color1_brighter);
}

.fancy_button__title{
	font-size: calc( var(--font_size) * 1.1 );
	font-weight: var(--font_weight_black);
	color: var(--my_color);
}

.fancy_button__description{
	font-size: calc( var(--font_size) * 1 );
	font-weight: var(--font_weight_thin);
}

/* --- variants --- */

.fancy_button--secondary{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_softer);
	--my_accent_color: var(--color_secondary);
}

.fancy_button--success{
	--my_color: var(--color_success_deep);
	--my_background_color: var(--color_success_softer);
	--my_accent_color: var(--color_success);
}

.fancy_button--info{
	--my_color: var(--color_info);
	--my_background_color: var(--color_primary_softer);
	--my_accent_color: var(--color_info);
}

.fancy_button--warning{
	--my_color: var(--color_warning_deeper);
	--my_background_color: var(--color_warning_soft);
	--my_accent_color: var(--color_warning_deep);
}

.fancy_button--error,
.fancy_button--destructive{
	--my_color: var(--color_danger_deep);
	--my_background_color: var(--color_danger_softer);
	--my_accent_color: var(--color_danger);
}

.fancy_button.is_disabled{
	--my_color: var(--text_color1_brightest);
	--my_background_color: var(--color_primary_softer);
	--my_accent_color: var(--text_color1_brightest);
	pointer-events: none;
}

}


/* ==== /css/lib/components/links.css ==== */


/* ===== links — משפחת הקישורים ===== */

@layer components{

.link{
	--my_color: var(--text_color1_brighter);
	color: var(--my_color);
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.link:hover{
	text-decoration-style: solid;
}

.link:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.link--content{
	--my_color: var(--color_primary_deep);
	text-decoration-style: solid;
}

.link--external::after{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f35d";
	font-size: 0.75em;
	margin-inline-start: 0.35em;
}

.link--action{
	--my_color: var(--color_primary_deep);
	text-decoration: none;
	font-weight: var(--font_weight_semi_bold);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.link--back{
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: var(--font_weight_semi_bold);
}

.link--back::before{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f061"; /* חץ ימינה = "אחורה" ב-RTL */
}

.link--legal{
	font-size: var(--font_size_small);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.link--destructive{
	--my_color: var(--color_danger);
}

.link.is_disabled{
	--my_color: var(--text_color1_brightest);
	pointer-events: none;
	text-decoration: none;
}

}


/* ==== /css/lib/components/forms.css ==== */


/* ===== forms — שדות קלט, טפסים ומצביהם ===== */

@layer components{

#root > #screens > .screen > .cotnent > form{
	text-align: center;
}

.field{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
	margin-block-end: var(--space_2);
}

.field__label{
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1_bright);
}

.field__input{
	--my_box_shadow: var(--box_shadow1);
	--my_accent_color: var(--color_primary_deepest);
	border: 2px solid var(--color_primary);
	color: var(--color_primary);
	font-weight: var(--font_weight_bold);

	font-family: inherit;
	font-size: var(--font_size_base);
	background: var(--color_white);
	border-radius: var(--border_radius_base);
	padding-block: 0.55em;
	padding-inline: 0.8em;
	width: 100%;
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	box-shadow: var(--my_box_shadow);
}

.field__input::placeholder{
	color: var(--text_color1_brightest);
}

.field__input:focus-visible{
	outline: none;
	border-color: var(--color_primary);
	box-shadow: 0 0 0 3px var(--color_primary_soft);
}

.field__hint{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.field__error{
	display: none;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	color: var(--color_error);
}

/* מצב שגיאה: חיווי ויזואלי + מילולי (חובת אפיון 3.2.5.2) */
.field.is_invalid .field__input{
	border-color: var(--color_error);
	box-shadow: 0 0 0 3px rgb(238 68 51 / 0.15);
}

.field.is_invalid .field__error{
	display: block;
}

.field.is_disabled .field__label{
	color: var(--text_color1_brightest);
}

.field__input:disabled{
	background: var(--color_primary_softer);
	color: var(--text_color1_brightest);
	cursor: not-allowed;
}

/* --- שדה טלפון מפוצל: קידומת מימין, מספר משמאל, ספרות LTR --- */

.phone_field{
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: var(--space_1);
	direction: ltr;
}

.phone_field .field__input{
	direction: ltr;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --- OTP: 6 משבצות --- */

.otp_field{
	direction: ltr;
	display: flex;
	gap: var(--space_1);
	justify-content: center;
}

.otp_field__digit{
	width: 2.4em;
	aspect-ratio: 3 / 4;
	text-align: center;
	font-size: var(--font_size_large);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
	color: var(--text_color1);
	background: var(--color_white);
	border: 1px solid var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.otp_field__digit:focus-visible{
	outline: none;
	border-color: var(--color_primary);
	box-shadow: 0 0 0 3px var(--color_primary_soft);
}

.otp_field.is_invalid .otp_field__digit{
	border-color: var(--color_error);
}

/* --- טיימר שליחה חוזרת --- */

.resend_timer{
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.resend_timer__count{
	direction: ltr;
	font-variant-numeric: tabular-nums;
	font-weight: var(--font_weight_bold);
}

/* --- שדה סכום ₪ --- */

.amount_field{
	position: relative;
}

.amount_field .field__input{
	direction: ltr;
	text-align: end;
	padding-inline-end: 2em;
	font-variant-numeric: tabular-nums;
}

.amount_field::after{
	content: "₪";
	position: absolute;
	inset-inline-end: 0.8em;
	inset-block-start: 50%;
	translate: 0 -50%;
	color: var(--text_color1_brighter);
	pointer-events: none;
}

/* --- מתג (Toggle) --- */

.toggle{
	display: inline-flex;
	align-items: center;
	gap: var(--space_1);
	cursor: pointer;
}

.toggle__input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.toggle__track{
	width: 3em;
	height: 1.6em;
	border-radius: var(--border_radius_roundest);
	background: var(--text_color1_brightest);
	position: relative;
	transition: background-color 0.2s ease-in-out;
}

.toggle__track::after{
	content: "";
	position: absolute;
	inset-block-start: 0.15em;
	inset-inline-start: 0.15em;
	width: 1.3em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_white);
	box-shadow: var(--shadow_1);
	transition: translate 0.2s ease-in-out;
}

.toggle__input:checked + .toggle__track{
	background: var(--my_checked_color, var(--color_success));
}

/* --- צבעי Toggle --- */
.toggle--primary{ --my_checked_color: var(--color_primary); }
.toggle--secondary{ --my_checked_color: var(--color_secondary); }
.toggle--success{ --my_checked_color: var(--color_success); }
.toggle--info{ --my_checked_color: var(--color_info); }
.toggle--warning{ --my_checked_color: var(--color_warning); }
.toggle--error{ --my_checked_color: var(--color_danger); }

.toggle__input:checked + .toggle__track::after{
	translate: calc( -1 * 1.4em ) 0;
}

.toggle__input:focus-visible + .toggle__track{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- checkbox / radio --- */

.check_field{
	display: flex;
	align-items: flex-start;
	gap: var(--space_1);
	cursor: pointer;
	text-align: start;
	font-size: var(--font_size_small);
}

.check_field input{
	inline-size: 1.2em;
	block-size: 1.2em;
	margin-block-start: 0.15em;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* --- תיבת טקסט עם מונה --- */

.textarea_field .field__input{
	min-height: 6em;
	resize: vertical;
	line-height: var(--line_height_loose);
}

.textarea_field .field__counter{
	align-self: flex-end;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.textarea_field.is_over_limit .field__counter{
	color: var(--color_error);
	font-weight: var(--font_weight_bold);
}

.textarea_field.is_over_limit .field__input{
	border-color: var(--color_error);
}

/* --- העלאת מסמך: 4 מצבים --- */

.upload_field{
	display: flex;
	align-items: center;
	gap: var(--space_2);
	padding: var(--space_2);
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	text-align: start;
	transition: border-color 0.2s ease-in-out;
}

.upload_field__icon{
	font-size: var(--font_size_largest);
	color: var(--color_primary);
}

.upload_field__name{
	font-weight: var(--font_weight_semi_bold);
	flex: 1;
}

.upload_field__status{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.upload_field.is_uploading{
	border-style: solid;
	border-color: var(--color_info);
}

.upload_field.is_uploaded{
	border-style: solid;
	border-color: var(--color_success);
}

.upload_field.is_uploaded .upload_field__icon{
	color: var(--color_success);
}

.upload_field.is_invalid{
	border-style: solid;
	border-color: var(--color_error);
}

.upload_field.is_invalid .upload_field__icon{
	color: var(--color_error);
}


/* --- משטח לכידה: חתימה / צילום נוכחות --- */

.capture_box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space_1);
	min-height: 150px;
	width: 100%;
	border: 2px dashed var(--text_color1_brightest);
	border-radius: var(--border_radius_base);
	background: var(--color_white);
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
	cursor: pointer;
	transition: border-color 0.2s ease-in-out;
}

.capture_box:hover{
	border-color: var(--color_primary);
}

.capture_box__icon{
	font-size: calc( var(--font_size) * 1.8 );
	color: var(--color_primary);
	line-height: 1;
}


/* --- choice_list: רשימת בחירה (radio/checkbox) בכרטיס --- */

.choice_list{
	display: flex;
	flex-direction: column;
}

.choice_list--boxed{
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_round);
	padding: var(--space_1);
}

.choice_list__option{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	padding: var(--space_2);
	cursor: pointer;
	font-size: var(--font_size_small);
	line-height: var(--line_height_loose);
	text-align: start;
	border-radius: var(--border_radius_base);
}

.choice_list__option input{
	inline-size: 1.4em;
	block-size: 1.4em;
	accent-color: var(--color_primary);
	flex-shrink: 0;
}

/* וריאנט כרטיסים נפרדים (בחירת אזורי עבודה) */
.choice_list--cards{
	gap: var(--space_1);
}

.choice_list--cards .choice_list__option{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_1);
}

.choice_list--cards .choice_list__option:has(input:checked){
	background: var(--color_success_softer);
	box-shadow: 0 0 0 2px var(--color_success_soft);
}

/* --- אינדיקטור בחירה מונפש (רדיו/צ'קבוקס בעיצוב אחיד עם check_animated) ---
   ה-input האמיתי נשאר בשקיפות מלאה מעל/לפני האינדיקטור לנגישות מלאה. */

.choice_list__option input.js_choice_input{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.choice_indicator{
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
}

.choice_indicator__ring{
	fill: var(--color_white);
	stroke: var(--text_color1_brightest);
	stroke-width: 1.5;
	transition: stroke 0.2s ease-in-out;
	transform-origin: center;
	transform-box: fill-box;
}

/* רדיו: נקודה פנימית שקופצת פנימה בבחירה */
.choice_indicator__dot{
	fill: var(--color_primary);
	scale: 0;
	transform-origin: center;
	transform-box: fill-box;
	transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot קליל — אותה משפחת תנועה כמו check_animated */
}

/* צ'קבוקס בכרטיס: וי מצויר (כמו check_animated, בגרסת badge קטנה) */
.choice_indicator__mark{
	fill: none;
	stroke: var(--color_white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__ring{
	stroke: var(--color_primary);
	animation: checkAnimatedPop 0.3s ease-out;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__dot{
	scale: 1;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__mark{
	stroke-dashoffset: 0;
}

.js_choice_input:checked ~ .choice_indicator .choice_indicator__ring--checkbox{
	fill: var(--color_success);
	stroke: var(--color_success);
}

.js_choice_input:focus-visible ~ .choice_indicator .choice_indicator__ring{
	stroke: var(--color_primary);
	stroke-width: 2.5;
}

/* --- capture_box: וריאנטים --- */

/* עיגול הוספת תמונה (אונבורדינג שלב 3) */
.capture_box--round{
	width: min(190px, 52dvw);
	min-height: 0;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	margin-inline: auto;
	background: var(--color_primary_softer);
	border-color: var(--color_primary);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_semi_bold);
}

/* משטח חתימה גבוה (חתימה על הסכם) */
.capture_box--tall{
	min-height: 220px;
	align-items: center;
	justify-content: flex-start;
	padding-block-start: var(--space_3);
	border-style: solid;
	border-color: var(--color_primary_softer);
	color: var(--text_color1_brightest);
}


/* --- signature pad: canvas בתוך capture_box --- */

.js_signature_pad{
	position: relative;
	touch-action: none;
	cursor: crosshair;
}

.js_signature_pad .signature_pad__canvas{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.js_signature_pad .signature_pad__placeholder{
	pointer-events: none;
	transition: opacity 0.25s ease-in-out;
}

.js_signature_pad.is_signed .signature_pad__placeholder{
	opacity: 0;
}


/* --- capture_box: מצב עם תמונה שנבחרה (client-side, ראו profilePhoto.js) --- */

.capture_box.has_photo{
	border-style: solid;
	border-color: var(--color_primary_soft);
	color: transparent;
}


/* --- star_rating_input: דירוג כוכבים אינטראקטיבי (לחיצה לבחירה) --- */

.star_rating_input{
	display: flex;
	justify-content: center;
	gap: 6px;
}

.star_rating_input__star{
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	font-size: var(--font_size_largest);
	color: var(--color_primary_softer);
	transition: color 0.15s ease-in-out, scale 0.15s ease-in-out;
}

.star_rating_input__star.is_filled{
	color: var(--color_warning);
}

.star_rating_input__star.is_hover_preview{
	color: var(--color_warning_soft);
}

.star_rating_input__star:active{
	scale: 1.2;
}

.star_rating_input__star:focus-visible{
	outline: 2px solid var(--color_primary);
	outline-offset: 2px;
	border-radius: 4px;
}

}

/*
	רשימת הצעות להשלמת כתובת. ⚠️ position:absolute מעל השדה —
	ההורה (.field) חייב position:relative, אחרת הרשימה תיצמד
	לראש המסך ותכסה תוכן אחר.
*/
.suggestion_list{
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 20;
	flex-direction: column;
	/*
		⚠️ שלושת הטוקנים כאן היו --surface_color1, --border_color1
		   ו---shadow_lg — שלושתם אינם מוגדרים בשום מקום בפרויקט.
		   טוקן שאינו קיים נכשל בשקט: הכלל פשוט לא חל, ולכן
		   רשימת ההצעות של הכתובת הופיעה בלי רקע, בלי מסגרת
		   ובלי צל — שקופה מעל התוכן שמתחתיה.

		   נמצא ב-v119 באודיט של כלל קבצי ה-CSS, אחרי ש---radius_md
		   באותו בלוק כבר התגלה. אותה שגיאה, אותו מחבר, אותו קטע.
	*/
	background-color: var(--color_white);
	border: 1px solid var(--color_primary_soft);
	border-radius: var(--border_radius_base);
	box-shadow: var(--shadow_3);
	overflow: hidden;
	max-block-size: 260px;
	overflow-y: auto;
}

.suggestion_list__item{
	padding: var(--space_2);
	text-align: start;
	background: none;
	border: none;
	border-block-end: 1px solid var(--color_primary_soft);
	cursor: pointer;
	font-size: var(--font_size_smaller);
	color: var(--text_color1);
}

.suggestion_list__item:hover,
.suggestion_list__item:focus-visible{
	background-color: var(--color_primary_softer);
}

/* ייחוס — דרישה במדיניות השימוש של OpenStreetMap */
.suggestion_list__credit{
	padding: var(--space_1) var(--space_2);
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
}

/*
	שדה המלכודת של ה-honeypot (core/plugins/honeypot).

	⚠️ לא display:none ולא hidden: בוטים רבים מדלגים על שדות שהוסתרו
	   כך, וזו בדיוק המלכודת שלא תיסגר. הסתרה חזותית בלבד — השדה
	   קיים ב-DOM, "נראה" לבוט, ובלתי נגיש לאדם: מחוץ למסך, שקוף,
	   בלי גובה ובלי אירועי מצביע.

	⚠️ בלי הכלל הזה השדה מוצג כשדה טקסט רגיל באמצע הטופס. הוא היה
	   חסר עד v110 — ה-plugin נכתב, הכיתה שלו לא.
*/
.honeypot_field{
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}


/* ==== /css/lib/components/check_animated.css ==== */


/*
	check_animated — תיבת סימון עם וי מצויר באנימציה (השראה: SVG checkbox).
	input[type=checkbox] אמיתי מתחת (נגיש, עובד עם מקלדת/קורא מסך) +
	SVG עיצובי מעליו. הציור מבוסס transition על stroke-dashoffset —
	לא @keyframes — כדי שיתחדש נכון בכל סימון/ביטול, בלי טריקים.
*/

@layer components{

.check_animated{
	display: flex;
	align-items: flex-start;
	gap: var(--space_1);
	cursor: pointer;
	text-align: start;
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
}

.check_animated input[type="checkbox"]{
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.check_animated__box{
	--my_size: 22px;
	flex-shrink: 0;
	width: var(--my_size);
	height: var(--my_size);
	margin-block-start: 1px;
}

.check_animated__circle{
	fill: var(--color_white);
	stroke: var(--text_color1_brightest);
	stroke-width: 1.5;
	transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
	transform-origin: center;
	transform-box: fill-box;
}

.check_animated__mark{
	fill: none;
	stroke: var(--color_white);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s ease-out 0.05s;
}

/* --- מצב מסומן: המעגל "קופץ" קלות והוי נצבע --- */

.check_animated input:checked ~ .check_animated__box .check_animated__circle{
	fill: var(--color_primary);
	stroke: var(--color_primary);
	animation: checkAnimatedPop 0.3s ease-out;
}

.check_animated input:checked ~ .check_animated__box .check_animated__mark{
	stroke-dashoffset: 0;
}

.check_animated input:focus-visible ~ .check_animated__box .check_animated__circle{
	stroke: var(--color_primary);
	stroke-width: 2.5;
}

@keyframes checkAnimatedPop{
	0%{ scale: 1; }
	40%{ scale: 1.15; }
	100%{ scale: 1; }
}

}


/* ==== /css/lib/components/tags.css ==== */


/* ===== tags — תגיות, צ'יפים והודעות מצב ===== */

@layer components{

.tag{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_primary_deep);

	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_semi_bold);
	line-height: 1;
	padding-block: 0.45em;
	padding-inline: 0.9em;
	border-radius: var(--border_radius_roundest);
	color: var(--my_color);
	background: var(--my_background_color);
	white-space: nowrap;
}

.tag--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.tag--info{ --my_background_color: var(--color_primary_soft); --my_color: var(--color_info); }
.tag--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.tag--error{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }
.tag--neutral{ --my_background_color: #EBEFF2; --my_color: var(--text_color1_brighter); }

/* --- צ'יפ סינון --- */

.chip{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--font_size_small);
	padding-block: 0.4em;
	padding-inline: 1em;
	border-radius: var(--border_radius_roundest);
	border: 1px solid var(--text_color1_brightest);
	background: var(--color_white);
	color: var(--text_color1_bright);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.chip:hover{
	border-color: var(--color_primary);
}

.chip.is_selected{
	background: var(--color_primary);
	border-color: var(--color_primary);
	color: var(--color_white);
	font-weight: var(--font_weight_semi_bold);
}

.chip:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

/* --- Badge: נקודה / מספר --- */

.badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding-inline: 0.4em;
	border-radius: var(--border_radius_roundest);
	background: var(--color_danger);
	color: var(--color_white);
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.badge--dot{
	min-width: 0.7em;
	width: 0.7em;
	height: 0.7em;
	padding: 0;
}

/* --- הודעת מצב (4 וריאנטים) --- */

.status_message{
	--my_background_color: var(--color_primary_softer);
	--my_color: var(--color_info);

	display: flex;
	gap: var(--space_1);
	align-items: flex-start;
	text-align: start;
	padding: var(--space_2);
	border-radius: var(--border_radius_base);
	background: var(--my_background_color);
	border-inline-start: 4px solid var(--my_color);
}

.status_message__icon{
	color: var(--my_color);
	font-size: var(--font_size_large);
	line-height: 1;
}

.status_message__title{
	display: block;
	font-weight: var(--font_weight_bold);
	color: var(--my_color);
	margin-block-end: 2px;
}

.status_message__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_bright);
	line-height: var(--line_height_loose);
}

.status_message--success{ --my_background_color: var(--color_success_soft); --my_color: var(--color_success); }
.status_message--warning{ --my_background_color: var(--color_warning_soft); --my_color: var(--color_warning_deep); }
.status_message--error{ --my_background_color: var(--color_danger_soft); --my_color: var(--color_danger); }

}


/* ==== /css/lib/components/cards.css ==== */


/* ===== cards — כרטיסים: בסיס, כרטיס ישות, KPI ===== */

@layer components{

.card{
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_2);
	padding: var(--space_2);
	text-align: start;
}

/* --- כרטיס KPI --- */

.kpi_card{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	min-width: 110px;
}

.kpi_card__value{
	font-size: var(--font_size_largest);
	font-weight: var(--font_weight_black);
	color: var(--color_primary_deep);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.kpi_card__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}


/* --- spec_list: שורות תווית/ערך (פרטי משמרת) --- */

.spec_list{
	display: flex;
	flex-direction: column;
}

.spec_list__row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space_2);
	padding-block: 9px;
	border-block-end: 1px solid var(--color_primary_softer);
}

.spec_list__row:last-child{
	border-block-end: 0;
}

.spec_list__label{
	color: var(--text_color1_brighter);
	font-size: var(--font_size_small);
}

.spec_list__value{
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
	text-align: end;
}

.spec_list__value.is_highlight{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_black);
	direction: ltr;
	unicode-bidi: isolate;
}

/* --- doc_card: מסמך לשיתוף/העלאה --- */

.doc_card{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

.doc_card__head{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.doc_card__icon{
	color: var(--color_primary_deep);
	font-size: var(--font_size_larger);
	width: 1.3em;
	text-align: center;
	flex-shrink: 0;
}

.doc_card--required .doc_card__icon{
	color: var(--color_danger);
}

.doc_card__title{
	font-weight: var(--font_weight_bold);
	flex: 1;
}

.doc_card__subtitle{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brightest);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: end;
}

.doc_card .capture_box{
	min-height: 90px;
}

/* --- contact_card: איש קשר במקום --- */

.contact_card{
	display: flex;
	align-items: center;
	gap: var(--space_1);
}

.contact_card__info{
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: start;
}

.contact_card__role{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.contact_card__name{
	font-weight: var(--font_weight_bold);
	font-size: var(--font_size_large);
}

.contact_card__actions{
	display: flex;
	gap: var(--space_1);
}


/* תגיות מרובות בכותרת כרטיס */
/* --- rating: כוכבים + ממוצע --- */

.rating{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.rating__stars{
	color: var(--color_warning);
	letter-spacing: 1px;
}

.rating__value{
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

/* --- gallery: תמונה ראשית + כפתור "+N" --- */

.gallery_trigger{
	position: absolute;
	inset-inline-start: var(--space_1);
	inset-block-end: var(--space_1);
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgb(7 61 90 / 0.55);
	color: var(--color_white);
	border: none;
	border-radius: var(--border_radius_base);
	padding: 0.4em 0.8em;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	backdrop-filter: blur(2px);
}

.gallery_strip{
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: 4px;
}

.gallery_strip__item{
	flex-shrink: 0;
	width: 96px;
	height: 72px;
	border-radius: var(--border_radius_base);
	background-size: cover;
	background-position: center;
	scroll-snap-align: start;
}

/* --- review: חוות דעת בודדת --- */

.review{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--space_1);
	border-block-end: 1px solid var(--color_primary_softer);
}

.review:last-child{ border-block-end: 0; }

.review__head{
	display: flex;
	align-items: center;
	gap: 8px;
}

.review__author{
	font-weight: var(--font_weight_semi_bold);
	font-size: var(--font_size_small);
}

.review__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loose);
}

/* --- highlight_row: הדגשת שדה קריטי (שכר/שעות/נסיעות) --- */

.highlight_row{
	display: flex;
	align-items: center;
	gap: var(--space_1);
	padding: var(--space_1) var(--space_2);
	background: var(--color_primary_softer);
	border-radius: var(--border_radius_base);
}

.highlight_row__icon{
	color: var(--color_primary_deep);
	font-size: var(--font_size_large);
	width: 1.3em;
	text-align: center;
}

.highlight_row__label{
	flex: 1;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
}

.highlight_row__value{
	font-weight: var(--font_weight_black);
	font-size: var(--font_size_large);
	color: var(--color_primary_deep);
	direction: ltr;
	unicode-bidi: isolate;
}


/* --- הערת שוליים משפטית תחת "שכר משוער" --- */

/* --- compare_table: השוואת מועמדים, עמודה לכל מועמד --- */

.compare_table{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.compare_table__row{
	display: grid;
	grid-template-columns: 90px repeat(auto-fit, minmax(80px, 1fr));
	align-items: center;
	gap: 4px;
	padding-block: 8px;
	border-block-end: 1px solid var(--color_primary_softer);
}

.compare_table__row--header{
	border-block-end-width: 2px;
	border-block-end-color: var(--color_primary_soft);
}

.compare_table__label{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.compare_table__col{
	text-align: center;
	font-size: var(--font_size_small);
	font-weight: var(--font_weight_semi_bold);
	color: var(--text_color1);
}

.compare_table__col--header{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--font_size_smallest);
	font-weight: var(--font_weight_semi_bold);
}

.compare_table__col.is_best{
	color: var(--color_success_deep);
	background: var(--color_success_softer);
	border-radius: var(--border_radius_base);
	padding-block: 2px;
}

}


/* ==== /css/lib/components/avatars.css ==== */


/* ===== avatars — תמונות פרופיל, 6 גדלים, מצבים וערימה ===== */

@layer components{

.avatar{
	--my_size: 40px;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--my_size);
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_primary_soft);
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
	font-size: calc( var(--my_size) * 0.38 );
	overflow: visible;
	flex-shrink: 0;
}

.avatar img,
.avatar .avatar__image{
	width: 100%;
	height: 100%;
	border-radius: 100%;
	object-fit: cover;
}

/* Fallback אותיות ראשונות — פשוט טקסט בתוך האלמנט */

/* --- 6 גדלים --- */
.avatar--xs{ --my_size: 24px; }
.avatar--sm{ --my_size: 32px; }
.avatar--md{ --my_size: 40px; }
.avatar--lg{ --my_size: 56px; }
.avatar--xl{ --my_size: 72px; }
.avatar--xxl{ --my_size: 96px; }

/* --- חיווי אונליין/אופליין --- */

.avatar__presence{
	position: absolute;
	inset-block-end: 2%;
	inset-inline-end: 2%;
	width: 26%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	border: 2px solid var(--color_white);
	background: var(--text_color1_brightest);
}

.avatar.is_online .avatar__presence{
	background: var(--color_success);
}

.avatar.is_offline .avatar__presence{
	background: var(--text_color1_brightest);
}

/* --- ערימת מועמדים --- */

.avatar_stack{
	display: inline-flex;
	align-items: center;
}

.avatar_stack .avatar{
	border: 2px solid var(--color_white);
}

.avatar_stack .avatar:not(:first-child){
	margin-inline-start: calc( var(--my_size, 40px) * -0.35 );
}

.avatar_stack__more{
	margin-inline-start: 0.5em;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	font-weight: var(--font_weight_semi_bold);
}

/* --- פס שלמות פרופיל --- */

.profile_completeness{
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: start;
}

.profile_completeness__label{
	display: flex;
	justify-content: space-between;
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

.profile_completeness__track{
	height: 8px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
	overflow: hidden;
}

.profile_completeness__value{
	--my_progress: 50%;
	height: 100%;
	width: var(--my_progress);
	border-radius: inherit;
	background: linear-gradient(90deg, var(--color_primary), var(--color_primary_deep));
	transition: width 0.4s ease-in-out;
}


/* --- מצב עם תמונת פרופיל שנבחרה (client-side, ראו profilePhoto.js) --- */

.avatar.has_photo{
	color: transparent;
}

}


/* ==== /css/lib/components/overlays.css ==== */


/* ===== overlays — מודאל במבנה קבוע, Bottom sheet, Toast ===== */

@layer components{

/* --- מודאל: מבנה קבוע (אפיון 3.3.14.1) --- */

.modal{
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space_2);
	background: rgb(7 61 90 / 0.45);
	backdrop-filter: blur(3px);
}

.modal.is_open{
	display: flex;
}

.modal__dialog{
	width: min(440px, 100%);
	background: var(--color_white);
	border-radius: var(--border_radius_round);
	box-shadow: var(--shadow_5);
	padding: var(--space_3);
	display: flex;
	flex-direction: column;
	gap: var(--space_2);
	text-align: center;
}

/* אייקון בתוך עיגול רך — לפי העיצוב */
.modal__icon{
	--my_icon_color: var(--color_primary);
	--my_icon_background: var(--color_primary_softer);

	width: 84px;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	font-size: calc( var(--font_size) * 1.8 );
	line-height: 1;
	color: var(--my_icon_color);
	background: var(--my_icon_background);
}

.modal--error .modal__icon{ --my_icon_color: var(--color_danger); --my_icon_background: var(--color_danger_softer); }
.modal--warning .modal__icon{ --my_icon_color: var(--color_warning_deep); --my_icon_background: var(--color_warning_soft); }
.modal--success .modal__icon{ --my_icon_color: var(--color_success); --my_icon_background: var(--color_success_softer); }

.modal__title{
	font-size: var(--font_size_larger);
	font-weight: var(--font_weight_bold);
	color: var(--text_color1);
}

.modal__text{
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
}

/* כפתורים ברוחב מלא, בערימה — לפי העיצוב */
.modal__actions{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
	margin-block-start: var(--space_1);
}

.modal__actions .button{
	width: 100%;
}

.modal.is_open .modal__dialog{
	animation: modalIn 0.22s ease-out;
}

/* תוכן גלילה (למשל תנאי שימוש) */
.modal__body{
	text-align: start;
	font-size: var(--font_size_small);
	color: var(--text_color1_brighter);
	line-height: var(--line_height_loosest);
	max-height: 40dvh;
	overflow: auto;
}

/* פעולה מרכזית גדולה (עיגול וואטסאפ במודאל מספר חסום) */
.modal__big_action{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-inline: auto;
	color: var(--color_success);
	font-weight: var(--font_weight_semi_bold);
	text-decoration: none;
}

.modal__big_action .modal__big_action_circle{
	width: 64px;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	background: var(--color_success);
	color: var(--color_white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc( var(--font_size) * 1.4 );
	box-shadow: var(--shadow_2);
}

.modal__big_action .modal__big_action_label{
	text-decoration: underline;
}

/* נעילת גלילת רקע כשמודאל פתוח */
body.has_open_modal{
	overflow: hidden;
}

/* --- Bottom sheet --- */

.bottom_sheet{
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 100;
	display: none;
	flex-direction: column;
	gap: var(--space_2);
	background: var(--color_white);
	border-start-start-radius: var(--border_radius_roundest);
	border-start-end-radius: var(--border_radius_roundest);
	box-shadow: var(--shadow_5);
	padding: var(--space_2) var(--space_3) var(--space_4);
}

.bottom_sheet.is_open{
	display: flex;
	animation: toastIn 0.25s ease-out;
}

.bottom_sheet{
	max-height: 82dvh;
	overflow: auto;
}

.bottom_sheet__handle{
	width: 44px;
	height: 5px;
	border-radius: var(--border_radius_roundest);
	background: var(--text_color1_brightest);
	margin-inline: auto;
}

.bottom_sheet__title{
	font-weight: var(--font_weight_bold);
	text-align: center;
}

.bottom_sheet__options{
	display: flex;
	flex-direction: column;
	gap: var(--space_1);
}

/* --- Toast / הודעת on-screen --- */

.toast{
	--my_color: var(--color_info);

	position: fixed;
	inset-block-end: var(--space_4);
	inset-inline: 0;
	margin-inline: auto;
	width: fit-content;
	max-width: min(90dvw, 420px);
	z-index: 110;

	display: none;
	align-items: center;
	gap: 0.6em;
	padding-block: 0.7em;
	padding-inline: 1.2em;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_deepest);
	color: var(--color_white);
	font-size: var(--font_size_small);
	box-shadow: var(--shadow_4);
}

.toast.is_open{
	display: flex;
	animation: toastIn 0.25s ease-out;
}

.toast.is_leaving{
	opacity: 0;
	translate: 0 10px;
	transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out;
}

/* מיכל ערימת Toasts — הפלאגין מייצר אותו */
.toast_container{
	position: fixed;
	inset-inline: 0;
	inset-block-end: var(--space_4);
	z-index: 110;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1);
	pointer-events: none;
}

.toast_container .toast{
	position: static;
	pointer-events: auto;
	cursor: pointer;
}

.toast__icon{
	color: var(--my_color);
	font-size: 1.2em;
	line-height: 1;
}

/*
	כפתור הפעולה בתוך ה-toast. ⚠️ ה-toast עצמו הוא cursor:pointer ונסגר
	בלחיצה, ולכן הכפתור חייב להיראות כמו יעד לחיצה נפרד — מסגרת וניגוד,
	ולא רק טקסט מודגש שנבלע בהודעה.
*/
.toast__action{
	flex-shrink: 0;
	margin-inline-start: 0.4em;
	padding-block: 0.25em;
	padding-inline: 0.9em;
	border: 1px solid var(--my_color);
	border-radius: var(--border_radius_roundest);
	background: transparent;
	color: var(--my_color);
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--font_weight_bold);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.toast__action:hover,
.toast__action:focus-visible{
	background: var(--my_color);
	color: var(--color_primary_deepest);
}

@media (prefers-reduced-motion: reduce){
	.toast__action{ transition: none; }
}

.toast--success{ --my_color: #7ADFA3; }
.toast--error{ --my_color: #FF8A7C; }
.toast--info{ --my_color: var(--color_primary_soft); }


/* --- photo_cropper: עריכת מיקום/זום לתמונת פרופיל (client-side, profilePhoto.js) --- */

.photo_cropper{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_2);
}

.photo_cropper__stage{
	position: relative;
	width: fit-content;
	margin-inline: auto;
	border-radius: var(--border_radius_base);
	overflow: hidden;
	background: var(--color_primary_softer);
	box-shadow: var(--shadow_2);
}

.photo_cropper__stage canvas{
	display: block;
}

/* טבעת מנחה: זה מה שיישאר גלוי בתוך האווטאר העגול */
.photo_cropper__ring{
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 100%;
	box-shadow: 0 0 0 999px rgb(255 255 255 / 0.75);
	border: 2px solid var(--color_white);
}

.photo_cropper__zoom_row{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--text_color1_brighter);
}

.photo_cropper__zoom_row input[type="range"]{
	flex: 1;
	accent-color: var(--color_primary);
}

.photo_cropper__hint{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
	text-align: center;
}


/* --- confetti_canvas: חגיגת סיום הרשמה (confetti.js) --- */

.confetti_canvas{
	position: fixed;
	inset: 0;
	width: 100dvw;
	height: 100dvh;
	z-index: 300; /* מעל מודאלים וטוסטים — זה הרגע להיות מעל הכל */
	pointer-events: none;
}

}


/* ==== /css/lib/components/navigation.css ==== */


/* ===== navigation — Tab bar, Header, Stepper ===== */

@layer components{

/* --- Tab bar מובייל (5 פריטים) --- */

.tab_bar{
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: flex;
	justify-content: space-around;
	background: var(--color_white);
	box-shadow: var(--shadow_4);
	padding-block: 6px;
	padding-block-end: max(6px, env(safe-area-inset-bottom));
}

.tab_bar__item{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brighter);
	text-decoration: none;
	padding-block: 4px;
	padding-inline: var(--space_1);
	border-radius: var(--border_radius_base);
	position: relative;
}

.tab_bar__item .icon{
	font-size: var(--font_size_large);
	line-height: 1;
}

.tab_bar__item.is_active{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.tab_bar__item .badge{
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 2px;
}

.tab_bar__item:focus-visible{
	outline: 3px solid var(--color_primary);
	outline-offset: -3px;
}

/* --- Header אפליקציה --- */

.app_header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	padding-block: var(--space_1);
	padding-inline: var(--space_2);
	background: var(--color_white);
	box-shadow: var(--shadow_1);
}

.app_header__actions{
	display: flex;
	align-items: center;
	gap: var(--space_2);
}

/* --- Stepper: חיווי שלבים --- */

.stepper{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.stepper__step{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: var(--font_size_smallest);
	color: var(--text_color1_brightest);
	min-width: 80px;
}

.stepper__dot{
	width: 2em;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color_primary_softer);
	color: var(--text_color1_brightest);
	font-weight: var(--font_weight_bold);
	font-variant-numeric: tabular-nums;
}

.stepper__connector{
	width: var(--space_5);
	height: 2px;
	background: var(--color_primary_soft);
	margin-block-end: 1.2em;
}

.stepper__step.is_done .stepper__dot{
	background: var(--color_success);
	color: var(--color_white);
}

.stepper__step.is_done{
	color: var(--color_success);
}

.stepper__step.is_active .stepper__dot{
	background: var(--color_primary);
	color: var(--color_white);
}

.stepper__step.is_active{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}


/* --- steps_progress: פס התקדמות שלבים (אונבורדינג) --- */

.steps_progress{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.steps_progress__meta{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: var(--font_size_small);
}

.steps_progress__current{
	color: var(--color_primary_deep);
	font-weight: var(--font_weight_bold);
}

.steps_progress__name{
	color: var(--text_color1_brightest);
}

.steps_progress__skip{
	color: var(--text_color1_brightest);
	text-decoration: underline dotted;
}

.steps_progress__track{
	display: flex;
	gap: 8px;
}

.steps_progress__segment{
	flex: 1;
	height: 9px;
	border-radius: var(--border_radius_roundest);
	background: var(--color_primary_softer);
}

.steps_progress__segment.is_done{
	background: var(--color_primary);
}

}


/* ==== /css/lib/components/top_progress.css ==== */


/*
	===== top_progress — פס טעינה עליון =====

	מנוהל ע"י core/plugins/topProgress.js, שמאזין לאירועי api_request_started/finished.
	יושב מעל הכל (כולל מודאלים) כי הוא חיווי מערכת, לא תוכן — אבל הוא דק
	ו-pointer-events: none, כך שאינו חוסם שום אינטראקציה.
*/

@layer components{

.top_progress{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 900;

	block-size: 3px;
	pointer-events: none;

	opacity: 0;
	transition: opacity 0.21s ease;
}

.top_progress.is_active{
	opacity: 1;
}

.top_progress__bar{
	block-size: 100%;
	inline-size: 0;

	/* RTL: הפס מתמלא מימין לשמאל, בכיוון הקריאה */
	margin-inline-start: auto;

	background: linear-gradient(
		to left,
		var(--color_primary),
		color-mix(in srgb, var(--color_primary) 55%, var(--color_info))
	);

	/* זוהר עדין בקצה המתקדם — מה שנותן את התחושה של "רץ" */
	box-shadow: 0 0 8px color-mix(in srgb, var(--color_primary) 70%, transparent);

	transition: inline-size 0.21s ease;
}

@media (prefers-reduced-motion: reduce){
	.top_progress__bar{
		transition: none;
		box-shadow: none;
	}
}

}


/* ==== /css/lib/components/skeleton.css ==== */


/*
	===== skeleton — מצבי טעינה ושגיאה של מסך =====

	מנוהל ע"י core/plugins/screenLoader.js, שמוסיף למסך אחת משלוש המחלקות:
	is_loading / is_loaded / is_failed.

	העיקרון: התוכן האמיתי כבר קיים ב-DOM (המסכים תמיד שם) — בזמן טעינה
	הוא מוחלף חזותית בשלד, ולא נמחק. כך אין קפיצת פריסה כשהתוכן מגיע.

	סימון תוכן שיוחלף בשלד: class="skeleton_target" על העוטף.
	אם לעוטף כבר יש מידה קבועה משלו (למשל תמונה עם height inline),
	מוסיפים גם class="skeleton_target--sized" כדי לא לכפות עליו
	min-block-size/min-inline-size גנריים.
*/

@layer components{

/* --- בזמן טעינה: התוכן נעלם, השלד מופיע --- */

.screen.is_loading .skeleton_target{
	visibility: hidden;
	position: relative;

	/*
		אזור שתוכנו נוקה הוא ריק, ובלי מידה מינימלית הוא קורס לגובה אפס
		והשלד לא נראה כלל. min-block-size מבטיח פס נראה; min-inline-size
		מטפל באלמנטים inline שרוחבם נגזר מהטקסט שנמחק.
	*/
	min-block-size: 1.05em;
	min-inline-size: 4em;
}

/*
	אווטארים כבר נושאים מידות משלהם — לא לכפות עליהם מינימום.
	.avatar הוא רכיב lib (avatars.css), ולכן מותר לשם כאן במפורש.

	לאלמנטים אחרים עם מידה קבועה משלהם (למשל תמונה עם height inline) —
	.skeleton_target--sized הוא הבלאי-אאוט הגנרי: כל אלמנט שכבר יודע
	את גודלו יכול לשאת אותו, בלי שהקובץ הזה יצטרך להכיר שם מחלקה
	ספציפי מ-css/app (מחלקה של ישות עסקית, שהייתה כאן קודם).
*/
.screen.is_loading .skeleton_target.avatar,
.screen.is_loading .skeleton_target.skeleton_target--sized{
	min-block-size: 0;
	min-inline-size: 0;
}

.screen.is_loading .skeleton_target::after{
	content: "";
	visibility: visible;

	position: absolute;
	inset: 0;

	border-radius: var(--border_radius_base, 8px);
	background: var(--skeleton_base);

	background-image: linear-gradient(
		to left,
		transparent 0%,
		var(--skeleton_shine) 50%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-repeat: no-repeat;

	animation: skeletonSweep 1.4s ease-in-out infinite;
}

:root{
	--skeleton_base: color-mix(in srgb, var(--text_color1) 12%, transparent);
	--skeleton_shine: color-mix(in srgb, var(--color_white, #fff) 55%, transparent);
}

/* RTL: הבזק נע מימין לשמאל, בכיוון הקריאה */
@keyframes skeletonSweep{
	from{ background-position: -110% 0; }
	to{ background-position: 110% 0; }
}

/* --- מצב שגיאה --- */

.screen_error{
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--space_1, 8px);

	padding: var(--space_2, 16px);
	text-align: center;
}

.screen.is_failed .screen_error{
	display: flex;
}

/* מצב שגיאה מסתיר גם את השלד וגם את התוכן החלקי */
.screen.is_failed .skeleton_target{
	display: none;
}

.screen_error__icon{
	font-size: 1.9em;
	color: var(--color_warning);
}

.screen_error__title{
	font-weight: var(--font_weight_bold);
}

.screen_error__text{
	font-size: var(--font_size_smaller);
	color: var(--text_color1_brighter);
}

@media (prefers-reduced-motion: reduce){
	.screen.is_loading .skeleton_target::after{
		animation: none;
	}
}

}


/* ==== /css/lib/components/footer.css ==== */


/* ===== footer — קישורים משפטיים וקרדיטים ===== */

/*
	⚠️ powered_by והלוגו אינם כאן: הם עברו ל-powered_by.css.
	   הסיבה — מסך הספלאש מציג אותם, והקובץ הזה נטען ב-css_deferred.
	   ראו את הערת הכותרת שם.
*/

@layer components{

footer.full_policy_and_credits_footer{
	--my_font_size: calc( var(--font_size) * 0.87 );

	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	text-align: center;
	line-height: calc( var(--line_height) * 1.8 );
	color: var(--text_color1_brighter);
	font-weight: var(--font_weight_light);
	font-size: var(--my_font_size);
	margin-block: 10px;
}

footer.full_policy_and_credits_footer .policy{
	width: 100%;
}

footer.full_policy_and_credits_footer .legal_links{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5%;
}

footer.full_policy_and_credits_footer .legal_links a{
	display: inline-flex;
	align-items: center;
}

footer.full_policy_and_credits_footer .legal_links a::before{
	font-family: "FontAwesome";
	font-weight: 900;
	content: "";
	font-size: calc( var(--my_font_size) * 0.63 );
	padding-inline-end: 10px;
	text-decoration: none;
}

footer.full_policy_and_credits_footer .legal_links a.terms::before{
	content: "\f570";
}

footer.full_policy_and_credits_footer .legal_links a.privacy_policy::before{
	content: "\f52b";
}

footer.full_policy_and_credits_footer .legal_links a.accessibility_policy::before{
	content: "\f5ca";
}

footer.full_policy_and_credits_footer .powered_by{
	display: flex;
	justify-content: center;
}

}


/* ==== /css/app/components/pixel_kit.css ==== */

/* ===== pixel_kit — הסקין הרטרו של רכיבי ה-lib (תנ"ך המותג §6, §12) =====
	הרכיבים הגנריים (button, card, field, modal, toast, tag) נשארים ב-lib כמו
	שהם; כאן רק הצבת --my_* וביטול מעברים/רדיוסים. נטען אחרי lib באותה שכבה
	(components) ולכן גובר — בלי !important ובלי לערוך lib.
	כללים: border-radius 0 · transition none · צל מוצק · יעד מגע 44px · טקסט על זהב = דיו.
*/
@layer components{

/* --- כפתורים --- */
.button{
	--my_background_color: var(--color_ink);
	--my_color: var(--color_turquoise);
	--my_border_color: var(--color_turquoise);
	--my_border_radius: 0;
	--my_padding_block: 0.6em;
	--my_padding_inline: 1.2em;
	border-width: var(--border_pixel);
	font-family: var(--font_family_base);
	font-weight: var(--font_weight_black);
	font-size: calc( var(--font_size) * 1.1 );
	min-block-size: var(--touch_target);
	min-inline-size: var(--touch_target);
	transition: none;
	box-shadow: none;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
}

.button:hover:not(.is_disabled):not(:disabled){
	--my_background_color: var(--color_turquoise);
	--my_color: var(--color_ink);
	transform: none;
}

.button--primary{
	--my_background_color: var(--color_gold);
	--my_color: var(--color_ink);
	--my_border_color: var(--color_gold);
	box-shadow: var(--shadow_solid);
}

.button--primary:hover:not(.is_disabled):not(:disabled){
	--my_background_color: var(--color_gold);
	--my_color: var(--color_ink);
}

/* לחיצה — קפיצה אחת אל תוך הצל, בלי transition */
.button--primary:active:not(.is_disabled):not(:disabled){
	transform: translate(3px, 3px);
	box-shadow: var(--shadow_solid_pressed);
}

[dir="rtl"] .button--primary:active:not(.is_disabled):not(:disabled){
	transform: translate(3px, 3px);
}

.button--secondary{
	--my_background_color: var(--color_ink);
	--my_color: var(--color_turquoise);
	--my_border_color: var(--color_turquoise);
}

.button--danger{
	--my_background_color: var(--color_ink);
	--my_color: var(--color_pink);
	--my_border_color: var(--color_pink);
}

.button--danger:hover:not(.is_disabled):not(:disabled){
	--my_background_color: var(--color_pink);
	--my_color: var(--color_ink);
}

.button--ghost, .button--soft, .button--link{
	--my_background_color: transparent;
	--my_color: var(--color_turquoise);
	--my_border_color: transparent;
	box-shadow: none;
}

.button--link{ min-block-size: auto; padding-block: 0.2em; text-decoration: underline; }
.button--large{ font-size: calc( var(--font_size) * 1.2 ); padding-block: 0.8em; inline-size: 100%; }
.button--narrow{ padding-inline: 0.6em; }

.button.is_disabled, .button:disabled{
	--my_background_color: var(--color_panel);
	--my_color: var(--color_text_micro);
	--my_border_color: var(--color_frame);
	box-shadow: none;
	opacity: 1;
	cursor: not-allowed;
}

.button.is_loading{ position: relative; color: transparent; }
.button.is_loading::after{
	content: "";
	position: absolute;
	inset-block-start: calc(50% - 8px);
	inset-inline-start: calc(50% - 8px);
	inline-size: 16px;
	block-size: 16px;
	background: var(--color_ink);
	animation: kh_spin_steps 0.8s steps(4, end) infinite;
}

@keyframes kh_spin_steps{ to{ transform: rotate(360deg); } }

/* --- מיקוד: בולט, על רקע כהה (נגישות) --- */
.button:focus-visible, .field__input:focus-visible, .link:focus-visible, .tab_bar__item:focus-visible,
.pin_field__digit:focus-visible, .shape_key:focus-visible, [tabindex]:focus-visible{
	outline: 4px solid var(--color_turquoise);
	outline-offset: 3px;
	box-shadow: none;
}

/* --- כרטיסים --- */
.card{
	--my_background_color: var(--color_panel);
	--my_border_color: var(--color_frame);
	--my_border_radius: 0;
	--my_box_shadow: none;
	--my_padding: var(--space_4);
	border-width: 2px;
	border-style: solid;
	transition: none;
}

/* --- שדות --- */
.field__label{ color: var(--color_ivory); font-weight: var(--font_weight_bold); }

.field__input, .input, select.field__input, textarea.field__input{
	--my_background_color: var(--color_panel);
	--my_color: var(--color_ivory);
	--my_border_color: var(--color_frame);
	--my_border_radius: 0;
	background: var(--my_background_color);
	color: var(--my_color);
	border: var(--border_pixel) solid var(--my_border_color);
	border-radius: 0;
	min-block-size: var(--touch_target);
	font-family: var(--font_family_base);
	font-size: var(--font_size);
	transition: none;
	box-shadow: none;
}

.field__input:focus{ --my_border_color: var(--color_turquoise); }
.field.is_invalid .field__input{ --my_border_color: var(--color_pink); background: var(--color_frame_error); }
.field__error{ color: var(--color_pink); font-weight: var(--font_weight_bold); }
.field__input::placeholder{ color: var(--color_text_micro); opacity: 1; }

/* --- תגיות --- */
.tag, .chip, .badge{
	--my_background_color: var(--color_ink);
	--my_color: var(--color_ivory);
	--my_border_color: var(--color_frame);
	border: 2px solid var(--my_border_color);
	border-radius: 0;
	font-weight: var(--font_weight_bold);
}

.tag--success{ --my_border_color: var(--color_lime); --my_color: var(--color_lime); }
.tag--warning{ --my_border_color: var(--color_gold); --my_color: var(--color_gold); }
.tag--error{ --my_border_color: var(--color_pink); --my_color: var(--color_pink); }
.tag--info{ --my_border_color: var(--color_turquoise); --my_color: var(--color_turquoise); }

/* --- מודאלים וטוסטים --- */
.modal{ --my_border_radius: 0; }
.modal__dialog, .modal__content{
	background: var(--color_panel);
	color: var(--color_ivory);
	border: var(--border_pixel) solid var(--color_frame);
	border-radius: 0;
	box-shadow: var(--shadow_solid);
}

.modal__title{ color: var(--color_gold); }

.toast{
	--my_background_color: var(--color_panel);
	--my_color: var(--color_ivory);
	background: var(--color_panel);
	color: var(--color_ivory);
	border: var(--border_pixel) solid var(--color_turquoise);
	border-radius: 0;
	box-shadow: 4px 4px 0 0 var(--color_pink);
	font-weight: var(--font_weight_bold);
	transition: none;
}

.toast--success{ border-color: var(--color_lime); }
.toast--error{ border-color: var(--color_pink); }

/* --- ניווט תחתון --- */
.tab_bar{
	background: var(--color_ink);
	border-block-start: var(--border_pixel) solid var(--color_frame);
	box-shadow: none;
	border-radius: 0;
}

.tab_bar__item{ color: var(--color_text_secondary); transition: none; min-block-size: var(--touch_target); }
.tab_bar__item.is_active{ color: var(--color_gold); }

/* --- קישורים --- */
.link{ color: var(--color_turquoise); text-decoration: underline; text-underline-offset: 3px; transition: none; }
.link--back::before{ content: "→ "; }

/* --- שלד --- */
.is_loading .skeleton_target{ background: var(--color_frame); border-radius: 0; animation: kh_blink 1s steps(1, end) infinite; }

/* --- טעינה עליונה --- */
#top_progress, .top_progress{ background: var(--color_gold); box-shadow: 0 2px 0 0 var(--color_pink); }

/* --- check_animated --- */
.check_animated__box{ border-radius: 0; }
.check_animated svg circle{ stroke: var(--color_turquoise); }

/* --- טיפוגרפיה בסיסית של המסכים --- */
.section_title{ color: var(--color_ivory); font-weight: var(--font_weight_black); font-size: calc( var(--font_size) * 1.4 ); margin-block: 0 var(--space_2); }
.section_subtitle{ color: var(--color_text_secondary); font-size: var(--font_size); margin-block: 0 var(--space_3); }
.micro_label, .pixel_text{ font-family: var(--font_family_pixel); font-size: calc( var(--font_size) * 0.6 ); direction: ltr; unicode-bidi: isolate; letter-spacing: 0; }
.pixel_number{ font-family: var(--font_family_pixel); direction: ltr; unicode-bidi: isolate; }

/* קישור דילוג לתוכן (נגישות) */
.skip_link{
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	transform: translateY(-200%);
	background: var(--color_gold);
	color: var(--color_ink);
	padding: var(--space_2) var(--space_3);
	font-weight: var(--font_weight_black);
	z-index: 100;
}

.skip_link:focus{ transform: none; outline: 4px solid var(--color_turquoise); }

/* מסך ממורכז אנכית (כניסה, הצטרפות, מצבי מערכת) */
.screen_centered > .content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--space_4);
	max-inline-size: 520px;
	margin-inline: auto;
	min-block-size: 100%;
}

.screen_centered .card{ inline-size: 100%; }
.screen_topbar{ inline-size: 100%; }

/* קו הפרדה פנימי בכרטיס */
.divider{ border: 0; border-block-start: 2px solid var(--color_divider); margin-block: var(--space_3); }

/* אין הבהוב מהיר ואין תנועה למי שביקש */
@media (prefers-reduced-motion: reduce){
	.button.is_loading::after, .is_loading .skeleton_target{ animation: none; }
}

}


/* ==== /css/app/components/status_variants.css ==== */

/* ===== status_variants — וריאנטים של הדומיין מעל רכיבי ה-lib (מרחיב, לא בונה חדש) ===== */
@layer components{
.tag--projector{ --my_border_color: var(--color_turquoise); --my_color: var(--color_turquoise); }
.tag--no_projector{ --my_border_color: var(--color_purple); --my_color: var(--color_purple); }
.tag--expiring{ --my_border_color: var(--color_pink); --my_color: var(--color_pink); }
.tag--disconnected{ --my_border_color: var(--color_frame); --my_color: var(--color_text_micro); }
}


/* ==== /css/app/components/connection_status.css ==== */


/*
	===== connection_status — חיווי חיבור ותור פעולות ממתינות =====

	מנוהל ע"י js/connectionStatus.js, שמאזין לאירועי online/offline
	ולתור של js/api.js. שני מצבים:
	- is_offline: אין רשת כלל
	- is_pending: יש רשת, אבל נותרו פעולות בתור (או שהן נשלחות עכשיו)

	הפס יושב מעל התוכן ומתחת למודאלים — הוא מידע, לא חסימה.
*/

@layer components{

.connection_status{
	position: fixed;
	inset-inline: 0;
	inset-block-start: 0;
	z-index: 380; /* מתחת ל-cookie_consent (400) ולמודאלים — חיווי, לא חסימה */

	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space_1);

	padding-block: 6px;
	padding-inline: var(--space_2);

	font-size: var(--font_size_smaller);
	font-weight: var(--font_weight_bold);
	text-align: center;

	background: var(--color_warning);
	color: var(--text_color1);

	translate: 0 -100%;
	transition: translate 0.42s ease;
}

.connection_status.is_visible{
	translate: 0 0;
}

.connection_status.is_offline{
	background: var(--color_warning);
}

.connection_status.is_pending{
	background: var(--color_info);
	color: var(--color_white);
}

.connection_status__icon{
	font-size: 1.05em;
	line-height: 1;
	flex-shrink: 0;
}

.connection_status__count{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-inline-size: 1.6em;
	padding-inline: 5px;
	border-radius: 999px;

	background: rgb(255 255 255 / 0.28);
	font-variant-numeric: tabular-nums;
}

/* גוף הדף נדחף למטה כשהפס גלוי — כדי שלא יכסה כותרת מסך */
body.has_connection_status{
	padding-block-start: 1.9em;
}

@media (prefers-reduced-motion: reduce){
	.connection_status{
		transition: none;
	}
}

}


/* ==== /css/app/components/crt.css ==== */

/* ===== crt — שכבת קווי הסריקה והזוהר (תנ"ך המותג §8). מתחת לתוכן (#background), מנוטרלת במצב קריאוּת ===== */
@layer components{

#background .crt_scanlines{
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(rgba(12, 6, 24, 0.40) 0 2px, rgba(255, 255, 255, 0) 2px 4px);
	pointer-events: none;
}

#background .crt_glow{
	position: absolute;
	inset-block-start: 20%;
	inset-inline-start: 50%;
	inline-size: 60vw;
	block-size: 60vw;
	max-inline-size: 700px;
	max-block-size: 700px;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(255, 201, 60, 0.12), rgba(255, 201, 60, 0));
	pointer-events: none;
}

html.readability #background .crt_scanlines,
html.readability #background .crt_glow{ display: none; }

}


/* ==== /css/app/components/shape_keys.css ==== */

/* ===== shape_keys — ארבעת מקשי הצורות (תנ"ך המותג §5, §6): גריד 2×2, צבע נעול לצורה, קפסת מקש כהה + ספרייט + מספר + תווית =====
	צבע לעולם לא לבד: צורה + מספר + תווית קולית. יעד מגע ≥ 44px עם מרווח 12–16px. */
@layer components{

.shape_keys{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	inline-size: 100%;
}

.shape_keys--two{ grid-template-columns: 1fr; }

.shape_key{
	--my_color: var(--color_gold);
	display: flex;
	align-items: center;
	gap: var(--space_2);
	min-block-size: 96px;
	padding: var(--space_2) var(--space_3);
	background: var(--my_color);
	color: var(--color_ink);
	border: var(--border_pixel) solid var(--my_color);
	border-radius: 0;
	font-family: var(--font_family_base);
	font-weight: var(--font_weight_black);
	font-size: calc( var(--font_size) * 1.15 );
	text-align: start;
	cursor: pointer;
	transition: none;
	box-shadow: 4px 4px 0 0 var(--color_ink);
}

.shape_key--1{ --my_color: var(--color_pink); }
.shape_key--2{ --my_color: var(--color_turquoise); }
.shape_key--3{ --my_color: var(--color_purple); }
.shape_key--4{ --my_color: var(--color_gold); }

.shape_key__cap{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-shrink: 0;
	inline-size: 64px;
	block-size: 64px;
	background: var(--color_ink);
}

.shape_key__cap .sprite{ --my_color: var(--my_color); --my_px: 4px; }
.shape_key__number{ font-family: var(--font_family_pixel); font-size: 10px; color: var(--my_color); direction: ltr; }
.shape_key__label{ flex: 1; color: var(--color_ink); overflow-wrap: anywhere; }

/* מצב מקרן: מקשי ענק בלי טקסט — התווית היא שם הצורה */
.shape_keys--big .shape_key{ min-block-size: 30vh; font-size: calc( var(--font_size) * 1.4 ); justify-content: center; }
.shape_keys--big .shape_key__cap{ inline-size: 88px; block-size: 88px; }
.shape_keys--big .shape_key__cap .sprite{ --my_px: 6px; }

.shape_key:active:not(:disabled){ transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--color_ink); }

.shape_key:disabled, .shape_key.is_locked{
	background: var(--color_panel);
	border-color: var(--color_frame);
	color: var(--color_text_micro);
	box-shadow: none;
	cursor: default;
}

.shape_key.is_locked .shape_key__label{ color: var(--color_text_micro); }
.shape_key.is_locked .shape_key__cap .sprite{ --my_color: var(--color_text_micro); }
.shape_key.is_selected{ outline: 4px solid var(--color_ivory); outline-offset: 2px; }
.shape_key.is_correct{ background: var(--color_lime); border-color: var(--color_lime); box-shadow: none; }
.shape_key.is_correct .shape_key__label::after{ content: " ✓"; }

/* על המקרן: אפשרויות תצוגה (לא כפתורים) עם התפלגות */
.shape_option{
	display: flex;
	align-items: center;
	gap: var(--space_2);
	padding: var(--space_2);
	background: var(--color_panel);
	border: var(--border_pixel) solid var(--my_color);
	color: var(--color_ivory);
	font-weight: var(--font_weight_black);
	font-size: calc( var(--font_size) * 1.3 );
	min-block-size: 72px;
}

.shape_option--1{ --my_color: var(--color_pink); }
.shape_option--2{ --my_color: var(--color_turquoise); }
.shape_option--3{ --my_color: var(--color_purple); }
.shape_option--4{ --my_color: var(--color_gold); }
.shape_option .shape_key__cap{ inline-size: 56px; block-size: 56px; }
.shape_option .shape_key__cap .sprite{ --my_color: var(--my_color); }
.shape_option.is_correct{ border-color: var(--color_lime); background: color-mix(in srgb, var(--color_lime) 18%, var(--color_panel)); }
.shape_option__label{ flex: 1; }
.shape_option__count{ font-family: var(--font_family_pixel); font-size: 14px; color: var(--my_color); direction: ltr; min-inline-size: 3ch; text-align: end; }
.shape_option__bar{ block-size: 10px; background: var(--my_color); inline-size: 0; }
.shape_option.is_correct .shape_option__bar{ background: var(--color_lime); }

}


/* ==== /css/app/components/timer_bar.css ==== */

/* ===== timer_bar — פס הטיימר המדורג (תנ"ך המותג §6): יורד בקפיצות של 10%; מתחת ל-25% ורוד ומהבהב. תצוגה בלבד ===== */
@layer components{

.timer_bar{
	--my_color: var(--color_gold);
	position: relative;
	inline-size: 100%;
	block-size: 20px;
	border: var(--border_pixel) solid var(--color_frame);
	padding: 2px;
	background: var(--color_ink);
}

.timer_bar__fill{
	block-size: 100%;
	inline-size: 100%;
	background: var(--my_color);
	transition: none;
}

.timer_bar.is_warning{ --my_color: var(--color_pink); }
.timer_bar.is_warning .timer_bar__fill{ animation: kh_blink 1s steps(1, end) infinite; }
.timer_bar.is_paused .timer_bar__fill{ background: var(--color_turquoise); }

.timer_bar__seconds{
	position: absolute;
	inset-block-start: -1.6em;
	inset-inline-end: 0;
	font-family: var(--font_family_pixel);
	font-size: 12px;
	color: var(--my_color);
	direction: ltr;
}

.timer_bar--big{ block-size: 28px; }
.timer_bar--big .timer_bar__seconds{ font-size: 18px; inset-block-start: -2em; }

@media (prefers-reduced-motion: reduce){ .timer_bar.is_warning .timer_bar__fill{ animation: none; } }

}


/* ==== /css/app/components/pin_field.css ==== */

/* ===== pin_field — תאי קוד (תנ"ך המותג §6): 44–52px רוחב, 56–64px גובה, מסגרת טורקיז, ספרה ב-PS2P. עטוף ב-dir=ltr ===== */
@layer components{

.pin_field{
	display: flex;
	gap: 8px;
	justify-content: center;
	direction: ltr;
}

.pin_field__digit{
	inline-size: 48px;
	block-size: 60px;
	text-align: center;
	background: var(--color_panel);
	color: var(--color_ivory);
	border: var(--border_pixel) solid var(--color_turquoise);
	border-radius: 0;
	font-family: var(--font_family_pixel);
	font-size: 20px;
	caret-color: var(--color_gold);
	transition: none;
}

.pin_field__digit:focus{ border-color: var(--color_gold); outline: none; box-shadow: inset 0 -4px 0 0 var(--color_gold); }
.pin_field.is_invalid .pin_field__digit{ border-color: var(--color_pink); background: var(--color_frame_error); }

/* קוד הכניסה על המקרן — ענק, לקריאה משורה אחרונה */
.room_pin_display{
	font-family: var(--font_family_pixel);
	font-size: clamp(40px, 8vw, 110px);
	color: var(--color_turquoise);
	letter-spacing: 0.15em;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: center;
	line-height: 1.2;
}

}


/* ==== /css/app/components/podium.css ==== */

/* ===== podium — שלושת המקומות הראשונים (תנ"ך המותג §11): 1 זהב וגבוה במרכז, 2 טורקיז, 3 סגול. שלושה בלבד, לעולם ===== */
@layer components{

.podium{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space_3);
	align-items: end;
	inline-size: 100%;
	max-inline-size: 900px;
	margin-inline: auto;
}

.podium__place{
	--my_color: var(--color_purple);
	--my_height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space_2);
	text-align: center;
}

.podium__place--1{ --my_color: var(--color_gold); --my_height: 220px; order: 2; }
.podium__place--2{ --my_color: var(--color_turquoise); --my_height: 160px; order: 1; }
.podium__place--3{ --my_color: var(--color_purple); --my_height: 120px; order: 3; }

.podium__name{ color: var(--color_ivory); font-weight: var(--font_weight_black); font-size: calc( var(--font_size) * 1.3 ); overflow-wrap: anywhere; }
.podium__score{ font-family: var(--font_family_pixel); font-size: 16px; color: var(--my_color); direction: ltr; }

.podium__column{
	inline-size: 100%;
	block-size: var(--my_height);
	background: var(--my_color);
	border: var(--border_pixel) solid var(--color_ink);
	box-shadow: var(--shadow_solid);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-block-start: var(--space_2);
	font-family: var(--font_family_pixel);
	font-size: 22px;
	color: var(--color_ink);
	animation: kh_rise 0.6s steps(4, end) both;
}

.podium__place--2 .podium__column{ animation-delay: 0.2s; }
.podium__place--1 .podium__column{ animation-delay: 0.4s; }

@keyframes kh_rise{ from{ transform: scaleY(0); transform-origin: bottom; } to{ transform: scaleY(1); transform-origin: bottom; } }

.podium__place.is_empty .podium__column{ background: var(--color_panel); box-shadow: none; }
.podium__place.is_empty .podium__name{ color: var(--color_text_micro); }

/* שלושת המובילים אחרי שאלה — רשימה קצרה על המקרן */
.leaders{ display: flex; flex-direction: column; gap: var(--space_2); list-style: none; padding: 0; margin: 0; }
.leaders__item{ display: flex; align-items: center; gap: var(--space_2); padding: var(--space_2); background: var(--color_panel); border: 2px solid var(--color_frame); font-weight: var(--font_weight_black); font-size: calc( var(--font_size) * 1.2 ); color: var(--color_ivory); }
.leaders__item:nth-child(1){ border-color: var(--color_gold); }
.leaders__item:nth-child(2){ border-color: var(--color_turquoise); }
.leaders__item:nth-child(3){ border-color: var(--color_purple); }
.leaders__rank{ font-family: var(--font_family_pixel); font-size: 14px; direction: ltr; min-inline-size: 2ch; }
.leaders__name{ flex: 1; overflow-wrap: anywhere; }
.leaders__score{ font-family: var(--font_family_pixel); font-size: 14px; direction: ltr; color: var(--color_gold); }

@media (prefers-reduced-motion: reduce){ .podium__column{ animation: none; } }

}


/* ==== /css/app/components/score_chip.css ==== */

/* ===== score_chip — צ'יפ ניקוד (תנ"ך המותג §6): רקע דיו, מסגרת 3px בצבע, ספרייט + מספר ב-PS2P ===== */
@layer components{

.score_chip{
	--my_color: var(--color_gold);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	background: var(--color_ink);
	border: var(--border_pixel) solid var(--my_color);
	color: var(--my_color);
	font-family: var(--font_family_pixel);
	font-size: 14px;
	min-block-size: var(--touch_target);
}

.score_chip .sprite{ --my_color: var(--my_color); --my_px: 3px; }
.score_chip__value{ direction: ltr; unicode-bidi: isolate; }
.score_chip--turquoise{ --my_color: var(--color_turquoise); }
.score_chip--purple{ --my_color: var(--color_purple); }
.score_chip--lime{ --my_color: var(--color_lime); }
.score_chip--big{ font-size: 22px; padding: 10px 18px; }
.score_chip--big .sprite{ --my_px: 4px; }

/* שורת מטא-דאטה של השאלה (Q3 / 10) */
.question_meta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_2);
	inline-size: 100%;
}

.question_meta__index{ font-family: var(--font_family_pixel); font-size: 14px; color: var(--color_purple); direction: ltr; unicode-bidi: isolate; }

}


/* ==== /css/app/components/rich_text.css ==== */

/* ===== rich_text — תוכן שאלה עשיר (רשימת ההיתר בלבד) ועורך העיצוב המצומצם. נוסחאות ב-ltr מבודד ===== */
@layer components{

.rich_text{ color: var(--color_ivory); font-size: var(--font_size); line-height: var(--line_height_base); overflow-wrap: anywhere; }
.rich_text p{ margin-block: 0 0.6em; }
.rich_text ul, .rich_text ol{ padding-inline-start: 1.4em; margin-block: 0 0.6em; }
.rich_text sup, .rich_text sub{ font-size: 0.7em; }
.rich_text .math_inline, .rich_text .math_block{ direction: ltr; unicode-bidi: isolate; display: inline-block; }
.rich_text .math_block{ display: block; text-align: center; margin-block: 0.4em; }
.rich_text--question{ font-size: calc( var(--font_size) * 1.5 ); font-weight: var(--font_weight_black); }
.rich_text--board{ font-size: clamp(24px, 3.6vw, 48px); font-weight: var(--font_weight_black); }

/* סרגל העיצוב של העורך */
.rich_toolbar{ display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 6px; }
.rich_toolbar .button{ min-inline-size: var(--touch_target); padding-inline: 0.6em; font-size: var(--font_size); }
.rich_editor{
	min-block-size: 120px;
	padding: var(--space_2);
	background: var(--color_panel);
	color: var(--color_ivory);
	border: var(--border_pixel) solid var(--color_frame);
	font-family: var(--font_family_base);
	font-size: var(--font_size);
	unicode-bidi: plaintext;
}
.rich_editor:focus{ border-color: var(--color_turquoise); outline: none; }
.rich_editor:empty::before{ content: attr(data-placeholder); color: var(--color_text_micro); }

/* נגן וידאו מוטמע — יחס 16:9, בלי קישוט */
.video_frame{ position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--color_ink); border: var(--border_pixel) solid var(--color_frame); }
.video_frame iframe{ position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.video_frame.is_blocked{ display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space_2); color: var(--color_ivory); padding: var(--space_3); text-align: center; }

}


/* ==== /css/app/components/readability.css ==== */

/* ===== readability — מצב קריאוּת (תנ"ך המותג, האפיון §מצב קריאוּת): מנטרל אפקטים, מגביר ניגודיות, כותרות חלקות =====
	המתג: html.readability. הלוגיקה ב-readabilityMode.js; prefers-reduced-motion מפעיל אוטומטית. */
@layer components{

.readability_toggle{
	position: fixed;
	inset-block-start: env(safe-area-inset-top, 0);
	inset-inline-start: 8px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-block-size: var(--touch_target);
	min-inline-size: var(--touch_target);
	padding: 6px 10px;
	background: var(--color_ink);
	color: var(--color_ivory);
	border: 2px solid var(--color_frame);
	font-size: calc( var(--font_size) * 0.8 );
	font-weight: var(--font_weight_bold);
	cursor: pointer;
}

.readability_toggle[aria-pressed="true"]{ border-color: var(--color_lime); color: var(--color_lime); }
.readability_toggle__icon{ font-size: 1.1em; }

html.readability{
	--color_text_secondary: #C9BEE0;
	--color_text_micro: #B4A6D2;
	--color_frame: #6A4BA6;
	--color_panel: #12081F;
}

html.readability .pixel_text_title{ display: none; }
html.readability .pixel_text_fallback{ display: block; }
html.readability .sprite--bob, html.readability .sprite--blink, html.readability .timer_bar.is_warning .timer_bar__fill, html.readability .podium__column{ animation: none; }
html.readability .logo .brand_logotype{ text-shadow: none; }
html.readability .button--primary, html.readability .modal__dialog, html.readability .podium__column{ box-shadow: none; }
html.readability .animate_me{ animation: none; }

/* כותרת מרוסטרת + חלופה נגישה (טקסט זהה, מוסתר חזותית או להפך) */
.pixel_text_title{ display: block; image-rendering: pixelated; margin-inline: auto; }
.pixel_text_fallback{ display: none; color: var(--color_gold); font-weight: var(--font_weight_black); font-size: calc( var(--font_size) * 1.6 ); text-align: center; }
.pixel_text_wrap.is_fallback .pixel_text_title{ display: none; }
.pixel_text_wrap.is_fallback .pixel_text_fallback{ display: block; }

/* הכרזות חיות לקוראי מסך — מוסתר חזותית */
.sr_only{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

}


/* ==== /css/app/screens/landing.css ==== */

/* ===== SC-01 נחיתה וכניסת מורה ===== */
@layer screens{
.screen_landing .brand_lockup{ margin-block-start: 6dvh; }
.screen_landing .login_card{ display: flex; flex-direction: column; gap: var(--space_3); }
.screen_landing .join_cta{ display: flex; flex-direction: column; align-items: center; gap: var(--space_2); inline-size: 100%; }
.screen_landing .join_cta .section_title{ margin: 0; font-size: var(--font_size); color: var(--color_text_secondary); }
}


/* ==== /css/app/screens/otp.css ==== */

/* ===== SC-02 הזנת קוד אימות ===== */
@layer screens{
.screen_otp .otp_form{ display: flex; flex-direction: column; gap: var(--space_3); align-items: stretch; }
.screen_otp .resend_timer{ color: var(--color_text_secondary); display: flex; gap: 0.5em; align-items: center; flex-wrap: wrap; justify-content: center; }
.screen_otp .resend_timer__count{ font-family: var(--font_family_pixel); font-size: 12px; color: var(--color_gold); }
}


/* ==== /css/app/screens/quizzes.css ==== */

/* ===== SC-03 לוח השאלונים ===== */
@layer screens{
.screen_quizzes .content{ max-inline-size: 960px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_quizzes .screen_header{ display: flex; align-items: center; justify-content: space-between; gap: var(--space_2); flex-wrap: wrap; }
.screen_quizzes .quizzes_list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space_3); }
.screen_quizzes .quiz_card{ display: flex; flex-direction: column; gap: var(--space_2); }
.screen_quizzes .quiz_card__title{ margin: 0; font-size: calc( var(--font_size) * 1.2 ); color: var(--color_ivory); font-weight: var(--font_weight_black); overflow-wrap: anywhere; }
.screen_quizzes .quiz_card__meta{ display: flex; gap: var(--space_2); flex-wrap: wrap; color: var(--color_text_secondary); font-size: var(--font_size_small); }
.screen_quizzes .quiz_card__actions{ display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: auto; }
.screen_quizzes .quiz_card__actions .button{ flex: 1 1 auto; font-size: var(--font_size_small); }
.screen_quizzes .empty_state{ color: var(--color_text_secondary); text-align: center; padding-block: var(--space_5); }
.screen_quizzes .summaries_list{ display: flex; flex-direction: column; gap: 8px; }
.screen_quizzes .summary_row{ display: flex; justify-content: space-between; gap: var(--space_2); padding: var(--space_2); border: 2px solid var(--color_frame); background: var(--color_panel); color: var(--color_ivory); flex-wrap: wrap; align-items: center; }
}


/* ==== /css/app/screens/quiz_editor.css ==== */

/* ===== SC-04 עורך השאלון — המסך המורכב ביותר: בהירות לפני צפיפות ===== */
@layer screens{
.screen_quiz_editor .content{ max-inline-size: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_quiz_editor .editor_layout{ display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: var(--space_3); align-items: start; }
.screen_quiz_editor .editor_header{ display: flex; flex-wrap: wrap; gap: var(--space_2); align-items: center; justify-content: space-between; }
.screen_quiz_editor .editor_header .field{ flex: 1 1 320px; margin: 0; }
.screen_quiz_editor .questions_list{ display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.screen_quiz_editor .question_row{ display: flex; align-items: center; gap: 6px; padding: 8px; background: var(--color_panel); border: 2px solid var(--color_frame); cursor: pointer; }
.screen_quiz_editor .question_row.is_current{ border-color: var(--color_gold); }
.screen_quiz_editor .question_row.is_invalid{ border-color: var(--color_pink); }
.screen_quiz_editor .question_row__index{ font-family: var(--font_family_pixel); font-size: 12px; color: var(--color_purple); direction: ltr; min-inline-size: 2.5ch; }
.screen_quiz_editor .question_row__title{ flex: 1; color: var(--color_ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen_quiz_editor .question_row .button{ min-inline-size: 36px; min-block-size: 36px; padding: 0; font-size: var(--font_size_small); }
.screen_quiz_editor .question_panel{ display: flex; flex-direction: column; gap: var(--space_3); }
.screen_quiz_editor .question_panel .field{ margin: 0; }
.screen_quiz_editor .type_switch{ display: flex; gap: 8px; flex-wrap: wrap; }
.screen_quiz_editor .type_switch .button{ flex: 1; }
.screen_quiz_editor .type_switch .button.is_active{ --my_background_color: var(--color_turquoise); --my_color: var(--color_ink); }
.screen_quiz_editor .options_editor{ display: flex; flex-direction: column; gap: 8px; }
.screen_quiz_editor .option_row{ display: flex; align-items: center; gap: 8px; }
.screen_quiz_editor .option_row .shape_key__cap{ inline-size: 44px; block-size: 44px; }
.screen_quiz_editor .option_row .field__input{ flex: 1; }
.screen_quiz_editor .option_row__correct{ display: inline-flex; align-items: center; gap: 6px; min-inline-size: var(--touch_target); min-block-size: var(--touch_target); color: var(--color_ivory); cursor: pointer; }
.screen_quiz_editor .option_row__correct input{ inline-size: 24px; block-size: 24px; accent-color: var(--color_lime); }
.screen_quiz_editor .settings_grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space_2); }
.screen_quiz_editor .editor_footer{ display: flex; gap: var(--space_2); justify-content: flex-end; flex-wrap: wrap; position: sticky; inset-block-end: 0; padding-block: var(--space_2); background: var(--color_ink); }
.screen_quiz_editor .toggle_row{ display: flex; align-items: center; gap: 10px; color: var(--color_ivory); min-block-size: var(--touch_target); }
.screen_quiz_editor .toggle_row input{ inline-size: 24px; block-size: 24px; accent-color: var(--color_gold); }
.screen_quiz_editor .video_fields{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
@media (max-width: 760px){
	.screen_quiz_editor .editor_layout{ grid-template-columns: 1fr; }
	.screen_quiz_editor .video_fields{ grid-template-columns: 1fr; }
}
}


/* ==== /css/app/screens/launch.css ==== */

/* ===== SC-05 הפעלת משחק ===== */
@layer screens{
.screen_launch .content{ max-inline-size: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_launch .mode_switch{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space_2); }
.screen_launch .mode_switch .fancy_button{ background: var(--color_panel); border: var(--border_pixel) solid var(--color_frame); color: var(--color_ivory); padding: var(--space_3); text-align: center; cursor: pointer; min-block-size: 120px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border-radius: 0; }
.screen_launch .mode_switch .fancy_button.is_active{ border-color: var(--color_gold); box-shadow: var(--shadow_solid); }
.screen_launch .fancy_button__title{ font-weight: var(--font_weight_black); font-size: calc( var(--font_size) * 1.2 ); color: var(--color_gold); }
.screen_launch .fancy_button__subtitle{ color: var(--color_text_secondary); font-size: var(--font_size_small); }
.screen_launch .toggle_row{ display: flex; align-items: center; gap: 10px; color: var(--color_ivory); min-block-size: var(--touch_target); }
.screen_launch .toggle_row input{ inline-size: 24px; block-size: 24px; accent-color: var(--color_gold); }
@media (max-width: 520px){ .screen_launch .mode_switch{ grid-template-columns: 1fr; } }
}


/* ==== /css/app/screens/board.css ==== */

/* ===== SC-06..SC-10 לוח המקרן — נצפה מרחוק: גדלים לפי שורה אחרונה בכיתה, אופקי ===== */
@layer screens{
.screen_board .content{ display: flex; flex-direction: column; gap: var(--space_3); max-inline-size: 1400px; margin-inline: auto; min-block-size: 100%; }
.screen_board .board_topbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space_2); flex-wrap: wrap; }
.screen_board .board_topbar .logo .app_name{ --my_font_size: calc( var(--font_size) * 1.2 ); }
.screen_board .board_controls{ display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: auto; }
.screen_board .board_controls .button{ font-size: calc( var(--font_size) * 1.1 ); }

/* לובי */
.screen_board_lobby .lobby_layout{ display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: var(--space_4); align-items: start; flex: 1; }
.screen_board_lobby .join_panel{ display: flex; flex-direction: column; align-items: center; gap: var(--space_3); text-align: center; }
.screen_board_lobby .join_panel .join_url{ font-family: var(--font_family_pixel); font-size: clamp(12px, 1.4vw, 18px); color: var(--color_ivory); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.screen_board_lobby .qr_box{ background: var(--color_ivory); padding: 12px; image-rendering: pixelated; inline-size: min(260px, 40vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.screen_board_lobby .qr_box canvas, .screen_board_lobby .qr_box img, .screen_board_lobby .qr_box svg{ inline-size: 100%; block-size: 100%; }
.screen_board_lobby .players_grid{ display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.screen_board_lobby .player_chip{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color_panel); border: 2px solid var(--color_turquoise); color: var(--color_ivory); font-weight: var(--font_weight_black); font-size: clamp(18px, 2vw, 28px); min-block-size: var(--touch_target); }
.screen_board_lobby .player_chip.is_disconnected{ border-color: var(--color_frame); color: var(--color_text_secondary); }
.screen_board_lobby .player_chip .button{ min-inline-size: 36px; min-block-size: 36px; padding: 0; font-size: 14px; }
.screen_board_lobby .players_count{ font-family: var(--font_family_pixel); font-size: clamp(16px, 2vw, 24px); color: var(--color_gold); direction: ltr; }

/* ספירה מקדימה */
.screen_board_countdown .content{ align-items: center; justify-content: center; text-align: center; }
.screen_board_countdown .countdown_number{ font-family: var(--font_family_pixel); font-size: clamp(80px, 20vw, 240px); color: var(--color_gold); direction: ltr; line-height: 1; }
.screen_board_countdown .countdown_label{ font-size: clamp(24px, 3vw, 48px); color: var(--color_ivory); font-weight: var(--font_weight_black); }

/* שאלה פעילה */
.screen_board_question .question_body{ flex: 1; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_board_question .question_media{ max-inline-size: 720px; inline-size: 100%; margin-inline: auto; }
.screen_board_question .answers_counter{ font-family: var(--font_family_pixel); font-size: clamp(14px, 1.8vw, 22px); color: var(--color_turquoise); direction: ltr; }
.screen_board_question .board_options{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space_2); margin-block-start: auto; }
.screen_board_question .board_options .shape_option{ font-size: clamp(20px, 2.4vw, 36px); min-block-size: 96px; }
.screen_board_question .short_answer_hint{ color: var(--color_text_secondary); font-size: clamp(18px, 2vw, 28px); text-align: center; margin-block-start: auto; }

/* תוצאות */
.screen_board_results .results_layout{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space_4); flex: 1; align-items: start; }
.screen_board_results .board_options{ display: flex; flex-direction: column; gap: var(--space_2); }
.screen_board_results .correct_line{ color: var(--color_lime); font-weight: var(--font_weight_black); font-size: clamp(20px, 2.4vw, 32px); }
.screen_board_results .leaders_title{ color: var(--color_gold); font-weight: var(--font_weight_black); font-size: clamp(20px, 2vw, 28px); margin-block: 0 var(--space_2); }

/* פודיום */
.screen_board_podium .content{ align-items: center; justify-content: center; text-align: center; gap: var(--space_4); }
.screen_board_podium .podium_title{ display: flex; flex-direction: column; align-items: center; gap: var(--space_2); }

@media (max-width: 900px){
	.screen_board_lobby .lobby_layout, .screen_board_results .results_layout{ grid-template-columns: 1fr; }
	.screen_board_question .board_options{ grid-template-columns: 1fr; }
}
}


/* ==== /css/app/screens/player.css ==== */

/* ===== SC-12..SC-16 מסכי התלמיד — אנכי, בלי גלילה בזמן מענה, יעדי מגע ענקיים ===== */
@layer screens{
.screen_player .content{ display: flex; flex-direction: column; gap: var(--space_3); min-block-size: 100dvh; max-inline-size: 560px; margin-inline: auto; }
.screen_player .player_topbar{ display: flex; align-items: center; justify-content: space-between; gap: var(--space_2); }
.screen_player .player_nickname{ color: var(--color_ivory); font-weight: var(--font_weight_black); overflow-wrap: anywhere; }

.screen_player_lobby .content{ justify-content: center; align-items: center; text-align: center; }
.screen_player_lobby .lobby_card{ display: flex; flex-direction: column; align-items: center; gap: var(--space_3); }
.screen_player_lobby .lobby_nickname{ font-size: calc( var(--font_size) * 1.5 ); color: var(--color_gold); font-weight: var(--font_weight_black); }

.screen_player_answer .content{ justify-content: flex-end; }
.screen_player_answer .shape_keys{ margin-block-start: auto; }
.screen_player_answer .answer_status{ min-block-size: 2.4em; text-align: center; color: var(--color_ivory); font-weight: var(--font_weight_bold); }

.screen_player_question .question_body{ display: flex; flex-direction: column; gap: var(--space_2); flex: 1; min-block-size: 0; }
.screen_player_question .question_scroll{ overflow: auto; flex: 1; min-block-size: 0; }
.screen_player_question .shape_keys{ margin-block-start: auto; }
.screen_player_question .shape_keys .shape_key{ min-block-size: 72px; }
.screen_player_question .short_answer_form{ display: flex; flex-direction: column; gap: 8px; margin-block-start: auto; }
.screen_player_question .short_answer_form .field__input{ font-size: calc( var(--font_size) * 1.3 ); min-block-size: 56px; }

.screen_player_feedback .content, .screen_player_finish .content{ justify-content: center; align-items: center; text-align: center; }
.screen_player_feedback .feedback_card, .screen_player_finish .finish_card{ display: flex; flex-direction: column; align-items: center; gap: var(--space_3); inline-size: 100%; }
.screen_player_feedback .feedback_headline, .screen_player_finish .finish_headline{ font-size: calc( var(--font_size) * 1.8 ); font-weight: var(--font_weight_black); color: var(--color_gold); margin: 0; }
.screen_player_feedback .feedback_points{ font-family: var(--font_family_pixel); font-size: 28px; color: var(--color_lime); direction: ltr; }
.screen_player_feedback .feedback_points.is_zero{ color: var(--color_text_secondary); }
.screen_player_feedback .feedback_streak{ color: var(--color_turquoise); font-weight: var(--font_weight_black); }
.screen_player_feedback .feedback_note{ color: var(--color_text_secondary); }
.screen_player_finish .finish_stats{ display: flex; flex-direction: column; gap: 10px; align-items: center; }
}


/* ==== /css/app/screens/report.css ==== */

/* ===== SC-17 דוח סיכום למורה — אחוזי הצלחה, בלי דירוג אישי ===== */
@layer screens{
.screen_report .content{ max-inline-size: 900px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_report .report_header{ display: flex; justify-content: space-between; align-items: center; gap: var(--space_2); flex-wrap: wrap; }
.screen_report .report_stats{ display: flex; gap: var(--space_2); flex-wrap: wrap; }
.screen_report .report_questions{ display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.screen_report .report_question{ display: flex; flex-direction: column; gap: 6px; padding: var(--space_2); background: var(--color_panel); border: 2px solid var(--color_frame); }
.screen_report .report_question.is_hard{ border-color: var(--color_pink); }
.screen_report .report_question__head{ display: flex; justify-content: space-between; gap: var(--space_2); color: var(--color_ivory); font-weight: var(--font_weight_bold); }
.screen_report .report_question__pct{ font-family: var(--font_family_pixel); font-size: 13px; color: var(--color_lime); direction: ltr; }
.screen_report .report_question.is_hard .report_question__pct{ color: var(--color_pink); }
.screen_report .report_bar{ block-size: 12px; background: var(--color_ink); border: 2px solid var(--color_frame); }
.screen_report .report_bar__fill{ block-size: 100%; background: var(--color_lime); }
.screen_report .report_question.is_hard .report_bar__fill{ background: var(--color_pink); }
.screen_report .report_hard_title{ color: var(--color_pink); }
}


/* ==== /css/app/screens/admin.css ==== */

/* ===== SC-18 לוח בקרה למנהל ===== */
@layer screens{
.screen_admin .content{ max-inline-size: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_admin .admin_tabs{ display: flex; gap: 8px; flex-wrap: wrap; }
.screen_admin .admin_tabs .button.is_active{ --my_background_color: var(--color_gold); --my_color: var(--color_ink); --my_border_color: var(--color_gold); }
.screen_admin .admin_panel{ display: none; flex-direction: column; gap: var(--space_3); }
.screen_admin .admin_panel.is_current{ display: flex; }
.screen_admin .stats_grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space_2); }
.screen_admin .stat_card{ display: flex; flex-direction: column; gap: 6px; }
.screen_admin .stat_card__label{ color: var(--color_text_secondary); font-size: var(--font_size_small); }
.screen_admin .stat_card__value{ font-family: var(--font_family_pixel); font-size: 22px; color: var(--color_gold); direction: ltr; }
.screen_admin .admin_table{ inline-size: 100%; border-collapse: collapse; color: var(--color_ivory); }
.screen_admin .admin_table th, .screen_admin .admin_table td{ padding: 8px; border-block-end: 2px solid var(--color_divider); text-align: start; vertical-align: middle; }
.screen_admin .admin_table th{ color: var(--color_purple); font-size: var(--font_size_small); }
.screen_admin .admin_table .field__input{ min-block-size: 40px; font-size: var(--font_size_small); inline-size: 100%; }
.screen_admin .admin_table .button{ font-size: var(--font_size_small); min-block-size: 40px; }
.screen_admin .admin_table code{ font-family: var(--font_family_pixel); font-size: 10px; direction: ltr; unicode-bidi: isolate; color: var(--color_turquoise); }
.screen_admin .word_add_row{ display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.screen_admin .word_add_row .field{ margin: 0; flex: 1 1 200px; }
.screen_admin .error_list{ display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: var(--font_size_small); color: var(--color_text_secondary); }
.screen_admin .error_list li{ padding: 6px; border: 2px solid var(--color_frame_error); overflow-wrap: anywhere; direction: ltr; text-align: start; }
.screen_admin .table_wrap{ overflow: auto; }
}


/* ==== /css/app/screens/accessibility.css ==== */

/* ===== SC-19 הצהרת נגישות ===== */
@layer screens{
.screen_accessibility .content{ max-inline-size: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space_3); }
.screen_accessibility .card{ color: var(--color_ivory); line-height: var(--line_height_loose); }
.screen_accessibility h2{ color: var(--color_gold); font-size: calc( var(--font_size) * 1.2 ); margin-block: var(--space_3) var(--space_1); }
.screen_accessibility ul{ padding-inline-start: 1.4em; }
}


/* ==== /css/app/screens/system_state.css ==== */

/* ===== SC-20 מצבי מערכת ===== */
@layer screens{
.screen_system_state .system_state{ display: flex; flex-direction: column; align-items: center; gap: var(--space_3); text-align: center; }
.screen_system_state .system_state__actions{ display: flex; flex-direction: column; gap: var(--space_2); inline-size: 100%; }
.screen_system_state .system_state__actions .button:empty{ display: none; }
}


/* ==== /css/lib/animate_me.css ==== */


/*
	animate_me — מנוע אנימציות מבוסס משתני CSS.
	API: 4 סלוטים (animation1..animation4), כל סלוט נשלט דרך
	--animationN-name / -duration / -delay / -repeat / -timing-function /
	-direction / -fill-mode / -play-state.
	דילאיים וערכים מספריים מוגדרים אינליין (style="--animation1-delay: 2s")
	או בפריסטים — אין סולמות מחלקות לערכים מספריים.
	הקובץ מתנהג כספרייה: משתני הקיפרפריימים (--scaleFrom וכו') הם
	camelCase בכוונה, כגבול API של ה"ספרייה".
*/

@layer utilities{

/* --- כיבוי אנימציות: העדפת משתמש, הדפסה, או מחלקת no_animations --- */

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

	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
	}
}

.no_animations {
	scroll-behavior: auto !important;
}

.no_animations *,
.no_animations *::before,
.no_animations *::after {
	animation-delay: 0s !important;
	animation-duration: 0.001s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001s !important;
}

/* --- keyframes --- */

@keyframes animateMe__none{
	from{ perspective: initial; }
	to{ perspective: initial; }
}

@keyframes animateMe__scale{
	from{ scale: var(--scaleFrom, 1); }
	to{ scale: var(--scaleTo, 2); }
}

@keyframes animateMe__lineHeight{
	from{ line-height: var(--lineHeightFrom, 100%); }
	to{ line-height: var(--lineHeightTo, 150%); }
}

@keyframes animateMe__opacity{
	from{ opacity: var(--opacityFrom, 1); }
	to{ opacity: var(--opacityTo, 0); }
}

@keyframes animateMe__rotate{
	0%{ rotate: var(--rotateFrom, 0deg); }
	100%{ rotate: var(--rotateTo, 30deg); }
}

@keyframes animateMe__translate{
	0%{ translate: var(--translateXFrom, 0) var(--translateYFrom, 0); }
	100%{ translate: var(--translateXTo, 30%) var(--translateYTo, 30%); }
}

@keyframes animateMe__bouncing{
	0%, 25%, 40%{
		transform:
			translateY(var(--translateYFrom, 0))
			rotate(var(--rotateFrom, 0deg))
			scale(var(--scaleFrom, 1));
	}
	60%{
		transform:
			translateY(calc( var(--translateYTo, 15%) * 1.2 ))
			rotate(var(--rotateTo, -6deg))
			scale(calc( var(--scaleTo, 1.1) / 1.2 ));
	}
	80%{
		transform:
			translateY(calc( var(--translateYTo, 15%) * -2 ))
			rotate(var(--rotateTo, 6deg))
			scale(calc( var(--scaleTo, 1.1) * 1.05 ));
	}
	100%{
		transform:
			translateY(var(--translateYFrom, 0))
			rotate(var(--rotateFrom, 0deg))
			scale(var(--scaleFrom, 1));
	}
}

@keyframes animateMe__spinZ{
	0%, 100%{ transform: scaleX(1); }
	50%{ transform: scaleX(0.18); }
}

/* --- ברירות מחדל לארבעת הסלוטים --- */

:root{
	--animation1-name: animateMe__none;
	--animation2-name: animateMe__none;
	--animation3-name: animateMe__none;
	--animation4-name: animateMe__none;

	--animation1-duration: 1s;
	--animation2-duration: 1s;
	--animation3-duration: 1s;
	--animation4-duration: 1s;

	--animation1-repeat: infinite;
	--animation2-repeat: infinite;
	--animation3-repeat: infinite;
	--animation4-repeat: infinite;

	--animation1-delay: 0s;
	--animation2-delay: 0s;
	--animation3-delay: 0s;
	--animation4-delay: 0s;

	--animation1-timing-function: ease-in-out;
	--animation2-timing-function: ease-in-out;
	--animation3-timing-function: ease-in-out;
	--animation4-timing-function: ease-in-out;

	--animation1-direction: alternate;
	--animation2-direction: alternate;
	--animation3-direction: alternate;
	--animation4-direction: alternate;

	--animation1-fill-mode: both;
	--animation2-fill-mode: both;
	--animation3-fill-mode: both;
	--animation4-fill-mode: both;

	--animation1-play-state: paused;
	--animation2-play-state: paused;
	--animation3-play-state: paused;
	--animation4-play-state: paused;
}

.animate_me{
	backface-visibility: hidden;

	animation:
		var(--animation1-name)
		var(--animation1-duration)
		var(--animation1-timing-function)
		var(--animation1-delay)
		var(--animation1-repeat)
		var(--animation1-direction)
		var(--animation1-fill-mode)
		var(--animation1-play-state),

		var(--animation2-name)
		var(--animation2-duration)
		var(--animation2-timing-function)
		var(--animation2-delay)
		var(--animation2-repeat)
		var(--animation2-direction)
		var(--animation2-fill-mode)
		var(--animation2-play-state),

		var(--animation3-name)
		var(--animation3-duration)
		var(--animation3-timing-function)
		var(--animation3-delay)
		var(--animation3-repeat)
		var(--animation3-direction)
		var(--animation3-fill-mode)
		var(--animation3-play-state),

		var(--animation4-name)
		var(--animation4-duration)
		var(--animation4-timing-function)
		var(--animation4-delay)
		var(--animation4-repeat)
		var(--animation4-direction)
		var(--animation4-fill-mode)
		var(--animation4-play-state);
}

span.animate_me,
strong.animate_me,
del.animate_me,
ins.animate_me,
mark.animate_me,
a.animate_me,
code.animate_me,
img.animate_me,
label.animate_me,
i.animate_me{
	display: inline-block;
}

/* --- הפעלה כשנכנסים ל-viewport (עובד עם js_watch_visibility) --- */

.animate_me.animate_on_visible{
	--animation1-play-state: paused;
	--animation2-play-state: paused;
	--animation3-play-state: paused;
	--animation4-play-state: paused;
}

.animate_me.animate_on_visible.is_visible{
	--animation1-play-state: running;
	--animation2-play-state: running;
	--animation3-play-state: running;
	--animation4-play-state: running;
}

/* --- שליטת ריצה --- */

.animate_me.loop{
	--animation1-direction: alternate !important;
	--animation2-direction: alternate !important;
	--animation3-direction: alternate !important;
	--animation4-direction: alternate !important;
}

.animate_me.stopped,
.animate_me.paused{
	--animation1-play-state: paused !important;
	--animation2-play-state: paused !important;
	--animation3-play-state: paused !important;
	--animation4-play-state: paused !important;
}

.animate_me.play,
.animate_me.running{
	--animation1-play-state: running !important;
	--animation2-play-state: running !important;
	--animation3-play-state: running !important;
	--animation4-play-state: running !important;
}

/* --- בחירת keyframes לכל סלוט --- */

.animate_me.animation1-scale{ --animation1-name: animateMe__scale; }
.animate_me.animation2-scale{ --animation2-name: animateMe__scale; }
.animate_me.animation3-scale{ --animation3-name: animateMe__scale; }
.animate_me.animation4-scale{ --animation4-name: animateMe__scale; }

.animate_me.animation1-translate{ --animation1-name: animateMe__translate; }
.animate_me.animation2-translate{ --animation2-name: animateMe__translate; }
.animate_me.animation3-translate{ --animation3-name: animateMe__translate; }
.animate_me.animation4-translate{ --animation4-name: animateMe__translate; }

.animate_me.animation1-rotate{ --animation1-name: animateMe__rotate; }
.animate_me.animation2-rotate{ --animation2-name: animateMe__rotate; }
.animate_me.animation3-rotate{ --animation3-name: animateMe__rotate; }
.animate_me.animation4-rotate{ --animation4-name: animateMe__rotate; }

.animate_me.animation1-opacity{ --animation1-name: animateMe__opacity; }
.animate_me.animation2-opacity{ --animation2-name: animateMe__opacity; }
.animate_me.animation3-opacity{ --animation3-name: animateMe__opacity; }
.animate_me.animation4-opacity{ --animation4-name: animateMe__opacity; }

.animate_me.animation1-bouncing{ --animation1-name: animateMe__bouncing; }
.animate_me.animation2-bouncing{ --animation2-name: animateMe__bouncing; }
.animate_me.animation3-bouncing{ --animation3-name: animateMe__bouncing; }
.animate_me.animation4-bouncing{ --animation4-name: animateMe__bouncing; }

/* --- חזרות --- */

.animate_me.animation1-repeat-infinite{ --animation1-repeat: infinite; }
.animate_me.animation2-repeat-infinite{ --animation2-repeat: infinite; }
.animate_me.animation3-repeat-infinite{ --animation3-repeat: infinite; }
.animate_me.animation4-repeat-infinite{ --animation4-repeat: infinite; }

.animate_me.animation1-repeat-1{ --animation1-repeat: 1; }
.animate_me.animation2-repeat-1{ --animation2-repeat: 1; }
.animate_me.animation3-repeat-1{ --animation3-repeat: 1; }
.animate_me.animation4-repeat-1{ --animation4-repeat: 1; }

/* --- play state --- */

.animate_me.animation1-play-state-running{ --animation1-play-state: running; }
.animate_me.animation2-play-state-running{ --animation2-play-state: running; }
.animate_me.animation3-play-state-running{ --animation3-play-state: running; }
.animate_me.animation4-play-state-running{ --animation4-play-state: running; }

/* --- משכים סמנטיים --- */

.animate_me.animation1-duration-slowest{ --animation1-duration: 10s; }
.animate_me.animation1-duration-slower{ --animation1-duration: 7s; }
.animate_me.animation1-duration-slow{ --animation1-duration: 5s; }
.animate_me.animation1-duration-normal{ --animation1-duration: 3s; }
.animate_me.animation1-duration-fast{ --animation1-duration: 2s; }
.animate_me.animation1-duration-faster{ --animation1-duration: 1s; }
.animate_me.animation1-duration-fastest{ --animation1-duration: 0.5s; }

.animate_me.animation2-duration-slowest{ --animation2-duration: 10s; }
.animate_me.animation2-duration-slower{ --animation2-duration: 7s; }
.animate_me.animation2-duration-slow{ --animation2-duration: 5s; }
.animate_me.animation2-duration-normal{ --animation2-duration: 3s; }
.animate_me.animation2-duration-fast{ --animation2-duration: 2s; }
.animate_me.animation2-duration-faster{ --animation2-duration: 1s; }
.animate_me.animation2-duration-fastest{ --animation2-duration: 0.5s; }

.animate_me.animation3-duration-slowest{ --animation3-duration: 10s; }
.animate_me.animation3-duration-slower{ --animation3-duration: 7s; }
.animate_me.animation3-duration-slow{ --animation3-duration: 5s; }
.animate_me.animation3-duration-normal{ --animation3-duration: 3s; }
.animate_me.animation3-duration-fast{ --animation3-duration: 2s; }
.animate_me.animation3-duration-faster{ --animation3-duration: 1s; }
.animate_me.animation3-duration-fastest{ --animation3-duration: 0.5s; }

.animate_me.animation4-duration-slowest{ --animation4-duration: 10s; }
.animate_me.animation4-duration-slower{ --animation4-duration: 7s; }
.animate_me.animation4-duration-slow{ --animation4-duration: 5s; }
.animate_me.animation4-duration-normal{ --animation4-duration: 3s; }
.animate_me.animation4-duration-fast{ --animation4-duration: 2s; }
.animate_me.animation4-duration-faster{ --animation4-duration: 1s; }
.animate_me.animation4-duration-fastest{ --animation4-duration: 0.5s; }

}


/* ==== /css/lib/animations.css ==== */


/* ===== פריסטים גנריים של animate_me (לא ספציפיים למסך) ===== */

@layer utilities{

.animate_me.spin{
	--scaleFrom: 1;
	--scaleTo: 1.1;

	--rotateFrom: 0deg;
	--rotateTo: 360deg;

	--animation1-name: animateMe__rotate;
	--animation1-duration: 60s;
	--animation1-timing-function: linear;
	--animation1-direction: normal;

	--animation2-name: animateMe__scale;
	--animation2-duration: 30s;
	--animation2-delay: 3s;
	--animation2-timing-function: ease-in-out;
	--animation2-direction: normal;

	will-change: transform;
}

.animate_me.roll_in{
	--animation1-name: animateMe__scale;
	--animation1-duration: 3s;
	--animation1-timing-function: ease-in-out;
	--animation1-direction: normal;

	--animation2-name: animateMe__opacity;
	--animation2-duration: 3s;
	--animation2-timing-function: ease-in-out;
	--animation2-direction: normal;

	--animation3-name: animateMe__rotate;
	--animation3-duration: 3s;
	--animation3-timing-function: ease-in-out;
	--animation3-direction: normal;

	--animation4-name: animateMe__translate;
	--animation4-duration: 3s;
	--animation4-timing-function: ease-in-out;
	--animation4-direction: normal;

	--animation1-repeat: 1;
	--animation2-repeat: 1;
	--animation3-repeat: 1;
	--animation4-repeat: 1;
}

.animate_me.breathing{
	--scaleFrom: 0.91;
	--scaleTo: 1;

	--animation1-name: animateMe__scale;
	--animation1-duration: 4.2s;
	--animation1-direction: alternate;
	--animation1-timing-function: ease-in-out;

	will-change: transform;
}

.animate_me.ripple{
	--scaleFrom: 0;
	--scaleTo: 1.8;
	--opacityFrom: 0.14;
	--opacityTo: 0;

	--animation1-name: animateMe__scale;
	--animation1-duration: 6s;
	--animation1-direction: normal;
	--animation1-timing-function: ease-out;

	--animation2-name: animateMe__opacity;
	--animation2-duration: 6s;
	--animation2-direction: normal;
	--animation2-timing-function: ease-out;

	will-change: transform, opacity;
}

.animate_me.fadeOut{
	--opacityFrom: 1;
	--opacityTo: 0;

	--animation1-repeat: 1;
	--animation1-name: animateMe__opacity;
	--animation1-duration: 0.22s; /* מהיר מספיק שלא יורגש כהשהיה, איטי מספיק שלא יורגש כקפיצה */
	--animation1-direction: normal;
	--animation1-timing-function: ease-in;
}

.animate_me.fadeIn{
	--opacityFrom: 0;
	--opacityTo: 1;

	--animation1-repeat: 1;
	--animation1-name: animateMe__opacity;
	--animation1-duration: 0.28s;
	--animation1-direction: normal;
	--animation1-timing-function: ease-out;
}


/* --- keyframes של רכיבי הטעינה --- */

/* --- כניסה מדורגת לילדי טופס/רשימה (animateThen.js: staggerScreenIn) --- */

.stagger_in_item{
	animation: staggerFieldIn 0.4s ease-out backwards;
}

@keyframes staggerFieldIn{
	from{ opacity: 0; translate: 0 10px; }
	to{ opacity: 1; translate: 0 0; }
}

@keyframes loaderRing{
	to{ rotate: 360deg; }
}

@keyframes skeletonShimmer{
	to{ translate: 100% 0; }
}


/* --- keyframes של מודאל ו-Toast --- */

@keyframes modalIn{
	from{ opacity: 0; scale: 0.94; }
	to{ opacity: 1; scale: 1; }
}

@keyframes toastIn{
	from{ opacity: 0; translate: 0 14px; }
	to{ opacity: 1; translate: 0 0; }
}

}


/* ==== /css/app/decorations.css ==== */

/* ===== decorations — פריסטים מכוילים לאלמנטי הרקע/הדגשה של המוצר (לא במנוע האנימציות הגנרי) ===== */
@layer utilities{

.kh_shift{ animation: kh_shift 0.7s steps(1, end) infinite; }
@keyframes kh_shift{ 0%, 49%{ transform: translate(0, 0); } 50%, 100%{ transform: translate(-4px, -4px); } }

.kh_load_bar{ position: relative; block-size: 12px; background: var(--color_ink); border: 2px solid var(--color_frame); overflow: hidden; }
.kh_load_bar::after{ content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4%; background: var(--color_gold); animation: kh_bar 2.4s steps(10, end) infinite; }
@keyframes kh_bar{ 0%{ inline-size: 4%; } 100%{ inline-size: 100%; } }

@media (prefers-reduced-motion: reduce){ .kh_shift, .kh_load_bar::after{ animation: none; } }

}


/* ==== /css/lib/responsive.css ==== */


/* ===== התאמות רספונסיביות ופלטפורמה ===== */

@layer overrides{

@media all and (orientation: portrait) {
	:root {
		--page_padding_block: 28dvw;
		--page_padding_inline: 2dvh;
		--font_size: 19px;

		--logo_size: clamp(70px, 9dvh, 80px);
	}

	.section_title{
		margin-block-start: 21px;
		margin-block-end: 5px;
	}

	.fancy_button {
		grid-template-columns: 80% 20%;
	}
}

}