/*  PWA template - shared app styles (dev.admin/pwa).
    EVERY rule here is scoped under html.app (or only fires inside a view
    transition, which desktop never starts), so desktop pages are untouched.
    Per-site colors come in through --pwa-accent / --pwa-bg set by pwa_head().  */

/* ---------------------------------------------------------------- tokens */
html.app {
	--pwa-top: env(safe-area-inset-top, 0px);
	--pwa-bottom: env(safe-area-inset-bottom, 0px);
	--pwa-bar-h: 44px;
	--pwa-tab-h: 50px;
	--pwa-gutter: 16px;                            /* page side margin, like iOS */
	--pwa-ease: cubic-bezier(.2, .8, .2, 1);
	--pwa-spring: cubic-bezier(.32, .72, 0, 1);   /* iOS sheet curve */
	--pwa-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
	--pwa-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;

	--pwa-bg: var(--pwa-site-bg, #000);
	--pwa-surface: #1c1c1e;
	--pwa-surface-2: #2c2c2e;
	--pwa-text: #fff;
	--pwa-text-2: rgba(235, 235, 245, .6);
	--pwa-sep: rgba(84, 84, 88, .65);
	--pwa-chrome: rgba(22, 22, 24, .78);
	--pwa-fill: rgba(120, 120, 128, .24);
	--pwa-danger: #ff453a;
}
html.app[data-pwa-theme="light"] {
	--pwa-bg: var(--pwa-site-bg, #f2f2f7);
	--pwa-surface: #fff;
	--pwa-surface-2: #f2f2f7;
	--pwa-text: #000;
	--pwa-text-2: rgba(60, 60, 67, .6);
	--pwa-sep: rgba(60, 60, 67, .29);
	--pwa-chrome: rgba(249, 249, 249, .82);
	--pwa-fill: rgba(120, 120, 128, .12);
	--pwa-danger: #ff3b30;
}
@media (prefers-color-scheme: light) {
	html.app[data-pwa-theme="auto"] {
		--pwa-bg: var(--pwa-site-bg, #f2f2f7);
		--pwa-surface: #fff;
		--pwa-surface-2: #f2f2f7;
		--pwa-text: #000;
		--pwa-text-2: rgba(60, 60, 67, .6);
		--pwa-sep: rgba(60, 60, 67, .29);
		--pwa-chrome: rgba(249, 249, 249, .82);
		--pwa-fill: rgba(120, 120, 128, .12);
		--pwa-danger: #ff3b30;
	}
}

/* ------------------------------------------------------------- base feel */
/* Template chrome sizes include its safe-area padding - never rely on the site's box-sizing */
html.app :is(.pwa-bar, .pwa-tabs, .pwa-sheet, .pwa-actions, .pwa-toast, .pwa-ptr, .pwa-scrim, .pwa-large-title),
html.app :is(.pwa-bar, .pwa-tabs, .pwa-sheet, .pwa-actions, .pwa-toast) * { box-sizing: border-box; }
html.app.pwa-modal-sheets dialog.kui.modal { box-sizing: border-box; }
html.app {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	background: var(--pwa-bg);
}
html.app body {
	min-height: 100dvh;
	background: var(--pwa-bg);
	padding-top: calc(var(--pwa-bar-h) + var(--pwa-top));
	padding-bottom: calc(var(--pwa-tab-h) + var(--pwa-bottom));
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
	-webkit-touch-callout: none;
	overscroll-behavior-y: none;
}
html.app-standalone body { -webkit-user-select: none; user-select: none; }
html.app-standalone :is(input, textarea, [contenteditable], .selectable, p, td) { -webkit-user-select: text; user-select: text; }
html.app :is(a, button, [role="button"], .func, .pwa-tab) { touch-action: manipulation; }
/* iOS zooms into inputs under 16px - keep forms from jumping. */
html.app :is(input, select, textarea) { font-size: max(16px, 1em); }
html.app body.no-tabs { padding-bottom: var(--pwa-bottom); }

/* Element-level control (usable on any site, any page):
   .m-hide / .d-only  hidden in the app      .m-only  shown only in the app */
.m-only { display: none !important; }
html.app .m-only { display: revert !important; }
html.app :is(.m-hide, .d-only) { display: none !important; }

/* ---------------------------------------------------------------- top bar */
html.app .pwa-bar {
	position: fixed; z-index: 900; top: 0; left: 0; right: 0;
	height: calc(var(--pwa-bar-h) + var(--pwa-top));
	padding: var(--pwa-top) max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	background: var(--pwa-chrome);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	border-bottom: .5px solid transparent;
	transition: border-color .2s;
	font-family: var(--pwa-font); color: var(--pwa-text);
	view-transition-name: pwa-bar;
}
html.app .pwa-bar.scrolled, html.app body:not(.pwa-has-large) .pwa-bar { border-bottom-color: var(--pwa-sep); }
html.app .pwa-bar-title {
	grid-column: 2; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 17px; font-weight: 600; text-align: center;
	transition: opacity .2s;
}
html.app body.pwa-has-large .pwa-bar:not(.scrolled) .pwa-bar-title { opacity: 0; }
html.app .pwa-bar-left, html.app .pwa-bar-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
html.app .pwa-bar-left { grid-column: 1; }
html.app .pwa-bar-right { grid-column: 3; justify-content: flex-end; }
html.app .pwa-bar :is(.pwa-back, .pwa-action, [data-m-action]) {
	display: inline-flex; align-items: center; gap: 2px;
	min-height: 44px; min-width: 44px; padding: 0 6px;
	color: var(--pwa-accent); font-size: 17px; background: none; border: 0; text-decoration: none;
}
html.app .pwa-back svg { width: 24px; height: 24px; margin-left: -6px; }
/* Site buttons moved into the bar (data-m-action) lose their desktop button look and
   become iOS bar buttons: accent-colored, icon only when they have an icon */
html.app .pwa-bar [data-m-action] {
	width: auto !important; height: 44px; margin: 0 !important;
	background: none !important; border: 0 !important; box-shadow: none !important;
}
html.app .pwa-bar [data-m-action]:has(> i, > .kft) { font-size: 0; }
html.app .pwa-bar [data-m-action] > :is(i, .kft) { font-size: 22px; color: var(--pwa-accent); }
html.app .pwa-bar [data-m-action] > :is(i, .kft)::before { color: var(--pwa-accent) !important; }
html.app .pwa-bar :is(.pwa-back, .pwa-action, [data-m-action]):active { opacity: .35; }

/* The shared site wrapper: full width with an even iOS gutter, whatever width the
   desktop CSS gives it (home.css sets 90%, admin.css 96%) */
html.app #page_wrap {
	width: auto !important; max-width: none !important;
	margin: 0 !important;
	padding-left: var(--pwa-gutter) !important; padding-right: var(--pwa-gutter) !important;
	box-sizing: border-box;
}

/* The admin back-to-top button sits over the tab bar - in the app, tapping the current
   tab scrolls to the top instead (iOS behavior). @layer pwa beats layered !important. */
@layer pwa { html.app #scrollUp { display: none !important; } }

/* Admin pages pin their action buttons (.top-right) to the screen corner - right where
   the app's top bar is. In the app they sit as a normal row at the top of the page. */
html.app .top-right {
	position: static !important; inset: auto !important;
	display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
	margin: 0 0 12px !important;
}

/* Large title - collapses into the bar on scroll. Lines up with the page gutter. */
html.app .pwa-large-title {
	margin: 4px 0 8px; padding: 0;
	font: 700 34px/41px var(--pwa-font-display); letter-spacing: .37px;
	color: var(--pwa-text);
}

/* --------------------------------------------------------------- tab bar */
html.app .pwa-tabs {
	position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
	height: calc(var(--pwa-tab-h) + var(--pwa-bottom));
	padding: 0 env(safe-area-inset-right) var(--pwa-bottom) env(safe-area-inset-left);
	display: flex;
	background: var(--pwa-chrome);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	border-top: .5px solid var(--pwa-sep);
	font-family: var(--pwa-font);
	view-transition-name: pwa-tabs;
	transition: transform .25s var(--pwa-ease);
}
/* The tab bar slides away under the keyboard and under any open sheet/modal, like iOS */
html.app.pwa-keyboard .pwa-tabs, html.app body:has(dialog.kui.modal.open, dialog[open]:modal) .pwa-tabs { transform: translateY(110%); }
html.app .pwa-tab {
	flex: 1; position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
	padding-top: 6px; gap: 2px;
	color: var(--pwa-text-2); text-decoration: none;
	font-size: 10px; font-weight: 500; letter-spacing: .1px;
	background: none; border: 0;
}
html.app .pwa-tab svg { width: 26px; height: 26px; transition: transform .15s var(--pwa-ease); }
html.app .pwa-tab:active svg { transform: scale(.86); }
html.app .pwa-tab.active { color: var(--pwa-accent); }
html.app .pwa-badge {
	position: absolute; top: 2px; left: calc(50% + 6px);
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--pwa-danger); color: #fff;
	font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
}
html.app .pwa-badge:empty { display: none; }

/* ----------------------------------------------------- sheets & dialogs */
html.app .pwa-scrim {
	position: fixed; inset: 0; z-index: 1000;
	background: rgba(0, 0, 0, .4);
	opacity: 0; transition: opacity .3s;
}
html.app .pwa-scrim.show { opacity: 1; }
html.app .pwa-sheet {
	position: fixed; z-index: 1001; left: 0; right: 0; bottom: 0;
	max-height: calc(100dvh - var(--pwa-top) - 12px);
	display: flex; flex-direction: column;
	background: var(--pwa-surface); color: var(--pwa-text);
	border-radius: 14px 14px 0 0;
	padding-bottom: var(--pwa-bottom);
	font-family: var(--pwa-font);
	transform: translateY(100%);
	transition: transform .45s var(--pwa-spring);
	box-shadow: 0 -2px 30px rgba(0, 0, 0, .25);
}
html.app .pwa-sheet.show { transform: translateY(0); }
html.app .pwa-sheet.dragging { transition: none; }
html.app .pwa-grab { flex: none; height: 22px; display: flex; justify-content: center; align-items: center; touch-action: none; cursor: grab; }
html.app .pwa-grab::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--pwa-fill); }
html.app .pwa-sheet-head { flex: none; padding: 0 16px 10px; font-size: 17px; font-weight: 600; text-align: center; touch-action: none; }
html.app .pwa-sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 16px 16px; }

/* Existing site modals (dialog.kui.modal) become bottom sheets */
html.app.pwa-modal-sheets dialog.kui.modal {
	position: fixed !important; inset: auto 0 0 0 !important;
	margin: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
	max-height: calc(100dvh - var(--pwa-top) - 12px) !important;
	transform: translateY(100%);
	border-radius: 14px 14px 0 0 !important;
	padding-bottom: var(--pwa-bottom) !important;
	transition: transform .45s var(--pwa-spring), opacity .2s !important;
	overflow-y: auto; overscroll-behavior: contain;
}
html.app.pwa-modal-sheets dialog.kui.modal.open { transform: translateY(0); }
html.app.pwa-modal-sheets dialog.kui.modal.dragging { transition: none !important; }
html.app.pwa-modal-sheets dialog.kui.modal::backdrop { background: rgba(0, 0, 0, .4); }
html.app.pwa-modal-sheets dialog.kui.modal > .pwa-grab { position: sticky; top: 0; z-index: 2; }
html.app body:has(dialog.open) { padding-right: env(safe-area-inset-right, 0px); }

/* Grouped list (iOS Settings style) - use anywhere in app pages */
html.app .pwa-list { margin: 0 0 20px; padding: 0; list-style: none; background: var(--pwa-surface-2); border-radius: 10px; overflow: hidden; }
html.app .pwa-sheet .pwa-list { background: var(--pwa-surface-2); }
html.app .pwa-list > li > :is(a, button), html.app .pwa-list > li.row {
	display: flex; align-items: center; gap: 12px; width: 100%;
	min-height: 44px; padding: 10px 16px;
	color: var(--pwa-text); text-decoration: none; text-align: left;
	font: 400 17px var(--pwa-font); background: none; border: 0;
	position: relative;
}
html.app .pwa-list > li + li > :is(a, button)::before, html.app .pwa-list > li.row + li.row::before {
	content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--pwa-sep);
}
html.app .pwa-list > li > :is(a, button):active { background: var(--pwa-fill); }
html.app .pwa-list svg { width: 22px; height: 22px; color: var(--pwa-accent); flex: none; }
html.app .pwa-list .chev { margin-left: auto; width: 14px; height: 14px; color: var(--pwa-text-2); }
html.app .pwa-list .danger, html.app .pwa-list .danger svg { color: var(--pwa-danger); }

