/* ==========================================================================
   ChatFIT (nazwa robocza) — components.css
   Wariant C v2 „Skład”, paczka do implementacji, 27 paź 2026.
   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-bg);
  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); }
.icon--accent { color: var(--color-accent); }

/* 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: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  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-bold);
  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-thin) solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  background-image: var(--pattern-missing);
}

.swatch-missing--sm {
  inline-size: var(--size-swatch-sm);
  block-size: var(--size-swatch-sm);
  border-color: var(--color-text-muted);
}

.swatch-missing--lg {
  inline-size: var(--size-swatch-lg);
  block-size: var(--size-swatch-lg);
  border-width: var(--border-width);
  border-radius: var(--radius-xs);
  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 (A, roboczo): talerz z ptaszkiem. Kształt w atrybutach SVG, kolory z tokenów.
   Plik samodzielny: assets/logo-mark.svg. Konflikt ptaszka ze znacznikiem „kompletny”
   — OPEN_QUESTIONS.md. */
.logo-mark {
  display: block;
  flex: none;
  inline-size: var(--size-logo-header);
  block-size: var(--size-logo-header);
}

.logo-mark__plate {
  fill: var(--color-surface);
  stroke: var(--color-border);
}

.logo-mark__well {
  fill: var(--color-accent-soft);
  stroke: var(--color-border);
}

.logo-mark__check {
  fill: none;
  stroke: var(--color-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 …">
         <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   dolny pasek 5 pozycji, „Dodaj” jako wyniesiony kwadrat
     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-bg);
}

.app__shell {
  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(--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(--layout-content-max);
  margin-inline: auto;
}

.app__nav {
  grid-area: nav;
}

@container app (min-width: 768px) {
  .app__shell {
    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-inline: var(--gutter-tablet);
    padding-block-end: var(--space-10);
  }

  .app__content {
    max-inline-size: var(--layout-content-narrow);
  }
}

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

  .app__main {
    padding-inline: var(--gutter-desktop);
  }

  .app__content {
    max-inline-size: var(--layout-content-max);
  }
}

/* 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 ekranu (mięta: Dzisiaj; lawenda: Podsumowania)
   -------------------------------------------------------------------------- */
.app-header {
  background: var(--color-band-today);
  border-block-end: var(--border-width) solid var(--color-border);
  padding: var(--space-2-5) var(--gutter) var(--space-10);
}

.app-header--summary {
  background: var(--color-band-summary);
  padding-block: var(--space-3) var(--space-4-5);
}

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

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

  .app-header__inner {
    max-inline-size: var(--layout-content-narrow);
  }
}

@container app (min-width: 1024px) {
  .app-header {
    padding-inline: var(--gutter-desktop);
  }

  .app-header__inner {
    max-inline-size: var(--layout-content-max);
  }
}

/* --------------------------------------------------------------------------
   1b. Nawigacja główna
   -------------------------------------------------------------------------- */
.app-nav {
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-nav);
  background: var(--color-surface);
  border-block-start: var(--border-width) solid var(--color-border);
}

.app-nav__inner {
  container: nav / inline-size;
  padding: var(--space-2) var(--space-1-5) calc(var(--space-2) + 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: end;
  gap: var(--space-0-5);
}

.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);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  font-family: inherit;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-nav);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
  font-stretch: var(--font-stretch-compact);
  white-space: nowrap;
}

/* Pigułka aktywnej pozycji stoi tylko za ikoną — podpis ma całą szerokość kolumny
   (poprawka względem v2: przy 360 px „Podsumowania” nie mieściło się w pigułce). */
.app-nav__indicator {
  display: grid;
  place-items: center;
  inline-size: var(--size-nav-indicator-width);
  max-inline-size: 100%;
  block-size: var(--size-nav-indicator-height);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

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

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

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

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

/* „Dodaj” — wyniesiony kwadrat w środku paska */
.app-nav__item--add {
  justify-content: flex-end;
  padding-block-end: var(--space-1-5);
  font-weight: var(--font-weight-extrabold);
}

.app-nav__fab {
  display: grid;
  place-items: center;
  inline-size: var(--size-fab);
  block-size: var(--size-fab);
  margin-block-start: calc((var(--space-6) + var(--space-0-5)) * -1);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}

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

.app-nav__item--add:active .app-nav__fab {
  transform: translate(var(--press-offset), var(--press-offset));
  box-shadow: var(--shadow-pressed);
}

.app-nav__wordmark {
  display: none;
}

/* Szyna (768–1023) */
@container app (min-width: 768px) {
  .app-nav {
    position: static;
    border-block-start: 0;
    border-inline-end: var(--border-width) solid var(--color-border);
  }

  .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-4) 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);
  }

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

  .app-nav__item--add {
    justify-content: center;
    padding-block-end: 0;
  }

  .app-nav__fab {
    margin-block-start: 0;
  }
}

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

  .app-nav__brand {
    justify-content: flex-start;
    padding-inline: var(--space-2);
  }

  .app-nav__wordmark {
    display: block;
    font-size: var(--font-size-title-md);
    line-height: var(--line-height-single);
    font-weight: var(--font-weight-black);
    font-stretch: var(--font-stretch-compact);
    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);
    min-block-size: var(--size-touch);
    padding-inline: var(--space-2);
    font-size: var(--font-size-body);
    font-stretch: var(--font-stretch-normal);
  }

  .app-nav__indicator {
    inline-size: var(--size-icon-button);
    block-size: var(--size-touch);
  }

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

  .app-nav__item:hover .app-nav__indicator {
    background: transparent;
  }

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

  .app-nav__item[aria-current="page"] .app-nav__indicator {
    background: transparent;
  }

  /* „Dodaj” jako główny przycisk w liście */
  .app-nav__item--add {
    min-block-size: var(--size-button);
    margin-block: var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    box-shadow: var(--shadow-hard);
    font-size: var(--font-size-button);
  }

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

  .app-nav__item--add:active {
    transform: translate(var(--press-offset), var(--press-offset));
    box-shadow: var(--shadow-pressed);
  }

  .app-nav__fab,
  .app-nav__item--add:hover .app-nav__fab {
    inline-size: var(--size-icon-button);
    block-size: var(--size-icon-button);
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-nav__item--add:active .app-nav__fab {
    transform: none;
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   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
   ========================================================================== */

/* 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) solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-button);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}

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

/* Główna akcja ekranu/arkusza: morski + twardy cień, maks. jedna na widok */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-hard);
}

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

