/* ==========================================================================
   Layout — app shell: top bar, rail (full → mini → drawer), main, tab bar, footer
   ========================================================================== */

.app__main {
	margin-left: var(--rail-w);
	padding-top: var(--topbar-h);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	transition: margin-left var(--t-med) var(--ease);
}

.main {
	flex: 1;
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 var(--gutter) var(--sp-16);
	outline: none;
}

.page-wrap { padding-top: var(--sp-10); }

/* ---------- Top bar ---------- */

.topbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	height: var(--topbar-h);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-4);
	padding: 0 var(--sp-4);
	background: color-mix(in srgb, var(--da-bg) 88%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--da-border);
}

.topbar__start,
.topbar__end {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.topbar__end { gap: var(--sp-3); }
.topbar__search-mobile { display: none; }

.logo {
	display: inline-flex;
	align-items: baseline;
	gap: 0.18em;
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	transform: skewX(-7deg);
	padding: 0 6px;
	white-space: nowrap;
}
.logo__damn { color: var(--da-text); }
.logo__angry { color: var(--da-red); text-shadow: 0 0 22px rgb(227 36 43 / 0.35); }
.logo--sm { font-size: 22px; }

.searchbar {
	position: relative;
	width: 100%;
	max-width: 640px;
	justify-self: center;
}
.searchbar__icon {
	position: absolute; left: 16px; top: 50%;
	transform: translateY(-50%);
	color: var(--da-text-2);
	width: 18px; height: 18px;
	pointer-events: none;
}
.searchbar__input {
	width: 100%;
	height: 42px;
	padding: 0 48px 0 46px;
	border-radius: var(--r-pill);
	border: 1px solid var(--da-border-strong);
	background: var(--da-surface-1);
	color: var(--da-text);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.searchbar__input::placeholder { color: var(--da-text-3); }
.searchbar__input:focus { outline: none; border-color: var(--da-red); box-shadow: 0 0 0 3px var(--da-red-soft); }
.searchbar__kbd {
	position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
	font: 600 11px/1 var(--font-body);
	padding: 4px 7px;
	border: 1px solid var(--da-border-strong);
	border-radius: 6px;
	color: var(--da-text-3);
}

.topbar__me .avatar { width: 36px; height: 36px; }

/* ---------- Rail ---------- */

.rail {
	position: fixed;
	top: var(--topbar-h);
	bottom: 0;
	left: 0;
	z-index: 40;
	width: var(--rail-w);
	background: var(--da-bg);
	border-right: 1px solid var(--da-border);
	transition: width var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.rail__scroll {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sp-3) var(--sp-3) var(--sp-6);
	scrollbar-width: thin;
	scrollbar-color: var(--da-surface-3) transparent;
}

.rail__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 42px;
	padding: 0 14px;
	border-radius: var(--r-md);
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--da-text);
	white-space: nowrap;
	transition: background var(--t-fast);
}
.rail__link .i { width: 21px; height: 21px; color: var(--da-text-2); }
.rail__link:hover { background: var(--da-surface-2); }
.rail__link[aria-current="page"] { background: var(--da-surface-2); font-weight: 700; }
.rail__link[aria-current="page"] .i { color: var(--da-red); }
.rail__link--cat .i { color: var(--cat); }
.rail__fresh {
	margin-left: auto;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--da-red);
	box-shadow: 0 0 0 3px var(--da-red-soft);
}

.rail__group {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--da-border);
}
.rail__heading {
	padding: 6px 14px 8px;
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--da-text-3);
}

.rail__foot {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--da-border);
	display: grid;
	gap: var(--sp-2);
}

.theme-toggle {
	display: flex; align-items: center; gap: 14px;
	min-height: 42px; padding: 0 14px;
	border-radius: var(--r-md);
	color: var(--da-text-2);
	font-weight: 500;
}
.theme-toggle:hover { background: var(--da-surface-2); color: var(--da-text); }
.theme-toggle__sun { display: none; }
[data-theme="light"] .theme-toggle__sun { display: inline-block; }
[data-theme="light"] .theme-toggle__moon { display: none; }

.rail__crisis {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	border-radius: var(--r-md);
	background: var(--da-surface-1);
	border: 1px solid var(--da-border);
	font-size: var(--fs-sm);
	color: var(--da-text-2);
}
.rail__crisis b { color: var(--da-text); }
.rail__crisis .i { color: var(--da-even); }

.rail-scrim {
	position: fixed; inset: var(--topbar-h) 0 0 0;
	z-index: 39;
	background: var(--da-overlay);
	animation: fade-in var(--t-med) var(--ease);
}

/* Desktop user-collapsed rail */
.app[data-rail="mini"] .app__main { margin-left: var(--rail-mini-w); }

.app[data-rail="mini"] .rail,
.rail--mini-auto {
	width: var(--rail-mini-w);
}

@media (min-width: 1280px) {
	.app[data-rail="mini"] .rail__scroll { padding: var(--sp-2) 4px; }
	.app[data-rail="mini"] .rail__group,
	.app[data-rail="mini"] .rail__foot { display: none; }
	.app[data-rail="mini"] .rail__link {
		flex-direction: column; justify-content: center;
		gap: 6px; min-height: 72px; padding: 0 2px;
		font-size: 10px; font-weight: 600;
	}
	.app[data-rail="mini"] .rail__link span { white-space: normal; text-align: center; line-height: 1.15; }
}

