/* The résumé viewer: one modal dialog in the site's glass. With two or more
   role versions it opens on the choose step, a short ledger of them,
   centred on the screen, and grows into the view step: the native PDF
   under a quiet toolbar, on the near-solid glass so the page never shows
   through a document. Where a PDF cannot render in place (touch, narrow
   screens, no PDF viewer) the view step stays compact and offers Open and
   Download instead. Type, colours, radii, timings, the glass, the scrim,
   the marks and the focus ring are the shared tokens (ui/css/00-tokens.css);
   the terminal loads no ui.css, so each has its token value as fallback. */
.resume-dialog {
  --rv-ink: var(--ink);
  --rv-muted: var(--muted);
  --rv-line: var(--hairline, color-mix(in oklab, var(--ink), transparent 88%));
  --rv-line-strong: var(--hairline-strong, color-mix(in oklab, var(--ink), transparent 80%));
  --rv-tint: var(--tint, color-mix(in oklab, var(--ink), transparent 96%));
  --rv-tint-2: var(--tint-2, color-mix(in oklab, var(--ink), transparent 92%));
  --rv-ring: var(--focus-ring, 0 0 0 2px var(--bg), 0 0 0 4px var(--accent));
  --rv-ease: var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  --rv-press: var(--d-press, 120ms);
  --rv-fast: var(--d-fast, 160ms);
  /* the glass (.glass in ui/css/00-tokens.css) */
  --rv-glass: var(--glass-bg, color-mix(in oklab, var(--bg), transparent 12%));
  --rv-solid: var(--glass-solid, color-mix(in oklab, var(--bg), transparent 4%));
  --rv-edge-own: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 0 0 1px rgb(255 255 255 / .2);
  --rv-edge: var(--glass-edge, var(--rv-edge-own));
  --rv-shadow: var(--glass-shadow, 0 0 0 1px rgb(40 30 10 / .08), 0 2px 4px rgb(40 30 10 / .05), 0 8px 24px rgb(40 30 10 / .08));
  --rv-blur: var(--glass-blur, 16px);
  --rv-sat: var(--glass-sat, 160%);
  /* type (the 7-step scale) */
  --rv-h3: var(--fs-h3, clamp(1.25rem, 1.12rem + .6vw, 1.625rem));
  --rv-sm: var(--fs-sm, .9375rem);
  --rv-body: var(--fs-body, 1.0625rem);
  --rv-label: var(--fs-label, .8125rem);
  --rv-top: max(16px, env(safe-area-inset-top));
  --rv-bottom: max(16px, env(safe-area-inset-bottom));
  --rv-pad: 24px;
  color-scheme: light dark;
  color: var(--rv-ink); background: var(--bg); border: 0;
  border-radius: var(--r-lg, 20px); padding: 0; box-sizing: border-box;
  box-shadow: var(--rv-shadow), var(--rv-edge);
  /* Centred both ways: the dialog's fit-content box between equal margins. */
  position: fixed; inset: 0; margin: auto;
  width: min(1120px, calc(100% - 32px));
  height: calc(100dvh - var(--rv-top) - var(--rv-bottom));
  max-height: none; max-width: none; overflow: hidden;
  font-family: var(--font-sans, system-ui); letter-spacing: normal;
}
:root[data-theme="dark"] .resume-dialog { --rv-edge-own: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 0 0 1px rgb(255 255 255 / .07); }
/* The ledger, and the view step without an inline PDF, are compact glass;
   the step with the PDF in it is the opaque paper, so nothing behind a
   document shows through. */
.resume-dialog[data-step="choose"], .resume-dialog[data-step="view"][data-inline="false"] {
  width: min(560px, calc(100% - 32px)); height: fit-content; max-height: calc(100dvh - var(--rv-top) - var(--rv-bottom));
  background: var(--rv-solid);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (prefers-reduced-transparency: no-preference) {
    .resume-dialog[data-step="choose"], .resume-dialog[data-step="view"][data-inline="false"] {
      background: var(--rv-glass);
      -webkit-backdrop-filter: blur(var(--rv-blur)) saturate(var(--rv-sat));
      backdrop-filter: blur(var(--rv-blur)) saturate(var(--rv-sat));
    }
  }
}
.resume-dialog[open] { display: flex; flex-direction: column; animation: resume-arrive var(--d-in, 320ms) var(--rv-ease) both; }
.resume-dialog[open].is-closing { animation: resume-leave var(--d-out, 220ms) var(--ease-in, cubic-bezier(.4, 0, 1, 1)) both; }
.resume-dialog::backdrop { background: var(--scrim, color-mix(in oklab, black, transparent 70%)); animation: resume-dim var(--d-in, 320ms) var(--rv-ease) both; }
.resume-dialog.is-closing::backdrop { animation: resume-undim var(--d-out, 220ms) var(--ease-in, ease-in) both; }

