/* ======================================================================
   WLC - style strony
   Kolejność bloków:
   01. Baza strony
   02. Modal komunikatów
   03. Panel audio
   04. Nagłówek
   05. Wyszukiwarka i panel nawigacji
   06. Filtry wierszy
   07. Wyszukiwanie i podświetlenia
   08. Tooltipy
   09. Tabela główna
   10. Wiersze tabeli L01-L23
   11. Stopka
   12. Przycisk przewijania
   13. Tryb nocny
   14. Widok mobilny
   ====================================================================== */

/* 01. Baza strony i przyciski wspólne */
body {
  background-color: #faf3e0;
}

button {
  padding: 8px 16px;
  background-color: #8b5e3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8rem;
}

button:hover {
  background-color: #5c3e26;
}

/* 02. Modal komunikatów */
#modalOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

#myMsgBox {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  padding: 20px;
  background: #e6d1b6;
  border: 4px double #333;
  border-radius: 8px;
  color: black;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  font-family: sans-serif;
  font-size: 14px;
  animation: fadeIn 0.25s ease-in-out;
  z-index: 10000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.msgbox-title {
  margin-bottom: 10px;
  font-weight: bold;
}

.msgbox-text {
  margin-bottom: 15px;
}

.msgbox-buttons {
  text-align: right;
}

.msgbox-btn {
  margin-left: 8px;
  padding: 5px 12px;
}

/* 03. Panel audio */
.panel_audio {
  max-width: 800px;
  margin: 0.1rem auto 0.2rem;
  padding: 0.2rem;
  background-color: #d2b48c;
  border: 2px solid #8b5e3c;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 87, 183, 0.15);
  text-align: center;
}

.audio-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.audio-player {
  flex: 1 1 auto;
  min-width: 250px;
  max-width: 100%;
  height: 28px;
}

.audio-speed {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 1rem;
}

.audio-speed label {
  color: #0057b7;
  font-size: 1.2rem;
}

#speed-range {
  width: 100px;
  accent-color: #0057b7;
}

#speed-value {
  min-width: 40px;
  color: black;
  text-align: right;
}

.play-button {
  display: inline-block;
  margin-top: 0.1rem;
  padding: 0.1rem;
  background-color: #8b5e3c;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.play-button:hover {
  background-color: #5c3e26;
}

/* 04. Nagłówek strony */
header {
  margin-top: 1rem;
  text-align: center;
}

header .Foto-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

header h1 {
  display: inline-block;
  margin: 15px 0;
  padding: 0.5rem 0.7rem;
  background-color: transparent;
  border: 2px solid #8b5e3c;
  border-radius: 6px;
  font-size: 1.3rem;
  font-weight: bold;
}

header .lewy-obrazek,
header .prawy-obrazek {
  width: 80px;
  height: auto;
  margin: 0 50px;
}

/* 05. Wyszukiwarka i panel nawigacji */
#kontener-ramek {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 12px;
}

#ramka-wyszukiwarki,
#ramka-panelu {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 2px;
  border: 2px solid #8b5e3c;
  border-radius: 8px;
}

#ramka-wyszukiwarki {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

#ramka-wyszukiwarki p {
  display: none;
}

#ramka-wyszukiwarki .input-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  align-items: center;
  gap: 3px;
  width: 100%;
}

#ramka-wyszukiwarki .jump-verse-container {
  width: 100%;
  margin-top: 0;
}

#ramka-wyszukiwarki #searchBox,
#ramka-wyszukiwarki #verseJumpBox {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  height: 32px;
  min-height: 32px;
  padding: 1px 6px;
  background-color: #fff;
  background-image: none;
  background-clip: padding-box;
  border: 1px solid #8b5e3c !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  outline: none;
  font-size: 13px;
}

#ramka-wyszukiwarki #searchBox:focus,
#ramka-wyszukiwarki #verseJumpBox:focus {
  border: 1px solid #8b5e3c !important;
  box-shadow: none !important;
  outline: none;
}

#ramka-wyszukiwarki .input-container button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0 !important;
}

