/* ==========================================================================
   yiammi. — portal wewnętrzny (robocza nazwa marki od 3 października 2026)

   Barwy i znak marki: /shared/marka.css (fiolet, mgła, limonka). Nazwy
   zmiennych poniżej zostają z poprzedniej skórki — dotykają ich setki reguł —
   ale wskazują już na barwy marki. Zieleń zostaje tylko jako barwa stanu
   („w sieci", „opłacone", sukces).

   Narzędzie pracy zespołu, nie witryna. Gęsto, czytelnie, bez ozdób.
   Tu powstaje pierwsze wypełnienie lokalu: dane, menu i motyw graficzny.
   ========================================================================== */

/* --- Kroje pisma aplikacji -----------------------------------------------
 *
 * Archivo i Martian Mono serwujemy sami z /shared/fonty/, nie z
 * fonts.googleapis.com — ten sam powód co w kiosku (R-6): tablet w kiosku
 * musi działać przy padniętym internecie, a portal dzieli arkusz krojów
 * z resztą aplikacji.
 *
 * Oba kroje są zmienne. Po dwa pliki na krój — polskie ą, ę, ł, ś, ż siedzą
 * w zestawie rozszerzonym, `unicode-range` ściąga go dopiero przy takiej literze. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/martian-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/martian-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Figtree i Caveat — tylko do próbek w zakładce Wygląd (pary krojów, miniatury
   kompozycji). Te same pliki, które serwuje aplikacja klienta, więc próbka
   w portalu wygląda jak lokal na telefonie. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/shared/fonty/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/shared/fonty/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Siedem krojów z punktów Bukowych Tarasów (C-13) — też tylko do próbek w zakładce
   Wygląd. Bloki przepisane z web/client/style.css, bez kursyw. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/bodoni-moda-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/bodoni-moda-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/shared/fonty/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/dm-serif-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonty/dm-serif-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonty/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/shared/fonty/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Barwy marki yiammi. (3 października 2026): fiolet, mgła, limonka — z
     /shared/marka.css, który strona ładuje przed tym arkuszem. Nazwy zmiennych
     zostają z poprzedniej skórki. `--zielen` to barwa stanu (sukces, „w sieci"),
     nie barwa marki. */
  --atrament: var(--marka-atrament, #22006B);
  --kobalt: var(--marka-atrament, #22006B);
  --mgla: #EEEAF5;
  /* Tło strony: chłodna, prawie biała szarość z kroplą fioletu. Karty stoją na
     nim bielą i cienką linią — narzędzie pracy, nie plakat (6.10.2026). */
  --papier: #F6F5F9;
  --linia: #E2DCEB;
  --linia-mocna: #CFC6DC;
  --cien: var(--marka-cien, #756D83);
  --zielen: var(--marka-sukces, #1B7A4C);
  --czerwien: var(--marka-blad, #B3261E);
  --limonka: var(--marka-limonka, #8CDD13);
  --promien-karty: 14px;
  --promien-kontrolki: 10px;
  --krok: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --cien-karty: 0 1px 2px rgba(34, 0, 107, .05), 0 1px 1px rgba(34, 0, 107, .03);
  --cien-uniesiony: 0 8px 28px -10px rgba(34, 0, 107, .22);
  --obwodka-fokusu: 0 0 0 3px rgba(34, 0, 107, .16);
  color-scheme: light;

  /* Oprawa narzędzia: ciemny fiolet marki tylko w nagłówku. Treść zostaje
     na jasnych kartach — po prawej stoi kolorowy podgląd restauracji i portal
     nie może z nim konkurować o uwagę. */
  --grafit: var(--marka-atrament, #22006B);
  --stan-zielony: #1B7A4C;
  --stan-bursztyn: #8A6300;
  --stan-czerwony: #B3261E;
  --odstep-3: 16px;
}

* { box-sizing: border-box; }
/* Bez tego tablet czeka ~300 ms po dotknięciu, żeby sprawdzić, czy nie
   nadchodzi drugie stuknięcie (podwójny klik = zoom) — na 8,3" ten odstęp
   czuć jako opóźnienie każdego przycisku. */
body {
  margin: 0; background: var(--papier); color: var(--atrament); font-family: var(--krok);
  font-size: 14px; line-height: 1.45; touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; }
:focus-visible { outline: 3px solid var(--kobalt); outline-offset: 2px; }
a { color: var(--kobalt); }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Nagłówek ------------------------------------------------------------- */

.gora {
  position: sticky; top: 0; z-index: 30;
  background: var(--marka-gradient, var(--grafit)); color: #fff; padding: 0 28px; min-height: 58px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 16px -8px rgba(34, 0, 107, .5);
}
.gora .znak { font: 800 24px / 1 var(--krok); letter-spacing: -.01em; color: #fff; }
.gora .znak i { font-style: normal; color: var(--limonka); }
.gora .pod {
  color: rgba(255, 255, 255, .7); font: 500 10.5px / 1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .22);
}
.gora .wypelniacz { margin-left: auto; }
.gora button {
  background: transparent; color: rgba(255, 255, 255, .86); padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; min-height: 36px; transition: background-color .15s ease, color .15s ease;
}
.gora button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.gora .gora-biuro {
  color: var(--atrament); text-decoration: none; background: var(--limonka); padding: 0 14px; min-height: 34px;
  display: inline-flex; align-items: center; border-radius: 8px; font-size: 13px; font-weight: 700;
  transition: filter .15s ease;
}
.gora .gora-biuro:hover { filter: brightness(1.06); }
@media (max-width: 600px) {
  .gora { flex-wrap: wrap; padding: 10px 16px; gap: 8px; }
  .gora .wypelniacz, .gora .pod { display: none; }
  .gora .kto { margin-left: auto; }
}

/* --- Strona --------------------------------------------------------------- */

main { max-width: 1400px; margin: 0 auto; padding: 28px 32px 64px; }
@media (max-width: 900px) { main { padding: 20px 16px 48px; } }

.brama {
  max-width: 400px; margin: 12vh auto 40px; background: #fff; padding: 32px; border-radius: 18px;
  border: 1px solid var(--linia); box-shadow: var(--cien-uniesiony);
}
.brama h1 { margin: 0 0 6px; font: 800 28px / 1.1 var(--krok); letter-spacing: -.015em; }
.brama p { margin: 0 0 18px; color: var(--cien); }

h1.tytul { font: 800 30px / 1.12 var(--krok); letter-spacing: -.02em; margin: 0 0 4px; }
p.podtytul { color: var(--cien); margin: 0 0 22px; }

/* Głowa strony: tytuł z podtytułem po lewej, działania po prawej. */
.glowa-strony { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.glowa-strony p.podtytul { margin: 0; }
.glowa-akcje { display: flex; gap: 8px; flex-wrap: wrap; }

/* Okruszki nad tytułem lokalu i pojedyncze przyciski „← Wróć" na górze widoku —
   lekki link zamiast pełnego przycisku, żeby nie konkurował z tytułem. */
.okruszki { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cien); margin: 0 0 8px; flex-wrap: wrap; }
.okruszki button { background: none; padding: 4px 0; color: var(--kobalt); font-weight: 600; min-height: 32px; }
.okruszki button:hover { text-decoration: underline; text-underline-offset: 3px; }
.okruszki [aria-current] { color: var(--atrament); font-weight: 500; }
main > .dzialanie.pusty.maly[data-akcja^='do-listy']:first-child {
  background: none; border: 0; padding: 4px 0; min-height: 32px; color: var(--kobalt); font-weight: 600;
}
main > .dzialanie.pusty.maly[data-akcja^='do-listy']:first-child:hover { text-decoration: underline; text-underline-offset: 3px; background: none; }

h2.sekcja {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--cien);
  margin: 34px 0 12px; font-weight: 700;
}

.karta {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien-karty); padding: 20px;
  box-shadow: var(--cien-karty);
}

/* Kafelki z liczbami nad listą lokali. */
.liczniki { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 26px; }
.licznik-kafel {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien-karty); padding: 14px 16px 14px 19px;
  box-shadow: var(--cien-karty); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden;
}
.licznik-kafel span { font-size: 12.5px; color: var(--cien); font-weight: 500; }
.licznik-kafel b { font: 600 26px / 1 var(--mono); letter-spacing: -.03em; }
.licznik-kafel::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--linia-mocna); }
.licznik-kafel.dobrze::before { background: var(--zielen); }
.licznik-kafel.uwaga::before { background: #E0B43C; }

/* Pasek nad tabelą: nagłówek sekcji i pole szukania w jednym rzędzie. */
.pasek-tabeli { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.pasek-tabeli h2.sekcja { margin: 0; }
input.szukaj {
  width: min(340px, 100%); padding-left: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23756D83' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
}
.brak-wynikow { margin: 0; padding: 18px; text-align: center; color: var(--cien); background: #fff; }

/* --- Tabele --------------------------------------------------------------- */

/* Ramka wokół tabeli: zaokrąglenie, cień i przewijanie w bok na wąskim ekranie
   zamiast rozpychania strony. */
.tabela-ramka {
  background: #fff; border: 1px solid var(--linia); border-radius: var(--promien-karty);
  box-shadow: var(--cien-karty); overflow-x: auto;
}
.tabela-ramka > table { border: 0; border-radius: 0; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--promien-karty); overflow: hidden; border: 1px solid var(--linia); }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--linia); vertical-align: middle; }
th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cien); font-weight: 700;
  background: #FAF9FC; padding-top: 10px; padding-bottom: 10px; white-space: nowrap;
}
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #FBFAFD; }
tr:last-child td { border-bottom: 0; }
td.liczba { font-family: var(--mono); font-size: 12.5px; }
.tabela-lokali td.liczba, .tabela-lokali th.liczba { text-align: right; }
td .adres { display: block; color: var(--cien); font-size: 12.5px; margin-top: 2px; }
td.typ { color: var(--cien); }
.nazwa-lokalu {
  background: none; padding: 0; font-weight: 700; font-size: 14.5px; color: var(--atrament); text-align: left;
}
.nazwa-lokalu:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tablet (P-2): kolumna „Typ" odpada, przyciski wiersza mogą zejść pod siebie —
   tabela mieści się w szerokości bez przewijania w bok. */
