/* ============================================================================
   RelaxPRO — základ: reset, skořápka telefonu, navigační stack
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-soft-2); color: var(--text); }

/* ----------------------------------------------------------------------------
   Skořápka. Na mobilu je appka celá obrazovka, na desktopu stojí v rámu
   telefonu, aby šel prototyp ukázat na poradě.
   -------------------------------------------------------------------------- */
.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--bg);
}

.device {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

@media (min-width: 900px) and (min-height: 880px) {
  .stage {
    background:
      radial-gradient(70% 60% at 50% 0%, color-mix(in oklab, var(--brand-base) 10%, var(--bg)), var(--bg));
    padding: var(--sp-7);
  }
  .device {
    width: 402px;
    height: 844px;
    border-radius: 46px;
    box-shadow:
      var(--sh-3),
      0 0 0 10px color-mix(in oklab, var(--text) 82%, #000),
      0 0 0 11px color-mix(in oklab, var(--text) 40%, transparent);
  }
}

/* stavový řádek — kulisa, ne funkční prvek */
.statusbar {
  position: relative;
  z-index: 5;
  height: 52px;
  padding: 0 28px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  pointer-events: none;
  color: var(--text);
  transition: color var(--t-base) var(--ease-out);
}
.statusbar[data-on-field="true"] { color: var(--text-on-field); }
/* Obrazovka s polem, která začíná běžnou lištou (Kredit a platby): hodiny leží
   na liště, ne na poli, takže potřebují barvu textu, ne bílou. */
.device:has(.viewport > .screen--field:last-child > .appbar:first-child) .statusbar { color: var(--text); }

.home-indicator {
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 136px;
  height: 5px;
  margin-left: -68px;
  border-radius: 3px;
  background: color-mix(in oklab, var(--text) 32%, transparent);
  z-index: var(--z-nav);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   Navigační stack. Obrazovky leží na sobě; router přidává třídy pro směr
   animace, takže push a pop vypadají různě jako v nativní appce.
   -------------------------------------------------------------------------- */
.viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  /* Stavový řádek je překryv nad obrazovkou. Obsah proto začíná až pod ním;
     jediné, co pod něj smí zasáhnout, je hloubkové pole se zápornou marží. */
  padding-top: 52px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  will-change: transform, opacity;
}
/* Obrazovky s hloubkovým polem sahají až k hornímu okraji; prostor na stavový
   řádek si odbavuje samo pole svým horním odsazením. */
.screen--field { padding-top: 0; }
/* Když taková obrazovka začíná běžnou lištou (Kredit a platby), odsadí se
   pod stavový řádek lišta sama, jinak by nadpis ležel přes hodiny. */
.screen--field > .appbar:first-child { padding-top: calc(52px + var(--sp-1)); }

.screen__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen__scroll::-webkit-scrollbar { display: none; }

/* spodní polstrování, aby poslední řádek neskončil pod navigací */
.screen__scroll > :last-child { padding-bottom: calc(112px * var(--density)); }
.screen--no-nav .screen__scroll > :last-child { padding-bottom: var(--sp-7); }

/* příchozí obrazovka zprava, odcházející se odsune a ztlumí */
@keyframes screen-push-in {
  from { transform: translate3d(28%, 0, 0); opacity: .4; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes screen-push-out {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(-14%, 0, 0); opacity: .35; }
}
@keyframes screen-pop-in {
  from { transform: translate3d(-14%, 0, 0); opacity: .35; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes screen-pop-out {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(30%, 0, 0); opacity: 0; }
}
/* přepnutí tabu je stranově neutrální — jen prolnutí s drobným nadechnutím */
@keyframes screen-swap-in {
  from { transform: scale(.985); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes screen-swap-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.screen[data-anim="push-in"]  { animation: screen-push-in  var(--t-base) var(--ease-out) both; }
.screen[data-anim="push-out"] { animation: screen-push-out var(--t-base) var(--ease-out) both; }
.screen[data-anim="pop-in"]   { animation: screen-pop-in   var(--t-base) var(--ease-out) both; }
.screen[data-anim="pop-out"]  { animation: screen-pop-out  var(--t-base) var(--ease-in) both; }
.screen[data-anim="swap-in"]  { animation: screen-swap-in  var(--t-base) var(--ease-out) both; }
.screen[data-anim="swap-out"] { animation: screen-swap-out var(--t-fast) linear both; }

/* obsah obrazovky se skládá po řádcích — jeden nástup, ne efekt na každé kartě */
.stagger > * {
  animation: stagger-rise var(--t-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes stagger-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
   Typografie obsahu
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.035em;
  font-feature-settings: "tnum";
}
.t-h1 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 60;
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.t-h2 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "opsz" 40;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.t-h3 {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 40, "opsz" 24;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.t-lead { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.015em; }
.t-body { font-size: var(--fs-body); }
.t-small { font-size: var(--fs-small); }
.t-tiny { font-size: var(--fs-tiny); }
.t-num { font-feature-settings: "tnum"; letter-spacing: -.01em; }
.t-muted { color: var(--text-2); }
.t-faint { color: var(--text-3); }
.t-brand { color: var(--brand); }
.t-danger { color: var(--danger); }
.t-success { color: var(--success); }

/* ----------------------------------------------------------------------------
   Drobné pomůcky
   -------------------------------------------------------------------------- */
.pad { padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------------------
   Pohyb se dá vypnout systémově i v dev toolu
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}