.btn--primary:active {
  transform: translate(var(--press-offset), var(--press-offset));
  box-shadow: var(--shadow-pressed);
}

/* Nieodwracalne (usunięcie konta): czerwień tylko tutaj */
.btn--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 {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

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

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

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

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

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

.btn:disabled,
.btn[aria-disabled="true"] {
  border-style: var(--border-style-unconfirmed);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Kwadratowy przycisk ikony 44×44 (zamknij, 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: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-icon-button);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

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

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

.icon-btn[aria-disabled="true"],
.icon-btn:disabled {
  border-style: var(--border-style-unconfirmed);
  background: transparent;
  color: var(--color-text-muted);
  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-thin);
  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);
  font-weight: var(--font-weight-extrabold);
}

/* Bez podkreślenia: element listy z chevronem („Makro niepełne ›”) */
.link-btn--plain {
  text-decoration: none;
}

/* 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-thin) solid var(--color-border);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  color: var(--color-text);
  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 {
  background: var(--color-state-flex-day);
}

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

/* Połączony asystent: mięta + ptaszek, stan także słowem */
.chip--connected {
  background: var(--color-accent-soft);
}

.chip--inverse {
  border-color: var(--color-surface-inverse);
  background: var(--color-surface-inverse);
  color: var(--color-accent-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) solid var(--color-border);
  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          — morskie kółko z ptaszkiem
     •  niepotwierdzony    — kropka (są wpisy, dzień nie jest potwierdzony)
        brak wpisów         — puste miejsce (nie zero)
   Wybrany dzień: atramentowy kafel. Dziś (gdy oglądasz inny dzień): obrys.
   ========================================================================== */

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

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

.day-header__logo {
  flex: none;
  inline-size: var(--size-logo-header);
  block-size: var(--size-logo-header);
}

/* 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-header-month);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  white-space: nowrap;
  cursor: pointer;
}

.day-header__arrows {
  display: flex;
  flex: none;
  gap: var(--space-1-5);
}

/* Logo na telefonie jest w nagłówku; od 768 px w szynie/panelu bocznym */
@container app (min-width: 768px) {
  .day-header__logo {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Pasek tygodnia
   -------------------------------------------------------------------------- */
.week-strip__list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-0-5);
  margin-inline: calc(var(--space-1-5) * -1);
}

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

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

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

.day-cell__date {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

/* Oglądany dzień */
.day-cell[aria-current="page"] {
  border-color: var(--color-border);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

/* Dziś, gdy oglądasz inny dzień */
.day-cell--today:not([aria-current]) {
  border-color: var(--color-border);
}

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

.day-cell--disabled .day-cell__date {
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   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 {
  border: var(--border-width-thin) solid var(--color-border);
  background: var(--color-state-complete);
  color: var(--color-text-inverse);
}

.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);
}

/* Na atramencie (wybrany dzień): mięta zamiast morskiego — kontrast 13:1 */
.day-cell[aria-current="page"] .day-mark--complete {
  border-color: var(--color-state-complete-on-inverse);
  background: var(--color-state-complete-on-inverse);
  color: var(--color-text);
}

.day-cell[aria-current="page"] .day-mark--unconfirmed::before {
  background: var(--color-state-unconfirmed-on-inverse);
}

/* Szerszy ekran: pasek nie rozciąga się ponad potrzebę */
@container app (min-width: 768px) {
  .week-strip__list {
    margin-inline: 0;
    gap: var(--space-1-5);
  }
}

/* ---- 40-kcal.css ------------------------------------------------------- */
/* ==========================================================================
   4. KARTA KALORII I MAKRO
   7 wariantów (modyfikatory):
     (brak)              zwykły dzień: suma / limit, pasek, „Zostało …”
     --over              przekroczenie: nadwyżka atramentem, 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: ramka przerywana, 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.
   ========================================================================== */

.kcal-card {
  position: relative;
  margin-block-start: calc(var(--space-7) * -1);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* Karta poza ekranem Dzisiaj (np. katalog wariantów) nie nachodzi na pas */
.kcal-card--standalone {
  margin-block-start: 0;
}

.kcal-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4) 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__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-0-5) var(--space-2);
}

.kcal-card__sum {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

/* ≈ przed sumą: przycisk otwiera arkusz „Szacunki w tym dniu” */
.kcal-card__approx {
  display: inline-grid;
  place-items: center;
  align-self: center;
  inline-size: var(--size-approx-button);
  block-size: var(--size-approx-button);
  margin: calc(var(--space-1-5) * -1) calc(var(--space-0-5) * -1) calc(var(--space-1-5) * -1) calc(var(--space-2-5) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-approx);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-display);
  cursor: pointer;
}

