/* ==========================================================================
   YumiFit — components.css
   Kierunek F (P058): pas w kolorze --color-band na górze każdej zakładki, pod nim
   biały arkusz w stylu etykiety: grube linie, cienkie linie, kropkowana prowadząca.
   Zasady:
   - tylko klasy, tylko wartości z tokens.css (var(--…)); bez stylów inline;
   - mobile-first; progi 768 px i 1024 px jako @container app/page (min-width: …);
     kontener .app / .page ma w aplikacji szerokość okna, więc działa jak @media;
   - stany domenowe zawsze kształtem lub tekstem, nie samym kolorem;
   - dane liczbowe (wypełnienie pasków, słupki) idą atrybutami SVG w %, nie stylem.
   Nazewnictwo: blok__element--modyfikator. Stany interakcji przez atrybuty
   ARIA/HTML (aria-current, aria-expanded, aria-invalid, [open], :disabled).
   ========================================================================== */

/* ---- 00-base.css ------------------------------------------------------- */
/* ==========================================================================
   0. FONT I BAZA
   ========================================================================== */

/* Archivo, zmienny (wght 100–900, wdth 62–125 %), podzbiór Latin + Latin Extended.
   Ścieżka względna do tego pliku; AssetMapper przepisze ją na wersjonowaną. */
@font-face {
  font-family: 'Archivo';
  src: url("fonts/Archivo-Variable-hjicovt.woff2") format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-variant-numeric: var(--font-numeric);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* :where() = zerowa specyficzność: klasa komponentu może nadpisać margines i wcięcie */
:where(ul[class], ol[class]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--underline-offset);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Ikony (inline SVG, Lucide). Rozmiar i grubość linii tylko z tokenów. */
.icon {
  display: inline-block;
  flex: none;
  inline-size: var(--size-icon-md);
  block-size: var(--size-icon-md);
  stroke-width: var(--icon-stroke);
  vertical-align: middle;
}

.icon--xs { inline-size: var(--size-icon-xs); block-size: var(--size-icon-xs); }
.icon--sm { inline-size: var(--size-icon-sm); block-size: var(--size-icon-sm); }
.icon--lg { inline-size: var(--size-icon-lg); block-size: var(--size-icon-lg); }
.icon--xl { inline-size: var(--size-icon-xl); block-size: var(--size-icon-xl); }
.icon--bold { stroke-width: var(--icon-stroke-bold); }
.icon--heavy { stroke-width: var(--icon-stroke-heavy); }

/* Tekst tylko dla czytników ekranu */
.visually-hidden {
  position: absolute !important;
  inline-size: var(--border-width-hairline);
  block-size: var(--border-width-hairline);
  margin: calc(var(--border-width-hairline) * -1);
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link „Przejdź do treści” — widoczny dopiero po fokusie z klawiatury */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  font-weight: var(--font-weight-extrabold);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Etykieta WERSALIKAMI: KALORIE, DO: DZIŚ, 25 PAŹ */
.eyebrow {
  font-size: var(--font-size-label);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* Próbka kreskowania „brak danych” (nigdy zero) */
.swatch-missing {
  display: inline-block;
  flex: none;
  inline-size: var(--size-swatch);
  block-size: var(--size-swatch);
  border: var(--border-width-hairline) solid var(--color-state-missing);
  border-radius: var(--radius-xs);
  background-image: var(--pattern-missing);
}

.swatch-missing--sm {
  inline-size: var(--size-swatch-sm);
  block-size: var(--size-swatch-sm);
}

.swatch-missing--lg {
  inline-size: var(--size-swatch-lg);
  block-size: var(--size-swatch-lg);
  background-image: var(--pattern-missing-lg);
}

/* Szanujemy ustawienie systemu „ogranicz ruch” */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--duration-instant) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--duration-instant) !important;
    scroll-behavior: auto !important;
  }
}

/* Znak (P056): dymek z kęsem i Y. Kształt w atrybutach SVG, kolory z tokenów.
   Pliki samodzielne: public/brand, generuje je tools/brand-assets.php. */
.logo-mark {
  display: block;
  flex: none;
  inline-size: var(--size-logo-header);
  block-size: var(--size-logo-header);
}

.logo-mark__bubble {
  fill: var(--color-accent);
}

.logo-mark__y {
  fill: var(--color-text-on-accent);
}

/* ---- 10-layout.css ----------------------------------------------------- */
/* ==========================================================================
   1. POWŁOKA APLIKACJI (.app) I NAWIGACJA
   Struktura strony PWA:
     <div class="app">                         ← kontener zapytań (szerokość okna)
       <div class="app__shell">                ← siatka: nagłówek / treść / nawigacja
         <header class="app-header …">         ← pas na zakładkach głównych, .page-bar na podstronach
         <main class="app__main"> … <div class="toast-region"> </main>
         <nav class="app-nav"> … </nav>
       </div>
       <dialog class="sheet"> …                ← arkusze (showModal → górna warstwa)
     </div>
   Zachowanie nawigacji:
     < 768 px   biały dolny pasek, 5 pozycji, „Dodaj” jako okrągły przycisk w pasku
     768–1023   pionowa szyna 96 px po lewej, ikony z podpisami
     ≥ 1024     panel boczny 248 px: znak + nazwa, pozycje z podpisami obok ikon
   ========================================================================== */

.app {
  container: app / inline-size;
  min-block-size: var(--layout-viewport-height);
  background: var(--color-surface);
}

/* Geometry of the page, shared by the band and the content so their edges line up at every width:
   --bleed is the distance from the content edge to the edge of the main area (a band inside the content uses it to reach
   the full width). */
.app__shell {
  --page-gutter: var(--gutter);
  --page-content: 100cqi;
  --page-nav: 0px;
  --bleed: max(var(--page-gutter), calc((100cqi - var(--page-nav) - var(--page-content)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "nav";
  min-block-size: var(--layout-viewport-height);
}

.app__header {
  grid-area: header;
}

.app__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding-inline: var(--page-gutter);
  padding-block-end: var(--space-6);
}

/* Kolumna treści: czytelna szerokość niezależnie od okna */
.app__content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  inline-size: 100%;
  max-inline-size: var(--page-content);
  margin-inline: auto;
}

.app__nav {
  grid-area: nav;
}

@container app (max-width: 359px) {
  .app > * {
    --gutter: var(--space-4);
  }
}

@container app (min-width: 768px) {
  .app__shell {
    --page-gutter: var(--gutter-tablet);
    --page-content: var(--layout-content-narrow);
    --page-nav: var(--layout-rail-width);
    grid-template-columns: var(--layout-rail-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "nav header"
      "nav main";
  }

  .app__main {
    padding-block-end: var(--space-10);
  }
}

@container app (min-width: 1024px) {
  .app__shell {
    --page-gutter: var(--gutter-desktop);
    --page-content: var(--layout-content-max);
    --page-nav: var(--layout-sidebar-width);
    grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
  }
}

/* Powitanie: bez nawigacji głównej, jedna kolumna na każdej szerokości; pas wyrównany do kolumny formularza */
.app__shell--bare {
  --page-nav: 0px;
  --page-content: var(--layout-form-max);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header"
    "main";
}

/* Telefon: strona z formularzem nie ma dolnej nawigacji (pasek z „Wstecz” wystarcza), a podczas pisania w polu
   żadna strona nie ma jej nad klawiaturą ekranową. Tablet i desktop zostawiają szynę. */
@container app (max-width: 767px) {
  .app__shell--form .app__nav,
  .app:has(.input:focus, .select__control:focus) .app__nav {
    display: none;
  }
}

/* Strona publiczna (landing, strony prawne): korzeń z kontenerem „page”,
   te same progi 768 / 1024 przez @container page (min-width: …) */
.page {
  container: page / inline-size;
  min-block-size: var(--layout-viewport-height);
  background: var(--color-bg);
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   1a. Pas nagłówka zakładek głównych: ten sam kolor na każdej zakładce.
   Komponenty wewnątrz pasa biorą kolory z ról przedefiniowanych poniżej.
   Nachodzi na niego biały „arkusz”: czapka z zaokrąglonymi rogami na końcu pasa.
   -------------------------------------------------------------------------- */
.app-header,
.kcal-card__main,
.auth-page__header {
  --color-text: var(--color-on-band);
  --color-text-secondary: var(--color-on-band-soft);
  --color-text-muted: var(--color-on-band-muted);
  --color-focus: var(--color-on-band-accent);
  --color-state-complete: var(--color-on-band-accent);
  --color-on-complete: var(--color-band);
  --color-state-unconfirmed: var(--color-on-band-accent);
  --color-state-missing: var(--color-on-band-muted);
  --color-state-over: var(--color-on-band);
  --color-bar-track: var(--color-on-band-track);
  --color-bar-fill: var(--color-on-band-accent);
  --color-bar-gap: var(--color-band);
  --color-surface-hover: var(--color-on-band-hover);
  --color-icon-button: transparent;
  --color-rule: var(--color-on-band);
  --color-disabled: var(--color-on-band-faint);
  --pattern-missing: repeating-linear-gradient(135deg, var(--color-on-band-muted) 0 1.5px, transparent 1.5px 4px);
  --pattern-missing-lg: repeating-linear-gradient(135deg, var(--color-on-band-muted) 0 2px, transparent 2px 6px);
  background: var(--color-band);
  color: var(--color-text);
}

.app-header {
  padding-inline: var(--page-gutter);
  padding-block-start: env(safe-area-inset-top);
}

.app-header::after,
.kcal-card__main::after,
.today__summary:empty::after,
.skeleton-card--band::after {
  content: "";
  display: block;
  block-size: var(--radius-sheet);
  margin-block-start: var(--space-3-5);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-surface);
}

.app-header::after {
  margin-inline: calc(var(--page-gutter) * -1);
}

/* Dzień: pas przechodzi z nagłówka w kartę kalorii, czapka jest na końcu karty */
.app-header--day::after {
  content: none;
}

.app-header__inner {
  display: flex;
  flex-direction: column;
  max-inline-size: var(--page-content);
  margin-inline: auto;
}

/* Górny wiersz pasa: logo przy krawędzi treści, po prawej to, co ten ekran potrzebuje */
.app-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: var(--size-band-bar);
}

.app-header__title {
  min-inline-size: 0;
  font-size: var(--font-size-band-title);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-heading);
  text-align: end;
  overflow-wrap: break-word;
}

