/* wtpp-personal-reading-path.css — v3.7.514
 * Styles for the Personal Reading Path (PRP). The popover itself is a
 * .wtpp-header-popover (frame, border, anchoring, padding inherited); these
 * rules style its contents, the header icon + count badge, and the per-card
 * catalog icon hook. Token-only colors.
 */

/* ---------- header icon button + count badge ---------- */
.wtpp-prp-header-btn { position: relative; }
.wtpp-prp-count {
  position: absolute; top: 1px; right: 1px;
  min-width: 14px; height: 14px; padding: 0 3px;
  font-size: 9px; line-height: 14px; font-weight: 700; text-align: center;
  border-radius: 8px; color: var(--paper); background: var(--ink-soft);
  font-family: 'Inconsolata', 'Courier New', monospace;
  pointer-events: none;
}

/* ---------- popover contents ---------- */
.wtpp-prp-popover {
  width: 300px; max-height: min(580px, calc(100vh - 120px)); overflow-y: auto;
}
.wtpp-prp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.wtpp-prp-panel-title {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-family: 'Inconsolata', 'Courier New', monospace;
  margin: 2px 0 0;
}
.wtpp-prp-panel-title::after {
  content: ""; display: block; width: 26px; height: 2px; margin-top: 6px;
  background: var(--red);
}
/* add-current ("+") icon, top-right of the popover header */
.wtpp-prp-add-current {
  flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--ink-soft);
}
.wtpp-prp-add-current svg { width: 21px; height: 21px; }
.wtpp-prp-add-current:hover { background: var(--paper-shade); color: var(--red); }
.wtpp-prp-add-current:disabled { opacity: 0.35; cursor: default; }
.wtpp-prp-add-current:disabled:hover { background: none; color: var(--ink-soft); }

/* ---------- list ---------- */
.wtpp-prp-list { margin: 2px 0 10px; }
.wtpp-prp-empty {
  margin: 4px 2px 6px; font-size: 12px; line-height: 1.45; color: var(--ink-muted);
}
.wtpp-prp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  transition: border-color .12s ease, background .12s ease, padding-left .12s ease;
}
.wtpp-prp-item:last-child { border-bottom: 0; }
/* hover highlight mirrors the Page History rows: shaded background + left
   accent + slight shift, with no change to the text colour */
.wtpp-prp-item:hover {
  background: var(--paper-shade); border-left-color: var(--red);
  padding-left: 8px; border-radius: 0 3px 3px 0;
}
/* the entry for the page the visitor is currently on (matches the site menu's
   active-page highlight idiom: left accent + shaded background) */
.wtpp-prp-item.is-current {
  background: var(--paper-shade); border-left-color: var(--red);
  padding-left: 8px; border-radius: 0 3px 3px 0;
}
.wtpp-prp-item-num {
  flex: 0 0 auto; min-width: 18px; font-size: 12px; color: var(--blue);
  font-family: 'Inconsolata', 'Courier New', monospace;
}
.wtpp-prp-item-title {
  flex: 1 1 auto; font-size: 13px; line-height: 1.35; color: var(--blue);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* The titles are <a> links, so the global theme rules
   (html[data-theme="dark"] a -> --red, a:visited -> --blue) were giving the
   list a red/blue mix. Pin every title to the menu link colour in both the
   visited and unvisited states, at a specificity that beats those globals --
   the same idiom the share menu uses. */
.wtpp-prp-item .wtpp-prp-item-title,
.wtpp-prp-item .wtpp-prp-item-title:visited { color: var(--blue); }
.wtpp-prp-item-remove {
  flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--ink-muted);
}
.wtpp-prp-item-remove:hover { background: var(--paper-shade); color: var(--red); }
.wtpp-prp-item-remove svg { width: 14px; height: 14px; }
.wtpp-prp-item-move {
  flex: 0 0 auto; width: 22px; height: 24px; display: inline-flex;
  align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  color: var(--ink-muted);
}
.wtpp-prp-item-move:hover { background: var(--paper-shade); color: var(--red); }
.wtpp-prp-item-move:disabled { opacity: 0.3; cursor: default; }
.wtpp-prp-item-move:disabled:hover { background: none; color: var(--ink-muted); }
.wtpp-prp-item-move svg { width: 15px; height: 15px; }

