/*
 * Phone app shell (inc/app-shell.php). Loaded only when the shell is active;
 * everything visual for it lives here and reads tokens.css values only.
 *
 * Breakpoint: the shell shows below 768px, or when the site runs installed
 * (display-mode: standalone) on a phone or small tablet; an installed copy
 * on a desktop keeps the desktop layout. Every phone-only rule below sits
 * inside that one query, written out in full each time because custom media
 * queries are not supported in browsers yet:
 *   @media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) and (max-width: 1023.98px)
 */

:root {
	--app-header-h: 56px;
	--app-tabbar-h: 0px;
}

/* Shell elements stay out of the desktop layout entirely. */
.app-tabbar,
.app-header,
.app-footer,
.app-sheet {
	display: none;
}

@media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) {
	/*
	 * --app-tabbar-h is the tab bar's height while it is on screen and 0
	 * otherwise; everything lifted above the bar (chat launcher, consent
	 * banner, guides button, saved popover) follows it down automatically.
	 */
	body.app-has-tabbar {
		--app-tabbar-h: 60px;
		padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
	}
	/* The full-screen chat covers everything, the bar included. */
	html.avide-chat-open body.app-has-tabbar {
		--app-tabbar-h: 0px;
		padding-bottom: 0;
	}

	/*
	 * Neither the sticky header nor the fixed tab bar may cover an anchor
	 * target or a focused field (WCAG 2.4.11): the skip-link target, the
	 * handbook sections, the last field of a form.
	 */
	html {
		scroll-padding-top: calc(var(--app-header-h) + env(safe-area-inset-top));
		scroll-padding-bottom: calc(60px + env(safe-area-inset-bottom));
	}

	/* ---- Tab bar (#199, mockup screens 1-10) ---- */
	.app-tabbar {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		padding-bottom: env(safe-area-inset-bottom);
		background: rgba(255, 255, 255, 0.97);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-top: 1px solid var(--neutral-200);
	}
	.app-tabbar ul {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		height: var(--app-tabbar-h);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.app-tabbar__tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		height: 100%;
		padding: 0 2px;
		color: var(--neutral-600);
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.app-tabbar__icon {
		display: grid;
		place-items: center;
		width: 56px;
		height: 28px;
		border-radius: var(--radius-full);
	}
	.app-tabbar__icon .app-icon {
		width: 24px;
		height: 24px;
	}
	.app-tabbar__tab[aria-current="page"] {
		color: var(--navy-700);
	}
	.app-tabbar__tab[aria-current="page"] .app-tabbar__icon {
		background: var(--navy-200);
	}
	.app-tabbar__tab[aria-current="page"] .app-icon {
		stroke-width: 2.4;
	}
	.app-tabbar__tab:focus-visible {
		outline: 3px solid var(--focus-ring);
		outline-offset: -3px;
	}

	/*
	 * Out of the way while typing or while a sheet is open, without giving
	 * back its 60px: removing the padding would reflow the page under the
	 * scrim and jump the scroll on every field focus on iOS.
	 */
	body.app-typing .app-tabbar,
	body.app-form-in-view .app-tabbar,
	body.app-sheet-open .app-tabbar {
		visibility: hidden;
		transform: translateY(100%);
	}
	html.avide-chat-open .app-tabbar {
		display: none;
	}
}

@media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) {
	/* ---- Header (#198, mockup screens 1, 3-10, 14) ---- */
	body.has-app-shell .site-header {
		display: none;
	}
	.app-header {
		display: block;
		position: sticky;
		top: 0;
		z-index: 800;
		padding-top: env(safe-area-inset-top);
		background: rgba(255, 255, 255, 0.94);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--neutral-200);
	}
	/* Logged-in preview below 783px: the admin bar is fixed at the top. */
	body.admin-bar .app-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
	.app-header__row {
		display: flex;
		align-items: center;
		height: var(--app-header-h);
		padding: 0 var(--space-1) 0 var(--space-4);
	}
	.app-header--detail .app-header__row {
		padding-left: var(--space-1);
	}
	.app-header__brand img {
		display: block;
		width: auto;
		height: 24px;
	}
	.app-header__spacer {
		flex: 1;
	}
	.app-header__title {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		color: var(--navy-700);
		font-family: var(--font-sans);
		font-size: var(--text-md);
		font-weight: 700;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.app-header--detail .app-header__title {
		font-size: var(--text-base);
	}
	.app-header__btn,
	.app-back,
	.app-header__lang {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		gap: var(--space-1);
		min-width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--radius-lg);
		background: none;
		color: var(--navy-700);
		text-decoration: none;
		cursor: pointer;
	}
	.app-header__lang {
		padding: 0 var(--space-2);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: 700;
	}
	.app-header__lang .app-icon {
		width: 20px;
		height: 20px;
	}
	.app-header__btn[hidden] {
		display: none;
	}
	.app-header a:focus-visible,
	.app-header button:focus-visible {
		outline: 3px solid var(--focus-ring);
		outline-offset: -3px;
	}
}