.kcal-card__approx:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.kcal-card__number {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

.kcal-card__limit,
.kcal-card__unit {
  color: var(--color-text-muted);
  font-size: var(--font-size-item);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-semicondensed);
  white-space: nowrap;
}

/* Bez limitu / bez celu: jednostka tuż przy liczbie, nie po prawej */
.kcal-card--no-limit .kcal-card__value,
.kcal-card--no-goal .kcal-card__value {
  justify-content: flex-start;
}

.kcal-card__note {
  font-size: var(--font-size-lead);
  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);
  font-size: var(--font-size-body);
}

/* Brak wpisów: pole z kreskowaniem zamiast liczby */
.kcal-card--empty {
  border-style: var(--border-style-unconfirmed);
}

.kcal-card__empty {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-empty-box);
  padding: 0 var(--space-3-5);
  border: var(--border-width) var(--border-style-unconfirmed) var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.kcal-card__limit-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
}

/* Część makro oddzielona grubą linią „Skład” */
.kcal-card__macros {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-3) var(--space-4) var(--space-1-5);
  border-block-start: var(--border-width-rule) solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Pasek kcal (SVG z szerokościami w %: width="63.4%")
   -------------------------------------------------------------------------- */
.kcal-bar__track {
  block-size: var(--size-bar-kcal);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

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

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

.kcal-bar__edge {
  stroke: var(--color-border);
  stroke-width: var(--border-width);
}

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

.kcal-bar__gap {
  stroke: var(--color-surface);
  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-border);
}

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

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

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

.macro__label {
  font-size: var(--font-size-micro);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-compact);
  letter-spacing: var(--letter-spacing-caps-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

.macro__value {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-body);
  white-space: nowrap;
}

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

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

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

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

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

/* Bez celu: same gramy, bez pasków */
.macro-row--no-goal .macro__bar {
  display: none;
}

/* „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-thin);
  text-underline-offset: var(--underline-offset);
}

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

.today {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--section-gap);
}

.today__summary,
.today__meals {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  min-inline-size: 0;
}

/* Desktop: karta kcal po lewej (przyklejona), posiłki po prawej */
@container app (min-width: 1024px) {
  .today {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--space-8);
  }

  .today__summary {
    position: sticky;
    inset-block-start: var(--space-4);
  }

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

/* Tytuł sekcji: „Posiłki”, „Dni” */
.section-title {
  margin-inline: var(--space-0-5);
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-heading);
}

/* --------------------------------------------------------------------------
   Posiłek na liście (dotknięcie otwiera arkusz szczegółów)
   -------------------------------------------------------------------------- */
.meal-list {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.meal-row {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
}

.meal-row__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2-5) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-row);
  color: var(--color-text);
  text-decoration: none;
}

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

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

.meal-row__name {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-item);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-semicondensed);
}

.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;
  min-inline-size: var(--space-3);
  border-block-end: var(--border-width) var(--border-style-leader) var(--color-border);
}

.meal-row__kcal {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

.meal-row__chevron {
  align-self: center;
}

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

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

/* Podgląd aktualnego komentarza asystenta (jedna linia) */
.meal-row__comment {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-block-start: var(--space-1);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  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”.
   Telefon: dwa rzędy (przycisk na całą szerokość); od 768 px w jednym rzędzie. */
.day-status {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}

@container app (min-width: 768px) {
  .day-status {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-1-5);
  }
}

.day-status__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-button);
  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: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  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-style: var(--border-style-unconfirmed);
}

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

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

.notice--error {
  border-color: var(--color-border-danger);
  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: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
}

.state-card--empty {
  border-style: var(--border-style-unconfirmed);
}

.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);
  font-stretch: var(--font-stretch-semicondensed);
}

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

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

.state-card__example {
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   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-row);
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.skeleton-card--overlap {
  margin-block-start: calc(var(--space-7) * -1);
}

@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 z ramką i twardym cieniem.
   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-block-start: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-bg);
  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: center;
  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__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 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-heading);
}

.sheet__title-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  font-stretch: var(--font-stretch-normal);
}

.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-0-5);
}

.sheet__actions-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2-5);
}

@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: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hard);
  }

  .sheet__handle {
    display: none;
  }
}

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

/* --------------------------------------------------------------------------
   Szczegóły posiłku
   -------------------------------------------------------------------------- */
.meal-detail__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-3);
}

.meal-detail__kcal {
  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);
  white-space: nowrap;
}

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

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

/* Pozycja posiłku (składnik) */
.food-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-4) var(--space-3-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
}

.food-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2-5);
}

.food-item__name {
  min-inline-size: 0;
  font-size: var(--font-size-lead);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-semicondensed);
}

.food-item__kcal {
  font-size: var(--font-size-button);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

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

.food-item__note {
  margin-block-start: var(--space-0-5);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  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 {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-approx-badge);
  block-size: var(--size-approx-badge);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  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-5);
  padding: var(--space-3) var(--space-3-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

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

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

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

.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-thin);
  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) var(--space-1) var(--space-1) var(--space-3-5);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.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-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

/* 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: var(--space-2) var(--space-3) var(--space-2) var(--space-3-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

a.entry-row:hover {
  background: var(--color-surface-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-extrabold);
}

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

.entry-row__value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

/* Dwa przyciski obok siebie (Edytuj ręcznie / Usuń): węższy krój, jedna linia od 320 px */
.sheet__actions-row .btn {
  padding-inline: var(--space-3);
  font-size: var(--font-size-body);
  font-stretch: var(--font-stretch-semicondensed);
  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-control);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-hard-accent);
  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);
}

