/* v3.7.327: Styles for the "Recently visited" section
 * inside the bookmark/history popover. Designed to match the
 * existing popover button styles (defined in wtpp-bookmark-
 * styles.css) — subtle, unobtrusive, vertical list. */
.wtpp-recent-pages-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border, var(--ov-black-10));
}
.wtpp-recent-pages-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft, var(--ink-soft));
  margin-bottom: 6px;
  padding-left: 2px;
}
.wtpp-recent-pages-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wtpp-recent-pages-item {
  display: block;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 3px;
  text-align: left;
  color: var(--ink, var(--ink-15x));
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wtpp-recent-pages-item:hover {
  background: var(--surface-hover, var(--ov-black-06));
}
.wtpp-recent-pages-item:focus-visible {
  outline: 2px solid var(--accent, var(--red));
  outline-offset: 1px;
}
.wtpp-recent-pages-empty {
  font-size: 12px;
  color: var(--ink-soft, var(--ink-soft));
  font-style: italic;
  padding: 4px 2px;
}

/* v3.7.349: Accent-Left popover treatment (Mockup C) — RECENT-PAGES ROWS,
 * matching the site menu so the link-list popovers are consistent. */
.wtpp-recent-pages-item {
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  transition: border-color .12s ease, background .12s ease,
              padding-left .12s ease, color .12s ease;
}
.wtpp-recent-pages-item:hover {
  border-left-color: var(--red, var(--red));
  background: var(--paper-shade, var(--ov-black-06));
  padding-left: 11px;
}

/* v3.7.352: Page History rows with inline controls (pin toggle on recent
 * rows; up/down/unpin on pinned rows). The row reuses .wtpp-recent-pages-item
 * (so it keeps the Accent-Left treatment) but becomes a flex container with a
 * navigable link + a control cluster that reveals on hover. */
.wtpp-recent-pages-item.wtpp-hist-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
  white-space: normal;
}
.wtpp-hist-link {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}
.wtpp-hist-ctrls {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  opacity: 0.5;
  transition: opacity .12s ease;
}
.wtpp-recent-pages-item.wtpp-hist-row:hover .wtpp-hist-ctrls,
.wtpp-recent-pages-item.wtpp-hist-row:focus-within .wtpp-hist-ctrls {
  opacity: 1;
}
.wtpp-hist-ctrl {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--ink-muted, var(--ink-muted));
  cursor: pointer;
}
.wtpp-hist-ctrl svg { width: 13px; height: 13px; display: block; }
.wtpp-hist-ctrl:hover {
  color: var(--red, var(--red));
  background: var(--paper-deep, var(--ov-black-06));
}
.wtpp-hist-ctrl:disabled { opacity: 0.3; cursor: default; }
.wtpp-hist-ctrl:disabled:hover {
  color: var(--ink-muted, var(--ink-muted));
  background: transparent;
}

/* v3.7.354: Page History header row — title + a share/export icon to its
 * right (replaces the full-width "Email history" button). */
.wtpp-hist-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.wtpp-hist-share {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -2px -4px 0 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--ink-muted, var(--ink-muted));
  cursor: pointer;
  transition: color .12s ease, background .12s ease;
}
.wtpp-hist-share svg { width: 15px; height: 15px; display: block; }
.wtpp-hist-share:hover,
.wtpp-hist-share:focus-visible {
  color: var(--red, var(--red));
  background: var(--paper-deep, var(--ov-black-06));
  outline: none;
}

/* v3.7.354: "this page" row (the current page, surfaced as pinnable at the
 * top of the recent list). */
.wtpp-hist-current-tag {
  flex: 0 0 auto;
  font-family: var(--mono, "Inconsolata", monospace);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, var(--ink-muted));
  opacity: 0.85;
  white-space: nowrap;
  margin-left: 2px;
}
.wtpp-hist-current .wtpp-hist-link { cursor: default; }

/* v3.7.356: icon-popover menu items use the BLUE font (matching the previous
 * Site Menu). Inactive items -> --blue; active/current -> --red. Both themes.
 *
 * This file loads late (#27, after theme-styles/i18n/btn-system), so
 * equal-specificity ties resolve in its favor. The anchor-based items (Site
 * Menu, Page History) additionally need dark-mode selectors that beat the
 * global, unscoped `html[data-theme="dark"] a` / `a:visited` rules in
 * wtpp-theme-styles.css (0,1,2)/(0,2,2); the (0,3,1) selectors below do.
 * --blue is theme-aware (#3C3B6E on light paper, #8a89b8 on dark), so it
 * stays readable in both modes. */

/* Inactive menu items -> blue */
.wtpp-header-popover .wtpp-nav-menu-link,
.wtpp-header-popover .wtpp-hist-link,
.wtpp-popover-language .lang-option,
.wtpp-popover-theme-buttons .wtpp-popover-theme-btn {
  color: var(--blue, var(--blue));
}
/* Dark mode: beat the global anchor hijack for the anchor-based items */
html[data-theme="dark"] .wtpp-header-popover .wtpp-nav-menu-link,
html[data-theme="dark"] .wtpp-header-popover .wtpp-hist-link {
  color: var(--blue, var(--navy-56));
}
/* Active / current -> red (preserve the active indicator + its red rail) */
.wtpp-header-popover .wtpp-nav-menu-link.active,
.wtpp-popover-language .lang-option.current,
.wtpp-popover-theme-buttons .wtpp-popover-theme-btn[aria-pressed="true"],
html[data-theme="dark"] .wtpp-header-popover .wtpp-nav-menu-link.active {
  color: var(--red, var(--red));
}

/* v3.7.358: Share menu rows (Share… / Copy link / Email / Download). Accent-
 * left rows with a leading glyph + blue label, matching the other popover
 * menus. Buttons, so unaffected by the global dark-anchor rule; the --blue
 * here applies in both themes (token is theme-aware). */
.wtpp-share-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  font-family: 'Inconsolata', 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--blue, var(--blue));
  transition: border-color .12s ease, background .12s ease,
              padding-left .12s ease, color .12s ease;
}
.wtpp-share-menu-item:hover,
.wtpp-share-menu-item:focus {
  border-left-color: var(--red, var(--red));
  background: var(--paper-shade, var(--ov-black-06));
  padding-left: 15px;
  outline: none;
}
.wtpp-share-menu-item svg { width: 15px; height: 15px; flex: 0 0 auto; }
.wtpp-share-menu-label { flex: 1 1 auto; }

/* v3.7.394: three-section share menu (this page / reading list / platform).
   Section headers separate the three share scopes so users see at a glance
   what they're sharing. Subtle eyebrow style matches the rest of the
   header-popover language. */
.wtpp-share-menu-section + .wtpp-share-menu-section {
  margin-top: 4px;
  border-top: 1px solid var(--rule, var(--ov-black-06));
  padding-top: 6px;
}
.wtpp-share-menu-section-header {
  font-family: var(--mono, "Inconsolata", "Courier New", monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted, var(--ink-muted));
  padding: 6px 12px 4px;
  font-weight: 600;
}
.wtpp-share-menu-link {
  text-decoration: none;
  color: inherit;
}
/* v3.7.513: the share-menu link is an <a>, so the global dark-theme rule
   html[data-theme="dark"] a { color: var(--red) } was recoloring it red while
   the sibling <button> items stayed blue. A two-class selector (higher
   specificity) restores parity with the other menu items in every theme. */
.wtpp-share-menu-item.wtpp-share-menu-link { color: var(--blue, var(--blue)); }
.wtpp-share-menu-link:hover,
.wtpp-share-menu-link:focus {
  text-decoration: none;
}