/* Wspólne komponenty: jedno źródło wyglądu dla bloków, które strony miały skopiowane.
   Ładowane po style.css, a przed arkuszami stron — strony nadal nadpisują to, co mają własne. */

/* Karta / panel (K1 z katalogu): obramowanie, promień, tło --panel, cień, padding .85rem. Te same
   deklaracje miały panele wszystkich stron — jedno miejsce zamiast ośmiu kopii. */
.ui-card,
.char-skills,
.char-summary,
.char-setup-card,
.char-equip-main,
.char-equip-stats,
.char-equip-current,
.char-equip-card,
.pol-setup,
.pol-list,
.pol-summary,
.army-main,
.army-detail,
.handel-setup,
.handel-main,
.handel-detail,
.ships-setup,
.ships-main,
.ships-detail,
.wanderers-setup,
.wanderers-columns,
.wanderers-main,
.wanderers-detail,
.quests-setup,
.quests-main,
.quests-detail,
.ency-list-pane,
.ency-card-pane,
.ency-block,
.army-side,
.craft-side,
.craft-plot,
.craft-detail,
.craft-manual-browser,
.char-origin-panel,
.map-card,
.map-detail,
.taom-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  padding: 0.85rem;
  min-width: 0;
}

/* Pole tekstowe (F1 z katalogu): .ui-input i pole w .char-field miały te same deklaracje. */
.ui-input,
.char-field input {
  appearance: none;
  width: 100%;
  min-width: 0;
  background: rgba(36, 28, 20, 0.75);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-md);
  font: 500 var(--fs-base) var(--font-body);
  padding: 0.45rem 0.75rem;
}

/* Przycisk główny (P8/P9 z katalogu): ten sam wygląd na kowalu i w postaci. Rozmiar (padding, czcionka)
   zostaje w arkuszu strony, bo zależy od miejsca: zwarty rząd przycisków albo szeroki przycisk. */
.ui-btn-primary,
.char-save,
.craft-generate {
  background: var(--selected-bg);
  border: 1px solid var(--selected-border);
  border-radius: var(--radius-md);
  color: var(--accent-2);
  cursor: pointer;
}

.ui-btn-primary:hover:not(:disabled),
.char-save:hover:not(:disabled),
.craft-generate:hover:not(:disabled) {
  background: color-mix(in srgb, var(--selected-bg) 70%, var(--accent) 30%);
  color: #fff8f0;
}

/* Pierścień ogniskowania pól tekstowych (F1): pola bez własnego :focus dostawały domyślny pierścień
   przeglądarki; teraz mają ten sam co .ui-input. */
.craft-field input:focus-visible,
.craft-focus-sets input:focus-visible,
.craft-piece-search:focus-visible,
.wnd-threshold input:focus-visible,
.wnd-age input:focus-visible,
.army-plan-table input[type="number"]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Pigułka-przełącznik (Z9 z katalogu): .ui-chip i trzy kopie z innymi paddingami, rozmiarem czcionki i tłem.
   Jawny line-height: przy `normal` Source Sans 3 siedzi w polu przycisku ok. 1 px za nisko (środek wersalików
   pod środkiem pola); przy 1.3 wypada na środku. Ten sam line-height mają zakładki, .ghost i przyciski główne.
   Padding symetryczny, bez --text-nudge: etykiety zaczynają się wielką literą („Ciężki”, „Postać”), a podniesienie
   o 1 px zostawiało je za wysoko. Tak samo w zakładkach i .ghost. */
.ui-chip,
.army-eq-tab,
.army-formation-pill,
.wnd-gear-mode-btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.24rem 0.58rem;
  background: rgba(20, 16, 12, 0.45);
  color: var(--muted);
  cursor: pointer;
  font: 600 var(--fs-sm) var(--font-body);
  line-height: 1.3;
}

/* :hover przed stanem zaznaczonym — zaznaczona pigułka zostaje w kolorze akcentu także pod kursorem. */
.ui-chip:hover,
.army-eq-tab:hover,
.army-formation-pill:hover,
.wnd-gear-mode-btn:hover {
  color: var(--ink);
}

/* Na dotyku pigułki mają ok. 36 px wysokości. */
@media (pointer: coarse) {
  .ui-chip,
  .army-eq-tab,
  .army-formation-pill,
  .wnd-gear-mode-btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
  }

  /* Rozciągnięty na cały wiersz (flex: 1) trzyma tekst na środku, jak przed zmianą display. */
  .wnd-gear-mode-btn {
    justify-content: center;
  }
}

