/* ─────────────────────────────────────────────
   Resume Print — Public, print-optimized resume.
   Dark-blue brand identity, orange accents.
   Gradients on hero elements (header/stats/footer),
   whitesmoke surfaces on supporting cards,
   minimal borders.
   Always pulls fresh data from the site.
   ───────────────────────────────────────────── */

:root {
  /* Brand */
  --rp-blue:        #0f172a;
  --rp-blue-1:      #1e3a5f;
  --rp-blue-2:      #2c4d7a;
  --rp-blue-rail:   #cbd5e1;
  --rp-accent:      #f59e42;
  --rp-accent-2:    #f97316;
  --rp-accent-soft: #fff4e3;

  /* Surfaces */
  --rp-bg:          #ffffff;
  --rp-paper:       #ececec;
  --rp-surface:     #f5f5f5;            /* whitesmoke */
  --rp-surface-2:   #fafafa;

  /* Text */
  --rp-text:        #0f172a;
  --rp-text-soft:   #334155;
  --rp-muted:       #64748b;
  --rp-dim:         #94a3b8;

  /* Lines */
  --rp-border:      #e5e7eb;
  --rp-rule:        #d1d5db;

  /* Gradients (used sparingly) */
  --rp-grad-blue:   linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  --rp-grad-accent: linear-gradient(135deg, #f59e42 0%, #f97316 100%);
  --rp-grad-accent-line: linear-gradient(90deg, #f59e42 0%, #f97316 100%);

  --rp-radius:      8px;
  --rp-radius-sm:   6px;
}

* { box-sizing: border-box; }

body.db-resume-body {
  margin: 0;
  background: var(--rp-paper);
  color: var(--rp-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11pt;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--rp-accent-2);
  text-decoration: none;
}
a:hover { color: var(--rp-accent); }

/* ── Hide Pressona AI on the resume page entirely ────── */
[class*="pai-"], [id*="pai-"], [class*="pressona"], [id*="pressona"] {
  display: none !important;
}

/* ── Toolbar (screen only) ──────────────────────── */
.db-resume-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--rp-grad-blue);
  color: #fff;
  border-bottom: 2px solid var(--rp-accent);
}
.db-resume-toolbar__back {
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  font-weight: 500;
}
.db-resume-toolbar__back:hover { color: var(--rp-accent); }
.db-resume-toolbar__print {
  background: var(--rp-grad-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 22px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(245,158,66,0.32);
}
.db-resume-toolbar__print:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(245,158,66,0.42);
}

/* ── Page (the document) ─────────────────────── */
.db-resume-print {
  background: var(--rp-bg);
  max-width: 8.5in;
  margin: 24px auto 80px;
  padding: 0.65in 0.7in;
  box-shadow: 0 4px 32px rgba(15,23,42,0.12), 0 1px 3px rgba(15,23,42,0.06);
  position: relative;
}

.db-resume-section {
  margin-bottom: 30px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.db-resume-section__title {
  font-size: 12.5pt;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-blue);
  margin: 0 0 16px;
  padding-bottom: 7px;
  position: relative;
  display: inline-block;
}
.db-resume-section__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--rp-grad-accent-line);
  border-radius: 2px;
}

/* ── Header — dark blue gradient banner ─────── */
.db-resume-header {
  background: var(--rp-grad-blue);
  margin: -0.65in -0.7in 32px;
  padding: 32px 0.7in 24px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.db-resume-header::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(245,158,66,0.18), transparent 65%);
  pointer-events: none;
}
.db-resume-header__band {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.db-resume-header__name {
  font-size: 27pt;
  font-weight: 900;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 0.95;
  color: #fff;
}
.db-resume-header__title {
  margin-top: 6px;
  font-size: 10pt;
  color: var(--rp-accent);
  font-weight: 600;
}
.db-resume-header__stamp {
  text-align: right;
  padding: 0;
  min-width: 130px;
}
.db-resume-header__stamp-label {
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.58);
  font-weight: 700;
}
.db-resume-header__stamp-date {
  font-size: 9.5pt;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.db-resume-header__stamp-meta {
  font-size: 7pt;
  color: var(--rp-accent);
  margin-top: 3px;
  font-weight: 500;
  font-style: italic;
}

.db-resume-header__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 9pt;
  position: relative;
  z-index: 1;
}
.db-resume-header__contact-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 7px 10px;
}
.db-resume-header__contact-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.55);
}
.db-resume-header__contact a,
.db-resume-header__contact span {
  color: rgba(255,255,255,0.96);
  font-weight: 500;
  font-size: 9pt;
  line-height: 1;
}
.db-resume-header__contact a:hover { color: var(--rp-accent); }

