/* Panel SEO — AbcWeb.pl. Jasny motyw, jedna kolumna treści, telefon (390 px) jako pełnoprawny widok. */
:root {
  --tlo: #f4f3f0; --karta: #fcfcfb; --tekst: #0b0b0b; --tekst-2: #52514e; --linia: #e4e3df;
  --akcent: #1c5cab; --seria: #2a78d6; --dobrze: #0b7a0b; --zle: #b02e2e; --wyroznienie: #eef5fd;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--akcent); }
h1 { font-size: 1.45rem; margin: 0; line-height: 1.25; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: .4rem 0; }

.naglowek { background: #10233f; color: #fff; }
.naglowek-wnetrze { max-width: 1200px; margin: 0 auto; padding: .8rem 1.2rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; }
.marka { font-weight: 650; font-size: 1.05rem; letter-spacing: .01em; }
.wyloguj button { background: transparent; color: #fff; border: 1px solid #ffffff66; border-radius: 6px;
  padding: .3rem .8rem; font: inherit; cursor: pointer; }
.menu { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem; display: flex; gap: .2rem; flex-wrap: wrap; }
.menu a { color: #dbe6f5; text-decoration: none; padding: .55rem .8rem; border-bottom: 3px solid transparent; }
.menu a[aria-current="page"] { color: #fff; border-bottom-color: #6da7ec; font-weight: 600; }
.menu a.wewn { color: #f6d58a; }

.tresc { max-width: 1200px; margin: 0 auto; padding: 1.2rem; }
.tytul-ekranu { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: .4rem; }
.wstep { color: var(--tekst-2); margin: .3rem 0 1rem; max-width: 70ch; }
.pomoc { color: var(--tekst-2); font-size: .85rem; margin: .6rem 0 0; }
.ostrzezenie { background: #fff4d6; border: 1px solid #f0d58a; padding: .5rem .8rem; border-radius: 8px; }
.komunikat { background: #fdecec; border: 1px solid #f2b8b8; padding: .5rem .8rem; border-radius: 8px; }

.wybor-miesiaca { display: flex; align-items: center; gap: .5rem; }
.wybor-miesiaca label { color: var(--tekst-2); font-size: .9rem; }
select, input, .wybor-miesiaca button, .formularz button { font: inherit; padding: .45rem .6rem;
  border: 1px solid #c9c8c2; border-radius: 6px; background: #fff; }
.formularz { display: grid; gap: .4rem; }
.formularz button, .przycisk { background: var(--akcent); color: #fff; border: 0; padding: .55rem 1rem;
  border-radius: 6px; text-decoration: none; display: inline-block; cursor: pointer; font-weight: 600; }
.formularz button { margin-top: .6rem; }

.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 1rem 1.1rem;
  margin-bottom: 1rem; }
.karta.waska { max-width: 420px; margin: 2rem auto; }
.kafle { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1rem; }
.kafel { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: .9rem 1rem; }
.kafel-nazwa { font-weight: 600; color: var(--tekst-2); font-size: .9rem; }
.kafel-wartosc { font-size: 1.9rem; font-weight: 650; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.kafel-zmiana { font-size: .9rem; font-weight: 600; }
.kafel-zmiana.lepiej { color: var(--dobrze); }
.kafel-zmiana.gorzej { color: var(--zle); }
.kafel-zmiana.bez-zmian { color: var(--tekst-2); }
.kafel-zmiana .przed { color: var(--tekst-2); font-weight: 400; }
.kafel-opis { color: var(--tekst-2); font-size: .8rem; margin-top: .3rem; }

.dwa-wykresy { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
figure { margin: 0; }
figcaption { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
svg.wykres { width: 100%; height: auto; display: block; max-width: 640px; }
.liczby summary { cursor: pointer; color: var(--akcent); margin-top: .6rem; }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linia);
  vertical-align: top; }
.tabela th { font-size: .8rem; color: var(--tekst-2); font-weight: 600; }
.tabela th.grupa { text-align: center; border-bottom: 2px solid var(--linia); }
.l { text-align: right !important; white-space: nowrap; }
.szare { color: var(--tekst-2); }
.zawijaj { overflow-wrap: anywhere; }
.tabela tr.nowy td { background: var(--wyroznienie); }
.data { display: block; color: var(--tekst-2); font-size: .8rem; }
.przewijana { overflow-x: auto; }
.gesta td, .gesta th { padding: .3rem .4rem; font-size: .85rem; }

.frazy { padding: .3rem .6rem; }
.fraza-naglowek, .fraza summary { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
  gap: .8rem; align-items: baseline; padding: .5rem .4rem; }
.fraza-naglowek { font-size: .8rem; font-weight: 600; color: var(--tekst-2); border-bottom: 2px solid var(--linia); }
.fraza { border-bottom: 1px solid var(--linia); }
.fraza summary { cursor: pointer; list-style: none; }
.fraza summary::-webkit-details-marker { display: none; }
.fraza summary:hover { background: #f1f0ec; }
.fraza-nazwa::before { content: "▸ "; color: var(--tekst-2); }
.fraza[open] .fraza-nazwa::before { content: "▾ "; }
.fraza-poz { font-weight: 650; font-variant-numeric: tabular-nums; }
.fraza-status { color: var(--tekst-2); }
.fraza-szczegoly { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem;
  padding: .4rem .4rem 1rem 1.2rem; }
.tydzien ul { margin: .2rem 0; padding-left: 1.1rem; }
.kontakty .tydzien { margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--linia); }

.stopka { max-width: 1200px; margin: 0 auto; padding: 1rem 1.2rem 2rem; color: var(--tekst-2); font-size: .85rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--linia); }

@media (max-width: 900px) {
  .kafle { grid-template-columns: 1fr 1fr; }
  .dwa-wykresy, .dwie-kolumny, .fraza-szczegoly { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .tresc { padding: .8rem; }
  h1 { font-size: 1.2rem; }
  .menu { padding: 0 .4rem; }  /* zawijanie zamiast przewijania — żadna zakładka nie jest ucięta */
  .menu a { white-space: nowrap; padding: .55rem .6rem; }
  .kafel-wartosc { font-size: 1.5rem; }
  .fraza-naglowek { grid-template-columns: minmax(0, 1fr) 3.5rem; }
  .fraza-naglowek span:last-child { display: none; }
  .fraza summary { grid-template-columns: minmax(0, 1fr) 3.5rem; row-gap: .1rem; }
  .fraza-status { grid-column: 1 / -1; font-size: .85rem; padding-left: 1rem; }
  .fraza-szczegoly { padding-left: .4rem; }
  /* Wpisy: tabela 7 kolumn → jedna kolumna z dwiema liniami liczb (miesiąc, od publikacji). */
  .tabela.wpisy thead, .tabela.wpisy td:not(:first-child) { display: none; }
  .tabela.wpisy .mobil { display: block; }
}
.mobil { display: none; color: var(--tekst-2); font-size: .85rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.fraza-szczegoly svg.wykres { max-width: 520px; }

/* Runda 2: kolory zmian na Pozycjach fraz jak na kaflach Wyników */
.fraza-status.lepiej { color: var(--dobrze); }
.fraza-status.gorzej { color: var(--zle); }
.suma-wpisow { margin: -.4rem 0 1rem; }
/* Mysz vs dotyk: „Najedź” / „Kliknij” na komputerze, „Dotknij” na telefonie */
.tylko-dotyk { display: none; }
@media (hover: none) { .tylko-dotyk { display: inline; } .tylko-mysz { display: none; } }
/* Zakładka wewnętrzna: tabela na szerokim ekranie (kolumna fraz nieściśnięta), karty na telefonie */
.kol-fraza { min-width: 16rem; }
.tylko-waski { display: none; }
.grupa-kart { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--tekst-2); }
.karta-frazy { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: .6rem .8rem;
  margin-bottom: .5rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.karta-frazy-nazwa { font-weight: 600; margin-bottom: .2rem; }
@media (max-width: 600px) { .tylko-szeroki { display: none; } .tylko-waski { display: block; } }
/* Długie nagłówki liczb („Wejścia we wrześniu 2026”) zawijają się — inaczej rozpychają tabelę na telefonie */
.tabela th.l { white-space: normal; }