/* ==========================================================================
   Soana app layer

   Everything that only exists once the site is installed as an app, plus the
   install/update/notification UI that also appears in a normal browser tab.

   The tab bar and app padding are gated behind `display-mode: standalone` so
   the website itself is untouched. `.is-app` is added by app.js as well, which
   covers iOS, where navigator.standalone is the only reliable signal.
   ========================================================================== */

:root {
	--app-tabbar-h: 58px;
	--app-safe-top: env(safe-area-inset-top, 0px);
	--app-safe-bottom: env(safe-area-inset-bottom, 0px);
	--app-radius: 18px;
	--app-shadow: 0 8px 30px rgba(var(--ink-rgb), .14);
}

/* --------------------------------------------------------------------------
   WordPress toolbar — never inside the installed app

   Staff keep the toolbar on the website (see soana_hide_admin_bar_for_members),
   but in the app it reads as a foreign black bar pinned above the UI, and it
   pushes the whole document down by its height. Hidden here rather than in PHP
   because the display mode is only known to the client.

   `html:root` outranks the `html{margin-top:..!important}` block WordPress
   prints inline in the head, whichever order the two end up in.
   -------------------------------------------------------------------------- */

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
	#wpadminbar { display: none !important; }
	html:root { margin-top: 0 !important; }
	/* The toolbar is gone, so nothing should offset for it. */
	body.admin-bar { --soana-abh: 0px; }
}

html.is-app #wpadminbar { display: none !important; }
html.is-app:root { margin-top: 0 !important; }
html.is-app body.admin-bar { --soana-abh: 0px; }

/* --------------------------------------------------------------------------
   Bottom tab bar — hidden unless the site is running as an installed app
   -------------------------------------------------------------------------- */

.soana-tabbar { display: none; }

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
	.soana-tabbar { display: flex; }
	body { padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)); }
}

html.is-app .soana-tabbar { display: flex; }
html.is-app body { padding-bottom: calc(var(--app-tabbar-h) + var(--app-safe-bottom)); }

.soana-tabbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 900;
	align-items: stretch;
	justify-content: space-around;
	gap: 2px;
	padding: 6px 4px calc(6px + var(--app-safe-bottom));
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-top: 1px solid rgba(var(--ink-rgb), .08);
}

.soana-tabbar__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 4px 2px;
	min-width: 0;
	color: var(--ink-mute);
	text-decoration: none;
	border-radius: 12px;
	transition: color .18s ease, background-color .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.soana-tabbar__item:active { background: rgba(var(--teal-500-rgb), .08); }
.soana-tabbar__item.is-current { color: var(--teal-700); }

.soana-tabbar__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
}

.soana-tabbar__icon svg { width: 22px; height: 22px; }
.soana-tabbar__item.is-current .soana-tabbar__icon svg { stroke-width: 2.4; }