@media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) {
	/* ---- Sheets (#200, mockup screens 2 and 11) ---- */
	.app-sheet:target,
	.app-sheet.is-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 1000;
		flex-direction: column;
		justify-content: flex-end;
	}
	.app-sheet__scrim {
		position: absolute;
		inset: 0;
		background: rgba(15, 20, 36, 0.45);
	}
	.app-sheet__panel {
		position: relative;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 96px); /* browsers without dvh */
		max-height: calc(100dvh - 96px);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--surface-page);
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
		box-shadow: var(--shadow-lg);
		font-family: var(--font-sans);
	}
	.app-sheet__grab {
		width: 40px;
		height: 5px;
		margin: var(--space-2) auto var(--space-1);
		border-radius: 3px;
		background: var(--neutral-300);
	}
	.app-sheet__head {
		display: flex;
		align-items: center;
		padding: 0 var(--space-1) var(--space-1) var(--space-5);
	}
	.app-sheet__title {
		flex: 1;
		margin: 0;
		color: var(--navy-700);
		font-size: var(--text-md);
		font-weight: 700;
		line-height: 1.3;
	}
	.app-sheet__close {
		display: inline-grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-lg);
		color: var(--navy-700);
	}
	.app-sheet__body {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 var(--space-4) var(--space-4);
	}
	.app-sheet__foot {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		background: var(--neutral-0);
		border-top: 1px solid var(--neutral-200);
	}
	.app-sheet a:focus-visible,
	.app-sheet summary:focus-visible {
		outline: 3px solid var(--focus-ring);
		outline-offset: -3px;
	}

	.app-menu {
		overflow: hidden;
		background: var(--neutral-0);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
	}
	.app-menu > * + * {
		border-top: 1px solid var(--neutral-200);
	}
	.app-menu summary,
	.app-menu__row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-height: 52px;
		padding: 0 var(--space-3) 0 var(--space-4);
		color: var(--navy-700);
		font-size: var(--text-base);
		font-weight: 600;
		text-decoration: none;
		list-style: none;
		cursor: pointer;
	}
	.app-menu summary::-webkit-details-marker {
		display: none;
	}
	.app-menu summary .app-icon,
	.app-menu__row .app-icon {
		width: 20px;
		height: 20px;
		margin-left: auto;
		color: var(--neutral-600);
		transition: transform 0.2s;
	}
	.app-menu details[open] > summary .app-icon {
		transform: rotate(90deg);
	}
	.app-menu__value {
		margin-left: auto;
		color: var(--text-muted);
		font-size: var(--text-sm);
		font-weight: 500;
	}
	.app-menu__value + .app-icon {
		margin-left: 0;
	}
	.app-menu details ul {
		margin: 0;
		padding: 0 0 var(--space-2);
		list-style: none;
		background: var(--neutral-50);
	}
	.app-menu details li a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--space-4) 0 var(--space-10);
		color: var(--text-body);
		font-size: var(--text-base);
		text-decoration: none;
	}
	.app-menu [aria-current="page"] {
		color: var(--navy-700);
		font-weight: 700;
	}

	.app-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 var(--space-4);
		border-radius: var(--radius-full);
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}
	.app-btn--primary {
		background: var(--red-600);
		color: var(--neutral-0);
		box-shadow: var(--shadow-brand);
	}
	.app-btn--outline {
		background: var(--neutral-0);
		color: var(--navy-700);
		box-shadow: inset 0 0 0 2px var(--navy-200);
	}

	.app-lang {
		margin: 0;
		padding: 0;
		overflow: hidden;
		list-style: none;
		background: var(--neutral-0);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-sm);
	}
	.app-lang li + li {
		border-top: 1px solid var(--neutral-200);
	}
	.app-lang__row {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		min-height: 64px;
		padding: var(--space-2) var(--space-4);
		color: var(--navy-800);
		font-size: var(--text-base);
		font-weight: 600;
		text-decoration: none;
	}
	.app-lang__code {
		display: grid;
		flex: none;
		place-items: center;
		width: 40px;
		height: 28px;
		border-radius: var(--radius-sm);
		background: var(--surface-sunken);
		color: var(--navy-700);
		font-size: var(--text-xs);
		font-weight: 800;
	}
	.app-lang__row[aria-current="true"] .app-lang__code {
		background: var(--navy-700);
		color: var(--neutral-0);
	}
	.app-lang__text small {
		display: block;
		margin-top: 2px;
		color: var(--text-muted);
		font-size: var(--text-xs);
		font-weight: 500;
	}
	.app-lang__row .app-icon {
		flex: none;
		margin-left: auto;
		color: var(--navy-700);
	}

	body.app-sheet-open {
		overflow: hidden;
	}
	/* The consent banner (z-index 100000) must not cover an open sheet's
	   buttons; it is back as soon as the sheet closes. */
	body.app-sheet-open .avide-consent-banner {
		display: none;
	}
}