#ramka-wyszukiwarki #jumpVerseBtn {
  grid-column: 2 / 4;
}

#ramka-wyszukiwarki button,
#ramka-wyszukiwarki #jumpVerseBtn,
#ramka-panelu .przycisk-nawigacji,
#ramka-panelu select.przycisk-nawigacji,
#themeToggleButton.theme-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 1px 7px;
  text-align: center;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1;
}

#ramka-panelu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 0;
}

.przyciski-nawigacji,
#ramka-panelu .przyciski-nawigacji {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.wiersz-przyciskow,
#ramka-panelu .wiersz-przyciskow {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.przycisk-nawigacji,
select.przycisk-nawigacji {
  display: inline-block;
  padding: 7px 16px;
  background-color: #8b5e3c;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  text-decoration: none;
}

.przycisk-nawigacji {
  font-size: 0.8rem;
}

select.przycisk-nawigacji {
  font-size: 0.7rem;
}

#ramka-panelu .przycisk-nawigacji,
#ramka-panelu select.przycisk-nawigacji,
#themeToggleButton.theme-toggle-button {
  flex: 1 1 0;
  min-width: 0;
}

#ramka-panelu select.przycisk-nawigacji {
  padding-top: 1px;
  padding-bottom: 1px;
  text-align-last: center;
}

.przycisk-nawigacji:hover {
  background-color: #5c3e26;
}

#themeToggleButton.theme-toggle-button {
  min-width: 130px;
}

/* 06. Filtry wierszy */
.filtry-i-przyciski {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: auto;
  margin: 24px auto 10px;
  font-size: 15px;
}

#filtry-wierszy {
  margin: 24px 0 8px 46px;
  padding: 0;
  text-align: left;
  font-size: 15px;
}

#filtry-wierszy p {
  display: inline-block;
  margin: 0 12px 0 0;
  font-size: 15px;
}

#filtry-wierszy label {
  display: inline-block;
  margin: 0 9px 0 0;
  font-size: 15px;
  line-height: 1.8;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 16px;
  height: 16px;
  background-color: #8b5e3c;
  border: 2px solid #8b5e3c;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="checkbox"]:checked {
  background-color: #8b5e3c;
}

input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
}

input[type="checkbox"]:hover {
  background-color: #d2b48c;
}

#filtry-wierszy input[type="checkbox"] {
  margin-right: 4px;
  transform: scale(0.9);
  transform-origin: center;
}

.checkbox-button,
#filtry-wierszy .checkbox-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 1px 7px;
  background-color: #8b5e3c;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.05;
  transition: background-color 0.2s ease;
}

.checkbox-button:hover {
  background-color: #5c3e26;
}

.tooltip-toggle-row {
  display: inline-block;
  margin: 0 8px 0 0;
}

#content,
#tabela-glowna {
  margin-top: 0;
}

/* 07. Wyszukiwanie i podświetlenia */
.highlight,
.highlight-match {
  font-weight: bold;
}

.highlight {
  color: red;
}

.highlight-match,
.highlight-1 {
  background-color: yellow;
  color: black;
}

.highlight-2 {
  background-color: lightgreen;
  color: black;
}

.highlight-3 {
  background-color: orange;
  color: black;
}

.highlight-4 {
  background-color: lightblue;
  color: black;
}

.highlight-5 {
  background-color: pink;
  color: black;
}

.highlight-6 {
  background-color: violet;
  color: black;
}

.current-search-result {
  outline: 3px solid #2f7d32;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.16);
}

.search-floating-panel {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 100080;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 248, 234, 0.98);
  border: 2px solid #8b5e3c;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(43, 29, 14, 0.18);
  backdrop-filter: blur(3px);
}

.search-floating-panel[hidden] {
  display: none !important;
}

.search-floating-status {
  min-width: 118px;
  color: #5c3e26;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
}

.search-floating-actions {
  display: flex;
  gap: 6px;
}

.search-floating-actions button {
  min-width: 42px;
  padding: 6px 10px;
  line-height: 1;
}