/* The icons, as ui/css/00-tokens.css draws them (.ico): Phosphor bold,
   filled, in the 1.125em box, leading their label. Only Download moves,
   1px down under the pointer; press puts it back. */
.resume-dialog .ico {
  width: var(--ico-size, 1.125em); height: var(--ico-size, 1.125em); flex: none;
  fill: currentColor; stroke: none; overflow: visible;
  transition: translate var(--rv-fast) var(--rv-ease);
}
.resume-dialog .ico-ctl { --ico-size: 20px; }
@media (hover: hover) and (pointer: fine) {
  .resume-dialog :hover > .ico-download-simple { translate: 0 1px; }
}
.resume-dialog :active > .ico { translate: none; transition-duration: var(--rv-press); }

/* Head: the title (h3 on the scale) names the version once one is open; the
   close is the shared icon-only control and stays put. */
.resume-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 8px var(--rv-pad); flex: none; }
.resume-head > div { min-width: 0; }
.resume-head h2 {
  margin: 0; font-size: var(--rv-h3); font-weight: var(--fw-h3, 650); line-height: var(--lh-h3, 1.18);
  letter-spacing: var(--tr-h3, -.02em); text-wrap: balance;
}
.resume-head h2:focus { outline: none; box-shadow: none; } /* a reading-order landmark, not a control */
.resume-close {
  position: relative; display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--rv-ink); cursor: pointer;
}

/* Steps. */
.resume-dialog[data-step="choose"] .resume-view, .resume-dialog[data-step="view"] .resume-choose { display: none; }
.resume-dialog[data-inline="true"] .resume-fallback,
.resume-dialog[data-inline="false"] .resume-document,
.resume-dialog[data-inline="false"] .resume-actions :is(.resume-download, .resume-open) { display: none; }

/* Choose: one ledger of rows, hairlines between, each row the whole target.
   The tint bleeds 12px past the text as a nested rounded shape, like the
   Experience rows, so the text stays flush with the hint above it. */
.resume-choose { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--rv-pad) 12px; }
#resumeChooseHint { margin: 0 0 8px; max-width: 46ch; color: var(--rv-muted); font-size: var(--rv-sm); line-height: var(--lh-sm, 1.5); text-wrap: pretty; }
.resume-roles { list-style: none; margin: 0 -12px; padding: 0; }
.resume-roles li { position: relative; }
.resume-roles li + li::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--rv-line); }
.resume-role {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 12px;
  border-radius: var(--r-sm, 10px); color: var(--rv-ink); text-decoration: none;
  transition: background-color var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease);
}
.resume-role-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.resume-role b { font-size: var(--rv-body); font-weight: var(--fw-ui, 500); line-height: var(--lh-label, 1.35); }
.resume-role-text span { color: var(--rv-muted); font-size: var(--rv-sm); line-height: var(--lh-sm, 1.5); text-wrap: pretty; }
.resume-role .ico { color: var(--rv-muted); }
.resume-role .resume-check, .resume-role[aria-current="true"] .resume-chev { display: none; }
.resume-role[aria-current="true"] .resume-check { display: block; color: var(--rv-ink); }
@media (hover: hover) and (pointer: fine) {
  .resume-role:hover { background: var(--rv-tint); }
  .resume-role:hover .resume-chev { color: var(--rv-ink); }
}
.resume-role:active { background: var(--rv-tint-2); transform: scale(var(--press-row, .99)); transition-duration: var(--rv-press); }

/* View: the toolbar, then the PDF. The toolbar is text links in the site's
   grammar (ink for Download, muted for the rest, the 36px tint pill on
   hover and focus), each led by the icon for what it does. */
.resume-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.resume-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; padding: 4px var(--rv-pad) 12px; flex: none; }
.resume-actions :is(a, button) {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--ico-gap, .4em); min-height: 44px; padding: 0;
  border: 0; background: transparent;
  color: var(--rv-muted); font: inherit; font-size: var(--rv-sm); font-weight: var(--fw-text, 400); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.resume-actions .resume-primary { color: var(--rv-ink); font-weight: var(--fw-ui, 500); }
