/* ============================================================
   RESUME PDF VIEWER
   In-app PDF rendering via PDF.js canvases inside a window.
   ============================================================ */

/* ----------------------------------------------------------
   Transparent title bar — matches calendar/projects pattern.
   macOS only: 44px height for 32px buttons with 6px clearance.
   iOS keeps its native 50px from window_title_bar.dart.
   ---------------------------------------------------------- */

[data-window-id="resume"] .window-title-bar:not(.window-title-bar--ios) {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  height: 44px !important;
}

/* iOS title bar: keep 50px height, just make background transparent
   so the content-title-gradient handles readability instead. */
[data-window-id="resume"] .window-title-bar.window-title-bar--ios {
  background: transparent !important;
}

/* Traffic lights (macOS only): match sidebar left offset (16px)
   for concentric placement with the 18px corner radius. */
[data-window-id="resume"] .window-controls {
  left: 16px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Override default .window-content: kill padding and make it
   a flex container so the inner scroll container can fill height.
   padding-top: 0 for macOS (content scrolls behind transparent bar).
   padding-top preserved for iOS via the more-specific rule below. */
[data-window-id="resume"] .window-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden; /* delegate scrolling to .resume-window-content__scroll */
}

/* iOS: restore padding-top so content clears the 50px title bar.
   Specificity 0,3,0 beats both the rule above (0,2,0) and
   .window--ios .window-content (0,2,0 from Dart <style>). */
.window--ios[data-window-id="resume"] .window-content {
  padding-top: 0 !important;
}

/* iOS persistent actions: the generic limit is 60px (one 44px button).
   Resume has two persistent actions (Download + Share): 2×44 + 8px gap = 96px. */
[data-window-id="resume"] .window-title-bar--ios .window-persistent-actions--visible {
  max-width: 104px; /* 96px content + 8px breathing room */
}

/* Title container (macOS): reduce left offset (no back button)
   and match right offset for chrome actions — centers title
   between traffic lights and action buttons. */
[data-window-id="resume"] .window-title-container {
  left: 70px;
  right: 70px;
}

/* ----------------------------------------------------------
   Window content layout
   ---------------------------------------------------------- */

.resume-window-content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* No arbitrary background color — inherits the window's own
     var(--window-background).  The PDF content fades in over it
     via the crossfade transition below. */
}

.resume-window-content__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------
   PDF viewer — full-bleed, crossfade architecture
   Single persistent DOM: overlay + pages coexist.
   .resume-viewer--rendered triggers the crossfade.
   ---------------------------------------------------------- */

.resume-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Ensure the viewer fills height so the overlay centers properly
     even when page canvases haven't been rendered yet. */
  min-height: 100%;
}

/* Loading overlay — sits on top of page canvases.
   Fades out when .resume-viewer--rendered is applied. */
.resume-viewer__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.35s ease-out;
  pointer-events: none;
}

.resume-viewer--rendered .resume-viewer__overlay {
  opacity: 0;
}

/* Page container — starts invisible, fades in on render. */
.resume-viewer__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.resume-viewer--rendered .resume-viewer__pages {
  opacity: 1;
}

/* Error state */
.resume-viewer--error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.resume-viewer--error a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  margin-top: 8px;
}

/* ----------------------------------------------------------
   Individual page canvas — full width, preserved aspect ratio
   ---------------------------------------------------------- */

.resume-viewer__page {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* Overlap subsequent pages by 1px to eliminate sub-pixel
   rounding gaps from height:auto on fractional canvas heights. */
.resume-viewer__page + .resume-viewer__page {
  margin-top: -1px;
}

.resume-viewer__page canvas {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------
   Chrome action buttons — dark icons on tinted glass.
   Once the PDF fades in, these buttons overlay white document
   content; dark icons ensure contrast. Refraction/shine
   layers are untouched.
   ---------------------------------------------------------- */

.resume-download-action .lg-button-glass,
.resume-share-action .lg-button-glass,
.resume-close-action .lg-button-glass {
  --lg-btn-tint: linear-gradient(
    135deg,
    rgba(200, 200, 210, 0.35),
    rgba(180, 180, 195, 0.25)
  );
}

.resume-download-action img,
.resume-share-action img,
.resume-close-action img {
  filter: brightness(0);
}

/* iOS: bump tall-viewBox SF Symbols (share, download) to 24px
   matching the established pattern in window.css for .window-share-action__icon.
   xmark stays at 16px — its square viewBox fills naturally. */
.window-title-bar--ios .resume-download-action img,
.window-title-bar--ios .resume-share-action img {
  width: 24px;
  height: 24px;
}