/* App pages (build step 1): the wireframes' phone frame becomes the whole screen. Components, glass and the
   tab bar come from design/wireframes/wireframe.css, so the app and the wireframes cannot drift apart. */
html, body { height: 100%; }
body { background: var(--color-bg); }
.phone.app { width: 100%; max-width: 480px; height: 100dvh; margin: 0 auto; border: 0; border-radius: 0; }
.phone.app .screen { padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px)); padding-bottom: calc(56px + var(--space-2) + var(--space-5) + env(safe-area-inset-bottom, 0px)); }
.phone.app .tabbar { bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); padding-bottom: 0; }
/* A form's bottom button stays in view just above the floating tab bar, so taps never land on the bar instead.
   bottom: 0 sits at the end of the screen's content box, which already stops short of the bar (its padding-bottom). */
.phone.app:has(.tabbar) .screen .push-down { position: sticky; bottom: 0; z-index: 1; }
.phone.app .screen > .row:first-child:has(.screen-title) { top: calc(-1 * (var(--space-5) + env(safe-area-inset-top, 0px))); margin-top: calc(-1 * (var(--space-5) + env(safe-area-inset-top, 0px))); padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px)); }
[hidden] { display: none !important; }
.phone.app form { display: flex; flex-direction: column; gap: var(--space-3); }
/* A saved message: the alert shape in the positive colour, so it never reads as an error. */
.alert-ok { border-color: var(--color-positive); }
.alert-ok strong { color: var(--color-positive); }
/* A screen's sections stack like the screen itself. */
.phone.app .screen > section { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.days { display: flex; flex-direction: column; gap: var(--space-2); }
.days .label { margin-top: var(--space-2); }
/* Settings groups: each heading after the first starts a new group. */
#settings-main > h3.label:not(:first-child) { margin-top: var(--space-4); }
/* A heading focused by script (a newly opened view) is announced, not outlined. */
.phone.app [tabindex="-1"]:focus { outline: none; }
.budget-cards, .stack-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.budget-cards .card { position: relative; }
.phone.app section section { display: flex; flex-direction: column; gap: var(--space-3); }

/* Hide amounts (Settings, or Home's eye): every amount shows •••• in its place, for screen readers too. */
[data-hide-amounts] .money { position: relative; visibility: hidden; }
[data-hide-amounts] .money::after { content: "••••"; visibility: visible; position: absolute; inset: 0; text-align: inherit; white-space: nowrap; }
[data-hide-amounts] .num.money::after { text-align: right; }
/* First run: each step fills the screen so its button sits at the bottom. */
.first-step { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.first-step[hidden] { display: none; }
/* Guided tour on the real screens (src/app/tour.js): the lit zone keeps its place, everything else is dimmed and
   can't be tapped, and the card sits above the tab bar. */
.tour-block { position: fixed; inset: 0; z-index: 5; }
body.touring .tabbar { filter: brightness(0.4); }
body > .tour-card { position: fixed; z-index: 6; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: max(var(--space-3), calc(50% - 240px + var(--space-3)));
  right: max(var(--space-3), calc(50% - 240px + var(--space-3))); }
.tour-card h3:focus { outline: none; }
/* Room inside a lit zone that has none of its own; the negative margin keeps the screen from moving. */
.tour-focus.tour-pad { padding: var(--space-3); margin: calc(-1 * var(--space-3)); }
/* Show amounts in waits for exchange rates (review 8), so Home keeps it hidden. */
.show-in[hidden] { display: none; }
/* The picked date sits on the date chips' own line, after Other date; the chips' wrapping moves it down on a narrow phone. */
.date-chips .date-shown { margin: 0; align-self: center; }