/* PDF card viewer (design spec §8).
   Styles links/_pdf_viewer_dialog.html + the DOM pdf_viewer.js builds
   inside it. Namespaced under .pdfv-* so nothing here collides with
   public_link_card.css. Comments stripped at build by esbuild
   (frontend/scripts/minify-css.mjs); none reach the browser.

   #pdf-viewer-dialog is a REAL <dialog>, shown via .showModal() — the
   UA's own top-layer stacking, default centering (`margin: auto` on an
   open modal dialog) and ::backdrop are used rather than reimplemented;
   this file resets the element's default border/padding/background and
   lays out custom chrome inside it.

   Theme integration: reuses the --theme-* custom properties already set
   on every live public profile (public_link_card.css / public.css) —
   never a separate light/dark switch of its own. Small hardcoded
   fallbacks exist only for defensiveness; --theme-* is always present on
   a real profile page.

   Breakpoint: 640px. Below it the toolbar's nav/zoom groups move into
   the floating dock and one of the two close buttons swaps for the
   other — a genuinely different layout, not a squeezed copy of the
   desktop bar (see docs/redesign/collisions/DESIGN.md §2 for why
   squeezing the original is the wrong instinct once a purpose-built
   narrow layout exists — the title/subtitle column keeps `min-width: 0`
   so it is the one thing allowed to truncate, matching that document's
   own rule). */