/* Powitanie: krok w górnym wierszu, duży tytuł pod nim */
.app-header__title--large {
  padding-block-start: var(--space-1);
  font-size: var(--font-size-sheet-title);
  font-stretch: var(--font-stretch-display);
  text-align: start;
}

.app-header__step {
  color: var(--color-text-muted);
  text-align: end;
}

/* Tytuł zakładki, gdy obok logo stoi coś innego: na telefonie tylko dla czytników, od 768 px (bez logo w pasie) widoczny */
@container app (max-width: 767px) {
  .app-header__title--wide {
    position: absolute;
    inline-size: var(--border-width-hairline);
    block-size: var(--border-width-hairline);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Znak z nazwą: po lewej w pasie. Od 768 px znak jest w szynie (poza powitaniem, które szyny nie ma). */
.brand-full {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1-5);
  min-block-size: var(--size-touch);
  color: inherit;
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  text-decoration: none;
}

/* Dymek zaczyna się 2 px od krawędzi rysunku: optycznie równo z krawędzią treści */
.brand-full .logo-mark,
.auth-brand .logo-mark {
  margin-inline-start: calc(var(--space-0-5) * -1);
}

/* Na pasie: odwrócony wariant znaku (public/brand/logo-mark-inverse.svg), kształt bez zmian */
.app-header .logo-mark__bubble,
.auth-page__header .logo-mark__bubble {
  fill: var(--color-on-band);
}

.app-header .logo-mark__y,
.auth-page__header .logo-mark__y {
  fill: var(--color-ink);
}

/* Dzień na wąskim telefonie: obok znaku musi się zmieścić miesiąc i strzałki, nazwa tylko dla czytników */
@container app (max-width: 379px) {
  .app-header--day .brand-full__name {
    position: absolute;
    inline-size: var(--border-width-hairline);
    block-size: var(--border-width-hairline);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@container app (min-width: 768px) {
  .app__shell:not(.app__shell--bare) .brand-full {
    display: none;
  }

  .app-header__title {
    font-size: var(--font-size-title-lg);
    font-stretch: var(--font-stretch-display);
    text-align: start;
  }

  .app-header__title--large {
    font-size: var(--font-size-sheet-title);
  }
}

/* --------------------------------------------------------------------------
   1b. Nawigacja główna: biała, aktywna pozycja w kolorze akcentu
   -------------------------------------------------------------------------- */
.app-nav {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-nav);
  background: var(--color-surface);
  box-shadow: var(--shadow-nav);
}

.app-nav__inner {
  padding: 0 var(--space-1) env(safe-area-inset-bottom);
}

.app-nav__brand {
  display: none;
}

.app-nav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-block-size: var(--size-nav-bar);
}

.app-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
  inline-size: 100%;
  min-block-size: var(--size-nav-item);
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-size: var(--font-size-nav);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
  font-stretch: var(--font-stretch-compact);
  text-decoration: none;
  white-space: nowrap;
}

.app-nav__item .icon {
  stroke-width: var(--icon-stroke-nav);
}

.app-nav__item:hover {
  color: var(--color-text);
}

.app-nav__item[aria-current="page"] {
  color: var(--color-nav-active);
  font-weight: var(--font-weight-extrabold);
}

.app-nav__item[aria-current="page"] .icon {
  stroke-width: var(--icon-stroke);
}

.app-nav__label {
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container app (max-width: 359px) {
  .app-nav__inner {
    padding-inline: 0;
  }

  .app-nav__item {
    font-stretch: var(--font-stretch-display);
  }
}

/* „Dodaj”: okrągły przycisk w pasku, nie wystaje */
.app-nav__item--add .app-nav__label {
  display: none;
}

.app-nav__fab {
  display: grid;
  place-items: center;
  inline-size: var(--size-fab);
  block-size: var(--size-fab);
  border-radius: var(--radius-round);
  background: var(--color-fab);
  color: var(--color-text-on-accent);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.app-nav__item--add:hover .app-nav__fab {
  background: var(--color-accent-hover);
}

.app-nav__item--add .app-nav__fab .icon {
  stroke-width: var(--icon-stroke-bold);
}

.app-nav__wordmark {
  display: none;
}

/* Szyna (768–1023) */
@container app (min-width: 768px) {
  .app-nav {
    position: static;
    border-inline-end: var(--border-width-hairline) solid var(--color-border-subtle);
    box-shadow: none;
  }

  .app-nav__inner {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-block-size: var(--layout-viewport-height);
    padding: var(--space-3) var(--space-2);
  }

  .app-nav__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--size-touch);
    color: var(--color-text);
    text-decoration: none;
  }

  .app-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    min-block-size: 0;
  }

  .app-nav__item {
    font-size: var(--font-size-label);
  }
}

/* Panel boczny (≥ 1024) */
@container app (min-width: 1024px) {
  .app-nav__inner {
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
  }

  .app-nav__brand {
    justify-content: flex-start;
  }

  .app-nav__wordmark {
    display: block;
    font-size: var(--font-size-title-sm);
    line-height: var(--line-height-single);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
  }

  .app-nav__list {
    gap: var(--space-1);
  }

  .app-nav__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    padding-inline: var(--space-3);
    font-size: var(--font-size-body);
    font-stretch: var(--font-stretch-normal);
  }

  .app-nav__item:hover {
    background: var(--color-surface-muted);
  }

  .app-nav__item[aria-current="page"] {
    background: var(--color-accent-tint);
  }

  /* „Dodaj” jako główny przycisk w liście */
  .app-nav__item--add,
  .app-nav__item--add:hover {
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--size-button);
    margin-block: var(--space-2);
    background: var(--color-fab);
    color: var(--color-text-on-accent);
    font-weight: var(--font-weight-bold);
  }

  .app-nav__item--add:hover {
    background: var(--color-accent-hover);
  }

  .app-nav__item--add .app-nav__label {
    display: block;
  }

  .app-nav__fab,
  .app-nav__item--add:hover .app-nav__fab {
    inline-size: auto;
    block-size: auto;
    background: transparent;
  }
}

/* --------------------------------------------------------------------------
   1c. Miejsce na toasty — przyklejone nad dolną nawigacją (bez position: fixed,
   które w kontenerze zapytań liczyłoby się od .app, a nie od okna)
   -------------------------------------------------------------------------- */
.toast-region {
  position: sticky;
  inset-block-end: calc(var(--size-nav-bar) + env(safe-area-inset-bottom) + var(--space-3));
  z-index: var(--z-toast);
  block-size: 0;
  margin-block-start: auto; /* przy krótkiej treści: na dole obszaru treści, nie zaraz pod nią */
}

@container app (min-width: 768px) {
  .toast-region {
    inset-block-end: var(--space-6);
  }
}

/* ---- 20-actions.css ---------------------------------------------------- */
/* ==========================================================================
   2. PRZYCISKI, LINKI-PRZYCISKI, CHIPY
   Bez twardych cieni. Główna akcja: wypełniona; drugorzędna: cienki obrys.
   ========================================================================== */

/* Przycisk: <button class="btn …"> albo <a class="btn …"> (nawigacja) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--size-button);
  padding: 0 var(--space-4-5);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.btn:hover {
  background: var(--color-surface-muted);
}

/* Główna akcja ekranu/arkusza, maks. jedna na widok */
.btn--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.btn--primary:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

/* Zamknięcie dnia: wypełnione kolorem pasa, nie wygląda jak kolejny posiłek */
.btn--band {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-band);
}

.btn--band:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
}

/* Nieodwracalne (usunięcie konta) */
.btn--danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-text-on-accent);
}

.btn--danger:hover {
  background: var(--color-danger);
  text-decoration: underline;
}

/* Ciemny przycisk potwierdzenia (usuń posiłek, odłącz asystenta) — odwracalne, więc bez czerwieni */
.btn--inverse {
  border-color: var(--color-surface-inverse);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.btn--inverse:hover {
  background: var(--color-text-secondary);
}

.btn--lg {
  font-size: var(--font-size-button);
}

.btn--sm {
  min-block-size: var(--size-touch);
  padding-inline: var(--space-3-5);
  font-size: var(--font-size-small);
}

.btn--block {
  display: flex;
  inline-size: 100%;
}

.btn__label {
  min-inline-size: 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Okrągły przycisk ikony 44×44 (zamknij, wstecz, poprzedni/następny) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-icon-button);
  block-size: var(--size-icon-button);
  padding: 0;
  border: 0;
  border-radius: var(--radius-icon-button);
  background: var(--color-icon-button);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--color-surface-hover);
}

.icon-btn--plain {
  background: transparent;
}

.icon-btn[aria-disabled="true"],
.icon-btn:disabled {
  background: transparent;
  color: var(--color-disabled);
  cursor: not-allowed;
}

/* Przycisk tekstowy z podkreśleniem: „Co widzi ChatFIT?”, „Ustaw cel (opcjonalnie)” */
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-block-size: var(--size-touch);
  padding: 0 var(--space-0-5);
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-hairline);
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}

.link-btn:hover {
  color: var(--color-text-secondary);
}

.link-btn--lg {
  font-size: var(--font-size-body);
}