/* Action sheet */
html.app .pwa-actions { position: fixed; z-index: 1001; left: 8px; right: 8px; bottom: calc(8px + var(--pwa-bottom)); transform: translateY(120%); transition: transform .4s var(--pwa-spring); font-family: var(--pwa-font); }
html.app .pwa-actions.show { transform: none; }
html.app .pwa-actions .grp { background: var(--pwa-chrome); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 14px; overflow: hidden; margin-top: 8px; }
html.app .pwa-actions .ttl { padding: 14px 16px; font-size: 13px; color: var(--pwa-text-2); text-align: center; border-bottom: .5px solid var(--pwa-sep); }
html.app .pwa-actions button { display: block; width: 100%; height: 57px; border: 0; background: none; color: var(--pwa-accent); font: 400 20px var(--pwa-font); }
html.app .pwa-actions button + button { border-top: .5px solid var(--pwa-sep); }
html.app .pwa-actions button.danger { color: var(--pwa-danger); }
html.app .pwa-actions button.cancel { font-weight: 600; background: var(--pwa-surface); }
html.app .pwa-actions button:active { background: var(--pwa-fill); }

/* ------------------------------------------------------- toast & banners */
html.app .pwa-toast {
	position: fixed; z-index: 1100; left: 50%; top: calc(var(--pwa-top) + 8px);
	display: flex; align-items: center; gap: 12px;
	max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 22px;
	background: var(--pwa-surface-2); color: var(--pwa-text);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	font: 500 15px var(--pwa-font);
	transform: translate(-50%, -150%); transition: transform .45s var(--pwa-spring);
}
html.app .pwa-toast.show { transform: translate(-50%, 0); }
html.app .pwa-toast button { border: 0; background: none; color: var(--pwa-accent); font: 600 15px var(--pwa-font); padding: 0; }

