/* ============================================================================
   FREE HOME — dodatki do stylu makiety NOVA 147 m²
   Wszystko, czego nie ma w bazowym `freehome-house.css`: pasek animacji
   wejścia i tabela powierzchni w panelu. Baza zostaje nietknięta, żeby model
   bliźniaka i makieta NOVA nie rozjechały się przy kolejnej poprawce.
   ========================================================================== */

/* ------------------------------------------------- pasek animacji wejścia ---
   Siedzi na dole, nad podpowiedzią. Podczas animacji panele są przygaszone —
   przez pierwsze sekundy nie ma czym sterować, a pełny kadr robi robotę.     */
#intro-pasek{
  position:fixed;left:50%;bottom:74px;transform:translateX(-50%);
  z-index:30;display:flex;align-items:center;gap:12px;
  padding:9px 10px 9px 18px;border-radius:999px;
  background:rgba(27,67,50,.94);backdrop-filter:blur(6px);
  border:1px solid rgba(201,168,76,.45);
  box-shadow:0 12px 34px rgba(31,41,33,.28);
  transition:opacity .45s ease, transform .45s ease;
}
#intro-pasek .intro-tekst{
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;color:#f7f5ef;letter-spacing:.01em;white-space:nowrap;
}
#intro-pasek .btn{
  background:rgba(247,245,239,.14);color:#f7f5ef;
  border-color:rgba(247,245,239,.35);min-height:34px;padding:6px 14px;
}
#intro-pasek.schowany{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}

/* Panele w trakcie animacji tylko przeszkadzają — gasną, ale nie znikają
   (żeby po zakończeniu nie było przeskoku układu). */
body.intro-trwa #kolumna,
body.intro-trwa #zakladki{opacity:0;pointer-events:none;transition:opacity .3s ease}
body.intro-trwa #podpowiedz{opacity:0}

@media (max-width:860px), (pointer:coarse){
  #intro-pasek{bottom:96px;padding:8px 8px 8px 14px;gap:9px;max-width:calc(100vw - 24px)}
  #intro-pasek .intro-tekst{font-size:12.5px;white-space:normal}
}

/* ------------------------------------------------------ tabela powierzchni --- */
#metraze{margin-top:2px;font-size:12.5px}
#metraze div{
  display:flex;justify-content:space-between;gap:10px;
  padding:3px 0;border-bottom:1px dotted var(--linia);
}
#metraze div:last-child{border-bottom:0}
#metraze span{color:var(--tekst-mute)}
#metraze b{color:var(--tekst);font-variant-numeric:tabular-nums;white-space:nowrap}
#metraze .suma{margin-top:4px;padding-top:6px;border-top:1px solid var(--linia)}
#metraze .suma span{color:var(--las);font-weight:600}
#metraze .suma b{color:var(--las)}

/* --------------------------------------------------- poprawka zakładek ---
   W bazowym arkuszu `#zakladki .btn{background:…}` (selektor z ID) wygrywa
   z `.btn.on{background:…;color:#f4f1e6}`, więc aktywna zakładka na telefonie
   miała jasny tekst na jasnym tle — czyli była nieczytelna. Nadpisujemy
   selektorem o tej samej wadze co reguła bazowa.                            */
#zakladki .btn.on{
  background:var(--las);
  border-color:var(--las);
  color:#f4f1e6;
}

/* ============================ POPRAWKI PO AUDYCIE 18.08.2026 ============= */

/* --------------------------------------------- zwinięty panel się kurczy ---
   OBJAW zgłoszony przez Grzegorza: po zwinięciu OBU paneli na desktopie
   zostawał wielki pusty jasny prostokąt na całą wysokość kolumny — wyglądało
   to jak panel, w którym „nic nie widać".
   PRZYCZYNA: w arkuszu bazowym `#panel-dom{flex:1 1 auto}` ma selektor z ID,
   więc bije `.panel.zwiniety{flex:0 0 auto}` (dwie klasy). Zwinięty panel
   nadal miał flex-grow:1 i pożerał całe wolne miejsce. Widać to było tylko
   przy OBU zwiniętych — przy jednym rozwiniętym nie ma wolnego miejsca.
   Zmierzone: 736 px zamiast 46 px.                                          */
#panel-dom.zwiniety,
#panel-slonce.zwiniety{
  flex:0 0 auto;
}

/* --------------------------------------------------- samotest tylko dla nas ---
   Pasek kontrolny („Powierzchnie zgodne z ofertą… Słońce: wschód 05:47
   (oczek. 05:46)…") był widoczny dla KAŻDEGO klienta na produkcji. Domyślnie
   go chowamy; app.js pokazuje go przy `?samotest=1` albo gdy wykryje
   rozbieżność.                                                              */
#samotest{display:none}
body.pokaz-samotest #samotest{display:block}

/* ------------------------------------------- zwijana tabela powierzchni ---
   13 pomieszczeń zajmowało trzecią część panelu (ciało pokazywało 395 z 1165 px
   treści), więc przyciski widoków trzeba było wyszukiwać przewijaniem.        */
/* `display:block` jest tu KONIECZNY, nie kosmetyczny: `.grupa` z arkusza
   bazowego ustawia `display:grid`, a Chromium przy zmienionym `display` na
   <details> przestaje chować zawartość w stanie zamkniętym — tabela była
   widoczna zawsze i cała poprawka nic nie dawała (sprawdzone pomiarem). */
.grupa.zwijana{display:block;gap:0}
.grupa.zwijana>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  padding:2px 0;min-height:24px;
}
.grupa.zwijana>summary::-webkit-details-marker{display:none}
.grupa.zwijana>summary::after{
  content:'';width:6px;height:6px;margin-left:auto;
  border-right:1.6px solid var(--tekst-mute);border-bottom:1.6px solid var(--tekst-mute);
  transform:rotate(45deg);transition:transform .18s ease;
}
.grupa.zwijana[open]>summary::after{transform:rotate(-135deg)}
.grupa.zwijana>summary:hover{color:var(--las)}
.grupa.zwijana>summary:hover::after{border-color:var(--las)}
.grupa.zwijana>#metraze{margin-top:8px}

/* ------------------------------------------- podpowiedź nie nachodzi na logo ---
   Na telefonie arkusz bazowy stawia #podpowiedz na `top:52px`, a #szapka kończy
   się na 56 px — dymek wchodził pod prawy dolny róg plakietki FREE HOME
   (nachodzenie 4 px w pionie na 86 px szerokości).                          */
@media (max-width:860px), (pointer:coarse){
  #podpowiedz{top:66px}
}