/* styl.css — arkusz serwisu „Zarobki po studiach”.
   Tokeny i nazwy klas przeniesione z „Dywidend z USA”, żeby oba serwisy
   wyglądały jak jedna rodzina i żeby dało się kiedyś scalić arkusze bez
   przepisywania HTML-u. Nowe klasy zaczynają się od .kier- i .wykres-. */

:root {
  --tlo: #fff;
  --tekst: #1c1e21;
  --przygaszony: #5b6167;
  --kreska: #dfe3e7;
  --kreska-pola: #767c82;
  --akcent: #0b5d3b;
  --akcent-jasny: #e8f3ee;
  --akcent-blady: #7fb79c;
  --alarm: #b3261e;
  --alarm-tlo: #fdeceb;
  --ostrzega: #8a5300;
  --ostrzega-tlo: #fdf3e2;
  --oprawa: 62rem;

  /* Ciemna zielen marki i cieple zloto jako akcent na ciemnym tle.
     Kolor idzie w rame serwisu - naglowek, stopke, naglowki tabel -
     a nie w dane. Wykresy zostaja spokojne, bo to one maja byc czytane. */
  --marka-tlo: #0d3327;
  --marka-tlo-2: #0a2a20;
  --marka-tekst: #eef4f1;
  --zloto: #e8c06a;

  /* Kolor jako kategoria, nie dekoracja: cztery odcienie odpowiadaja
     czterem rodzajom pytan, ktore zadaje czytelnik. Ten sam kolor wraca
     na stronach wewnetrznych, wiec uczy sie go raz. */
  --pieniadze: #0b5d3b;  --pieniadze-tlo: #e8f3ee;
  --pewnosc:   #1c5f7a;  --pewnosc-tlo:   #e6f0f5;
  --koszt:     #8a5300;  --koszt-tlo:     #fdf3e2;
  --nauka:     #6b3a6e;  --nauka-tlo:     #f3ebf4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.oprawa { max-width: var(--oprawa); margin: 0 auto; padding: 0 1.1rem; }

a { color: var(--akcent); }
a:hover { text-decoration: none; }

.pomin-menu {
  position: absolute; left: -9999px; top: 0;
  background: var(--akcent); color: #fff; padding: .6rem 1rem; z-index: 10;
}
.pomin-menu:focus { left: 0; }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
/* Na ciemnym pasku zielony obrys znika - tam swieci zlotem. */
.pasek :focus-visible, .stopka :focus-visible {
  outline-color: var(--zloto);
}

/* --- pasek --- */
.pasek {
  background: linear-gradient(180deg, var(--marka-tlo) 0%, var(--marka-tlo-2) 100%);
  border-bottom: 3px solid var(--zloto);
}
.pasek-tresc {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: center; justify-content: space-between; padding-block: .7rem;
}
.marka {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -.01em;
}
.marka .znak { color: var(--zloto); flex: none; }
.pasek nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.pasek nav a {
  color: rgba(238, 244, 241, .82); text-decoration: none; font-size: .95rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.pasek nav a:hover { color: #fff; border-bottom-color: rgba(232, 192, 106, .6); }
/* Zaznaczenie biezacej sekcji: bez tego siedem pozycji wyglada jak lista
   linkow, a nie jak nawigacja, w ktorej czytelnik gdzies jest. */
.pasek nav a[aria-current="page"] {
  color: #fff; font-weight: 600; border-bottom-color: var(--zloto);
}

/* --- okruszki --- */
.okruszki { font-size: .88rem; color: var(--przygaszony); margin-top: 1rem; }
.okruszki ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.okruszki li + li::before { content: "›"; margin-right: .4rem; color: var(--kreska); }

/* --- nagłówki --- */
main { padding-bottom: 3rem; }
.czolo { margin: 1.6rem 0 1.4rem; }
h1 { font-size: 1.85rem; line-height: 1.25; margin: .3rem 0 .6rem; }
h2 { font-size: 1.2rem; margin: 2.4rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.nadtytul { font-size: .9rem; color: var(--przygaszony); margin: 0; }
.wstep { font-size: 1.08rem; color: var(--przygaszony); max-width: 44rem; }
/* --- skróty do sekcji ------------------------------------------------ */
.skroty {
  display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: baseline;
  margin: 1.1rem 0 .4rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--kreska);
}
.skroty a {
  font-size: .88rem; text-decoration: none; padding: .18rem .55rem;
  border: 1px solid var(--kreska); border-radius: 1rem; color: var(--tekst);
}
.skroty a:hover { border-color: var(--akcent); color: var(--akcent); }
h2[id] { scroll-margin-top: 1rem; }

/* --- zajawki i listy rankingowe -------------------------------------- */
.zajawka {
  display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr);
  gap: 1.4rem; align-items: center; margin: 1.8rem 0;
  border-top: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska);
  padding: 1.4rem 0;
}
.zajawka h2 { margin-top: 0; }
.zajawka-wykres svg { width: 100%; height: auto; }
@media (max-width: 46rem) {
  .zajawka { grid-template-columns: 1fr; }
}
.guzik {
  display: inline-block; padding: .5rem .9rem; border-radius: .3rem;
  background: var(--akcent); color: #fff; text-decoration: none;
  font-size: .93rem; font-weight: 600;
}
.guzik:hover { background: #094a2f; text-decoration: none; }

.dwie-listy {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0 2rem; margin: 1.4rem 0;
}
.lista-rankingowa { list-style: none; counter-reset: poz; padding: 0; margin: 0; }
.lista-rankingowa li {
  counter-increment: poz; border-bottom: 1px solid var(--kreska);
  padding: .55rem 0 .55rem 1.8rem; position: relative; font-size: .94rem;
}
.lista-rankingowa li::before {
  content: counter(poz) "."; position: absolute; left: 0;
  color: var(--przygaszony); font-size: .85rem; top: .6rem;
}
.lista-rankingowa a { font-weight: 600; text-decoration: none; }
.lista-rankingowa a:hover { text-decoration: underline; }
.lista-rankingowa strong { margin-left: .4rem; }
.lista-rankingowa .kier-uczelnia,
.lista-rankingowa .drobne { display: block; }

/* --- uczelnie -------------------------------------------------------- */
.stronicowanie {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin: 1rem 0 1.6rem;
}
.strona {
  font: inherit; font-size: .9rem; padding: .35rem .7rem;
  border: 1px solid var(--kreska); background: var(--tlo);
  border-radius: .3rem; cursor: pointer; color: var(--tekst);
}
.strona:hover:not(:disabled) { border-color: var(--kreska-pola); }
.strona:disabled { opacity: .4; cursor: default; }
.strona-aktywna {
  background: var(--akcent); border-color: var(--akcent); color: #fff;
  font-weight: 600;
}
.legenda {
  list-style: none; padding: 0; margin: .2rem 0 1.6rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  font-size: .87rem; color: var(--przygaszony);
}
.legenda li { display: flex; align-items: center; gap: .4rem; }
.kropka {
  width: .7rem; height: .7rem; border-radius: 50%; display: inline-block;
}
.kropka-tak { background: var(--akcent); }
.kropka-nie { background: var(--alarm); }
.kropka-nic { background: #a8b0b6; }

/* --- analizy ------------------------------------------------------- */
.analiza-etykieta {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--akcent); font-weight: 600; margin: 0 0 .3rem;
}
.analizy-lista { list-style: none; padding: 0; margin: 1.4rem 0; }
.analizy-lista li {
  border-top: 1px solid var(--kreska); padding: 1.2rem 0;
  max-width: 46rem;
}
.analizy-lista li:last-child { border-bottom: 1px solid var(--kreska); }
.analizy-lista h2 { margin: 0 0 .4rem; font-size: 1.35rem; line-height: 1.25; }
.analizy-lista h2 a { text-decoration: none; }
.analizy-lista h2 a:hover { text-decoration: underline; }
.analizy-lista p { margin: 0 0 .35rem; }

.analiza h2 { margin-top: 2.2rem; }
.analiza p, .analiza .uwaga { max-width: 44rem; }
.analiza .uwaga p { margin: .5rem 0 0; }
.analiza .uwaga p:first-of-type { margin-top: .3rem; }

.metoda {
  border: 1px solid var(--kreska); border-radius: .35rem;
  padding: .9rem 1.1rem; font-size: .92rem; max-width: 44rem;
  color: var(--przygaszony);
}
.metoda p { margin: .5rem 0; }
.metoda p:first-child { margin-top: 0; }
.metoda p:last-child { margin-bottom: 0; }

.tabela-prosta { overflow-x: auto; margin: 1rem 0; max-width: 44rem; }
.tabela-prosta table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.tabela-prosta th, .tabela-prosta td {
  text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--kreska);
}
.tabela-prosta th { font-size: .82rem; color: var(--przygaszony); font-weight: 600; }
.tabela-prosta td.plus { color: var(--akcent); font-weight: 600; }
.tabela-prosta td.minus { color: var(--alarm); font-weight: 600; }

.wyroznione {
  border-left: 3px solid var(--akcent); background: var(--akcent-jasny);
  padding: .7rem .9rem; max-width: 44rem;
}
.sklad {
  font-size: .92rem; color: var(--przygaszony); max-width: 44rem;
  margin-top: .6rem; padding-left: .7rem;
  border-left: 2px solid var(--kreska);
}
.sklad-uwaga {
  border-left-color: var(--ostrzega); color: var(--ostrzega);
  background: var(--ostrzega-tlo); padding: .5rem .7rem; border-radius: .2rem;
}
.drobne { font-size: .87rem; color: var(--przygaszony); }
code {
  background: #f2f4f5; padding: .1rem .3rem; border-radius: .2rem;
  font-size: .9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- element sygnaturowy: rozstrzał między uczelniami ---
   To jest teza strony. Nie wielka liczba z podpisem, tylko 141 kropek na osi
   zarobków — czytelnik od razu widzi, że ta sama nazwa kierunku znaczy co
   innego w zależności od uczelni. */
.wykres-rozstrzal { margin: .6rem 0 .2rem; }
.wykres-rozstrzal svg { display: block; width: 100%; height: auto; }
.wykres-podpis { font-size: .87rem; color: var(--przygaszony); margin: .2rem 0 0; }

/* --- kafle liczbowe --- */
.kier-liczby {
  display: grid; gap: .8rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.kier-liczba {
  border: 1px solid var(--kreska); border-radius: .4rem; padding: .8rem .9rem;
  background: #fbfcfc;
}
.kier-liczba dt { font-size: .82rem; color: var(--przygaszony); margin: 0 0 .25rem; }
.kier-liczba dd { margin: 0; font-size: 1.45rem; font-weight: 600; line-height: 1.15; }
/* Kafle z zakresem mieszczą dwie liczby i jednostkę — mniejszy stopień pisma
   i twarda spacja przed „zł" trzymają je w jednym wierszu. */
.kier-liczba.zakres dd { font-size: 1.12rem; letter-spacing: -.01em; }
.kier-liczba .pod { display: block; font-size: .8rem; font-weight: 400; color: var(--przygaszony); margin-top: .2rem; }

/* --- tabela uczelni --- */
/* --- sterowanie tabelą (pojawia się tylko przy włączonym skrypcie) --- */
.kier-sterowanie {
  display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1.2rem;
  margin: 1rem 0 .3rem;
}
.kier-sterowanie[hidden] { display: none; }
.kier-szukaj { display: flex; flex-direction: column; gap: .2rem; }
.kier-szukaj select {
  font: inherit; padding: .4rem .5rem; background: #fff;
  border: 1px solid var(--kreska-pola); border-radius: .3rem;
}
.kier-skrot {
  border: 1px solid var(--kreska); border-left: 3px solid var(--akcent);
  border-radius: .35rem; padding: .7rem .9rem; margin: 1.2rem 0;
  font-size: .95rem;
}
.kier-skrot a { font-weight: 600; }
.kier-szukaj input {
  font: inherit; padding: .4rem .6rem; min-width: 16rem;
  border: 1px solid var(--kreska-pola); border-radius: .3rem; background: #fff;
}
#licznik { margin: 0 0 .4rem; }

button.sortuj {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--przygaszony);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
}
button.sortuj:hover { color: var(--akcent); text-decoration: underline; }
th[aria-sort="descending"] button.sortuj span::after { content: "\2193"; }
th[aria-sort="ascending"]  button.sortuj span::after { content: "\2191"; }
th[aria-sort="descending"] button.sortuj,
th[aria-sort="ascending"]  button.sortuj { color: var(--akcent); }

.kier-tabela-oprawa {
  overflow-x: auto; margin: .8rem 0;
  max-height: 40rem; overflow-y: auto; border: 1px solid var(--kreska);
  border-radius: .4rem;
  /* Cień przy prawej krawędzi, gdy jest co przewijać w bok. Na telefonie
     przy ośmiu kolumnach bez tego sygnału czytelnik nie wie, że dalej
     coś jest — a nie da się tych kolumn sensownie zwęzić.
     Sztuczka: dwa tła nieruchome (białe zasłonki przy krawędziach)
     i dwa przewijające się razem z treścią (cienie). Gdy nie ma czego
     przewijać, zasłonka zakrywa cień. */
  background:
    linear-gradient(to right, var(--tlo) 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), var(--tlo) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%,
      rgba(28,30,33,.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,
      rgba(28,30,33,.16), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Nagłówek zostaje w polu widzenia — przy 139 wierszach bez tego nie wiadomo,
   na którą kolumnę się patrzy. */
table.kier thead th { position: sticky; top: 0; background: var(--akcent-jasny); z-index: 1; }
table.kier tbody tr:nth-child(even) { background: #fafbfc; }
table.kier tbody tr:nth-child(even):hover { background: var(--akcent-jasny); }
table.kier { border-collapse: collapse; width: 100%; font-size: .93rem; }
table.kier th, table.kier td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--kreska);
  vertical-align: middle;
}
table.kier thead th {
  font-size: .82rem; color: #0a3d28; font-weight: 700;
  border-bottom: 2px solid var(--akcent-blady); white-space: nowrap;
}
table.kier td.liczba, table.kier th.liczba { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.kier tbody tr:hover { background: var(--akcent-jasny); }
.kier-uczelnia { display: block; font-size: .84rem; color: var(--przygaszony); }
.pasmo svg { display: block; }

/* --- znaczniki źródła i ostrzeżenia --- */
.znacznik {
  display: inline-block; font-size: .74rem; line-height: 1.4;
  padding: .05rem .4rem; border-radius: .8rem; white-space: nowrap;
}
.znacznik-dane { background: var(--akcent-jasny); color: var(--akcent); }
.znacznik-szacunek { background: var(--ostrzega-tlo); color: var(--ostrzega); }
td.szacowane { color: var(--przygaszony); }
.znacznik-uwaga {
  background: var(--ostrzega-tlo); color: var(--ostrzega);
  margin-top: .15rem; margin-right: .25rem;
}
/* Wiersz poza statystyką grupy — widoczny, ale wyraźnie inny. Lewa krawędź
   niesie informację, kolor sam nie wystarczy. */
tr.z-zastrzezeniem td:first-child { box-shadow: inset 3px 0 0 var(--ostrzega); }
tr.z-zastrzezeniem td.liczba { color: var(--przygaszony); }

/* Liczebność ma własną kolumnę, więc nie powtarzamy jej w znaczniku.
   Sygnał niesie sama komórka. */
td.proba-mala { color: var(--przygaszony); }
td.proba-bardzo-mala { color: var(--ostrzega); }
.pod-naglowek {
  display: block; font-weight: 400; font-size: .72rem; line-height: 1.25;
  color: var(--przygaszony); text-transform: none;
}
.pod-liczba-szara {
  display: block; font-size: .72rem; font-weight: 400; line-height: 1.3;
  color: var(--przygaszony);
}
.pod-liczba {
  display: block; font-size: .72rem; font-weight: 400; line-height: 1.3;
  color: var(--ostrzega);
}
.znacznik-brak { background: #f2f4f5; color: var(--przygaszony); }

.uwaga {
  border-left: 3px solid var(--ostrzega); background: var(--ostrzega-tlo);
  padding: .7rem .9rem; margin: 1.1rem 0; font-size: .93rem;
}
.uwaga strong { display: block; margin-bottom: .2rem; }
/* Druga ramka pod pierwszą - ta sama waga wizualna zrobiłaby ścianę
   ostrzeżeń, w której czytelnik przestaje czytać obie. */
.uwaga-lagodna {
  border-left-color: var(--kreska-pola); background: #f6f7f8;
  color: var(--tekst);
}

.kier-rodzenstwo { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .4rem; }
.kier-rodzenstwo li {
  border: 1px solid var(--kreska); border-radius: .35rem; padding: .5rem .75rem;
  display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline;
}
.kier-rodzenstwo a { font-weight: 600; text-decoration: none; }
.kier-rodzenstwo a:hover { text-decoration: underline; }

.kier-czolowka {
  list-style: none; counter-reset: poz; padding: 0; margin: .8rem 0 1.6rem;
  display: grid; gap: .35rem;
}
.kier-czolowka li {
  counter-increment: poz; display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  align-items: baseline; padding: .5rem .75rem .5rem 2.2rem;
  border: 1px solid var(--kreska); border-radius: .35rem; position: relative;
}
.kier-czolowka li::before {
  content: counter(poz); position: absolute; left: .8rem;
  font-weight: 600; color: var(--akcent);
}
.kier-czolowka a { font-weight: 600; text-decoration: none; }
.kier-czolowka a:hover { text-decoration: underline; }
.kier-czolowka strong { margin-left: auto; color: var(--akcent); }

strong.zysk { color: var(--akcent); }
strong.strata { color: var(--alarm); }

.metoda { font-size: .9rem; color: var(--przygaszony); }
.metoda li { margin-bottom: .45rem; }

.stopka {
  background: var(--marka-tlo); border-top: 3px solid var(--zloto);
  margin-top: 2.5rem; padding: 1.6rem 0 2.2rem; font-size: .87rem;
  color: rgba(238, 244, 241, .78);
}
.stopka a { color: var(--zloto); }

@media (max-width: 40rem) {
  h1 { font-size: 1.5rem; }
  .kier-liczba dd { font-size: 1.25rem; }
  table.kier { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* --- panel szczegółów po kliknięciu w punkt wykresu --- */
dialog.panel {
  border: 1px solid var(--kreska); border-radius: .5rem; padding: 1.3rem 1.4rem;
  max-width: 26rem; width: calc(100% - 2rem); color: var(--tekst);
  box-shadow: 0 12px 40px rgba(28, 30, 33, .18);
}
dialog.panel::backdrop { background: rgba(28, 30, 33, .45); }
.panel-zamknij {
  position: absolute; top: .5rem; right: .6rem; border: 0; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--przygaszony); cursor: pointer;
  padding: .1rem .35rem; border-radius: .25rem;
}
.panel-zamknij:hover { color: var(--tekst); background: #f2f4f5; }
.panel-tytul { font-size: 1.1rem; margin: 0 1.6rem .1rem 0; }
.panel-podtytul { margin: 0 0 .9rem; }
.panel-dane { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; }
.panel-dane dt { color: var(--przygaszony); font-size: .9rem; }
.panel-dane dd { margin: 0; font-weight: 600; text-align: right; }
.panel-dane dd.zysk { color: var(--akcent); }
.panel-dane dd.strata { color: var(--alarm); }

svg circle[data-tytul]:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }


/* --- strona glowna: czolo, kafle pytan, dowod ------------------------ */
.czolo-glowne {
  background: linear-gradient(170deg, #f3f8f5 0%, #fbfcfb 62%, #fff 100%);
  border-bottom: 1px solid var(--kreska); padding: 2.4rem 0 1.9rem;
}
.czolo-glowne h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.6rem); line-height: 1.12;
  margin: 0 0 .7rem; max-width: 24em; letter-spacing: -.015em;
}
.czolo-glowne h1 em { font-style: normal; color: var(--akcent); }
.czolo-glowne .lead {
  font-size: 1.1rem; color: var(--przygaszony); max-width: 38rem; margin: 0;
}
.szukajka-glowna { margin: 1.4rem 0 0; max-width: 40rem; position: relative; }
.szukajka-glowna input {
  width: 100%; font-size: 1.05rem; padding: .8rem 1rem .8rem 2.85rem;
  border: 2px solid var(--kreska-pola); border-radius: .45rem; background: #fff;
}
.szukajka-glowna input:focus {
  outline: none; border-color: var(--akcent);
  box-shadow: 0 0 0 3px var(--akcent-jasny);
}
.szukajka-glowna svg { position: absolute; left: .9rem; top: .9rem; }
.szukajka-glowna .podpowiedzi {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem;
  align-items: baseline;
}
.szukajka-glowna .podpowiedzi a {
  font-size: .87rem; padding: .26rem .7rem; background: #fff;
  border: 1px solid var(--kreska); border-radius: 1rem;
  text-decoration: none; color: var(--tekst);
}
.szukajka-glowna .podpowiedzi a:hover {
  border-color: var(--akcent); color: var(--akcent);
}
.zaufanie {
  display: flex; flex-wrap: wrap; gap: 1.7rem; margin: 1.7rem 0 0;
  padding-top: 1.2rem; border-top: 1px solid var(--kreska);
}
.zaufanie div { min-width: 7rem; }
.zaufanie dt { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.zaufanie dd { margin: .1rem 0 0; font-size: .84rem; color: var(--przygaszony); }

.pytania {
  display: grid; gap: 1rem; margin: 1.3rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.pytanie {
  border: 1px solid var(--kreska); border-top: 3px solid var(--pieniadze);
  border-radius: .5rem; padding: 1.1rem 1.2rem; text-decoration: none;
  color: var(--tekst); display: flex; flex-direction: column; gap: .35rem;
  background: #fff; transition: box-shadow .15s, transform .15s;
}
.pytanie:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(28, 30, 33, .09);
}
.pytanie .znak {
  width: 2rem; height: 2rem; border-radius: .4rem; display: grid;
  place-items: center; margin-bottom: .2rem;
}
.pytanie h3 { margin: 0; font-size: 1.08rem; line-height: 1.28; }
.pytanie p { margin: 0; font-size: .92rem; color: var(--przygaszony); }
.pytanie .odp { margin-top: auto; padding-top: .5rem; font-size: .87rem;
  font-weight: 600; }
.p-pieniadze { border-top-color: var(--pieniadze); }
.p-pieniadze .znak { background: var(--pieniadze-tlo); color: var(--pieniadze); }
.p-pieniadze .odp { color: var(--pieniadze); }
.p-pewnosc { border-top-color: var(--pewnosc); }
.p-pewnosc .znak { background: var(--pewnosc-tlo); color: var(--pewnosc); }
.p-pewnosc .odp { color: var(--pewnosc); }
.p-koszt { border-top-color: var(--koszt); }
.p-koszt .znak { background: var(--koszt-tlo); color: var(--koszt); }
.p-koszt .odp { color: var(--koszt); }
.p-nauka { border-top-color: var(--nauka); }
.p-nauka .znak { background: var(--nauka-tlo); color: var(--nauka); }
.p-nauka .odp { color: var(--nauka); }

.dowod {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr);
  gap: 1.8rem; align-items: center; margin: 2.2rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--kreska);
}
@media (max-width: 52rem) { .dowod { grid-template-columns: 1fr; } }
.dowod h2 { margin-top: 0; }
.dowod ul { list-style: none; padding: 0; margin: .8rem 0; }
.dowod li { padding: .35rem 0 .35rem 1.4rem; position: relative; font-size: .95rem; }
.dowod li::before { content: "\2192"; position: absolute; left: 0; color: var(--akcent); }
.dowod svg { width: 100%; height: auto; }


/* --- oprawa strony glownej: rytm sekcji ------------------------------ */
.pas-jasny {
  background: #f7f9f8; border-block: 1px solid var(--kreska);
  padding: 2.2rem 0; margin: 2.4rem 0;
}
.pas-jasny > .oprawa > h2:first-child,
.pas-jasny .dowod { margin-top: 0; }
.pas-jasny .dowod { border-top: none; padding-top: 0; }

/* Nadtytul sekcji: maly kwadrat w kolorze kategorii przed naglowkiem.
   Tanio wprowadza kolor tam, gdzie strona byla sama typografia. */
h2.z-znacznikiem { display: flex; align-items: center; gap: .55rem; }
h2.z-znacznikiem::before {
  content: ""; width: .55rem; height: .55rem; border-radius: .12rem;
  background: var(--akcent); flex: none;
}

.zaufanie div { position: relative; padding-left: .8rem; }
.zaufanie div::before {
  content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
  width: 3px; border-radius: 2px; background: var(--akcent-blady);
}
.zaufanie div:nth-child(2)::before { background: #7fa8bd; }
.zaufanie div:nth-child(3)::before { background: #d6b478; }
.zaufanie div:nth-child(4)::before { background: #b192b5; }
.zaufanie dt { font-variant-numeric: tabular-nums; }

.pytanie .znak svg { width: 20px; height: 20px; }
.pytanie .odp::after { content: ""; }
.pytanie:hover .odp { text-decoration: underline; }
.pytanie h3 { letter-spacing: -.01em; }

/* Wykres na stronie glownej dostaje ramke i tlo, zeby nie wisial w bieli. */
.dowod > div:last-child {
  background: #fff; border: 1px solid var(--kreska); border-radius: .5rem;
  padding: .8rem;
}


/* --- kolor w ramie, nie w danych ------------------------------------- */
/* Kafle z liczbami: delikatny odcien i kreska w kolorze akcentu zamiast
   szarej ramki. Bez tego caly serwis wyglada jak wydruk. */
.kier-liczba {
  background: linear-gradient(160deg, var(--akcent-jasny) 0%, #fbfcfc 70%);
  border-color: var(--akcent-blady);
}
.kier-liczba dt { color: #0a3d28; font-weight: 600; }

/* Czolo strony wewnetrznej dostaje ten sam tinted pas co strona glowna,
   zeby serwis byl spojny, a nie kolorowy tylko na wejsciu. */
/* Naglowek strony byl pudelkiem, sekcja nizej drugim, zdanie w srodku
   trzecim - trzy poziomy ramek w jednym ekranie. Zostaje sama kreska
   po lewej: kolor jest, zagniezdzenia nie ma. */
.okruszki + main > .czolo,
main > .czolo:first-child {
  border-left: 4px solid var(--akcent); padding: .1rem 0 .1rem 1.1rem;
  margin-top: 1.4rem;
}
.nadtytul { color: var(--akcent); font-weight: 600; }

/* Zajawki i ramki uwag: mocniejsza lewa kreska, spokojne tlo. */
.uwaga { border-left-width: 4px; }
.wyroznione { border-left-width: 4px; }

/* Naglowki sekcji na stronach wewnetrznych tez dostaja znacznik. */
main h2 { position: relative; }

/* Guzik na ciemnym tle stopki i w pasach. */
.guzik { box-shadow: 0 1px 2px rgba(11, 93, 59, .25); }
.guzik:hover { box-shadow: 0 3px 8px rgba(11, 93, 59, .3); }

/* Sekcja analiz i listy rankingowe: numery w kolorze akcentu. */
.lista-rankingowa li::before { color: var(--akcent); font-weight: 700; }

@media (prefers-color-scheme: dark) {
  /* Serwis jest jasny z zalozenia - blokujemy tylko wymuszone
     przyciemnienie pol formularzy przez przegladarke. */
  input, select { background: #fff; color: var(--tekst); }
}


/* --- panel: ramka wielokrotnego uzytku ------------------------------- */
/* Ten sam ksztalt co czolo strony: jasny gradient, cienka ramka i gruba
   kreska po lewej w kolorze kategorii. Uzywany oszczednie - gdyby wszystko
   bylo w ramce, zadna by nie wyrozniala. */
.panel {
  background: linear-gradient(170deg, #f6f9f7 0%, #fdfdfd 100%);
  border: 1px solid var(--kreska); border-left: 4px solid var(--akcent);
  border-radius: .45rem; padding: 1.2rem 1.4rem; margin: 1.6rem 0;
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel-pewnosc {
  border-left-color: var(--pewnosc);
  background: linear-gradient(170deg, var(--pewnosc-tlo) 0%, #fdfdfd 72%);
}
.panel-pewnosc h2, .panel-pewnosc h3 { color: #123f52; }
.panel-nauka {
  border-left-color: var(--nauka);
  background: linear-gradient(170deg, var(--nauka-tlo) 0%, #fdfdfd 72%);
}
.panel-nauka h2, .panel-nauka h3 { color: #4d2a50; }
.panel-koszt {
  border-left-color: var(--koszt);
  background: linear-gradient(170deg, var(--koszt-tlo) 0%, #fdfdfd 72%);
}
.panel-koszt h2, .panel-koszt h3 { color: #6b4100; }
.panel-pieniadze { border-left-color: var(--pieniadze); }

/* Kafle pytan: tlo w kolorze kategorii zamiast bieli. */
.p-pieniadze { background: linear-gradient(165deg, var(--pieniadze-tlo) 0%, #fff 62%); }
.p-pewnosc   { background: linear-gradient(165deg, var(--pewnosc-tlo) 0%, #fff 62%); }
.p-koszt     { background: linear-gradient(165deg, var(--koszt-tlo) 0%, #fff 62%); }
.p-nauka     { background: linear-gradient(165deg, var(--nauka-tlo) 0%, #fff 62%); }
.pytanie .znak { background: #fff !important; }
.p-pieniadze .znak { box-shadow: inset 0 0 0 1px var(--pieniadze); }
.p-pewnosc .znak   { box-shadow: inset 0 0 0 1px var(--pewnosc); }
.p-koszt .znak     { box-shadow: inset 0 0 0 1px var(--koszt); }
.p-nauka .znak     { box-shadow: inset 0 0 0 1px var(--nauka); }

/* --- stopka z mapa serwisu ------------------------------------------- */
.stopka-siatka {
  display: grid; gap: 1.4rem 2.2rem; margin-bottom: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stopka-siatka h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--zloto); margin: 0 0 .5rem; font-weight: 600;
}
.stopka-siatka ul { list-style: none; margin: 0; padding: 0; }
.stopka-siatka li { padding: .16rem 0; }
.stopka-siatka a { color: rgba(238, 244, 241, .88); text-decoration: none; }
.stopka-siatka a:hover { color: #fff; text-decoration: underline; }
.stopka-dol { border-top: 1px solid rgba(238, 244, 241, .18); padding-top: 1rem; }


/* --- ramki nie moga sie zagniezdzac ---------------------------------- */
/* Wyroznienie wewnatrz panelu bylo pudelkiem w pudelku. W srodku panelu
   wystarczy mocniejszy tekst - panel juz sam wyroznia te tresc. */
.panel .wyroznione {
  background: none; border: none; border-left: 3px solid currentColor;
  padding: .2rem 0 .2rem .9rem; font-weight: 500; opacity: .95;
}
.panel-pewnosc .wyroznione { color: #123f52; }
.panel-nauka .wyroznione { color: #4d2a50; }
.panel-koszt .wyroznione { color: #6b4100; }
.panel .uwaga { border: none; border-left: 3px solid currentColor;
  background: rgba(255, 255, 255, .55); }
.panel .kier-liczba { background: rgba(255, 255, 255, .7); }
/* Dwie ramki obok siebie w siatce sa w porzadku - to porownanie.
   Ramka w ramce nie jest nigdy. */
.panel .panel { background: none; border: none; padding: 0; margin: 1rem 0; }


/* --- wyjasnienie rozwijane -------------------------------------------- */
.wyjasnienie {
  border: 1px solid var(--kreska); border-left: 4px solid var(--pewnosc);
  border-radius: .4rem; padding: .7rem 1rem; margin: .6rem 0 1.2rem;
  background: #fbfcfc; max-width: 44rem; font-size: .93rem;
}
.wyjasnienie summary {
  cursor: pointer; font-weight: 600; color: var(--pewnosc);
}
.wyjasnienie summary:hover { text-decoration: underline; }
.wyjasnienie p { margin: .7rem 0 0; color: var(--przygaszony); }
.wyjasnienie[open] summary { margin-bottom: .2rem; }


/* --- lista podpowiedzi wyszukiwarki ---------------------------------- */
.szukajka-glowna { position: relative; }
.podpowiedzi-lista {
  position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 20;
  background: #fff; border: 1px solid var(--kreska-pola); border-radius: .45rem;
  box-shadow: 0 8px 24px rgba(28, 30, 33, .14);
  list-style: none; margin: 0; padding: .25rem; max-height: 22rem;
  overflow-y: auto;
}
.podpowiedzi-lista li { margin: 0; }
.podpowiedzi-lista a {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .6rem; text-decoration: none; color: var(--tekst);
  border-radius: .3rem;
}
.podpowiedzi-lista a:hover,
.podpowiedzi-lista li.wybrany a { background: var(--akcent-jasny); }
.wynik-nazwa { font-weight: 600; }
.wynik-opis { font-size: .87rem; color: var(--przygaszony); }
/* Naglowek sekcji w liscie podpowiedzi. Zastapil etykiete przy kazdym
   wyniku: przy pogrupowanej liscie powtarzanie „kierunek" osiem razy
   pod naglowkiem „Kierunki" byloby szumem. */
.wynik-naglowek {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--przygaszony); padding: .5rem .6rem .2rem; font-weight: 600;
}
.podpowiedzi-lista li + .wynik-naglowek {
  border-top: 1px solid var(--kreska); margin-top: .25rem;
}
.podpowiedzi-pusto {
  margin: 0; padding: .7rem .6rem; font-size: .9rem;
  color: var(--przygaszony);
}


/* --- wiersz wskazany linkiem z wyszukiwarki --------------------------- */
/* Bez tego czytelnik trafia w srodek tabeli z pieciudziesiecioma wierszami
   i nie wie, ktory jest jego. */
table.kier tr:target {
  outline: 2px solid var(--akcent); outline-offset: -2px;
  background: var(--akcent-jasny) !important;
}
table.kier tr[id] { scroll-margin-top: 4rem; }


/* --- stopka rodzinna i strony informacyjne --------------------------- */
.stopka-rodzina {
  border-top: 1px solid rgba(238, 244, 241, .18);
  padding-top: 1.1rem; margin-bottom: 1.2rem;
}
.stopka-rodzina p { margin: 0 0 .6rem; max-width: 42rem; }
.stopka-rodzina a { color: var(--zloto); }
.stopka-rodzina ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
}
.stopka-rodzina li { font-size: .9rem; }
.stopka-rodzina li a { color: rgba(238, 244, 241, .88); text-decoration: none; }
.stopka-rodzina li a:hover { color: #fff; text-decoration: underline; }

.slownik { margin: 1.4rem 0; }
.slownik dt {
  font-weight: 600; margin-top: 1.1rem; color: var(--akcent);
  font-size: 1.02rem;
}
.slownik dd {
  margin: .25rem 0 0; padding-left: 1rem;
  border-left: 2px solid var(--kreska); color: var(--przygaszony);
}


/* --- menu: pozycje rzadsze pod „Więcej" ------------------------------ */
/* Dziesięć pozycji w jednym pasku zawija się na każdym ekranie poniżej
   laptopa. Element details działa bez skryptu, obsługuje klawiaturę
   i jest rozumiany przez czytniki ekranu. */
.menu-wiecej { position: relative; display: inline-block; }
.menu-wiecej summary {
  cursor: pointer; list-style: none; font-size: .95rem;
  color: rgba(238, 244, 241, .82); padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.menu-wiecej summary::-webkit-details-marker { display: none; }
.menu-wiecej summary::after { content: " ▾"; font-size: .8em; opacity: .7; }
.menu-wiecej summary:hover { color: #fff; }
.menu-wiecej summary[aria-current="page"] {
  color: #fff; font-weight: 600; border-bottom-color: var(--zloto);
}
.menu-lista {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
  background: var(--marka-tlo); border: 1px solid rgba(232, 192, 106, .35);
  border-radius: .4rem; padding: .35rem; min-width: 14rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.menu-lista a {
  padding: .45rem .7rem; border-radius: .25rem; border-bottom: none;
  white-space: nowrap;
}
.menu-lista a:hover { background: rgba(232, 192, 106, .14); color: #fff; }
.menu-lista a[aria-current="page"] { color: var(--zloto); font-weight: 600; }
@media (max-width: 40rem) {
  /* Na wąskim ekranie lista rozwija się w miejscu, bo okno wystające
     poza krawędź byłoby nie do użycia. */
  .menu-wiecej { display: block; width: 100%; }
  .menu-lista { position: static; box-shadow: none; margin-top: .3rem; }
}


/* --- odnośniki do serwisów siostrzanych ------------------------------ */
/* Wyraźnie oddzielone od treści własnej: czytelnik ma wiedzieć, że
   wychodzi poza ten serwis, zanim kliknie. */
.siostrzany {
  border-left: 3px solid var(--zloto); padding-left: .8rem;
  margin: 1.2rem 0;
}
.siostrzane {
  border-top: 1px solid var(--kreska); padding-top: 1.6rem;
  margin-top: 2.4rem; margin-bottom: 2rem;
}
.siostrzane > p { max-width: 44rem; color: var(--przygaszony); }
.siostrzane-siatka {
  display: grid; gap: .9rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.siostrzany-kafel {
  display: block; padding: 1rem 1.1rem; text-decoration: none;
  border: 1px solid var(--kreska); border-radius: .5rem;
  background: var(--tlo-cien); color: var(--tekst);
  transition: border-color .15s, transform .15s;
}
.siostrzany-kafel:hover {
  border-color: var(--akcent); transform: translateY(-2px);
}
.siostrzany-kafel strong {
  display: block; color: var(--akcent); margin-bottom: .3rem;
}
.siostrzany-kafel span {
  font-size: .92rem; color: var(--przygaszony); line-height: 1.5;
}


/* --- wydruk ----------------------------------------------------------- */
/* Rodzice kandydatów drukują strony kierunków i biorą je na rozmowę.
   Domyślny wydruk marnuje trzy strony na menu i stopkę, a tabele urywa
   w połowie. */
@media print {
  .pasek, .stopka, .skroty, .kier-sterowanie, .stronicowanie,
  .pomin-menu, .siostrzane, .podpowiedzi-lista, .menu-wiecej {
    display: none !important;
  }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  .oprawa { max-width: none; padding: 0; }

  /* Adres strony przy tytule - wydruk bez niego nie mówi, skąd pochodzi. */
  h1::after {
    content: " — finanseodczarowane.pl/zarobki-po-studiach";
    display: block; font-size: 9pt; font-weight: normal; color: #555;
    margin-top: .2rem;
  }

  /* Adres każdego odnośnika w nawiasie - na papierze link jest martwy. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 8.5pt; color: #555;
    word-break: break-all;
  }
  main a[href^="#"]::after, .okruszki a::after { content: ""; }

  /* Tabela nie może się urywać w połowie wiersza ani gubić nagłówka. */
  table { page-break-inside: auto; border-collapse: collapse; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .kier-tabela-oprawa { overflow: visible; }

  /* Sekcje zaczynają się na nowej stronie tylko wtedy, gdy inaczej
     zostałby sam nagłówek na dole kartki. */
  h2 { page-break-after: avoid; }
  .panel, .uwaga, dl.kier-liczby { page-break-inside: avoid; }

  /* Wykresy zostają - to one niosą treść - ale bez cieni i tła. */
  svg { max-width: 100%; height: auto; }
  .panel, .uwaga { background: none; border: 1px solid #999; }
}


/* --- pasy w pasach ---------------------------------------------------- */
/* Kilka elementów ma lewy pas: panel, cytat wyróżniony, uwaga, blok
   z wykresem. Gdy jeden wejdzie w drugi, powstaje drabinka trzech kresek
   obok siebie i nie wiadomo, co do czego należy.
   Zasada: pas ma tylko element najbardziej zewnętrzny. Wewnętrzne
   zaznaczamy odstępem i tłem, nie kolejną kreską. */
.panel .wyroznione,
.panel .uwaga,
.uwaga .wyroznione,
.wyroznione .uwaga,
.panel .panel,
.uwaga .uwaga {
  border-left: none;
  padding-left: 0;
}

/* Wewnątrz panelu wyróżnienie zaznaczamy samym odstępem i pogrubieniem. */
.panel .wyroznione {
  margin-top: .9rem; margin-bottom: 0;
  font-weight: 500;
}

/* Blok z wykresem wewnątrz panelu też nie potrzebuje własnej ramki. */
.panel .wykres-rozstrzal { border: none; padding-left: 0; padding-right: 0; }