/* Usuwanie: czerwień, wyśrodkowany link pod przyciskami */
.link-btn--danger {
  justify-content: center;
  color: var(--color-text-danger);
}

.link-btn--danger:hover {
  color: var(--color-text-danger);
}

/* Przy etykiecie karty (np. „Zmień limit”, chip Dnia luzu jako przycisk): wysokość chipa, pole dotyku powiększone niewidocznie do 44 px */
.link-btn--sm,
.chip--action {
  position: relative;
  min-block-size: var(--size-chip);
  font-size: var(--font-size-caption);
}

.link-btn--sm::after,
.chip--action::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--space-2) * -1);
  inset-inline: 0;
}

a.chip--action {
  text-decoration: none;
  cursor: pointer;
}

a.chip--action:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

/* Chip: krótka etykieta stanu. Nigdy sam kolor — zawsze tekst, często ikona. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-chip);
  padding: 0 var(--space-2-5) 0 var(--space-2);
  border: var(--border-width-hairline) solid var(--color-border-control);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.chip--sm {
  min-block-size: var(--size-chip-sm);
  padding: var(--space-0-5) var(--space-2) var(--space-0-5) var(--space-1-5);
  font-size: var(--font-size-label);
}

/* Dzień luzu: brzoskwinia + ikona ↑ (limit podniesiony) albo ∞ (bez limitu) */
.chip--flex {
  border-color: transparent;
  background: var(--color-state-flex-day);
}

/* Niepotwierdzony: ramka przerywana, bez wypełnienia */
.chip--unconfirmed {
  border: var(--border-width-thin) var(--border-style-unconfirmed) var(--color-border);
  background: transparent;
}

/* Połączony asystent: ptaszek, stan także słowem */
.chip--connected {
  border-color: transparent;
  background: var(--color-accent-tint);
  color: var(--color-accent-on-soft);
}

/* Pigułka-przycisk: „2 dni nieocenione ›” */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-block-size: var(--size-touch);
  padding: 0 var(--space-3) 0 var(--space-3-5);
  border: var(--border-width-hairline) solid var(--color-border-control);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.chip-btn:hover {
  background: var(--color-surface-muted);
}

/* ---- 30-day.css -------------------------------------------------------- */
/* ==========================================================================
   3. DZIEŃ: NAGŁÓWEK, PASEK TYGODNIA, ZNACZNIKI STANU
   Znaczniki dnia (jedna nazwa na każdy stan, w legendzie i dla czytników):
     ✓  kompletny          — kółko z ptaszkiem
     •  niepotwierdzony    — kropka (są wpisy, dzień nie jest potwierdzony)
        brak wpisów         — puste miejsce (nie zero)
   Wybrany dzień: biała pigułka na pasie. Dziś (gdy oglądasz inny dzień): obrys.
   ========================================================================== */

.day-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  min-inline-size: 0;
}

/* Miesiąc otwiera arkusz z kalendarzem */
.day-header__month {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--size-touch);
  min-inline-size: 0;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.day-header__month:hover {
  background: var(--color-surface-hover);
}

.day-header__arrows {
  display: flex;
  flex: none;
}

.day-header__arrows .icon-btn {
  inline-size: var(--size-icon-button-narrow);
}

/* Bez logo w pasie (jest w szynie): miesiąc przy lewej krawędzi, strzałki po prawej */
@container app (min-width: 768px) {
  .day-header__controls {
    display: contents;
  }

  .day-header__month {
    padding-inline: 0;
    font-size: var(--font-size-title-lg);
    font-weight: var(--font-weight-black);
    font-stretch: var(--font-stretch-display);
  }

  .day-header__arrows .icon-btn {
    inline-size: var(--size-icon-button);
  }
}

/* --------------------------------------------------------------------------
   Pasek tygodnia
   -------------------------------------------------------------------------- */
.week-strip__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--size-bar-gap);
  padding-block-end: var(--space-3-5);
}

.week-strip__list > li {
  display: flex;
}

.day-cell {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
  min-inline-size: 0;
  padding: var(--space-1-5) 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

a.day-cell:hover {
  background: var(--color-surface-hover);
}

.day-cell__weekday {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps-tight);
  text-transform: uppercase;
}

.day-cell__date {
  font-size: var(--font-size-day);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-heading);
}

.day-cell__kcal {
  color: var(--color-text-secondary);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-semibold);
  font-stretch: var(--font-stretch-compact);
  white-space: nowrap;
}

/* Oglądany dzień: biała pigułka, kolory znaczników jak na białym */
.day-cell[aria-current="page"],
a.day-cell[aria-current="page"]:hover {
  --color-text: var(--color-band);
  --color-text-muted: var(--color-band);
  --color-text-secondary: var(--color-band);
  --color-state-complete: var(--color-band);
  --color-on-complete: var(--color-on-band);
  --color-state-unconfirmed: var(--color-band);
  background: var(--color-on-band);
}

/* Dziś, gdy oglądasz inny dzień */
.day-cell--today:not([aria-current]) {
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-on-band-line);
}

/* Poza zakresem (dalej niż jutro): nie jest linkiem */
.day-cell--disabled {
  --color-text: var(--color-on-band-faint);
  --color-text-muted: var(--color-on-band-faint);
}

/* --------------------------------------------------------------------------
   Znacznik stanu dnia
   -------------------------------------------------------------------------- */
.day-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-day-mark);
  block-size: var(--size-day-mark);
  border-radius: var(--radius-round);
}

.day-mark--complete {
  background: var(--color-state-complete);
  color: var(--color-on-complete);
}

.day-mark--complete .icon {
  inline-size: var(--size-check-in-mark);
  block-size: var(--size-check-in-mark);
  stroke-width: var(--icon-stroke-mark);
}

.day-mark--unconfirmed::before {
  content: "";
  inline-size: var(--size-day-dot);
  block-size: var(--size-day-dot);
  border-radius: var(--radius-round);
  background: var(--color-state-unconfirmed);
}

.day-mark--lg {
  inline-size: var(--size-day-mark-lg);
  block-size: var(--size-day-mark-lg);
}

/* Dzień z planem: własny znak (mały kalendarz), nigdy „≈”, które znaczy tylko szacunek. Pasek tygodnia, kalendarze, legenda. */
.plan-mark {
  display: inline-flex;
  align-items: center;
}

.plan-mark .icon {
  inline-size: var(--size-icon-mark);
  block-size: var(--size-icon-mark);
}

.day-cell__marks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-0-5);
}

/* ---- 40-kcal.css ------------------------------------------------------- */
/* ==========================================================================
   4. KALORIE W PASIE I MAKRO POD NIM
   Warianty (modyfikatory):
     (brak)              zwykły dzień: suma / limit, pasek, „Zostało …”
     --over              przekroczenie: nadwyżka bielą, podpis limitu, „+200 kcal ponad dzisiejszy limit”
     --flex-limit        Dzień luzu z limitem: chip ↑ „Dzień luzu · limit 3 000”, pasek do limitu dnia
     --no-limit          Dzień luzu bez limitu: chip ∞, sama suma, bez paska i bez „Zostało”
     --no-goal           bez celu: sama suma + „Ustaw cel (opcjonalnie)”
     --empty             brak wpisów: kreskowanie, nigdy „0 kcal”
   Szacunek (≈) to element, nie wariant: pojawia się przed sumą, gdy choć jeden wpis jest szacunkowy.
   Skala paska: większa z wartości — spożycie albo limit.
   Część __main jest dalszym ciągiem pasa nagłówka, na pełną szerokość obszaru treści.
   ========================================================================== */

.kcal-card__main {
  display: flex;
  flex-direction: column;
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
}

.kcal-card__main::after,
.today__summary:empty::after {
  margin-inline: calc(var(--bleed) * -1);
  margin-block-start: var(--space-3-5);
}

.kcal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-block-size: var(--size-chip);
}

.kcal-card__head .eyebrow {
  color: var(--color-text-muted);
}

.kcal-card__head .link-btn {
  color: var(--color-text-secondary);
}

.kcal-card__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-2);
  margin-block-start: var(--space-1);
}

.kcal-card__sum {
  display: inline-flex;
  align-items: baseline;
  gap: 0.14em;
  font-size: var(--font-size-band-number);
  line-height: var(--line-height-band);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
  white-space: nowrap;
}

/* ≈ przed sumą: przycisk otwiera arkusz „Szacunki w tym dniu” */
.kcal-card__approx {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  cursor: pointer;
}

.kcal-card__approx:hover {
  color: var(--color-on-band-accent);
}

.kcal-card__limit,
.kcal-card__unit {
  color: var(--color-text-secondary);
  font-size: var(--font-size-unit);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-unit);
  white-space: nowrap;
}

.kcal-card__note {
  margin-block-start: var(--space-2);
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.kcal-card__note--over {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.kcal-card__main > .link-btn {
  align-self: flex-start;
  margin-block-start: var(--space-1);
}

/* Brak wpisów: kreskowane pole zamiast liczby, nigdy „0 kcal” */
.kcal-card__empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-1-5);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

.kcal-card__limit-hint {
  margin-block-start: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

/* Trzy kolumny makro pod pasem, zamknięte grubą linią */
.kcal-card__macros {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding-block-end: var(--space-3-5);
  border-block-end: var(--border-width-rule) solid var(--color-rule);
}

/* --------------------------------------------------------------------------
   Pasek kcal (SVG z szerokościami w %: width="63.4%")
   -------------------------------------------------------------------------- */
.kcal-bar {
  margin-block-start: var(--space-2-5);
}

.kcal-bar__track {
  block-size: var(--size-bar-kcal);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-bar-track);
}

.kcal-bar__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.kcal-bar__fill {
  fill: var(--color-bar-fill);
}

.kcal-bar__excess {
  fill: var(--color-state-over);
}

.kcal-bar__gap {
  stroke: var(--color-bar-gap);
  stroke-width: var(--size-bar-gap);
}

/* Wiersz z podpisem „limit 1 900” i kreską nad paskiem przekroczenia */
.kcal-bar__scale {
  display: block;
  inline-size: 100%;
  block-size: var(--size-bar-limit-label);
  overflow: visible;
}

.kcal-bar__limit-label {
  fill: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-extrabold);
}

