/* Reset, page stage, app column and screen container. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--stage); color: var(--ink);
  font-family: var(--font-he); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body { font-family: var(--font-en); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
/* screen-reader-only text */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }
bdi { unicode-bidi: isolate; }

.app {
  position: relative; max-width: 440px; min-height: 100%; margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgba(101, 37, 245, .06), 0 30px 80px rgba(80, 40, 180, .12);
}
.screen {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: var(--s4) calc(var(--nav-h) + var(--s8) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: var(--s5);
  animation: screen-in .28s ease-out;
}
.screen > *, .offers > *, .plist > *, .choices > * { min-width: 0; }
.offers, .plist, .offer, .lcard { grid-template-columns: minmax(0, 1fr); }
.screen.has-dock { padding-bottom: calc(var(--nav-h) + 150px + env(safe-area-inset-bottom, 0px)); }
.app[data-redraw="true"] .screen, .app[data-redraw="true"] .offer { animation: none; }
@keyframes screen-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }