/* Timer - in the installed app / on a phone only (the PWA template loads it; scope rules under html.app) */

/* Timer page: all of it on one phone screen - less room above the time, tighter gaps and buttons, and the unicorn sized
   by the room left under them (as big as the screen is wide at most), 60px above the tab bar, so it sits below them */
html.app .tmr { --uni: calc(min(440px, 100vw, 100dvh - 500px) * .75); --uni-gap: 8px; --uni-lift: 60px; gap: 22px; padding-top: 8px; padding-bottom: calc(var(--uni) + var(--uni-gap) + var(--uni-lift)); }
html.app:has(.tmr), html.app:has(.tmr) body { overflow: hidden; overscroll-behavior: none; }	/* it all fits: no drag, no bounce */
html.app .tmr-face { padding: 20px 32px; width: min(100%, 360px); box-sizing: border-box; }	/* as wide as the snooze row: the ▶ / ❚❚ clear of the time */
html.app .tmr-clock { font-size: clamp(72px, 24vw, 96px); }	/* "59:55" fits that box, clear of the ▶ / ❚❚, on a wide screen too (160px spilled out) */
html.app .tmr-picks, html.app .tmr-snooze { gap: 20px; }
html.app .tmr-picks .btn, html.app .tmr-snooze .btn, html.app .tmr-sfx .btn { height: 48px; }	/* easy for a finger (the buttons are a fixed 40px) */
html.app .tmr-picks .btn, html.app .tmr-custom .btn { font-size: 21px; padding: 0 28px; }
html.app .tmr-picks .tmr-own { padding: 0 14px; }
html.app .tmr .tmr-pause { left: 17px; bottom: 17px; width: 22px; height: 22px; }
html.app .tmr-snooze, html.app .tmr-sfx { margin-top: 0; }
html.app .tmr-snooze .btn { font-size: 21px; padding: 0; }
html.app .tmr-sfx .btn { font-size: 21px; padding: 0 24px; }
html.app .tmr-sfx .tmr-mute { padding: 0 14px; }
html.app .tmr-uni { bottom: calc(var(--pwa-tab-h, 0px) + var(--pwa-bottom, 0px) + var(--uni-gap) + var(--uni-lift)); }

/* About */
.app-about { display: grid; justify-items: center; gap: 6px; padding: 40px 0; text-align: center; }
.app-about img { width: 120px; height: 120px; object-fit: contain; }
.app-about-name { font-size: 24px; font-weight: 650; }
.app-about-version { font-size: 12px; letter-spacing: .08em; color: var(--th-muted); }