.kcal-bar__tick {
  fill: var(--color-state-over);
}

.kcal-bar--empty .kcal-bar__track {
  background-image: var(--pattern-missing-lg);
}

/* --------------------------------------------------------------------------
   Makro B / T / W
   -------------------------------------------------------------------------- */
.macro-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3-5);
}

.macro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.macro__label {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-semicondensed);
  white-space: nowrap;
}

.macro__value {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
  white-space: nowrap;
}

.macro__amount {
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-unit);
}

.macro__bar {
  block-size: var(--size-bar-macro);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-bar-track);
}

.macro__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.macro__fill {
  fill: var(--color-bar-fill);
}

.macro__excess {
  fill: var(--color-state-over);
}

/* Makro bez danych w całym dniu: kreskowany pasek, wartość słowami */
.macro--missing .macro__bar {
  background-image: var(--pattern-missing);
}

/* „Makro niepełne ›” — otwiera arkusz z listą wpisów bez B/T/W */
.flag-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.flag-link:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-hairline);
  text-underline-offset: var(--underline-offset);
}

/* ---- 50-meals.css ------------------------------------------------------ */
/* ==========================================================================
   5. EKRAN DZISIAJ: UKŁAD, POSIŁKI, STATUS DNIA, KOMUNIKATY, STANY
   ========================================================================== */

.today {
  gap: 0;
}

.today__summary,
.today__meals {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.today__meals {
  gap: var(--space-3);
  padding-block-end: var(--space-5);
}

.today__groups {
  margin-block-end: var(--space-5);
}

/* Dzień z samym planem: sekcja posiłków jest pusta, nie zostawia odstępu */
.today__meals:not(:has(> :not([hidden]))) {
  padding-block-end: 0;
}

/* Błąd i offline: bez karty, sam koniec pasa */
.today__summary:empty {
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  background: var(--color-band);
}

/* Desktop: kalorie na całą szerokość w pasie; makro, plany i grupa po lewej, posiłki po prawej */
@container app (min-width: 1024px) {
  .today {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: var(--space-10);
  }

  .today__summary:not(:empty),
  .kcal-card {
    display: contents;
  }

  .today__summary:empty,
  .kcal-card__main,
  .skeleton-card--band {
    grid-column: 1 / -1;
  }

  .kcal-card__macros {
    grid-column: 1;
    align-self: start;
    margin-block-end: var(--space-5);
  }

  .today__meals {
    grid-column: 2;
    grid-row: 2 / -1;
  }

  .today__side {
    grid-column: 1;
    grid-row: auto;
  }

  /* Pusty dzień bez makro i bez planów: jedna kolumna */
  .today:not(:has(.kcal-card__macros, .today__side)) .today__meals {
    grid-column: 1 / -1;
  }
}

/* Tytuł sekcji: „Posiłki”, „Dni” */
.section-title {
  margin-block: var(--space-4) var(--space-2);
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

/* W kolumnie z odstępem 12 px: do nagłówka 8 px jak w reszcie */
:where(.today__meals, .summary-layout, .day-list-section) > .section-title {
  margin-block-end: calc(var(--space-2) - var(--space-3));
}

@container app (min-width: 1024px) {
  .today__meals > .section-title:first-child {
    margin-block-start: 0;
  }
}

/* --------------------------------------------------------------------------
   Posiłek na liście (dotknięcie otwiera arkusz szczegółów).
   Trzy wiersze pod grubą linią, duży odstęp między posiłkami: nie zlewają się.
   -------------------------------------------------------------------------- */
.meal-list {
  display: flex;
  flex-direction: column;
}

.meal-row {
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.meal-row__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-2-5) var(--space-5);
  color: var(--color-text);
  text-decoration: none;
}

.meal-row__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
}

.meal-row__name {
  /* Room stays for the time and kcal, so one very long word breaks instead of widening the page. */
  max-inline-size: calc(100% - 9.5rem);
  /* A word is never cut in the middle: the leader shrinks first (it has no minimum), then the name wraps between words. */
  overflow-wrap: break-word;
  font-size: var(--font-size-item);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.meal-row__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  white-space: nowrap;
}

/* Kropkowana linia prowadząca: nazwa ……… kcal */
.meal-row__leader {
  flex: 1 1 0;
  min-inline-size: 0;
  border-block-end: var(--border-width) var(--border-style-leader) var(--color-rule);
  transform: translateY(calc(var(--space-1) * -1));
}

.meal-row__kcal {
  flex: none;
  font-size: var(--font-size-meal-kcal);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  white-space: nowrap;
}

.meal-row__link:hover .meal-row__name {
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--underline-offset);
}

@container app (max-width: 359px) {
  .meal-row__name {
    font-size: var(--font-size-button);
  }

  .meal-row__kcal {
    font-size: var(--font-size-lead);
  }
}

/* Jedno krótkie zdanie: co to było */
.meal-row__summary {
  overflow: hidden;
  font-size: var(--font-size-meal-summary);
  line-height: var(--line-height-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-row__macros {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.meal-row__missing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* Podgląd aktualnego komentarza asystenta (jedna linia) */
.meal-row__comment {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.meal-row__comment-author {
  flex: none;
  font-weight: var(--font-weight-extrabold);
}

.meal-row__comment-text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Status dnia
   -------------------------------------------------------------------------- */

/* Dzień kompletny: stan słowem + „Otwórz ponownie”, pod linią jak kolejny wiersz etykiety. */
.day-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.day-status__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-extrabold);
}

/* --------------------------------------------------------------------------
   Komunikat w treści (nie toast): informacja, ponowne otwarcie dnia, ostrzeżenie, błąd
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3-5);
  border-radius: var(--radius-note);
  background: var(--color-surface-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.notice__icon {
  margin-block-start: var(--space-0-5);
}

.notice__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.notice__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-extrabold);
}

.notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-1-5);
}

/* Dzień otwarty ponownie po zmianie posiłku: ramka przerywana jak „niepotwierdzony” */
.notice--reopened {
  border: var(--border-width-thin) var(--border-style-unconfirmed) var(--color-border);
  background: transparent;
}

.notice--info {
  background: var(--color-info-bg);
}

.notice--info .notice__icon {
  color: var(--color-accent);
}

.notice--warning {
  background: var(--color-warning-bg);
}

.notice--error {
  background: var(--color-danger-bg);
}

.notice--error .notice__icon {
  color: var(--color-danger);
}

/* --------------------------------------------------------------------------
   Stany ekranu: pusty dzień, błąd, offline
   -------------------------------------------------------------------------- */
.state-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.state-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--font-size-item);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.state-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-meal-summary);
}

.state-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  inline-size: 100%;
  margin-block-start: var(--space-1);
}

/* --------------------------------------------------------------------------
   Szkielet ładowania (aria-busy na regionie, opis dla czytników obok)
   -------------------------------------------------------------------------- */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: var(--color-skeleton);
  animation: skeleton-pulse var(--duration-pulse) var(--easing-standard) infinite;
}

.skeleton--line {
  block-size: var(--size-skeleton-line);
}

.skeleton--number {
  inline-size: 60%;
  block-size: var(--size-skeleton-number);
}

.skeleton--bar {
  block-size: var(--size-bar-kcal);
  border-radius: var(--radius-pill);
}

.skeleton--short {
  inline-size: 40%;
}

.skeleton--row {
  block-size: var(--size-button-lg);
  border-radius: var(--radius-note);
}

/* Na miejscu kalorii: dalszy ciąg pasa */
.skeleton-card--band {
  --color-skeleton: var(--color-on-band-track);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-inline: calc(var(--bleed) * -1);
  padding-inline: var(--bleed);
  background: var(--color-band);
}

.skeleton-card--band::after {
  margin-inline: calc(var(--bleed) * -1);
  margin-block-start: 0;
}

.meal-list:has(> .skeleton) {
  gap: var(--space-2);
}

@keyframes skeleton-pulse {
  50% {
    opacity: var(--opacity-disabled);
  }
}

/* ---- 60-sheet.css ------------------------------------------------------ */
/* ==========================================================================
   6. ARKUSZE (<dialog class="sheet">)
   Telefon: arkusz od dołu. Od 768 px: okno na środku.
   Otwieranie: dialog.showModal() (Stimulus „sheet”), zamykanie: <form method="dialog">,
   Esc, kliknięcie w tło. Treść: szczegóły posiłku, Dodaj, arkusze informacyjne.
   ========================================================================== */

.sheet {
  position: fixed;
  inset: auto 0 0;
  inline-size: 100%;
  max-inline-size: none;
  max-block-size: var(--layout-sheet-max-height);
  margin: 0;
  padding: var(--space-2-5) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: sheet-in var(--duration-sheet) var(--easing-standard);
}

.sheet::backdrop {
  background: var(--color-scrim);
}

.sheet__handle {
  align-self: center;
  flex: none;
  inline-size: var(--size-handle-width);
  block-size: var(--size-handle-height);
  border-radius: var(--radius-pill);
  background: var(--color-handle);
}

.sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.sheet__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-inline-size: 0;
}

.sheet__heading .eyebrow {
  color: var(--color-text-muted);
}

.sheet__title {
  font-size: var(--font-size-sheet-title);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
  overflow-wrap: break-word;
}

.sheet__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin-block-start: var(--space-1);
}