.verse-jump-target td {
  outline: 2px solid #0057b7;
  background-color: #fff1a8 !important;
}

/* 08. Tooltipy */
.tooltip {
  position: relative;
  cursor: help;
}

.tooltip span {
  display: none;
  position: absolute;
  top: 1.5em;
  left: 0;
  z-index: 100;
  padding: 5px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.tooltip:hover span {
  display: block;
}

body.tooltips-disabled a.tooltip span,
body.tooltips-disabled .tooltip span {
  display: none !important;
}

/* Codex WLC L10 text tooltips */
tr.L10 .l10-tooltip {
  color: inherit;
  text-decoration: none;
  cursor: help;
}

tr.L10 .l10-tooltip > span {
  width: 260px;
  max-width: 320px;
  white-space: normal;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.25;
}

/* 09. Tabela główna */
.tabela-glowna {
  width: auto;
  max-width: 90%;
  margin: 4px auto 0;
  border: 1px solid black;
  border-collapse: collapse;
}

.tabela-glowna,
.tabela-glowna th,
.tabela-glowna td {
  border: 1px solid black;
}

td {
  padding: 4px;
}

td:nth-child(2) {
  width: 1%;
  white-space: nowrap;
}

td:not(:empty) {
  border: 1px solid #000;
}

.ukryta-komorka {
  display: none;
}

@font-face {
  font-family: 'BWtransh';
  src: url('bwtransh.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ezra SIL SR';
  src: url('Ezra SIL SR Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 10. Wiersze tabeli L01-L23 */
tr.L01 td,
tr.L02 td,
tr.L03 td,
tr.L04 td,
tr.L05 td,
tr.L06 td,
tr.L07 td,
tr.L08 td,
tr.L09 td,
tr.L10 td,
tr.L11 td,
tr.L12 td,
tr.L13 td,
tr.L14 td,
tr.L15 td,
tr.L16 td,
tr.L17 td,
tr.L18 td,
tr.L19 td,
tr.L20 td,
tr.L21 td,
tr.L22 td {
  padding: 3px 6px;
  font-size: 14px;
}

/* Codex WLC standard first two columns */
.tabela-glowna td:first-child,
.tabela-glowna td:nth-child(2) {
  padding: 3px 6px;
  white-space: nowrap;
  font-size: 14px !important;
}

/* Codex WLC standard font outside BWtransh rows */
.tabela-glowna tr:not(.L07):not(.L09):not(.L11):not(.L15) td:nth-child(n+3) {
  font-family: inherit;
}

/* L01 - tekst główny AI */
/* Codex WLC L01 LXX L05 background */
tr.L01 td {
  background-color: #E9D8B9;
}

/* L02 - tekst z numerami Stronga */

/* L03 - tekst BT4 */
tr.L03 td:nth-child(n+3) {
  white-space: nowrap;
  font-size: 14px;
  font-weight: normal;
}

/* L04 - tekst BT4 z linkami Stronga */
tr.L04 td,
tr.L04 td a {
  font-family: inherit;
  font-size: 14px !important;
  font-weight: normal;
}

/* L05 - transliteracja z czerwonymi nawiasami w tekście */

/* L06 - dodatkowa gramatyka; nawiasy czerwone */
/* L06 nawiasy czerwone */
tr.L06 .l06-paren-red {
  color: #ff0000;
  font-weight: bold;
}

/* L07 - hebrajski, wersja wyróżniona */
tr.L07 td {
  background-color: #E9D8B9;
}

tr.L07 td:nth-child(n+3) {
  font-family: 'Ezra SIL SR', 'Ezra SIL', 'SBL Hebrew', serif;
  font-size: 24px;
  font-weight: bold;
}

/* L08 - polskie odpowiedniki słów */
/* Codex WLC L08 red text */
tr.L08 td:nth-child(n+3) {
  color: #ff0000;
  font-weight: bold;
}

/* L09 - hebrajski z oznaczeniami */
tr.L09 td:nth-child(n+3) {
  font-family: 'Ezra SIL SR', 'Ezra SIL', 'SBL Hebrew', serif;
  font-size: 24px;
  font-weight: bold;
}

/* L10 - kod gramatyczny z tooltipem */

/* L11 - transliteracja czcionką BWtransh */
/* Codex WLC BWtransh rows */
tr.L11 td:nth-child(n+3) {
  font-family: 'BWtransh', sans-serif;
}

/* L12 - numery Stronga */

/* L13 - angielskie odpowiedniki */
/* Codex WLC L13 standard size */
tr.L13 td {
  padding: 3px 6px;
  font-size: 14px;
}

/* Codex WLC no wrapping in L03 and L13 */
tr.L03 td:nth-child(n+3),
tr.L13 td:nth-child(n+3) {
  white-space: nowrap;
}

tr.L13 td:nth-child(n+3) {
  font-family: inherit;
}

/* L14 - transliteracja */

/* L15 - hebrajski */
tr.L15 td:nth-child(n+3) {
  font-family: 'Ezra SIL SR', 'Ezra SIL', 'SBL Hebrew', serif;
  font-size: 24px;
  font-weight: bold;
}

/* L16 - transliteracja; nawiasy czerwone */
/* Codex WLC red parenthesized fragments */
tr.L16 .paren-red {
  color: #ff0000;
  font-weight: bold;
}

/* L17 - forma podstawowa */
/* Codex WLC L17 normal row */
tr.L17 td {
  height: auto;
  padding: 3px 6px;
  border: 1px solid black !important;
  color: inherit !important;
  font-size: 14px;
}

tr.L17 td:first-child,
tr.L17 td:nth-child(2) {
  white-space: nowrap;
  color: inherit !important;
  font-size: 14px !important;
}

/* L18-L22 - dodatkowe linie danych */
/* Codex WLC new L18-L23 rows */
tr.L18 td,
tr.L19 td,
tr.L20 td,
tr.L21 td,
tr.L22 td {
  padding: 3px 6px;
  font-size: 14px;
}

/* L23 - wizualny odstęp między wersetami */
tr.L23 td {
  height: auto;
  padding: 3px 6px;
  background-color: #faf3e0;
  border: none !important;
  color: transparent !important;
  font-size: 14px !important;
}

/* Pierwsze dwie kolumny bez bold w L07/L09/L15 */
tr.L07 td:nth-child(-n+2),
tr.L09 td:nth-child(-n+2),
tr.L15 td:nth-child(-n+2),
tr.L07 td:nth-child(2) a,
tr.L09 td:nth-child(2) a,
tr.L15 td:nth-child(2) a {
  font-size: 14px !important;
  font-weight: normal !important;
}

/* 11. Stopka */
.Cezary_Podolski {
  margin-top: 2rem;
  padding: 1rem 0;
  color: #444;
  text-align: center;
  font-size: 0.9rem;
}

.Stopka {
  margin-top: 20px;
  padding: 20px;
  background-color: #E9D8B9;
  border-top: 2px solid #ccc;
  font-family: "Segoe UI", sans-serif;
}

.stopka-title {
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 1px;
  color: #444;
  text-align: center;
  font-size: 18px;
}

.stopka-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.stopka-grid a {
  color: #336699;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  transition: color 0.3s;
}

.stopka-grid a:hover {
  color: #003366;
  text-decoration: underline;
}

/* 12. Przycisk przewijania do góry */
.scroll-top-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  width: 42px;
  height: 42px;
  background: #d2b48c;
  border: 2px solid #8b5e3c;
  border-radius: 50%;
  color: #2d1b10;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top-btn:hover {
  transform: translateY(-2px);
}

/* 13. Tryb nocny */
body.theme-night {
  background-color: #181a1f;
  color: #e8e0cf;
}

body.theme-night #myMsgBox,
body.theme-night #ramka-wyszukiwarki,
body.theme-night #ramka-panelu,
body.theme-night .panel_audio,
body.theme-night .filtry-i-przyciski {
  background-color: #2a2520;
  border-color: #b48a58;
  color: #f1e6d2;
}

body.theme-night header h1,
body.theme-night .Cezary_Podolski {
  color: #f1e6d2;
}

body.theme-night .tabela-glowna td {
  background-color: #24272d;
  border-color: #6f5a40;
  color: #f1e6d2;
}

body.theme-night .tabela-glowna tr:nth-child(even) td {
  background-color: #202329;
}

body.theme-night tr.L01 td,
body.theme-night tr.L07 td {
  background-color: #E9D8B9;
}

body.theme-night tr.L06 .l06-paren-red,
body.theme-night tr.L08 td:nth-child(n+3),
body.theme-night tr.L16 .paren-red {
  color: #ff0000;
}

body.theme-night a,
body.theme-night a.tooltip {
  color: #8fc7ff;
}

body.theme-night input,
body.theme-night select,
body.theme-night button,
body.theme-night .przycisk-nawigacji {
  background-color: #1f232b;
  border-color: #b48a58;
  color: #f1e6d2;
}

body.theme-night .scroll-top-btn {
  background: #2f3540;
  border-color: #b48a58;
  color: #f1e6d2;
}

body.theme-night .search-floating-panel {
  background: #241b14;
  border-color: #8c6b49;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

body.theme-night .search-floating-status {
  color: #f0e7d8;
}

/* 14. Widok mobilny */
@media (max-width: 900px) {
  #kontener-ramek {
    flex-wrap: wrap;
    padding: 0 10px;
  }

  #ramka-wyszukiwarki,
  #ramka-panelu {
    flex-basis: 100%;
  }
}

@media (max-width: 620px) {
  #ramka-wyszukiwarki .input-container {
    grid-template-columns: 1fr;
  }

  #ramka-wyszukiwarki #jumpVerseBtn {
    grid-column: auto;
  }

  #ramka-panelu .wiersz-przyciskow {
    flex-wrap: wrap;
  }

  #ramka-wyszukiwarki #searchBox,
  #ramka-wyszukiwarki #verseJumpBox,
  #ramka-wyszukiwarki button,
  #ramka-wyszukiwarki #jumpVerseBtn,
  #ramka-panelu .przycisk-nawigacji,
  #ramka-panelu select.przycisk-nawigacji,
  #themeToggleButton.theme-toggle-button {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}