/* ── Summary ──────────────────────────────── */
.db-resume-summary {
  background: transparent;
  padding: 8px 0;
  margin-bottom: 10px;
}
.db-resume-summary__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--rp-text);
}

/* ── Stats ─────────────────────────────────── */
.db-resume-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.db-resume-stats__card {
  background: transparent;
  color: var(--rp-text);
  border-radius: var(--rp-radius-sm);
  padding: 16px 12px;
  text-align: center;
}
.db-resume-stats__value {
  font-size: 22pt;
  font-weight: 900;
  background: var(--rp-grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.db-resume-stats__label {
  font-size: 8pt;
  color: var(--rp-text);
  margin-top: 6px;
  line-height: 1.4;
  font-weight: 500;
}

/* ── Strengths ─────────────────────────────── */
.db-resume-strengths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.db-resume-strengths__card {
  background: transparent;
  padding: 6px 0;
}
.db-resume-strengths__title {
  margin: 0 0 6px;
  font-size: 10.5pt;
  font-weight: 700;
  color: var(--rp-blue);
  letter-spacing: -0.005em;
}
.db-resume-strengths__desc {
  margin: 0;
  font-size: 14px;
  color: var(--rp-text-soft);
  line-height: 1.55;
}

/* ── Projects (editorial alternating rows) ───────── */
.db-resume-projects { page-break-inside: auto; break-inside: auto; }
.db-resume-projects__list { display: grid; gap: 0; }

.db-resume-project {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 16px;
  align-items: center;
  padding: 32px 0;
  background: transparent;
  border-bottom: 1px solid var(--rp-border);
  page-break-inside: avoid;
  break-inside: avoid;
  position: relative;
}
.db-resume-project:first-child { padding-top: 0; }
.db-resume-project:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.db-resume-project--right { grid-template-columns: 6fr 5fr; }
.db-resume-project--right .db-resume-project__media { order: 2; }
.db-resume-project--right .db-resume-project__body { order: 1; }

.db-resume-project__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.db-resume-project__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rp-radius-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.db-resume-project__media:hover img {
  transform: scale(1.01);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.db-resume-project__placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rp-blue);
  color: rgba(255,255,255,0.55);
  font-size: 11pt;
  font-weight: 600;
  border-radius: var(--rp-radius-sm);
}

/* Hand-built card graphic (e.g. the Lighthouse scorecard) rendered as the
   project image. Sized to match the screenshot media boxes. position:relative
   anchors absolutely-positioned graphics (e.g. the Digital Growth chart). */
.db-resume-project__graphic {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--rp-radius-sm);
  overflow: hidden;
  background: var(--rp-blue);
}
/* The media box is larger than the on-site tile, so enlarge the score rings. */
.db-resume-project__graphic .db-perf__dial { max-width: 84px !important; }
/* Freeze the ring sweep + number fade at their final values so a PDF saved
   before the animation finishes still shows the correct scores. */
.db-resume-project__graphic .db-perf__arc { animation: none; stroke-dashoffset: var(--off, 0); }
.db-resume-project__graphic .db-perf__num { animation: none; opacity: 1; }

/* Digital Growth chart (.db-tgfx) styles, ported from style.css (which the
   print template dequeues) and forced to the final visible state, since its
   reveal animations are triggered by a JS-added .db-tgfx--in class and
   main.js is not loaded on the print template. */
