/* יוסף האוסף — layout: מעטפת, כותרת עליונה, ניווט, פוטר, רשתות */
@layer layout {
	.ui_shell { display: flex; flex-direction: column; min-block-size: 100dvh; }

	.ui_skip {
		position: absolute;
		inset-inline-start: var(--space_3);
		inset-block-start: calc(var(--space_8) * -1);
		z-index: var(--z_skip);
		padding: var(--space_3) var(--space_4);
		min-block-size: var(--size_tap_target);
		background: var(--color_primary);
		color: var(--color_text_on_primary);
		border-radius: var(--radius_md);
		font-weight: var(--font_weight_bold);
		text-decoration: none;
	}
	.ui_skip:focus-visible { inset-block-start: var(--space_3); }

	/* --- header --- */
	.ui_header {
		position: sticky;
		inset-block-start: 0;
		z-index: var(--z_header);
		background: var(--color_header_bg);
		-webkit-backdrop-filter: blur(var(--blur_glass_strong)) saturate(var(--saturate_glass));
		backdrop-filter: blur(var(--blur_glass_strong)) saturate(var(--saturate_glass));
		border-block-end: var(--border_width) solid var(--color_border);
	}
	.ui_header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space_2) var(--space_4);
		inline-size: min(100% - 2 * var(--gutter), var(--size_content));
		margin-inline: auto;
		padding-block: var(--space_2);
	}
	.ui_brand { display: inline-flex; align-items: center; gap: var(--space_3); color: var(--color_text); text-decoration: none; font-weight: var(--font_weight_bold); font-size: var(--font_size_lg); min-block-size: var(--size_tap_target); }
	.ui_brand:hover { color: var(--color_text); text-decoration: none; }
	.ui_brand__mark { inline-size: calc(var(--size_logo) * 1.125); block-size: var(--size_logo); flex: none; }
	.logo { overflow: visible; }
	.logo__stop_a { stop-color: var(--color_rose); }
	.logo__stop_b { stop-color: var(--color_logo_clip_end); }
	.logo__sheets { filter: drop-shadow(0 5px 6px var(--color_glow_b)); }
	.logo__sheet_back { fill: var(--color_logo_sheet_back); stroke: var(--color_sparkle); stroke-width: 1.5; }
	.logo__sheet_mid { fill: var(--color_logo_sheet_mid); stroke: var(--color_logo_line_soft); stroke-width: 1.5; }
	.logo__sheet_front { fill: var(--color_logo_sheet_front); stroke: var(--color_ocean); stroke-width: 2.5; }
	.logo__line_a, .logo__line_b, .logo__line_c { stroke-linecap: round; stroke-width: 2.2; }
	.logo__line_a { stroke: var(--color_sparkle); }
	.logo__line_b { stroke: var(--color_logo_line_soft); }
	.logo__line_c { stroke: var(--color_logo_sheet_back); }
	.logo__clip { fill: none; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
	.logo__sparkle { fill: var(--color_sparkle); transform-box: fill-box; transform-origin: center; }
	@keyframes logo_float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--float_distance)); } }
	@keyframes logo_twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.8; } }
	.ui_brand__tag { font-size: var(--font_size_xs); font-weight: var(--font_weight_medium); color: var(--color_text_muted); display: none; }

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

	.ui_nav { order: 3; inline-size: 100%; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
	.ui_nav::-webkit-scrollbar { display: none; }
	.ui_nav__list { display: flex; gap: var(--space_1); list-style: none; padding: 0; inline-size: max-content; }

	@media (min-width: 62em) {
		.ui_nav { order: 0; inline-size: auto; margin: 0; padding: 0; overflow: visible; flex: 1; }
		.ui_nav__list { inline-size: auto; }
		.ui_brand__tag { display: inline; }
	}

	/* --- main --- */
	.ui_main { flex: 1; inline-size: min(100% - 2 * var(--gutter), var(--size_content)); margin-inline: auto; padding-block: var(--space_5) var(--space_7); display: flex; flex-direction: column; gap: var(--space_5); }
	.ui_main--narrow { inline-size: min(100% - 2 * var(--gutter), var(--size_narrow)); }
	.ui_main--center { justify-content: center; }

	.ui_pagehead { display: flex; flex-direction: column; gap: var(--space_2); }
	.ui_pagehead__lede { color: var(--color_text_muted); max-inline-size: 60ch; }
	.ui_pagehead__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space_3); }

	/* --- footer --- */
	.ui_footer { padding-block: var(--space_5); border-block-start: var(--border_width) solid var(--color_border); color: var(--color_text_muted); font-size: var(--font_size_sm); }
	.ui_footer__inner { inline-size: min(100% - 2 * var(--gutter), var(--size_content)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space_2) var(--space_4); }

	/* --- grids / stacks --- */
	.stack { display: flex; flex-direction: column; gap: var(--space_4); }
	.stack--tight { gap: var(--space_2); }
	.stack--loose { gap: var(--space_5); }
	.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2) var(--space_3); }
	.cluster--end { justify-content: flex-end; }
	.cluster--between { justify-content: space-between; }
	.grid_two { display: grid; gap: var(--space_4); grid-template-columns: 1fr; }
	@media (min-width: 48em) { .grid_two { grid-template-columns: 1fr 1fr; } }
}