/* Codex WLC chapter title in audio panel */
.panel_audio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 980px;
}

.audio-main {
  flex: 1 1 760px;
  min-width: 0;
}

.audio-chapter-title,
header h1 {
  display: inline-block;
  margin: 15px 0;
  padding: 0.5rem 0.7rem;
  background-color: transparent;
  border: 2px solid #8b5e3c;
  border-radius: 6px;
  font-size: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
}

.audio-chapter-title {
  flex: 0 0 auto;
  margin: 0;
  background-color: #f8eed8;
}

body.theme-night .audio-chapter-title {
  background-color: #2a2520;
  border-color: #b48a58;
  color: #f1e6d2;
}

@media (max-width: 900px) {
  .panel_audio {
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
  }

  .audio-main {
    flex-basis: 100%;
  }
}



/* Codex WLC title beside audio, no header images */
.audio-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0.1rem auto 0.4rem;
  padding: 0 12px;
}

.audio-title-row .panel_audio {
  flex: 1 1 800px;
  max-width: 800px;
  margin: 0;
}

.audio-title-row .audio-main {
  flex: 1 1 auto;
  min-width: 0;
}

.audio-title-row .audio-chapter-title {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem 0.7rem;
  background-color: #f8eed8;
  border: 2px solid #8b5e3c;
  border-radius: 6px;
  font-size: 1.3rem;
  font-weight: bold;
  white-space: nowrap;
}