.soana-tabbar__label {
	font-size: 11px;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.soana-tabbar__badge {
	position: absolute;
	top: -4px;
	inset-inline-end: -6px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: #e5484d;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */

.soana-toast {
	position: fixed;
	inset-inline: 16px;
	bottom: calc(16px + var(--app-safe-bottom));
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 460px;
	margin-inline: auto;
	padding: 13px 16px;
	border-radius: 14px;
	background: var(--teal-900);
	color: #fff;
	font-size: 14px;
	line-height: 1.7;
	box-shadow: var(--app-shadow);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .28s ease, transform .28s ease;
}

.soana-toast.is-in { opacity: 1; transform: none; }
.soana-toast span { flex: 1 1 auto; }

.soana-toast button {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	padding: 7px 15px;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.soana-toast button:hover { background: rgba(255, 255, 255, .26); }

html.is-app .soana-toast { bottom: calc(var(--app-tabbar-h) + 12px + var(--app-safe-bottom)); }

/* --------------------------------------------------------------------------
   Install invitation
   -------------------------------------------------------------------------- */

.soana-install {
	position: fixed;
	inset-inline: 12px;
	bottom: calc(12px + var(--app-safe-bottom));
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 520px;
	margin-inline: auto;
	padding: 14px 16px;
	border-radius: var(--app-radius);
	background: #fff;
	border: 1px solid rgba(var(--ink-rgb), .08);
	box-shadow: var(--app-shadow);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .3s ease, transform .3s ease;
}

.soana-install.is-in { opacity: 1; transform: none; }
.soana-install__body { flex: 1 1 auto; min-width: 0; }

.soana-install__title {
	display: block;
	color: var(--teal-900);
	font-size: 15px;
	margin-bottom: 2px;
}

.soana-install__text {
	display: block;
	color: var(--ink-mute);
	font-size: 13px;
	line-height: 1.7;
}

.soana-install__actions { display: flex; align-items: center; gap: 6px; }

.soana-install__go {
	border: 0;
	border-radius: 999px;
	padding: 9px 18px;
	background: var(--teal-700);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.soana-install__no {
	border: 0;
	background: none;
	color: var(--ink-mute);
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   iOS "Add to Home Screen" sheet
   -------------------------------------------------------------------------- */

.soana-ios-sheet {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(var(--ink-rgb), .5);
	opacity: 0;
	transition: opacity .3s ease;
}

.soana-ios-sheet.is-in { opacity: 1; }

.soana-ios-sheet__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	padding: 26px 22px calc(26px + var(--app-safe-bottom));
	border-radius: 22px 22px 0 0;
	background: #fff;
	transform: translateY(100%);
	transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}

.soana-ios-sheet.is-in .soana-ios-sheet__panel { transform: none; }

.soana-ios-sheet__close {
	position: absolute;
	top: 12px;
	inset-inline-end: 14px;
	border: 0;
	background: none;
	color: var(--ink-mute);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.soana-ios-sheet__title {
	margin: 0 0 8px;
	font-size: 19px;
	color: var(--teal-900);
}

.soana-ios-sheet__why {
	margin: 0 0 18px;
	color: var(--ink-mute);
	font-size: 14px;
	line-height: 1.9;
}

.soana-ios-sheet__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.soana-ios-sheet__steps li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid rgba(var(--ink-rgb), .07);
	font-size: 15px;
	color: var(--ink);
}

.soana-ios-sheet__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(var(--teal-500-rgb), .1);
	color: var(--teal-700);
	font-size: 19px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Notification settings screen
   -------------------------------------------------------------------------- */

.soana-notify { max-width: 680px; }

.soana-notify__status {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	margin-bottom: 26px;
	border-radius: var(--app-radius);
	border: 1px solid rgba(var(--ink-rgb), .1);
	background: var(--light-2);
}

.soana-notify__status[data-tone="ok"] {
	border-color: rgba(var(--green-rgb), .45);
	background: rgba(var(--green-rgb), .08);
}

.soana-notify__status[data-tone="bad"] {
	border-color: rgba(229, 72, 77, .35);
	background: rgba(229, 72, 77, .06);
}

.soana-notify__status-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #fff;
	color: var(--teal-700);
}

.soana-notify__status-body { flex: 1 1 auto; min-width: 0; }
.soana-notify__status-body strong { display: block; color: var(--teal-900); font-size: 15px; }

.soana-notify__status-body p {
	margin: 3px 0 0;
	color: var(--ink-mute);
	font-size: 13px;
	line-height: 1.8;
}

.soana-notify__enable {
	flex: 0 0 auto;
	border: 0;
	border-radius: 999px;
	padding: 9px 18px;
	background: var(--teal-700);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.soana-notify__enable:disabled { opacity: .55; cursor: default; }

.soana-notify__section { margin-bottom: 30px; }

.soana-notify__heading {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-mute);
}

.soana-notify__list,
.soana-notify__devices {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid rgba(var(--ink-rgb), .09);
	border-radius: var(--app-radius);
	background: #fff;
	overflow: hidden;
}

.soana-notify__row,
.soana-notify__device {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 16px;
	border-top: 1px solid rgba(var(--ink-rgb), .07);
}

.soana-notify__row:first-child,
.soana-notify__device:first-child { border-top: 0; }

.soana-notify__row-icon,
.soana-notify__device-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: rgba(var(--teal-500-rgb), .09);
	color: var(--teal-700);
}

.soana-notify__row-icon svg,
.soana-notify__device-icon svg { width: 19px; height: 19px; }

.soana-notify__row-body,
.soana-notify__device-body { flex: 1 1 auto; min-width: 0; }

.soana-notify__row-body strong,
.soana-notify__device-body strong {
	display: block;
	font-size: 15px;
	color: var(--ink);
	font-weight: 600;
}

.soana-notify__row-body span,
.soana-notify__device-body span {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--ink-mute);
}

.soana-notify__locked { color: var(--ink-mute); opacity: .6; }
.soana-notify__locked svg { width: 17px; height: 17px; }

.soana-notify__row--times {
	gap: 20px;
	padding-inline-start: 65px;
	background: var(--light-2);
}

.soana-notify__time { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.soana-notify__time span { color: var(--ink-mute); }

.soana-notify__time input {
	border: 1px solid rgba(var(--ink-rgb), .15);
	border-radius: 10px;
	padding: 7px 10px;
	font: inherit;
	color: var(--ink);
	background: #fff;
}

.soana-notify__device.is-muted { opacity: .55; }
.soana-notify__device-tag {
	display: inline-block;
	margin-inline-start: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(var(--teal-500-rgb), .14);
	color: var(--teal-700);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
}

.soana-notify__device-actions { display: flex; gap: 4px; }

.soana-notify__device-action {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--ink-mute);
	cursor: pointer;
}

.soana-notify__device-action:hover { background: rgba(var(--ink-rgb), .06); color: var(--ink); }
.soana-notify__device-action svg { width: 17px; height: 17px; }
.soana-notify__device-action:disabled { opacity: .4; cursor: default; }

.soana-notify__empty,
.soana-notify__signin {
	margin: 0;
	padding: 20px;
	border: 1px dashed rgba(var(--ink-rgb), .18);
	border-radius: var(--app-radius);
	color: var(--ink-mute);
	font-size: 14px;
	text-align: center;
}

.soana-notify__test {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	border: 1px solid rgba(var(--teal-500-rgb), .4);
	border-radius: 999px;
	padding: 10px 20px;
	background: #fff;
	color: var(--teal-700);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.soana-notify__test:hover { background: rgba(var(--teal-500-rgb), .07); }
.soana-notify__test:disabled { opacity: .5; cursor: default; }
.soana-notify__test svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Switch control
   -------------------------------------------------------------------------- */

.soana-switch {
	flex: 0 0 auto;
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.soana-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.soana-switch__track {
	display: block;
	width: 50px;
	height: 30px;
	border-radius: 999px;
	background: rgba(var(--ink-rgb), .2);
	transition: background-color .22s ease;
}

.soana-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .28);
	transition: transform .22s cubic-bezier(.3, 1.4, .5, 1);
}

.soana-switch input:checked + .soana-switch__track { background: var(--green-600); }

/* Direction-aware: the knob travels the other way in RTL. */
.soana-switch input:checked + .soana-switch__track::after { transform: translateX(20px); }
[dir="rtl"] .soana-switch input:checked + .soana-switch__track::after { transform: translateX(-20px); }

.soana-switch input:focus-visible + .soana-switch__track {
	outline: 2px solid var(--teal-500);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Offline state
   -------------------------------------------------------------------------- */

html.is-offline .soana-tabbar { filter: grayscale(.5); }

/* --------------------------------------------------------------------------
   Motion and colour-scheme preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.soana-toast,
	.soana-install,
	.soana-ios-sheet,
	.soana-ios-sheet__panel,
	.soana-switch__track,
	.soana-switch__track::after {
		transition: none;
	}
}

@media (prefers-color-scheme: dark) {
	html.is-app .soana-tabbar {
		background: rgba(11, 45, 53, .92);
		border-top-color: rgba(255, 255, 255, .09);
	}

	html.is-app .soana-tabbar__item { color: rgba(255, 255, 255, .6); }
	html.is-app .soana-tabbar__item.is-current { color: #fff; }
	html.is-app .soana-tabbar__badge { box-shadow: 0 0 0 2px var(--teal-800); }
}

/* --------------------------------------------------------------------------
   Pull to refresh
   -------------------------------------------------------------------------- */

.soana-ptr {
	position: fixed;
	inset-inline: 0;
	top: calc(-44px + var(--app-safe-top));
	z-index: 950;
	display: flex;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}

.soana-ptr__spinner {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--app-shadow);
	position: relative;
}

.soana-ptr__spinner::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	border: 2px solid rgba(var(--teal-500-rgb), .25);
	border-top-color: var(--teal-700);
	transition: transform .2s ease;
}