.db-resume-project__graphic .db-tgfx {
  position: absolute; inset: 0; padding: 16px 18px; background-color: #0a1016;
}
.db-resume-project__graphic .db-tgfx__chart { width: 100%; height: 100%; display: block; }
.db-resume-project__graphic .db-tgfx__axis { stroke: rgba(255,255,255,0.10); stroke-width: 1; }
.db-resume-project__graphic .db-tgfx__area { fill: rgba(52,211,153,0.14); stroke: none; opacity: 1; }
.db-resume-project__graphic .db-tgfx__line {
  fill: none; stroke: #34d399; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 330; stroke-dashoffset: 0; opacity: 1;
}
.db-resume-project__graphic .db-tgfx__node { fill: #34d399; opacity: 1; }
.db-resume-project__graphic .db-tgfx__tip {
  fill: #fff; stroke: #34d399; stroke-width: 2.5; opacity: 1;
}
.db-resume-project__graphic .db-tgfx__xl {
  fill: #94a3b8; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.db-resume-project__graphic .db-tgfx__xl--end { fill: #34d399; }
.db-resume-project__graphic .db-tgfx__gains {
  position: absolute; top: 16px; left: 18px; z-index: 1;
  display: flex; flex-direction: column; gap: 3px;
}
.db-resume-project__graphic .db-tgfx__gain {
  font-size: 11px; font-weight: 700; color: #f0f2f8;
  display: inline-flex; align-items: center; gap: 5px;
}
.db-resume-project__graphic .db-tgfx__gain em { font-style: normal; color: #34d399; font-weight: 900; }

.db-resume-project__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 0;
}
.db-resume-project__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rp-blue);
  font-weight: 700;
}
.db-resume-project__year { color: var(--rp-muted); font-weight: 600; }
.db-resume-project__badge {
  background: var(--rp-grad-accent);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  font-size: 7pt;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(245,158,66,0.28);
}
.db-resume-project__tagline {
  margin: 2px 0 0;
  font-size: 12pt;
  font-weight: 700;
  color: var(--rp-text);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.db-resume-project__desc {
  margin: 0;
  font-size: 9.5pt;
  color: var(--rp-text-soft);
  line-height: 1.5;
}
.db-resume-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.db-resume-project__tag {
  font-size: 7.5pt;
  padding: 2px 8px;
  background: var(--rp-surface);
  border-radius: 999px;
  color: var(--rp-text-soft);
  font-weight: 500;
}
.db-resume-project__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 11px;
  font-size: 8pt;
  font-weight: 600;
  color: var(--rp-accent-2);
  border: 1px solid var(--rp-accent-2);
  border-radius: 999px;
  text-decoration: none;
}