header .lewy-obrazek,
header .prawy-obrazek {
  display: none !important;
}

@media (max-width: 900px) {
  .audio-title-row {
    flex-wrap: wrap;
  }

  .audio-title-row .panel_audio {
    flex-basis: 100%;
    max-width: calc(100% - 20px);
  }
}



/* Codex WLC shifted rows after Qere merge */
.tabela-glowna th,
.tabela-glowna td {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.tabela-glowna tr:not(.L06):not(.L08):not(.L10):not(.L14) td:nth-child(n+3) {
  font-family: inherit;
}

tr.L05 .paren-red,
tr.L15 .paren-red,
.qere-paren-red {
  color: #ff0000;
  font-weight: bold;
}

tr.L05 .qere-tooltip {
  color: inherit;
  text-decoration: none;
  cursor: help;
}

tr.L05 .qere-tooltip > .qere-tooltip-box {
  top: auto;
  bottom: calc(100% + 4px);
  left: 0;
  width: 250px;
  min-width: 250px;
  max-width: none;
  padding: 4px 7px;
  background: #fffaf0;
  border: 1px solid #c8ad84;
  box-shadow: 0 3px 9px rgba(43, 29, 14, 0.22);
  white-space: nowrap;
  text-align: left;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.25;
}

tr.L05 .qere-tooltip:hover > .qere-tooltip-box {
  display: block;
}

tr.L06 td {
  background-color: #E9D8B9;
}

tr.L06 td:nth-child(n+3),
tr.L08 td:nth-child(n+3),
tr.L14 td:nth-child(n+3) {
  color: inherit;
  font-family: 'Ezra SIL SR', 'Ezra SIL', 'SBL Hebrew', serif;
  font-size: 24px;
  font-weight: bold;
}

tr.L06 td:nth-child(-n+2),
tr.L08 td:nth-child(-n+2),
tr.L14 td:nth-child(-n+2),
tr.L06 td:nth-child(2) a,
tr.L08 td:nth-child(2) a,
tr.L14 td:nth-child(2) a {
  color: inherit;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: normal !important;
}

tr.L07 td {
  background-color: #faf3e0;
}

tr.L07 td:nth-child(n+3) {
  color: #ff0000;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
}

tr.L09 td:nth-child(n+3),
tr.L11 td:nth-child(n+3),
tr.L15 td:nth-child(n+3),
tr.L16 td:nth-child(n+3),
tr.L17 td:nth-child(n+3) {
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
}

tr.L09 .l10-tooltip {
  color: inherit;
  text-decoration: none;
  cursor: help;
}

tr.L09 .l10-tooltip > span {
  width: 260px;
  max-width: 320px;
  white-space: normal;
  color: #111;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.25;
}

tr.L10 td:nth-child(n+3) {
  font-family: 'BWtransh', sans-serif;
}

tr.L16 td,
tr.L17 td,
tr.L18 td,
tr.L19 td,
tr.L20 td,
tr.L21 td {
  padding: 3px 6px;
  font-size: 14px;
}

tr.L22.verse-separator td {
  height: auto;
  padding: 3px 6px;
  background-color: #faf3e0;
  border: none !important;
  color: transparent !important;
  font-size: 14px !important;
}

body.theme-night tr.L07 td,
body.theme-night tr.L22.verse-separator td {
  background-color: #24272d;
}

body.theme-night tr.L07 td:nth-child(n+3),
body.theme-night tr.L05 .paren-red,
body.theme-night tr.L15 .paren-red,
body.theme-night .qere-paren-red {
  color: #ff0000;
}

body.theme-night tr.L06 td:nth-child(n+3),
body.theme-night tr.L08 td:nth-child(n+3),
body.theme-night tr.L09 td:nth-child(n+3),
body.theme-night tr.L11 td:nth-child(n+3),
body.theme-night tr.L14 td:nth-child(n+3),
body.theme-night tr.L15 td:nth-child(n+3) {
  color: #f1e6d2;
}



/* Codex WLC polished filter panel */
.filtry-i-przyciski.filters-polished {
  display: block;
  margin: 16px auto 14px;
  padding: 0 12px;
}

.filters-polished #filtry-wierszy.filter-panel {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 14px;
  background: #f3e6cf;
  border: 1px solid #b8946b;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.filter-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.filter-panel-header strong {
  margin-right: auto;
  color: #2c1e13;
  font-size: 16px;
  line-height: 1.2;
}

.filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filters-polished .checkbox-button {
  margin: 0;
  padding: 5px 10px;
  min-width: 0;
  color: #fff;
  background-color: #8b5e3c;
  border: 1px solid #7a4d2c;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.1;
}

.filter-tooltip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 9px;
  background: #fff8ea;
  border: 1px solid #c4a27a;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.1;
}

.filter-chip-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.row-filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  min-width: 58px;
  gap: 5px;
  margin: 0;
  padding: 5px 7px;
  background: #fff4df;
  border: 1px solid #c8a982;
  border-radius: 6px;
  color: #1f160f;
  font-size: 14px;
  line-height: 1;
}

.row-filter-chip input,
.filter-tooltip-toggle input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #8b5e3c;
}

.row-filter-chip:has(input:not(:checked)) {
  opacity: 0.58;
  background: #f8ead7;
}

@media (max-width: 700px) {
  .filters-polished #filtry-wierszy.filter-panel {
    padding: 10px;
  }

  .filter-panel-header {
    align-items: stretch;
  }

  .filter-panel-header strong,
  .filter-actions,
  .filter-tooltip-toggle {
    width: 100%;
  }

  .filter-actions .checkbox-button {
    flex: 1 1 140px;
  }

  .row-filter-chip {
    min-width: 54px;
  }
}



