/* Résumé viewer: the zoomed-in desk stays visible behind a web copy of the LaTeX résumé. */

/* ---- The view: full screen, lightly dimmed so the desk shows through */
#resume-window {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; overflow: auto;
}
#resume-window::backdrop { background: rgba(51, 44, 33, .22); backdrop-filter: none; }
#resume-window[open] .viewer-column { animation: paper-in .25s ease-out; }
@keyframes paper-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #resume-window[open] .viewer-column { animation: none; } }

.viewer-column { width: min(860px, calc(100% - 32px)); margin: 84px auto 32px; display: grid; gap: 12px; }

/* Header bar in the site's drafting style */
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px 10px 18px;
  background: var(--paper-center); border: 1px solid var(--drawing-rule);
}
.viewer-bar h2 { margin: 0; font: 400 22px var(--drawing-serif); color: #332c21; }
.viewer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.viewer-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  font: 15px var(--drawing-serif); color: #332c21; text-decoration: none;
  background: transparent; border: 1px solid var(--drawing-rule); border-radius: 0;
}
.viewer-button:hover { background: #b4a68b24; }
.viewer-primary { background: var(--paper-edge); border-color: #332c21; }
.viewer-primary:hover { background: color-mix(in srgb, var(--paper-edge) 70%, var(--drawing-rule)); }

/* ---- The paper frame (the sheet's own styles are in css/resume-sheet.css) */
.sheet-frame { container-type: inline-size; box-shadow: 0 14px 40px #2b221633; }

@media (max-width: 600px) {
  .viewer-column { margin-top: 70px; width: calc(100% - 20px); }
}