/* PNP ReadStyle Bar — CSS v3 */

/* dzień: lekko złoty, delikatnie przyciemniony */
:root{
  --pnpRSZ: 20040;
  --pnpRSRadius: 18px;

  --pnpRSBorder: rgba(0,0,0,.12);
  --pnpRSBg: rgba(249, 244, 228, .86);   /* złotawe tło */
  --pnpRSBg2: rgba(235, 224, 190, .22);  /* subtelny akcent */
  --pnpRSText: #141414;
  --pnpRSShadow: 0 12px 40px rgba(0,0,0,.18);

  --pnpRSBtnBg: rgba(0,0,0,.06);
  --pnpRSBtnBgH: rgba(0,0,0,.09);

  --pnpRSPillBg: rgba(0,0,0,.05);
  --pnpRSPillBgH: rgba(0,0,0,.08);
  --pnpRSPillBorder: rgba(0,0,0,.10);

  --pnpRSAccent: rgba(215,194,138,.95);
}

/* noc */
body.pp-dark{
  --pnpRSBorder: rgba(255,255,255,.12);
  --pnpRSBg: rgba(16,16,16,.82);
  --pnpRSBg2: rgba(215,194,138,.10);
  --pnpRSText: #f3f3f3;

  --pnpRSBtnBg: rgba(255,255,255,.10);
  --pnpRSBtnBgH: rgba(255,255,255,.14);

  --pnpRSPillBg: rgba(255,255,255,.08);
  --pnpRSPillBgH: rgba(255,255,255,.12);
  --pnpRSPillBorder: rgba(255,255,255,.12);
}

/* Globalna baza (żeby dark zmieniał też stronę, nie tylko pasek) */
html[data-theme="dark"] body,
body.pp-dark{
  background: #0f0f10 !important;
  color: #f2f2f2 !important;
  color-scheme: dark;
}
html[data-theme="dark"] a,
body.pp-dark a{
  color: #d7c28a !important;
}

.pnpRS{ position: relative; color: var(--pnpRSText); }

/* overlay */
.pnpRSOverlay{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(2px);
  z-index: var(--pnpRSZ);
}
.pnpRSOverlay.open{ display:block; }

/* sheets */
.pnpRSSheet{
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  width: min(900px, calc(100vw - 24px));
  max-height: calc(100vh - 44px);
  overflow: auto;

  display: none;
  z-index: calc(var(--pnpRSZ) + 1);

  background: rgba(255,255,255,.94);
  border: 1px solid var(--pnpRSBorder);
  border-radius: var(--pnpRSRadius);
  box-shadow: var(--pnpRSShadow);
  font-size: 16px !important;
}
body.pp-dark .pnpRSSheet{ background: rgba(17,17,17,.92); }
.pnpRSSheet.open{ display:block; }

.pnpRSSheetHead{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pnpRSBorder);
  background: inherit;
}

.pnpRSSheetTitle{
  font-weight: 950;
  font-size: 20px;
  letter-spacing: .2px;
}

.pnpRSIconBtn{
  border: 0;
  background: var(--pnpRSBtnBg);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.pnpRSIconBtn:hover{ background: var(--pnpRSBtnBgH); }

.pnpRSIconBtn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pnpRSSheetBody{ padding: 14px 16px 16px; }

/* picker form */
.pnpRSLabel{ display:block; font-weight: 900; margin: 8px 0 6px; }
.pnpRSSelect{
  width: 100%;
  border: 1px solid var(--pnpRSBorder);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.78);
  color: inherit;
}
body.pp-dark .pnpRSSelect{ background: rgba(0,0,0,.25); }

.pnpRSRow{ display:flex; gap:10px; margin-top: 12px; flex-wrap: wrap; }
.pnpRSBtn{
  border: 1px solid var(--pnpRSBorder);
  border-radius: 14px;
  padding: 10px 14px;
  background: var(--pnpRSBtnBg);
  color: inherit;
  font-weight: 900;
  cursor:pointer;
  touch-action: manipulation;
}
.pnpRSBtn:hover{ background: var(--pnpRSBtnBgH); }
.pnpRSBtnPrimary{
  border-color: rgba(0,0,0,0);
  background: rgba(215,194,138,.25);
}
body.pp-dark .pnpRSBtnPrimary{ background: rgba(215,194,138,.18); }

.pnpRSTip{ margin-top: 10px; opacity: .78; font-size: 13px; }

/* settings grid */
.pnpRSGrid{ display:flex; flex-wrap: wrap; gap: 10px; }

.pnpRSPill{
  display:flex;
  align-items:center;
  gap: 10px;

  border: 1px solid var(--pnpRSPillBorder);
  background: var(--pnpRSPillBg);
  color: inherit;

  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 900;
  cursor:pointer;
  user-select:none;
  white-space: nowrap;
  touch-action: manipulation;
}
.pnpRSPill:hover{ background: var(--pnpRSPillBgH); }
.pnpRSPill:active{ transform: translateY(1px); }

.pnpRSPill.is-on{
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22);
}
body.pp-dark .pnpRSPill.is-on{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}

.pnpRSIco svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pnpRSHelp{
  margin-top: 12px;
  font-size: 13px;
  opacity: .78;
  display:none;
}
.pnpRSHelp.open{ display:block; }

