/* ============================================================
     resume-templates.css — the 8 real Resume Studio template
     designs only. (Previously this file opened with leftover CSS
     from an early standalone preview tool — .shell-header,
     .picker-btn, .page-frame, and critically a bare `body{}` rule
     with fixed non-theme-reactive colors. None of those classes
     exist anywhere in the live site's markup, but the `body{}`
     selector matched the real page regardless — and since this
     stylesheet loads AFTER style.css, it silently won and
     overrode the real body background/text color site-wide,
     invisible in daytime but colliding badly with the night theme.
     Removed entirely — this file now only contains what the 8
     actual templates use.) */
  [class^="tpl-"]:not(.active){display:none;}
  /* Deliberately NOT setting display:block on the .active state here —
     doing that once already caused a real bug: it beat .tpl-gdocs's own
     display:grid rule on specificity, collapsing its two-column layout
     into one stacked column. Hiding inactive templates is all this needs
     to do; each template's own class rule (or the browser's block-level
     default for a plain <div>) correctly governs its own display value
     when active, with nothing here left to fight it. */

  /* The main site stylesheet (style.css) has a global `p { color:
     var(--ink-soft); }` rule for regular landing-page prose. Since a
     directly-matching rule ALWAYS beats inherited color regardless of
     specificity, that rule was silently overriding every template's own
     intended dark, professional-document text color on any element that
     happened to be a <p> tag (hv-summary, hv-skills, id-summary,
     gd-summary, cv-summary, and more) — while <li> bullets, untouched
     by that rule, rendered correctly. Result: summary/skills sections
     visibly faded out compared to the experience section, on every
     template, in both the live preview and the downloaded PDF (since
     PDF export rasterizes the same DOM). This resets color back to
     inherit-from-template for every current and future template's <p>
     and <li> elements in one place, instead of patching each class
     individually and risking missing one. */
  [class^="tpl-"] p, [class^="tpl-"] li,
  [class^="tpl-"] h1, [class^="tpl-"] h2, [class^="tpl-"] h3, [class^="tpl-"] h4 { color: inherit; }

  /* ============ 1. HARVARD/MIT CAREER CENTER FORMAT ============ */
  .tpl-harvard{
    font-family:'EB Garamond',serif;
    padding:56px 64px;
    color:#111;
  }
  .tpl-harvard .hv-name{
    text-align:center;font-size:24px;font-weight:700;letter-spacing:.02em;margin:0 0 6px;
  }
  .tpl-harvard .hv-contact{text-align:center;font-size:12.5px;color:#222;}
  .tpl-harvard .hv-hr{border:none;border-top:1px solid #000;margin:18px 0 4px;}
  .tpl-harvard .hv-section{
    font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    margin:20px 0 4px;border-bottom:1px solid #000;padding-bottom:2px;
  }
  .tpl-harvard .hv-row{display:flex;justify-content:space-between;margin-top:10px;}
  .tpl-harvard .hv-row-left strong{font-size:13.5px;}
  .tpl-harvard .hv-row-sub{font-size:13px;font-style:italic;}
  .tpl-harvard .hv-row-right{font-size:13px;text-align:right;white-space:nowrap;}
  .tpl-harvard .hv-bullets{margin:6px 0 0;padding-left:20px;}
  .tpl-harvard .hv-bullets li{font-size:13px;line-height:1.55;margin-bottom:3px;}
  .tpl-harvard .hv-summary{font-size:13px;line-height:1.6;margin-top:4px;}
  .tpl-harvard .hv-skills{font-size:13px;line-height:1.7;margin-top:4px;}

  /* ============ 2. JAKE'S RESUME (Tech/SWE Standard) ============ */
  .tpl-jake{
    font-family:Georgia,'Times New Roman',serif;
    padding:38px 46px;color:#000;font-size:10.3px;
  }
  .tpl-jake .jk-name{text-align:center;font-size:22px;font-weight:700;letter-spacing:.01em;margin:0 0 4px;}
  .tpl-jake .jk-contact{text-align:center;font-size:9.6px;color:#000;margin-bottom:10px;}
  .tpl-jake .jk-section{
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
    border-bottom:1px solid #000;margin:12px 0 6px;padding-bottom:1px;
  }
  .tpl-jake .jk-row{display:flex;justify-content:space-between;margin-top:7px;}
  .tpl-jake .jk-row-left strong{font-size:11px;}
  .tpl-jake .jk-row-right{font-size:10.3px;font-style:italic;white-space:nowrap;}
  .tpl-jake .jk-row-sub{display:flex;justify-content:space-between;font-style:italic;font-size:10.3px;margin-top:1px;}
  .tpl-jake .jk-bullets{margin:3px 0 0;padding-left:16px;}
  .tpl-jake .jk-bullets li{font-size:10.3px;line-height:1.42;margin-bottom:1.5px;}
  .tpl-jake .jk-skills-row{display:flex;gap:6px;margin-top:5px;font-size:10.3px;line-height:1.5;}
  .tpl-jake .jk-skills-row strong{min-width:120px;flex-shrink:0;}

  /* ============ 3. INDEED MODERN TEMPLATE ============ */
  .tpl-indeed{font-family:'Roboto',sans-serif;color:#1a1a1a;}
  .tpl-indeed .id-header{background:#2557a7;color:#fff;padding:34px 44px 26px;}
  .tpl-indeed .id-name{font-size:26px;font-weight:900;margin:0;}
  .tpl-indeed .id-title{font-size:13.5px;font-weight:500;color:#cfe0f7;margin:4px 0 14px;}
  .tpl-indeed .id-contact{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:#e8f0fb;}
  .tpl-indeed .id-body{padding:28px 44px 44px;}
  .tpl-indeed .id-summary{font-size:13px;line-height:1.6;color:#333;margin:0 0 22px;}
  .tpl-indeed .id-section{
    font-size:13px;font-weight:700;color:#2557a7;text-transform:uppercase;letter-spacing:.04em;
    margin:22px 0 12px;display:flex;align-items:center;gap:10px;
  }
  .tpl-indeed .id-section::after{content:"";flex:1;height:2px;background:#e3ecf8;}
  .tpl-indeed .id-role{margin-bottom:18px;}
  .tpl-indeed .id-role-head{display:flex;justify-content:space-between;align-items:baseline;}
  .tpl-indeed .id-role-title{font-size:14px;font-weight:700;margin:0;}
  .tpl-indeed .id-role-period{font-size:11.5px;color:#777;white-space:nowrap;}
  .tpl-indeed .id-role-company{font-size:12.5px;color:#2557a7;font-weight:500;}
  .tpl-indeed .id-bullets{margin:6px 0 0;padding-left:18px;}
  .tpl-indeed .id-bullets li{font-size:12.5px;line-height:1.55;color:#333;margin-bottom:4px;}
  .tpl-indeed .id-pill-list{display:flex;flex-wrap:wrap;gap:8px;}
  .tpl-indeed .id-pill{background:#e3ecf8;color:#2557a7;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:16px;}
  .tpl-indeed .id-edu{font-size:12.5px;color:#333;line-height:1.6;}

  /* ============ 4. GOOGLE DOCS TWO-COLUMN (Spearmint-style) ============ */
  .tpl-gdocs{font-family:'Inter',sans-serif;display:grid;grid-template-columns:220px 1fr;min-height:100%;}
  .tpl-gdocs .gd-side{background:#0b6e4f;color:#fff;padding:40px 26px;}
  .tpl-gdocs .gd-name{font-size:21px;font-weight:700;line-height:1.2;margin:0 0 4px;}
  .tpl-gdocs .gd-title{font-size:12px;color:#bfe8d6;margin:0 0 26px;}
  .tpl-gdocs .gd-side-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#bfe8d6;margin:22px 0 8px;}
  .tpl-gdocs .gd-side-label:first-of-type{margin-top:0;}
  .tpl-gdocs .gd-contact-line{font-size:11.5px;color:#eafbf3;line-height:1.75;word-break:break-word;}
  .tpl-gdocs .gd-skill-tag{display:inline-block;background:rgba(255,255,255,.14);font-size:11px;padding:4px 9px;border-radius:5px;margin:0 5px 6px 0;}
  .tpl-gdocs .gd-edu-item{font-size:11.5px;color:#eafbf3;line-height:1.5;margin-bottom:12px;}
  .tpl-gdocs .gd-edu-item strong{display:block;color:#fff;font-size:12px;}
  .tpl-gdocs .gd-main{padding:40px 40px;}
  .tpl-gdocs .gd-summary{font-size:13px;line-height:1.65;color:#333;margin:0 0 22px;}
  .tpl-gdocs .gd-section{font-size:13px;font-weight:700;color:#0b6e4f;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px;}
  .tpl-gdocs .gd-role{margin-bottom:18px;}
  .tpl-gdocs .gd-role-head{display:flex;justify-content:space-between;align-items:baseline;}
  .tpl-gdocs .gd-role-title{font-size:13.5px;font-weight:700;margin:0;}
  .tpl-gdocs .gd-role-period{font-size:11.5px;color:#888;white-space:nowrap;}
  .tpl-gdocs .gd-role-company{font-size:12px;color:#0b6e4f;font-weight:600;}
  .tpl-gdocs .gd-bullets{margin:5px 0 0;padding-left:16px;}
  .tpl-gdocs .gd-bullets li{font-size:12.3px;line-height:1.55;color:#333;margin-bottom:4px;}

  /* ============ 5. COMBINATION FORMAT (Career-Changer Standard) ============
     The format Indeed's own Career Guide and Zety both recommend by name
     for career changers and people with employment gaps — a "Skills
     Summary" block up top (grouped by competency, not by job) so a hiring
     manager sees transferable strengths before they see an unrelated old
     title, followed by a shorter reverse-chronological history below. */
  .tpl-combo{font-family:'Inter',sans-serif;padding:52px 60px;color:#171717;}
  .tpl-combo .cb-name{font-size:23px;font-weight:800;margin:0 0 2px;letter-spacing:-.01em;}
  .tpl-combo .cb-title{font-size:12.5px;color:#555;font-weight:500;margin:0 0 8px;}
  .tpl-combo .cb-contact{font-size:11.5px;color:#555;margin-bottom:18px;}
  .tpl-combo .cb-section{
    font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
    color:#7a3b12;margin:22px 0 12px;padding-bottom:5px;border-bottom:2px solid #7a3b12;
  }
  .tpl-combo .cb-skill-groups{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}
  .tpl-combo .cb-skill-group-label{font-size:12px;font-weight:700;margin:0 0 4px;}
  .tpl-combo .cb-skill-group-body{font-size:12px;color:#333;line-height:1.55;}
  .tpl-combo .cb-role{margin-bottom:16px;}
  .tpl-combo .cb-role-head{display:flex;justify-content:space-between;align-items:baseline;}
  .tpl-combo .cb-role-title{font-size:13.5px;font-weight:700;margin:0;}
  .tpl-combo .cb-role-period{font-size:11.5px;color:#888;white-space:nowrap;}
  .tpl-combo .cb-role-company{font-size:12px;color:#7a3b12;font-weight:600;}
  .tpl-combo .cb-bullets{margin:5px 0 0;padding-left:16px;}
  .tpl-combo .cb-bullets li{font-size:12.3px;line-height:1.55;color:#333;margin-bottom:3px;}

  /* ============ 6. CANVA BOLD (Free Colorful Template) ============
     Modeled on Canva's own most-used free resume templates — the ones
     with a solid-color geometric header band and a rounded, friendly
     sans-serif. Because Canva templates are free, browser-based, and
     shared constantly on TikTok/YouTube "how to make your resume" content,
     this exact visual pattern is now extremely common among Gen Z and
     early-career US applicants — often the very first resume format a
     new grad ever makes. */
  .tpl-canva{font-family:'Inter',sans-serif;color:#1a1a1a;}
  .tpl-canva .cv-header{
    background:#f2542d;color:#fff;padding:40px 48px 30px;
    display:flex;justify-content:space-between;align-items:flex-end;
  }
  .tpl-canva .cv-name{font-size:27px;font-weight:800;margin:0;letter-spacing:-.01em;}
  .tpl-canva .cv-title{font-size:13px;font-weight:500;color:#ffe3d9;margin:4px 0 0;}
  .tpl-canva .cv-badge{
    background:#fff;color:#f2542d;font-size:11px;font-weight:800;
    padding:7px 13px;border-radius:20px;white-space:nowrap;
  }
  .tpl-canva .cv-body{padding:26px 48px 44px;}
  .tpl-canva .cv-contact{
    display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:#666;margin-bottom:20px;
  }
  .tpl-canva .cv-summary{font-size:13px;line-height:1.6;color:#333;margin:0 0 22px;
    background:#fff4f0;border-left:3px solid #f2542d;padding:12px 16px;border-radius:0 6px 6px 0;}
  .tpl-canva .cv-section{
    font-size:13px;font-weight:800;color:#f2542d;text-transform:uppercase;
    letter-spacing:.03em;margin:22px 0 12px;
  }
  .tpl-canva .cv-role{margin-bottom:16px;}
  .tpl-canva .cv-role-head{display:flex;justify-content:space-between;align-items:baseline;}
  .tpl-canva .cv-role-title{font-size:14px;font-weight:700;margin:0;}
  .tpl-canva .cv-role-period{font-size:11.5px;color:#999;white-space:nowrap;}
  .tpl-canva .cv-role-company{font-size:12.5px;color:#f2542d;font-weight:600;}
  .tpl-canva .cv-bullets{margin:5px 0 0;padding-left:18px;}
  .tpl-canva .cv-bullets li{font-size:12.5px;line-height:1.55;color:#333;margin-bottom:4px;}
  .tpl-canva .cv-pill-list{display:flex;flex-wrap:wrap;gap:8px;}
  .tpl-canva .cv-pill{background:#f2542d;color:#fff;font-size:11.5px;font-weight:700;padding:6px 13px;border-radius:20px;}

  .notes{max-width:820px;margin:0 auto;padding:0 40px 60px;}
  .notes-inner{background:#fff;border:1px solid var(--shell-line);border-radius:10px;padding:22px 26px;}
  .notes-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8577;margin:0 0 10px;}
  .notes-body{font-size:13.5px;line-height:1.65;color:#3a3a3a;}
  .notes-body strong{color:#1a1a1a;}

  @media (max-width:760px){
    .tpl-gdocs{grid-template-columns:1fr;}
    .stage,.shell-header,.picker-bar,.notes{padding-left:18px;padding-right:18px;}
  }

/* ---------- PDF pagination hints ----------
   Used by html2pdf.js's pagebreak: { mode: ['css', 'avoid-all'] } option
   (see downloadResumePDF() in app.js). Without these, html2pdf's default
   slicing has no idea where one role/education entry ends and another
   begins — it was cutting straight through the middle of blocks, leaving
   a large blank gap on one page and spilling almost nothing onto the
   next. These keep each logical unit intact and move it to the next page
   as a whole rather than splitting it. */
[class$="-role"] {
  page-break-inside: avoid;
  break-inside: avoid;
}
[class*="-section"] {
  page-break-inside: avoid;
  page-break-after: avoid; /* a section header should never be the last line on a page, orphaned from its own content */
  break-inside: avoid;
  break-after: avoid;
}
.cp-edu-table tr, .cr-personal-table tr {
  page-break-inside: avoid;
  break-inside: avoid;
}