/* Codex WLC dropdown filter panel */
.filters-dropdown #filtry-wierszy.filter-panel-dropdown {
  width: fit-content;
  max-width: calc(100vw - 24px);
  padding: 8px 10px;
}

.filters-dropdown .filter-panel-header {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 0;
}

.filters-dropdown .filter-panel-header strong {
  flex: 0 0 auto;
  margin-right: 0;
  font-size: 15px;
}

.filters-dropdown .checkbox-button {
  padding: 4px 8px;
  font-size: 13px;
}

.filters-dropdown .filter-tooltip-toggle {
  padding: 4px 8px;
  font-size: 13px;
}

.filter-dropdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-right: auto;
}

.filter-combo {
  position: relative;
  min-width: 210px;
}

.filter-combo-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  min-width: 210px;
  padding: 5px 9px;
  background: #fff4df;
  border: 1px solid #b78f63;
  border-radius: 8px;
  color: #1f160f;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}

.filter-combo-button:hover,
.filter-combo-button[aria-expanded="true"] {
  background: #f5e4c7;
}

.filter-combo-button.is-partial {
  border-style: dashed;
}

.filter-combo-button.is-empty {
  opacity: 0.75;
}

.filter-combo-arrow {
  color: #7c5738;
  font-size: 12px;
}

.filter-combo-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  box-sizing: border-box;
  min-width: 254px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 8px;
  background: #fff8e9;
  border: 1px solid #c39b70;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(65, 42, 23, 0.22);
}

.filter-combo-menu[hidden] {
  display: none;
}

.filter-combo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(46px, 1fr));
  gap: 5px 6px;
}

.row-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: 24px;
  margin: 0;
  padding: 4px 5px;
  background: #fff4df;
  border: 1px solid #d6b994;
  border-radius: 6px;
  color: #1f160f;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.row-filter-menu-item input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #8b5e3c;
}

.row-filter-menu-item:has(input:not(:checked)) {
  opacity: 0.58;
  background: #f8ead7;
}

@media (max-width: 700px) {
  .filters-dropdown #filtry-wierszy.filter-panel-dropdown {
    width: auto;
  }

  .filters-dropdown .filter-panel-header {
    flex-wrap: wrap;
  }

  .filter-combo {
    width: 100%;
  }

  .filter-combo-button {
    width: 100%;
  }

  .filter-combo-menu {
    position: static;
    margin-top: 6px;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .filter-combo-grid {
    grid-template-columns: repeat(3, minmax(52px, 1fr));
  }
}

/* Filtry wstawione pomiędzy wyszukiwarkę i nawigację */
#kontener-ramek > .filtry-i-przyciski.filters-dropdown {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