/* Layout debug (?debug=1): outline every box, wrap long toasts */
html.app.pwa-debug #page_wrap * { outline: 1px dashed rgba(255, 80, 80, .35); }
html.app.pwa-debug .pwa-toast { max-width: calc(100vw - 16px); font: 500 12px/1.4 ui-monospace, Menlo, monospace; word-break: break-all; }

/* ---------------------------------------------------- pull to refresh */
html.app .pwa-ptr {
	position: fixed; z-index: 899; left: 50%; top: calc(var(--pwa-bar-h) + var(--pwa-top) + 6px);
	width: 30px; height: 30px; margin-left: -15px;
	color: var(--pwa-text-2); opacity: 0; pointer-events: none;
}
html.app .pwa-ptr svg { width: 30px; height: 30px; }
html.app .pwa-ptr.spin svg { animation: pwa-spin .8s linear infinite; }
@keyframes pwa-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------- swipe back */
html.app .pwa-swiping main, html.app .pwa-swiping #page_wrap:not(main #page_wrap) { box-shadow: -12px 0 24px rgba(0, 0, 0, .25); }

/* --------------------------------------------- page transitions (native push/pop) */
::view-transition-group(pwa-bar), ::view-transition-group(pwa-tabs) { animation: none; z-index: 10; }
::view-transition-old(pwa-tabs), ::view-transition-new(pwa-tabs) { animation: none; }
::view-transition-old(pwa-bar) { animation: .2s ease both pwa-fade-out; }
::view-transition-new(pwa-bar) { animation: .25s ease both pwa-fade-in; }

