/* ==========================================================================
   CV viewer. Loaded after welcomePage.css and reuses its tokens.
   ========================================================================== */

/* ============ Top bar ============ */

.cv-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: calc(.7rem + env(safe-area-inset-top, 0px)) clamp(1rem, 4vw, 3rem) .7rem;
  background-color: rgb(27 32 39 / .96);
  backdrop-filter: blur(6px);
  border-bottom: var(--frame);
}

.cv-back {
  flex: none;
  color: var(--chalk-lo);
  font-family: var(--mono);
  font-size: .8rem;
  text-decoration: none;
}

.cv-back:hover {
  color: var(--accent);
}

.cv-bar__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  font-stretch: 108%;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cv-actions {
  display: flex;
  flex: none;
  gap: .5rem;
}

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: .5rem .95rem;
  background-color: var(--bg-2);
  border: var(--frame);
  color: var(--chalk-hi);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.btn:hover {
  background-color: var(--bg-3);
  border-color: var(--rule-hi);
  color: var(--chalk-hi);
}

.btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.btn--primary:hover {
  background-color: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--bg);
}

.btn:disabled {
  opacity: .45;
  cursor: progress;
}

.btn svg {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn[hidden] {
  display: none;
}

/* ============ Document ============ */

.cv-main {
  padding: clamp(1.25rem, 4vw, 3rem) clamp(.9rem, 4vw, 3rem) 4rem;
}

.cv-status {
  max-width: none;
  margin: 0 auto 1rem;
  width: min(100%, 860px);
  min-height: 1.3em;
  color: var(--chalk-lo);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .02em;
}

.cv-doc {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  width: min(100%, 860px);
  margin: 0 auto;
  isolation: isolate;
}

.cv-page {
  position: relative;
  aspect-ratio: var(--ratio, 210 / 297);
  background-color: #fff;
  box-shadow: 0 20px 44px -22px rgb(0 0 0 / .75);
}

/* Offset hatch, same device as the portrait on the home page: reads as a
   sheet of paper lifted off the slate. */
.cv-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px -12px -12px 12px;
  background-image: var(--hatch);
}

.cv-page.is-loading {
  background-color: var(--bg-2);
  border: var(--frame);
  box-shadow: none;
}

.cv-page canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cv-links a {
  position: absolute;
  z-index: 3;
  display: block;
  transition: background-color .15s;
}

.cv-links a:hover {
  background-color: rgb(232 163 61 / .18);
}

.cv-fallback {
  max-width: none;
  padding: 1.25rem;
  background-color: var(--bg-2);
  border: var(--frame);
  border-left: 3px solid var(--accent);
}

.print-frame {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ============ pdf.js text layer (trimmed from pdf_viewer.css 3.11) ============ */

.textLayer {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-align: initial;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
}

.textLayer :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer ::selection {
  background: rgb(232 163 61 / .35);
}

.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  position: absolute;
  z-index: -1;
  inset: 100% 0 0;
  display: block;
  cursor: default;
  user-select: none;
}

.textLayer .endOfContent.active {
  top: 0;
}

/* ============ Phones: actions move to a bottom bar within thumb reach ============ */

@media (max-width: 719px) {
  .cv-bar {
    /* backdrop-filter would make the bar the containing block of the fixed
       action bar below, pinning it to the top instead of the viewport. */
    backdrop-filter: none;
    background-color: var(--bg);
  }

  .cv-actions {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding: .6rem clamp(.9rem, 4vw, 3rem) calc(.6rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--bg);
    border-top: var(--frame);
  }

  .btn {
    min-height: 2.9rem;
  }

  .cv-main {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }

  .cv-page::before {
    inset: 8px -8px -8px 8px;
  }
}

/* ============ Print: one canvas per sheet, nothing else ============ */

@media print {
  @page {
    margin: 0;
  }

  html,
  body {
    background: #fff !important;
  }

  .cv-bar,
  .cv-status,
  .skip,
  .print-frame,
  .textLayer,
  .cv-links,
  .cv-page::before {
    display: none !important;
  }

  .cv-main {
    padding: 0;
  }

  .cv-doc {
    display: block;
    width: 100%;
  }

  .cv-page {
    aspect-ratio: auto;
    box-shadow: none;
    break-after: page;
    break-inside: avoid;
  }

  .cv-page:last-child {
    break-after: auto;
  }

  /* max-height guards against sub-pixel rounding spilling onto a blank sheet. */
  .cv-page canvas {
    position: static;
    width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
  }
}