/* reader.css — textbook-style reader UI for SBOE PDF documents.
   Vertical side-rail toolbar (left), floating page-nav arrows, search,
   TOC drawer, and a two-up "spread" reading mode toggle. Hidden in
   print so PDFs export cleanly. */

.sboe-reader{
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: #fff;
}
/* The .sboe-reader wrapper itself must not take a grid cell or any
   layout space — its children are all position:fixed. */
body > .sboe-reader{
  display: contents;
}

/* ------------------------------------------------------------------ *
   Side rail (vertical pill on the left)
 * ------------------------------------------------------------------ */
.sboe-reader .rdr-bar{
  position: fixed;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 8px;
  width: 52px;
  background: rgba(15, 26, 42, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 28px;
  box-shadow: 0 14px 50px rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: width .18s ease, border-radius .18s ease;
}

/* When search is open the rail expands to a panel */
.sboe-reader .rdr-bar.rdr-search-open{
  width: 240px;
  border-radius: 22px;
}

/* All toolbar buttons share a circular icon style in the rail */
.sboe-reader .rdr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.sboe-reader .rdr-btn.rdr-icon{
  width: 36px;
  height: 36px;
  align-self: center;
  padding: 0;
}
.sboe-reader .rdr-btn:hover{
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .25);
}
.sboe-reader .rdr-btn:active{ transform: scale(.94); }
.sboe-reader .rdr-btn svg{ display: block; }

/* Mode toggle: shown as a stacked icon + 'PAGE / SCROLL' label so the
   reader can see exactly what state they're in and what clicking
   the button will do. Always visible, not just on hover. */
.sboe-reader .rdr-mode{
  position: relative;
  width: 36px !important;
  height: 56px !important;
  border-radius: 12px !important;
  flex-direction: column;
  padding: 4px 0 !important;
  background: rgba(124, 197, 217, .18);
  border-color: rgba(124, 197, 217, .55);
  color: #BFE6F0;
  gap: 2px !important;
}
.sboe-reader .rdr-mode::after{
  content: 'PAGE';
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  font-size: 7.5px;
  letter-spacing: .12em;
  color: #BFE6F0;
  margin-top: 2px;
}
.sboe-reader .rdr-bar.rdr-is-scroll .rdr-mode::after{
  content: 'SCROLL';
  color: #FFD7C9;
}
.sboe-reader .rdr-bar.rdr-is-scroll .rdr-mode{
  background: rgba(212, 115, 108, .20);
  border-color: rgba(212, 115, 108, .55);
}
.sboe-reader .rdr-mode .rdr-mode-page,
.sboe-reader .rdr-mode .rdr-mode-scroll{ display: none; }
.sboe-reader .rdr-bar.rdr-is-page   .rdr-mode .rdr-mode-scroll{ display: block; }
.sboe-reader .rdr-bar.rdr-is-scroll .rdr-mode .rdr-mode-page  { display: block; }

/* Page counter — vertical mini stack */
.sboe-reader .rdr-counter{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font: 700 10px 'Poppins', system-ui, sans-serif;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .85);
  padding: 4px 0;
  white-space: nowrap;
  text-align: center;
}
.sboe-reader .rdr-counter em{
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
  color: #7CC5D9;
}
.sboe-reader .rdr-counter-sep{
  opacity: .45;
  font-size: 9px;
}

/* ------------------------------------------------------------------ *
   Search (collapsed icon → expanded panel inside the rail)
 * ------------------------------------------------------------------ */
.sboe-reader .rdr-search{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sboe-reader .rdr-search-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .10);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.sboe-reader .rdr-search-toggle:hover{
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .25);
}
.sboe-reader .rdr-bar.rdr-search-open .rdr-search-toggle{
  background: rgba(124, 197, 217, .18);
  border-color: rgba(124, 197, 217, .55);
  color: #BFE6F0;
}

.sboe-reader .rdr-search-panel[hidden]{ display: none !important; }
.sboe-reader .rdr-search-panel{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 6px 4px 2px;
}
.sboe-reader .rdr-input{
  width: 100%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: #fff;
  font: 500 12px 'Montserrat', system-ui, sans-serif;
  padding: 8px 10px;
  outline: none;
  box-sizing: border-box;
}
.sboe-reader .rdr-input:focus{
  border-color: rgba(124, 197, 217, .55);
  background: rgba(255, 255, 255, .12);
}
.sboe-reader .rdr-input::placeholder{ color: rgba(255, 255, 255, .45); }

