/* Both layouts present the same authorized destinations; mobile appearance stays unchanged. */
.afa-portal .afa-portal__content { min-width: 0; }
.afa-portal .afa-portal__mobile-bar { display: none; }
.afa-portal .afa-portal__sidebar-tooltip { display: none; }

@media (min-width: 900px) {
	.afa-portal--with-navigation {
		--afa-portal-sidebar-width: 230px;
		display: grid; grid-template-columns: var(--afa-portal-sidebar-width) minmax(0, 1fr);
		align-items: start; gap: var(--afa-space-4);
	}
	.afa-portal--with-navigation > .afa-portal__nav {
		display: block; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);
		min-width: 0; margin: 0; padding: 0 12px 0 0;
		border-bottom: 0; border-inline-end: 1px solid var(--afa-color-border);
		max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 32px);
		overflow-y: auto; overscroll-behavior: contain;
	}
	.afa-portal .afa-portal__desktop-navigation { display: flex; flex-direction: column; gap: 16px; }
	.afa-portal .afa-portal__nav-group-title { margin: 0 0 6px; padding-inline: 12px; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--afa-color-muted); }
	.afa-portal .afa-portal__desktop-navigation .afa-portal__nav-link { display: flex; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
	.afa-portal .afa-portal__desktop-navigation .afa-portal__nav-link svg { width: 22px; height: 22px; flex: 0 0 22px; }
	.afa-portal .afa-portal__desktop-navigation .afa-portal__nav-link.is-active { background: var(--afa-portal-color-primary, var(--afa-color-primary)); color: var(--afa-portal-color-on-primary, var(--afa-color-surface)); border-color: currentColor; font-weight: 700; }
	.afa-portal .afa-portal__desktop-navigation .afa-portal__nav-link:focus-visible { outline: 2px solid var(--afa-color-primary); outline-offset: -2px; }
	.afa-portal--with-navigation[data-sidebar-collapsed="true"] { --afa-portal-sidebar-width: 68px; }
	.afa-portal[data-sidebar-collapsed="true"] .afa-portal__desktop-navigation .afa-portal__nav-link { justify-content: center; padding-inline: 0; width: 100%; }
	.afa-portal[data-sidebar-collapsed="true"] .afa-portal__desktop-navigation .afa-portal__nav-link > span { display: none; }
	.afa-portal[data-sidebar-collapsed="true"] .afa-portal__nav-group-title { position: relative; overflow: hidden; text-indent: calc(100% + 24px); white-space: nowrap; }
	.afa-portal[data-sidebar-collapsed="true"] .afa-portal__nav-group-title::after { content: ""; position: absolute; inset-inline: 6px; top: 50%; height: 1px; background: var(--afa-color-border); }
	.afa-portal .afa-portal__sidebar-tooltip:not([hidden]) { display: block; position: fixed; z-index: 1000; max-width: calc(100vw - 24px); padding: 8px 12px; border: 1px solid var(--afa-color-border); border-radius: var(--afa-radius); background: var(--afa-color-surface); color: var(--afa-color-text); box-shadow: 0 3px 12px color-mix(in srgb, var(--afa-color-text) 12%, transparent); overflow-wrap: anywhere; pointer-events: none; }
}
@media (width < 900px) {
	.afa-portal--with-navigation {
		--afa-portal-bottom-nav-height: calc(72px + env(safe-area-inset-bottom, 0px));
		padding-bottom: calc(var(--afa-portal-bottom-nav-height) + var(--afa-space-4));
	}
	.afa-portal .afa-portal__nav { margin: 0; padding: 0; border: 0; }
	.afa-portal .afa-portal__desktop-navigation { display: none; }
	.afa-portal .afa-portal__mobile-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 100;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		min-height: 72px;
		padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
		background: var(--afa-color-surface);
		color: var(--afa-color-text);
		border-top: 1px solid var(--afa-color-border);
		box-shadow: 0 -3px 18px rgb(0 0 0 / 8%);
	}
	.afa-portal .afa-portal__mobile-link {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-height: 58px;
		padding: 5px 2px;
		border-radius: var(--afa-radius);
		font: inherit;
		font-size: .78rem;
		font-weight: 600;
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
		color: var(--afa-color-muted);
		cursor: pointer;
		list-style: none;
	}
	.afa-portal .afa-portal__mobile-link::-webkit-details-marker { display: none; }
	.afa-portal .afa-portal__mobile-link svg { flex: 0 0 24px; }
	.afa-portal .afa-portal__mobile-link.is-active,
	.afa-portal .afa-portal__more[open] > summary { color: var(--afa-color-primary); background: var(--afa-color-soft); }
	.afa-portal .afa-portal__mobile-link:focus-visible,
	.afa-portal .afa-portal__more-link:focus-visible { outline: 2px solid var(--afa-color-primary); outline-offset: -2px; }
	.afa-portal .afa-portal__more-panel {
		position: fixed;
		inset-inline: 8px;
		bottom: calc(var(--afa-portal-bottom-nav-height) + 8px);
		max-width: 560px;
		margin-inline: auto;
		max-height: max(0px, calc(100vh - var(--afa-portal-bottom-nav-height) - var(--afa-portal-navigation-top, var(--wp-admin--admin-bar--height, 0px)) - 24px));
		max-height: max(0px, calc(100dvh - var(--afa-portal-bottom-nav-height) - var(--afa-portal-navigation-top, var(--wp-admin--admin-bar--height, 0px)) - 24px));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 12px;
		border: 1px solid var(--afa-color-border);
		border-radius: 12px;
		background: var(--afa-color-surface);
		color: var(--afa-color-text);
		box-shadow: 0 6px 24px rgb(0 0 0 / 16%);
	}
	.afa-portal .afa-portal__more-title { margin: 0 8px 8px; font-weight: 700; }
	.afa-portal .afa-portal__more-link { display: flex; align-items: center; min-height: 44px; padding: 10px; border-radius: var(--afa-radius); color: var(--afa-color-text); text-decoration: none; overflow-wrap: anywhere; }
	.afa-portal .afa-portal__more-link--icon { gap: 8px; }
	.afa-portal .afa-portal__more-link:hover,
	.afa-portal .afa-portal__more-link.is-active { background: var(--afa-color-soft); color: var(--afa-color-primary); }
}