/* 1024–1279: mini rail by default, full rail as overlay when toggled */
@media (max-width: 1279px) and (min-width: 1024px) {
	.app__main { margin-left: var(--rail-mini-w); }
	.app:not(.is-drawer) .rail { width: var(--rail-mini-w); }
	.app:not(.is-drawer) .rail__scroll { padding: var(--sp-2) 4px; }
	.app:not(.is-drawer) .rail__group,
	.app:not(.is-drawer) .rail__foot { display: none; }
	.app:not(.is-drawer) .rail__link {
		flex-direction: column; justify-content: center;
		gap: 6px; min-height: 72px; padding: 0 2px;
		font-size: 10px; font-weight: 600;
	}
	.app:not(.is-drawer) .rail__link span { white-space: normal; text-align: center; line-height: 1.15; }
	.app.is-drawer .rail { box-shadow: var(--shadow-2); }
}

/* < 1024: rail is an off-canvas drawer */
@media (max-width: 1023px) {
	.app__main { margin-left: 0; }
	.rail { transform: translateX(-100%); }
	.app.is-drawer .rail { transform: none; box-shadow: var(--shadow-2); }
}

/* ---------- Mobile tab bar ---------- */

.tabbar { display: none; }

@media (max-width: 767px) {
	:root { --topbar-h: 58px; }

	.topbar { gap: var(--sp-2); padding: 0 var(--sp-2) 0 var(--sp-1); grid-template-columns: auto 1fr auto; }
	.topbar .searchbar { display: none; }
	.topbar.is-searching .searchbar {
		display: block; position: absolute; inset: 8px 12px; width: auto; max-width: none;
	}
	.topbar__search-mobile { display: inline-flex; }
	.topbar .btn--rip,
	.topbar .topbar__signin { display: none; }
	.topbar .btn--light { height: 36px; padding: 0 14px; font-size: var(--fs-sm); }
	.topbar__end { justify-content: flex-end; gap: var(--sp-1); }
	.logo { font-size: 24px; }

	.app__main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

	.tabbar {
		position: fixed; inset: auto 0 0 0; z-index: 50;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: center;
		height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: color-mix(in srgb, var(--da-bg) 92%, transparent);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-top: 1px solid var(--da-border);
	}
	.tabbar__item {
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		font-size: 10.5px; font-weight: 600;
		color: var(--da-text-2);
	}
	.tabbar__item .i { width: 22px; height: 22px; }
	.tabbar__item[aria-current="page"] { color: var(--da-text); }
	.tabbar__item[aria-current="page"] .i { color: var(--da-red); }
	.tabbar__rip {
		justify-self: center;
		display: grid; place-items: center;
		width: 54px; height: 54px;
		margin-top: -22px;
		border-radius: 50%;
		background: var(--da-red);
		color: #fff;
		box-shadow: 0 0 0 5px var(--da-bg), 0 8px 24px rgb(227 36 43 / 0.45);
	}
	.tabbar__rip .i { width: 28px; height: 28px; stroke-width: 2.6; }
}

/* ---------- Demo ribbon ---------- */

.demo-ribbon {
	position: fixed;
	right: 16px; bottom: 16px; z-index: 45;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--da-glass);
	backdrop-filter: blur(10px);
	border: 1px solid var(--da-border);
	font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
	color: var(--da-text-2);
	pointer-events: none;
}
.demo-ribbon .i { color: var(--da-amber); width: 14px; height: 14px; }
@media (max-width: 767px) {
	.demo-ribbon { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); right: 12px; }
}

/* ---------- Footer ---------- */

.site-footer {
	margin-top: auto;
	padding: var(--sp-10) var(--gutter) var(--sp-8);
	border-top: 1px solid var(--da-border);
	background: var(--da-surface-1);
}

.crisis-row {
	display: flex; align-items: flex-start; gap: 14px;
	max-width: var(--content-max);
	margin: 0 auto var(--sp-10);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--r-md);
	background: var(--da-even-soft);
	border: 1px solid color-mix(in srgb, var(--da-even) 35%, transparent);
	font-size: var(--fs-sm);
	color: var(--da-text);
}
.crisis-row .i { color: var(--da-even); width: 22px; height: 22px; margin-top: 1px; }
.crisis-row a { text-decoration: underline; }

.site-footer__grid {
	max-width: var(--content-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(140px, 1fr));
	gap: var(--sp-8);
}
.site-footer__slogan {
	margin-top: var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.site-footer__pledge {
	margin-top: var(--sp-3);
	display: flex; gap: 8px;
	max-width: 34ch;
	font-size: var(--fs-sm);
	color: var(--da-text-2);
}
.site-footer__pledge .i { color: var(--da-red); margin-top: 2px; }
.site-footer__col h3 {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--da-text-3);
}
.site-footer__col li + li { margin-top: 8px; }
.site-footer__col a { font-size: var(--fs-sm); color: var(--da-text-2); }
.site-footer__col a:hover { color: var(--da-text); }

.site-footer__bottom {
	max-width: var(--content-max);
	margin: var(--sp-10) auto 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--da-border);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
	font-size: var(--fs-xs);
	color: var(--da-text-3);
}

@media (max-width: 1279px) {
	.site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}

@keyframes fade-in { from { opacity: 0; } }