.resume-actions .resume-back { margin-right: auto; }
.resume-actions :is(a, button)::before {
  content: ""; position: absolute; z-index: -1; left: -10px; right: -10px; top: 50%; height: 36px; translate: 0 -50%;
  border-radius: var(--r-pill, 999px); background: var(--rv-tint); opacity: 0; pointer-events: none;
  transition: opacity var(--rv-fast) var(--rv-ease), background-color var(--rv-fast) var(--rv-ease);
}
.resume-document { flex: 1; min-height: 0; background: var(--paper, var(--bg)); border-top: 1px solid var(--rv-line); }
.resume-document iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Without an inline PDF: the file, then Open and Download as a pair of
   pills; the toolbar keeps Other versions and the recruiter overview below
   a hairline. */
.resume-fallback { display: grid; gap: 12px; padding: 0 var(--rv-pad) 20px; }
.resume-file { margin: 0; color: var(--rv-muted); font-size: var(--rv-label); font-weight: var(--fw-label, 500); }
.resume-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.resume-pair a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ico-gap, .4em); min-height: 48px; padding: 0 16px;
  border: 1px solid var(--rv-line-strong); border-radius: var(--r-pill, 999px);
  color: var(--rv-ink); font-size: var(--rv-sm); font-weight: var(--fw-ui, 500); line-height: 1; text-decoration: none; white-space: nowrap;
}
.resume-pair .resume-primary { background: var(--rv-ink); border-color: var(--rv-ink); color: var(--bg); }
.resume-dialog[data-inline="false"] .resume-actions { margin: 0 var(--rv-pad); padding: 4px 0 8px; border-top: 1px solid var(--rv-line); }

/* The grammar: tint on hover (a primary pill goes one step off ink), press
   scales down with a deeper tint, focus is the token ring on the control's
   own shape. Nothing lifts. */
.resume-pair a, .resume-close { transition: background-color var(--rv-fast) var(--rv-ease), color var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease); }
.resume-actions :is(a, button) { transition: color var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease); }
@media (hover: hover) and (pointer: fine) {
  .resume-close:hover, .resume-pair a:not(.resume-primary):hover { background: var(--rv-tint); }
  .resume-pair .resume-primary:hover { background: color-mix(in oklab, var(--rv-ink), var(--bg) 14%); }
  .resume-actions :is(a, button):hover { color: var(--rv-ink); }
  .resume-actions :is(a, button):hover::before { opacity: 1; }
}
.resume-pair a:active, .resume-close:active { transform: scale(var(--press, .97)); transition-duration: var(--rv-press); }
.resume-pair a:not(.resume-primary):active, .resume-close:active { background: var(--rv-tint-2); }
.resume-actions :is(a, button):active { transform: scale(var(--press-text, .98)); transition-duration: var(--rv-press); }
.resume-actions :is(a, button):active::before { opacity: 1; background: var(--rv-tint-2); }
.resume-dialog :is(a, button):focus-visible { outline: none; box-shadow: var(--rv-ring); }
.resume-actions :is(a, button):focus-visible { box-shadow: none; color: var(--rv-ink); }
.resume-actions :is(a, button):focus-visible::before { opacity: 1; box-shadow: var(--rv-ring); }
.resume-pair a:focus-visible { border-radius: var(--r-pill, 999px); }
.resume-close:focus-visible { border-radius: 50%; }
.resume-role:focus-visible { position: relative; z-index: 1; border-radius: var(--r-sm, 10px); }

.resume-dialog .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

@keyframes resume-arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes resume-leave { to { opacity: 0; transform: translateY(8px); } }
@keyframes resume-dim { from { opacity: 0; } }
@keyframes resume-undim { to { opacity: 0; } }
@media (max-width: 600px) {
  .resume-dialog { --rv-top: max(8px, env(safe-area-inset-top)); --rv-bottom: max(8px, env(safe-area-inset-bottom)); --rv-pad: 16px; }
  .resume-dialog, .resume-dialog[data-step="choose"], .resume-dialog[data-step="view"][data-inline="false"] { width: calc(100% - 16px); }
  .resume-head { padding: 12px 8px 4px var(--rv-pad); }
  .resume-actions { gap: 0 16px; }
  .resume-role { min-height: 60px; }
}
@media (max-width: 359.98px) {
  .resume-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .resume-dialog, .resume-dialog *, .resume-dialog *::before, .resume-dialog *::after { transition: none !important; animation: none !important; }
  .resume-dialog[open], .resume-dialog::backdrop { animation: none; }
  .resume-dialog :is(a, button), .resume-dialog .ico { transform: none !important; translate: none !important; }
}
html.cur.resume-preview-open, html.cur.resume-preview-open body,
html.cur.resume-preview-open body * { cursor: auto !important; }
html.cur.resume-preview-open .resume-dialog :is(a, button, a *, button *) { cursor: pointer !important; }
html.resume-preview-open .cursor { visibility: hidden !important; }
.resume-dialog::backdrop { cursor: auto; }