/* 14 — reading plan only; the approved Free Bible reader is untouched. */
html:has(body[data-page="read"]){background:#cbd8c9!important}
html[data-theme="dark"]:has(body[data-page="read"]){background:#141716!important}
html[data-theme] body[data-page="read"]{
  --rp-ink:#18211d;--rp-muted:#64726a;--rp-number:#89948e;
  --rp-glass:rgba(248,252,248,.46);--rp-panel:rgba(248,252,248,.75);
  --rp-button:rgba(255,255,255,.55);--rp-rim:rgba(255,255,255,.78);
  --rp-purple:#8058d4;--rp-selection:rgba(220,207,245,.53);
  --rp-wall-opacity:.48;--rp-wall-filter:none;
  --rp-shadow:inset 0 1px 1px rgba(255,255,255,.62),0 8px 24px rgba(24,40,30,.10);
  background:transparent!important;color:var(--rp-ink)!important;
}
html[data-theme="dark"] body[data-page="read"]{
  --rp-ink:#f1f2ee;--rp-muted:#aeb8b1;--rp-number:#8f9993;
  --rp-glass:rgba(40,43,41,.48);--rp-panel:rgba(43,47,44,.85);
  --rp-button:rgba(255,255,255,.08);--rp-rim:rgba(255,255,255,.24);
  --rp-purple:#b59ae6;--rp-selection:rgba(115,84,168,.35);
  --rp-wall-opacity:.66;--rp-wall-filter:grayscale(.85) brightness(.14);
  --rp-shadow:inset 0 1px 1px rgba(255,255,255,.13),0 8px 24px rgba(0,0,0,.17);
}
/* Same fixed wall and soft native-chrome join as the Free Bible page. */
html:has(body[data-page="read"])::before{
  content:"";position:fixed;z-index:0;pointer-events:none;left:0;right:0;
  top:calc(-24px - env(safe-area-inset-top,0px));bottom:calc(-24px - env(safe-area-inset-bottom,0px));
  background:url('/assets/ambient/bible-wall.webp') center/cover no-repeat;
  opacity:.48;filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(24px + env(safe-area-inset-top,0px)),#000 calc(114px + env(safe-area-inset-top,0px)),#000 calc(100% - 114px - env(safe-area-inset-bottom,0px)),transparent calc(100% - 24px - env(safe-area-inset-bottom,0px)));
  mask-image:linear-gradient(to bottom,transparent calc(24px + env(safe-area-inset-top,0px)),#000 calc(114px + env(safe-area-inset-top,0px)),#000 calc(100% - 114px - env(safe-area-inset-bottom,0px)),transparent calc(100% - 24px - env(safe-area-inset-bottom,0px)));
}
html[data-theme="dark"]:has(body[data-page="read"])::before{opacity:.66;filter:grayscale(.85) brightness(.14)}
html[data-theme] body[data-page="read"] .app{
  position:relative;z-index:1;width:min(700px,100%);max-width:700px;margin:0 auto;
  min-height:100svh;padding:0 20px calc(100px + env(safe-area-inset-bottom,0px))!important;
  background:transparent!important;overflow:visible!important;
}
/* Only the compact chapter header sticks. Controls scroll away above the text. */
html[data-theme] body[data-page="read"] .top{
  position:sticky!important;top:0;z-index:20!important;height:auto!important;min-height:56px;
  display:grid;grid-template-columns:68px minmax(0,1fr) 36px;gap:8px;
  margin:0 -20px 14px!important;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 12px!important;
  background:var(--rp-panel)!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)!important;
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
}
html[data-theme] body[data-page="read"] .top h1{
  min-width:0;max-width:100%;font-size:17px!important;line-height:1.2;font-weight:600!important;
  color:var(--rp-ink)!important;text-align:center;white-space:normal!important;overflow-wrap:anywhere;
  letter-spacing:-.45px;
}
html[data-theme] body[data-page="read"] .back{color:var(--rp-muted)!important;font-size:12px;gap:3px}
html[data-theme] body[data-page="read"] .more{color:var(--rp-ink)!important;min-width:36px;min-height:36px;padding:0;letter-spacing:1px;font-size:18px}
html[data-theme] body[data-page="read"] .cards{display:none!important}
html[data-theme] body[data-page="read"] .b27-date-nav{
  display:grid!important;grid-template-columns:40px minmax(0,1fr) 40px!important;gap:10px;
  max-width:390px;margin:0 auto 12px!important;align-items:center!important;
}
html[data-theme] body[data-page="read"] .b27-date-arrow{
  display:grid!important;width:40px;height:40px;border:1px solid var(--rp-rim);
  background:var(--rp-glass)!important;color:var(--rp-ink)!important;box-shadow:var(--rp-shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
html[data-theme] body[data-page="read"] .b27-date-arrow.is-disabled{opacity:.3;pointer-events:none}
html[data-theme] body[data-page="read"] .b27-date-button{
  min-width:0;width:100%;min-height:48px!important;padding:7px 9px!important;border-radius:22px!important;
  background:var(--rp-glass)!important;border:1px solid var(--rp-rim)!important;
  color:var(--rp-ink)!important;box-shadow:var(--rp-shadow)!important;
}
html[data-theme] body[data-page="read"] .b27-date-button b{font-size:13px!important;line-height:1.2}
html[data-theme] body[data-page="read"] .b27-date-button span{display:block!important;color:var(--rp-muted)!important;font-size:11px!important}
html[data-theme] body[data-page="read"] .head{justify-content:center!important;margin:0 0 12px!important}
html[data-theme] body[data-page="read"] .ch-nav{grid-template-columns:36px auto 36px!important;gap:12px!important}
html[data-theme] body[data-page="read"] .ch-nav a,
html[data-theme] body[data-page="read"] .ch-nav span{height:34px!important}
html[data-theme] body[data-page="read"] .ch-nav .prev,
html[data-theme] body[data-page="read"] .ch-nav .next{
  width:36px!important;min-height:34px;border:1px solid var(--rp-rim);background:var(--rp-button)!important;
  color:var(--rp-ink)!important;box-shadow:none!important;
}
html[data-theme] body[data-page="read"] .ch-nav .count{color:var(--rp-muted)!important;font-size:12px!important}
html[data-theme] body[data-page="read"] .actions{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(0,1.22fr)!important;gap:7px!important;margin:0 0 22px!important}
html[data-theme] body[data-page="read"] .act{
  min-width:0;min-height:48px!important;padding:6px 4px!important;border:1px solid var(--rp-rim)!important;
  border-radius:16px!important;background:var(--rp-glass)!important;color:var(--rp-ink)!important;
  box-shadow:var(--rp-shadow)!important;font-size:10px!important;line-height:1.25;gap:4px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
html[data-theme] body[data-page="read"] .act .ico{flex:none;font-size:16px!important}
html[data-theme] body[data-page="read"] .act[data-font-open] .ico{font-size:19px!important;font-weight:500;letter-spacing:-1px}
html[data-theme] body[data-page="read"] .done.is-done{background:rgba(132,200,61,.18)!important;color:var(--rp-ink)!important;border-color:rgba(132,200,61,.55)!important}
/* Same two-column verse layout. Font size/family/weight remain user controlled. */
html[data-theme] body[data-page="read"] .scripture{
  max-width:620px;padding:0!important;background:transparent!important;color:var(--rp-ink)!important;
  line-height:1.57!important;letter-spacing:-.18px;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html[data-theme] body[data-page="read"] .verse{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;
  position:relative;margin:0 0 10px!important;padding:4px 4px 4px 0!important;
  border:0!important;border-radius:18px!important;color:var(--rp-ink)!important;
}
html[data-theme] body[data-page="read"] .verse:not(.selected){background:transparent!important;box-shadow:none!important}
html[data-theme] body[data-page="read"] .verse-number{
  display:flex;align-items:center;justify-content:center;align-self:start;
  min-width:28px;height:28px;box-sizing:border-box;margin:.16em 0 0;padding:0 3px;
  color:var(--rp-number);font:600 11px/1 Montserrat,sans-serif;font-variant-numeric:tabular-nums;
  border-radius:999px;transform:none;position:static;
}
html[data-theme] body[data-page="read"] .verse-text{min-width:0;overflow-wrap:break-word}
html[data-theme] body[data-page="read"] .verse.selected{
  background:var(--rp-selection)!important;margin-left:0!important;padding:10px 10px 10px 4px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 7px 20px rgba(83,64,128,.08)!important;
}
html[data-theme] body[data-page="read"] .verse.selected .verse-number{background:#8058d4;color:#fff}
/* Shared Copy/Share/Postcard capsule, always 16 px above the fixed nav. */
html[data-theme] body[data-page="read"] .bar[data-verse-actions]{
  position:fixed!important;z-index:55!important;left:50%!important;
  bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;
  width:min(360px,calc(100vw - 32px))!important;min-height:58px!important;padding:5px!important;
  border:1px solid var(--rp-rim)!important;border-radius:25px!important;
  background:var(--rp-glass)!important;box-shadow:var(--rp-shadow)!important;
  -webkit-backdrop-filter:blur(10px) saturate(125%);backdrop-filter:blur(10px) saturate(125%);
}
html[data-theme] body[data-page="read"] .bar .selection-count{display:none!important}
html[data-theme] body[data-page="read"] .bar[data-verse-actions] button{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:0!important;min-height:46px!important;padding:4px!important;border:0!important;
  background:transparent!important;color:var(--rp-ink)!important;box-shadow:none!important;font-size:11px!important;
}
html[data-theme] body[data-page="read"] .bar[data-verse-actions] button span{color:var(--rp-ink)!important;font-size:11px!important}
html[data-theme] body[data-page="read"] .bar button svg{width:18px!important;height:18px!important;color:var(--rp-purple)}
html[data-theme] body[data-page="read"] .bar button+button{border-left:1px solid rgba(120,130,122,.18)!important}
html[data-theme] body[data-page="read"].verse-actions-active .app{padding-bottom:calc(174px + env(safe-area-inset-bottom,0px))!important}
html[data-theme] body[data-page="read"] .nav{
  z-index:45!important;background:var(--rp-glass)!important;border-color:var(--rp-rim)!important;
  box-shadow:var(--rp-shadow)!important;-webkit-backdrop-filter:blur(10px) saturate(125%)!important;backdrop-filter:blur(10px) saturate(125%)!important;
}
html[data-theme] body[data-page="read"] .fontbox{
  z-index:30!important;top:56px;left:0;width:min(338px,calc(100vw - 40px))!important;
  max-height:62svh;overflow:auto;padding:16px!important;border-radius:24px!important;
  background:var(--rp-panel)!important;border:1px solid var(--rp-rim)!important;
  color:var(--rp-ink)!important;box-shadow:var(--rp-shadow)!important;
  -webkit-backdrop-filter:blur(14px)!important;backdrop-filter:blur(14px)!important;
}
html[data-theme] body[data-page="read"] .fontbox__title,
html[data-theme] body[data-page="read"] .fontbox__size output{color:var(--rp-ink)!important}
html[data-theme] body[data-page="read"] .fontbox__label{color:var(--rp-muted)!important}
html[data-theme] body[data-page="read"] .fontbox button{
  min-width:0;background:var(--rp-button)!important;color:var(--rp-ink)!important;
  border:1px solid var(--rp-rim);box-shadow:none!important;
}
html[data-theme] body[data-page="read"] .font-options button.is-active{border-color:var(--rp-purple)!important;background:var(--rp-selection)!important;color:var(--rp-ink)!important}
html[data-theme] body[data-page="read"] .chapter-finish,
html[data-theme] body[data-page="read"] .complete{
  background:var(--rp-glass)!important;border:1px solid var(--rp-rim)!important;border-radius:24px!important;
  padding:12px!important;color:var(--rp-ink)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-theme] body[data-page="read"] .chapter-finish{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr);gap:6px}
html[data-theme] body[data-page="read"] .chapter-finish a,
html[data-theme] body[data-page="read"] .chapter-finish button,
html[data-theme] body[data-page="read"] .chapter-finish .off,
html[data-theme] body[data-page="read"] .complete a{min-width:0;padding:6px!important;background:var(--rp-button)!important;color:var(--rp-ink)!important;border:1px solid var(--rp-rim);font-size:11px!important;box-shadow:none!important}
html[data-theme] body[data-page="read"] .complete p,
html[data-theme] body[data-page="read"] .footer{color:var(--rp-muted)!important}
html[data-theme] body[data-page="read"] .footer{margin:24px 4px 0!important;padding-bottom:0!important;font-size:10px}
/* Calendar uses its existing portal and handlers; blur only while it is open. */
body[data-page="read"] .plan-calendar-backdrop{display:none;position:fixed;z-index:100;inset:0;background:rgba(30,40,34,.15);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body[data-page="read"]:has(.b27-date-popover.is-portal:not([hidden])) .plan-calendar-backdrop{display:block}
html[data-theme] body[data-page="read"] .b27-date-popover{
  padding:16px;border:1px solid var(--rp-rim)!important;border-radius:26px!important;
  background:var(--rp-panel)!important;color:var(--rp-ink)!important;
  box-shadow:0 24px 64px rgba(18,30,23,.22);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
}
html[data-theme] body[data-page="read"] .b27-calendar-header button,
html[data-theme] body[data-page="read"] .b27-calendar-today{background:var(--rp-button)!important;color:var(--rp-ink)!important;border:1px solid var(--rp-rim)}
html[data-theme] body[data-page="read"] .b27-calendar-weekdays{color:var(--rp-muted)!important}
html[data-theme] body[data-page="read"] .b27-calendar-day{color:var(--rp-ink)!important;min-height:40px}
html[data-theme] body[data-page="read"] .b27-calendar-day.is-outside{color:var(--rp-muted)!important;opacity:.55}
html[data-theme] body[data-page="read"] .b27-calendar-day:disabled{opacity:.25}
html[data-theme] body[data-page="read"] .b27-calendar-day.is-today:not(.is-selected){box-shadow:inset 0 0 0 1.5px #d7ac2b!important}
html[data-theme] body[data-page="read"] .b27-calendar-day.is-selected{background:#8058d4!important;color:#fff!important;opacity:1;box-shadow:none!important}
html[data-theme] body[data-page="read"] .sheetbg,
html[data-theme] body[data-page="read"] .card-preview,
html[data-theme] body[data-page="read"] .b27-studio{z-index:150!important;background:rgba(25,35,29,.24)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html[data-theme] body[data-page="read"] .sheet,
html[data-theme] body[data-page="read"] .card-sheet,
html[data-theme] body[data-page="read"] .b27-studio__sheet{
  margin:0 auto;max-height:86svh;max-width:700px;background:var(--rp-panel)!important;
  color:var(--rp-ink)!important;border:1px solid var(--rp-rim);border-radius:28px 28px 0 0!important;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
}
html[data-theme] body[data-page="read"] .tabs button,
html[data-theme] body[data-page="read"] .choice,
html[data-theme] body[data-page="read"] .close,
html[data-theme] body[data-page="read"] .b27-studio button,
html[data-theme] body[data-page="read"] .card-actions button{
  background:var(--rp-button)!important;color:var(--rp-ink)!important;border:1px solid var(--rp-rim)!important;
}
html[data-theme] body[data-page="read"] .tabs button.active{background:var(--rp-selection)!important;color:var(--rp-ink)!important;border-color:var(--rp-purple)!important}
html[data-theme] body[data-page="read"] .sheet-note,
html[data-theme] body[data-page="read"] .b27-studio__sheet p,
html[data-theme] body[data-page="read"] .b27-studio__sheet label{color:var(--rp-muted)!important}
html[data-theme] body[data-page="read"] .b27-toast{z-index:250;bottom:calc(168px + env(safe-area-inset-bottom,0px))!important;background:var(--rp-panel)!important;color:var(--rp-ink)!important;border:1px solid var(--rp-rim)}
@media(min-width:540px){html[data-theme] body[data-page="read"] .app{padding-left:32px!important;padding-right:32px!important}html[data-theme] body[data-page="read"] .top{margin-left:-32px!important;margin-right:-32px!important;padding-left:32px!important;padding-right:32px!important}}

/* 17 — compact plan controls and typography capsules. Only /read.php. */
html[data-theme] body[data-page="read"] .top{
  grid-template-columns:68px minmax(0,1fr) 68px;
  background:rgba(228,218,246,.74)!important;
  border-radius:0 0 24px 24px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.55),0 7px 22px rgba(84,60,127,.06)!important;
}
html[data-theme="dark"] body[data-page="read"] .top{
  background:rgba(47,38,64,.76)!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14),0 7px 22px rgba(0,0,0,.13)!important;
}
html[data-theme] body[data-page="read"] .top::after{content:"";width:68px;pointer-events:none}
html[data-theme] body[data-page="read"] .top h1{color:#65409e!important;font-size:16px!important}
html[data-theme="dark"] body[data-page="read"] .top h1{color:var(--rp-purple)!important}
html[data-theme] body[data-page="read"] .back{color:var(--rp-ink)!important}
html[data-theme] body[data-page="read"] .actions{
  grid-template-columns:44px minmax(0,1fr) minmax(0,1.2fr)!important;gap:8px!important;
}
html[data-theme] body[data-page="read"] .act{font-size:12px!important;min-height:46px!important}
html[data-theme] body[data-page="read"] .act[data-font-open]{
  color:#fff!important;background:#8058d4!important;border-color:rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 5px 15px rgba(128,88,212,.20)!important;
}
html[data-theme] body[data-page="read"] .ch-nav .next:not(.off),
html[data-theme] body[data-page="read"] .ch-nav .prev:not(.off){color:var(--rp-purple)!important;border-color:rgba(128,88,212,.32)!important}
/* Two small segmented glass pills; no heading, giant output or page-wide blur. */
html[data-theme] body[data-page="read"] .fontbox{
  position:fixed!important;z-index:60!important;left:50%!important;right:auto!important;
  top:auto!important;bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%);width:min(300px,calc(100vw - 40px))!important;
  max-height:40svh;gap:8px!important;padding:0!important;overflow:visible;
  background:transparent!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html[data-theme] body[data-page="read"].verse-actions-active .fontbox{bottom:calc(168px + env(safe-area-inset-bottom,0px))!important}
html[data-theme] body[data-page="read"] .fontbox__size,
html[data-theme] body[data-page="read"] .fontbox .font-options{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;
  min-height:46px;padding:3px;border:1px solid var(--rp-rim);border-radius:24px;
  background:var(--rp-glass);box-shadow:var(--rp-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(125%);backdrop-filter:blur(14px) saturate(125%);
}
html[data-theme] body[data-page="read"] .fontbox__size{grid-template-columns:46px minmax(0,1fr) 46px}
html[data-theme] body[data-page="read"] .fontbox button{
  width:100%!important;min-width:0;min-height:44px;height:auto!important;padding:4px!important;
  border:0!important;border-radius:20px!important;background:transparent!important;box-shadow:none!important;
}
html[data-theme] body[data-page="read"] .fontbox__size button{font:500 18px/1 system-ui}
html[data-theme] body[data-page="read"] .fontbox__size output{
  display:grid;place-items:center;padding:0;min-height:44px;
  background:transparent!important;border:0!important;color:var(--rp-ink)!important;font:600 13px/1 Montserrat,sans-serif;
}
html[data-theme] body[data-page="read"] .fontbox .font-options button{font-size:14px!important;line-height:1.2}
html[data-theme] body[data-page="read"] .fontbox [data-font-family="modern"]{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Arial,sans-serif;font-weight:400}
html[data-theme] body[data-page="read"] .fontbox [data-font-family="book"]{font-family:Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:400}
html[data-theme] body[data-page="read"] .fontbox [data-font-family="expressive"]{font-family:"Trebuchet MS",Trebuchet,Arial,sans-serif;font-weight:600}
html[data-theme] body[data-page="read"] .fontbox .font-options button.is-active{background:#8058d4!important;color:#fff!important}

/* 20: a clear chapter-position capsule, preserving all navigation semantics. */
html[data-theme] body[data-page="read"] .ch-nav{
  grid-template-columns:44px minmax(76px,1fr) 44px!important;gap:6px!important;
  padding:5px!important;max-width:100%;border-radius:29px;
  background:var(--rp-glass)!important;border:1px solid var(--rp-rim)!important;
  box-shadow:var(--rp-shadow)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-theme] body[data-page="read"] .ch-nav .prev,
html[data-theme] body[data-page="read"] .ch-nav .next{
  display:grid;place-items:center;width:44px!important;height:44px!important;min-height:44px;
  padding:0;border-radius:50%;font-size:29px!important;line-height:1;
  background:#8058d4!important;color:#fff!important;border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 3px 10px rgba(128,88,212,.16)!important;
}
html[data-theme] body[data-page="read"] .ch-nav .prev:not(.off),
html[data-theme] body[data-page="read"] .ch-nav .next:not(.off){color:#fff!important}
html[data-theme] body[data-page="read"] .ch-nav .off{opacity:.28!important;box-shadow:none!important}
html[data-theme] body[data-page="read"] .ch-nav .count{
  height:44px!important;border-radius:22px!important;font-size:14px!important;font-weight:750!important;
  color:#65409e!important;background:rgba(224,208,248,.6)!important;padding:0 10px;
}
html[data-theme="dark"] body[data-page="read"] .ch-nav .count{color:#e1d2fa!important;background:rgba(128,88,212,.24)!important}