.soana-ptr.is-ready .soana-ptr__spinner::after { transform: rotate(180deg); }

.soana-ptr.is-refreshing .soana-ptr__spinner::after {
	animation: soana-ptr-spin .7s linear infinite;
}

@keyframes soana-ptr-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Page transitions

   Cross-document view transitions are opt-in per document and degrade to a
   plain navigation everywhere they are unsupported, so no JS interception of
   link clicks is needed.
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
	/* Disabling the animation is used rather than nesting @view-transition in
	   a media query, which is not reliably supported. */
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	.soana-ptr { transition: none; }
	.soana-ptr.is-refreshing .soana-ptr__spinner::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Installed-app polish
   -------------------------------------------------------------------------- */

html.is-app {
	/* Stop the whole page rubber-banding like a web page when scrolled to
	   its end — native apps only bounce their scrollable content. */
	overscroll-behavior-y: none;
}

html.is-app body {
	/* Text selection and the callout menu on a long press read as "web page",
	   not "app". Inputs and anything explicitly marked keep both. */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

html.is-app input,
html.is-app textarea,
html.is-app [contenteditable],
html.is-app .soana-selectable,
html.is-app article,
html.is-app .entry-content {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	user-select: text;
}

/* Draw behind the status bar when the translucent style is chosen. */
html.is-ios-app body { padding-top: var(--app-safe-top); }