.sboe-reader .rdr-hits{
  font: 700 10px 'Poppins', system-ui, sans-serif;
  letter-spacing: .04em;
  color: #7CC5D9;
  white-space: nowrap;
  text-align: center;
  min-height: 14px;
}
.sboe-reader .rdr-search-actions{
  display: flex;
  justify-content: center;
  gap: 6px;
}
.sboe-reader .rdr-prev-hit,
.sboe-reader .rdr-next-hit,
.sboe-reader .rdr-clear{
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .85);
  border: none; cursor: pointer;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.sboe-reader .rdr-prev-hit:hover,
.sboe-reader .rdr-next-hit:hover,
.sboe-reader .rdr-clear:hover{
  background: rgba(255, 255, 255, .18);
}
.sboe-reader .rdr-clear{ font-size: 16px; line-height: 1; }

/* When the search panel is collapsed, only the search-toggle button shows */
.sboe-reader .rdr-bar:not(.rdr-search-open) .rdr-search-panel{ display: none; }

/* ------------------------------------------------------------------ *
   Floating page-nav arrows on the edges
 * ------------------------------------------------------------------ */
.sboe-reader .rdr-side{
  position: fixed;
  top: 50%; transform: translateY(-50%);
  z-index: 9998;
}
.sboe-reader .rdr-left{ left: 84px; }   /* clear of the side rail */
.sboe-reader .rdr-right{ right: 18px; }
.sboe-reader .rdr-prev,
.sboe-reader .rdr-next{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(15, 26, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  transition: background .15s ease, transform .15s ease;
}
.sboe-reader .rdr-prev:hover:not(:disabled),
.sboe-reader .rdr-next:hover:not(:disabled){
  background: rgba(61, 107, 138, .95);
  transform: scale(1.08);
}
.sboe-reader .rdr-prev:disabled,
.sboe-reader .rdr-next:disabled{
  opacity: .3; cursor: not-allowed;
}

/* ------------------------------------------------------------------ *
   TOC drawer (right side)
 * ------------------------------------------------------------------ */
.sboe-reader .rdr-toc-panel{
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 9997;
  width: 320px;
  max-height: calc(100vh - 60px);
  background: rgba(15, 26, 42, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sboe-reader .rdr-toc-panel[hidden]{ display: none !important; }
.sboe-reader .rdr-toc-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sboe-reader .rdr-toc-head strong{
  font: 800 11px 'Poppins', system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase;
  color: #7CC5D9;
}
.sboe-reader .rdr-toc-close{
  background: transparent; border: none; color: rgba(255, 255, 255, .6);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.sboe-reader .rdr-toc-close:hover{ color: #fff; }
.sboe-reader .rdr-toc-list{
  list-style: none; padding: 6px; margin: 0;
  overflow-y: auto;
  counter-reset: toc-counter;
}
.sboe-reader .rdr-toc-list li{ counter-increment: toc-counter; }
.sboe-reader .rdr-toc-list li button{
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, .85);
  text-align: left;
  padding: 10px 14px;
  font: 600 12.5px 'Montserrat', system-ui, sans-serif;
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s ease, border-color .12s ease, transform .08s ease, color .12s ease;
}
.sboe-reader .rdr-toc-list li button::before{
  content: counter(toc-counter, decimal-leading-zero);
  font: 800 11px 'Poppins', system-ui, sans-serif;
  letter-spacing: .04em;
  color: #D4736C;
  flex: 0 0 auto;
  width: 22px;
}
.sboe-reader .rdr-toc-list li button:hover{
  background: rgba(212, 115, 108, .14);
  border-color: rgba(212, 115, 108, .45);
  color: #fff;
  transform: translateX(2px);
}
.sboe-reader .rdr-toc-list li button:focus{
  outline: none;
  background: rgba(124, 197, 217, .12);
  border-color: rgba(124, 197, 217, .55);
}
.sboe-reader .rdr-toc-list li button.rdr-toc-current{
  background: rgba(124, 197, 217, .18);
  border-color: rgba(124, 197, 217, .55);
  color: #fff;
}
.sboe-reader .rdr-toc-list li button.rdr-toc-current::before{ color: #BFE6F0; }

/* ------------------------------------------------------------------ *
   Search highlights
 * ------------------------------------------------------------------ */
.rdr-hit{
  background: #FFE066;
  color: #1E3048;
  padding: 0 1px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(212, 115, 108, 0.4);
}
.rdr-hit-active{
  background: #D4736C;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(212, 115, 108, 0.4);
}

/* ------------------------------------------------------------------ *
   Single-page viewing mode — screen only
   In page mode exactly one .page is shown at a time (the one tagged
   .dc-reader-active by reader.js); all others are hidden. Prev/Next
   arrows + ←/→ keys flip between pages. The visible page is centered
   horizontally on screen.
 * ------------------------------------------------------------------ */
@media screen{
  body.dc-reader-page > .page{ display: none !important; }
  body.dc-reader-page > .page.dc-reader-active{
    display: block !important;
    margin: 28px auto 60px !important;
  }
}

/* Smooth scroll when the user toggles modes / advances */
html{ scroll-behavior: smooth; }

/* ------------------------------------------------------------------ *
   Responsive behaviour
   Tablet / desktop-narrow (900–1100px): keep the side rail but pin
   the edge arrows tighter against the screen edges. Mobile (<900px):
   collapse the side rail to a bottom bar so it doesn't fight the
   scaled-down page; keep TOC + counter + search + Save PDF reachable.
 * ------------------------------------------------------------------ */
@media (max-width: 1100px) and (min-width: 900px){
  .sboe-reader .rdr-left{ left: 70px; }
  .sboe-reader .rdr-bar{ width: 48px; padding: 8px 6px; }
  .sboe-reader .rdr-bar.rdr-search-open{ width: 220px; }
}
@media (max-width: 900px){
  /* Side arrows: keep but smaller and snug to the edges */
  .sboe-reader .rdr-side{ top: auto; bottom: 78px; transform: none; }
  .sboe-reader .rdr-left{ left: 12px; }
  .sboe-reader .rdr-right{ right: 12px; }
  .sboe-reader .rdr-prev,
  .sboe-reader .rdr-next{ width: 42px; height: 42px; }

  /* Toolbar drops to a horizontal bar at the bottom */
  .sboe-reader .rdr-bar{
    top: auto; left: 50%; bottom: 12px;
    transform: translateX(-50%);
    flex-direction: row; align-items: center;
    width: auto; max-width: calc(100vw - 24px);
    padding: 8px 12px;
    border-radius: 100px;
    gap: 8px;
  }
  .sboe-reader .rdr-bar.rdr-search-open{
    width: calc(100vw - 24px);
    border-radius: 22px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .sboe-reader .rdr-counter{ flex-direction: row; gap: 4px; padding: 0 4px; }
  .sboe-reader .rdr-counter em{ font-size: 11px; }
  .sboe-reader .rdr-search-panel{ width: 100%; }
  .sboe-reader .rdr-search-panel .rdr-input{ font-size: 13px; }

  /* TOC drawer becomes a bottom-sheet */
  .sboe-reader .rdr-toc-panel{
    top: auto; right: 12px; left: 12px; bottom: 70px;
    transform: none;
    width: auto;
    max-height: 60vh;
  }
}
@media (max-width: 480px){
  /* Hide the rdr-counter labels on very narrow screens to save room */
  .sboe-reader .rdr-counter-sep{ font-size: 8px; }
  .sboe-reader .rdr-prev,
  .sboe-reader .rdr-next{ width: 38px; height: 38px; }
}

/* ------------------------------------------------------------------ *
   Print: hide everything reader-related so the PDF is clean
 * ------------------------------------------------------------------ */
@media print{
  .sboe-reader,
  .sboe-reader *{
    display: none !important;
  }
  /* Page mode must NEVER apply to print — every page exports 1:1. */
  body.dc-reader-page > .page,
  body.dc-reader-page > .page.dc-reader-active{
    display: block !important;
    margin: 0 !important;
  }
  /* Force all backgrounds & colors to print */
  *, *::before, *::after{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* Strip search highlights from PDF */
  .rdr-hit, .rdr-hit-active{
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }
}