/* Wspólna szata graficzna modułów konfiguratora (18.10.2026).
   Dołączana na końcu <head> każdego modułu: <link rel="stylesheet" href="../wspolne/styl.css">
   – nadpisuje lokalne style przycisków, przełączników i list rozwijanych, żeby wszystkie moduły wyglądały tak samo.
   Zmienne (--accent, --accent-ink, --accent-line, --ink, --sheet, --surface, --line, --muted, --bad, --f-display)
   definiuje każdy moduł u siebie (te same wartości w trybie jasnym i ciemnym). Zasady – STYL.md obok. */

/* 1. Przełączniki opcji (.seg) – wybrana opcja: kolor akcentu, pogrubiona */
.seg button { font-family: var(--f-display); font-weight: 600; letter-spacing: .03em; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.seg button[aria-pressed="true"] small { color: var(--accent-ink); opacity: .75; }
.seg button:not([aria-pressed="true"]):not(:disabled):hover { background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); }

/* 2. Przyciski dodawania (+ …) – klasa .add: wypełnione akcentem, pogrubione, większe */
button.add, .btn.add {
  font: 700 15px var(--f-display); letter-spacing: .03em; padding: 9px 14px; min-height: 0;
  border: 2px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / .25); cursor: pointer; white-space: nowrap;
}
button.add:hover, .btn.add:hover { filter: brightness(1.08); box-shadow: 0 2px 6px rgb(0 0 0 / .3); border-color: var(--accent); }
button.add:focus-visible, .btn.add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.add.sm, .btn.add.sm { font-size: 14px; padding: 6px 12px; }
button.add:disabled, .btn.add:disabled { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }
/* „−” w stepperze – ten sam kształt, bez wypełnienia */
button.add.minus, .btn.add.minus { background: var(--sheet); color: var(--ink); box-shadow: none; }

/* 3. Przycisk główny akcji (.btn.primary) – akcent, pogrubiony */
.btn.primary { font-weight: 700; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }

/* 4. Usuwanie (.del) – obramowane, pogrubione, kolor błędu */
button.del, .btn.del { font-weight: 700; color: var(--bad); }
button.del:not(.ghost) { border: 2px solid var(--line); }
.typebar .chip.new.add { border-style: solid; border-radius: 999px; }

/* 5. Znaczniki nagłówka (U9, 06.11.2026) – „Analiza własna – oszacowanie” drobnym szarym tekstem, jak w Zawiesiach instalacyjnych */
.tag[data-wersja] { display: none; }   /* znacznik wersji usunięty z nagłówków (Mateusz 09.11.2026) – atrybut zostaje dla mapy WERSJE */
.tag.tag-est, .tag[title^="Analiza własna"] { background: none; border: 0; color: var(--muted); font-weight: 500; font-size: 10px; letter-spacing: .04em; padding: 0; }

/* 6. Układ siatki modułów jak w Zawiesiach instalacyjnych (07.11.2026). Strony z <main> > nav.typebar + .work (schemat + panel boczny .sidecol) + .right
   (ramy instalacyjne R1–R5, ramy pod maszyny, punkty stałe) – ten sam układ co .work w mocowania-v02: szerokość 1240 px, schemat 2/3 i panel boczny 1/3,
   oba przyklejone pod nagłówkiem (--barh z naglowek.js), panel boczny przewijany wewnątrz; Wyniki, Zestawienie… (.right) pod spodem na całą szerokość. */
body:has(main > .work) .bar-in { max-width: 1240px; }
main:has(> .work) { max-width: 1240px; grid-template-columns: minmax(0, 1fr); }
main > .work { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); gap: 16px; align-items: start; min-width: 0; }
main > .work > section[aria-labelledby^="h-sch"] { position: sticky; top: var(--barh, 64px); min-height: calc(100vh - var(--barh, 64px) - 16px); }
main > .work > .sidecol { position: sticky; top: var(--barh, 64px); max-height: calc(100vh - var(--barh, 64px) - 16px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 900px) {
  main > .work { grid-template-columns: minmax(0, 1fr); }
  main > .work > section[aria-labelledby^="h-sch"], main > .work > .sidecol { position: static; min-height: 0; max-height: none; overflow: visible; }
}

/* 7. Warstwy rysunku i przełączniki przy schemacie (Mateusz 09.11.2026) – stan widoczny na pierwszy rzut oka, ten sam we wszystkich modułach:
   włączona = wypełnienie akcentem, pogrubienie, znacznik ✓, kwadrat w kolorze warstwy (--w-kol); wyłączona = przygaszona, przerywana ramka, pusty kwadrat.
   „Podgląd 3D” to akcja, nie przełącznik – bez znacznika, w pełnym kolorze (sekcja 8), odsunięta od warstw. */
.warstwy button { font: 600 11px var(--f-body); letter-spacing: .02em; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.warstwy button[data-wk], .vtools button[data-vis] { background: transparent; color: var(--muted); border: 1px dashed var(--line); opacity: .72; }
.warstwy button[data-wk]::before, .vtools button[data-vis]::before { content: ""; width: 9px; flex: none; font-weight: 700; line-height: 1; }
.warstwy button[data-wk] .sw, .vtools button[data-vis] .sw { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid currentColor; background: none; flex: none; box-sizing: border-box; }
.warstwy button[data-wk]:hover, .vtools button[data-vis]:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 14%, var(--sheet)); }
.warstwy button[data-wk][aria-pressed="true"], .vtools button[data-vis][aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 700; opacity: 1; }
.warstwy button[data-wk][aria-pressed="true"]::before, .vtools button[data-vis][aria-pressed="true"]::before { content: "✓"; }
.warstwy button[data-wk][aria-pressed="true"] .sw, .vtools button[data-vis][aria-pressed="true"] .sw { background: var(--w-kol, currentColor); border-color: var(--accent-ink); }
.warstwy button[data-wk][aria-pressed="true"]:hover, .vtools button[data-vis][aria-pressed="true"]:hover { filter: brightness(1.08); background: var(--accent); }
.warstwy button[data-podglad-legenda] { margin-left: 8px; }