#kontener-ramek > .filters-dropdown #filtry-wierszy.filter-panel-dropdown {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 2px solid #8b5e3c;
  border-radius: 8px;
}

#kontener-ramek > .filters-dropdown .filter-panel-header {
  display: grid;
  grid-template-columns: auto auto auto;
  align-content: center;
  justify-content: start;
  gap: 7px 12px;
  height: 100%;
}

#kontener-ramek > .filters-dropdown .filter-panel-header strong {
  flex: 0 0 auto;
  font-size: 13px;
}

#kontener-ramek > .filters-dropdown .filter-actions {
  display: contents;
}

#kontener-ramek > .filters-dropdown .filter-dropdown-row {
  display: flex;
  align-items: center;
  gap: 7px;
  grid-column: 1 / 4;
  margin-right: 0;
}

#kontener-ramek > .filters-dropdown .filter-combo,
#kontener-ramek > .filters-dropdown .filter-combo-button {
  min-width: 176px;
}

#kontener-ramek > .filters-dropdown .filter-combo-button,
#kontener-ramek > .filters-dropdown .checkbox-button,
#kontener-ramek > .filters-dropdown .filter-tooltip-toggle {
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  padding: 3px 7px;
  font-size: 12.5px;
  line-height: 1;
}

#kontener-ramek > .filters-dropdown .filter-tooltip-toggle {
  border-radius: 6px;
  font-family: inherit;
}

@media (max-width: 1180px) {
  #kontener-ramek {
    flex-wrap: wrap;
  }

  #kontener-ramek > .filtry-i-przyciski.filters-dropdown {
    order: 3;
    width: 100%;
  }

  #kontener-ramek > .filters-dropdown #filtry-wierszy.filter-panel-dropdown {
    height: auto;
  }
}

/* Codex WLC visual table separator below controls */
#kontener-ramek {
  margin-top: 10px;
}

#content {
  position: relative;
  margin-top: 18px;
  padding-top: 16px;
}

#content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 0;
  border-top: 2px solid rgba(139, 94, 60, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}


/* ======================================================================
   15. NAPRAWA BWTRANSH - aktualna linia L10 po przesunięciu wierszy Qere
   ====================================================================== */

/*
  Używamy ścieżki bezwzględnej, aby font był ładowany poprawnie
  niezależnie od adresu otwartego rozdziału WLC.
*/
@font-face {
  font-family: 'BWtransh';
  src:
    local('BWtransh'),
    url('/WLC/Style_WLC/bwtransh.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
  Aktualna transliteracja BWtransh znajduje się w L10.
  !important zabezpiecza ją przed starszymi regułami "font-family: inherit"
  pozostawionymi po wcześniejszej numeracji wierszy.
*/
.tabela-glowna tr.L10 td:nth-child(n+3),
.tabela-glowna tr.L10 td:nth-child(n+3) a,
.tabela-glowna tr.L10 td:nth-child(n+3) span,
.tabela-glowna tr.L10 td:nth-child(n+3) strong,
.tabela-glowna tr.L10 td:nth-child(n+3) em {
  font-family: 'BWtransh', sans-serif !important;
}

/*
  Pierwsze dwie kolumny L10 (opis linii i odsyłacz/adres)
  mają pozostać zwykłą czcionką strony.
*/
.tabela-glowna tr.L10 td:nth-child(-n+2),
.tabela-glowna tr.L10 td:nth-child(-n+2) a,
.tabela-glowna tr.L10 td:nth-child(-n+2) span {
  font-family: inherit !important;
  font-size: 14px !important;
}

/* 16. BWtransh L10 - powiększenie czcionki o 2 px */
.tabela-glowna tr.L10 td:nth-child(n+3),
.tabela-glowna tr.L10 td:nth-child(n+3) a,
.tabela-glowna tr.L10 td:nth-child(n+3) span,
.tabela-glowna tr.L10 td:nth-child(n+3) strong,
.tabela-glowna tr.L10 td:nth-child(n+3) em {
  font-size: 16px !important;
}