/* Spiżarnia — fonty, reset, typografia, kolumna, klasy pomocnicze. */

/* EB Garamond: plik zmienny 400–800, używany tylko w nagłówku ekranu (500). */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: block; src: url(../fonts/ebgaramond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: block; src: url(../fonts/ebgaramond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Figtree: plik zmienny (Google Fonts, latin + latin-ext), używamy 400 / 500 / 600. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: block; src: url(../fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 600; font-display: block; src: url(../fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cream); -webkit-text-size-adjust: 100%; }
html.lock { overflow: hidden; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font: 500 var(--fs-body)/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  max-width: 100vw;
  touch-action: manipulation; /* przewijanie w obie strony (rzędy chipów przewijają się palcem na iOS), bez podwójnego dotknięcia do zbliżenia; szczypanie blokuje main.js (24 września; było pan-y, które na iOS blokowało też poziome przewijanie chipów) */
}
body.lock { overflow: hidden; }

/* <button> nie dziedziczy koloru ani kroju z arkusza przeglądarki: podajemy jawnie (pułapka „czerń bocznymi drzwiami”) */
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); font-weight: 500; color: var(--ink); -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-touch-callout: none; }
button:disabled { cursor: default; }
input, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
a { color: var(--olive); text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }

/* fokus klawiatury: obrys beige-deep 1 px z odsunięciem 1 px (nigdy atrament) */
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--beige-deep); outline-offset: 1px; }
/* hover i wciśnięcie nie zmieniają rozmiaru ani nie dodają cienia: wypełnienie idzie o ton ciemniej */
@media (hover: hover) {
  button.chip:not(.chip--on):hover, .btn--secondary:hover, .btn--muted:hover, .suggest__item:hover { background: var(--beige); }
  .btn--primary:hover, .btn--fill:hover, .minus:hover .minus__circle, .undo-pill:hover { filter: brightness(.97); }
}

/* ruch tylko po kliknięciu; mniej ruchu, gdy system prosi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* kolumna */
#app { width: 100%; color: var(--ink); }
.app {
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-bottom: calc(var(--safe-b) + 16px);
}
.app--tabbar { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); }
.app--tabbar.app--slot { padding-bottom: calc(var(--tabbar-h) + var(--slot-h) + var(--safe-b) + 16px); }
.app--tabbar.app--btn { padding-bottom: calc(var(--tabbar-h) + var(--screen-btn-h) + var(--safe-b) + 16px); }
.app--tabbar.app--slot.app--btn { padding-bottom: calc(var(--tabbar-h) + var(--slot-h) + var(--screen-btn-h) + var(--safe-b) + 16px); }
.app--slot:not(.app--tabbar) { padding-bottom: calc(var(--slot-h) + var(--safe-b) + 16px); }
.app--btn:not(.app--tabbar) { padding-bottom: calc(var(--screen-btn-h) + var(--safe-b) + 16px); }
.app--slot.app--btn:not(.app--tabbar) { padding-bottom: calc(var(--slot-h) + var(--screen-btn-h) + var(--safe-b) + 16px); }

/* typografia pomocnicza */
.caps { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: var(--caps-tracking); font-size: var(--fs-caps); }
.caps--tight { letter-spacing: .06em; }
.sans { font-family: var(--font-sans); }
.num { font-variant-numeric: tabular-nums; }
.quiet { color: var(--text-2); }
.faint { color: var(--text-3); }
.b { font-weight: 600; }
.icon svg, .icon-btn svg { display: block; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* separator sekcji: podwójna linia 2 × 1 px w odstępie 3 px */
.dbl-rule { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); height: 3px; }
.dbl-rule--short { width: 56px; margin: 12px auto 0; }

[id^="p-"], [id^="b-"] { scroll-margin-top: calc(120px + var(--safe-t)); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }