/*
 * tools.css — סגנונות הכלים האינטראקטיביים.
 *
 * צורך את הטוקנים מהתבנית הבת ולא מגדיר צבעים משלו. אם מישהו יחליף
 * תבנית, הכלים יאמצו את הפלטה החדשה במקום להיראות זרים.
 *
 * ערכי הנפילה (fallback) בכל var() נועדו למקרה שהתוסף רץ בתבנית
 * שאין בה טוקנים — הכלי עדיין ייראה סביר.
 */

/* ══════════════════════════════════════════════════════════
   דיאגרמות טכניות ([at_diagram])
   ══════════════════════════════════════════════════════════
   direction:ltr כבר מגיע מ-.at-viz (ב-tokens.css) — קריטי כדי
   שימין ושמאל של הרכב לא יתחלפו ב-RTL. הצבעים כאן צורכים את
   טוקני ה-sketch/accent הקיימים, לא מגדירים משלהם. */

.at-figure__frame > svg.at-diagram {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: var(--space-s, 1rem);
}

.at-d-line     { stroke: var(--sketch-line, #8b95a8); fill: none; }
.at-d-line-strong { stroke: var(--text, #eef1f7); fill: none; }
.at-d-line-strong-fill { fill: var(--text, #eef1f7); }
.at-d-accent   { stroke: var(--accent, #2fe3d0); fill: none; }
.at-d-accent-fill { fill: var(--accent, #2fe3d0); }
.at-d-tyre     { fill: var(--tyre, #2b303b); stroke: var(--tyre-edge, #4a5364); stroke-width: 1.5; }
.at-d-rim      { fill: var(--bg-sunken, #101217); stroke: var(--sketch-line, #8b95a8); stroke-width: 1.2; }

.at-d-label text,
text.at-d-label {
	fill: var(--text-muted, #a7b0bf);
	font-size: 12px;
	font-family: inherit;
}

/* ══════════════════════════════════════════════════════════
   פתיח מלא-רוחב
   ══════════════════════════════════════════════════════════ */

.at-hero-full {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	isolation: isolate;
	overflow: hidden;

	/*
	 * פריצה לרוחב מלא מתוך מכולת תוכן ממורכזת.
	 * 100vw ולא 100% — הרוחב נמדד מול חלון התצוגה ולא מול ההורה.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);

	/* מרווח שלילי כלפי מעלה כדי להיצמד לכותרת העליונה */
	margin-block-start: calc(var(--space-l, 2.25rem) * -1);
	margin-block-end: var(--space-2xl, 5.5rem);

	color: #fff;
}

/*
 * גובה: לא 100vh.
 *
 * פתיח שתופס מסך מלא מסתיר לגמרי שיש תוכן מתחת, וזה עובד באתר
 * שיווקי של מוצר אחד — לא באתר עיון עם 44 מאמרים. 78vh משאיר
 * רמז ברור שיש המשך, ועדיין ממלא את המסך.
 */
.at-hero-full--tall { min-height: min(78vh, 44rem); }
.at-hero-full--short { min-height: min(56vh, 30rem); }

/* ── המדיה ── */

.at-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.at-hero__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* הקליפ נוצר במעלה מכוונת ("moody") — מעט בהיר יותר על מסך בפועל */
video.at-hero__media {
	filter: brightness(1.35);
}

/*
 * ── שכבת ההכהיה ──
 *
 * שני מדרונות, ולא אחד:
 *   1. מדרון מלמטה — מייצר בסיס אטום מתחת לטקסט. זה מה שמאפשר
 *      לקרוא אותו מעל כל תמונה, כולל תמונה בהירה.
 *   2. הכהיה כללית קלושה — מוריד את התמונה כולה כך שהטקסט הלבן
 *      בולט גם באזורים שהמדרון הראשון לא מכסה.
 *
 * בלי שתי השכבות, אזור בהיר אחד בתמונה מספיק כדי להעלים מילה.
 */
.at-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			rgba(8, 10, 13, .94) 0%,
			rgba(8, 10, 13, .82) 22%,
			rgba(8, 10, 13, .42) 52%,
			rgba(8, 10, 13, .18) 78%,
			rgba(8, 10, 13, .30) 100%
		),
		linear-gradient(rgba(8, 10, 13, .22), rgba(8, 10, 13, .22));
}

/* ממלא מקום — כשעדיין אין מדיה */
.at-hero-full.is-empty .at-hero__bg .at-media-slot {
	width: 100%;
	height: 100%;
	max-height: none;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
}

/* ── התוכן הצף ── */

.at-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--wide-max, 72rem);
	margin-inline: auto;
	padding: var(--space-2xl, 5.5rem) var(--space-s, 1rem) var(--space-xl, 3.5rem);
}

.at-hero__kicker {
	display: inline-block;
	margin-bottom: var(--space-s, 1rem);
	padding: .2rem .85rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-pill, 999px);
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(6px);
	font-size: var(--step--2, .78rem);
	font-weight: 600;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .88);
}

.at-hero__title {
	margin: 0 0 var(--space-m, 1.5rem);
	max-width: 16ch;
	font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: var(--tracking-tight, -.015em);
	color: #fff;
	text-wrap: balance;
	/* צל עדין — ביטוח אחרון לקריאוּת מעל אזור בהיר בתמונה */
	text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

.at-hero__title em {
	color: var(--accent, #2fe3d0);
	font-style: normal;
}

.at-hero__lede {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(1.02rem, .95rem + .5vw, 1.3rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
	text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
}

/* ── כפתורים ── */

.at-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, .5rem);
	margin-top: var(--space-l, 2.25rem);
}

.at-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .68rem 1.3rem;
	font-size: var(--step--1, .9rem);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	/* פינה חתוכה — אותו מוטיב כמו כרטיסי הניווט */
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
	transition: background-color var(--dur-fast, 130ms) var(--ease-out, ease),
	            border-color var(--dur-fast, 130ms) var(--ease-out, ease);
}

.at-btn::after {
	content: "";
	width: .36rem;
	height: .36rem;
	border-left: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-fast, 130ms) var(--ease-out, ease);
}

.at-btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.at-btn--primary {
	background: var(--accent, #2fe3d0);
	color: #08110f;
}

.at-btn--primary:hover { background: #fff; }

.at-btn--ghost {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .32);
	color: #fff;
	backdrop-filter: blur(6px);
}

.at-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* ── רמז גלילה ── */

.at-hero__cue {
	position: absolute;
	inset-block-end: var(--space-s, 1rem);
	inset-inline-start: 50%;
	width: 1px;
	height: 2.2rem;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .6));
	animation: at-cue 2.4s var(--ease-out, ease) infinite;
}

@keyframes at-cue {
	0%, 100% { opacity: .25; transform: translateY(-.35rem); }
	50%      { opacity: 1;   transform: translateY(.35rem); }
}

@media (prefers-reduced-motion: reduce) {
	.at-hero__cue { animation: none; opacity: .6; }
}

@media (max-width: 40rem) {
	.at-hero-full--tall { min-height: min(84vh, 38rem); }
	.at-hero__inner { padding-bottom: var(--space-l, 2.25rem); }
	.at-hero__title { max-width: none; }
}

/* ── מעטפת כלי ── */

.at-tool {
	--_gap: var(--space-m, 1.5rem);

	/*
	 * הכלי מודד את עצמו ולא את החלון.
	 *
	 * ב-Elementor אותו כלי עשוי לשבת בעמודה צרה, ברוחב מלא, או
	 * בתוך טאב — ומדיה קווירי על רוחב המסך היה נותן תשובה שגויה
	 * בכל אחד מהמקרים האלה. container query שואל את השאלה הנכונה:
	 * "כמה מקום קיבלתי בפועל".
	 */
	container-type: inline-size;
	container-name: at-tool;

	margin-block: var(--space-l, 2rem);
	padding: var(--space-m, 1.5rem);
	background: var(--bg-raised, #161a21);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-l, .875rem);
	color: var(--text, #e7eaf0);
	font-family: var(--font-sans, sans-serif);
}

.at-tool__title {
	margin: 0 0 var(--space-2xs, .5rem);
	font-size: var(--step-1, 1.25rem);
	line-height: var(--leading-tight, 1.25);
}

.at-tool__intro {
	margin: 0 0 var(--_gap);
	color: var(--text-muted, #9aa3b4);
	font-size: var(--step--1, .9rem);
	max-width: var(--measure, 42rem);
}

/*
 * הערה מתחת להמחשה. גודל גופן קבוע ולא נגזר מה-viewBox של ה-SVG,
 * כדי שהצהרות כמו "הזווית בציור מוגדלת" יישארו קריאות גם ב-320px.
 */
.at-viz__note {
	margin: var(--space-2xs, .5rem) 0 0;
	color: var(--text-faint, #808b9c);
	font-size: var(--step--2, .8rem);
	line-height: var(--leading-snug, 1.4);
	text-align: center;
	text-wrap: balance;
}

/*
 * פריסה: ההמחשה והבקרות זו לצד זו במסכים רחבים, זו מעל זו במובייל.
 * ההמחשה תמיד ראשונה בקוד — היא העיקר, וקורא מסך צריך להגיע אליה קודם.
 */
.at-tool__layout {
	display: grid;
	gap: var(--_gap);
	grid-template-columns: 1fr;
}

/*
 * הפיצול נכנס רק כשלכלי עצמו יש מקום אמיתי. מתחת ל-46rem, פיצול
 * מותיר להמחשה כ-300px — צר מדי מכדי לקרוא את רצועות הלחץ והשחיקה,
 * שהן כל הנקודה. עדיף שההמחשה תקבל רוחב מלא והבקרות יישבו מתחתיה.
 */
@container at-tool (min-width: 46rem) {
	.at-tool__layout--split {
		grid-template-columns: minmax(22rem, 3fr) minmax(14rem, 2fr);
		align-items: start;
	}
}

/* גיבוי לדפדפנים בלי container queries — נדיר, אבל לא נשאיר שבור */
@supports not (container-type: inline-size) {
	@media (min-width: 64rem) {
		.at-tool__layout--split {
			grid-template-columns: minmax(22rem, 3fr) minmax(14rem, 2fr);
			align-items: start;
		}
	}
}

/* ── מכולת ההמחשה ── */

/*
 * .at-viz מקבל direction: ltr מהטוקנים. אסור לבטל את זה כאן —
 * ראה את ההערה ב-tokens.css.
 */
/*
 * תקרת גובה להמחשה.
 *
 * ה-SVG של הקאמבר הוא ביחס 400×452 — גבוה יותר מרחב. ברוחב עמודת
 * מאמר טיפוסי הוא יוצא גבוה מגובה המסך כולו, והגולש לא רואה את
 * הגלגל ואת רצועות השחיקה באותו מבט. התקרה מכריחה אותו להתכווץ
 * ולהישאר בתוך שדה הראייה.
 */
.at-viz {
	position: relative;
	display: grid;
	place-items: center;
	max-height: 62vh;
	background: var(--road, #1a1d24);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-m, .5rem);
	overflow: hidden;
}

/*
 * width:auto יחד עם max-height נותן ל-SVG להתכווץ תוך שמירת יחס.
 * עם width:100% הוא היה מתעלם מהתקרה ונחתך.
 */
.at-viz svg {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 62vh;
}

/* ── בקרות ── */

.at-controls {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
}

.at-control {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, .25rem);
}

.at-control__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-2xs, .5rem);
}

.at-control__label {
	font-size: var(--step--1, .9rem);
	font-weight: 600;
}

/* הערך הנוכחי — תמיד LTR, תמיד ברוחב יציב כדי שלא ירעד בגרירה */
.at-control__value {
	font-family: var(--font-mono, monospace);
	font-size: var(--step--1, .9rem);
	color: var(--sig-focus, #39d3c3);
	direction: ltr;
	unicode-bidi: isolate;
	font-variant-numeric: tabular-nums;
	min-width: 5ch;
	text-align: left;
}

/*
 * הסליידר עצמו נשאר input[type=range] מקורי: הוא נגיש במקלדת,
 * נתמך במגע, ומכבד הגדרות נגישות של מערכת ההפעלה. לא מחליפים
 * אותו ברכיב מותאם — זו הפסדה נטו.
 */
.at-control input[type="range"] {
	width: 100%;
	accent-color: var(--sig-focus, #39d3c3);
	direction: ltr;
	cursor: pointer;
	min-height: 1.75rem; /* יעד מגע נוח באצבע */
}

.at-control__hint {
	font-size: var(--step--1, .9rem);
	color: var(--text-faint, #6b7385);
}

/* ── כפתור איפוס ── */

.at-reset {
	align-self: start;
	padding: var(--space-3xs, .25rem) var(--space-xs, .75rem);
	background: transparent;
	color: var(--text-muted, #9aa3b4);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-pill, 999px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	cursor: pointer;
	transition: color var(--dur-fast, 120ms) var(--ease-out, ease),
	            border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}

.at-reset:hover {
	color: var(--text, #e7eaf0);
	border-color: var(--border-strong, #3a4353);
}

/* ── מדדי התנהגות ── */

.at-meters {
	display: grid;
	gap: var(--space-2xs, .5rem);
}

.at-meter {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr auto;
	align-items: center;
	gap: var(--space-2xs, .5rem);
	font-size: var(--step--1, .9rem);
}

/* הערך המספרי — רוחב יציב כדי שהרצועות לא יזוזו בזמן גרירה */
.at-meter__value {
	font-family: var(--font-mono, monospace);
	font-variant-numeric: tabular-nums;
	min-width: 3.5ch;
	text-align: left;
	color: var(--text-muted, #9aa3b4);
}

.at-meter__track {
	position: relative;
	height: .5rem;
	background: var(--bg-sunken, #0a0d11);
	border-radius: var(--radius-pill, 999px);
	direction: ltr;
}

/* קו האפס — נקודת הייחוס של כיול היצרן */
.at-meter__track::before {
	content: "";
	position: absolute;
	inset-block: -.2rem;
	left: 50%;
	width: 1px;
	background: var(--border-strong, #3a4353);
}

.at-meter__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: var(--radius-pill, 999px);
	background: var(--sig-ok, #4a9eff);
	transition: left var(--dur-base, 240ms) var(--ease-out, ease),
	            width var(--dur-base, 240ms) var(--ease-out, ease);
}

.at-meter__fill[data-sign="negative"] {
	background: var(--sig-warn, #f0883e);
}

/*
 * ציון אפס = בדיוק כיול היצרן. פס ברוחב אפס נעלם, וזה בסדר —
 * קו האפס של הרצועה כבר אומר את זה. מוסתר במפורש כדי ששארית
 * רוחב מעיגול לא תצייר נקודה מבלבלת.
 */
.at-meter__fill[data-sign="zero"] {
	opacity: 0;
}

/* ── הסימולטור ── */

/*
 * ── פריסה: מבטים בעמודה, סליידרים לצידם ──
 * שלושת המבטים זה לצד זה דרשו את כל הרוחב, והסליידרים נדחפו
 * מתחתיהם — כלומר אי אפשר היה לגרור סליידר ולראות את ההשפעה
 * באותו זמן, וזו כל הנקודה של סימולטור.
 *
 * עכשיו: מבטים בטור אחד משמאל, סליידרים בשתי עמודות מימין.
 * שמונה סליידרים בשתי עמודות הם ארבע שורות בלבד — קצר מספיק
 * כדי שהמבט הראשון והסליידרים יהיו על המסך יחד.
 */
.at-sim {
	grid-template-columns: 1fr;
}

/*
 * ⚠ העמודה הראשונה ברשת נוחתת ב**ימין** בעברית. הסדר ב-HTML נשאר
 * המחשה-ואז-בקרות, כי קורא מסך צריך להגיע להמחשה קודם — ולכן
 * המיקום נקבע כאן במפורש ולא נגזר מסדר האלמנטים.
 */
@container at-tool (min-width: 40rem) {
	.at-sim {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		align-items: start;
	}

	/*
	 * ⚠ חובה לציין גם שורה. עם עמודה בלבד, המיקום האוטומטי כבר
	 * עבר את עמודה 1 של שורה 1 בזמן שהוא הציב את הבמה בעמודה 2,
	 * ודחף את הבקרות לשורה שנייה — כלומר מתחת לאיורים ולא לצידם.
	 */
	.at-sim__stage { grid-column: 2; grid-row: 1; }  /* שמאל */
	.at-sim__side { grid-column: 1; grid-row: 1; }   /* ימין */
}

@supports not (container-type: inline-size) {
	@media (min-width: 56rem) {
		.at-sim {
			grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
			align-items: start;
		}

		.at-sim__stage { grid-column: 2; }
		.at-sim__side { grid-column: 1; }
	}
}

/* הבמה של הסימולטור מכילה שלושה SVG ולא אחד, ולכן היא לא מרכזת */
.at-viz--sim {
	place-items: stretch;
	max-height: none;
	padding: var(--space-2xs, .5rem);
}

/* טור אחד: מבט מעל מבט */
.at-sim__views {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xs, .75rem);
	width: 100%;
}

.at-sim__view {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, .25rem);
	min-width: 0; /* בלי זה SVG מונע מהעמודה להצטמצם ברשת */
}

.at-viz--sim svg {
	width: 100%;
	max-height: 40vh;
}

.at-sim__caption {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	text-align: center;
	font-size: var(--step--2, .8rem);
	line-height: var(--leading-snug, 1.4);
}

.at-sim__caption strong {
	font-weight: 700;
	letter-spacing: .08em; /* בעברית אין רישיות — הריווח ממלא את התפקיד */
	color: var(--text, #e7eaf0);
}

.at-sim__caption span {
	color: var(--text-faint, #6b7385);
}

/*
 * שתי עמודות של סליידרים. כל סליידר תופס חצי מרוחב העמודה
 * הימנית, ושמונה סליידרים מתקפלים לארבע שורות במקום לשמונה.
 */
.at-controls--dense {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-xs, .75rem) var(--space-s, 1rem);
	align-content: start;
}

/* בורר הצמיג והכפתורים חוצים את שתי העמודות */
.at-controls--dense > .at-tyre,
.at-controls--dense > .at-reset,
.at-controls--dense > .at-share {
	grid-column: 1 / -1;
}

/* מתחת ל-26rem שתי עמודות סליידרים צרות מכדי לגרור באצבע */
@container at-tool (max-width: 26rem) {
	.at-controls--dense {
		grid-template-columns: 1fr;
	}
}

/* ── כפתורי סטאפ מוכן ── */

.at-presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs, .5rem);
	margin-bottom: var(--space-s, 1rem);
}

.at-presets__label {
	font-size: var(--step--1, .9rem);
	color: var(--text-muted, #9aa3b4);
}

.at-presets__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs, .25rem);
}

.at-preset,
.at-share {
	padding: var(--space-3xs, .25rem) var(--space-xs, .75rem);
	background: transparent;
	color: var(--text-muted, #9aa3b4);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-pill, 999px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	cursor: pointer;
	transition: color var(--dur-fast, 120ms) var(--ease-out, ease),
	            border-color var(--dur-fast, 120ms) var(--ease-out, ease),
	            background var(--dur-fast, 120ms) var(--ease-out, ease);
}

.at-preset:hover,
.at-share:hover {
	color: var(--text, #e7eaf0);
	border-color: var(--border-strong, #3a4353);
}

.at-preset[aria-pressed="true"] {
	color: var(--bg, #15171c);
	background: var(--accent, #2fe3d0);
	border-color: var(--accent, #2fe3d0);
}

.at-share {
	align-self: start;
}

.at-share:disabled {
	cursor: default;
	color: var(--accent, #2fe3d0);
	border-color: var(--accent, #2fe3d0);
}

/* ── פאנל ההתנהגות ── */

.at-behavior {
	margin-top: var(--space-m, 1.5rem);
	padding: var(--space-s, 1rem);
	background: var(--bg-sunken, #0a0d11);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-m, .5rem);
}

.at-behavior__title {
	margin: 0 0 var(--space-3xs, .25rem);
	font-size: var(--step-0, 1rem);
	font-weight: 700;
}

.at-behavior__legend {
	margin: 0 0 var(--space-s, 1rem);
	font-size: var(--step--1, .9rem);
	color: var(--text-faint, #6b7385);
}

.at-behavior__summary {
	margin: var(--space-s, 1rem) 0 0;
	padding-top: var(--space-2xs, .5rem);
	border-top: 1px solid var(--border, #2a313e);
	font-size: var(--step--1, .9rem);
	color: var(--text-muted, #9aa3b4);
}

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

/* ── שדות קלט ── */

.at-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, .25rem);
}

.at-field__label {
	font-size: var(--step--1, .9rem);
	font-weight: 600;
}

.at-field__input {
	width: 100%;
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	background: var(--bg-sunken, #0a0d11);
	color: var(--text, #e7eaf0);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-s, 4px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	min-height: 2.5rem; /* יעד מגע נוח באצבע */
}

.at-field__input:focus-visible {
	outline: 2px solid var(--accent, #2fe3d0);
	outline-offset: 1px;
}

/*
 * שדה לא תקין מסומן בגבול בלבד ולא בהחלפת צבע הטקסט: הגולש עדיין
 * מקליד, והחלפת צבע באמצע הקלדה נקראת כשגיאה במקום כהכוונה.
 */
.at-field__input.is-invalid {
	border-color: var(--sig-warn, #f0883e);
}

.at-field__hint {
	margin: 0;
	font-size: var(--step--2, .8rem);
	color: var(--text-faint, #6b7385);
}

/* ── בורר מידת צמיג וג׳נט ── */

.at-tyre {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, .25rem);
}

.at-tyre__label {
	font-size: var(--step--1, .9rem);
	font-weight: 600;
}

/*
 * direction: ltr — מידת צמיג נקראת ‎225/45R17‎ משמאל לימין בכל
 * העולם, כולל בישראל. בכיוון עברי הבוררים היו מופיעים כ-‎17R45/225‎.
 */
.at-tyre__row {
	display: flex;
	align-items: center;
	gap: var(--space-3xs, .25rem);
	direction: ltr;
	unicode-bidi: isolate;
}

.at-tyre__part {
	padding: var(--space-2xs, .5rem) var(--space-3xs, .25rem);
	background: var(--bg-sunken, #0a0d11);
	color: var(--text, #e7eaf0);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-s, 4px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	font-variant-numeric: tabular-nums;
	min-height: 2.5rem;
	text-align: center;
}

.at-tyre__part:focus-visible {
	outline: 2px solid var(--accent, #2fe3d0);
	outline-offset: 1px;
}

.at-tyre__sep {
	color: var(--text-faint, #6b7385);
	font-size: var(--step--1, .9rem);
	font-weight: 600;
}

/* ── מחשבון ההמרות ── */

.at-convert__inputs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--space-s, 1rem);
	margin-bottom: var(--space-s, 1rem);
}

.at-convert__tyre {
	margin: 0 0 var(--space-s, 1rem);
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	background: var(--bg-sunken, #0a0d11);
	border-radius: var(--radius-s, 4px);
	font-size: var(--step--2, .8rem);
	color: var(--text-muted, #9aa3b4);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: center;
}

.at-convert__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1, .9rem);
}

.at-convert__table th,
.at-convert__table td {
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-bottom: 1px solid var(--border, #2a313e);
	text-align: start;
}

.at-convert__table thead th {
	font-size: var(--step--2, .8rem);
	letter-spacing: .06em;
	color: var(--text-faint, #6b7385);
	font-weight: 600;
}

.at-convert__table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/*
 * שתי שורות המילימטרים הן הסיבה שהכלי קיים — אותו טו, שני מספרים
 * שונים לגמרי. הן מסומנות כדי שההפרש ייקרא כהבדל מכוון ולא כתקלה.
 */
.at-convert__table tr[data-at-row^="mm"] {
	background: var(--sig-ok-soft, rgba(77, 157, 255, .1));
}

.at-convert__where {
	display: block;
	font-weight: 400;
	font-size: var(--step--2, .8rem);
	color: var(--text-faint, #6b7385);
	white-space: normal;
}

.at-convert__error {
	margin: var(--space-2xs, .5rem) 0 0;
	font-size: var(--step--1, .9rem);
	color: var(--sig-warn, #f0883e);
}

/* ── מפענח דוח הכיול ── */

.at-decoder__grid {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--space-s, 1rem);
	font-size: var(--step--1, .9rem);
}

.at-decoder__grid th,
.at-decoder__grid td {
	padding: var(--space-3xs, .25rem) var(--space-2xs, .5rem);
	border-bottom: 1px solid var(--border, #2a313e);
	text-align: start;
}

.at-decoder__grid thead th {
	font-size: var(--step--2, .8rem);
	letter-spacing: .06em;
	color: var(--text-faint, #6b7385);
}

.at-decoder__grid tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* פס מצב בתחילת השורה — ירוק בטווח, כתום בחריגה */
.at-decoder__grid tbody tr {
	border-inline-start: 3px solid transparent;
}

.at-decoder__grid tbody tr[data-at-state="ok"] { border-inline-start-color: var(--sig-ok, #4a9eff); }
.at-decoder__grid tbody tr[data-at-state="warn"] { border-inline-start-color: var(--sig-warn, #f0883e); }

.at-decoder__input {
	width: 100%;
	min-width: 4.5rem;
	padding: var(--space-3xs, .25rem) var(--space-2xs, .5rem);
	background: var(--bg-sunken, #0a0d11);
	color: var(--text, #e7eaf0);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-s, 4px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	font-variant-numeric: tabular-nums;
	text-align: center;
	min-height: 2.25rem;
}

.at-decoder__input:focus-visible {
	outline: 2px solid var(--accent, #2fe3d0);
	outline-offset: 1px;
}

.at-decoder__findings {
	list-style: none;
	margin: var(--space-m, 1.5rem) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-3xs, .25rem);
}

.at-finding {
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-inline-start: 3px solid var(--border, #2a313e);
	background: var(--bg-sunken, #0a0d11);
	border-radius: var(--radius-s, 4px);
	font-size: var(--step--1, .9rem);
}

.at-finding[data-level="bad"] {
	border-inline-start-color: var(--sig-wear, #ff5f57);
	background: var(--sig-wear-soft, rgba(255, 95, 87, .1));
}

.at-finding[data-level="warn"] {
	border-inline-start-color: var(--sig-warn, #f0883e);
	background: var(--sig-warn-soft, rgba(240, 136, 62, .1));
}

.at-finding[data-level="ok"] { border-inline-start-color: var(--sig-ok, #4a9eff); }

.at-finding[data-level="info"] {
	color: var(--text-muted, #9aa3b4);
}

/* ── דוגמת תדפיס כיול (עמוד קריאת דוח) ──
 * מוקאפ סטטי, לא כלי אינטראקטיבי. בנוי ב-HTML/CSS ולא כתמונה כי
 * מודלי AI לא אמינים במספרים קריאים, וזו בדיוק התמונה שהגולש
 * צריך לזהות בה את הדף שביד שלו. */

.at-printout {
	margin: var(--space-s, 1rem) 0 var(--space-m, 1.5rem);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-s, 4px);
	overflow: hidden;
	background: var(--bg-sunken, #0a0d11);
}

.at-printout__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2xs, .5rem);
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-bottom: 1px solid var(--border, #2a313e);
	font-size: var(--step--2, .8rem);
	letter-spacing: .04em;
	color: var(--text-faint, #6b7385);
	font-variant-numeric: tabular-nums;
}

.at-printout__grid {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1, .9rem);
	font-variant-numeric: tabular-nums;
}

.at-printout__grid th,
.at-printout__grid td {
	padding: var(--space-3xs, .25rem) var(--space-xs, .75rem);
	border-bottom: 1px solid var(--border, #2a313e);
	text-align: start;
}

.at-printout__grid thead th {
	font-size: var(--step--2, .8rem);
	letter-spacing: .06em;
	color: var(--text-faint, #6b7385);
	font-weight: 500;
}

.at-printout__grid tbody th {
	font-weight: 600;
	white-space: nowrap;
}

.at-printout__grid tbody tr {
	border-inline-start: 3px solid transparent;
}

.at-printout__grid tbody tr[data-at-state="ok"]  { border-inline-start-color: var(--sig-ok, #4a9eff); }
.at-printout__grid tbody tr[data-at-state="bad"] {
	border-inline-start-color: var(--sig-wear, #ff5f57);
	background: var(--sig-wear-soft, rgba(255, 95, 87, .08));
}

.at-printout__mark {
	text-align: center;
	font-weight: 700;
}

.at-printout__grid tbody tr[data-at-state="ok"]  .at-printout__mark { color: var(--sig-ok, #4a9eff); }
.at-printout__grid tbody tr[data-at-state="bad"] .at-printout__mark { color: var(--sig-wear, #ff5f57); }

.at-printout__section th {
	padding-top: var(--space-s, 1rem);
	font-size: var(--step--2, .8rem);
	letter-spacing: .06em;
	color: var(--text-faint, #6b7385);
	font-weight: 500;
	border-bottom-color: transparent;
}

/* ── מחשבון הגלגלים ── */

.at-wheels__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-s, 1rem);
	margin-bottom: var(--space-m, 1.5rem);
}

.at-wheels__side {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs, .5rem);
	margin: 0;
	padding: var(--space-s, 1rem);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-m, .5rem);
}

.at-wheels__legend {
	padding-inline: var(--space-2xs, .5rem);
	font-size: var(--step--1, .9rem);
	font-weight: 700;
	letter-spacing: .06em;
}

.at-wheels__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xs, .5rem);
}

.at-wheels__results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-3xs, .25rem);
}

/*
 * שלוש עמודות: שם, ערך, ומשמעות. המשמעות היא לא קישוט — בלעדיה
 * "רדיוס גרירה +10 מ״מ" הוא מספר חסר הקשר לרוב הקוראים.
 */
.at-wheels__result {
	display: grid;
	grid-template-columns: minmax(7rem, auto) minmax(8rem, auto) 1fr;
	align-items: baseline;
	gap: var(--space-2xs, .5rem);
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-inline-start: 3px solid var(--border, #2a313e);
	background: var(--bg-sunken, #0a0d11);
	border-radius: var(--radius-s, 4px);
	font-size: var(--step--1, .9rem);
}

.at-wheels__result[data-at-sign="plus"] { border-inline-start-color: var(--sig-warn, #f0883e); }
.at-wheels__result[data-at-sign="minus"] { border-inline-start-color: var(--sig-ok, #4a9eff); }

.at-wheels__name { font-weight: 600; }

.at-wheels__value {
	font-family: var(--font-mono, monospace);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--text, #e7eaf0);
}

.at-wheels__meaning {
	font-size: var(--step--2, .8rem);
	color: var(--text-faint, #6b7385);
}

.at-wheels__verdict {
	margin: var(--space-s, 1rem) 0 0;
	padding: var(--space-xs, .75rem);
	background: var(--sig-warn-soft, rgba(240, 136, 62, .1));
	border-inline-start: 3px solid var(--sig-warn, #f0883e);
	border-radius: var(--radius-s, 4px);
	font-size: var(--step--1, .9rem);
}

@media (max-width: 34rem) {
	.at-wheels__result {
		grid-template-columns: 1fr;
		gap: var(--space-3xs, .25rem);
	}
}

/* ── מילון המונחים ── */

.at-glossary__controls {
	position: sticky;
	top: var(--header-h, 4rem);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs, .5rem);
	padding: var(--space-2xs, .5rem) 0;
	background: var(--bg, #15171c);
}

.at-glossary__search { flex: 1 1 16rem; }

.at-glossary__search input {
	width: 100%;
	padding: var(--space-2xs, .5rem) var(--space-s, 1rem);
	background: var(--bg-sunken, #0a0d11);
	color: var(--text, #e7eaf0);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-pill, 999px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	min-height: 2.5rem;
}

.at-glossary__search input:focus-visible {
	outline: 2px solid var(--accent, #2fe3d0);
	outline-offset: 1px;
}

.at-glossary__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs, .25rem);
}

.at-chip {
	padding: var(--space-3xs, .25rem) var(--space-xs, .75rem);
	background: transparent;
	color: var(--text-muted, #9aa3b4);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-pill, 999px);
	font: inherit;
	font-size: var(--step--1, .9rem);
	cursor: pointer;
}

.at-chip:hover { color: var(--text, #e7eaf0); border-color: var(--border-strong, #3a4353); }

.at-chip[aria-pressed="true"] {
	color: var(--bg, #15171c);
	background: var(--accent, #2fe3d0);
	border-color: var(--accent, #2fe3d0);
}

.at-chip__count { opacity: .65; font-variant-numeric: tabular-nums; }

.at-glossary__status {
	margin: var(--space-2xs, .5rem) 0 var(--space-s, 1rem);
	font-size: var(--step--2, .8rem);
	color: var(--text-faint, #6b7385);
}

/*
 * רשת קוביות שמתאימה את עצמה לרוחב. auto-fill ולא auto-fit: עם
 * auto-fit, סינון שמשאיר שני מונחים היה מותח אותם על כל הרוחב
 * במקום להשאיר אותם בגודל כרטיס.
 */
.at-glossary__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--space-s, 1rem);
}

.at-term {
	display: flex;
	flex-direction: column;
	padding: var(--space-s, 1rem);
	background: var(--bg-raised, #1c1f26);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-m, .5rem);
	scroll-margin-top: 8rem; /* כדי שקפיצה לעוגן לא תיחתך בכותרת הדביקה */
	transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}

/*
 * ⚠ חובה. הכלל למעלה נותן ל-.at-term ערך display, והוא גובר על
 * ‎[hidden]{display:none}‎ של הדפדפן — בלי השורה הזו הסינון והחיפוש
 * מפסיקים להסתיר כרטיסים לגמרי.
 */
.at-term[hidden] {
	display: none;
}

.at-term:hover {
	border-color: var(--border-strong, #3a4353);
}

/* הבהוב קצר אחרי קפיצה מקישור "ראו גם" */
.at-term.is-target {
	animation: at-term-flash 1.4s var(--ease-out, ease);
}

@keyframes at-term-flash {
	from { border-color: var(--accent, #2fe3d0); background: var(--accent-soft, rgba(47,227,208,.1)); }
	to   { border-color: var(--border, #2a313e); background: var(--bg-raised, #1c1f26); }
}

@media (prefers-reduced-motion: reduce) {
	.at-term.is-target { animation: none; border-color: var(--accent, #2fe3d0); }
}

.at-term__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2xs, .5rem);
}

.at-term__title {
	margin: 0;
	font-size: var(--step-0, 1rem);
	font-weight: 700;
}

.at-term__en {
	font-weight: 400;
	font-size: var(--step--1, .9rem);
	color: var(--text-faint, #6b7385);
}

.at-term__cat {
	padding: .1rem var(--space-2xs, .5rem);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-pill, 999px);
	font-size: var(--step--2, .8rem);
	color: var(--text-faint, #6b7385);
}

.at-term__facts {
	margin: var(--space-3xs, .25rem) 0 0;
	font-size: var(--step--2, .8rem);
	color: var(--text-faint, #6b7385);
}

/* השכבה הפשוטה — גדולה יותר מהעומק, כי היא זו שרוב הקוראים צריכים */
.at-term__short {
	margin: var(--space-2xs, .5rem) 0 0;
	font-size: var(--step--1, .9rem);
	line-height: var(--leading-relaxed, 1.65);
}

.at-term__more {
	display: inline-block;
	margin-top: var(--space-2xs, .5rem);
	color: var(--accent, #2fe3d0);
	font-size: var(--step--1, .9rem);
	cursor: pointer;
}

.at-term__body {
	margin-top: var(--space-2xs, .5rem);
	padding-inline-start: var(--space-s, 1rem);
	border-inline-start: 2px solid var(--border, #2a313e);
	font-size: var(--step--1, .9rem);
	color: var(--text-muted, #9aa3b4);
}

.at-term__body p { margin: 0 0 var(--space-2xs, .5rem); }
.at-term__body p:last-child { margin-bottom: 0; }

/*
 * margin-top: auto דוחף את הכותרת התחתונה לתחתית הכרטיס, ולכן
 * הקישורים מתיישרים על קו אחד בכל שורת קוביות — גם כשההסברים
 * באורכים שונים.
 */
.at-term__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2xs, .5rem);
	/* auto בולע את המקום הפנוי; ה-padding מבטיח מרווח גם כשאין */
	margin: auto 0 0;
	padding-top: var(--space-s, 1rem);
	border-top: 1px solid var(--border, #2a313e);
	font-size: var(--step--2, .8rem);
}

.at-term__related { color: var(--text-faint, #6b7385); }
.at-term__page { white-space: nowrap; }

.at-glossary__empty {
	padding: var(--space-l, 2.25rem) var(--space-s, 1rem);
	text-align: center;
	color: var(--text-faint, #6b7385);
}

.at-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── טבלת טווחים ── */

.at-ranges {
	margin-block: var(--space-l, 2rem);
	padding: var(--space-m, 1.5rem);
	background: var(--bg-raised, #161a21);
	border: 1px solid var(--border, #2a313e);
	border-radius: var(--radius-l, .875rem);
}

.at-ranges__head {
	display: flex;
	align-items: center;
	gap: var(--space-2xs, .5rem);
	flex-wrap: wrap;
	margin-bottom: var(--space-2xs, .5rem);
}

.at-ranges__title {
	margin: 0;
	font-size: var(--step-0, 1rem);
	font-weight: 700;
}

.at-ranges__en {
	color: var(--text-faint, #6b7385);
	font-weight: 500;
	font-size: var(--step--1, .9rem);
}

.at-ranges__caption {
	margin: 0 0 var(--space-s, 1rem);
	color: var(--text-muted, #9aa3b4);
	font-size: var(--step--1, .9rem);
	max-width: none;
}

.at-ranges__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--step--1, .9rem);
}

.at-ranges__table th,
.at-ranges__table td {
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-bottom: 1px solid var(--border, #2a313e);
	text-align: right;
}

.at-ranges__table thead th {
	color: var(--text-muted, #9aa3b4);
	font-weight: 600;
	font-size: .8rem;
	white-space: nowrap;
}

.at-ranges__table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* מספרים תמיד LTR ובספרות ברוחב אחיד, כדי שהעמודות יתיישרו */
.at-num {
	font-family: var(--font-mono, monospace);
	font-variant-numeric: tabular-nums;
	color: var(--text-muted, #9aa3b4);
}

.at-num--typical {
	color: var(--sig-ok, #4a9eff);
	font-weight: 700;
}

.at-ranges__note {
	margin: var(--space-s, 1rem) 0 0;
	font-size: var(--step--1, .9rem);
	color: var(--text-muted, #9aa3b4);
	max-width: none;
}

/*
 * "לרוב אינו מתכוונן" היא המידע שהכי חוסך אכזבה: גולש שקורא טווח
 * מסלול ורץ למוסך צריך לדעת מראש שברכב שלו אולי אין מה לכוונן.
 */
.at-ranges__note--no {
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-inline-start: 3px solid var(--sig-warn, #f0883e);
	background: var(--bg-sunken, #0a0d11);
	border-radius: var(--radius-s, .25rem);
}

.at-ranges__note--yes {
	padding: var(--space-2xs, .5rem) var(--space-xs, .75rem);
	border-inline-start: 3px solid var(--sig-ok, #4a9eff);
	background: var(--bg-sunken, #0a0d11);
	border-radius: var(--radius-s, .25rem);
}

/* ── הצהרת דיוק ── */

.at-disclaimer {
	margin-top: var(--space-m, 1.5rem);
	padding: var(--space-xs, .75rem) var(--space-s, 1rem);
	border-inline-start: 3px solid var(--sig-warn, #f0883e);
	background: var(--sig-warn-soft, #4a2f16);
	border-radius: var(--radius-s, .25rem);
	font-size: var(--step--1, .9rem);
	color: var(--text, #e7eaf0);
}

.at-disclaimer p {
	margin: 0;
	max-width: none;
}

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

.at-math {
	margin-block: var(--space-m, 1.5rem);
	max-width: var(--content-max, 46rem);
	background: var(--bg-sunken, #05070a);
	border: 1px solid var(--border, rgba(255,255,255,.09));
	border-radius: var(--radius-m, .5rem);
	overflow: hidden;
}

.at-math__summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: var(--space-2xs, .5rem) var(--space-s, 1rem);
	cursor: pointer;
	font-size: var(--step--1, .9rem);
	font-weight: 700;
	color: var(--text-muted, #99a3b4);
	list-style: none;
	user-select: none;
}

/* מסתירים את המשולש המובנה כדי לצייר משלנו */
.at-math__summary::-webkit-details-marker { display: none; }

.at-math__summary::before {
	content: "";
	width: .4rem;
	height: .4rem;
	border-inline-end: 1.5px solid var(--accent, #2fe3d0);
	border-block-end: 1.5px solid var(--accent, #2fe3d0);
	transform: rotate(-45deg);
	transition: transform var(--dur-fast, 130ms) var(--ease-out, ease);
	flex: none;
}

.at-math[open] .at-math__summary::before {
	transform: rotate(45deg);
}

.at-math__summary:hover { color: var(--text, #eef1f7); }

.at-math__body {
	padding: 0 var(--space-s, 1rem) var(--space-s, 1rem);
	font-size: var(--step--1, .9rem);
	color: var(--text-muted, #99a3b4);
	border-top: 1px solid var(--hairline, rgba(255,255,255,.055));
	padding-top: var(--space-s, 1rem);
}

.at-math__body p { max-width: none; }

/*
 * נוסחה — תמיד LTR. נוסחה מתמטית בתוך פסקה עברית מתפרקת לגמרי
 * בלי הבידוד הזה: הסימנים והמשתנים מתערבבים בסדר שגוי.
 */
.at-formula {
	direction: ltr;
	unicode-bidi: isolate;
	text-align: center;
	margin-block: var(--space-s, 1rem);
	padding: var(--space-s, 1rem);
	background: var(--bg-raised, #10141b);
	border-radius: var(--radius-s, 4px);
	font-family: var(--font-mono, monospace);
	font-size: var(--step-0, 1rem);
	color: var(--text, #eef1f7);
	line-height: 1.9;
	overflow-x: auto;
}

.at-formula em {
	color: var(--accent, #2fe3d0);
	font-style: normal;
}

/* טבלת הגדרת משתנים */
.at-vars {
	margin-block: var(--space-s, 1rem) 0;
	font-size: var(--step--2, .78rem);
}

.at-vars th {
	font-family: var(--font-mono, monospace);
	direction: ltr;
	text-align: right;
	white-space: nowrap;
	color: var(--accent, #2fe3d0);
	width: 1%;
}

/* ── תג רמת ודאות ── */

/*
 * מבדיל בין חישוב מדויק למודל מפושט. הגולש זכאי לדעת מתי מוצג לו
 * מספר גיאומטרי ומתי אינדקס איכותי.
 */
.at-confidence {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs, .25rem);
	padding: .1rem .5rem;
	border-radius: var(--radius-pill, 999px);
	font-size: .75rem;
	font-weight: 600;
	border: 1px solid currentColor;
}

.at-confidence--exact {
	color: var(--sig-ok, #4a9eff);
}

.at-confidence--model {
	color: var(--sig-warn, #f0883e);
}

/* הערת שוליים בתוך בלוק מתמטי */
.at-formula-note {
	margin-top: var(--space-s, 1rem);
	padding-top: var(--space-2xs, .5rem);
	border-top: 1px dashed var(--hairline, rgba(255,255,255,.055));
	font-size: var(--step--2, .78rem);
	color: var(--text-faint, #626d80);
}