/* Zakładki w szynie (Z3/Z4 z katalogu): karta jednostki i karta bohatera miały ten sam wygląd z innymi wartościami. */
.army-card-tabs,
.wnd-card-tabs {
  display: grid;
  /* Tyle kolumn, ile zakładek: jednostka ma 3, postać 2 — zawsze na całą szerokość. Kolumna nie jest węższa
     niż jej tekst (zakładki mają nowrap), więc „Umiejętności” nie jest ucinane w wąskiej karcie jednostki. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(min-content, 1fr);
  gap: 0.25rem;
  margin: 0.85rem 0 0.45rem;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(36, 28, 20, 0.45);
}

/* Czcionka jak w pigułkach (--fs-sm): zakładki miały .75rem i przy pigułkach pod nimi wyglądały na mniejsze. */
.army-card-tab,
.wnd-card-tab {
  appearance: none;
  padding: 0.35rem 0.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 var(--fs-sm) var(--font-body);
  line-height: 1.3;
}

/* Stan zaznaczony zakładek i przełączników (Z7 z katalogu): to samo tło, obramowanie i kolor
   miały zakładki kart, przełączniki puli, szybkie widoki i filtr chipów — jedno miejsce. */
.ui-tab.is-active,
.ui-chip[aria-pressed="true"],
.ui-chip.is-active,
.craft-tier-toggles button[aria-pressed="true"],
.army-card-tab.is-active,
.army-eq-tab.is-active,
.wnd-card-tab.is-active,
.wnd-gear-mode-btn.is-active,
.wnd-preset.is-active,
.army-formation-pill.is-active,
.taom-subtab.is-active {
  background: var(--selected-bg);
  border-color: var(--selected-border);
  color: var(--accent-2);
}

/* Baza tabeli danych: pełna szerokość, scalone obramowania komórek, rozmiar --fs-md. */
.ui-table,
.bubble .md table,
.craft-pieces,
.army-compare-table,
.army-plan-table,
.handel-table,
.ships-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

/* Tabela listy (T1/T6/T9 z katalogu): komórki i nagłówek według T1 (.wnd-table, lista bohaterów) —
   handel i okręty miały własne, nieco większe wymiary i węższy odstęp liter w nagłówku. */
.wnd-table th,
.wnd-table td,
.handel-table th,
.handel-table td,
.ships-table th,
.ships-table td {
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

/* Odstęp w nagłówku zostaje taki jak w komórkach; tylko .wnd-table ma niższy, własny
   (wiersze danych zostają przy .3rem/.45rem, nagłówek przy .2rem/.3rem). */
.wnd-table thead th,
.handel-table thead th,
.ships-table thead th {
  vertical-align: bottom;
  border-bottom-color: var(--accent-2);
  font-size: var(--fs-2xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.handel-table th,
.handel-table td,
.ships-table th,
.ships-table td {
  vertical-align: middle;
}

.handel-table td,
.ships-table td {
  font-variant-numeric: tabular-nums;
}

/* Nagłówki handlu i okrętów mogą się zawijać (w T1 stoją w jednej linii). */
.handel-table thead th,
.ships-table thead th {
  white-space: pre-line;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.handel-table tbody tr:hover,
.ships-table tbody tr:hover {
  background: rgba(232, 194, 122, 0.06);
}

/* Tabela z wyborem wiersza (Wędrowcy, Zadania, rankingi Wojska/Okrętów/Ekwipunku):
   przewija się w środku panelu, żeby nagłówek i pierwsza kolumna mogły się przyklejać.
   Limit wysokości daje .panel-main-scroll (style.css). Bez własnej ramki — obwódka panelu
   jest krawędzią tabeli. Ten blok stał w wanderers.css, choć korzystały z niego cztery
   zakładki; teraz jest w jednym miejscu, przed arkuszami stron. */
.wnd-table-wrap {
  overflow: auto;
}

/* Ostatni wiersz nie dokłada kreski pod spodem: dolną krawędź daje ramka panelu,
   a nad pagerem kreskę rysuje sam pager. */
.wnd-table tbody tr:last-child td {
  border-bottom: none;
}

.wnd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-md);
}

/* Komórki i nagłówek tabeli (padding, linie, typografia): patrz wyżej (list-table). */
.wnd-table th,
.wnd-table td {
  font-variant-numeric: tabular-nums;
}

.wnd-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--wnd-solid);
  padding: 0.2rem 0.3rem;
}

.wnd-table .wnd-first {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--wnd-solid);
  min-width: 9rem;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wnd-table thead .wnd-first {
  z-index: 3;
}

.wnd-table .wnd-num {
  text-align: right;
}

.wnd-table .wnd-center {
  text-align: center;
}

.wnd-table tbody tr {
  cursor: pointer;
}

.wnd-table tbody tr:hover td.wnd-first {
  background: var(--wnd-solid-hover);
}

.wnd-table tbody tr.is-selected td.wnd-first {
  background: var(--wnd-solid-selected);
}

.wnd-table tbody tr:hover td {
  box-shadow: inset 0 0 0 999px rgba(232, 194, 122, 0.06);
}

.wnd-table tbody tr.is-selected td {
  box-shadow: inset 0 0 0 999px rgba(232, 194, 122, 0.14);
}

.wnd-sort {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: 0;
  padding: 0.2rem 0.15rem;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.wnd-sort:hover,
.wnd-sort.is-active {
  color: var(--accent-2);
}

/* Nagłówki umiejętności: ikona zamiast pionowego tekstu — ~18–21 kolumn. */
.wnd-th-skill {
  width: 2.1rem;
  min-width: 2.1rem;
  text-align: center;
  vertical-align: bottom;
}

/* Strzałka sortowania obok ikony, a nie pod nią: pod spodem nagłówek rósł i tabela
   zmieniała wysokość po kliknięciu w umiejętność (dotyczy też rankingu Wojska). */
.wnd-th-skill .wnd-sort-skill {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  width: 100%;
  padding: 0.25rem 0.05rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-2xs);
  line-height: 1.1;
}

.wnd-skill-icon {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  object-fit: cover;
  background: rgba(36, 28, 20, 0.75);
}

.wnd-sort-skill.is-active .wnd-skill-icon {
  border-color: var(--accent-2);
}

.wnd-sort-mark {
  font-size: var(--fs-2xs);
  line-height: 1;
  color: var(--accent-2);
}

.wnd-skill-cell {
  text-align: center;
  min-width: 2.4rem;
}

.wnd-skill-cell.is-zero {
  color: var(--muted);
  opacity: 0.55;
}

.wnd-skill-cell.is-top {
  font-weight: 700;
  color: var(--accent-2);
}

.wnd-title-btn {
  max-width: calc(100% - 1.4rem);
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Szerokość równa miejscu zarezerwowanemu w .wnd-title-btn: sam znak ♂ jest węższy, więc
   najszerszy tytuł w kolumnie (np. „Lord klanu X (4)”) był ucinany o kilka pikseli i tracił numer. */
.wnd-sex {
  display: inline-block;
  width: 1.4rem;
  color: var(--muted);
}

.wnd-empty {
  padding: 1rem 0.85rem;
  color: var(--muted);
}

/* --- Tabela rankingu (Wojsko, Okręty, Ekwipunek) ---------------------------
   Jeden wiersz = jedna encja. Wygląd bierze z tabeli list powyżej (nagłówek, hover,
   zaznaczenie, sortowanie), więc kolory i wymiary są te same na trzech zakładkach.
   Tutaj tylko to, co wspólne dla rankingów, a nie dla pozostałych list. */

.ui-rank-table.wnd-table {
  /* Lity odpowiednik --panel (jak .wanderers-shell): przyklejony nagłówek i kolumna
     nazwy nie mogą przepuszczać treści. */
  --wnd-solid: #241c14;
  --wnd-solid-hover: #2f2519;
  --wnd-solid-selected: #3a2e1c;
  /* Tabela rośnie do szerokości treści, ale nie węższa niż panel: resztę kolumn
     przewija się w bok (jak w listach z wieloma kolumnami). */
  width: max-content;
  min-width: 100%;
}

/* Numer miejsca w rankingu: ten sam na trzech zakładkach. */
.ui-rank-table .ui-rank-pos {
  width: 2.2rem;
  min-width: 2.2rem;
  text-align: right;
  color: var(--muted);
  font-weight: 700;
}

/* Nagłówek liczb wyrównany do prawej, tekstów do lewej; klik działa na całą kolumnę. */
.ui-rank-table thead th.wnd-num .wnd-sort {
  width: 100%;
  justify-content: flex-end;
}

.ui-rank-table thead th.is-text .wnd-sort,
.ui-rank-table thead th.wnd-first .wnd-sort {
  width: 100%;
  justify-content: flex-start;
}

/* Nazwa encji w wierszu rankingu ma kolor akcentu jak w tabelach Wędrowców i Lordów
   (.army-link) — nie kolor linku encyklopedii, bo ten sugerowałby szufladę. Klik w nazwę
   i w cały wiersz idzie tą samą drogą (wireRankRows), więc nazwa nie jest osobną akcją;
   zostaje fokusowalna dla klawiatury. Globalny handler `a.ent-link` też jej nie łapie. */
.ui-rank-table .ui-rank-name {
  appearance: none;
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-xs);
  color: var(--accent-2);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.ui-rank-table .ui-rank-name:hover {
  text-decoration: underline;
}

.ui-rank-table .ui-rank-name:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

/* Rozwijana lista „Kolumny” w filtrach rankingów (app.js: createColumnsPicker) reużywa
   wyglądu filtrów Wojska (.army-filter* z army.css); [hidden] musi wygrać z display: grid. */
.ui-columns[hidden] {
  display: none;
}

/* Na telefonie numer miejsca tylko zwęża tabelę — nazwa i statystyki są ważniejsze. */
@media (max-width: 640px) {
  .ui-rank-table .ui-rank-pos {
    display: none;
  }
}

/* Kolumna kart (K1 z katalogu): panele ustawień, list i podsumowań układają dzieci w pionie z odstępem .7rem. */
.army-side,
.army-side-body,
.char-setup-card,
.char-summary,
.pol-setup,
.pol-summary,
.pol-list,
.wanderers-setup,
.wanderers-columns,
.handel-setup,
.ships-setup,
.quests-setup,
.craft-side,
.craft-manual-browser,
.map-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}