html:active-view-transition-type(forward)::view-transition-old(root) { animation: .4s var(--pwa-spring, ease) both pwa-push-out; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: .4s var(--pwa-spring, ease) both pwa-push-in; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: .38s var(--pwa-spring, ease) both pwa-pop-out; z-index: 2; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: .38s var(--pwa-spring, ease) both pwa-pop-in; }
/* After a finished swipe the old page is already off screen */
html:active-view-transition-type(back-swiped)::view-transition-old(root) { animation: none; opacity: 0; }
html:active-view-transition-type(back-swiped)::view-transition-new(root) { animation: .25s var(--pwa-ease, ease) both pwa-pop-in; }
html:active-view-transition-type(tab)::view-transition-old(root) { animation: .15s ease both pwa-fade-out; }
html:active-view-transition-type(tab)::view-transition-new(root) { animation: .2s ease both pwa-fade-in; }

@keyframes pwa-push-in  { from { transform: translateX(100%); } }
@keyframes pwa-push-out { to   { transform: translateX(-30%); filter: brightness(.8); } }
@keyframes pwa-pop-in   { from { transform: translateX(-30%); filter: brightness(.8); } }
@keyframes pwa-pop-out  { to   { transform: translateX(100%); } }
@keyframes pwa-fade-in  { from { opacity: 0; } }
@keyframes pwa-fade-out { to   { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01s !important; }
	html.app :is(.pwa-sheet, .pwa-toast, .pwa-actions) { transition-duration: .01s; }
}

/* --------------------------------------------- tablets / desktop (mode 'always') */
/* The same app, sized for a wide screen: tabs grouped in the middle instead of stretched
   edge to edge, sheets and dialogs as centred panels, mouse hover on bar buttons and tabs. */
@media (min-width: 768px) {
	html.app .pwa-tabs { justify-content: center; }
	html.app .pwa-tab { flex: 0 1 120px; }
	html.app .pwa-bar-title { max-width: 50vw; }
	html.app :is(.pwa-sheet, .pwa-actions) { left: 50%; right: auto; width: min(560px, calc(100vw - 32px)); margin-left: calc(min(560px, calc(100vw - 32px)) / -2); }
	html.app .pwa-actions { width: min(420px, calc(100vw - 32px)); margin-left: calc(min(420px, calc(100vw - 32px)) / -2); }
	html.app.pwa-modal-sheets dialog.kui.modal { inset: auto 0 0 0 !important; width: min(600px, 100%) !important; margin: 0 auto !important; }
}
@media (hover: hover) {
	html.app .pwa-tab:hover:not(.active) { color: var(--pwa-text); }
	html.app .pwa-bar :is(.pwa-back, .pwa-action, [data-m-action]):hover { opacity: .7; }
	html.app .pwa-list > li > :is(a, button):hover { background: var(--pwa-fill); }
}

/* --------------------------------------------- landscape / bigger phones */
@media (orientation: landscape) and (max-height: 500px) {
	html.app { --pwa-tab-h: 32px; --pwa-bar-h: 32px; }
	html.app .pwa-tab { flex-direction: row; justify-content: center; align-items: center; padding: 0; gap: 6px; font-size: 13px; }
	html.app .pwa-tab svg { width: 22px; height: 22px; }
	html.app .pwa-large-title { display: none; }
}