/*
 * F-06: the shared five-tab primary navigation becomes the persistent mobile bar.
 *
 * This standalone sheet backs <nav class="primary-mobile-tab-bar"> in
 * src/routes/+layout.svelte at ≤480px. The identical fixed-bar rules also live
 * inline in that layout, so the two sources agree and neither fights the other;
 * this file spells the contract out once as a loadable static asset so the
 * mobile navigation is consistently defensible beyond the component-local
 * <style> block. It is loaded from src/app.html with a root-relative href (see
 * the mobile-primary-tabs regression spec) — a first-party static file, never a
 * build-assets placeholder.
 *
 * The active tab draws a 2px accent top-line (the only additive flourish over
 * the inline bar) so the current surface is unambiguous on a dense 5-tab row.
 */
@media (max-width: 480px) {
	.primary-mobile-tab-bar {
		position: fixed;
		z-index: 60;
		right: 0;
		bottom: 0;
		left: 0;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid var(--app-line);
		background: var(--app-bg);
	}

	.primary-mobile-tab-bar a {
		display: flex;
		min-width: 0;
		min-height: 44px;
		align-items: center;
		justify-content: center;
		padding: 0 0.25rem;
		color: var(--app-ink-soft);
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 1;
		text-align: center;
	}

	.primary-mobile-tab-bar a:is([aria-current='page'], .active) {
		box-shadow: inset 0 2px 0 var(--accent);
		color: var(--app-ink);
	}
}