/* ─────────────────────────────────────────────────────────────────────────
   Browser chrome: toolbar, find bar, sidebar, modals, toasts.

   All of this is hidden when the viewer is embedded in a Flutter WebView
   (`html[data-chrome="off"]`), where the host app supplies its own UI. In a
   normal browser (`data-chrome="on"`) it is the entire interface.

   Written against baseline-modern CSS with explicit fallbacks before any
   `color-mix()` so Safari 15 and older Firefox still render correctly.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --pr-toolbar-h: 48px;
  --pr-sidebar-w: 268px;
  --pr-hover: rgba(0, 0, 0, .07);
  --pr-hover-strong: rgba(0, 0, 0, .12);
}
html[data-theme="dark"] {
  --pr-hover: rgba(255, 255, 255, .09);
  --pr-hover-strong: rgba(255, 255, 255, .16);
}

/* Chrome off → the shell collapses to just the page surface. */
html[data-chrome="off"] .pr-toolbar,
html[data-chrome="off"] .pr-findbar,
html[data-chrome="off"] .pr-sidebar { display: none !important; }

.pr-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.pr-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* ── toolbar ──────────────────────────────────────────────────────────── */

.pr-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(var(--pr-toolbar-h) + var(--pr-safe-top));
  padding: var(--pr-safe-top) 8px 0;
  background: var(--pr-surface);
  border-bottom: 1px solid var(--pr-surface-brd);
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  z-index: 40;
}
.pr-toolbar[hidden] { display: none; }

.pr-toolbar__group { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pr-toolbar__group--center { flex: 1 1 auto; justify-content: center; }
.pr-toolbar__group--end { justify-content: flex-end; }

.pr-title {
  font-size: 13px;
  font-weight: 600;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .85;
}

.pr-ico {
  all: unset;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--pr-fg);
  flex: 0 0 auto;
}
.pr-ico--sm { width: 28px; height: 28px; }
.pr-ico:hover { background: var(--pr-hover); }
.pr-ico:active { background: var(--pr-hover-strong); }
.pr-ico:focus-visible { outline: 2px solid var(--pr-accent); outline-offset: -2px; }
.pr-ico.is-on { background: var(--pr-hover-strong); color: var(--pr-accent); }
.pr-ico[disabled] { opacity: .35; pointer-events: none; }

.pr-ico svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* filled variant for the "bookmarked" state */
.pr-ico.is-on svg { fill: currentColor; stroke: currentColor; }

.pr-divider {
  width: 1px;
  height: 20px;
  background: var(--pr-surface-brd);
  margin: 0 4px;
  flex: 0 0 auto;
}

.pr-pagebox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--pr-muted);
}
.pr-pagebox input {
  width: 46px;
  text-align: center;
  font: inherit;
  color: var(--pr-fg);
  background: var(--pr-bg);
  border: 1px solid var(--pr-surface-brd);
  border-radius: 6px;
  padding: 4px 2px;
  outline: none;
}
.pr-pagebox input:focus { border-color: var(--pr-accent); }

.pr-select {
  font: inherit;
  font-size: 12px;
  color: var(--pr-fg);
  background: var(--pr-bg);
  border: 1px solid var(--pr-surface-brd);
  border-radius: 6px;
  padding: 5px 6px;
  outline: none;
  cursor: pointer;
  max-width: 108px;
}

.pr-sync {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pr-hover);
  color: var(--pr-muted);
  white-space: nowrap;
}
.pr-sync[data-state="syncing"] { color: var(--pr-accent); }
.pr-sync[data-state="offline"] { color: #c98a00; }
.pr-sync[data-state="failed"]  { color: #e5484d; }

/* ── find bar ─────────────────────────────────────────────────────────── */

.pr-findbar {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--pr-surface);
  border-bottom: 1px solid var(--pr-surface-brd);
  z-index: 39;
}
.pr-findbar[hidden] { display: none; }

.pr-findbar input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
  font: inherit;
  font-size: 13px;
  color: var(--pr-fg);
  background: var(--pr-bg);
  border: 1px solid var(--pr-surface-brd);
  border-radius: 8px;
  padding: 6px 10px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.pr-findbar input[type="search"]:focus { border-color: var(--pr-accent); }

.pr-findbar__count {
  font-size: 12px;
  color: var(--pr-muted);
  min-width: 8ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pr-findbar__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: transparent;
  overflow: hidden;
}
.pr-findbar__progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--pr-accent);
  transition: width .15s linear;
}