/* Działania na całym posiłku: osobno od wierszy pozycji i od „Popraw w czacie”; usuwanie pozycji pod formularzem edycji */
.meal-actions,
.entry-delete {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.meal-actions .eyebrow {
  color: var(--color-text-muted);
}

@container app (min-width: 768px) {
  .sheet {
    inset: 0;
    inline-size: calc(100% - 2 * var(--gutter-tablet));
    max-inline-size: var(--layout-sheet-max);
    max-block-size: calc(var(--layout-viewport-height) - 2 * var(--space-10));
    margin: auto;
    padding: var(--space-5) var(--space-6) var(--space-6);
    border-radius: var(--radius-sheet);
    box-shadow: var(--shadow-float);
  }

  .sheet__handle {
    display: none;
  }
}

/* Only the slide: a fade from 0 let the page behind show through the sheet while it opened. */
@keyframes sheet-in {
  from {
    transform: translateY(var(--space-4));
  }
}

/* --------------------------------------------------------------------------
   Szczegóły posiłku: pełna etykieta
   -------------------------------------------------------------------------- */
.meal-detail__total {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
  margin-block-start: var(--space-1);
  padding-block-end: var(--space-2-5);
  border-block-end: var(--border-width-rule) solid var(--color-rule);
}

.meal-detail__kcal {
  font-size: var(--font-size-meal-number);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
  white-space: nowrap;
}

.meal-detail__unit {
  font-size: var(--font-size-unit);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-unit);
}

/* Białko, tłuszcz, węglowodany: wiersze etykiety bezpośrednio pod grubą linią */
.meal-macros {
  margin-block-start: calc(var(--space-3) * -1);
}

.meal-macros__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: var(--border-width-hairline) solid var(--color-rule);
  font-size: var(--font-size-meal-summary);
}

.meal-macros__row dt {
  font-weight: var(--font-weight-extrabold);
}

.meal-macros__row dd {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: 0;
}

.meal-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

.meal-items__title {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

/* Lista pod grubą linią: pozycje posiłku, wpisy w arkuszach informacyjnych, dni nieocenione */
.food-list,
.unrated-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-block-start: var(--border-width-meal) solid var(--color-rule);
  list-style: none;
}

/* Pozycja posiłku (składnik): wiersz do stuknięcia, otwiera jej edycję */
.food-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-block-size: var(--size-row);
  padding-block: var(--space-2-5);
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
  color: var(--color-text);
  text-decoration: none;
}

a.food-item:hover .food-item__name {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.food-item > .icon {
  align-self: center;
  color: var(--color-text-muted);
}

.food-item__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
  min-inline-size: 0;
}

.food-item__name {
  min-inline-size: 0;
  overflow-wrap: break-word;
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

.food-item__kcal {
  flex: none;
  font-size: var(--font-size-food-kcal);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  white-space: nowrap;
}

.food-item__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.food-item__note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

/* Jedno objaśnienie ≈ w arkuszu (nie pod każdą liczbą) */
.estimate-legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.estimate-legend__badge {
  flex: none;
  color: var(--color-text);
  font-size: var(--font-size-button);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-extrabold);
}

/* --------------------------------------------------------------------------
   Komentarz asystenta: aktualny / sprzed zmiany / brak (brak = nic nie rysujemy)
   -------------------------------------------------------------------------- */
.comment {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3-5);
  border-radius: var(--radius-note);
  background: var(--color-surface-muted);
}

.comment__author {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-extrabold);
}

.comment__text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-comment);
}

/* Sprzed zmiany: zwinięty <details>, ramka przerywana */
.comment--stale {
  padding: 0;
  border: var(--border-width-thin) var(--border-style-unconfirmed) var(--color-border-control);
  background: transparent;
}

.comment__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
  padding: 0 var(--space-2-5) 0 var(--space-3);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  list-style: none;
  cursor: pointer;
}

.comment__summary::-webkit-details-marker {
  display: none;
}

.comment__summary-label {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  min-inline-size: 0;
}

.comment__toggle {
  font-weight: var(--font-weight-extrabold);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-hairline);
  text-underline-offset: var(--underline-offset);
}

.comment__toggle--hide,
.comment--stale[open] .comment__toggle--show {
  display: none;
}

.comment--stale[open] .comment__toggle--hide {
  display: inline;
}

.comment__stale-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: 0 var(--space-3-5) var(--space-3);
}

.comment__stale-text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.comment__stale-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* --------------------------------------------------------------------------
   Dodaj: przykład polecenia / polecenie z datą
   -------------------------------------------------------------------------- */
.command-box {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-1) var(--space-1-5) var(--space-3-5);
  border-radius: var(--radius-note);
  background: var(--color-surface-muted);
}

.command-box--solo {
  min-block-size: var(--size-button);
}

.command-box__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--border-width-hairline);
  min-inline-size: 0;
}

.command-box__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
}

.command-box__command {
  overflow-wrap: anywhere;
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

/* Po skopiowaniu: ikona ptaszka + „Skopiowano” (stan ustawia Stimulus: data-copied) */
.command-box__copy .icon--copied,
.command-box__copy[data-copied] .icon--copy {
  display: none;
}

.command-box__copy[data-copied] .icon--copied {
  display: inline-block;
}

.command-box__status {
  color: var(--color-accent);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-extrabold);
}

/* --------------------------------------------------------------------------
   Arkusze informacyjne: listy punktów i wpisów
   -------------------------------------------------------------------------- */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.info-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.info-list__icon {
  margin-block-start: var(--space-0-5);
  color: var(--color-accent);
}

/* Wiersz wpisu w arkuszu (np. bez B/T/W, z szacunkiem) */
.entry-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  min-block-size: var(--size-row);
  padding-block: var(--space-2-5);
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
  color: var(--color-text);
  text-decoration: none;
}

a.entry-row:hover .entry-row__title {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.entry-row > .icon {
  color: var(--color-text-muted);
}

.entry-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}

.entry-row__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

.entry-row__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.entry-row__value {
  font-size: var(--font-size-food-kcal);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  white-space: nowrap;
}

/* ---- 65-toast.css ------------------------------------------------------ */
/* ==========================================================================
   7. TOAST (potwierdzenie po odpowiedzi serwera)
   Pojawia się w .toast-region (aria-live="polite"). Znika po 6 s, nie znika,
   gdy ma fokus albo kursor. „Zapisano” pokazujemy dopiero po odpowiedzi serwera.
   ========================================================================== */

.toast {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  max-inline-size: var(--layout-dialog-max);
  min-block-size: var(--size-button);
  margin-inline: auto;
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  border-radius: var(--radius-note);
  background: var(--color-band);
  color: var(--color-on-band);
  box-shadow: var(--shadow-float);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  animation: toast-in var(--duration-base) var(--easing-standard);
}

.toast__icon {
  color: var(--color-on-band-accent);
}

.toast__text {
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--space-2);
}

.toast__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex: none;
  min-block-size: var(--size-touch);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-band-accent);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
}

.toast__action:hover {
  background: var(--color-on-band-hover);
}

.toast__action:focus-visible {
  outline-color: var(--color-on-band-accent);
}

.toast--error .toast__icon {
  color: var(--color-danger-on-inverse);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

/* ---- 70-accordion.css -------------------------------------------------- */
/* ==========================================================================
   8. AKORDEON (<details class="accordion">)
   Natywny <details>/<summary>: działa bez JS i z klawiatury.
   ========================================================================== */

.accordion {
  border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
}

.accordion--card {
  border-block: var(--border-width-hairline) solid var(--color-border-subtle);
}

.accordion--card + .accordion--card {
  margin-block-start: calc(var(--space-5) * -1 - var(--border-width-hairline));
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
  padding-block: var(--space-1);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  list-style: none;
  cursor: pointer;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.entry-target__line {
  flex: 1;
  min-inline-size: 0;
}

.entry-target__change {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.accordion__chevron {
  transition: transform var(--duration-base) var(--easing-standard);
}

.accordion[open] > .accordion__summary .accordion__chevron {
  transform: rotate(var(--rotate-open));
}

.accordion__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding-block-end: var(--space-3-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.accordion__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin: 0;
  padding-inline-start: var(--space-4);
}

/* ---- 80-summary.css ---------------------------------------------------- */
/* ==========================================================================
   9. PODSUMOWANIA: TYDZIEŃ I MIESIĄC, HISTORIA
   Zasady liczenia (pokazujemy je w „Jak liczymy”, nie w każdej karcie):
   - średnia, „w limicie” i szacowany bilans tylko z dni kompletnych;
   - „Zapisane łącznie” ze wszystkich wpisów (także niepotwierdzonych i Dni luzu);
   - dzień bez limitu i dzień niepotwierdzony = „nieoceniony”;
   - brak wpisów to nie zero: kreskowanie w wykresie, puste pole w kalendarzu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   9a. W pasie: przełącznik, ‹ okres ›, średnia
   -------------------------------------------------------------------------- */

/* Przełącznik Tydzień / Miesiąc: linki, aktywny z podkreśleniem w akcencie pasa */
.segmented {
  display: flex;
  gap: var(--space-4-5);
}

.segmented__item {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch);
  color: var(--color-text-muted);
  font-size: var(--font-size-segment);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.segmented__item:hover {
  color: var(--color-text);
}

.segmented__item[aria-current="page"] {
  position: relative;
  color: var(--color-text);
  font-weight: var(--font-weight-extrabold);
}

.segmented__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block-end: var(--space-1-5);
  inset-inline: 0;
  block-size: var(--border-width-meal);
  background: var(--color-on-band-accent);
}

/* ‹ zakres dat › */
.period-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.period-nav__label {
  min-inline-size: 0;
  font-size: var(--font-size-segment);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* Poza pasem (arkusz „Wybierz dzień”): ciemny tekst, okrągłe przyciski, większy miesiąc */
.day-calendar .period-nav__label {
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.app-header .period-nav .icon-btn {
  margin-inline: calc(var(--space-2-5) * -1);
}

@container app (min-width: 768px) {
  .app-header .period-nav {
    justify-content: flex-start;
    gap: var(--space-4);
  }
}

.summary-hero {
  display: flex;
  flex-direction: column;
  padding-block-start: var(--space-3);
}

/* --------------------------------------------------------------------------
   9b. Statystyka: duża liczba + jednostka + podpis
   -------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-2);
}

.stat__value {
  font-size: var(--font-size-band-number);
  line-height: var(--line-height-band);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
  white-space: nowrap;
}

.stat__unit {
  color: var(--color-text-secondary);
  font-size: var(--font-size-unit);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-unit);
  white-space: nowrap;
}

/* Etykieta nad liczbą w pasie */
.stat__caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.summary-hero__empty {
  color: var(--color-text-secondary);
  font-size: var(--font-size-meal-summary);
}

/* --------------------------------------------------------------------------
   9c. Układ treści: telefon i tablet w jednej kolumnie; desktop w dwóch:
   wykres i dni po lewej, liczby po prawej
   -------------------------------------------------------------------------- */
.summary-layout {
  gap: var(--space-3);
}

.summary-layout__numbers {
  display: flex;
  flex-direction: column;
}

@container app (min-width: 1024px) {
  .summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    column-gap: var(--space-10);
  }

  .summary-layout--week {
    grid-template-rows: repeat(2, auto) 1fr;
    grid-template-areas:
      "title   numbers"
      "chart   numbers"
      "days    numbers";
  }

  .summary-layout--numbers {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title   title"
      "numbers link";
  }

  .summary-layout--month {
    grid-template-areas: "calendar side";
  }

  .summary-layout__title { grid-area: title; }
  .summary-layout__chart { grid-area: chart; }
  .summary-layout__numbers { grid-area: numbers; }
  .summary-layout--week .summary-layout__numbers { margin-block-start: var(--space-4); }
  .summary-layout__days { grid-area: days; }
  .summary-layout__link { grid-area: link; }
  .summary-layout__calendar { grid-area: calendar; }
  .summary-layout__side { grid-area: side; }
}

/* --------------------------------------------------------------------------
   9d. Wiersze liczb: nazwa po lewej, wartość po prawej, cienka linia atramentem
   -------------------------------------------------------------------------- */
.total-row,
.summary-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-0-5) var(--space-3);
  padding-block: var(--space-2-5);
  border-block-start: var(--border-width-hairline) solid var(--color-rule);
}

.total-row__label,
.summary-card__label {
  font-size: var(--font-size-meal-summary);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
}

.total-row__value,
.summary-card__value {
  font-size: var(--font-size-meal-kcal);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-figure);
  white-space: nowrap;
}