/* ── Experience ─────────────────────────────── */
.db-resume-experience__list { display: grid; gap: 18px; }
.db-resume-experience__role {
  page-break-inside: avoid;
  break-inside: avoid;
  padding-left: 22px;
  border-left: 2px solid var(--rp-blue-rail);
  position: relative;
}
/* Clean orange dot, perfectly centered on the rail line */
.db-resume-experience__role::before {
  content: "";
  position: absolute;
  left: -6px; /* (12px box - 2px line) / 2 = 5px, then -1px to center on line */
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--rp-grad-accent);
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.db-resume-experience__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.db-resume-experience__role-title {
  margin: 0;
  font-size: 11.5pt;
  font-weight: 700;
  color: var(--rp-blue);
  letter-spacing: -0.005em;
}
.db-resume-experience__org {
  font-size: 9.5pt;
  color: var(--rp-accent-2);
  font-weight: 600;
  margin-top: 2px;
}
.db-resume-experience__dates {
  font-size: 8.5pt;
  color: var(--rp-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.db-resume-experience__callout {
  margin: 8px 0 8px;
  font-size: 9.5pt;
  color: var(--rp-text);
  background: var(--rp-surface);
  border-radius: var(--rp-radius-sm);
  padding: 10px 14px;
  line-height: 1.5;
}
.db-resume-experience__highlights {
  margin: 0;
  padding-left: 18px;
  font-size: 9pt;
  color: var(--rp-text-soft);
  line-height: 1.55;
}
.db-resume-experience__highlights li { margin-bottom: 3px; }
.db-resume-experience__highlights li::marker { color: var(--rp-accent); }

/* ── Education ────────────────────────────────── */
.db-resume-education__list { display: flex; flex-direction: column; gap: 10px; }
.db-resume-education__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.db-resume-education__school {
  margin: 0;
  font-size: 11.5pt;
  font-weight: 700;
  color: var(--rp-blue);
  letter-spacing: -0.005em;
}
.db-resume-education__loc {
  font-size: 9pt;
  color: var(--rp-accent-2);
  font-weight: 600;
  margin-top: 2px;
}
.db-resume-education__year {
  font-size: 8.5pt;
  color: var(--rp-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.db-resume-education__degrees {
  margin: 0;
  padding-left: 18px;
  font-size: 9pt;
  color: var(--rp-text-soft);
  line-height: 1.55;
}
.db-resume-education__degrees li { margin-bottom: 2px; }
.db-resume-education__degrees li::marker { color: var(--rp-accent); }
.db-resume-education__certs {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.db-resume-education__certs-label {
  font-size: 8pt;
  color: var(--rp-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.db-resume-education__certs-list {
  font-size: 9pt;
  color: var(--rp-text-soft);
  font-weight: 500;
}

/* ── Tech Stack ───────────────────────────────── */
.db-resume-stack__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.db-resume-stack__column {
  background: transparent;
  border-radius: var(--rp-radius-sm);
  padding: 0;
}
.db-resume-stack__label {
  margin: 0 0 10px;
  font-size: 9.5pt;
  font-weight: 800;
  color: var(--rp-blue);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.db-resume-stack__group { margin-bottom: 10px; }
.db-resume-stack__group:last-child { margin-bottom: 0; }
.db-resume-stack__group-label {
  font-size: 8pt;
  color: var(--rp-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 5px;
}
.db-resume-stack__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.db-resume-stack__pill {
  font-size: 8pt;
  padding: 3px 9px;
  background: var(--rp-surface);
  border-radius: 999px;
  color: var(--rp-text-soft);
  font-weight: 500;
}

/* ── Footer ──────────────────────────────────── */
.db-resume-footer {
  margin: 32px -0.7in -0.65in;
  padding: 18px 0.7in;
  background: var(--rp-grad-blue);
  color: #fff;
  text-align: center;
}
.db-resume-footer__line {
  font-size: 9.5pt;
  color: #fff;
  margin-bottom: 4px;
  font-weight: 600;
}
.db-resume-footer__line a {
  color: var(--rp-accent);
  font-weight: 600;
}
.db-resume-footer__meta {
  font-size: 8pt;
  color: rgba(255,255,255,0.65);
  font-style: italic;
}

/* ────────────────────────────────────────────────
   Build Overlay — hero-styled card with animated
   mini-resume that assembles itself.
   No auto-print; user clicks Save as PDF when ready.
   ──────────────────────────────────────────────── */

.db-build-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 500ms ease, visibility 500ms ease;
}
.db-build-overlay--fade { opacity: 0; visibility: hidden; pointer-events: none; }

/* Site-matching dark background with hero-style ambient glows */
.db-build-overlay__bg {
  position: absolute;
  inset: 0;
  background: #0a0e1a;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(91,138,245,0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(249,120,83,0.10), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(245,158,66,0.06), transparent 70%);
}

/* Bento-style card matching .db-card / .db-hero__main */
.db-build-card {
  position: relative;
  z-index: 1;
  width: 760px;
  max-width: 100%;
  padding: clamp(28px, 4vw, 44px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(24px, 3vw, 36px);
  align-items: center;
  overflow: hidden;
  color: #f0f2f8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.db-build-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at top right, rgba(91,138,245,0.14), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(249,120,83,0.08), transparent 40%);
}

/* Left side: kicker + headline + status */
.db-build-card__head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
}
.db-build-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(245,158,66,0.12);
  border: 1px solid rgba(245,158,66,0.22);
  color: #f59e42;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.db-build-headline {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: #f0f2f8;
}
.db-build-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #f59e42, #f97853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.db-build-status {
  font-size: 13px;
  color: #cdd5e8;
  font-weight: 500;
  min-height: 1.5em;
  transition: opacity 200ms ease;
  letter-spacing: -0.005em;
}
.db-build-status--out { opacity: 0; }

/* Right side: animated mini-resume page */
.db-build-page {
  position: relative;
  z-index: 1;
  width: 280px;
  aspect-ratio: 8.5 / 11;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: end;
}

/* All build sections start hidden, animate in via .is-visible */
.db-build-section {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 380ms cubic-bezier(.2,.8,.2,1), transform 380ms cubic-bezier(.2,.8,.2,1);
}
.db-build-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section title placeholder — short dark text line + orange underline (matches real) */
.db-build-section__title {
  width: 56px;
  height: 5px;
  background: #1e293b;
  border-radius: 1px;
  margin-bottom: 3px;
  position: relative;
}
.db-build-section__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #f59e42, #f97316);
  border-radius: 1px;
}

/* Header band (mini-version of resume header) */
.db-build-header {
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  margin: -14px -14px 0;
  padding: 12px 12px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 2px solid #f59e42;
}
.db-build-header__name {
  width: 70px; height: 9px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  margin-bottom: 4px;
}
.db-build-header__role {
  width: 50px; height: 5px;
  background: #f59e42;
  border-radius: 2px;
}
.db-build-header__stamp { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.db-build-header__stamp-label { width: 28px; height: 3px; background: rgba(255,255,255,0.4); border-radius: 1px; }
.db-build-header__stamp-date { width: 36px; height: 5px; background: rgba(255,255,255,0.85); border-radius: 1px; }
.db-build-header__contact {
  margin: 6px -14px 0;
  padding: 4px 12px 6px;
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  display: flex;
  gap: 5px;
}
.db-build-header__contact span {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}

/* Generic skeleton lines */
.db-build-line {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  margin-bottom: 3px;
}
.db-build-line--full { width: 100%; }
.db-build-line--mid  { width: 75%; }
.db-build-line--short { width: 40%; background: #cbd5e1; height: 5px; }
.db-build-section .db-build-line:last-child { margin-bottom: 0; }

/* Stats row — transparent, just big orange values (matches real resume) */
.db-build-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 4px 0;
}
.db-build-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.db-build-stat__value {
  width: 70%;
  height: 9px;
  background: linear-gradient(135deg, #f59e42, #f97316);
  border-radius: 1px;
}
.db-build-stat::after {
  content: "";
  width: 90%;
  height: 3px;
  background: #cbd5e1;
  border-radius: 1px;
}

/* Strengths 2x2 — transparent, just orange left rail */
.db-build-strengths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.db-build-card-mini {
  padding: 4px 0 4px 5px;
  border-left: 2px solid #f59e42;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-build-card-mini::before {
  content: "";
  width: 60%;
  height: 5px;
  background: #1e293b;
  border-radius: 1px;
}
.db-build-card-mini::after {
  content: "";
  width: 90%;
  height: 3px;
  background: #cbd5e1;
  border-radius: 1px;
}

/* Project rows */
.db-build-project {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
  align-items: center;
}
.db-build-project:last-child { border-bottom: none; }
.db-build-project--right { grid-template-columns: 1fr 70px; }
.db-build-project__img {
  width: 100%;
  height: 36px;
  background: linear-gradient(135deg, #2c4d7a, #5b8af5);
  border-radius: 3px;
}
.db-build-project__copy { display: flex; flex-direction: column; gap: 3px; }

/* Experience timeline — gray vertical rail with orange dots (matches real) */
.db-build-experience {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-left: 9px;
  border-left: 1.5px solid #cbd5e1;
  margin-left: 3px;
}
.db-build-exp-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.db-build-exp-row__dot {
  width: 7px; height: 7px;
  background: linear-gradient(135deg, #f59e42, #f97316);
  border-radius: 50%;
  border: 1.5px solid #fff;
  position: absolute;
  left: -13px;
  top: 1px;
  box-sizing: border-box;
}
.db-build-exp-row__body { display: flex; flex-direction: column; gap: 2px; }

/* Toolkit columns — each col has multiple sub-groups (label + pills) */
.db-build-toolkit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.db-build-tk-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Top label = column heading (orange uppercase look) */
.db-build-tk-col > .db-build-tk-label:first-child {
  height: 5px;
  background: #f59e42;
  width: 80%;
  border-radius: 1px;
  margin-bottom: 2px;
}
/* Sub-group label */
.db-build-tk-label {
  width: 60%;
  height: 3px;
  background: #94a3b8;
  border-radius: 1px;
}
.db-build-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 3px;
}
.db-build-pills span {
  height: 7px;
  flex: 0 0 auto;
  background: #f5f5f5;
  border-radius: 999px;
}
.db-build-pills span:nth-child(1) { width: 38%; }
.db-build-pills span:nth-child(2) { width: 28%; }
.db-build-pills span:nth-child(3) { width: 46%; }
.db-build-pills span:nth-child(4) { width: 22%; }

/* Footer band (matches the dark blue footer at the bottom of the real resume) */
.db-build-footer {
  background: linear-gradient(135deg, #0f172a, #1e3a5f);
  margin: auto -14px -14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1.5px solid #f59e42;
}
.db-build-footer__line {
  width: 60%;
  height: 5px;
  background: rgba(255,255,255,0.6);
  border-radius: 1px;
}

/* Mobile: stack the card vertically */
@media screen and (max-width: 768px) {
  .db-build-card {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .db-build-page { width: 220px; justify-self: center; }
  .db-build-headline { font-size: 1.4rem; }
}

/* Respect users who prefer reduced motion: skip section reveal animations
   and show every part of the mini-resume immediately. The status-text
   change still happens because it's content, not motion. */
@media (prefers-reduced-motion: reduce) {
  .db-build-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .db-build-status {
    transition: none !important;
  }
  .db-build-overlay {
    transition: opacity 200ms linear, visibility 200ms linear !important;
  }
}

/* ── Print Rules ────────────────────────────────── */
@page { size: Letter; margin: 0.5in; }

@media print {
  body.db-resume-body {
    background: #fff !important;
    font-size: 10pt;
  }
  .db-resume-toolbar,
  .db-resume-loading,
  [class*="pai-"],
  [id*="pai-"],
  [class*="pressona"] { display: none !important; }
  .db-resume-print {
    margin: 0 !important;
    /* Horizontal padding insets the body content; the header/footer bands
       below bleed back out with matching negative margins so their TEXT
       lines up with the body while the navy bands stay full-width. */
    padding: 0 18px !important;
    box-shadow: none !important;
    max-width: none !important;
  }

  .db-resume-header {
    margin: 0 -18px 22px !important;
    padding: 24px 18px 18px !important;
  }
  .db-resume-footer {
    margin: 24px -18px 0 !important;
    padding: 14px 18px !important;
  }

  /* Force editorial layout in print (don't let mobile breakpoint trigger) */
  .db-resume-project {
    grid-template-columns: 5fr 6fr !important;
  }
  .db-resume-project--right {
    grid-template-columns: 6fr 5fr !important;
  }
  .db-resume-project--right .db-resume-project__media { order: 2 !important; }
  .db-resume-project--right .db-resume-project__body { order: 1 !important; }

  .db-resume-stats { grid-template-columns: repeat(4, 1fr) !important; }
  .db-resume-strengths__grid { grid-template-columns: 1fr 1fr !important; }
  .db-resume-stack__columns { grid-template-columns: repeat(3, 1fr) !important; }
  .db-resume-header__contact { grid-template-columns: repeat(4, 1fr) !important; }
  .db-resume-header__band { flex-direction: row !important; }

  .db-resume-section,
  .db-resume-project,
  .db-resume-experience__role { page-break-inside: avoid; break-inside: avoid; }

  /* Force background colors and gradients to print */
  body, .db-resume-print, .db-resume-section,
  .db-resume-summary, .db-resume-stats__card,
  .db-resume-stats__value, .db-resume-strengths__card,
  .db-resume-project,
  .db-resume-project__badge,
  .db-resume-experience__callout, .db-resume-experience__role::before,
  .db-resume-stack__column,
  .db-resume-header,
  .db-resume-section__title::after, .db-resume-footer {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ── Mobile (screen only — scoped so it doesn't fire in print) ──── */
@media screen and (max-width: 768px) {
  .db-resume-print {
    padding: 28px 20px;
    margin: 12px auto 40px;
    max-width: 100%;
  }
  .db-resume-header {
    margin: -28px -20px 28px;
    padding: 24px 20px 20px;
  }
  .db-resume-footer {
    margin: 28px -20px -28px;
    padding: 16px 20px;
  }
  .db-resume-header__band {
    flex-direction: column;
    gap: 14px;
  }
  .db-resume-header__stamp { text-align: left; }
  .db-resume-header__name { font-size: 28pt; }
  .db-resume-header__contact { grid-template-columns: 1fr 1fr; }
  .db-resume-stats { grid-template-columns: 1fr 1fr; }
  .db-resume-strengths__grid,
  .db-resume-stack__columns { grid-template-columns: 1fr; }
  .db-resume-project,
  .db-resume-project--right {
    grid-template-columns: 1fr;
  }
  .db-resume-project--right .db-resume-project__media,
  .db-resume-project--right .db-resume-project__body { order: initial; }
  .db-resume-experience__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ── Cover Letter (page 1 when ?cover=<slug> is set) ───────────── */
.db-resume-cover-letter {
  padding: 8px 0 0;
  max-width: 100%;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1f2937;
}
.db-resume-cover-letter__date {
  font-size: 13px;
  line-height: 1.2;
  color: #6b7280;
  margin: 0 0 4px;
  text-align: right;
}
.db-resume-cover-letter__salutation {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
  color: #111827;
}
.db-resume-cover-letter__body p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1f2937;
}
.db-resume-cover-letter__body ul {
  margin: 0 0 10px;
  padding-left: 20px;
}
.db-resume-cover-letter__body li {
  margin-bottom: 4px;
  font-size: 13.5px;
  line-height: 1.4;
}
.db-resume-cover-letter__body strong { color: #111827; }

.db-resume-cover-letter__signature {
  margin: 6px 0 0;
  color: #111827;
}
.db-resume-cover-letter__signature svg {
  display: block;
  width: 150px;
  height: auto;
}

.db-resume-cover-letter__cta {
  margin: 32px 0 0;
  padding: 12px 18px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.db-resume-cover-letter__cta-copy { flex: 1; min-width: 0; }
.db-resume-cover-letter__cta-head {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}
.db-resume-cover-letter__cta-sub {
  font-size: 12px;
  color: #4b5563;
  margin-bottom: 6px;
  line-height: 1.4;
}
.db-resume-cover-letter__cta-url {
  font-size: 15px;
  font-weight: 700;
  color: #f59e42;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 3px;
}
.db-resume-cover-letter__cta-ai {
  font-size: 12px;
  color: #4b5563;
  font-style: italic;
}
.db-resume-cover-letter__cta-qr {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 4px;
  padding: 4px;
}
.db-resume-cover-letter__cta-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* When the cover letter is present, force the resume body to start on its
   own printed page. The .db-resume-print--with-cover class is added on
   the main element by template-resume-print.php only when a cover letter
   slug is matched. */
.db-resume-print--with-cover > .db-resume-header:nth-of-type(2) {
  page-break-before: always;
  break-before: page;
}

/* Screen-only fix: the resume header's margin-top: -0.65in is designed to
   bleed to the top of the document (page 1). When a cover letter is above
   it, that negative pull drags the second header UP into the cover letter
   CTA, causing visual overlap. Override to zero in screen view; the gap
   is provided by the cover letter section's min-height instead. */
@media screen {
  .db-resume-print--with-cover > .db-resume-header:nth-of-type(2) {
    margin-top: 0;
  }
  /* Make the cover letter section visually approximate one US Letter page
     on screen, so what the editor sees roughly matches the printed PDF.
     The CTA sits naturally after the signature, then whitespace fills the
     remainder of the "page" before the resume header appears below. */
  .db-resume-cover-letter {
    min-height: 8.4in;
  }
  /* Letter-only mode (?letteronly=1): no resume follows, so don't pad the
     letter to a full page — that would leave a white gap above the footer. */
  .db-resume-print--cover-only .db-resume-cover-letter {
    min-height: 0;
  }
}

@media print {
  .db-resume-cover-letter { page-break-after: always; break-after: page; }
  /* Letter-only mode: suppress the page break so the PDF is a single page
     with no trailing blank sheet. */
  .db-resume-print--cover-only .db-resume-cover-letter { page-break-after: auto; break-after: auto; }
  .db-resume-cover-letter__cta,
  .db-resume-cta {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

/* ── Resume CTA (page 1, only when NO cover letter is attached) ───
   Designed to read as a website-style conversion block: avatar + copy
   stack + QR. Not a metadata strip. Sits between the resume header
   and the summary so it's above the fold on page 1. */
.db-resume-cta {
  margin: 28px 0;
  padding: 14px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff7ed 0%, #fafafa 50%, #fff 100%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  gap: 16px;
  page-break-inside: avoid;
  break-inside: avoid;
}
.db-resume-cta__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(245, 158, 66, 0.35);
}
.db-resume-cta__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.db-resume-cta__copy {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.db-resume-cta__head {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}
.db-resume-cta__sub {
  font-size: 12.5px;
  color: #4b5563;
  margin-bottom: 4px;
}
.db-resume-cta__action {
  font-size: 12.5px;
  color: #1f2937;
}
.db-resume-cta__url {
  color: #f59e42;
  text-decoration: none;
  white-space: nowrap;
}
.db-resume-cta__url strong {
  font-weight: 800;
  color: #f59e42;
}
.db-resume-cta__qr {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px;
}
.db-resume-cta__qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}