/* ---------- actions ---------- */
.wtpp-prp-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.wtpp-prp-actions .wtpp-btn { padding: 5px 10px; font-size: 12px; }
.wtpp-prp-actions .wtpp-prp-start,
.wtpp-prp-actions .wtpp-prp-listen { width: 100%; }
.wtpp-prp-actions .wtpp-prp-clear { align-self: flex-end; }
.wtpp-prp-actions .wtpp-prp-start svg,
.wtpp-prp-actions .wtpp-prp-listen svg { width: 13px; height: 13px; margin-right: 2px; }
.wtpp-prp-actions button:disabled { opacity: 0.5; cursor: default; }
/* ===== v3.7.610 Reading-Path Side TOC (pill, playback, anchoring) — tokenized ===== */
/* v3.7.622: the reading-path window adopts the standard menu-window width
   (the same min(320px, calc(100vw - 24px)) every .wtpp-header-popover uses),
   replacing its prior fixed 250px. */
.wtpp-rptoc{position:fixed;width:min(320px, calc(100vw - 24px));max-width:320px;max-height:calc(100vh - 120px);z-index:48;overflow-y:auto;overflow-x:hidden;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink-muted);border-radius:4px;
  box-shadow:0 4px 14px var(--ov-black-15);font-family:Georgia,serif;font-size:13px;line-height:1.45;}
/* v3.7.625: header restyled to match the Site Menu / MY READING PATH menu
   header (.wtpp-header-popover h3): no full-width divider (the red underline
   under the title is the separator), --ink-soft uppercase mono title at 0.08em
   with a 26px red underline accent. */
.wtpp-rptoc-head{display:flex;flex-direction:column;gap:5px;padding:10px 12px;
  position:sticky;top:0;z-index:2;background:var(--paper);box-shadow:0 2px 6px var(--ov-black-15);}
.wtpp-rptoc-head-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wtpp-rptoc-title{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
.wtpp-rptoc-title::after{content:"";display:block;width:26px;height:2px;margin-top:6px;background:var(--red);border-radius:2px;}
.wtpp-rptoc-pathname{font-family:Georgia,serif;font-size:13px;line-height:1.25;color:var(--ink);font-weight:700;}
.wtpp-rptoc-tools{display:flex;gap:4px;flex:none;}
.wtpp-rptoc-tool{appearance:none;border:1px solid var(--rule);background:transparent;color:var(--ink-muted);cursor:pointer;border-radius:4px;width:24px;height:22px;font-size:13px;line-height:1;padding:0;}
.wtpp-rptoc-tool:hover{color:var(--ink);border-color:var(--ink-muted);}
.wtpp-rptoc-body{padding:8px 10px 12px;}
.wtpp-rptoc-playrow{display:flex;gap:6px;margin:0 0 10px;flex-wrap:wrap;}
.wtpp-rptoc-playall{flex:1 1 auto;padding:7px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--red);cursor:pointer;text-align:center;}
.wtpp-rptoc-playall:hover{background:var(--paper-shade);}
.wtpp-rptoc-resume{color:var(--ink-muted);}
.wtpp-rptoc-progress{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:2px 2px 8px;}
.wtpp-rptoc-list{list-style:none;margin:0;padding:0;}
.wtpp-rptoc-item{display:flex;align-items:flex-start;gap:5px;padding:5px 4px;border-radius:4px;position:relative;}
.wtpp-rptoc-item + .wtpp-rptoc-item{border-top:1px solid var(--rule);}
.wtpp-rptoc-play{appearance:none;border:none;background:transparent;color:var(--red);cursor:pointer;font-size:9px;line-height:1;padding:3px 2px 0;flex:none;}
.wtpp-rptoc-play:hover{color:var(--ink);}
.wtpp-rptoc-num{flex:none;font-family:var(--mono);font-size:10px;color:var(--ink-muted);min-width:15px;text-align:right;padding-top:2px;}
/* v3.7.626: visited links no longer get a distinct colour (was --ink-muted);
   both states are pinned to --red so the list isn't a two-tone red/grey mix. */