.summary-card__unit {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  font-stretch: var(--font-stretch-normal);
}

.summary-card__none {
  color: var(--color-text-muted);
  font-size: var(--font-size-meal-summary);
}

.summary-card__text {
  flex-basis: 100%;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.summary-card .chip-btn {
  margin-block-start: var(--space-1);
}

/* Bilans: deficyt / nadwyżka / za mało dni / brak zapotrzebowania */
.balance-card__head {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-0-5) var(--space-3);
}

.balance-card__caption {
  flex-basis: 100%;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* --------------------------------------------------------------------------
   9e. Wykres słupkowy (SVG; geometria w % w atrybutach, wygląd tutaj)
   -------------------------------------------------------------------------- */
.chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.chart .eyebrow {
  color: var(--color-text-muted);
}

.chart__figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.chart__plot {
  display: block;
  inline-size: 100%;
  block-size: var(--size-chart-height);
  overflow: visible;
}

.chart__baseline {
  stroke: var(--color-rule);
  stroke-width: var(--border-width);
}

.chart__bar {
  fill: var(--color-accent);
}

/* Niepotwierdzony: biały słupek z przerywanym obrysem (jak chip „niepotwierdzony”) */
.chart__bar--unconfirmed {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: var(--border-width-thin);
  stroke-dasharray: var(--size-chart-dash);
}

.chart__hatch {
  fill: var(--color-state-missing);
}

.chart__limit {
  stroke: var(--color-rule);
  stroke-width: var(--size-chart-limit);
}

.chart__badge {
  fill: var(--color-state-flex-day);
}

.chart__badge-glyph {
  fill: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--font-size-chart-badge);
  font-weight: var(--font-weight-black);
}

@container app (min-width: 1024px) {
  .chart__plot {
    block-size: var(--size-chart-height-lg);
  }
}

/* Podpisy dni pod osią X (HTML, wyrównane do kolumn wykresu) */
.chart__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.chart__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--border-width-hairline);
  font-size: var(--font-size-label);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

.chart__day-date {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   9f. Legenda (wykres i kalendarz)
   -------------------------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5) var(--space-3-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  line-height: var(--line-height-snug);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  white-space: nowrap;
}

.legend__marks {
  display: inline-flex;
  gap: var(--space-0-5);
}

.legend__swatch {
  display: inline-block;
  flex: none;
  inline-size: var(--size-legend-swatch);
  block-size: var(--size-legend-swatch);
  border-radius: var(--radius-xs);
  background: var(--color-accent);
}

.legend__swatch--unconfirmed {
  border: var(--border-width-hairline) var(--border-style-unconfirmed) var(--color-border);
  background: var(--color-surface);
}

.legend__swatch--missing {
  background-color: var(--color-surface);
  background-image: var(--pattern-missing);
}

.legend__line {
  display: inline-block;
  flex: none;
  inline-size: var(--size-legend-line);
  block-size: var(--size-chart-limit);
  background: var(--color-rule);
}

/* Kółko Dnia luzu z ↑ (limit podniesiony) albo ∞ (bez limitu) */
.flex-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-flex-badge);
  block-size: var(--size-flex-badge);
  border-radius: var(--radius-round);
  background: var(--color-state-flex-day);
  color: var(--color-ink);
  font-size: var(--font-size-flex-badge);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
}

/* --------------------------------------------------------------------------
   9g. Lista dni tygodnia
   -------------------------------------------------------------------------- */
.day-list-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.day-list {
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.day-list__item {
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
}

.day-list__link {
  display: grid;
  grid-template-columns: var(--size-day-mark-lg) minmax(0, 1fr) auto var(--size-icon-sm);
  align-items: center;
  gap: var(--space-1) var(--space-2-5);
  min-block-size: var(--size-row);
  padding-block: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
}

.day-list__link > .icon {
  color: var(--color-text-muted);
}

.day-list__link:hover .day-list__label {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.day-list__label {
  min-inline-size: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

.day-list__kcal {
  font-size: var(--font-size-food-kcal);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  white-space: nowrap;
}

.day-list__kcal--none {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  font-stretch: var(--font-stretch-normal);
}

.day-list__chips {
  grid-column: 2 / -1;
  justify-self: start;
  max-inline-size: 100%;
}

/* W liście dni „niepotwierdzony” to spokojny podpis: znacznik • mówi to samo */
.day-list__chips .chip--unconfirmed {
  min-block-size: 0;
  padding: 0;
  border: 0;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

/* --------------------------------------------------------------------------
   9h. Kalendarz miesiąca (Historia, arkusz „Wybierz dzień”)
   Pigułka w kolorze pasa = oglądany dzień (aria-current="page"); obrys = dziś.
   -------------------------------------------------------------------------- */
.month-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.month-calendar__title {
  padding-block-end: var(--space-1-5);
  border-block-end: var(--border-width-meal) solid var(--color-rule);
  color: var(--color-text);
}

.month-calendar__weekdays,
.month-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-0-5);
}

.month-calendar__weekdays {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps-tight);
  text-align: center;
  text-transform: uppercase;
}

.month-calendar .legend {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-0-5);
  min-block-size: var(--size-cal-cell);
  padding-block: var(--space-1-5);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}

a.cal-day:hover {
  background: var(--color-surface-muted);
}

.cal-day__date {
  font-size: var(--font-size-button);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-heading);
}

.cal-day__marks {
  display: inline-flex;
  gap: var(--space-0-5);
  min-block-size: var(--size-day-mark);
}

/* Wartość kcal w komórce na każdej szerokości (jak w pasku tygodnia) */
.cal-day__kcal {
  color: var(--color-text-muted);
  white-space: nowrap;
  font-size: var(--font-size-micro);
  line-height: var(--line-height-single);
  font-stretch: var(--font-stretch-compact);
}

.cal-day--today:not([aria-current]) {
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-accent);
}

a.cal-day[aria-current="page"],
a.cal-day[aria-current="page"]:hover {
  --color-text-muted: var(--color-on-band-soft);
  --color-state-complete: var(--color-on-band-accent);
  --color-on-complete: var(--color-band);
  --color-state-unconfirmed: var(--color-on-band-accent);
  background: var(--color-band);
  color: var(--color-on-band);
}

/* Dalej niż jutro: nie jest linkiem */
.cal-day--disabled {
  color: var(--color-text-muted);
}

.cal-day--disabled .cal-day__date {
  font-weight: var(--font-weight-semibold);
}

@container app (min-width: 768px) {
  .month-calendar__grid {
    gap: var(--space-1);
  }
}

@container app (min-width: 1024px) {
  .cal-day {
    min-block-size: calc(var(--size-cal-cell) + var(--space-4));
    padding-block-start: var(--space-2);
  }
}

/* ---- 85-forms.css ------------------------------------------------------ */
/* ==========================================================================
   10. FORMULARZE, USTAWIENIA, KONTO
   Podstrony aplikacji: .page-bar (wstecz + tytuł) w miejscu nagłówka powłoki,
   treść w .page-body (kolumna do 560 px). Strony publiczne (logowanie, zgoda OAuth)
   poza powłoką: .auth-page jest własnym kontenerem zapytań (te same progi 768/1024).
   Pola: <label for> + <input id>, podpowiedź i błąd przez aria-describedby,
   błąd = ramka + ikona + tekst (nigdy sam kolor). Liczby: type="text" inputmode="decimal".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pasek podstrony: spokojny, biały, ze strzałką wstecz
   -------------------------------------------------------------------------- */