/* bottom bar */
.pnpRSBar{
  position: fixed !important;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 18px));

  display:flex !important;
  visibility: visible !important;
  opacity: 1 !important;

  gap: 10px;
  padding: 10px;

  z-index: calc(var(--pnpRSZ) - 1);

  border: 1px solid var(--pnpRSBorder);
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--pnpRSBg2), rgba(255,255,255,0)) ,
    var(--pnpRSBg);
  box-shadow: var(--pnpRSShadow);
  backdrop-filter: blur(10px);

  font-size: 16px !important;
  transition: transform .18s ease, opacity .18s ease;
}

/* ukrywanie przy scroll w dół */
body.pnpRSBarHidden .pnpRSBar{
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
}

.pnpRSBarBtn{
  border: 0;
  background: var(--pnpRSBtnBg);
  color: inherit;
  border-radius: 16px;
  height: 44px;
  min-width: 48px;
  padding: 0 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 900;
  touch-action: manipulation;
}
.pnpRSBarBtn:hover{ background: var(--pnpRSBtnBgH); }
.pnpRSBarBtn:active{ transform: translateY(1px); }

.pnpRSBarBtn svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* środek: duża ładna czcionka */
.pnpRSBarBtnMid{
  flex: 1 1 auto;
  justify-content: center;     /* środek */
  padding-left: 12px;
  padding-right: 12px;
  gap: 12px;
}
.pnpRSBarBtnMid svg{ opacity: .85; }

.pnpRSBarMidText{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 18px;
  opacity: .95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* body padding */
body.pnpRSHasBar{ padding-bottom: 92px; }

@media (max-width: 520px){
  /* na mobile nadal pokazuj księgę (ważne!), ale nie za szeroko */
  .pnpRSBarMidText{ font-size: 17px; }
  body.pnpRSHasBar{ padding-bottom: 88px; }
}

/* chowamy stare paski gdy moduł aktywny */
body.pnpRSHasBar .mobile-bottom-bar,
body.pnpRSHasBar #ppBottomBar,
body.pnpRSHasBar #ppVerseBottomBar{
  display: none !important;
}
/* PNP_RS_DARK_FRAMES_FIX_V3_BEGIN */
/*
  FIX V3 (zgodnie ze screenem):
  - przyciemnij "ramki" (sekcje/panele/kontenery), które mają jasne tła
  - popraw kontrast tekstu (żeby nie znikał)
  - osobno: interlinear/tabele, bo często są jasne i robią "białą plamę"
*/

body.pp-dark{
  background:#0e0e0f !important;
  color:#f2f2f2 !important;
  color-scheme: dark;
}

/* ogólny kontrast tekstu w treści */
body.pp-dark :where(.page-container, main, .content, #content, #main, .main, .main-content) *{
  color: inherit;
}
body.pp-dark :where(.page-container, main, .content, #content, #main, .main, .main-content){
  color:#f2f2f2 !important;
}

/* linki czytelne */
body.pp-dark a{ color: rgba(215,194,138,.98) !important; }
body.pp-dark a:hover{ text-decoration: underline; }

/* ramki/kafelki/sekcje — ciemne tło + delikatna ramka */
body.pp-dark :where(
  .box, .panel, .frame, .card, .section, .tile,
  [class*="box"], [class*="panel"], [class*="frame"], [class*="card"], [class*="section"], [class*="tile"],
  fieldset, article, section
){
  background: rgba(14,14,15,.88) !important;
  border-color: rgba(255,255,255,.10) !important;
  color:#f2f2f2 !important;
}

/* elementy z tłem ustawionym na sztywno (inline) */
body.pp-dark :where([style*="background"], [style*="background-color"]){
  background-color: rgba(14,14,15,.88) !important;
  border-color: rgba(255,255,255,.10) !important;
  color:#f2f2f2 !important;
}

/* nagłówki/tytuły sekcji — pewny kontrast */
body.pp-dark :where(h1,h2,h3,h4,.title,.section-title,.panel-title){
  color: rgba(232,120,95,.95) !important;
}

/* === Interlinear / tabele: tu najczęściej zostaje jasna "kartka" === */
body.pp-dark :where(#interlinear, .interlinear, .interlinear-wrap, .interlinear-box, [id*="interlinear"], [class*="interlinear"]){
  background: rgba(10,10,11,.92) !important;
  color:#f2f2f2 !important;
  border-color: rgba(255,255,255,.12) !important;
}

body.pp-dark :where(#interlinear table, .interlinear table, [id*="interlinear"] table, [class*="interlinear"] table){
  background: transparent !important;
  color:#f2f2f2 !important;
}

body.pp-dark :where(#interlinear th, #interlinear td, .interlinear th, .interlinear td, [id*="interlinear"] th, [id*="interlinear"] td, [class*="interlinear"] th, [class*="interlinear"] td){
  background: rgba(255,255,255,.03) !important;
  color:#f2f2f2 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* zebra delikatna */
body.pp-dark :where(#interlinear tr:nth-child(even) td, .interlinear tr:nth-child(even) td, [id*="interlinear"] tr:nth-child(even) td, [class*="interlinear"] tr:nth-child(even) td){
  background: rgba(255,255,255,.05) !important;
}

/* input/select/textarea – czytelne */
body.pp-dark :where(input, select, textarea){
  background: rgba(0,0,0,.30) !important;
  color:#f2f2f2 !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Mobile: jeszcze większe pola wyboru */
@media (max-width: 520px){
  .pnpRSLabel{ font-size: 18px !important; }
  .pnpRSSelect{
    font-size: 22px !important;
    padding: 20px 16px !important;
    min-height: 68px !important;
    border-radius: 20px !important;
  }
}
/* PNP_RS_DARK_FRAMES_FIX_V3_END */