.wtpp-rptoc .wtpp-rptoc-link,.wtpp-rptoc .wtpp-rptoc-link:visited{flex:1 1 auto;color:var(--red);text-decoration:none;font-size:12.5px;}
.wtpp-rptoc-link:hover{text-decoration:underline;}
.wtpp-rptoc-here{background:var(--paper-shade);}
.wtpp-rptoc-here .wtpp-rptoc-link,.wtpp-rptoc-here .wtpp-rptoc-link:visited{font-weight:700;color:var(--red);}
.wtpp-rptoc-here-dot{flex:none;color:var(--red);font-size:9px;padding-top:3px;cursor:help;}
.wtpp-rptoc-itemctrls{flex:none;display:flex;gap:2px;opacity:.55;}
.wtpp-rptoc-item:hover .wtpp-rptoc-itemctrls{opacity:1;}
.wtpp-rptoc-ictl{appearance:none;border:none;background:transparent;cursor:pointer;color:var(--ink-muted);font-size:12px;line-height:1;padding:1px 3px;border-radius:3px;}
.wtpp-rptoc-ictl:hover{background:var(--paper-shade);color:var(--ink);}
.wtpp-rptoc-ictl-rm:hover{color:var(--red);}
.wtpp-rptoc-legend{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--ink-muted);}
.wtpp-rptoc-mini{display:inline-block;margin:6px 0 0;padding:6px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--red);cursor:pointer;text-align:left;width:100%;}
.wtpp-rptoc-mini:hover{background:var(--paper-shade);}
.wtpp-rptoc-mini-quiet{color:var(--ink-muted);}
.wtpp-rptoc-mini-quiet:hover{color:var(--ink);}
.wtpp-rptoc-stray{border:1px solid var(--rule);border-left:3px solid var(--red);border-radius:4px;padding:8px 10px;margin:0 0 10px;background:var(--paper-shade);}
.wtpp-rptoc-stray-msg{font-size:12.5px;margin-bottom:6px;}
.wtpp-rptoc-stray-acts{display:flex;flex-direction:column;gap:4px;}
.wtpp-rptoc-stray-acts .wtpp-rptoc-mini{margin-top:0;}
.wtpp-rptoc-group{margin:0 0 2px;}
.wtpp-rptoc-group-h{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:5px 2px;list-style:none;}
.wtpp-rptoc-group-h::-webkit-details-marker{display:none;}
.wtpp-rptoc-group[open] > .wtpp-rptoc-group-h{color:var(--ink);}
.wtpp-rptoc-sublist{margin-left:4px;padding-left:6px;border-left:1px solid var(--rule);}
.wtpp-rptoc-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:4px;}
.wtpp-rptoc-switch{margin-top:10px;}
.wtpp-rptoc-switch-h{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);list-style:none;padding:4px 2px;}
.wtpp-rptoc-switch-h::-webkit-details-marker{display:none;}
.wtpp-rptoc-picker{margin-top:4px;}
.wtpp-rptoc-picker-h{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin:4px 2px 4px;}
.wtpp-rptoc-picker-item{display:block;width:100%;text-align:left;background:transparent;cursor:pointer;border:1px solid var(--rule);border-radius:4px;padding:7px 9px;margin-bottom:5px;}
.wtpp-rptoc-picker-item:hover{border-color:var(--red);background:var(--paper-shade);}
.wtpp-rptoc-picker-title{display:block;font-weight:700;font-size:12.5px;color:var(--ink);}
.wtpp-rptoc-picker-sub{display:block;font-size:11px;color:var(--ink-muted);margin-top:2px;}
.wtpp-rptoc-empty-note{font-size:12px;color:var(--ink-muted);margin:2px 2px 8px;}
/* collapsed pill (mirrors the reading-focus pill aesthetic) */
.wtpp-rptoc-pill{position:fixed;z-index:48;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;
  /* v3.7.622/.623: full pill size standardized to the Reading Focus pill
     (.wtpp-tts-return): 33px min box height, 9px 14px padding, 13px/600 text,
     so the two floating pills render at the same size. */
  min-height:33px;box-sizing:border-box;
  border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink);
  /* v3.7.624: font style + text colour taken from the Reading Focus pill
     (.wtpp-tts-return): the body font (inherit) and --ink, in place of the
     prior mono font and --ink-muted. */
  font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;box-shadow:0 3px 12px var(--ov-black-15);}
.wtpp-rptoc-pill:hover{color:var(--ink);border-color:var(--ink-muted);}
/* v3.7.624: book icon recoloured to --ink (matching the Reading Focus pill's
   font colour) and sized to 16px to match the main-menu (header) icons. */
.wtpp-rptoc-pill-ico{color:var(--ink);font-size:13px;line-height:1;display:inline-flex;align-items:center;}
.wtpp-rptoc-pill-ico svg{width:16px;height:16px;display:block;}
.wtpp-rptoc-pill-label{white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis;}
.wtpp-rptoc-pill-chev{color:var(--ink-muted);}
@media (max-width:640px){.wtpp-rptoc-pill-label{max-width:130px;}}