/* W katalogu stanów toast stoi w zwykłym przepływie */
.toast--static {
  position: relative;
}

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

.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: var(--border-width) solid var(--color-accent-soft);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent-soft);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-extrabold);
  cursor: pointer;
}

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

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

.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.
   Stimulus potrzebny tylko, jeśli otwarcie jednego ma zamykać inne
   (zamiast tego: atrybut name="…" na grupie <details>).
   ========================================================================== */

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

.accordion--card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

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

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

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

.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: 0 var(--space-4) 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
   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. Nagłówek (lawendowy pas .app-header--summary)
   -------------------------------------------------------------------------- */
.summary-header {
  gap: var(--space-2-5);
}

.summary-header__title {
  font-size: var(--font-size-title-xl);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-heading);
}

/* Przełącznik Tydzień / Miesiąc — linki, aktywny ma aria-current="page" */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-segmented-pad);
  padding: var(--size-segmented-pad);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--size-touch);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

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

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

/* ‹ 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-title-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  text-align: center;
}

@container app (min-width: 768px) {
  .segmented,
  .period-nav {
    max-inline-size: var(--size-segmented-max);
  }
}

.summary-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-0-5);
}

/* --------------------------------------------------------------------------
   9b. Statystyka: duża liczba + jednostka + podpis
   -------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-2-5);
  padding-block-end: var(--space-1); /* miejsce na przecinek tysięcy w EN („2,267”) pod niską linią */
}

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

.stat__value--card {
  font-size: var(--font-size-stat-card);
}

.stat__value--md {
  font-size: var(--font-size-display-md);
}

.stat__unit {
  font-size: var(--font-size-item);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-semicondensed);
  white-space: nowrap;
}

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

/* --------------------------------------------------------------------------
   9c. Układ treści: telefon i tablet w jednej kolumnie (kolejność jak w C v2),
   desktop w dwóch: liczby po lewej (5fr), wykres / kalendarz i dni po prawej (7fr)
   -------------------------------------------------------------------------- */
.summary-layout {
  gap: var(--space-3);
  padding-block-start: var(--space-3-5);
}

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

  .summary-layout--week {
    grid-template-areas:
      "total   chart"
      "limit   chart"
      "balance chart"
      "comment days"
      ".       days";
  }

  .summary-layout--month {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "calendar stats"
      "calendar balance"
      "calendar .";
  }

  .summary-layout__total { grid-area: total; }
  .summary-layout__chart { grid-area: chart; }
  .summary-layout__limit { grid-area: limit; }
  .summary-layout__balance { grid-area: balance; }
  .summary-layout__comment { grid-area: comment; }
  .summary-layout__days { grid-area: days; }
  .summary-layout__calendar { grid-area: calendar; }
  .summary-layout__stats { grid-area: stats; }
}

/* --------------------------------------------------------------------------
   9d. Karty i wiersze liczb
   -------------------------------------------------------------------------- */
.summary-card {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.summary-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-3) var(--space-4) var(--space-3);
}

.summary-card__body + .summary-card__body,
.summary-card__rows {
  border-block-start: var(--border-width-rule) solid var(--color-border);
}

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

.summary-card .chip-btn {
  align-self: flex-start;
}

.summary-card__empty-title {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

/* „Zapisane łącznie 14 200 kcal” — samodzielny wiersz albo wiersz w karcie */
.total-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  min-block-size: var(--size-button-lg);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
}

.total-row--in-card {
  border: 0;
  border-radius: 0;
  border-block-end: var(--border-width-hairline) solid var(--color-border-subtle);
}

.total-row__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.total-row__value {
  font-size: var(--font-size-stat-row);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
  white-space: nowrap;
}

/* „W limicie 12/15 ocenionych dni” w karcie miesiąca */
.within-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1-5);
  padding: var(--space-2-5) var(--space-4);
}

.within-row__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-0-5) var(--space-3);
  inline-size: 100%;
}

.within-row__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.within-row__value {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.within-row__number {
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

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

.balance-card__title {
  font-size: var(--font-size-balance-title);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-heading);
}

.balance-card__value {
  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);
  white-space: nowrap;
}

.balance-card__caption {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

/* Bez liczby: ramka przerywana — tu nic nie zostało policzone */
.balance-card--empty {
  border-style: var(--border-style-unconfirmed);
}

.balance-card--empty .accordion {
  border-block-start-style: var(--border-style-unconfirmed);
}

/* --------------------------------------------------------------------------
   9e. Wykres słupkowy (SVG; geometria w % w atrybutach, wygląd tutaj)
   -------------------------------------------------------------------------- */
.chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3-5) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

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

.chart__plot-row {
  display: flex;
  gap: var(--space-1-5);
}

.chart__axis {
  flex: none;
  inline-size: var(--size-chart-axis);
  block-size: var(--size-chart-height);
  overflow: visible;
}

.chart__axis-label {
  fill: var(--color-text-muted);
  font-family: var(--font-family-base);
  font-size: var(--font-size-micro);
}

.chart__plot {
  flex: 1;
  min-inline-size: 0;
  block-size: var(--size-chart-height);
  overflow: visible;
}

.chart__grid {
  stroke: var(--color-border-subtle);
  stroke-width: var(--border-width-hairline);
}

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

.chart__bar {
  fill: var(--color-state-complete);
  stroke: var(--color-border);
  stroke-width: var(--border-width);
}

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

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

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

.chart__badge {
  fill: var(--color-state-flex-day);
  stroke: var(--color-border);
  stroke-width: var(--border-width-thin);
}