@media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) {
	/* ---- Compact footer and the Novodan credit (#207, mockup screen 14) ---- */
	body.has-app-shell .site-footer {
		display: none;
	}
	.app-footer {
		display: block;
		margin-top: var(--space-8);
		padding: var(--space-5) var(--space-4) var(--space-4);
		background: var(--surface-sunken);
		border-top: 1px solid var(--neutral-200);
		font-family: var(--font-sans);
		text-align: center;
	}
	.app-footer__links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 var(--space-1);
	}
	.app-footer__links a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--space-2);
		color: var(--navy-700);
		font-size: var(--text-sm);
		font-weight: 600;
		text-decoration: none;
	}
	.app-footer__org {
		margin: var(--space-1) 0 0;
		color: var(--text-muted);
		font-size: var(--text-xs);
	}
	.app-footer .site-footer__credit {
		display: block;
		margin-top: var(--space-1);
		font-size: var(--text-xs);
	}
	.app-footer .site-footer__credit a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 var(--space-2);
		color: var(--text-muted);
		text-decoration: underline;
		text-decoration-color: var(--neutral-300);
		text-underline-offset: 3px;
	}
	.app-footer a:focus-visible {
		outline: 3px solid var(--focus-ring);
		outline-offset: -3px;
	}
}

@media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) {
	/* ---- Bottom-edge coexistence (#208) ---- */

	/*
	 * Chat launcher (ai.avide.dk loader, #avide-widget-host). Its bubble is
	 * position: fixed inside a shadow root, so it is moved the way
	 * avide-analytics.css moves it above the consent banner: the host is
	 * stretched to the viewport (it is pointer-events: none) and translated
	 * up, because a transformed ancestor becomes the containing block of its
	 * fixed children. Never while the chat panel is open: on a phone the
	 * panel is full screen. These selectors outrank the consent rule, so the
	 * consent height is added here rather than fought over.
	 */
	html:not(.avide-chat-open) body.app-has-tabbar #avide-widget-host {
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		transform: translateY(calc(-1 * (var(--app-tabbar-h) + env(safe-area-inset-bottom))));
	}
	html.avide-consent-open:not(.avide-chat-open) body.app-has-tabbar #avide-widget-host {
		transform: translateY(calc(-1 * (var(--app-tabbar-h) + env(safe-area-inset-bottom) + var(--avide-consent-h, 0px))));
	}
	/* The launcher shows only on the front page and the Sổ tay and Tìm roots. */
	html:not(.avide-chat-open) body.has-app-shell:not(.app-launcher) #avide-widget-host {
		display: none;
	}

	/* Consent banner (avide-analytics) sits on the tab bar, not under it. */
	body.app-has-tabbar .avide-consent-banner {
		bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom));
	}

	/* Guides button and its panel (avide-guides). */
	body.app-has-tabbar #avide-guides-button {
		bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 16px);
	}
	body.app-has-tabbar .avide-guides-panel {
		bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 68px);
	}

	/* The saved-item popover's phone bottom sheet (avide-saved, < 480px). */
	body.app-has-tabbar .avide-saved__popover {
		bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 12px);
	}
}

@media (max-width: 767.98px), (display-mode: standalone) and (max-width: 1023.98px) {
	/* The Tìm tab's field under the header (mockup screen 4). */
	.app-search {
		display: flex;
		align-items: center;
		height: 48px;
		margin: 0 var(--space-4) var(--space-3);
		padding-left: var(--space-3);
		border-radius: var(--radius-lg);
		background: var(--surface-sunken);
		box-shadow: inset 0 0 0 2px var(--navy-700);
	}
	.app-search input {
		flex: 1;
		min-width: 0;
		height: 100%;
		border: 0;
		background: transparent;
		color: var(--navy-800);
		font-family: var(--font-sans);
		font-size: var(--text-base); /* 16px: iOS does not zoom on focus */
		outline: none;
	}
	.app-search button {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		color: var(--navy-700);
		cursor: pointer;
	}
	.app-search:focus-within {
		box-shadow: inset 0 0 0 2px var(--navy-700), 0 0 0 3px var(--navy-200);
	}
}