/* 8. Wszystko, co da się kliknąć, jest żółte (Mateusz 09.11.2026) – przyciski, zakładki, listy rozwijane, strzałki rozwijania we wszystkich modułach.
   Pełny żółty = przycisk akcji, lista rozwijana, opcja wybrana. Jasne żółte tło i żółta ramka = opcja lub zakładka niewybrana. Szary = nieaktywny (nie da się kliknąć).
   !important celowo: lokalne style stron i style wstawiane przez skrypty wspólne ładują się różnie względem tego pliku. Tylko ekran – bez wpływu na wydruk.
   --klik: żółty złagodzony względem akcentu (schemat i wyróżnienia zostają mocne); mniejsze pisma, żeby napisy mieściły się w obrysie (Mateusz 09.11.2026). */
@media screen {
  :root { --klik: color-mix(in srgb, var(--accent) 62%, var(--sheet)); }
  button, .btn, a.tabl { line-height: 1.15; }
  .btn, label.btn, button.add, .btn.add, button.del, .chip, .sprtog, .kfg-prz button, .kfg-szcz button, .kfg-plik button { font-size: 13px !important; }
  .btn.sm, button.add.sm, .btn.add.sm, button.del.sm { font-size: 12.5px !important; }
  .seg button { font-size: 12.5px !important; letter-spacing: 0 !important; padding-left: 3px !important; padding-right: 3px !important; }
  .pickbtn { font-size: 12px !important; }
  nav.tabs button, nav.tabs a, .gtabs button { font-size: 14px !important; }
  select { font-size: 12.5px !important; text-overflow: ellipsis; padding-left: 5px !important; }
  :is(button, select, .btn, a.tabl, a.kfg-home):not(:disabled) { background-color: var(--klik) !important; color: var(--accent-ink) !important; border-color: var(--klik) !important; }
  :is(button, .btn, a.tabl, a.kfg-home):not(:disabled):hover { filter: brightness(1.08); }
  input[type="file"]:not(:disabled)::file-selector-button { background-color: var(--klik); color: var(--accent-ink); border: 1px solid var(--klik); border-radius: 5px; font-weight: 700; cursor: pointer; }
  input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--klik); }
  select option, select optgroup { background-color: var(--sheet); color: var(--ink); }

  :is(.seg button:not([aria-pressed="true"]), .btn[aria-pressed="false"], button[aria-pressed="false"], button[aria-selected="false"], nav.typebar a.tabl, nav.typebar a.btn, .chip:not(.on):not(.add):not([data-typ-nowy]), .dop-drzewo button:not(.on)):not(:disabled) {
    background-color: color-mix(in srgb, var(--accent) 16%, var(--sheet)) !important; color: var(--ink) !important; border-color: var(--klik) !important; }
  :is(.seg button:not([aria-pressed="true"]), button[aria-pressed="false"], button[aria-selected="false"], nav.typebar a.tabl, nav.typebar a.btn, .chip:not(.on):not(.add):not([data-typ-nowy]), .dop-drzewo button:not(.on)):not(:disabled):hover { background-color: color-mix(in srgb, var(--accent) 40%, var(--sheet)) !important; filter: none; }
  .chip i, .chip b { color: inherit !important; }

  .warstwy button[data-wk][aria-pressed="false"], .vtools button[data-vis][aria-pressed="false"] { background-color: transparent !important; color: var(--muted) !important; border: 1px dashed var(--klik) !important; }

  :is(button, select, .btn):disabled { background-color: var(--sheet) !important; color: var(--muted) !important; border-color: var(--line) !important; box-shadow: none !important; }

  .acc > summary::before { content: "" !important; display: inline-block; width: 22px !important; height: 22px; flex: none; align-self: center; box-sizing: border-box; border-radius: 5px; border: 1px solid var(--klik) !important;
    background: var(--klik) no-repeat center / 12px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2 L9 6 L4 10 z' fill='%2318212a'/%3E%3C/svg%3E") !important; }
  details.kfg-karta > summary::before, .kfg-dane > summary::before { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 4px; background: var(--klik) !important; color: var(--accent-ink) !important; }
}

/* Tabele – wszystkie moduły, karty rozwiązań, projekt, raporty (Mateusz 12.11.2026, standard szaty dok. 32 rozdz. 6.6):
   długi nagłówek łamany na kilka wierszy, kolumny liczbowe (.n) tak wąskie jak wartość, opis elementu dostaje resztę szerokości;
   tabela nie wystaje poza panel – szersza przewija się w .tablewrap */
.tablewrap { overflow-x: auto; max-width: 100%; }
table th { white-space: normal !important; overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; vertical-align: bottom; line-height: 1.2; }
table th.n, table td.n { width: 1%; }
table th.n { min-width: 7ch; }
table td.n { white-space: nowrap; }
table td:not(.n) { overflow-wrap: anywhere; }
table td.opis { text-align: right; }   /* opis w kolumnie wartości (np. „Dobrano” w karcie obciążenia) – łamany, nie poszerza karty */