/* Reset, page stage, app column and screen container. */
* { box-sizing: border-box; }
html, body { height: 100%; }
/* Native feel on phones: no grey flash on tap; tappable surfaces sink a little
   when pressed (instant feedback, as in iOS and Instagram). */
html { -webkit-tap-highlight-color: transparent; }
.bcard, .lcard .chip-btn, .chip-btn, .tile, a.item, .w-chip:not(.static), .pw-plan, .icon-btn, .nav a {
  transition: transform .12s ease-out;
}
.bcard:active, .chip-btn:active, .tile:active, a.item:active, .w-chip:not(.static):active, .pw-plan:active, .icon-btn:active {
  transform: scale(.97);
}
.nav a:active { transform: scale(.92); }
@media (prefers-reduced-motion: reduce) {
  .bcard, .chip-btn, .tile, a.item, .w-chip, .pw-plan, .icon-btn, .nav a, .btn { transition: none; }
  .bcard:active, .chip-btn:active, .tile:active, a.item:active, .w-chip:active, .pw-plan:active, .icon-btn:active, .nav a:active, .btn:active { transform: none; }
}
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); }
/* Arabic and Russian: fonts with those scripts (Google Fonts loads only the
   glyph ranges a page uses). Hebrew product names fall back to Heebo. */
html[lang="ar"] body { font-family: "Noto Sans Arabic", var(--font-he); }
html[lang="ru"] body { font-family: "Noto Sans", 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; }
/* Headings get focus from code on every screen change (so screen readers start
   there); they are not controls, so no focus ring, which Safari would draw. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.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; } }


/* The "about" panel (renderDesk): only on desktop, inside the side menu (desktop.css). */
.desk { display: none; }

/* Large text (settings): scales the whole interface, layout included */
html.big-text { zoom: 1.15; }