/* Create Resume builder (landing page #create-resume).
   Everything is scoped under .cr so nothing else on the page is affected.
   Uses the landing page's design tokens (--primary, --line, --slate …). */

.cr{--cr-gap:1.25rem;display:flex;flex-direction:column;gap:var(--cr-gap);text-align:left}
.cr *{box-sizing:border-box}
.cr button{cursor:pointer}
.cr :focus-visible{outline:3px solid rgba(24,90,219,.45);outline-offset:2px}

/* top bar: templates + draft controls */
.cr-top{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between}
.cr-tpls{display:flex;gap:.75rem;flex-wrap:wrap}
.cr-tpl{width:116px;border:2px solid var(--line);border-radius:12px;padding:.55rem;background:#fff;text-align:center;font-weight:600;font-size:.84rem;color:var(--ink-2)}
.cr-tpl[aria-pressed="true"]{border-color:var(--primary);background:var(--soft);color:var(--primary)}
.cr-tpl svg{display:block;width:100%;height:auto;margin-bottom:.35rem;border-radius:6px;background:#fff;border:1px solid var(--line)}
.cr-drafts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.cr-drafts select{min-width:200px;max-width:280px;padding:.5rem .7rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.85rem;background:#fff}
.cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:.84rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
.cr-btn:hover{border-color:var(--primary);color:var(--primary)}
.cr-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.cr-btn.primary:hover{background:var(--primary-dark);color:#fff}
.cr-btn.danger{color:#b91c1c}
.cr-btn.danger:hover{border-color:#dc2626;color:#b91c1c}
.cr-btn[disabled]{opacity:.55;pointer-events:none}
.cr-btn.sm{padding:.3rem .7rem;font-size:.78rem}
.cr-status{font-size:.8rem;color:var(--slate);min-height:1.1em}
.cr-status.ok{color:#047857}.cr-status.err{color:#b91c1c}

/* two columns: form | preview */
.cr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cr-gap);align-items:start}
.cr-form{display:flex;flex-direction:column;gap:.8rem;min-width:0}

/* progress */
.cr-progress{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem}
.cr-progress-h{display:flex;justify-content:space-between;gap:.5rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.cr-progress-h span{color:var(--primary)}
.cr-bar{height:8px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin:.5rem 0 .7rem}
.cr-bar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#10b981);transition:width .3s}
.cr-chips-nav{display:flex;flex-wrap:wrap;gap:.35rem}
.cr-chips-nav button{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:99px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:.74rem;font-weight:600;color:var(--slate-2)}
.cr-chips-nav button i{width:.55rem;height:.55rem;border-radius:50%;background:#cbd5e1}
.cr-chips-nav button.complete i{background:#10b981}
.cr-chips-nav button.error i{background:#f97316}
.cr-chips-nav button[aria-current="true"]{border-color:var(--primary);color:var(--primary);background:var(--soft)}

/* accordion sections */
.cr-sec{background:#fff;border:1px solid var(--line);border-radius:14px}
.cr-sec.error{border-color:#fdba74}
.cr-sec-h{display:flex;align-items:center;gap:.6rem;width:100%;padding:.85rem 1rem;background:none;border:0;font:inherit;text-align:left;color:var(--ink)}
.cr-sec-h b{font-size:.95rem;flex:1}
.cr-sec-h .n{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--tint-2);font-size:.75rem;font-weight:700;color:var(--slate-2);flex:none}
.cr-sec.complete .cr-sec-h .n{background:#10b981;color:#fff}
.cr-sec.error .cr-sec-h .n{background:#f97316;color:#fff}
.cr-tag{font-size:.7rem;font-weight:700;padding:.12rem .5rem;border-radius:99px;background:var(--tint-2);color:var(--slate-2)}
.cr-tag.req{background:#fef2f2;color:#b91c1c}
.cr-sec-h .chev{transition:transform .2s;color:var(--slate)}
.cr-sec-h[aria-expanded="true"] .chev{transform:rotate(180deg)}
.cr-sec-b{padding:0 1rem 1rem;border-top:1px solid var(--line)}
.cr-sec-b[hidden]{display:none}
.cr-help{font-size:.8rem;color:var(--slate);margin:.75rem 0 .2rem}
.cr-sec-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:1rem}

/* fields */
.cr-fields{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .8rem;margin-top:.75rem}
.cr-f{min-width:0}
.cr-f.full{grid-column:1/-1}
.cr-f label{display:block;font-size:.78rem;font-weight:600;color:var(--slate-2);margin-bottom:.22rem}
.cr-f label .req{color:#dc2626}
.cr-f label .opt{font-weight:500;color:var(--slate);font-size:.72rem}
.cr input[type=text],.cr input[type=email],.cr input[type=tel],.cr input[type=url],.cr select,.cr textarea{width:100%;min-height:42px;padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.9rem;background:#fff;color:var(--ink)}
.cr textarea{min-height:auto;resize:vertical;line-height:1.45}
.cr input:focus,.cr select:focus,.cr textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(24,90,219,.15)}
.cr input:disabled,.cr select:disabled{background:var(--tint-2);color:var(--slate)}
.cr-f.invalid input,.cr-f.invalid select,.cr-f.invalid textarea{border-color:#dc2626;background:#fff7f7}
.cr-msg{display:block;font-size:.74rem;color:#b91c1c;margin-top:.2rem}
.cr-msg:empty{display:none}
.cr-pair{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.cr-check{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--slate-2);margin-top:.15rem}
.cr-check input{width:auto;min-height:0}
.cr-count{display:block;text-align:right;font-size:.74rem;color:var(--slate);margin-top:.2rem}
.cr-count.near{color:#b45309}
.cr-hl{animation:crHl 1.8s ease}
@keyframes crHl{0%,65%{box-shadow:0 0 0 4px rgba(245,158,11,.5);border-radius:10px}100%{box-shadow:none}}

/* repeatable entries */
.cr-entry{border:1px solid var(--line);border-radius:12px;margin-top:.75rem;background:var(--tint)}
.cr-entry-h{display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem}
.cr-entry-h .t{flex:1;min-width:0;font-size:.85rem;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-entry-h .t em{font-style:normal;color:var(--slate);font-weight:500}
.cr-ib{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--slate-2);font-size:.85rem;line-height:1}
.cr-ib:hover{border-color:var(--primary);color:var(--primary)}
.cr-ib.del:hover{border-color:#dc2626;color:#b91c1c}
.cr-ib[disabled]{opacity:.35;pointer-events:none}
.cr-entry-b{padding:0 .7rem .8rem;border-top:1px solid var(--line);background:#fff;border-radius:0 0 12px 12px}
.cr-entry-b .cr-fields{margin-top:.6rem}
.cr-add{width:100%;margin-top:.75rem;padding:.6rem;border:1.5px dashed #9fb7e8;border-radius:10px;background:#fff;color:var(--primary);font:inherit;font-weight:700;font-size:.85rem}
.cr-add:hover{background:var(--soft)}
.cr-sub{font-size:.88rem;font-weight:700;color:var(--navy);margin:1rem 0 0}
.cr-order{font-size:.74rem;color:var(--slate);margin-top:.4rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cr-order button{background:none;border:0;padding:0;color:var(--primary);font:inherit;font-weight:600;text-decoration:underline}

/* skills */
.cr-skill{border:1px solid var(--line);border-radius:12px;padding:.7rem;margin-top:.75rem}
.cr-skill > b{display:block;font-size:.84rem;color:var(--ink-2)}
.cr-skill > small{display:block;font-size:.74rem;color:var(--slate);margin-bottom:.45rem}
.cr-sk-list{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.cr-sk-list li{display:inline-flex;align-items:center;gap:.15rem;padding:.18rem .25rem .18rem .65rem;border-radius:99px;background:var(--soft);border:1px solid #cddcf8;font-size:.82rem;color:var(--primary);font-weight:600}
.cr-sk-list li button{width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--slate-2);font-size:.75rem}
.cr-sk-list li button:hover{background:#fff;color:var(--primary)}
.cr-sk-list li input{width:140px;min-height:28px;padding:.15rem .4rem;font-size:.82rem}
.cr-sk-add{display:flex;gap:.4rem;margin-top:.55rem}
.cr-sk-add input{flex:1}

/* preview pane */
.cr-preview{position:sticky;top:84px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;max-height:calc(100vh - 100px);min-width:0}
.cr-pv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.6rem .7rem;border-bottom:1px solid var(--line)}
.cr-pv-bar .grp{display:inline-flex;align-items:center;gap:.25rem}
.cr-pv-bar .lbl{font-size:.78rem;color:var(--slate-2);min-width:3.2rem;text-align:center;font-weight:600}
.cr-pv-bar .sp{flex:1}
.cr-pv-mode{font-size:.74rem;color:var(--slate);padding:.35rem .8rem;border-bottom:1px solid var(--line);background:var(--tint)}
.cr-pv-view{overflow:auto;padding:1rem;background:#eef2f7;flex:1;min-height:min(420px,calc(100vh - 230px));border-radius:0 0 14px 14px}
.cr-pv-zoom{width:794px;margin:0 auto;transform-origin:top left}
.cr-pv-pages{display:grid;gap:1rem}
.cr-pv-pages img{width:794px;display:block;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.15)}
.cr-pv-pages figcaption{text-align:center;font-size:.8rem;color:var(--slate);margin-top:.3rem}

/* live document — same typography as career_app/create_resume_pdf.py (pt × 1.333 = px) */
.crp{position:relative;width:794px;min-height:1123px;background:#fff;box-shadow:0 4px 16px rgba(15,23,42,.15);padding:60px 68px;color:#111;overflow-wrap:anywhere}
.crp-empty{color:#94a3b8;text-align:center;margin-top:12rem;font-family:var(--font);font-size:15px}
.crp h1{margin:0;font-weight:700;font-family:inherit}
.crp h2{margin:0;font-family:inherit;text-transform:uppercase;font-weight:700}
.crp p{margin:0}
.crp ul{list-style:disc;margin:0;padding-left:18px}
.crp li{margin:2px 0 0}
.crp a{color:#1155cc;text-decoration:underline}
.crp .crp-hdr{margin-bottom:4px}
.crp .crp-g{font-weight:700;margin-top:4px}
.crp .crp-e{margin-top:4px;margin-bottom:7px}
.crp .crp-note{font-style:italic;margin-top:3px}
.crp .crp-role{margin-top:3px}
.crp .crp-detail{margin-left:0}
.crp-break{position:absolute;left:0;right:0;border-top:2px dashed #93a3b8;pointer-events:none}
.crp-break span{position:absolute;right:8px;top:-1.35em;font:600 11px/1 var(--font);color:#64748b;background:#eef2f7;padding:2px 6px;border-radius:6px}

.crp.classic{font-family:'Liberation Serif','Times New Roman',Times,serif;font-size:13.3px;line-height:17.6px}
.crp.classic .crp-hdr{text-align:center}
.crp.classic h1{font-size:26.7px;line-height:32px;text-transform:uppercase}
.crp.classic .crp-title{font-size:14.7px;line-height:20px;margin-top:3px}
.crp.classic .crp-contact{font-size:12.7px;line-height:17px;margin-top:3px}
.crp.classic h2{font-size:14.7px;line-height:19px;margin-top:16px;padding-bottom:3px;border-bottom:1px solid #111;margin-bottom:7px}
.crp.classic .crp-j,.crp.classic li{text-align:justify}
.crp.classic .crp-eh{font-size:14px;line-height:18px}

.crp.modern{font-family:'Liberation Sans',Arial,Helvetica,sans-serif;font-size:12.8px;line-height:17.3px;color:#1f2937}
.crp.modern h1{font-size:29.3px;line-height:35px;color:#1f2937}
.crp.modern .crp-title{font-size:15.3px;line-height:21px;color:#1d4ed8;margin-top:3px}
.crp.modern .crp-contact{font-size:12px;line-height:16px;color:#4b5563;margin-top:3px}
.crp.modern .crp-hdr{border-bottom:2px solid #1d4ed8;padding-bottom:8px}
.crp.modern h2{font-size:14px;line-height:18px;color:#1d4ed8;margin-top:16px;padding-bottom:3px;border-bottom:1.2px solid #93c5fd;margin-bottom:7px}
.crp.modern .crp-eh{font-size:13.3px;line-height:17.3px}
.crp.modern .crp-meta{color:#4b5563;font-size:12.3px}

.crp.minimal{font-family:'Liberation Sans',Arial,Helvetica,sans-serif;font-size:12.5px;line-height:16.5px;color:#111827}
.crp.minimal h1{font-size:24px;line-height:29px}
.crp.minimal .crp-title{font-size:14px;line-height:19px;color:#6b7280;margin-top:2px}
.crp.minimal .crp-contact{font-size:11.7px;line-height:15.8px;color:#6b7280;margin-top:2px}
.crp.minimal h2{font-size:12.3px;line-height:16px;color:#6b7280;margin-top:13px;margin-bottom:4px}
.crp.minimal .crp-eh{font-size:13px;line-height:17px}
.crp.minimal .crp-meta{color:#6b7280;font-size:12px}

.cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media(max-width:1100px){
  .cr-grid{grid-template-columns:1fr}
  .cr-preview{position:static;max-height:none}
  .cr-pv-view{max-height:80vh}
}
@media(max-width:600px){
  .cr-fields{grid-template-columns:1fr}
  .cr-tpl{width:96px}
  .cr-drafts select{min-width:0;width:100%}
  .cr-pv-bar .sp{display:none}
}
@media(prefers-reduced-motion:reduce){.cr-hl{animation:none}.cr-bar i{transition:none}}