.chart__badge-glyph {
  fill: var(--color-text);
  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__axis,
  .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));
  margin-inline-start: calc(var(--size-chart-axis) + var(--space-1-5));
}

.chart__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--border-width-hairline);
}

.chart__day-wd {
  font-size: var(--font-size-micro);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-label);
  text-transform: uppercase;
}

.chart__day-date {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

/* --------------------------------------------------------------------------
   9f. Legenda (wykres i kalendarz)
   -------------------------------------------------------------------------- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5) var(--space-3-5);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  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: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-state-complete);
}

.legend__swatch--unconfirmed {
  border-style: var(--border-style-unconfirmed);
  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);
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

/* 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: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-state-flex-day);
  color: var(--color-text);
  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-2-5);
  padding-block-start: var(--space-1-5);
}

.day-list {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
}

.day-list__item + .day-list__item {
  border-block-start: 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: var(--space-2) var(--space-3) var(--space-2) var(--space-3-5);
  color: var(--color-text);
  text-decoration: none;
}

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

.day-list__label {
  min-inline-size: 0;
  font-size: var(--font-size-button);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-semicondensed);
}

.day-list__kcal {
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

.day-list__kcal--none {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

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

/* Lista dni nieocenionych w arkuszu */
.unrated-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   9h. Kalendarz miesiąca (Podsumowanie miesiąca, arkusz „Wybierz dzień”)
   Kafel atramentowy = oglądany dzień (aria-current="page"); obrys = dziś.
   -------------------------------------------------------------------------- */
.month-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-inline: calc(var(--space-1-5) * -1);
  padding: var(--space-2-5) var(--space-0-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.month-calendar__title {
  margin: 0 var(--space-2-5) var(--space-0-5);
}

.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);
  font-stretch: var(--font-stretch-label);
  letter-spacing: var(--letter-spacing-caps-tight);
  text-align: center;
  text-transform: uppercase;
}

.month-calendar .legend {
  margin: var(--space-1) var(--space-2-5) 0;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: var(--size-cal-cell);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  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-black);
  font-stretch: var(--font-stretch-title);
}

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

/* Wartość kcal w komórce tylko na desktopie (brief 8.3) */
.cal-day__kcal {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-snug);
}

.cal-day--today:not([aria-current]) {
  border-color: var(--color-border);
}

.cal-day[aria-current="page"] {
  border-color: var(--color-border);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.cal-day[aria-current="page"] .day-mark--complete {
  border-color: var(--color-state-complete-on-inverse);
  background: var(--color-state-complete-on-inverse);
  color: var(--color-text);
}

.cal-day[aria-current="page"] .day-mark--unconfirmed::before {
  background: var(--color-state-unconfirmed-on-inverse);
}

.cal-day[aria-current="page"] .cal-day__kcal {
  color: var(--color-accent-soft);
}

/* 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-bold);
}

/* Kalendarz w arkuszu: bez ujemnego marginesu */
.month-calendar--in-sheet {
  margin-inline: 0;
}

@container app (min-width: 768px) {
  .month-calendar {
    margin-inline: 0;
    padding-inline: var(--space-2);
  }

  .month-calendar__grid {
    gap: var(--space-1);
  }
}

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

  .cal-day__kcal {
    display: block;
  }
}

/* ---- 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
   -------------------------------------------------------------------------- */
.page-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  padding: var(--space-2) var(--gutter);
  border-block-end: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

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

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

.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);
}

/* Ekran główny sekcji (Ustawienia): bez „Wstecz”, duży tytuł na papierze */
.page-bar--top {
  position: static;
  padding-block: var(--space-4) var(--space-3-5);
  background: var(--color-bg);
}

.page-bar--top .page-bar__title {
  font-size: var(--font-size-title-xl);
}

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

@container app (min-width: 1024px) {
  .page-bar {
    padding-inline: var(--gutter-desktop);
  }
}

/* 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);
}

/* --------------------------------------------------------------------------
   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-body);
  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-small);
  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) solid var(--color-border);
  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-semibold);
}

.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-style: var(--border-style-unconfirmed);
  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) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.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));
  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-body);
  font-weight: var(--font-weight-bold);
}

.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) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-input-font);
  font-weight: var(--font-weight-semibold);
  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-body);
  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: center;
  gap: var(--space-3);
  min-block-size: var(--size-touch);
  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) solid var(--color-border);
  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 {
  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);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   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) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  cursor: pointer;
}

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

.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) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-surface);
}

.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) + mięta (tło) */
.choice:has(.choice__input: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-extrabold);
}

.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(--space-0-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.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-sm);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.choice-seg__input:checked + .choice-seg__label {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-extrabold);
}

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

/* --------------------------------------------------------------------------
   Przełącznik (checkbox role="switch") — stan zawsze także słowem
   -------------------------------------------------------------------------- */
.switch {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-touch);
}

.switch__input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--size-switch-width);
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch__track {
  position: relative;
  flex: none;
  inline-size: var(--size-switch-width);
  block-size: var(--size-switch-height);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.switch__track::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-0-5);
  inline-size: var(--size-switch-knob);
  block-size: var(--size-switch-knob);
  border-radius: var(--radius-round);
  background: var(--color-surface-inverse);
  transform: translateY(-50%);
  transition: inset-inline-start var(--duration-fast) var(--easing-standard);
}

.switch__input:checked + .switch__track {
  background: var(--color-control-checked);
}

.switch__input:checked + .switch__track::before {
  inset-inline-start: calc(100% - var(--size-switch-knob) - var(--space-0-5));
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
}

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