@media (max-width: 900px) {
  .tabela-lokali th:nth-child(2), .tabela-lokali td.typ { display: none; }
  .tabela-lokali th, .tabela-lokali td { padding-left: 12px; padding-right: 12px; }
  .tabela-lokali .przyciski-wiersza { white-space: normal; text-align: right; }
  .tabela-lokali .przyciski-wiersza .dzialanie + .dzialanie { margin: 6px 0 0; }
}

.plakietka {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; line-height: 1.4;
}
.plakietka::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.plakietka.ok { background: #E6F4EC; color: var(--zielen); }
.plakietka.zle { background: #FCECEA; color: var(--czerwien); }
.plakietka.cisza { background: #FDF3DC; color: #8A6300; }
.plakietka.brak { background: #F0EEF3; color: var(--cien); }

/* Zamówienia na godzinę z nierozwiązanym problemem (K-24) — ramka nad tabelą
   lokali, widoczna tylko, gdy jest co pokazać (patrz `widokRamkiDoWyjasnienia`). */
.ramka-do-wyjasnienia {
  background: #FDF1EF; border: 1px solid #F0C4BE; border-left: 4px solid var(--czerwien); border-radius: var(--promien-karty);
  padding: 16px 18px; margin: 0 0 22px;
}
.ramka-do-wyjasnienia h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--czerwien); }
.ramka-do-wyjasnienia table { border-color: #F0C4BE; }

.ramka-wiadomosci {
  background: #fff; border: 1px solid var(--linia); border-left: 4px solid var(--kobalt); border-radius: var(--promien-karty);
  padding: 16px 18px; margin: 0 0 22px; box-shadow: var(--cien-karty);
}
.ramka-wiadomosci h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--kobalt); }
.ramka-wiadomosci .tresc-wiadomosci { white-space: pre-wrap; max-width: 60ch; }

/* --- Pola formularzy ------------------------------------------------------ */

label { display: block; font-size: 12.5px; color: var(--cien); margin: 14px 0 6px; font-weight: 600; }
/* Uchwyt dotykowy co najmniej 44 px na tablecie (P-2, 8,3") — patrz
   `pointer: coarse` niżej. Myszą wystarczy 40 px, gęściej i równiej. */
input, select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--linia-mocna); border-radius: var(--promien-kontrolki);
  font-family: inherit; font-size: 14px; background-color: #fff; color: var(--atrament);
  min-height: 40px; transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #B7ABC8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--kobalt); box-shadow: var(--obwodka-fokusu); }
input[readonly] { background-color: #FAF9FC; }
input::placeholder, textarea::placeholder { color: #A79FB4; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2322006B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
}
input[type='color'] { padding: 3px; min-height: 40px; }
textarea { min-height: 66px; resize: vertical; line-height: 1.45; }

/* Pola wyboru i opcje: wcześniej dziedziczyły `width: 100%` i 44 px wysokości
   po zwykłych polach i stawały się wielkimi kwadratami oderwanymi od opisu
   (karta obiektu, 6.10.2026). Teraz zwykłe 18 px obok etykiety. */
input[type='checkbox'], input[type='radio'] {
  width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none;
  accent-color: var(--kobalt); cursor: pointer; box-shadow: none; vertical-align: -3px;
}
label:has(> input[type='checkbox']), label:has(> input[type='radio']) {
  display: flex; align-items: center; gap: 10px; color: var(--atrament); font-size: 14px; font-weight: 500;
}

/* Uchwyt suwaka: sam pasek jest cienki, ale kula do chwytania ma 28 px plus
   obszar wokół niej — pole całego elementu i tak liczy się jako 44 px. */
input[type='range'] { min-height: 44px; border: 0; padding: 0; box-shadow: none; background: none; accent-color: var(--kobalt); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kobalt); border: 2px solid #fff; cursor: pointer;
}

/* Pole z jednostką na końcu („9,00 zł"). */
.pole-z-jednostka { position: relative; display: block; }
.pole-z-jednostka input { padding-right: 38px; font-family: var(--mono); font-size: 13px; }
.pole-z-jednostka i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--cien); font-size: 13px; pointer-events: none; }

.siatka2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.siatka3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }

/* --- Przyciski ------------------------------------------------------------ */