.page-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  padding: calc(var(--space-1-5) + env(safe-area-inset-top)) var(--page-gutter) var(--space-1-5);
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
  background: var(--color-surface);
}

.page-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-touch);
  max-inline-size: var(--layout-form-max);
  margin-inline: auto;
}

.page-bar__heading {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.page-bar__heading .eyebrow {
  color: var(--color-text-muted);
}

.page-bar__title {
  overflow-wrap: anywhere;
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-heading);
}

/* Treść podstrony: wąska kolumna */
.page-body {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  inline-size: 100%;
  max-inline-size: var(--layout-form-max);
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-6);
}

.page-body__lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

/* Pod pasem (Ustawienia): szerokość pasa, od 1024 px grupy w dwóch kolumnach */
.page-body--band {
  max-inline-size: var(--page-content);
  padding-block-start: 0;
}

@container app (min-width: 1024px) {
  .page-body--band {
    display: block;
    columns: 2;
    column-gap: var(--space-10);
  }

  .page-body--band > .settings-group {
    margin-block-end: var(--space-8);
    break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   Formularz i pole
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-inline-size: 0;
}

.field__label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

/* W wąskich kolumnach (B/T/W): węższy krój, żeby „Węglowodany” mieściło się od 320 px */
.field__label--compact {
  font-size: var(--font-size-caption);
  font-stretch: var(--font-stretch-semicondensed);
}

.field__optional {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.field__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1-5);
  color: var(--color-text-danger);
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

/* Pole tekstowe */
.input {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--size-input);
  margin: 0;
  padding: 0 var(--space-3-5);
  border: var(--border-width-thin) solid var(--color-border-control);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-input-font);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
}

.input:hover {
  border-color: var(--color-text-muted);
}

.input::placeholder {
  color: var(--color-placeholder);
  font-weight: var(--font-weight-regular);
  opacity: 1;
}

.input[aria-invalid="true"] {
  border-color: var(--color-border-danger);
  background: var(--color-danger-bg);
}

.input:disabled {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

/* Pole z jednostką: kcal, g */
.input-affix {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  min-block-size: var(--size-input);
  border: var(--border-width-thin) solid var(--color-border-control);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.input-affix:hover {
  border-color: var(--color-text-muted);
}

.input-affix:focus-within {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.input-affix .input {
  flex: 1;
  min-block-size: calc(var(--size-input) - 2 * var(--border-width-thin));
  padding-inline-end: var(--space-1);
  border: 0;
  background: transparent;
}

.input-affix .input:focus-visible {
  outline: none;
}

.input-affix__unit {
  flex: none;
  padding-inline-end: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.input-affix:has(.input[aria-invalid="true"]) {
  border-color: var(--color-border-danger);
  background: var(--color-danger-bg);
}

/* Lista rozwijana: natywny <select> z własną strzałką */
.select {
  position: relative;
  display: block;
  min-inline-size: 0;
}

.select__control {
  inline-size: 100%;
  min-block-size: var(--size-input);
  margin: 0;
  padding: 0 calc(var(--space-3-5) + var(--size-icon-md) + var(--space-2)) 0 var(--space-3-5);
  border: var(--border-width-thin) solid var(--color-border-control);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-input-font);
  font-weight: var(--font-weight-regular);
  appearance: none;
  cursor: pointer;
}

.select__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-3-5);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Grupa pól */
.fieldset {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fieldset__legend {
  margin-block-end: var(--space-1-5);
  padding: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.fieldset__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Ilość + jednostka w jednym rzędzie (1 : 2), podpisy wyrównane do góry */
.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--space-2-5);
}

/* B / T / W obok siebie */
.macro-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2-5);
}

/* --------------------------------------------------------------------------
   Pole wyboru (checkbox)
   -------------------------------------------------------------------------- */
.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: var(--size-touch);
  padding-block: var(--space-2-5);
  cursor: pointer;
}

/* Niewidoczny natywny input na całej powierzchni etykiety: cel dotyku = cały wiersz */
.check__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.check__box {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-control-mark);
  block-size: var(--size-control-mark);
  border: var(--border-width-thin) solid var(--color-border-control);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: transparent;
}

.check__box .icon {
  inline-size: var(--size-icon-sm);
  block-size: var(--size-icon-sm);
  stroke-width: var(--icon-stroke-heavy);
}

.check__input:checked + .check__box {
  border-color: var(--color-control-checked);
  background: var(--color-control-checked);
  color: var(--color-text-on-accent);
}

.check__input:focus-visible + .check__box {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.check__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
}

/* --------------------------------------------------------------------------
   Wybór jednokrotny: lista wierszy (posiłek, podstawa wartości, limit dnia)
   -------------------------------------------------------------------------- */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-input);
  padding: var(--space-2) var(--space-3-5);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  cursor: pointer;
}

.choice:hover {
  border-color: var(--color-border-control);
}

.choice__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-control-mark);
  block-size: var(--size-control-mark);
  border: var(--border-width-thin) solid var(--color-border-control);
  border-radius: var(--radius-round);
  background: var(--color-surface);
}

.choice__input:checked + .choice__mark {
  border-color: var(--color-control-checked);
}

.choice__input:checked + .choice__mark::before {
  content: "";
  inline-size: var(--size-control-dot);
  block-size: var(--size-control-dot);
  border-radius: var(--radius-round);
  background: var(--color-control-checked);
}

.choice__input:focus-visible + .choice__mark {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Zaznaczony wiersz: kropka (kształt) + delikatne tło */
.choice:has(.choice__input:checked) {
  border-color: var(--color-control-checked);
  background: var(--color-choice-checked-bg);
}

.choice__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-inline-size: 0;
}

.choice__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

.choice__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
}

/* Dodatkowe pole pod wyborem (np. nazwa nowego posiłku, limit na dzień):
   widoczne tylko, gdy jego wybór jest zaznaczony */
.choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice-group__extra {
  display: none;
  flex-direction: column;
  padding-inline-start: var(--space-8);
}

.choice-group:has(.choice__input:checked) .choice-group__extra {
  display: flex;
}

/* Wybór jednokrotny jako segmenty (krótkie opcje: g / ml / szt.) */
.choice-seg {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-0-5);
  padding: var(--size-segmented-pad);
  border-radius: var(--radius-control);
  background: var(--color-surface-muted);
}

.choice-seg__option {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice-seg__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-seg__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--size-touch);
  padding: 0 var(--space-2);
  border-radius: var(--radius-seg);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.choice-seg__input:checked + .choice-seg__label {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--font-weight-bold);
}

.choice-seg__input:focus-visible + .choice-seg__label {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   Podsumowanie błędów (po nieudanym wysłaniu dostaje fokus)
   -------------------------------------------------------------------------- */
.error-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3-5) var(--space-4);
  border-radius: var(--radius-note);
  background: var(--color-danger-bg);
}

.error-summary__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.error-summary__title .icon {
  color: var(--color-danger);
}

.error-summary__list {
  display: flex;
  flex-direction: column;
  padding-inline-start: calc(var(--size-icon-md) + var(--space-2));
}

.error-summary__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

/* Przyciski formularza */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

@container app (min-width: 768px) {
  .form-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* Porównanie wersji przy konflikcie */
.version-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.version-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3-5);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.version-card--yours {
  border: var(--border-width-thin) var(--border-style-unconfirmed) var(--color-border);
  background: transparent;
}

.version-card__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.version-card__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.version-card__value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

@container app (min-width: 768px) {
  .version-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Ustawienia: wiersze etykiety pod grubą linią, bez ramek
   -------------------------------------------------------------------------- */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.settings-group__title {
  color: var(--color-text-muted);
}

.settings-group__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.settings-list {
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.settings-list > li {
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: var(--size-settings-row);
  padding: var(--space-2-5) 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
}

a.settings-row,
button.settings-row {
  cursor: pointer;
}

a.settings-row:hover .settings-row__label,
button.settings-row:hover .settings-row__label {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.settings-row > .icon:last-of-type:not(:first-child) {
  color: var(--color-text-muted);
}

.settings-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
  min-inline-size: 0;
}

.settings-row__label {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
}

.settings-row__value {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
}

/* Prosty wiersz listy: linki (Prywatność, Regulamin), historia celu */
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--size-row);
  padding-block: var(--space-2);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

a.list-row:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.list-row > .icon {
  color: var(--color-text-muted);
}

.list-row__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-2);
  min-inline-size: 0;
}

.list-row__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
}

/* --------------------------------------------------------------------------
   Połączeni asystenci
   -------------------------------------------------------------------------- */
.assistant-list {
  display: flex;
  flex-direction: column;
}

.assistant-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-3) var(--space-4);
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.assistant-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.assistant-row__name {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.assistant-row__meta {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.assistant-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

/* Kroki instrukcji */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.steps__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-step-badge);
  block-size: var(--size-step-badge);
  border-radius: var(--radius-round);
  background: var(--color-band);
  color: var(--color-on-band);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-black);
}