.switch__state {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.switch__state--on,
.switch__input:checked ~ .switch__state--off {
  display: none;
}

.switch__input:checked ~ .switch__state--on {
  display: inline;
}

/* --------------------------------------------------------------------------
   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: var(--border-width) solid var(--color-border-danger);
  border-radius: var(--radius-control);
  background: var(--color-danger-bg);
}

.error-summary__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-button);
  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: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.version-card--yours {
  border-style: var(--border-style-unconfirmed);
  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
   -------------------------------------------------------------------------- */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.settings-group__title {
  margin-inline: var(--space-0-5);
  color: var(--color-text-secondary);
}

.settings-group__note {
  margin-inline: var(--space-0-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.settings-list {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
}

.settings-list > li + li {
  border-block-start: 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) var(--space-3) var(--space-2-5) var(--space-4);
  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,
button.settings-row:hover {
  background: var(--color-surface-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-extrabold);
}

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

/* Wiersz z przełącznikiem: ikona | etykieta | przełącznik, opis pod spodem na pełną szerokość */
.settings-row--switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.settings-row__hint {
  grid-column: 2 / -1;
  line-height: var(--line-height-body);
}

/* W wierszu ustawień przełącznik ma słowo stanu pod torem, żeby zostawić miejsce na etykietę */
.settings-row--switch .switch {
  flex-direction: column;
  gap: var(--space-0-5);
}

.settings-row--switch .switch__input {
  inline-size: 100%;
}

.settings-row--switch .switch__state {
  font-size: var(--font-size-label);
}

/* 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: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

a.list-row:hover {
  background: var(--color-surface-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-small);
  font-weight: var(--font-weight-semibold);
}

/* --------------------------------------------------------------------------
   Połączeni asystenci
   -------------------------------------------------------------------------- */
.assistant-list {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.assistant-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3-5) var(--space-4) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
}

.assistant-row--off {
  border-style: var(--border-style-unconfirmed);
}

.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__title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
}

.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-surface-inverse);
  color: var(--color-accent-soft);
  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: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-hard);
}

.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-md);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-heading);
}

.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 {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

/* --------------------------------------------------------------------------
   Strony publiczne: logowanie, zgoda OAuth (bez nawigacji aplikacji)
   -------------------------------------------------------------------------- */
.auth-page {
  container: app / inline-size;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.auth-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
}

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

.auth-brand .logo-mark {
  inline-size: var(--size-logo-nav);
  block-size: var(--size-logo-nav);
}

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

.auth-page__main {
  flex: 1;
  padding: var(--space-2) 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);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: var(--layout-auth-max);
  margin-inline: auto;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

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

.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__main {
    padding-block-start: var(--space-8);
  }

  .auth-card {
    padding: var(--space-8);
    box-shadow: var(--shadow-hard);
  }
}

/* --------------------------------------------------------------------------
   Zgoda OAuth
   -------------------------------------------------------------------------- */
.oauth-client {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
}

.oauth-client__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2-5) var(--space-3-5);
}

.oauth-client__row + .oauth-client__row {
  border-block-start: 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-button);
  font-weight: var(--font-weight-extrabold);
}

/* Domena przekierowania: widoczna osobno od nazwy klienta, której nie ufamy na ślepo */
.oauth-client__row--domain {
  background: var(--color-surface-muted);
}

.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: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-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-control);
  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: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-surface-muted);
}

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

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

.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
   -------------------------------------------------------------------------- */
.landing-hero {
  padding: var(--landing-hero-pad-top) var(--landing-gutter) var(--landing-hero-pad-bottom);
  border-block-end: var(--border-width) solid var(--color-border);
}

/* 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. */
.landing-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--landing-hero-gap);
  max-inline-size: var(--landing-max);
  margin-inline: auto;
}

.landing-hero__copy {
  display: flex;
  flex: 1 1 var(--size-landing-hero-copy-basis);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--landing-hero-copy-gap);
  min-inline-size: 0;
}

/* Znacznik nad H1: „DZIENNIK JEDZENIA · CHATGPT I CLAUDE” (+ .eyebrow) */
/* promień --radius-lg zamiast pigułki: przy 320 px tekst łamie się na dwie linie */
.landing-hero__eyebrow {
  padding: var(--space-1-5) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-size: var(--font-size-landing-eyebrow);
}

.landing-hero__title {
  font-size: var(--font-size-landing-hero);
  line-height: var(--line-height-landing-display);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-landing-display);
  letter-spacing: var(--letter-spacing-landing-display);
  text-wrap: balance;
}

/* Miętowe zakreślenie końcówki hasła („w rozmowie.”) */
.landing-hero__accent {
  padding: 0 var(--landing-highlight-pad);
  background: var(--landing-highlight);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.landing-hero__lead {
  max-inline-size: var(--landing-text-max);
  color: var(--color-text-secondary);
  font-size: var(--font-size-landing-lead);
  line-height: var(--line-height-body);
  text-wrap: pretty;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3-5) var(--space-4);
}

/* Panel z ilustracją rozmowy i zrzutem ekranu Dzisiaj */
.landing-hero__visual {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex: 1 1 var(--size-landing-hero-visual-basis);
  gap: var(--space-5);
  min-inline-size: 0;
  max-inline-size: var(--size-landing-hero-visual);
  margin: 0 auto;
  padding: var(--landing-panel-pad);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-landing-panel);
  background: var(--color-accent-soft);
}

.landing-hero__ring {
  position: absolute;
  border: var(--border-width) solid var(--color-landing-ring);
  border-radius: var(--radius-round);
}

