/*
 * Income & Expense app - installable app (PWA): the full-screen page, the
 * "Install app" bar and the iPhone instructions sheet. Uses the custom
 * properties from app.css.
 */

/* ---------- Full-screen app page (templates/app-page.php) ---------- */
html.jie-fullpage,
html.jie-fullpage body {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 100%;
	background: var(--jie-bg) !important;
}
html.jie-fullpage { margin-top: 0 !important; color-scheme: light dark; }
html.jie-fullpage body {
	background: linear-gradient(180deg, var(--jie-bg) 0%, var(--jie-bg-2) 100%) fixed !important;
	overscroll-behavior-y: none;
}
html.jie-fullpage .jie-fullpage__main { display: block; margin: 0; padding: 0; }
html.jie-fullpage #jie-root {
	min-height: 100vh;
	min-height: 100dvh;
	border-radius: 0;
	background: transparent;
	padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
html.jie-fullpage #jie-root .jie-auth {
	min-height: calc(100vh - 40px);
	min-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px));
	border-radius: 0;
}

/* Running from the home screen: no text selection flashes, no callouts. */
html.jie-standalone #jie-root, html.jie-standalone #jie-layer {
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
html.jie-standalone #jie-root :where(input, textarea, select),
html.jie-standalone #jie-layer :where(input, textarea, select),
html.jie-standalone #jie-root .jie-list,
html.jie-standalone #jie-layer .jie-sheet__text {
	-webkit-user-select: text;
	user-select: text;
}

/* ---------- "Install the app" bar ---------- */
#jie-root .jie-install {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto 14px;
	padding: 10px 8px 10px 10px;
	border-radius: var(--jie-radius);
	border: 1px solid var(--jie-glass-border);
	background: var(--jie-surface);
	box-shadow: var(--jie-shadow);
	animation: jie-pwa-drop .45s var(--jie-ease) both;
}
#jie-root .jie-install[hidden] { display: none !important; }
#jie-root .jie-install__icon {
	display: block; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
	margin: 0; padding: 0; border: 0; max-width: none; box-shadow: none;
}
#jie-root .jie-install__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
#jie-root .jie-install__text strong { font-size: 15px; font-weight: 750; color: var(--jie-text); }
#jie-root .jie-install__text span { font-size: 12.5px; color: var(--jie-muted); }
#jie-root .jie-install__go { flex: 0 0 auto; min-height: 40px; padding: 0 16px; }
#jie-root .jie-install__x { flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; color: var(--jie-muted); }
#jie-root .jie-install__x svg { width: 18px; height: 18px; }

@media (max-width: 360px) {
	#jie-root .jie-install__text span { display: none; }
}

@keyframes jie-pwa-drop {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

/* ---------- iPhone instructions sheet ---------- */
#jie-layer .jie-steps { display: grid; gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
#jie-layer .jie-steps li {
	display: flex; align-items: flex-start; gap: 12px;
	font-size: 15.5px; line-height: 1.45; color: var(--jie-text-2);
}
#jie-layer .jie-steps__n {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--jie-accent-50); color: var(--jie-accent-700); font-weight: 800; font-size: 14px;
}
#jie-layer .jie-steps strong { font-weight: 750; color: var(--jie-text); }
#jie-layer .jie-steps__ico {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: -5px;
	width: 26px; height: 26px; border-radius: 8px; background: var(--jie-soft); color: var(--jie-accent-2);
}
#jie-layer .jie-steps__ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; }
#jie-layer .jie-sheet__actions--one { grid-template-columns: 1fr; }

@media (prefers-reduced-motion: reduce) {
	#jie-root .jie-install { animation: none; }
}