/**
 * App nav — edge / dock families + position / mode / tone.
 * Isolated from input.css so family enqueue holds. Do not merge with Bottom menu.
 */
.tw-app-nav-section .tw-container {
	max-width: none;
	padding-inline: 0;
}

.tw-app-nav {
	--tw-app-nav-h: 4.25rem;
	--tw-app-nav-rail: 4.5rem;
	position: relative;
}

.tw-app-nav__list {
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-app-nav__item {
	flex: 1 1 0;
	min-width: 0;
}

.tw-app-nav__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.35rem 0.25rem;
	border: 0;
	border-radius: var(--tw-radius-control, 0.75rem);
	background: transparent;
	color: inherit;
	text-decoration: none;
	font: inherit;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.tw-app-nav__link:hover,
.tw-app-nav__link:focus-visible {
	color: var(--tw-color-brand-primary, #4f46e5);
	outline: none;
}

.tw-app-nav__link:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--tw-color-brand-primary, #4f46e5) 45%, transparent);
}

.tw-app-nav__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
}

.tw-app-nav__icon {
	width: 1.35rem;
	height: 1.35rem;
	display: block;
}

.tw-app-nav__text {
	font-size: 0.65rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tw-app-nav__item.is-active .tw-app-nav__link {
	color: var(--tw-color-brand-primary, #4f46e5);
}

.tw-app-nav__bar {
	display: flex;
	align-items: stretch;
	color: var(--tw-color-text, #0f172a);
	background: var(--tw-color-surface, #fff);
	border: 1px solid var(--tw-color-border, #e2e8f0);
	box-shadow: var(--tw-shadow-raised, 0 10px 30px rgba(15, 23, 42, 0.12));
	z-index: 35;
}

/* Live = viewport-fixed; preview = framed mock for showcase/builder */
.tw-app-nav--live .tw-app-nav__bar {
	position: fixed;
}

.tw-app-nav--preview {
	margin-inline: auto;
	max-width: 22rem;
	min-height: 16rem;
	border-radius: var(--tw-radius-large, 1.25rem);
	background:
		radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tw-color-brand-secondary, #64748b) 10%, transparent), transparent 55%),
		color-mix(in srgb, var(--tw-color-surface-alt, #f8fafc) 88%, var(--tw-color-brand-secondary, #64748b));
	border: 1px solid var(--tw-color-border, #e2e8f0);
	box-shadow: var(--tw-shadow-soft, 0 4px 16px rgba(15, 23, 42, 0.08));
	overflow: hidden;
}

.tw-app-nav--preview .tw-app-nav__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 12rem;
	padding: 1.5rem;
	color: var(--tw-color-muted, #64748b);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tw-app-nav--preview .tw-app-nav__bar {
	position: absolute;
}

/* Reserve viewport edge so fixed bars do not cover page content */
body:has(.tw-app-nav--always.tw-app-nav--live[data-position="bottom"]) {
	padding-block-end: var(--tw-app-nav-h, 4.25rem);
}
body:has(.tw-app-nav--always.tw-app-nav--live[data-position="top"]) {
	padding-block-start: var(--tw-app-nav-h, 4.25rem);
}
body:has(.tw-app-nav--always.tw-app-nav--live[data-position="start"]) {
	padding-inline-start: var(--tw-app-nav-rail, 4.5rem);
}
body:has(.tw-app-nav--always.tw-app-nav--live[data-position="end"]) {
	padding-inline-end: var(--tw-app-nav-rail, 4.5rem);
}

@media (max-width: 767.98px) {
	body:has(.tw-app-nav--mobile-only.tw-app-nav--live[data-position="bottom"]) {
		padding-block-end: var(--tw-app-nav-h, 4.25rem);
	}
	body:has(.tw-app-nav--mobile-only.tw-app-nav--live[data-position="top"]) {
		padding-block-start: var(--tw-app-nav-h, 4.25rem);
	}
	body:has(.tw-app-nav--mobile-only.tw-app-nav--live[data-position="start"]) {
		padding-inline-start: var(--tw-app-nav-rail, 4.5rem);
	}
	body:has(.tw-app-nav--mobile-only.tw-app-nav--live[data-position="end"]) {
		padding-inline-end: var(--tw-app-nav-rail, 4.5rem);
	}
}

/* Positions */
.tw-app-nav[data-position="bottom"] .tw-app-nav__bar {
	inset-inline: 0;
	inset-block-end: 0;
	inset-block-start: auto;
}

.tw-app-nav[data-position="top"] .tw-app-nav__bar {
	inset-inline: 0;
	inset-block-start: 0;
	inset-block-end: auto;
}

.tw-app-nav[data-position="start"] .tw-app-nav__bar,
.tw-app-nav[data-position="end"] .tw-app-nav__bar {
	inset-block: 0;
	width: var(--tw-app-nav-rail);
}

.tw-app-nav[data-position="start"] .tw-app-nav__bar {
	inset-inline-start: 0;
	inset-inline-end: auto;
}

.tw-app-nav[data-position="end"] .tw-app-nav__bar {
	inset-inline-end: 0;
	inset-inline-start: auto;
}

.tw-app-nav[data-position="start"] .tw-app-nav__list,
.tw-app-nav[data-position="end"] .tw-app-nav__list {
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	padding-block: 0.75rem;
}

.tw-app-nav--safe[data-position="bottom"] .tw-app-nav__bar {
	padding-block-end: env(safe-area-inset-bottom, 0px);
}

.tw-app-nav--safe[data-position="top"] .tw-app-nav__bar {
	padding-block-start: env(safe-area-inset-top, 0px);
}

.tw-app-nav--safe[data-position="start"] .tw-app-nav__bar {
	padding-inline-start: env(safe-area-inset-left, 0px);
}

.tw-app-nav--safe[data-position="end"] .tw-app-nav__bar {
	padding-inline-end: env(safe-area-inset-right, 0px);
}

/* Modes */
.tw-app-nav[data-mode="bar"] .tw-app-nav__bar {
	min-height: var(--tw-app-nav-h);
	border-radius: 0;
	padding-inline: 0.35rem;
}

.tw-app-nav[data-mode="pill"] .tw-app-nav__bar,
.tw-app-nav[data-mode="island"] .tw-app-nav__bar {
	inset-inline: 0.85rem;
	min-height: calc(var(--tw-app-nav-h) - 0.35rem);
	border-radius: 9999px;
	padding: 0.35rem 0.5rem;
	margin-block: 0.65rem;
}

.tw-app-nav[data-mode="island"] .tw-app-nav__bar {
	border-radius: var(--tw-radius-large, 1.25rem);
	background: color-mix(in srgb, var(--tw-color-surface, #fff) 92%, var(--tw-color-brand-secondary, #64748b));
	box-shadow: var(--tw-shadow-raised, 0 12px 36px rgba(15, 23, 42, 0.16));
}

.tw-app-nav[data-mode="dock"] .tw-app-nav__bar {
	border-radius: 0;
	padding-inline: 0.25rem;
	background: color-mix(in srgb, var(--tw-color-surface-alt, #f8fafc) 70%, var(--tw-color-surface, #fff));
}

.tw-app-nav[data-mode="minimal"] .tw-app-nav__bar {
	min-height: 3.5rem;
	border-radius: 0;
	border-inline: 0;
	box-shadow: none;
	background: color-mix(in srgb, var(--tw-color-surface, #fff) 92%, transparent);
}

.tw-app-nav[data-mode="glass"] .tw-app-nav__bar {
	min-height: var(--tw-app-nav-h);
	border-radius: 0;
	background: color-mix(in srgb, var(--tw-color-surface, #fff) 72%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: color-mix(in srgb, var(--tw-color-border, #e2e8f0) 70%, transparent);
}

/* Tones — match Cards ::card() skins */
.tw-app-nav[data-tone="raised"] .tw-app-nav__bar {
	box-shadow: var(--tw-shadow-raised, 0 12px 36px rgba(15, 23, 42, 0.16));
}

.tw-app-nav[data-tone="outline"] .tw-app-nav__bar,
.tw-app-nav[data-tone="bordered"] .tw-app-nav__bar {
	background: transparent;
	border-width: 1px;
	border-color: var(--tw-color-border, #e2e8f0);
	box-shadow: none;
}

.tw-app-nav[data-tone="soft"] .tw-app-nav__bar {
	background: var(--tw-color-surface-alt, #f8fafc);
	box-shadow: var(--tw-shadow-soft, 0 4px 16px rgba(15, 23, 42, 0.08));
	border-color: transparent;
}

.tw-app-nav[data-tone="glass"] .tw-app-nav__bar {
	background: color-mix(in srgb, var(--tw-color-surface, #fff) 70%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-color: color-mix(in srgb, var(--tw-color-page, #fff) 40%, var(--tw-color-border, #e2e8f0));
	box-shadow: var(--tw-shadow-soft, 0 4px 16px rgba(15, 23, 42, 0.08));
}

.tw-app-nav[data-tone="dark"] .tw-app-nav__bar {
	background: var(--tw-color-text, #0f172a);
	color: var(--tw-color-page, #f8fafc);
	border-color: color-mix(in srgb, var(--tw-color-page, #f8fafc) 12%, transparent);
}

.tw-app-nav[data-tone="dark"] .tw-app-nav__link:hover,
.tw-app-nav[data-tone="dark"] .tw-app-nav__link:focus-visible,
.tw-app-nav[data-tone="dark"] .tw-app-nav__item.is-active .tw-app-nav__link {
	color: var(--tw-color-brand-accent, #f59e0b);
}

.tw-app-nav[data-tone="bordered"] .tw-app-nav__bar {
	border-width: 2px;
	border-color: color-mix(in srgb, var(--tw-color-brand-secondary, #64748b) 35%, var(--tw-color-border, #e2e8f0));
}

.tw-app-nav[data-tone="accent"] .tw-app-nav__item.is-active .tw-app-nav__glyph {
	background: color-mix(in srgb, var(--tw-color-brand-accent, #f59e0b) 22%, transparent);
	border-radius: 9999px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tw-color-brand-accent, #f59e0b) 22%, transparent);
}

.tw-app-nav[data-tone="accent"] .tw-app-nav__item.is-active .tw-app-nav__link {
	color: var(--tw-color-brand-accent, #f59e0b);
}

.tw-app-nav[data-tone="minimal"] .tw-app-nav__text {
	display: none;
}

@media (min-width: 768px) {
	.tw-app-nav--mobile-only.tw-app-nav--live {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-app-nav__link {
		transition: none;
	}
}