/* ==========================================================================
   Phone tab bar (Shows, Music, Shop by default; Appearance > Menus > Bottom tabs)
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 899px) {
	:root { --tabbar-h: calc(66px + var(--safe-b)); }

	.tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 70;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: 8px;
		height: var(--tabbar-h);
		padding: 8px 10px calc(8px + var(--safe-b));
		border-top: 2px solid var(--red);
		background: linear-gradient(180deg, rgb(40 3 3 / 0.92), rgb(0 0 0 / 0.96));
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 -8px 30px rgb(255 69 69 / calc(0.3 * var(--glow-k)));
	}

	.tabbar__tab {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border: 2px solid var(--red-deep);
		border-radius: 2px;
		background: #0a0101;
		color: var(--white);
		font-family: var(--f-display);
		font-size: 12px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		overflow: hidden;
		transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s;
	}
	.tabbar__icon { width: 30px; }
	.tabbar__tab:active { transform: scale(0.96); }
	.tabbar__tab[aria-current='page'] {
		border-color: var(--red);
		background: linear-gradient(100deg, var(--red) 0%, #b42727 45%, #2a0404 100%);
		box-shadow: var(--glow);
	}

	/* Keep content clear of the bar, including when focus or a tap scrolls something into view. */
	html { scroll-padding-bottom: calc(var(--tabbar-h) + 12px); }
	.sheet__body { scroll-padding-bottom: calc(var(--tabbar-h) + 12px); }
	.phone { padding-bottom: calc(var(--tabbar-h) + 24px); }
	.sheet__body { padding-bottom: var(--tabbar-h); }
	.toasts { bottom: calc(var(--tabbar-h) + 12px); }
}

@media (max-width: 360px) {
	.tabbar__tab { flex-direction: column; gap: 2px; font-size: 10px; }
	.tabbar__icon { width: 24px; }
}