.dzialanie {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--promien-kontrolki); background: var(--atrament); color: #fff;
  font-weight: 600; font-size: 14px; min-height: 40px; line-height: 1.2;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dzialanie:hover { background: #3A1A85; }
.dzialanie.pusty { background: #fff; color: var(--atrament); border: 1px solid var(--linia-mocna); }
.dzialanie.pusty:hover { background: var(--mgla); border-color: #B7ABC8; }
/* Działanie poboczne w wierszu tabeli („Do archiwum"): bez ramki, ożywa po najechaniu. */
.dzialanie.cichy { background: transparent; color: var(--cien); border: 1px solid transparent; }
.dzialanie.cichy:hover { background: var(--mgla); color: var(--atrament); }
.dzialanie.zly { background: var(--czerwien); }
.dzialanie.zly:hover { background: #962019; }
.dzialanie.pusty.zly { background: #fff; color: var(--czerwien); border-color: #F0C4BE; }
.dzialanie.pusty.zly:hover { background: #FDF1EF; }
.dzialanie.maly { padding: 6px 12px; font-size: 13px; min-height: 34px; }
.dzialanie:disabled { opacity: .45; cursor: not-allowed; }
/* Link wyglądający jak przycisk („Pomoc” obok „Urządzenia”). */
a.dzialanie { text-decoration: none; }

/* Tablet i telefon: z powrotem pełne 44 px pod palec (P-2). */
@media (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']), select, .dzialanie, .dzialanie.maly { min-height: 44px; }
  .gora button, .gora .gora-biuro { min-height: 40px; }
}

.blad { background: #FDF1EF; color: var(--czerwien); padding: 11px 14px; border-radius: var(--promien-kontrolki); margin: 12px 0; border: 1px solid #F0C4BE; }
.sukces { background: #E9F5EE; color: var(--zielen); padding: 11px 14px; border-radius: var(--promien-kontrolki); margin: 12px 0; border: 1px solid #BFE0CC; }

/* Komunikat po działaniu: przyklejony do ekranu, bo formularz dania bywa
   daleko w dół strony, a komunikat w treści lądował poza widokiem. */
.grzanka {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 50;
  margin: 0; max-width: min(560px, calc(100vw - 32px)); font-weight: 600;
  box-shadow: var(--cien-uniesiony);
}

.uklad { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }

/* Pasek zakładek strony lokalu (P-10, etap 2). Ciemna oprawa, bo narzędzie
   nie może konkurować kolorem z podglądem restauracji stojącym obok.
   `var(--grafit)`, nie tymczasowy `var(--atrament)` z pierwszego szkicu —
   atrament zostaje kolorem znaku marki, nie tła narzędzia. */
/* 6.10.2026: jasny pasek segmentowy zamiast fioletowej pigułki — wybrana
   zakładka jest jedynym ciemnym elementem, więc od razu widać, gdzie jesteś,
   a pasek nie gryzie się z podglądem obok. */
.zakladki {
  display: flex; gap: 2px; padding: 4px;
  background: #fff; border: 1px solid var(--linia); border-radius: 12px; margin-bottom: 20px;
  box-shadow: var(--cien-karty); overflow-x: auto; scrollbar-width: none;
}
/* Baza wspólna z `.przelacznik-tabletu button` (niżej, w media query 900px) —
   prawie identyczne reguły były zduplikowane w dwóch miejscach (P-12, #115,
   punkt 8). `touch-action` dołożone też do przełącznika: to on jest jedyną
   drogą powrotu z podglądu do edytora na tablecie, gdzie ta własność ma
   największe znaczenie. */
.zakladki button, .przelacznik-tabletu button {
  flex: 1 0 auto; min-height: 40px; border-radius: 9px;
  background: transparent; color: var(--cien); font-weight: 600; white-space: nowrap;
  touch-action: manipulation; transition: background-color .15s ease, color .15s ease;
}
.zakladki button { padding: 0 16px; font-size: 14px; }
.zakladki button:not(.wybrana):hover, .przelacznik-tabletu button:not(.wybrana):hover { background: var(--mgla); color: var(--atrament); }
.zakladki button.wybrana, .przelacznik-tabletu button.wybrana {
  background: var(--atrament); color: #fff;
}

.przelacznik-tabletu { display: none; }
/* Na ciemnym fiolecie fiołkowy obrys ostrości znika — tam limonka. */
.gora :focus-visible, .pasek-cofania :focus-visible { outline-color: var(--limonka); }

/* Sam tablet 8,3" (P-2): kolumna 340px na podgląd nie mieści się obok
   formularza, a portal nie miał dotąd żadnego punktu przełamania — strona
   scrollowała się w bok na całej swojej długości, nie tylko przy podglądzie.
   Poniżej 900 px edytor i podgląd stoją zamiast siebie, przełączane
   przyciskiem (etap 2, P-10) — telefon nad formularzem znaczył „przewiń
   przez wszystko, żeby wrócić do pól". Ramka podglądu zostaje w DOM w obu
   stanach cały czas, ukryta wyłącznie CSS-em (`display: none`), nigdy nie
   usuwana ani przenoszona — patrz ograniczenia globalne briefu. */
@media (max-width: 900px) {
  .uklad { grid-template-columns: 1fr; }

  .przelacznik-tabletu {
    display: flex; gap: 2px; padding: 4px; margin-bottom: var(--odstep-3);
    background: #fff; border: 1px solid var(--linia); border-radius: 12px;
  }
  .uklad .podglad { display: none; }
  .uklad.pokaz-podglad #lokal-tresc,
  .uklad.pokaz-podglad .zakladki { display: none; }
  .uklad.pokaz-podglad .podglad { display: block; position: static; margin: 0 auto; }
}

/* Podgląd lokalu (P-10): aplikacja klienta w ramce telefonu. Ramka ma
   szerokość telefonu, 390 px, i jest pomniejszona do kolumny — aplikacja układa
   się tak jak u klienta, a nie jak w wąskiej kolumnie. Skala to (340 − 2·7) / 390,
   czyli kolumna bez obudowy. */
.podglad {
  --skala: .836;
  --wysokosc-telefonu: 780px;
  position: sticky; top: 78px;
}
.podglad-telefon {
  width: calc(390px * var(--skala) + 14px);
  height: calc(var(--wysokosc-telefonu) * var(--skala) + 14px);
  margin: 0 auto; overflow: hidden;
  border: 7px solid #1C1530; border-radius: 30px; background: #fff;
  box-shadow: 0 18px 40px -18px rgba(34, 0, 107, .45), 0 0 0 1px rgba(34, 0, 107, .08);
}
.podglad-telefon iframe {
  display: block; width: 390px; height: var(--wysokosc-telefonu); border: 0;
  transform: scale(var(--skala)); transform-origin: 0 0;
}
.podglad-notka { margin: 14px 4px 0; color: var(--cien); font-size: 12px; line-height: 1.45; text-align: center; }

/* Tablet: rozmiar podglądu w trybie „Podgląd" przełącznika (patrz `.uklad`
   wyżej). Ta reguła musi stać za podstawową `.podglad` — wcześniej stała
   przed nią i przegrywała, więc przyklejenie zostawało włączone także na
   tablecie. Telefon w pełnej wysokości zająłby cały ekran.
   Bez `order: -1`: to była pozostałość ze starego układu, w którym telefon
   stał nad formularzem na stałe (przed przełącznikiem Edytor/Podgląd,
   etap 2). Kolumna `.lokal-lewa` z przełącznikiem ma dziś zawsze renderować
   się przed `.podglad` w porządku wizualnym — inaczej w trybie Podgląd
   przełącznik (jedyna droga powrotu do edytora) ląduje pod telefonem, przy
   wysokich telefonach praktycznie poza ekranem (runda poprawek, krytyczne).
   Nie przywracaj `order` „dla wygody" bez sprawdzenia tego przypadku. */
@media (max-width: 900px) {
  .podglad {
    position: static; margin-bottom: 20px;
    --wysokosc-telefonu: calc(60vh / var(--skala));
  }
}

/* Tyle, żeby dało się zmienić nazwę albo usunąć kategorię (P-5, #6) — jak przy
   .danie-edycja, wygląd portalu to osobna robota. */
.wiersz-kategorii { display: flex; gap: 8px; margin: 4px 0 10px; }
.kategoria-edycja { display: flex; gap: 8px; margin: 4px 0 10px; align-items: center; }
.kategoria-edycja input { width: auto; flex: 1; }

.wiersz-dania {
  display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--linia); border-radius: 12px; background: #fff;
  margin-bottom: 8px; box-shadow: var(--cien-karty); transition: border-color .15s ease;
}
.wiersz-dania:hover { border-color: var(--linia-mocna); }
.wiersz-dania.ukryte { opacity: .5; }
.wiersz-dania .cena { font-family: var(--mono); font-size: 12.5px; }
.wiersz-dania small { color: var(--cien); display: block; font-size: 11.5px; }

/* Tyle, żeby formularz edycji był używalny. Wygląd portalu to osobna robota. */
.danie-edycja { margin-bottom: 7px; }
.danie-edycja .przelaczniki { display: grid; gap: 8px; margin-top: 16px; }
/* Bez tego globalne input { width: 100% } rozciąga pole wyboru na całą szerokość. */
.danie-edycja .przelaczniki label { display: flex; align-items: center; gap: 9px; margin: 0; }
.danie-edycja .przelaczniki input { width: auto; }
/* Pole porcji: przełącznik zamiast etykiety, pod nim liczba i jednostka w jednym rzędzie. */
.porcja-przelacz { display: flex; align-items: center; gap: 8px; }
.porcja-przelacz input { width: auto; margin: 0; }
.porcja-wartosci { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.porcja-wartosci input:disabled, .porcja-wartosci select:disabled { opacity: .45; }
.danie-edycja .rzad-przyciskow { display: flex; gap: 10px; margin-top: 18px; }
/* Opcje dania (P-6, #7). Kreator z 15 września: gotowce, dwa duże przyciski
   rodzaju wyboru, wiersz na pozycję i podgląd tego, co zobaczy klient. */
.opcje-dania { margin-top: 22px; }
.opcje-dania h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--cien); margin: 0 0 4px; }
.opcje-wstep { margin: 0 0 12px; font-size: 13px; color: var(--cien); }
/* Globalne input { width: 100%; min-height: 44px } robiło z pola wyboru
   wielki pusty kwadrat na środku wiersza, oderwany od swojego opisu. */
.opcje-dania input[type='checkbox'] { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--kobalt); }
.opcje-grupa { border: 1px solid var(--linia); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.opcje-grupa-naglowek { display: flex; align-items: center; gap: 8px; }
.opcje-grupa-naglowek > div { margin-right: auto; }
.opcje-grupa-naglowek small { display: block; font-size: 12px; color: var(--cien); margin-top: 2px; }
.opcje-lista { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--linia); }
.opcje-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linia); }
.opcje-lista .opcja-nazwa { margin-right: auto; }
.opcje-lista .opcja-doplata { font-family: var(--mono); font-size: 12px; color: var(--cien); }
.opcje-dopisz { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px; margin-top: 10px; }
.pole-zl {
  display: flex; align-items: center; gap: 4px; padding: 0 10px;
  border: 1px solid var(--linia); border-radius: 9px; background: #fff; color: var(--cien); font-size: 13px;
}
.pole-zl:focus-within { border-color: var(--kobalt); }
.pole-zl input { border: 0; padding: 0 2px; min-height: 42px; text-align: right; font-family: var(--mono); outline: none; }
.opcje-nowa-grupa { border: 1px dashed var(--linia); border-radius: 12px; padding: 14px; }
.opcje-nowa-grupa p { margin: 2px 0 10px; font-size: 13px; }
.szablony-grup { display: flex; flex-wrap: wrap; gap: 8px; }

.kreator-grupy { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.kreator-tytul { font-size: 15px; }
.etykieta-pola { display: block; font-size: 12.5px; color: var(--cien); margin: 14px 0 6px; font-weight: 500; }
.kreator-wybor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kreator-wybor button {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px;
  border: 1px solid var(--linia); border-radius: 10px; background: #fff; color: var(--atrament); min-height: 44px;
}
.kreator-wybor button[aria-checked='true'] { border: 2px solid var(--kobalt); background: var(--mgla); padding: 11px; }
.kreator-wybor b, .kreator-wymagane b { display: block; font-size: 14px; }
.kreator-wybor small, .kreator-wymagane small { display: block; font-size: 12px; color: var(--cien); font-weight: 400; margin-top: 2px; }
.znacznik { width: 18px; height: 18px; flex: none; border: 2px solid var(--cien); margin-top: 1px; background: #fff; }
.znacznik.kolko { border-radius: 50%; }
.znacznik.kwadrat { border-radius: 5px; }
[aria-checked='true'] > .znacznik, .wybrana > .znacznik { border-color: var(--kobalt); box-shadow: inset 0 0 0 3px #fff; background: var(--kobalt); }
.kreator-limit { display: grid; grid-template-columns: auto 120px 1fr; gap: 10px; align-items: center; margin-top: 12px; }
.kreator-limit label { margin: 0; }
.kreator-wymagane {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px;
  border: 1px solid var(--linia); border-radius: 10px; cursor: pointer; color: var(--atrament);
}
.kreator-wiersze { margin-top: 16px; }
.kreator-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: 6px; margin-top: 6px; }
.kreator-wiersz.naglowek { font-size: 12px; color: var(--cien); font-weight: 500; margin-bottom: -2px; }
.kreator-wiersz .kosz { border: 1px solid var(--linia); border-radius: 9px; background: #fff; color: var(--cien); min-height: 44px; }
.kreator-wiersz .kosz:hover { color: var(--czerwien); border-color: var(--czerwien); }
.kreator-wiersz input.zle + .pole-zl, .pole-zl:has(input.zle) { border-color: var(--czerwien); }
.kreator-wiersze > .dzialanie { margin-top: 10px; }
.kreator-podpowiedz { display: block; margin-top: 6px; font-size: 12px; }
.kreator-grupy .rzad-przyciskow { display: flex; gap: 8px; margin-top: 16px; }
.kreator-podglad { background: var(--papier); border-radius: 12px; padding: 14px; align-self: start; position: sticky; top: 72px; }
.kreator-podglad-etykieta { display: block; font-size: 12px; color: var(--cien); margin-bottom: 10px; }
.podglad-grupy-tytul { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.podglad-grupy-tytul .cien { font-size: 12px; font-weight: 400; }
.znaczek-wymagane { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; background: var(--atrament); color: #fff; padding: 2px 6px; border-radius: 4px; }
.podglad-grupy-opis { font-size: 12px; margin: 2px 0 8px; }
.podglad-opcja {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 6px;
  border: 1.5px solid var(--linia); border-radius: 10px; background: #fff; font-size: 14px;
}
.podglad-opcja.wybrana { border-color: var(--kobalt); background: var(--mgla); }
.podglad-opcja .dop { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 700; }
@media (max-width: 700px) {
  .kreator-grupy { grid-template-columns: 1fr; }
  .kreator-podglad { position: static; }
  .kreator-wybor { grid-template-columns: 1fr; }
  .kreator-limit { grid-template-columns: auto 100px; }
  .kreator-limit small { grid-column: 1 / -1; }
  .opcje-dopisz { grid-template-columns: minmax(0, 1fr) 100px; }
  .opcje-dopisz .dzialanie { grid-column: 1 / -1; }
  .kreator-wiersz { grid-template-columns: minmax(0, 1fr) 96px 44px; }
}
.opcja-edycja { display: flex; gap: 6px; align-items: center; flex: 1; }
.opcja-edycja input { width: auto; flex: 1; }
.opcja-edycja input#op-doplata { flex: 0 0 90px; }

/* Planer menu (P-13): aplikacja klienta w szerokości telefonu, na środku.
   Szerokość jest częścią zasady „tak jak widzi klient" — rozciągnięta na całą
   zakładkę zmieniłaby układ kafelków i pokazywała menu, którego nikt nie ma. */
.planer-wstep { font-size: 13px; color: var(--cien); max-width: 62ch; margin: 0 0 14px; }
.planer-telefon { width: 420px; max-width: 100%; margin: 0 auto; }
.planer-telefon iframe {
  width: 100%; height: 70vh; min-height: 480px; border: 1px solid var(--linia);
  border-radius: 18px; background: #fff; display: block;
}
@media (max-width: 900px) {
  .planer-telefon iframe { height: 60vh; }
}

/* Pasek publikacji (P-10): jedyne miejsce, z którego wygląd trafia do klientów. */
.pasek-publikacji {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 14px 12px 18px;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--linia); border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 24px -14px rgba(34, 0, 107, .3);
  backdrop-filter: blur(6px);
}
.pasek-publikacji .stan-szkicu { font-size: 13px; color: var(--cien); margin-right: auto; font-weight: 600; }
.pasek-publikacji .dzialanie[disabled] { opacity: .5; cursor: default; }
/* Kolor stanu bez zmian w app.js: przycisk „Opublikuj" stojący od razu po
   etykiecie jest wyłączony wtedy i tylko wtedy, gdy nie ma niezapisanych
   zmian — ten sam warunek, którym app.js rysuje tekst „Zapisane". Pasek sam
   zostaje jasny (patrz komentarz w briefie zadania 3): ciemny odcinałby się
   od kart z treścią. */
.pasek-publikacji .stan-szkicu:has(+ .dzialanie[disabled]) { color: var(--stan-zielony); }
.pasek-publikacji .stan-szkicu:has(+ .dzialanie:not([disabled])) { color: var(--stan-bursztyn); }
/* Błąd trwały (P-12, #115, punkt 1) wygrywa z zielonym/bursztynowym stanem
   powyżej niezależnie od tego, czy przyciski są akurat włączone (od tej
   nocy mogą być włączone nawet przy zerowej liczbie zmian — patrz
   `odswiezPasekPublikacji` w app.js) — stąd druga reguła z :has(), o
   specyficzności dobranej tak, żeby wygrać z obiema regułami wyżej.
   DWIE OSOBNE reguły, nie jedna z przecinkiem: selektor łączony przecinkiem,
   w którym jedna część używa nieobsługiwanej pseudoklasy, unieważnia się w
   CAŁOŚCI na starszej przeglądarce — również tę bez :has(). Przegląd tej
   nocy złapał to jako błąd we wcześniejszej wersji: zamierzony "spadochron"
   (sama klasa, bez :has()) w ogóle by nie zadziałał, bo siedział w tym samym
   przecinkowym selektorze co reguła z :has(). Osobno: pierwsza reguła
   (zwykła klasa) działa wszędzie i wygrywa tam, gdzie :has() nie istnieje —
   wtedy reguły zielona/bursztynowa też są nieważne, więc nie ma z czym
   przegrać specyficznością. Druga reguła dogrywa priorytet tam, gdzie
   wszystkie trzy reguły naprawdę ze sobą konkurują. */
.pasek-publikacji .stan-szkicu.blad { color: var(--stan-czerwony); }
.pasek-publikacji .stan-szkicu.blad:has(+ .dzialanie) { color: var(--stan-czerwony); }

.zwijka { margin-bottom: 16px; }
.zwijka > summary {
  cursor: pointer; font-weight: 700; padding: 10px 0; font-size: 15px;
}
.zwijka > summary:hover { color: var(--kobalt); }

/* ==========================================================================
   Zakładka Wygląd (P-10, etap 3)

   Od ogólnego do szczegółu: gotowa kompozycja, paleta z koloru marki, kroje,
   układ, nagłówek, promocja, zaawansowane. Grupy zwijane, żeby przewijanie
   nie było pracą; każdy wybór obrazkiem zamiast listą z nazwą maszynową.
   ========================================================================== */

.uklad > * { min-width: 0; }

.wyglad-wstep { margin: 4px 0 14px; }
.wyglad-wstep h2.sekcja { margin: 0 0 6px; }
.wyglad-wstep p { margin: 0; color: var(--cien); font-size: 13px; line-height: 1.5; max-width: 64ch; }

.grupa { background: #fff; border: 1px solid var(--linia); border-radius: var(--promien-karty); margin-bottom: 10px; box-shadow: var(--cien-karty); }
.grupa > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  padding: 13px 18px; min-height: 44px; font-weight: 700; font-size: 15px; border-radius: 14px;
}
.grupa > summary::-webkit-details-marker { display: none; }
.grupa > summary::after {
  content: '▾'; margin-left: auto; color: var(--cien); font-size: 14px;
  transition: transform .18s ease;
}
.grupa:not([open]) > summary::after { transform: rotate(-90deg); }
.grupa > summary:hover { background: var(--papier); }
.grupa .g-podpis { font-weight: 400; font-size: 12.5px; color: var(--cien); }
.grupa .g-tresc { padding: 2px 18px 18px; }
.grupa .g-tresc > label:first-child { margin-top: 0; }

h3.podgrupa {
  margin: 22px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--cien); font-weight: 700;
}

label small { display: block; font-weight: 400; color: var(--cien); font-size: 11.5px; margin-top: 1px; }

.notka { color: var(--cien); font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; }

/* Pasek „Kompozycja … jest w szkicu · Cofnij" — przyklejony, bo po kliknięciu
   karty człowiek patrzy na podgląd, a nie na górę formularza. */
.pasek-cofania {
  position: sticky; top: 66px; z-index: 11;
  display: flex; align-items: center; gap: 12px;
  background: var(--grafit); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 6px 6px 6px 16px; border-radius: 12px; margin-bottom: 10px;
  box-shadow: 0 6px 20px rgba(34, 0, 107, .2);
}
.pasek-cofania .dzialanie { margin-left: auto; }

label.przelacznik-maly {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: var(--atrament); font-size: 13px; min-height: 44px; cursor: pointer;
}
label.przelacznik-maly input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--kobalt); }

/* --- Kompozycje ------------------------------------------------------------- */

.kompozycje { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.kompozycja {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: #fff; border: 1px solid var(--linia); border-radius: 12px; padding: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kompozycja:hover { border-color: var(--kobalt); box-shadow: 0 4px 14px rgba(34, 0, 107, .12); transform: translateY(-1px); }
.kompozycja.obecna { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); }
.k-opis b { font-size: 14px; }
.k-opis small { display: block; color: var(--cien); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.znaczek {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 5px; background: #FDF2D8; color: var(--stan-bursztyn);
}
.znaczek.obecna { background: var(--mgla); color: var(--kobalt); }
.kompozycja:not(.obecna) .znaczek.obecna { display: none; }

/* Miniatura: telefon narysowany pięcioma elementami w barwach kompozycji. */
.miniatura {
  display: flex; flex-direction: column; gap: 6px; aspect-ratio: 1 / 1.05;
  background: var(--m-tlo); border-radius: 8px; padding-bottom: 8px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
}
.m-hero {
  flex: 0 0 34%; display: flex; align-items: flex-end; padding: 6px 9px;
  background: var(--m-gradient); border-radius: 0 0 var(--m-r) var(--m-r);
}
.m-nazwa { font-family: var(--m-krok); font-weight: 700; font-size: 18px; line-height: 1; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.m-kafelki { flex: 1; display: grid; gap: 5px; padding: 0 8px; min-height: 0; }
.m-kafelki i {
  position: relative; overflow: hidden;
  background: var(--m-kafel); border-radius: var(--m-r); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.m-kafelki i::after {
  content: ''; position: absolute; left: 12%; right: 35%; bottom: 20%; height: 4px; border-radius: 2px;
  background: var(--m-tekst); opacity: .75;
}
.miniatura[data-uklad='karta'] .m-kafelki { grid-template-rows: 1fr 1fr; }
.miniatura[data-uklad='karta'] .m-kafelki i:nth-child(n+3) { display: none; }
.miniatura[data-uklad='siatka'] .m-kafelki { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.miniatura[data-uklad='lista'] .m-kafelki { grid-template-rows: repeat(4, 1fr); }
.miniatura[data-uklad='karta'] .m-kafelki i::before,
.miniatura[data-uklad='siatka'] .m-kafelki i::before {
  content: ''; position: absolute; inset: 0 0 48% 0;
  background: color-mix(in srgb, var(--m-akcent) 55%, var(--m-kafel));
}
.miniatura[data-uklad='lista'] .m-kafelki i::after { bottom: 38%; height: 3px; }
.m-przycisk { align-self: center; width: 58%; height: 9px; border-radius: 99px; background: var(--m-glowny); }

/* --- Kolory --------------------------------------------------------------------- */

.paleta-z-koloru { background: var(--mgla); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.paleta-z-koloru > label { margin: 0 0 10px; color: var(--atrament); font-weight: 600; }
.marka-rzad { display: flex; align-items: stretch; gap: 10px; }
.marka-rzad input[type='color'] { width: 64px; flex: none; height: auto; cursor: pointer; }
.propozycje-palet { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.paleta {
  text-align: left; background: #fff; border: 1px solid var(--linia); border-radius: 10px;
  padding: 8px 10px 10px; min-height: 44px; transition: border-color .15s ease;
}
.paleta:hover { border-color: var(--kobalt); }
.pasek-probek { display: flex; height: 22px; border-radius: 6px; overflow: hidden; margin-bottom: 7px; border: 1px solid rgba(0, 0, 0, .08); }
.pasek-probek i { flex: 1; }
.paleta b { font-size: 13.5px; }
.paleta small { display: block; color: var(--cien); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }

.siatka-kolorow { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.pole-koloru label { color: var(--atrament); font-weight: 600; }
.kolor-para { display: flex; gap: 6px; align-items: center; }
.kolor-para input[type='color'] { width: 52px; flex: none; cursor: pointer; }
input.kod, input.kod-dlugi { font-family: var(--mono); font-size: 12.5px; }
input.kod { text-transform: uppercase; }
input.zle { border-color: var(--czerwien); background: #FFF8F7; }
.blad-pola { display: block; color: var(--czerwien); font-size: 12px; margin-top: 4px; }
.blad-pola:empty { display: none; }
.stan-obrazka { display: block; font-size: 12px; margin-top: 4px; color: var(--zielen); }
.stan-obrazka.zle { color: var(--czerwien); }
.stan-obrazka:empty { display: none; }

.czytelnosc { margin-top: 16px; border-top: 1px solid var(--linia); padding-top: 12px; }
.czytelnosc h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--cien); }
.wiersz-czytelnosci { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.probka-napisu { font-weight: 700; text-align: center; border-radius: 6px; padding: 5px 0; border: 1px solid rgba(0, 0, 0, .08); }
.ocena { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.ocena.dobry { background: #E3F3EA; color: var(--zielen); }
.ocena.slaby { background: #FDF2D8; color: var(--stan-bursztyn); }
.ocena.zly { background: #FBE9E7; color: var(--czerwien); }
.ocena.brak { background: var(--mgla); color: var(--cien); }

/* --- Kroje ------------------------------------------------------------------------ */

.pary-krojow { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 4px; }
.para-krojow {
  text-align: left; background: #fff; border: 1px solid var(--linia); border-radius: 10px;
  padding: 10px 12px; min-height: 44px; overflow: hidden; transition: border-color .15s ease;
}
.para-krojow:hover { border-color: var(--kobalt); }
.para-krojow.obecna { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); background: var(--mgla); }
.para-krojow .p-nazwa { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--cien); margin-bottom: 4px; }
.para-krojow .p-naglowek { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.para-krojow .p-kategoria { display: block; font-size: 18px; color: var(--kobalt); line-height: 1.2; }
.para-krojow .p-tresc { display: block; font-size: 12.5px; color: var(--cien); margin-top: 3px; line-height: 1.35; }

/* --- Układ ------------------------------------------------------------------------- */

.wybor-obrazkowy { border: 0; padding: 0; margin: 0; min-width: 0; }
.wybor-obrazkowy legend { font-size: 12.5px; color: var(--cien); font-weight: 500; margin: 12px 0 6px; padding: 0; }
.opcje-obrazkowe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
label.opcja-obrazkowa {
  position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0;
  border: 1px solid var(--linia); border-radius: 10px; padding: 10px; cursor: pointer; color: var(--atrament);
}
label.opcja-obrazkowa input, .segmenty input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; }
label.opcja-obrazkowa:has(input:checked) { border-color: var(--kobalt); box-shadow: inset 0 0 0 1px var(--kobalt); background: var(--mgla); }
label.opcja-obrazkowa:has(input:focus-visible) { outline: 3px solid var(--kobalt); outline-offset: 2px; }
.opcja-obrazkowa b { font-size: 13.5px; }
.opcja-obrazkowa small { color: var(--cien); font-size: 11.5px; }
.rysunek-ukladu { display: grid; gap: 3px; height: 48px; margin-bottom: 6px; }
.rysunek-ukladu i { background: var(--linia); border-radius: 3px; }
.rysunek-ukladu[data-uklad='karta'] { grid-template-rows: 1fr 1fr; }
.rysunek-ukladu[data-uklad='karta'] i:nth-child(n+3) { display: none; }
.rysunek-ukladu[data-uklad='siatka'] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.rysunek-ukladu[data-uklad='lista'] { grid-template-rows: repeat(4, 1fr); }
/* Zaznaczenie widać także bez :has() — rysunek przejmuje kolor. */
.opcja-obrazkowa input:checked + .rysunek-ukladu i { background: var(--kobalt); }

.segmenty { display: flex; gap: 4px; background: var(--mgla); padding: 4px; border-radius: 10px; }
.segmenty label { flex: 1; margin: 0; position: relative; }
.segmenty span {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  border-radius: 7px; color: var(--atrament); font-size: 13.5px; cursor: pointer;
}
.segmenty input:checked + span { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(34, 0, 107, .18); }
.segmenty input:focus-visible + span { outline: 3px solid var(--kobalt); outline-offset: 1px; }

.suwak-z-liczba { display: grid; grid-template-columns: 1fr 84px auto; gap: 10px; align-items: center; }
.suwak-z-liczba span { color: var(--cien); font-size: 12.5px; }
.suwak-z-liczba input[type='number'] { font-family: var(--mono); font-size: 13px; }

.chipy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  min-height: 44px; padding: 0 14px; border-radius: 99px;
  background: var(--mgla); color: var(--atrament); font-size: 12.5px;
}
.chip:hover { background: var(--linia); }
.chip[aria-pressed='true'] { background: var(--kobalt); color: #fff; }
.godlo, .godlo-chip { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
input.godlo { font-size: 22px; max-width: 120px; }
/* Symbol dania (15 września): pole na własny znak obok gotowych do kliknięcia. */
.pole-symbolu { margin-top: 4px; }
.pole-symbolu label small { font-weight: 400; margin-left: 4px; }
.pole-symbolu-rzad { display: flex; gap: 10px; align-items: flex-start; }
.pole-symbolu-rzad input.godlo { flex: 0 0 72px; text-align: center; }
.pole-symbolu-rzad .chipy { margin-top: 0; flex: 1; }
.pole-symbolu > small { display: block; margin-top: 6px; font-size: 12px; }
.godlo-chip { width: 44px; padding: 0; font-size: 21px; }

/* --- Nagłówek i promocja ----------------------------------------------------------- */

.obrazek-rzad { display: flex; gap: 10px; align-items: center; }
.miniatura-obrazka {
  flex: none; width: 44px; height: 44px; border-radius: 9px; overflow: hidden;
  background: var(--mgla); border: 1px solid var(--linia);
}
.miniatura-obrazka img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gradient-prosty { display: grid; gap: 8px; }
.gradient-prosty .siatka3 label { margin-top: 4px; }
.probka-gradientu { display: block; height: 44px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .08); margin-top: 8px; }

.probka-plakietki { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.plakietka-lokalu { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 5px 11px; border-radius: 99px; }

@media (max-width: 600px) {
  .siatka3 { grid-template-columns: 1fr; }
  .marka-rzad { flex-direction: column; }
  .marka-rzad input[type='color'] { width: 100%; height: 44px; }
  .suwak-z-liczba { grid-template-columns: 1fr 72px auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kompozycja, .paleta, .para-krojow, .grupa > summary::after { transition: none; }
  .kompozycja:hover { transform: none; }
}

/* Archiwum lokali (15 września 2026): zwinięta sekcja pod tabelą restauracji. */
.przyciski-wiersza { white-space: nowrap; }
.przyciski-wiersza .dzialanie + .dzialanie { margin-left: 6px; }
.archiwum-lokali, .archiwum-urzadzen { margin-top: 14px; }
.archiwum-lokali summary, .archiwum-urzadzen summary { cursor: pointer; color: var(--cien); font-size: 13.5px; font-weight: 600; padding: 8px 2px; min-height: 40px; }
.archiwum-lokali summary:hover, .archiwum-urzadzen summary:hover { color: var(--atrament); }
.archiwum-lokali .tabela-ramka, .archiwum-urzadzen .tabela-ramka { opacity: .85; margin-top: 6px; }

/* --- Konta właścicieli (P-8) i zdjęcia dań (M-4), 15 września 2026 --------- */

.gora .kto { color: rgba(255, 255, 255, .78); font-size: 13px; }
.gora button[hidden] { display: none; }

/* Wybór pliku przez etykietę — wygląda jak przycisk, pole jest ukryte. */
label.plik { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
label.dzialanie:not(.pusty) { color: #fff; }
label.dzialanie.pusty { color: var(--atrament); }
label.plik:focus-within { outline: 2px solid var(--kobalt); outline-offset: 2px; }
label.plik input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.plakietka.info { background: var(--mgla); color: var(--kobalt); }

.zdjecie-dania {
  display: grid; grid-template-columns: 208px 1fr; gap: 16px; align-items: start;
  padding: 12px; border: 1px solid var(--linia); border-radius: 12px; background: var(--papier); margin-bottom: 14px;
}
.zdjecie-dania-podglad {
  aspect-ratio: 4 / 3; max-width: 100%; border-radius: 9px; overflow: hidden; background: var(--mgla);
  display: grid; place-items: center; color: var(--cien); font-size: 12.5px;
}
.zdjecie-dania-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zdjecie-dania .rzad-przyciskow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zdjecie-dania p { margin: 6px 0 0; font-size: 12.5px; color: var(--cien); }
.zdjecie-dania-tytul { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.nazwa-z-miniatura { display: flex; align-items: center; gap: 10px; min-width: 0; }
.miniatura-dania { width: 48px; height: 36px; border-radius: 6px; object-fit: cover; flex: none; background: var(--mgla); }
span.miniatura-dania { display: inline-block; }

.ramka-obrobki {
  background: #FDF7E6; border: 1px solid #E0B43C; border-radius: 14px; padding: 16px; margin: 0 0 22px;
}
.ramka-obrobki h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #8A6300; }
.ramka-obrobki td { vertical-align: middle; }

.link-zaproszenia { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.link-zaproszenia code {
  font-family: var(--mono); font-size: 12px; background: var(--mgla); padding: 8px 10px; border-radius: 8px;
  word-break: break-all; flex: 1 1 320px;
}
.lokale-wybor {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px;
  max-height: 220px; overflow-y: auto; padding: 10px; border: 1px solid var(--linia); border-radius: 9px; background: #fff;
}
.lokale-wybor label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--atrament); }
.lokale-wybor input { width: auto; min-height: 0; }
.konta-lokale { font-size: 12.5px; color: var(--cien); }
.karta-haslo { max-width: 440px; }

@media (max-width: 600px) {
  .zdjecie-dania { grid-template-columns: 1fr; }
}

/* --- Urządzenia (R-13, etap 1) — lista i szczegóły przystawek TV ---------- */

.kropka { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

/* Okienka podglądu w liście urządzeń (P-24): ostatnia klatka ekranu, 16:9,
   odświeżana co kilka sekund; klik otwiera szczegóły z dużym podglądem. */
.tabela-urzadzen td.kolumna-miniatury { width: 1%; padding-top: 8px; padding-bottom: 8px; }
.miniatura-ramka {
  display: block; padding: 0; background: none; border-radius: 8px; position: relative;
  transition: box-shadow .15s ease;
}
.miniatura-ramka:hover { box-shadow: 0 0 0 2px var(--kobalt); }
.miniatura-ekranu {
  display: block; width: 160px; aspect-ratio: 16 / 9; object-fit: contain;
  background: #14102A; border-radius: 8px; border: 1px solid rgba(34, 0, 107, .12);
}
.miniatura-ekranu.pusta {
  display: flex; align-items: center; justify-content: center;
  background: #F0EEF3; color: var(--cien); font-size: 11.5px; border-style: dashed; border-color: var(--linia-mocna);
}
.miniatura-ekranu.pusta.czeka { background: #1E1838; color: rgba(255, 255, 255, .6); border-style: solid; }
.miniatura-ramka [hidden] { display: none; }
/* Bateria (P-26): cyfry jak reszta liczb, czerwień tylko przy niskiej bez ładowania. */
.bateria { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.bateria.niska { color: var(--czerwien); font-weight: 700; background: #FCECEA; padding: 2px 7px; border-radius: 99px; }
.kolumna-baterii small.laduje, .stan-urzadzenia small.laduje { color: var(--zielen); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tabela-urzadzen td.pusto { text-align: center; color: var(--cien); padding: 22px; }
.tabela-urzadzen .przyciski-wiersza { white-space: normal; text-align: right; min-width: 130px; }
.tabela-urzadzen .przyciski-wiersza .dzialanie { margin: 2px 0 2px 4px; }
.tabela-urzadzen .przyciski-wiersza .dzialanie + .dzialanie { margin-left: 4px; }
.tabela-urzadzen .przyciski-wiersza .usun:hover { color: var(--czerwien); background: #FDF1EF; }
@media (max-width: 900px) { .miniatura-ekranu { width: 112px; } }
.kropka.w-sieci { background: var(--zielen); }
.kropka.poza-siecia { background: var(--cien); }

.podglad-urzadzenia { text-align: center; }
.podglad-urzadzenia img {
  max-width: 100%; width: 480px; aspect-ratio: 16 / 9; object-fit: contain;
  background: var(--grafit); border-radius: 10px; display: inline-block;
}
/* Fix round 3, punkt 9: zastępuje `<img>` bez obrazu (204 z GET /podglad) —
   ten sam rozmiar, żeby karta nie skakała przy przełączaniu. */
.podglad-urzadzenia #podglad-urzadzenia-brak {
  max-width: 100%; width: 480px; aspect-ratio: 16 / 9; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--grafit); border-radius: 10px; color: var(--papier);
}
/* Fix round 4, punkt 1: bez tego atrybut `hidden` na `<img>`/`#podglad-urzadzenia-brak`
   nie robił nic — reguły wyżej ustawiają `display: inline-block`/`flex` z wyższą
   swoistością niż sama reguła `[hidden]` przeglądarki, więc oba elementy były
   widoczne naraz. Scoped (nie globalne `[hidden]`), żeby nie dotykać innych
   miejsc portalu, które już poprawnie polegają na domyślnym zachowaniu `hidden`. */
.podglad-urzadzenia img[hidden],
.podglad-urzadzenia #podglad-urzadzenia-brak[hidden] {
  display: none;
}

.rzad-przyciskow-urzadzenia { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.filtr-dziennika { display: flex; align-items: center; gap: 8px; width: auto; margin: 10px 0; color: var(--atrament); }
.filtr-dziennika input { width: auto; min-height: 0; }

/* Filtr lokalu nad listą urządzeń (R-15, część 1, zadanie 6). */
.filtr-urzadzen { display: flex; align-items: center; gap: 8px; width: auto; margin: 10px 0 16px; color: var(--atrament); }
.filtr-urzadzen select { width: auto; min-height: 0; }

/* Fix round 1 (kontroler, punkt 2): przyciski poleceń spoza etapu 1 mają
   `disabled`, ale bez tego wyglądały identycznie jak czynne. */
.polecenia-urzadzenia button:disabled { opacity: .45; cursor: not-allowed; }

/* Fix round 1, punkt 3: kompaktowy blok stanu sticka pod tytułem szczegółów. */
.stan-urzadzenia { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 0; }
.stan-urzadzenia dt { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cien); }
.stan-urzadzenia dd { margin: 4px 0 0; font-family: var(--mono); font-size: 13px; color: var(--atrament); }

/* Zakładka „Social media" (D-9, #126). */
.social-propozycja, .social-post { margin-bottom: 14px; }
.social-glowa { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 10px; }
.social-znacznik { background: var(--atrament); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.social-etykieta { display: block; font-size: 12.5px; color: #666; margin-bottom: 4px; }
.social-propozycja textarea, .social-kanal textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--linia); border-radius: 10px; padding: 10px; resize: vertical; }
.social-kanaly { margin: 8px 0; font-size: 13px; color: #555; }
.social-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.social-kanal { border-top: 1px solid var(--linia); padding-top: 10px; margin-top: 10px; font-size: 14px; }
.social-podpis { background: #f6f6f6; border-radius: 10px; padding: 10px; margin: 6px 0; white-space: pre-wrap; }
.social-uwaga { color: #8a5a00; margin: 4px 0; font-size: 13px; }
.social-miniatura { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }

/* Obiekt (W-3, #172) — karta pod listą lokali. Przebudowa 6.10.2026: ustawienia
   i kurier obok siebie, lokale jako przełączane etykiety zamiast kratki
   z wielkimi polami wyboru, przycisk zapisu przy ustawieniach, nie na całą szerokość. */
.obiekt-portal { margin-top: 34px; padding: 0; overflow: hidden; }
.obiekt-portal > *:not(.obiekt-glowa):not(.obiekt-siatka) { margin-left: 22px; margin-right: 22px; }
.obiekt-portal > :last-child { margin-bottom: 22px; }
.obiekt-glowa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--linia); background: #FAF9FC;
}
.obiekt-glowa h2 { margin: 2px 0 2px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.nadtytul { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--cien); font-weight: 700; }
.obiekt-meta { font-size: 13px; color: var(--cien); }
.obiekt-siatka { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); border-bottom: 1px solid var(--linia); }
.obiekt-ustawienia, .obiekt-kurier { padding: 18px 22px 22px; }
.obiekt-kurier { border-left: 1px solid var(--linia); }
.obiekt-ustawienia .siatka3 label:first-child { margin-top: 0; }
.obiekt-ustawienia label small { display: inline; margin-left: 4px; font-weight: 400; }
.obiekt-pod {
  margin: 20px 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--cien);
  font-weight: 700; display: flex; gap: 8px; align-items: baseline;
}
.obiekt-ustawienia > .obiekt-pod:first-child, .obiekt-kurier > .obiekt-pod:first-child { margin-top: 0; }
.obiekt-pod span {
  font: 600 11px var(--mono); letter-spacing: 0; color: var(--atrament); background: var(--mgla);
  padding: 1px 7px; border-radius: 99px;
}
.obiekt-zapis { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
label.obiekt-przelacznik { margin: 0; align-items: flex-start; font-weight: 600; }
label.obiekt-przelacznik input { margin-top: 2px; }
.obiekt-przelacznik small { display: block; font-weight: 400; color: var(--cien); font-size: 12.5px; margin-top: 1px; }
.obiekt-kurier-tresc { display: flex; gap: 16px; align-items: flex-start; }
.obiekt-kurier-tresc > div:last-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.obiekt-kurier input { font-size: 11.5px; margin-top: 2px; }
.obiekt-etykieta { font-size: 12px; color: var(--cien); }
.obiekt-qr { width: 112px; flex: none; padding: 6px; border: 1px solid var(--linia); border-radius: 10px; background: #fff; }
.obiekt-qr svg { width: 100%; height: auto; display: block; }
.obiekt-kod { font: 600 24px / 1.2 var(--mono); letter-spacing: .14em; margin-bottom: 6px; }
.obiekt-lokale { display: flex; flex-wrap: wrap; gap: 8px; }
/* Lokal w obiekcie: etykieta-przełącznik. Pole wyboru zostaje (klawiatura,
   czytnik ekranu, obsługa `data-akcja` w app.js), etykieta niesie stan kolorem. */
label.chip-wybor {
  margin: 0; gap: 8px; padding: 7px 14px 7px 11px; border: 1px solid var(--linia-mocna); border-radius: 999px;
  background: #fff; font-size: 13.5px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
label.chip-wybor:hover { border-color: #B7ABC8; background: #FBFAFD; }
label.chip-wybor:has(input:checked) { background: var(--mgla); border-color: var(--kobalt); font-weight: 600; }
label.chip-wybor:has(input:focus-visible) { outline: 3px solid var(--kobalt); outline-offset: 2px; }
label.chip-wybor input { width: 16px; height: 16px; }
.obiekt-uwaga { margin: 10px 0 0; color: var(--cien); font-size: 12.5px; }
@media (max-width: 1000px) {
  .obiekt-siatka { grid-template-columns: 1fr; }
  .obiekt-kurier { border-left: 0; border-top: 1px solid var(--linia); }
}
@media (pointer: coarse) { label.chip-wybor { min-height: 44px; } }

/* Okna „Nowe danie" i „Własny post" w zakładce Social media */
.social-okna { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 14px 0; }
.social-okno { display: grid; gap: 8px; align-content: start; }
.social-okno-tytul { margin: 0 0 4px; font-size: 16px; }
.social-okno-pod { margin: 0; color: var(--cien); font-size: 12.5px; }
.social-kanaly-wybor { display: flex; gap: 18px; }
.social-kanaly-wybor label { display: flex; gap: 6px; align-items: center; margin: 0; font-weight: 600; }

/* „Co dziś podajesz?" — publikacja dania na wszystkie kanały jednym kliknięciem (D-9, #126). */
.publikator { margin: 14px 0 18px; padding: 0; overflow: hidden; border: 1px solid var(--atrament); box-shadow: 0 10px 30px -18px rgba(14, 30, 25, .55); }
.pb-glowa { background: var(--atrament); color: var(--papier); padding: 16px 20px 14px; }
.pb-glowa h3 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.pb-glowa p { margin: 4px 0 0; font-size: 13px; color: color-mix(in srgb, var(--papier) 78%, transparent); }
.pb-uklad { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .pb-uklad { grid-template-columns: 1fr; } }
.pb-formularz { padding: 6px 20px 20px; }
.pb-formularz textarea { min-height: 70px; }
.pb-tryb { display: inline-flex; margin-top: 14px; background: var(--mgla); border-radius: 999px; padding: 3px; }
.pb-tryb button { border: 0; background: none; border-radius: 999px; padding: 9px 18px; min-height: 40px; font: 600 13.5px var(--krok); color: var(--cien); cursor: pointer; }
.pb-tryb button[aria-checked='true'] { background: var(--atrament); color: var(--papier); }
.pb-tryb button:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }
.pb-cena-zdjecie { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.pb-zdjecie { display: flex; gap: 10px; align-items: center; }
.pb-zdjecie img, .pb-bez-zdjecia { width: 84px; height: 63px; border-radius: 10px; object-fit: cover; flex: none; }
.pb-bez-zdjecia { display: flex; align-items: center; justify-content: center; background: var(--mgla); color: var(--cien); font-size: 11.5px; text-align: center; }
.pb-plik { cursor: pointer; white-space: nowrap; }
.pb-ptaszek { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--atrament); font-weight: 600; font-size: 14px; margin: 12px 0 0; min-height: 32px; }
.pb-ptaszek input { width: 20px; height: 20px; margin: 0; accent-color: var(--kobalt); }
.pb-ptaszek small { flex-basis: 100%; margin: 0 0 0 28px; color: var(--stan-bursztyn); font-weight: 500; }
.pb-kanaly { border: 1px solid var(--linia); border-radius: 12px; margin: 14px 0 0; padding: 10px 14px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pb-kanaly legend { font-size: 12px; color: var(--cien); padding: 0 6px; }
.pb-kanaly label { display: flex; gap: 7px; align-items: center; margin: 0; color: var(--atrament); font-weight: 600; font-size: 14px; min-height: 32px; }
.pb-kanaly input { width: 20px; height: 20px; margin: 0; accent-color: var(--kobalt); }
.pb-zawsze { font-size: 13px; font-weight: 600; color: var(--stan-zielony); background: color-mix(in srgb, var(--zielen) 10%, transparent); padding: 5px 10px; border-radius: 999px; }
.pb-uwaga { display: block; flex-basis: 100%; color: var(--stan-bursztyn); font-size: 12.5px; margin-top: 4px; }
.pb-publikuj { width: 100%; margin-top: 16px; min-height: 52px; font-size: 16px; }
.pb-podglad { background: var(--mgla); padding: 16px 18px 20px; display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--linia); }
@media (max-width: 1100px) { .pb-podglad { border-left: 0; border-top: 1px solid var(--linia); } }
.pb-podglad-etykieta { font: 700 10.5px var(--krok); letter-spacing: .14em; text-transform: uppercase; color: var(--cien); }
.pb-karta { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); overflow: hidden; font: 13.5px/1.42 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1c1e21; }
.pb-karta p { margin: 0; padding: 8px 12px 10px; word-wrap: break-word; }
.pb-karta img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pb-podglad-ig img { aspect-ratio: 1; }
.pb-karta-glowa { display: flex; gap: 8px; align-items: center; padding: 10px 12px 2px; }
.pb-karta-glowa small { color: #65676b; margin-left: auto; }
.pb-awatar { width: 30px; height: 30px; border-radius: 50%; background: #1b74e4; color: #fff; font: 700 11px system-ui; display: inline-flex; align-items: center; justify-content: center; }
.pb-awatar-ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.pb-wylaczony { opacity: .6; padding: 10px 12px; }
.pb-wylaczony p { padding: 4px 0 0; }
.social-zwijka { margin: 12px 0; border: 1px solid var(--linia); border-radius: 14px; background: #fff; padding: 0 16px; }
.social-zwijka > summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--atrament); min-height: 44px; box-sizing: border-box; }
.social-zwijka[open] { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .pb-tryb button { transition: none; } }