/* --------------------------------------------------------------------------
   Okno potwierdzenia (<dialog class="dialog">, showModal)
   -------------------------------------------------------------------------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  inline-size: calc(100% - 2 * var(--gutter));
  max-inline-size: var(--layout-dialog-max);
  block-size: fit-content;
  max-block-size: calc(100% - 2 * var(--space-6));
  margin: auto;
  padding: var(--space-5);
  overflow-y: auto;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-float);
}

.dialog[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: dialog-in var(--duration-base) var(--easing-standard);
}

.dialog::backdrop {
  background: var(--color-scrim);
}

.dialog__title {
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

.dialog__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.dialog__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin: 0;
  padding-inline-start: var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

.dialog__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin-block-start: var(--space-1);
}

@container app (min-width: 768px) {
  .dialog {
    padding: var(--space-6);
  }
}

@keyframes dialog-in {
  from {
    transform: translateY(var(--space-2));
  }
}

/* --------------------------------------------------------------------------
   Strony publiczne: logowanie, zgoda OAuth (bez nawigacji aplikacji)
   Ten sam pas z logo u góry i biały arkusz pod nim.
   -------------------------------------------------------------------------- */
.auth-page {
  container: app / inline-size;
  display: flex;
  flex-direction: column;
  min-block-size: var(--layout-viewport-height);
  background: var(--color-surface);
}

@container app (max-width: 359px) {
  .auth-page > * {
    --gutter: var(--space-4);
  }
}

.auth-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline: max(var(--gutter), calc((100% - var(--layout-auth-max)) / 2));
  padding-block: calc(var(--space-1-5) + env(safe-area-inset-top)) 0;
}

.auth-page__header::after {
  content: "";
  flex: 0 0 calc(100% + 2 * var(--gutter));
  block-size: var(--radius-sheet);
  margin-inline: calc(var(--gutter) * -1);
  margin-block-start: var(--space-3);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-surface);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-block-size: var(--size-touch);
  color: var(--color-text);
  text-decoration: none;
}

.auth-brand__name {
  font-size: var(--font-size-brand);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
}

.auth-page__main {
  flex: 1;
  padding: var(--space-1) var(--gutter) var(--space-8);
}

.auth-page__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-4);
  padding: 0 var(--gutter) var(--space-6);
  color: var(--color-text-muted);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: var(--layout-auth-max);
  margin-inline: auto;
}

.auth-card__title {
  overflow-wrap: anywhere;
  font-size: var(--font-size-sheet-title);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

.auth-card__text {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.auth-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.auth-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-1-5);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

/* „albo” między logowaniem e-mailem a Google */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
}

@container app (min-width: 768px) {
  .auth-page__header {
    padding-inline: var(--gutter-tablet);
  }

  .auth-page__header::after {
    flex-basis: calc(100% + 2 * var(--gutter-tablet));
    margin-inline: calc(var(--gutter-tablet) * -1);
  }

  .auth-page__main {
    padding-block-start: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Zgoda OAuth
   -------------------------------------------------------------------------- */
.oauth-client {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-block-start: var(--border-width-meal) solid var(--color-rule);
}

.oauth-client__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding-block: var(--space-2-5);
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
}

.oauth-client__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.oauth-client__value {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-extrabold);
}

.oauth-client__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.oauth__subtitle {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.permission-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
}

.permission-list__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-icon-button);
  block-size: var(--size-icon-button);
  border-radius: var(--radius-round);
  background: var(--color-accent-tint);
  color: var(--color-accent-on-soft);
}

.oauth-account {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-3) var(--space-3-5) var(--space-1);
  border-radius: var(--radius-note);
  background: var(--color-surface-muted);
}

.oauth-account__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.oauth-account__email {
  overflow-wrap: anywhere;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-extrabold);
}

.oauth__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.oauth__note {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  text-align: center;
}

/* Wynik: błąd żądania / anulowano / połączono */
.oauth-result__icon {
  display: inline-grid;
  place-items: center;
  inline-size: var(--size-status-icon);
  block-size: var(--size-status-icon);
  border-radius: var(--radius-round);
  background: var(--color-surface-muted);
}

.oauth-result--error .oauth-result__icon {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.oauth-result--success .oauth-result__icon {
  background: var(--color-accent-tint);
  color: var(--color-accent-on-soft);
}

.oauth-result__code {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ---- 90-landing.css ---------------------------------------------------- */
/* ==========================================================================
   11. LANDING (strona publiczna)
   Struktura:
     <div class="page landing">               ← kontener zapytań „page” (szerokość okna)
       <header class="landing-header"> …
       <main> sekcje .landing-hero, .landing-section … .landing-cta </main>
       <footer class="landing-footer"> …
     </div>
   Mobile-first; progi @container page (min-width: 768px) i (min-width: 1024px).
   Przyciski, chipy, akordeon, karta kcal i listy z ikonami to komponenty aplikacji
   (components.css 2–8) — landing dokłada tylko układ i elementy marketingowe.
   ========================================================================== */

/* Korzeń strony publicznej. Uwaga przy scalaniu: ten sam korzeń mogą mieć
   strony logowania i prawne — jedna definicja .page dla wszystkich. */
/* Korzeń strony .page (kontener „page”) jest w sekcji 1 (10-layout.css). */

/* --------------------------------------------------------------------------
   11a. Nagłówek
   -------------------------------------------------------------------------- */
.landing-header {
  padding: var(--space-2-5) var(--landing-gutter);
}

.landing-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  max-inline-size: var(--landing-max);
  margin-inline: auto;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
  color: var(--color-text);
  text-decoration: none;
}

.landing-brand__mark {
  inline-size: var(--size-landing-logo);
  block-size: var(--size-landing-logo);
}

.landing-brand__name {
  font-size: var(--font-size-landing-brand);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
  letter-spacing: var(--letter-spacing-tight);
}

.landing-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

.landing-header__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-touch);
  padding: 0 var(--space-1-5);
  color: var(--color-text);
  font-size: var(--font-size-landing-header-link);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.landing-header__link:hover {
  text-decoration: underline;
}

/* „Załóż konto” w nagłówku: .btn.btn--primary.btn--sm + mniejszy cień */
.landing-header__cta {
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-landing-header-link);
  white-space: nowrap;
  box-shadow: var(--shadow-hard-sm);
}

/* --------------------------------------------------------------------------
   11b. Hero
   -------------------------------------------------------------------------- */
/* Dwie kolumny tylko wtedy, gdy obie się mieszczą (ok. 1 120 px okna); węższe — tekst nad panelem.
   Zawijanie flex zamiast progu: kolumny nie ściskają się przy 1024 px. */
/* Znacznik nad H1: „DZIENNIK JEDZENIA · CHATGPT I CLAUDE” (+ .eyebrow) */
/* promień --radius-lg zamiast pigułki: przy 320 px tekst łamie się na dwie linie */
/* Miętowe zakreślenie końcówki hasła („w rozmowie.”) */
/* Panel z ilustracją rozmowy i zrzutem ekranu Dzisiaj */
/* Ilustracja: dymek → strzałka → „Zapisano w …” */
/* Zrzut ekranu Dzisiaj (zastępnik — w aplikacji zrzut z działającej wersji) */
/* --------------------------------------------------------------------------
   11c. Sekcje i tytuły
   -------------------------------------------------------------------------- */
.landing-section {
  padding: var(--landing-section-pad) var(--landing-gutter);
}

/* Biała sekcja z linią pod spodem (przykład) */
/* Biała sekcja z linią nad spodem (FAQ przed atramentowym CTA) */
/* Kolejna sekcja na papierze: bez górnego odstępu, rytm trzyma poprzednia */
.landing-h2 {
  font-size: var(--font-size-landing-h2);
  line-height: var(--line-height-landing-display);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-landing-display);
}

.landing-faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.accordion--landing {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-bg);
}

.accordion--landing > .accordion__summary {
  gap: var(--space-4);
  min-block-size: var(--size-landing-faq-summary);
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-5);
  border-radius: var(--radius-row);
  font-size: var(--font-size-landing-faq);
}

.accordion--landing > .accordion__body {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--font-size-body);
}

.landing-faq__toggle {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-landing-faq-toggle);
  block-size: var(--size-landing-faq-toggle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-surface);
}

.accordion--landing[open] .landing-faq__toggle {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   11j. Końcowe CTA (atrament)
   -------------------------------------------------------------------------- */
.landing-cta {
  padding: var(--landing-section-pad) var(--landing-gutter);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.landing-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--landing-cta-gap);
  max-inline-size: var(--landing-max);
  margin-inline: auto;
}

.landing-cta__title {
  flex: 1 1 var(--size-landing-text-cta);
  min-inline-size: 0;
  font-size: var(--font-size-landing-cta);
  line-height: var(--line-height-landing-cta);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-landing-display);
  text-wrap: balance;
}

/* .btn.btn--primary.btn--lg na atramencie: miętowa ramka i cień */
.landing-cta__button {
  border-color: var(--color-accent-soft);
  box-shadow: var(--shadow-landing-cta);
  white-space: nowrap;
}

.landing-cta__button:focus-visible {
  outline-color: var(--color-focus-on-inverse);
}

/* --------------------------------------------------------------------------
   11k. Stopka
   -------------------------------------------------------------------------- */
.landing-footer {
  padding: var(--space-8) var(--landing-gutter) var(--space-10);
}

.landing-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6) var(--space-12);
  max-inline-size: var(--landing-max);
  margin-inline: auto;
}

.landing-footer__brand {
  display: flex;
  flex: 1 1 var(--size-landing-footer-brand);
  flex-direction: column;
  gap: var(--space-2-5);
  min-inline-size: 0;
}

.landing-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.landing-footer__mark {
  inline-size: var(--size-landing-logo-footer);
  block-size: var(--size-landing-logo-footer);
}

.landing-footer__text {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
}

/* [DANE OPERATORA DO UZUPEŁNIENIA] — widoczny placeholder */
.landing-footer__placeholder {
  padding: 0 var(--space-1-5);
  border: var(--border-width-hairline) solid var(--color-border);
  border-radius: var(--radius-landing-placeholder);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.landing-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

.landing-footer__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--size-touch);
  min-block-size: var(--size-touch);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

/* Przełącznik języka PL / EN */