.landing-hero__ring--lg {
  inset-block-start: var(--offset-landing-ring-lg-top);
  inset-inline-end: var(--offset-landing-ring-lg);
  inline-size: var(--size-landing-ring-lg);
  block-size: var(--size-landing-ring-lg);
}

.landing-hero__ring--md {
  inset-block-start: var(--offset-landing-ring-md-top);
  inset-inline-end: var(--offset-landing-ring-md);
  inline-size: var(--size-landing-ring-md);
  block-size: var(--size-landing-ring-md);
}

.landing-hero__blob {
  position: absolute;
  inset-block-end: var(--offset-landing-ring-sm-bottom);
  inset-inline-start: var(--offset-landing-ring-sm);
  inline-size: var(--size-landing-ring-sm);
  block-size: var(--size-landing-ring-sm);
  border-radius: var(--radius-round);
  background: var(--color-landing-blob);
}

/* Ilustracja: dymek → strzałka → „Zapisano w …” */
.landing-hero__chat {
  position: relative;
  display: flex;
  flex: 1 1 var(--size-landing-bubbles-basis);
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  min-inline-size: 0;
  max-inline-size: var(--size-landing-bubbles);
}

.landing-hero__arrow {
  display: grid;
  place-items: center;
  align-self: center;
  inline-size: var(--size-landing-arrow);
  block-size: var(--size-landing-arrow);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-surface);
}

.landing-saved {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-3-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard);
  transform: rotate(var(--rotate-landing-saved));
}

.landing-saved__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-landing-saved-icon);
  block-size: var(--size-landing-saved-icon);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

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

.landing-saved__label {
  font-size: var(--font-size-landing-saved-label);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.landing-saved__value {
  font-size: var(--font-size-item);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
  white-space: nowrap;
}

/* Zrzut ekranu Dzisiaj (zastępnik — w aplikacji zrzut z działającej wersji) */
.landing-shot {
  position: relative;
  flex: none;
  inline-size: var(--size-landing-shot);
  overflow: hidden;
  border: var(--border-width-landing-shot) solid var(--color-border);
  border-radius: var(--radius-landing-shot);
  background: var(--color-bg);
  box-shadow: var(--shadow-landing-shot);
}

.landing-shot__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* --------------------------------------------------------------------------
   11c. Sekcje i tytuły
   -------------------------------------------------------------------------- */
.landing-section {
  padding: var(--landing-section-pad) var(--landing-gutter);
}

/* Biała sekcja z linią pod spodem (przykład) */
.landing-section--surface {
  background: var(--color-surface);
  border-block-end: var(--border-width) solid var(--color-border);
}

/* Biała sekcja z linią nad spodem (FAQ przed atramentowym CTA) */
.landing-section--surface-top {
  background: var(--color-surface);
  border-block-start: var(--border-width) solid var(--color-border);
}

/* Kolejna sekcja na papierze: bez górnego odstępu, rytm trzyma poprzednia */
.landing-section--flush {
  padding-block-start: 0;
}

.landing-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--landing-section-gap);
  max-inline-size: var(--landing-max);
  margin-inline: auto;
}

.landing-section__inner--narrow {
  max-inline-size: var(--landing-faq-max);
}

.landing-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.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);
}

/* Chip „PRZYKŁAD” (+ .eyebrow) */
.landing-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-landing-chip);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
}

/* --------------------------------------------------------------------------
   11d. Przykład „Od rozmowy do zapisu”
   -------------------------------------------------------------------------- */
.landing-demo__list {
  display: flex;
  flex-direction: column;
  border-block-start: var(--border-width-heavy) solid var(--color-border);
}

.landing-demo__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4-5) var(--landing-col-gap);
  padding-block: var(--landing-row-pad);
  border-block-end: var(--border-width) solid var(--color-border);
}

.landing-demo__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.landing-demo__num {
  font-size: var(--font-size-landing-row-num);
  line-height: var(--line-height-landing-num);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

.landing-demo__title {
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.landing-demo__chat,
.landing-demo__result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  min-inline-size: 0;
}

.landing-demo__result {
  max-inline-size: var(--size-landing-demo-card-max);
}

/* „W CZACIE” / „W CHATFIT” (+ .eyebrow) */
.landing-demo__kicker {
  color: var(--color-text-muted);
}

/* Ramka z twardym cieniem wokół komponentu aplikacji (np. karta kcal) */
.landing-demo__frame {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
}

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

  .landing-demo__label {
    grid-column: 1 / -1;
  }
}

@container page (min-width: 1024px) {
  .landing-demo__row {
    grid-template-columns: var(--size-landing-demo-label) minmax(0, 1fr) minmax(0, var(--size-landing-demo-card));
  }

  .landing-demo__label {
    grid-column: auto;
  }
}

/* Dymek rozmowy — ilustracja, nie zrzut aplikacji asystenta */
.landing-bubble {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-inline-size: 94%;
  padding: var(--space-3) var(--space-4) var(--space-3);
  border-radius: var(--radius-landing-bubble) var(--radius-landing-bubble) var(--radius-landing-bubble) var(--radius-landing-bubble-tail);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.landing-bubble--user {
  align-self: flex-start;
}

.landing-bubble--assistant {
  align-self: flex-end;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-landing-bubble) var(--radius-landing-bubble) var(--radius-landing-bubble-tail) var(--radius-landing-bubble);
  background: var(--color-bg);
  color: var(--color-text);
}