.pr-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--pr-muted);
  cursor: pointer;
  white-space: nowrap;
}
.pr-check input { margin: 0; accent-color: var(--pr-accent); }

/* ── sidebar ──────────────────────────────────────────────────────────── */

.pr-sidebar {
  flex: 0 0 var(--pr-sidebar-w);
  width: var(--pr-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pr-surface);
  border-right: 1px solid var(--pr-surface-brd);
}
.pr-sidebar[hidden] { display: none; }

.pr-tabs {
  flex: 0 0 auto;
  display: flex;
  border-bottom: 1px solid var(--pr-surface-brd);
}
.pr-tab {
  all: unset;
  flex: 1 1 0;
  text-align: center;
  padding: 9px 2px;
  font-size: 11.5px;
  color: var(--pr-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.pr-tab:hover { background: var(--pr-hover); }
.pr-tab.is-on { color: var(--pr-accent); border-bottom-color: var(--pr-accent); }
.pr-tab[hidden] { display: none; }

.pr-panels { flex: 1 1 auto; min-height: 0; position: relative; }
.pr-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: none;
  overscroll-behavior: contain;
}
.pr-panel.is-on { display: block; }

/* the thumbnail rail now lives inside a sidebar panel */
.pr-sidebar .pr-thumbs {
  flex: none;
  width: 100%;
  border-right: 0;
  background: transparent;
  height: auto;
  min-height: 100%;
}

.pr-list { padding: 6px 0; }

.pr-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  line-height: 1.35;
}
.pr-row:hover { background: var(--pr-hover); }
.pr-row.is-on { border-left-color: var(--pr-accent); background: var(--pr-hover); }

.pr-row__main { flex: 1 1 auto; min-width: 0; }
.pr-row__title {
  font-size: 12.5px;
  color: var(--pr-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pr-row__sub { font-size: 11px; color: var(--pr-muted); margin-top: 2px; }
.pr-row__page {
  font-size: 11px;
  color: var(--pr-muted);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.pr-row__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 4px;
}
.pr-row__del {
  all: unset;
  flex: 0 0 auto;
  color: var(--pr-muted);
  font-size: 14px;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
}
.pr-row:hover .pr-row__del { opacity: 1; }
.pr-row__del:hover { color: #e5484d; }

.pr-row mark {
  background: rgba(255, 214, 0, .45);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
html[data-theme="dark"] .pr-row mark { background: rgba(255, 214, 0, .3); }

.pr-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--pr-muted);
}

/* ── modal ────────────────────────────────────────────────────────────── */

.pr-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .45);
  padding: 20px;
}
.pr-modal[hidden] { display: none; }
.pr-modal__box {
  width: min(360px, 100%);
  background: var(--pr-surface);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.pr-modal__title { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.pr-modal__box input {
  width: 100%;
  font: inherit;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--pr-surface-brd);
  background: var(--pr-bg);
  color: var(--pr-fg);
  outline: none;
}
.pr-modal__box input:focus { border-color: var(--pr-accent); }
.pr-modal__error { color: #e5484d; font-size: 12px; margin-top: 8px; }
.pr-modal__error[hidden] { display: none; }
.pr-modal__actions { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ── toast ────────────────────────────────────────────────────────────── */

.pr-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--pr-safe-bottom));
  transform: translateX(-50%);
  z-index: 70;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(20, 22, 26, .94);
  color: #fff;
  font-size: 12.5px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
  pointer-events: none;
  max-width: min(90vw, 460px);
  text-align: center;
}
.pr-toast[hidden] { display: none; }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .pr-title { display: none; }
  .pr-toolbar__group--end .pr-ico:nth-child(n+4) { display: none; }
}

@media (max-width: 640px) {
  :root { --pr-sidebar-w: 100%; }

  /* On phones the sidebar becomes an overlay rather than stealing width. */
  .pr-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    z-index: 45;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .28);
  }
  .pr-body { position: relative; }

  .pr-select { max-width: 84px; }
  .pr-toolbar { gap: 2px; padding-inline: 4px; }
  .pr-findbar { flex-wrap: wrap; }
  .pr-findbar input[type="search"] { order: -1; flex-basis: 100%; max-width: none; }
}

@media (hover: none) {
  /* Touch devices have no hover, so row actions are always visible. */
  .pr-row__del { opacity: .6; }
}

@media print {
  .pr-toolbar, .pr-findbar, .pr-sidebar, .pr-selbar, .pr-note, .pr-toast { display: none !important; }
  .pr-viewport { overflow: visible !important; height: auto !important; }
}