/* יוסף האוסף — components. API של כל רכיב: --my_* */
@layer components {

	/* ---------- card (זכוכית) ---------- */
	.card {
		--my_pad: var(--space_5);
		padding: var(--my_pad);
		background: var(--color_surface);
		-webkit-backdrop-filter: blur(var(--blur_glass)) saturate(var(--saturate_glass));
		backdrop-filter: blur(var(--blur_glass)) saturate(var(--saturate_glass));
		border: var(--border_width) solid var(--color_border);
		border-block-start-color: var(--color_rim);
		border-inline-start-color: var(--color_rim);
		border-radius: var(--radius_lg);
		background-image: var(--gradient_sheen);
		box-shadow: var(--shadow_inset), var(--shadow_card);
		display: flex;
		flex-direction: column;
		gap: var(--space_4);
		min-inline-size: 0;
	}
	.card--lift { transition: transform var(--transition_base), box-shadow var(--transition_base); }
	.card--lift:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow_inset), var(--shadow_lift); }
	.card--flush { --my_pad: 0; overflow: hidden; }
	.card--tinted { background: var(--color_primary_soft); }
	.card__head { display: flex; align-items: center; gap: var(--space_3); }
	.card__title { font-size: var(--font_size_lg); }
	.card__hint { color: var(--color_text_muted); font-size: var(--font_size_sm); }
	.card__pad { padding: var(--space_5); }

	.step_num {
		flex: none;
		display: inline-grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		border-radius: var(--radius_pill);
		background: var(--gradient_primary);
		color: var(--color_text_on_primary);
		font-weight: var(--font_weight_bold);
		box-shadow: var(--shadow_button);
	}

	/* ---------- button ---------- */
	.button {
		--my_bg: var(--color_surface_solid);
		--my_color: var(--color_text);
		--my_border: var(--color_border_strong);
		--my_shadow: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space_2);
		inline-size: auto;
		min-block-size: var(--size_tap_target);
		padding: var(--space_2) var(--space_5);
		background: var(--my_bg);
		color: var(--my_color);
		border: var(--border_width) solid var(--my_border);
		border-radius: var(--radius_pill);
		box-shadow: var(--my_shadow);
		font-weight: var(--font_weight_medium);
		line-height: var(--line_height_tight);
		text-decoration: none;
		cursor: pointer;
		touch-action: manipulation;
		transition: background-color var(--transition_fast), transform var(--transition_base), box-shadow var(--transition_base), color var(--transition_fast);
	}
	.button:hover { background: color-mix(in srgb, var(--my_bg), var(--color_text_on_primary) 22%); color: var(--my_color); text-decoration: none; }
	.button:active { transform: scale(0.98); }
	.button--primary { --my_bg: var(--gradient_primary); --my_color: var(--color_text_on_primary); --my_border: transparent; --my_shadow: var(--shadow_button); font-weight: var(--font_weight_bold); }
	.button--primary:hover { background: var(--gradient_primary_hover); transform: rotate(var(--tilt)); }
	.button--secondary { --my_bg: var(--color_primary_soft); --my_color: var(--color_link); --my_border: transparent; }
	.button--danger { --my_bg: var(--color_bad_soft); --my_color: var(--color_bad); --my_border: transparent; }
	.button--small { min-block-size: var(--size_tap_target); padding-inline: var(--space_4); font-size: var(--font_size_sm); }
	.button--block { display: flex; inline-size: 100%; }
	.button[disabled], .button.is_loading { opacity: 0.65; cursor: progress; pointer-events: none; }
	.button.is_loading::before {
		content: "";
		inline-size: var(--size_spinner);
		block-size: var(--size_spinner);
		border-radius: var(--radius_pill);
		border: var(--border_width_thick) solid currentcolor;
		border-inline-end-color: transparent;
		animation: ui_spin 700ms linear infinite;
	}
	@keyframes ui_spin { to { transform: rotate(360deg); } }

	.link_button { background: none; border: 0; padding: 0; color: var(--color_link); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-block-size: var(--size_tap_target); }

	/* ---------- nav pill + theme toggle ---------- */
	.nav_link {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--size_tap_target);
		padding: var(--space_1) var(--space_4);
		border-radius: var(--radius_pill);
		color: var(--color_text_muted);
		font-weight: var(--font_weight_medium);
		font-size: var(--font_size_sm);
		text-decoration: none;
		white-space: nowrap;
		transition: background-color var(--transition_fast), color var(--transition_fast);
	}
	.nav_link:hover { background: var(--color_primary_soft); color: var(--color_text); text-decoration: none; }
	.nav_link[aria-current="page"] { background: var(--color_primary); color: var(--color_text_on_primary); }

	.icon_button {
		display: inline-grid;
		place-items: center;
		inline-size: var(--size_tap_target);
		block-size: var(--size_tap_target);
		border-radius: var(--radius_pill);
		border: var(--border_width) solid var(--color_border);
		background: var(--color_surface);
		color: var(--color_text);
		cursor: pointer;
		transition: background-color var(--transition_fast), transform var(--transition_base);
	}
	.icon_button:hover { background: var(--color_primary_soft); transform: rotate(var(--tilt)); }
	.icon_button svg { inline-size: var(--size_icon); block-size: var(--size_icon); }
	.theme_icon--sun { display: none; }
	:root[data-theme="dark"] .theme_icon--sun { display: block; }
	:root[data-theme="dark"] .theme_icon--moon { display: none; }
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .theme_icon--sun { display: block; }
		:root:not([data-theme="light"]) .theme_icon--moon { display: none; }
	}

	.logout_link { color: var(--color_text_muted); font-size: var(--font_size_sm); display: inline-flex; align-items: center; min-block-size: var(--size_tap_target); padding-inline: var(--space_2); }

	/* ---------- forms ---------- */
	.field { display: flex; flex-direction: column; gap: var(--space_1); min-inline-size: 0; }
	.field__label { font-weight: var(--font_weight_medium); font-size: var(--font_size_sm); }
	.field__hint { color: var(--color_text_muted); font-size: var(--font_size_sm); }
	.input, .select, .textarea {
		inline-size: 100%;
		min-block-size: var(--size_tap_target);
		padding: var(--space_2) var(--space_4);
		background: var(--color_input_bg);
		color: var(--color_text);
		border: var(--border_width) solid var(--color_border_strong);
		border-radius: var(--radius_md);
		transition: border-color var(--transition_fast), box-shadow var(--transition_fast);
	}
	.input:hover, .select:hover, .textarea:hover { border-color: var(--color_primary); }
	.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--color_primary); box-shadow: 0 0 0 var(--focus_ring_width) var(--color_primary_soft); }
	.textarea { resize: vertical; line-height: var(--line_height_base); font-size: var(--font_size_sm); }
	.input--short { max-inline-size: 14rem; }
	.input--code { max-inline-size: var(--size_code_input); text-align: center; font-family: var(--font_family_mono); font-size: var(--font_size_xl); letter-spacing: 0.35em; padding-inline: var(--space_3); }
	.input--phone { direction: ltr; text-align: start; }
	/* טלפון = שני שדות (רכיב phone של המנוע): select קידומת + מספר ספרות */
	.field--phone_split { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
	.field--phone_split > .field__label { padding: 0; margin-block-end: var(--space_1); }
	.field__parts { display: flex; gap: var(--space_2); align-items: stretch; }
	.field__part--prefix { flex: 0 0 8.5rem; }
	.field__part--number { flex: 1 1 auto; min-inline-size: 0; }
	.field__error { min-block-size: 1.4em; color: var(--color_bad); font-size: var(--font_size_sm); }
	.field_row { display: grid; gap: var(--space_4); grid-template-columns: 1fr; }
	@media (min-width: 40em) { .field_row { grid-template-columns: repeat(2, minmax(0, 14rem)); } .field_row--wide { grid-template-columns: minmax(0, 14rem) auto minmax(0, 1fr); align-items: end; } }

	.fieldset { border: var(--border_width) solid var(--color_border); border-radius: var(--radius_md); padding: var(--space_4) var(--space_5) var(--space_5); display: flex; flex-direction: column; gap: var(--space_3); min-inline-size: 0; background: var(--color_primary_soft); }
	.fieldset__legend { padding-inline: var(--space_2); font-weight: var(--font_weight_bold); }

	.choice { display: flex; align-items: flex-start; gap: var(--space_3); min-block-size: var(--size_tap_target); padding-block: var(--space_1); cursor: pointer; }
	.choice input { flex: none; inline-size: 1.4rem; block-size: 1.4rem; margin-block-start: 0.2rem; accent-color: var(--color_primary); cursor: pointer; }

	/* ---------- alert / note / empty ---------- */
	.alert {
		--my_bg: var(--color_idle_soft);
		--my_color: var(--color_text);
		--my_accent: var(--color_idle);
		display: flex;
		align-items: flex-start;
		gap: var(--space_3);
		padding: var(--space_3) var(--space_4);
		background: var(--my_bg);
		color: var(--my_color);
		border: var(--border_width) solid var(--my_accent);
		border-inline-start-width: var(--space_1);
		border-radius: var(--radius_md);
		font-weight: var(--font_weight_medium);
	}
	.alert--ok { --my_bg: var(--color_ok_soft); --my_accent: var(--color_ok); }
	.alert--error { --my_bg: var(--color_bad_soft); --my_accent: var(--color_bad); }
	.alert--warn { --my_bg: var(--color_warn_soft); --my_accent: var(--color_warn); }
	.alert__icon { flex: none; font-weight: var(--font_weight_bold); color: var(--my_accent); }

	.alert--ok .alert__icon::before { content: "✔"; }
	.alert--error .alert__icon::before { content: "✖"; }
	.alert--warn .alert__icon::before { content: "⚠"; }

	.note { color: var(--color_text_muted); }
	.empty { text-align: center; padding: var(--space_6) var(--space_4); color: var(--color_text_muted); border: var(--border_width_thick) dashed var(--color_border); border-radius: var(--radius_md); }

	/* ---------- badge ---------- */
	.badge {
		--my_bg: var(--color_idle_soft);
		--my_color: var(--color_idle);
		display: inline-flex;
		align-items: center;
		gap: var(--space_2);
		padding: var(--space_1) var(--space_3);
		background: var(--my_bg);
		color: var(--my_color);
		border-radius: var(--radius_pill);
		font-size: var(--font_size_sm);
		font-weight: var(--font_weight_medium);
		white-space: nowrap;
	}
	.badge::before { content: ""; inline-size: var(--size_dot); block-size: var(--size_dot); border-radius: var(--radius_pill); background: currentcolor; }
	.badge--ok { --my_bg: var(--color_ok_soft); --my_color: var(--color_ok); }
	.badge--warn { --my_bg: var(--color_warn_soft); --my_color: var(--color_warn); }
	.badge--bad { --my_bg: var(--color_bad_soft); --my_color: var(--color_bad); }
	.badge--idle { --my_bg: var(--color_idle_soft); --my_color: var(--color_idle); }

	/* ---------- table ---------- */
	.table_wrap { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius_md); }
	.table { inline-size: 100%; border-collapse: collapse; font-size: var(--font_size_sm); }
	.table caption { text-align: start; font-weight: var(--font_weight_bold); padding-block-end: var(--space_3); font-size: var(--font_size_base); }
	.table th, .table td { text-align: start; padding: var(--space_3) var(--space_4); border-block-end: var(--border_width) solid var(--color_border); vertical-align: top; }
	.table thead th { font-weight: var(--font_weight_bold); color: var(--color_text_muted); background: var(--color_surface_strong); white-space: nowrap; }
	.table tbody tr { transition: background-color var(--transition_fast); }
	.table tbody tr:hover { background: var(--color_row_hover); }
	.table { overflow-wrap: break-word; }
	.table--medium { min-inline-size: 38rem; }
	.table--wide { min-inline-size: 78rem; }
	.table--wide th, .table--wide td { min-inline-size: 7rem; }
	.table .cell_actions { white-space: nowrap; }
	.table .cell_group { background: var(--color_primary_soft); font-weight: var(--font_weight_bold); }

	/* טבלת מפתח-ערך — במובייל מתקפלת לשורות */
	.kv { inline-size: 100%; border-collapse: collapse; }
	.kv th, .kv td { padding: var(--space_3) var(--space_4); border-block-end: var(--border_width) solid var(--color_border); text-align: start; vertical-align: top; }
	.kv th { color: var(--color_text_muted); font-weight: var(--font_weight_medium); inline-size: 11rem; white-space: nowrap; }
	@media (max-width: 39.99em) {
		.kv, .kv tbody, .kv tr, .kv th, .kv td { display: block; inline-size: auto; }
		.kv tr { padding-block: var(--space_2); border-block-end: var(--border_width) solid var(--color_border); }
		.kv th, .kv td { border: 0; padding: var(--space_1) 0; white-space: normal; }
		.kv th { font-size: var(--font_size_sm); }
	}

	/* ---------- progress ---------- */
	.progress { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: var(--size_progress); border: 0; border-radius: var(--radius_pill); background: var(--color_primary_soft); overflow: hidden; }
	.progress::-webkit-progress-bar { background: var(--color_primary_soft); }
	.progress::-webkit-progress-value { background: linear-gradient(90deg, var(--color_primary), var(--color_tertiary)); border-radius: var(--radius_pill); transition: inline-size var(--transition_base); }
	.progress::-moz-progress-bar { background: var(--color_primary); border-radius: var(--radius_pill); }

	/* ---------- stat chips (תוצאות) ---------- */
	.stats { display: grid; gap: var(--space_3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	@media (min-width: 48em) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
	.stat { padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--color_primary_soft); display: flex; flex-direction: column; }
	.stat__value { font-size: var(--font_size_xl); font-weight: var(--font_weight_bold); line-height: var(--line_height_tight); }
	.stat__label { color: var(--color_text_muted); font-size: var(--font_size_sm); }

	/* ---------- download banner ---------- */
	.download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space_3); padding: var(--space_4) var(--space_5); border-radius: var(--radius_md); background: var(--color_ok_soft); border: var(--border_width) solid var(--color_ok); }
	.download--soft { background: var(--color_idle_soft); border-color: var(--color_border); }
	.download__meta { color: var(--color_text_muted); font-size: var(--font_size_sm); }

	/* ---------- verdict ---------- */
	.verdict { display: flex; flex-direction: column; gap: var(--space_2); padding: var(--space_4) var(--space_5); border-radius: var(--radius_md); border: var(--border_width) solid var(--color_border); background: var(--color_idle_soft); }
	.verdict__title { display: flex; align-items: center; gap: var(--space_3); font-size: var(--font_size_lg); }
	.verdict--in, .verdict--ours { background: var(--color_ok_soft); } .verdict--in .verdict__title, .verdict--ours .verdict__title { color: var(--color_ok); }
	.verdict--review, .verdict--unknown { background: var(--color_warn_soft); } .verdict--review .verdict__title, .verdict--unknown .verdict__title { color: var(--color_warn); }
	.verdict--suspect { background: var(--color_bad_soft); } .verdict--suspect .verdict__title { color: var(--color_bad); }
	.verdict__why { color: var(--color_text_muted); }

	/* ---------- DataTables (על גבי vendor) ---------- */
	.dt-container { font-size: var(--font_size_sm); display: flex; flex-direction: column; gap: var(--space_3); }
	.dt-container .dt-layout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space_3); margin: 0; }
	.dt-container .dt-layout-cell { padding: 0; }
	.dt-container .dt-layout-cell.dt-layout-full { inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
	.dt-container .dt-search { display: flex; align-items: center; gap: var(--space_2); }
	.dt-container .dt-length { display: flex; align-items: center; gap: var(--space_2); }
	.dt-container .dt-search input, .dt-container .dt-length select { min-block-size: var(--size_tap_target); padding: var(--space_1) var(--space_3); background: var(--color_input_bg); color: var(--color_text); border: var(--border_width) solid var(--color_border_strong); border-radius: var(--radius_md); }
	.dt-container .dt-paging .dt-paging-button { min-inline-size: var(--size_tap_target); min-block-size: var(--size_tap_target); border-radius: var(--radius_pill); color: var(--color_text); border: var(--border_width) solid transparent; background: none; }
	.dt-container .dt-paging .dt-paging-button:hover { background: var(--color_primary_soft); color: var(--color_text); border-color: transparent; }
	.dt-container .dt-paging .dt-paging-button.current, .dt-container .dt-paging .dt-paging-button.current:hover { background: var(--color_primary); color: var(--color_text_on_primary); border-color: transparent; }
	.dt-container .dt-paging .dt-paging-button.disabled { opacity: 0.45; }
	.dt-container .dt-info { color: var(--color_text_muted); }
	table.dataTable { color: var(--color_text); }
	table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { border-block-end: var(--border_width) solid var(--color_border); }
	table.dataTable > tbody > tr { background: transparent; }
	table.dataTable.display > tbody > tr > *, table.dataTable > tbody > tr > * { box-shadow: none; }
	table.dataTable > tbody > tr:hover > * { background: var(--color_row_hover); box-shadow: none; }

	/* ---------- rule_builder: בונה תנאים שטוח (שדה · אופרציה · ערך, וגם/או) ---------- */
	.rule_builder { display: flex; flex-direction: column; gap: var(--space_2); }
	.rule_rows { display: flex; flex-direction: column; gap: var(--space_1); }
	.rule_head { display: none; }
	.rule_row {
		display: flex;
		flex-direction: column;
		gap: var(--space_3);
		padding: var(--space_3);
		background: var(--color_input_bg);
		border: var(--border_width) solid var(--color_border);
		border-radius: var(--radius_md);
	}
	.rule_row__cells { display: flex; flex-direction: column; gap: var(--space_2); }
	.rule_row__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2); }
	.rule_row__value .input { flex: 1 1 10rem; min-inline-size: 0; }
	.rule_row__none { color: var(--color_text_muted); font-size: var(--font_size_sm); }
	.rule_row__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2); }
	.rule_row__remove { margin-inline-start: auto; }
	.rule_paren {
		min-inline-size: var(--size_tap_target);
		min-block-size: var(--size_tap_target);
		padding: 0;
		border: var(--border_width) dashed var(--color_border);
		border-radius: var(--radius_md);
		background: transparent;
		color: var(--color_text_muted);
		font: inherit;
		font-size: var(--font_size_lg);
		font-weight: var(--font_weight_bold);
		direction: ltr;
		cursor: pointer;
	}
	.rule_paren_group { display: inline-flex; align-items: stretch; gap: var(--space_1); }
	.rule_paren_remove { min-inline-size: var(--size_tap_target); min-block-size: var(--size_tap_target); padding: 0; border: var(--border_width) solid var(--color_border); border-radius: var(--radius_md); background: transparent; color: var(--color_text); font: inherit; font-size: var(--font_size_lg); cursor: pointer; }
	.rule_paren_remove[hidden] { display: none; }
	.rule_live { margin-block-start: var(--space_2); }
	.rule_paren--on { border-style: solid; border-color: var(--color_rose); color: var(--color_text); background: var(--color_row_hover); }
	.rule_row__cells { align-items: stretch; }
	.rule_row { --my_depth: 0; margin-inline-start: calc(var(--my_depth) * var(--space_5)); border-inline-start: var(--border_width_thick) solid var(--color_border); }
	.rule_row[data-depth="1"] { --my_depth: 1; border-inline-start-color: var(--color_sparkle); }
	.rule_row[data-depth="2"] { --my_depth: 2; border-inline-start-color: var(--color_rose); }
	.rule_row[data-depth="3"] { --my_depth: 3; border-inline-start-color: var(--color_sparkle); }
	.rule_row[data-depth="4"] { --my_depth: 4; border-inline-start-color: var(--color_rose); }
	.rule_add_bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2); padding-block-start: var(--space_2); }
	.rule_add_bar__label { font-size: var(--font_size_sm); color: var(--color_text_muted); }
	.rule_link {
		align-self: center;
		min-block-size: var(--size_tap_target);
		padding-inline: var(--space_4);
		border: var(--border_width) solid var(--color_border);
		border-radius: var(--radius_pill);
		background: var(--color_surface);
		color: var(--color_text);
		font: inherit;
		font-weight: var(--font_weight_medium);
		cursor: pointer;
	}
	.rule_link--and { border-color: var(--color_sparkle); }
	.rule_link--or { border-color: var(--color_rose); margin-block: var(--space_2); }
	.rule_link:hover { background: var(--color_row_hover); }
	@media (min-width: 60rem) {
		.rule_head, .rule_row__cells { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space_2); align-items: center; }
		.rule_head { padding-inline: var(--space_3); font-size: var(--font_size_sm); font-weight: var(--font_weight_medium); color: var(--color_text_muted); }
		.rule_row { flex-direction: row; align-items: center; }
		.rule_row__cells { flex: 1 1 auto; }
	}
	.rule_card { display: flex; flex-direction: column; gap: var(--space_3); padding: var(--space_4); background: var(--color_input_bg); border: var(--border_width) solid var(--color_border); border-radius: var(--radius_md); }
	.rule_card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2) var(--space_3); }
	.rule_card__name { font-size: var(--font_size_base); flex: 1 1 10rem; }
	.rule_summary { line-height: var(--line_height_base); }
	.rule_explain { margin: 0; padding: var(--space_3); border-inline-start: var(--border_width_thick) solid var(--color_sparkle); border-radius: var(--radius_sm); background: var(--color_row_hover); line-height: var(--line_height_base); }
	.rule_word { color: var(--color_text_muted); font-weight: var(--font_weight_medium); }
	.rule_query { margin-block-start: var(--space_2); font-size: var(--font_size_sm); color: var(--color_text_muted); }
	.rule_query summary { cursor: pointer; min-block-size: var(--size_tap_target); display: flex; align-items: center; }
}