/* W hero dymek wypełnia kolumnę ilustracji */
.landing-bubble--hero {
  max-inline-size: none;
  gap: var(--space-1-5);
}

.landing-bubble__who {
  color: var(--color-accent-soft);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--font-stretch-label);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.landing-bubble--assistant .landing-bubble__who {
  color: var(--color-text-muted);
}

.landing-bubble__text {
  font-size: var(--font-size-button);
  line-height: var(--line-height-body);
}

.landing-bubble--hero .landing-bubble__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-snug);
}

.landing-bubble__attachment {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1-5);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-landing-attachment);
  background: var(--color-landing-chip-on-ink);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-snug);
}

/* Karta wpisu „W ChatFIT”: posiłek i pozycje */
.landing-log {
  overflow: hidden;
  padding-block-end: var(--space-2-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-row);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard);
}

.landing-log__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-2-5);
}

.landing-log__meal {
  font-size: var(--font-size-landing-log-meal);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-extrabold);
  font-stretch: var(--font-stretch-semicondensed);
}

.landing-log__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.landing-log__leader {
  flex: 1;
  min-inline-size: var(--space-2-5);
  border-block-end: var(--border-width) var(--border-style-leader) var(--color-border);
}

.landing-log__total {
  font-size: var(--font-size-landing-log-meal);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  white-space: nowrap;
}

/* Odstępy na <li>, nie na <ul>: reset ul[class] w bazie ma wyższą specyficzność niż klasa */
.landing-log__items {
  font-size: var(--font-size-landing-log-item);
  line-height: var(--line-height-snug);
}

.landing-log__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-0-5) var(--space-2);
  margin-inline: var(--space-4);
  padding-block: var(--space-1-5);
  border-block-start: var(--border-width-hairline) solid var(--color-border-subtle);
}

.landing-log__kcal {
  margin-inline-start: auto;
  font-weight: var(--font-weight-extrabold);
  white-space: nowrap;
}

/* Zmieniona wartość po korekcie: stara przekreślona, nowa zakreślona */
.landing-log__old {
  color: var(--color-text-muted);
}

.landing-mark {
  padding: 0 var(--space-1);
  border-radius: var(--radius-landing-mark);
  background: var(--color-accent-soft);
  font-weight: var(--font-weight-black);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   11e. Trzy kroki
   -------------------------------------------------------------------------- */
.landing-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-8);
  border-block-start: var(--border-width-heavy) solid var(--color-border);
}

.landing-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--space-4);
  padding-block: var(--space-5);
  border-block-end: var(--border-width) solid var(--color-border);
}

.landing-step__num {
  font-size: var(--font-size-landing-step-num);
  line-height: var(--line-height-landing-num);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-display);
}

.landing-step__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1-5);
  min-inline-size: 0;
}

.landing-step__title {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
}

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

@container page (min-width: 1024px) {
  .landing-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   11f. Korzyści („Co dostajesz”)
   -------------------------------------------------------------------------- */
.landing-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.landing-benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
  padding: var(--landing-card-pad);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-landing-card-1);
}

.landing-benefit--2 {
  background: var(--color-landing-card-2);
}

.landing-benefit--3 {
  background: var(--color-landing-card-3);
}

/* Kółko z ikoną (karty korzyści, role, zaufanie) */
.landing-icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--size-landing-icon-badge);
  block-size: var(--size-landing-icon-badge);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-round);
  background: var(--color-surface);
}

.landing-icon-badge--soft {
  background: var(--color-accent-soft);
}

/* Znak ≈ zamiast ikony */
.landing-icon-badge__glyph {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-single);
  font-weight: var(--font-weight-extrabold);
}

.landing-benefit__title {
  font-size: var(--font-size-landing-card-title);
  line-height: var(--line-height-landing-card);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.landing-benefit__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* 768–1023: karta pozioma (ikona obok tekstu); od 1024: trzy kolumny */
@container page (min-width: 768px) {
  .landing-benefit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: var(--space-1-5);
    align-items: start;
  }

  .landing-benefit .landing-icon-badge {
    grid-row: span 2;
  }
}

@container page (min-width: 1024px) {
  .landing-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-benefit {
    display: flex;
    gap: var(--space-3-5);
  }
}

/* --------------------------------------------------------------------------
   11g. Kto co robi (asystent vs dziennik)
   -------------------------------------------------------------------------- */
.landing-roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.landing-role {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--landing-card-pad);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.landing-role__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.landing-role__mark {
  inline-size: var(--size-landing-icon-badge);
  block-size: var(--size-landing-icon-badge);
}

.landing-role__title {
  font-size: var(--font-size-landing-card-title);
  line-height: var(--line-height-landing-card);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-title);
}

.landing-role__sub {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

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

/* --------------------------------------------------------------------------
   11h. Prywatność i szacunki
   -------------------------------------------------------------------------- */
.landing-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.landing-trust__card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3-5);
  padding: var(--landing-trust-pad-block) var(--landing-trust-pad-inline);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

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

.landing-trust__title {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-black);
  font-stretch: var(--font-stretch-compact);
}

.landing-trust__text {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-body);
}

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

/* --------------------------------------------------------------------------
   11i. FAQ — .accordion (components.css 8) + modyfikator
   -------------------------------------------------------------------------- */
.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;
}

.landing-cta__accent {
  color: var(--color-accent-soft);
}

/* .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 */
.landing-lang {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-0-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.landing-lang__link {
  display: grid;
  place-items: center;
  min-inline-size: var(--size-landing-lang);
  min-block-size: var(--size-touch);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

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

.landing-lang__link[aria-current="page"] {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-extrabold);
}