dialog#pdf-viewer-dialog {
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--theme-card-bg, #fff);
  color: var(--theme-text, #0e0e14);
  width: min(860px, 92vw);
  height: min(720px, 88vh);
  max-width: 92vw;
  max-height: 88vh;
  box-shadow: 0 24px 60px -24px rgba(14, 14, 20, 0.35);
  overflow: hidden;
  display: none; /* [open] flips this to flex — showModal() sets [open] */
  flex-direction: column;
}
dialog#pdf-viewer-dialog[open] { display: flex; }
dialog#pdf-viewer-dialog::backdrop {
  background: rgba(14, 14, 20, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  dialog#pdf-viewer-dialog[open] { animation: pdfv-rise 200ms ease-out; }
  dialog#pdf-viewer-dialog[open]::backdrop { animation: pdfv-fade 150ms ease-out; }
}
@keyframes pdfv-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pdfv-rise { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* ---------- toolbar ---------- */
.pdfv-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--theme-card-border, #e6e2d6);
  background: var(--theme-surface, #faf8f3);
  flex: 0 0 auto;
}
.pdfv-title-wrap {
  min-width: 0; /* sink — the ONLY element in this bar allowed to shrink */
  flex: 1 1 auto;
}
.pdfv-title {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.pdfv-subtitle {
  font-weight: 400;
  font-size: 12px;
  color: var(--theme-text-muted, #87837a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.pdfv-subtitle--mobile { display: none; }

.pdfv-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--theme-card-bg, #fff);
  border: 1px solid var(--theme-card-border, #e6e2d6);
  border-radius: 999px;
  padding: 2px;
  flex: 0 0 auto; /* never shrinks — buttons never overlap the title sink */
}
.pdfv-ib {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--theme-text-muted, #4a4a55);
  cursor: pointer;
  flex: 0 0 auto;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
}
.pdfv-ib:hover { background: var(--theme-surface, #f3f0e8); color: var(--theme-text, #0e0e14); }
.pdfv-ib:focus-visible { outline: 2px solid var(--theme-accent, #5a54f0); outline-offset: 1px; }
.pdfv-ib:disabled { opacity: 0.35; cursor: not-allowed; }
/* Close is a plain icon button, like every other control in the bar. It
   used to add a 1px border and a card-coloured fill, which made it the only
   boxed element on the bar — and on mobile, where .pdfv-ib grows to a 44px
   touch target, that box became the heaviest thing on screen, sitting right
   beside the title and reading as a form field rather than a dismiss.
   Weight now comes from the icon alone; the hover/active surface inherited
   from .pdfv-ib still gives it a target that feels pressable. */
.pdfv-close { width: 30px; height: 30px; }
.pdfv-close--leading { display: none; } /* mobile only — see media query below */

.pdfv-pgi {
  font-size: 12px;
  color: var(--theme-text-muted, #4a4a55);
  /* A floor, not a cap: enough that "Page 1 of 9" doesn't jitter as the
     number changes, and wider than the bare "1 / 1" this used to hold. A
     3-digit page count grows the box past it (white-space: nowrap), and
     .pdfv-title-wrap — the bar's only shrink sink — pays for it. That is
     the intended trade: the count must stay readable, the title truncates. */
  min-width: 88px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  white-space: nowrap;
}
.pdfv-pgi-lab { margin-right: 3px; }
.pdfv-page-input {
  width: 24px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: right;
  color: var(--theme-text, #0e0e14);
  font-weight: 600;
  padding: 0;
}
.pdfv-page-input:focus-visible { outline: 2px solid var(--theme-accent, #5a54f0); border-radius: var(--r-sm); }
.pdfv-pgi--readonly { color: #e8e4dc; }
.pdfv-zl {
  font-size: 12px;
  color: var(--theme-text-muted, #4a4a55);
  min-width: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pdfv-download-slot { display: contents; } /* the <a> pdf_viewer.js injects lays out as a normal .pdfv-ib */

/* ---------- body: continuous scroll of page canvases ---------- */
.pdfv-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--theme-surface, #e9e5dd);
  padding: 18px; /* pdf_viewer.js's BODY_PADDING_PX (36) = both sides of this value */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overscroll-behavior: contain;
}
.pdfv-page {
  position: relative;
  background: #fff;
  box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.28);
  flex: 0 0 auto;
  line-height: 0;
}
.pdfv-page canvas { display: block; width: 100%; height: 100%; }
.pdfv-textlayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-align: initial;
  transform-origin: 0 0;
}
.pdfv-textlayer span,
.pdfv-textlayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; }
.pdfv-textlayer ::selection { background: rgba(90, 84, 240, 0.35); }

.pdfv-skeleton {
  background: linear-gradient(
    100deg,
    var(--theme-card-bg, #fff) 30%,
    var(--theme-surface, #f3f0e8) 50%,
    var(--theme-card-bg, #fff) 70%
  );
  background-size: 200% 100%;
  animation: pdfv-shimmer 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pdfv-skeleton { animation: none; } }
@keyframes pdfv-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- loading progress (pdf_viewer.js's showLoadingState markup) ---------- */
.pdfv-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  padding: 24px;
}
.pdfv-loading-page {
  width: min(376px, 80%);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
}
.pdfv-progress {
  width: min(220px, 70%);
  height: 5px;
  border-radius: 999px;
  background: var(--theme-card-border, #e6e2d6);
  overflow: hidden;
}
.pdfv-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--theme-accent, #5a54f0);
  border-radius: 999px;
  transition: width 150ms linear;
}
@media (prefers-reduced-motion: reduce) { .pdfv-progress-fill { transition: none; } }
.pdfv-progress-fill[data-indeterminate] {
  width: 40% !important;
  animation: pdfv-indeterminate 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pdfv-progress-fill[data-indeterminate] { animation: none; width: 60% !important; }
}
@keyframes pdfv-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ---------- footer ---------- */
.pdfv-foot {
  padding: 7px 14px;
  border-top: 1px solid var(--theme-card-border, #e6e2d6);
  background: var(--theme-surface, #faf8f3);
  font-size: 12px;
  color: var(--theme-text-muted, #87837a);
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
}

/* ---------- failure state (pdf_viewer.js's renderErrorState markup) ---------- */
.pdfv-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.pdfv-error h2 { font-size: 16px; font-weight: 700; margin: 0; }
.pdfv-error p { font-size: 13px; color: var(--theme-text-muted, #4a4a55); margin: 0; max-width: 36ch; }
.pdfv-error-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.pdfv-btn {
  border: 1px solid var(--theme-card-border, #e6e2d6);
  background: var(--theme-card-bg, #fff);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--theme-text, #0e0e14);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.pdfv-btn:hover { background: var(--theme-surface, #f3f0e8); }
.pdfv-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pdfv-btn:focus-visible { outline: 2px solid var(--theme-accent, #5a54f0); outline-offset: 1px; }

/* ---------- mobile dock ---------- */
.pdfv-dock {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom));
  align-items: center;
  gap: 3px;
  background: rgba(20, 18, 16, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 200ms ease;
}
@media (prefers-reduced-motion: reduce) { .pdfv-dock { transition: none; } }
.pdfv-dock[data-faded] { opacity: 0.4; }
.pdfv-dock .pdfv-ib { color: #e8e4dc; }
.pdfv-dock .pdfv-ib:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pdfv-dock-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.2); margin: 0 3px; }

/* ---------- ≤640px — full-screen sheet, dock replaces the bar's nav/zoom ---------- */
@media (max-width: 640px) {
  dialog#pdf-viewer-dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    inset: 0;
  }
  .pdfv-bar { padding: 10px 10px 10px 12px; }
  .pdfv-close--leading { display: inline-flex; }
  /* Slightly stronger than the muted default: with the box gone, the glyph
     is the entire affordance, and it sits on the bar's surface colour. */
  .pdfv-close--leading { color: var(--theme-text, #0e0e14); }
  .pdfv-close--trailing { display: none; }
  /* Page-nav and zoom both move to the floating dock — shed, not shrunk
     (docs/redesign/collisions/DESIGN.md §2's "shed constants before
     truncating identity"): the bar keeps only close + title + download,
     matching the design's mobile sheet-bar, not a
     squeezed copy of the desktop bar's five control clusters. */
  .pdfv-nav-group,
  .pdfv-zoom-group { display: none; }
  .pdfv-subtitle--desktop { display: none; }
  .pdfv-subtitle--mobile { display: block; }
  .pdfv-foot { display: none; } /* spec §8.3 — Esc hint + facts line are desktop-only */
  .pdfv-body { padding: 12px; padding-bottom: calc(12px + 64px + env(safe-area-inset-bottom)); }
  .pdfv-dock { display: flex; }
  /* ≥44px touch targets (WCAG 2.5.8) without inflating the glyph itself —
     padding grows the hit area, the icon stays visually the same size. */
  .pdfv-ib { width: 44px; height: 44px; }
}

/* 320px specifically — nothing else can overflow at this width since the
   nav/zoom groups are already gone (moved to the dock) at ≤640px,
   leaving only close / title / download / close(hidden) in the bar, and
   the title already truncates via min-width: 0 above. */
@media (max-width: 359px) {
  .pdfv-bar { padding: 8px 8px 8px 10px; gap: 4px; }
  .pdfv-title { font-size: 13px; }
  .pdfv-dock { padding: 4px 5px; gap: 2px; }
}

/* ---------- print: hide chrome, let the browser print what it can see ---------- */
@media print {
  /* Download off: do not render a clean printable copy. Ctrl+P is otherwise
     an unmetered download of a file the owner chose not to share, and it
     leaves no pd event. Suppressing the document is the print-path twin of
     the Sec-Fetch-Dest block on the doc route. */
  dialog#pdf-viewer-dialog[data-pdfv-download="0"] .pdfv-body {
    display: none !important;
  }
  dialog#pdf-viewer-dialog[data-pdfv-download="0"]::after {
    content: "This document is view-only.";
    display: block;
    padding: 24px;
    font: inherit;
  }

  .pdfv-bar, .pdfv-dock, .pdfv-foot { display: none !important; }
  dialog#pdf-viewer-dialog::backdrop { display: none; }
  dialog#pdf-viewer-dialog[open] {
    position: static;
    box-shadow: none;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
  }
  .pdfv-body { overflow: visible; background: none; }
}