/* ============================================================
   FLEXING DATA — AI Resume Builder & ATS Checker  (/resume)
   Warm-light theme, brand palette only (see CLAUDE.md §4).
   Self-contained: does NOT depend on main.css/bootstrap.
   Sections:  variables · base · buttons · steps · upload ·
   analyzing · report · templates · build · preview ·
   resume templates · print · responsive
   ============================================================ */
:root{
  --rb-ink:#18222f;  --rb-ink2:#44515f;  --rb-ink3:#6b7785;
  --rb-paper:#fffaf4; --rb-card:#ffffff; --rb-cream:#fff4e9;
  --rb-brand:#0a96c7; --rb-brand-deep:#0a7ba6; --rb-coral:#ff9d83;
  --rb-sky:#62c1e0;  --rb-amber:#fdcd75; --rb-teal:#5ac7a6; --rb-violet:#bfb0ff;
  --rb-line:rgba(24,34,47,.10); --rb-line2:rgba(24,34,47,.18);
  --rb-good:#1f9d6b; --rb-warn:#e08a2b; --rb-bad:#d9534f;
  --rb-radius:16px;
  --rb-shadow:0 18px 40px -24px rgba(24,34,47,.40);
  --rb-shadow-sm:0 6px 16px -10px rgba(24,34,47,.34);
  --rb-maxw:940px;
  --rb-head:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rb-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--rb-paper); color:var(--rb-ink);
  font-family:var(--rb-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.rb-page{ max-width:var(--rb-maxw); margin:0 auto; padding:30px 20px 80px; }
.rb-page h1,.rb-page h2,.rb-page h3{ font-family:var(--rb-head); color:var(--rb-ink); letter-spacing:-.02em; }
.rb-accent{ color:var(--rb-brand-deep); }
.rb-sub{ color:var(--rb-ink2); font-size:16.5px; line-height:1.65; }

/* screen swap */
.rb-screen{ display:none; animation:rb-fade .35s ease; }
.rb-screen.is-active{ display:block; }
@keyframes rb-fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ---------- buttons ---------- */
.rb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--rb-head); font-weight:700; font-size:15px; line-height:1;
  min-height:46px; padding:13px 22px; border-radius:12px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .14s, box-shadow .14s, background .14s, border-color .14s;
  white-space:nowrap;
}
.rb-btn:active{ transform:translateY(1px); }
.rb-btn-primary{ color:#fff; background:linear-gradient(135deg,var(--rb-brand),var(--rb-brand-deep)); box-shadow:0 12px 24px -12px rgba(10,150,199,.65); }
.rb-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -12px rgba(10,150,199,.75); }
.rb-btn-primary:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.rb-btn-ghost{ color:var(--rb-ink); background:#fff; border-color:var(--rb-line2); }
.rb-btn-ghost:hover{ border-color:var(--rb-brand); color:var(--rb-brand-deep); }
.rb-btn-lg{ font-size:16.5px; min-height:54px; padding:16px 30px; border-radius:14px; }
.rb-btn-mini{ min-height:34px; padding:7px 12px; font-size:13px; border-radius:9px; gap:5px; }

.rb-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* ---------- step rail (clickable stepper) ---------- */
.rb-steps{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; }
.rb-steps[hidden]{ display:none; }   /* author display:flex would otherwise beat UA [hidden] */
.rb-step{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--rb-head); font-weight:700; font-size:12.5px; color:var(--rb-ink2);
  background:#fff; border:1px solid var(--rb-line); border-radius:999px; padding:6px 14px 6px 6px;
  transition:border-color .15s, background .15s, color .15s, transform .12s;
}
.rb-step:hover{ border-color:var(--rb-brand); color:var(--rb-brand-deep); transform:translateY(-1px); }
.rb-step-n{ width:20px; height:20px; flex:0 0 auto; border-radius:50%; background:#eef3f6; color:var(--rb-ink3);
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.rb-step.is-done .rb-step-n{ background:var(--rb-good); color:#fff; }
.rb-step.is-active{ color:#fff; background:var(--rb-brand-deep); border-color:var(--rb-brand-deep); }
.rb-step.is-active .rb-step-n{ background:rgba(255,255,255,.28); color:#fff; }

/* ============================================================
   0) START — choose your path + template example
   ============================================================ */
.rb-choice{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:760px; margin:0 auto; }
.rb-choice-card{
  text-align:left; background:#fff; border:1.5px solid var(--rb-line2); border-radius:var(--rb-radius);
  padding:24px 24px 22px; cursor:pointer; display:flex; flex-direction:column; gap:6px;
  font-family:var(--rb-body); box-shadow:var(--rb-shadow-sm);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.rb-choice-card:hover{ transform:translateY(-3px); box-shadow:var(--rb-shadow); border-color:var(--rb-brand); }
.rb-choice-card.is-primary{ border-color:var(--rb-brand); box-shadow:0 0 0 3px #eaf7fc, var(--rb-shadow-sm); }
.rb-choice-icon{ font-size:32px; line-height:1; }
.rb-choice-title{ font-family:var(--rb-head); font-weight:800; font-size:19px; color:var(--rb-ink); }
.rb-choice-desc{ color:var(--rb-ink2); font-size:14.5px; line-height:1.5; }
.rb-choice-cta{ margin-top:8px; font-family:var(--rb-head); font-weight:700; font-size:14px; color:var(--rb-brand-deep); }

.rb-example{ max-width:520px; margin:36px auto 0; text-align:center; }
.rb-example-label{ font-family:var(--rb-head); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--rb-ink3); margin-bottom:12px; }
.rb-example-frame{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--rb-line); border-radius:12px; box-shadow:var(--rb-shadow); }
.rb-example-inner{ pointer-events:none; }

/* ============================================================
   1) UPLOAD
   ============================================================ */
.rb-hero{ text-align:center; max-width:760px; margin:8px auto 26px; }
.rb-badge{
  display:inline-block; font-family:var(--rb-head); font-weight:700; font-size:13px;
  color:var(--rb-brand-deep); background:#eaf7fc; border:1px solid #cfeaf5;
  border-radius:999px; padding:7px 15px; margin-bottom:16px;
}
.rb-hero h1{ font-size:clamp(27px,4.6vw,42px); line-height:1.12; margin:0 0 14px; }
.rb-hero .rb-sub{ font-size:17px; }

.rb-dropzone{
  max-width:680px; margin:0 auto; background:#fff; border:2.5px dashed var(--rb-line2);
  border-radius:var(--rb-radius); padding:46px 28px; text-align:center; cursor:pointer;
  transition:border-color .18s, background .18s, transform .18s; box-shadow:var(--rb-shadow-sm);
}
.rb-dropzone:hover, .rb-dropzone:focus-visible{ border-color:var(--rb-brand); background:#fbfeff; outline:none; }
.rb-dropzone.is-drag{ border-color:var(--rb-brand); background:#eaf7fc; transform:scale(1.01); }
.rb-dz-icon{ font-size:46px; line-height:1; margin-bottom:10px; }
.rb-dz-title{ font-family:var(--rb-head); font-weight:700; font-size:20px; }
.rb-dz-or{ color:var(--rb-ink2); margin-top:4px; }
.rb-dz-browse{ color:var(--rb-brand-deep); font-weight:700; text-decoration:underline; }
.rb-dz-note{ color:var(--rb-ink3); font-size:13.5px; margin-top:14px; }

.rb-paste{ max-width:680px; margin:18px auto 0; }
.rb-paste-msg{ color:var(--rb-warn); font-weight:600; font-size:14.5px; margin:0 0 10px; }
.rb-paste textarea, .rb-target textarea, .rb-target input{
  width:100%; font-family:var(--rb-body); font-size:15px; color:var(--rb-ink);
  border:1.5px solid var(--rb-line2); border-radius:12px; padding:13px 15px; background:#fff; resize:vertical;
}
.rb-paste textarea:focus, .rb-target textarea:focus, .rb-target input:focus{ outline:none; border-color:var(--rb-brand); }
.rb-paste .rb-btn{ margin-top:12px; }

.rb-target{ max-width:680px; margin:18px auto 0; background:#fff; border:1px solid var(--rb-line); border-radius:14px; padding:4px 18px; }
.rb-target summary{ cursor:pointer; font-family:var(--rb-head); font-weight:600; font-size:14.5px; color:var(--rb-ink); padding:12px 0; list-style:none; }
.rb-target summary::-webkit-details-marker{ display:none; }
.rb-target[open] summary{ border-bottom:1px solid var(--rb-line); margin-bottom:14px; }
.rb-target .rb-opt{ color:var(--rb-ink3); font-weight:500; }
.rb-target input{ margin-bottom:10px; }
.rb-target textarea{ margin-bottom:14px; }

.rb-privacy{ text-align:center; color:var(--rb-ink3); font-size:13.5px; max-width:620px; margin:22px auto 0; }

/* ============================================================
   ANALYZING — the smart-scan. A mini document being "read" by a
   sweeping beam, steps that type themselves out, and tickers that
   count what the rule-based parser actually found.
   ============================================================ */
.rb-analyzing{ text-align:center; padding:50px 20px 70px; max-width:520px; margin:0 auto; }
.rb-analyzing h2{ font-size:24px; margin:0 0 20px; }

.rb-scan-doc{
  position:relative; width:118px; height:150px; margin:0 auto 26px; padding:18px 15px 0;
  background:#fff; border:1px solid var(--rb-line2); border-radius:10px;
  box-shadow:var(--rb-shadow-sm); overflow:hidden;
}
.rb-scan-doc i{ display:block; height:7px; border-radius:4px; background:#e8eef3; margin-bottom:10px; }
.rb-scan-doc i:nth-child(1){ width:58%; background:#cfe4f0; }
.rb-scan-doc i:nth-child(2){ width:86%; }
.rb-scan-doc i:nth-child(3){ width:72%; }
.rb-scan-doc i:nth-child(4){ width:90%; }
.rb-scan-doc i:nth-child(5){ width:64%; }
.rb-scan-doc i:nth-child(6){ width:82%; }
.rb-scan-doc i:nth-child(7){ width:45%; }
.rb-scan-beam{
  position:absolute; left:0; right:0; top:0; height:36px; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,150,199,0) 0%, rgba(10,150,199,.16) 40%,
    rgba(10,150,199,.45) 50%, rgba(10,150,199,.16) 60%, rgba(10,150,199,0) 100%);
  animation:rbBeam 1.7s ease-in-out infinite;
}
@keyframes rbBeam{ 0%{ transform:translateY(-40px);} 55%{ transform:translateY(155px);} 100%{ transform:translateY(-40px);} }

.rb-scan-steps{ list-style:none; margin:0 auto; padding:0; max-width:340px; text-align:left; min-height:172px; }
.rb-scan-steps li{ display:flex; gap:10px; align-items:baseline; padding:6px 0; color:var(--rb-ink2); font:500 15px/1.5 var(--rb-body); }
.rb-scan-steps li .ic{ flex:0 0 auto; }
.rb-scan-steps li.is-active .tx::after{ content:"▋"; margin-left:2px; color:var(--rb-brand); animation:rbCaret .8s steps(1) infinite; }
@keyframes rbCaret{ 50%{ opacity:0; } }
.rb-scan-steps li.is-done{ color:var(--rb-ink3); }

.rb-scan-found{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px auto 0; max-width:430px; }
.rb-scan-found[hidden]{ display:none; }
.rb-tick{
  position:relative; overflow:hidden; font:600 13px var(--rb-head); color:var(--rb-brand-deep);
  background:#eaf7fc; border:1px solid #cfeaf5; padding:6px 12px; border-radius:999px;
}
.rb-tick b{ font-weight:800; }
.rb-tick::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  animation:rbShimmer 1.7s ease .25s 2;
}
@keyframes rbShimmer{ to{ transform:translateX(100%);} }

/* ============================================================
   2) ATS REPORT
   ============================================================ */
.rb-report-head{ text-align:center; margin-bottom:22px; }
.rb-report-head h2{ font-size:clamp(24px,3.6vw,32px); margin:0 0 6px; }

.rb-score-card{
  display:flex; gap:30px; align-items:center; background:#fff; border:1px solid var(--rb-line);
  border-radius:var(--rb-radius); padding:26px 30px; box-shadow:var(--rb-shadow-sm); margin-bottom:18px;
}
.rb-ring{ position:relative; width:128px; height:128px; flex:0 0 auto; }
.rb-ring svg{ width:128px; height:128px; transform:rotate(-90deg); }
.rb-ring-bg{ fill:none; stroke:#eef3f6; stroke-width:11; }
.rb-ring-fg{ fill:none; stroke:var(--rb-brand); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.1s ease, stroke .4s; }
.rb-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; font-family:var(--rb-head); font-weight:800; }
.rb-ring-num span{ font-size:38px; line-height:1; color:var(--rb-ink); }
.rb-ring-num small{ font-size:13px; color:var(--rb-ink3); font-weight:600; }
.rb-score-meta{ flex:1; min-width:0; }
.rb-verdict{ font-family:var(--rb-head); font-weight:800; font-size:22px; }
.rb-verdict-sub{ color:var(--rb-ink2); margin:4px 0 14px; font-size:15px; }

.rb-subscores{ display:grid; gap:10px; }
.rb-sub-row{ display:grid; grid-template-columns:120px 1fr 44px; align-items:center; gap:12px; font-size:13.5px; }
.rb-sub-row .lbl{ color:var(--rb-ink2); font-weight:600; }
.rb-sub-bar{ height:8px; background:#eef3f6; border-radius:999px; overflow:hidden; }
.rb-sub-bar i{ display:block; height:100%; border-radius:999px; background:var(--rb-brand); transition:width 1s ease; }
.rb-sub-row .val{ text-align:right; font-weight:700; color:var(--rb-ink); font-family:var(--rb-head); }

.rb-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.rb-card{ background:#fff; border:1px solid var(--rb-line); border-radius:var(--rb-radius); padding:22px 24px; box-shadow:var(--rb-shadow-sm); margin-bottom:18px; }
.rb-card h3{ font-size:17px; margin:0 0 14px; }
.rb-card-note{ color:var(--rb-ink3); font-size:13.5px; margin:-6px 0 14px; }
.rb-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.rb-card ul li{ position:relative; padding-left:26px; font-size:14.5px; color:var(--rb-ink2); line-height:1.55; }
.rb-strong ul li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--rb-good); font-weight:800; }
.rb-weak ul li::before{ content:"!"; position:absolute; left:2px; top:0; color:var(--rb-warn); font-weight:800; }

.rb-sections{ display:grid; gap:10px; }
.rb-sec-item{ border:1px solid var(--rb-line); border-radius:12px; overflow:hidden; }
.rb-sec-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; background:#fcfdfe; font-family:var(--rb-head); font-weight:700; font-size:14.5px; }
.rb-sec-head .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.rb-sec-head .dot.good{ background:var(--rb-good);} .rb-sec-head .dot.warn{ background:var(--rb-warn);} .rb-sec-head .dot.bad{ background:var(--rb-bad);}
.rb-sec-head .chev{ margin-left:auto; color:var(--rb-ink3); transition:transform .2s; }
.rb-sec-item.open .chev{ transform:rotate(180deg); }
.rb-sec-body{ display:none; padding:0 16px 14px; font-size:14px; color:var(--rb-ink2); }
.rb-sec-item.open .rb-sec-body{ display:block; }

.rb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rb-chip{ background:var(--rb-cream); border:1px solid #f0ddc6; color:#8a5a12; font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; }
.rb-chip.have{ background:#eafaf3; border-color:#bce8d4; color:#157a52; }

/* ============================================================
   3) AI SUGGESTIONS — the "stronger options" popover that appears
   under a line on the resume after tapping its ✨ refine button.
   ============================================================ */
.rb-ai-suggest{ background:#f6f3ff; border:1px solid #e2dbff; border-radius:10px; padding:10px 12px; margin:6px 0 10px; font:13.5px/1.5 'Inter', sans-serif; list-style:none; }
.rb-ai-suggest-head{ font-weight:700; margin-bottom:4px; }
.rb-ai-suggest .opt{ display:block; padding:7px 9px; border-radius:8px; cursor:pointer; color:var(--rb-ink); }
.rb-ai-suggest .opt:hover{ background:#fff; }
.rb-ai-suggest .opt b, .rb-ai-suggest-head b{ color:var(--rb-violet); }

/* ============================================================
   4) EDITOR (side-by-side) & EXPORT
   Left: uploaded resume / quick tips + the "reach 100%" coach.
   Right: the editable A4 paper (kept at its real 794px width —
   scaling a contenteditable surface breaks the text caret).
   ============================================================ */
/* Break out of the narrow .rb-page so the paper + side panel fit together. */
#screen-preview{ width:100vw; margin-left:calc(50% - 50vw); padding:0 22px; }
#screen-preview .rb-preview-bar, #screen-preview .rb-pv-hint{ max-width:1240px; margin-left:auto; margin-right:auto; }

.rb-ed-cols{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:18px; max-width:1240px; margin:0 auto; align-items:start; }
.rb-ed-side{ position:sticky; top:140px; display:flex; flex-direction:column; gap:14px; max-height:calc(100vh - 160px); overflow:auto; }
.rb-ed-box{ background:var(--rb-card); border:1px solid var(--rb-line); border-radius:14px; box-shadow:var(--rb-shadow-sm); overflow:hidden; flex:0 0 auto; }
.rb-ed-box[hidden]{ display:none; }
.rb-ed-head{ font:700 13px var(--rb-head); color:var(--rb-ink2); padding:10px 14px; border-bottom:1px solid var(--rb-line); background:var(--rb-cream); }
#rb-ed-orig pre{ margin:0; padding:14px; max-height:48vh; overflow:auto; font:12.5px/1.6 var(--rb-body); color:var(--rb-ink2); white-space:pre-wrap; word-break:break-word; }
.rb-ed-side .rb-pv-coach{ margin:0; max-width:none; flex:0 0 auto; }
.rb-ed-tiplist{ list-style:none; margin:0; padding:12px 14px; display:grid; gap:8px; }
.rb-ed-tiplist li{ font-size:13.5px; line-height:1.55; color:var(--rb-ink2); padding-left:18px; position:relative; }
.rb-ed-tiplist li::before{ content:"→"; position:absolute; left:0; color:var(--rb-brand); }

/* —— "Fill the gaps" box: what the extractor couldn't find —— */
.rb-ed-gaps{ border-left:4px solid var(--rb-amber); }
.rb-ed-gaps.is-done{ border-left-color:var(--rb-good); }
.rb-gaps-sub{ padding:10px 14px 0; font-size:13.5px; line-height:1.5; color:var(--rb-ink2); }
.rb-gaps-sub b{ color:var(--rb-ink); }
.rb-gaps-list{ display:flex; flex-wrap:wrap; gap:7px; padding:10px 14px 4px; }
.rb-gap-chip{
  font:600 12.5px var(--rb-head); color:#8a5a12; background:#fff7ea; border:1px solid #f3d9a6;
  border-radius:999px; padding:6px 11px; cursor:pointer; text-align:left;
  transition:background .15s, transform .15s;
}
.rb-gap-chip:hover{ background:#fdeecd; transform:translateY(-1px); }
.rb-gaps-more{ font:600 12px var(--rb-head); color:var(--rb-ink3); align-self:center; }
.rb-gaps-next{ margin:6px 14px 14px; width:calc(100% - 28px); }
.rb-gaps-done{ padding:14px; font-size:14px; line-height:1.55; color:#157a52; }

/* the pulse on the exact field a gap chip points at */
.rb-paper .rb-gap-flash{ animation:rbGapPulse 1.5s ease 2; border-radius:4px; }
@keyframes rbGapPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(253,205,117,0); }
  40%{ box-shadow:0 0 0 6px rgba(253,205,117,.55); background:#fff7ea; }
}

/* one-time intro after analysis: sections fade onto the page in order */
.rb-materialize .r-head, .rb-materialize .r-sec{ opacity:0; animation:rbIn .5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rbIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

@media (prefers-reduced-motion: reduce){
  .rb-scan-beam, .rb-tick::after, .rb-scan-steps li.is-active .tx::after{ animation:none; }
  .rb-materialize .r-head, .rb-materialize .r-sec{ animation:none; opacity:1; }
  .rb-paper .rb-gap-flash{ animation:none; background:#fff7ea; }
  .rb-gap-chip:hover{ transform:none; }
}

@media(max-width:1240px){
  .rb-ed-cols{ grid-template-columns:280px minmax(0,1fr); }
}
@media(max-width:980px){
  /* Stack: gaps + coach + original on top (capped height), the paper below. */
  .rb-ed-cols{ grid-template-columns:1fr; }
  .rb-ed-side{ position:static; max-height:none; overflow:visible; }
  #rb-ed-orig pre{ max-height:32vh; }
}

.rb-preview-bar{
  position:sticky; top:72px; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,250,244,.92); backdrop-filter:blur(10px); border:1px solid var(--rb-line);
  border-radius:14px; padding:10px 14px; margin-bottom:8px;
}
.rb-pv-center{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.rb-pv-score{ font-family:var(--rb-head); font-weight:800; font-size:14px; color:var(--rb-brand-deep); background:#eaf7fc; border:1px solid #cfeaf5; border-radius:999px; padding:7px 14px; }
.rb-pv-fit{ font-family:var(--rb-head); font-weight:700; font-size:13px; border-radius:999px; padding:7px 12px; border:1px solid; }
.rb-pv-fit.ok{ color:#157a52; background:#eafaf3; border-color:#bce8d4; }
.rb-pv-fit.warn{ color:#8a5a12; background:#fff7ea; border-color:#f3d9a6; }
.rb-pv-hint{ text-align:center; color:var(--rb-ink3); font-size:13px; margin:4px auto 18px; max-width:640px; }

/* "Reach 100% ATS" coach */
.rb-pv-coach{ max-width:760px; margin:10px auto 14px; background:#fff; border:1px solid var(--rb-line); border-left:4px solid var(--rb-amber); border-radius:12px; padding:14px 18px; box-shadow:var(--rb-shadow-sm); }
.rb-pv-coach.is-done{ border-color:#bce8d4; border-left-color:var(--rb-good); background:#eafaf3; color:#157a52; font-size:15px; }
.rb-coach-head{ font-size:14.5px; color:var(--rb-ink); margin-bottom:8px; }
.rb-coach-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rb-coach-list li{ font-size:13.5px; line-height:1.5; }
.rb-coach-list li.todo{ color:var(--rb-ink); font-weight:600; }
.rb-coach-list li.ok{ color:var(--rb-ink3); }

.rb-paper-scroll{ overflow-x:auto; padding-bottom:30px; }
/* A4 sheet @96dpi ≈ 794×1123px */
.rb-paper{ position:relative; width:794px; min-height:1123px; margin:0 auto; background:#fff; box-shadow:var(--rb-shadow); border-radius:2px; }
.rb-paper.is-2page{ min-height:2246px; }
/* Page-limit marker (screen only — hidden when printing). For a 2-page resume the
   limit sits at the end of page 2; a lighter dashed line marks the page-1 break. */
.rb-paper::after{ content:""; position:absolute; left:0; right:0; top:1123px; border-top:2px dashed rgba(217,83,79,.45); pointer-events:none; }
.rb-paper.is-2page::after{ top:2246px; }
.rb-paper.is-2page::before{ content:""; position:absolute; left:0; right:0; top:1123px; border-top:1px dashed rgba(24,34,47,.22); pointer-events:none; }

/* ============================================================
   RESUME TEMPLATE — "Modern" (the only template)
   Single column + real selectable text → ATS-safe, built to fit one A4 page.
   Class hierarchy comes from templates.js (RB.renderResume).
   ============================================================ */
.rb-resume{
  --r-accent:#0a7ba6;      /* links + bullet markers */
  --r-navy:#1f3a5f;        /* name + section headings (matches the reference PDF) */
  --r-ink:#16202c; --r-muted:#5b6470;
  color:#1d2530; background:#fff; padding:46px 50px; font-size:13.4px; line-height:1.48;
  font-family:'Inter', Arial, Helvetica, sans-serif;
}

/* —— Header: centered name, title, contact line, links line (PDF layout) —— */
.rb-resume .r-head{ text-align:center; margin-bottom:14px; padding-bottom:10px; border-bottom:1.5px solid var(--r-navy); }
.rb-resume .r-name{ font-family:'Plus Jakarta Sans', sans-serif; font-size:27px; font-weight:800; letter-spacing:.01em; margin:0; line-height:1.1; color:var(--r-navy); text-transform:uppercase; }
.rb-resume .r-title{ font-size:12.6px; font-weight:700; color:var(--r-navy); margin-top:4px; }
.rb-resume .r-contact{ font-size:11.8px; color:#444c57; margin-top:6px; }
.rb-resume .r-contact.r-links{ margin-top:3px; }
.rb-resume .r-contact.r-links a{ color:var(--r-accent); text-decoration:underline; }
.rb-resume .r-contact a{ color:inherit; text-decoration:none; }
.rb-resume .r-sep{ color:#9aa4af; }

/* —— Sections: navy uppercase title + full-width rule —— */
.rb-resume .r-sec{ margin-top:13px; position:relative; }
.rb-resume .r-sec > h2{
  font-family:'Plus Jakarta Sans', sans-serif; font-size:12.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--r-navy); margin:0 0 7px; padding-bottom:3px; border-bottom:1.5px solid var(--r-navy);
}
.rb-resume .r-summary{ margin:0; color:#2c3642; text-align:justify; }

/* —— Items: experience / projects / education (inline header line) —— */
.rb-resume .r-item{ margin-bottom:9px; }
.rb-resume .r-item:last-child{ margin-bottom:0; }
.rb-resume .r-item-head{ font-size:13px; line-height:1.42; }
.rb-resume .r-item-sub{ font-size:12.3px; line-height:1.42; margin-top:1px; }
.rb-resume .r-role{ font-weight:700; font-size:13.2px; color:var(--r-ink); }
.rb-resume .r-dates{ font-style:italic; font-size:11.6px; color:var(--r-muted); font-weight:600; }
.rb-resume .r-dash{ color:var(--r-muted); }
.rb-resume .r-org{ font-weight:600; font-size:12.8px; color:#3a4350; }
.rb-resume .r-loc{ font-style:italic; font-size:12.2px; color:var(--r-muted); }
.rb-resume .r-stack{ font-style:italic; font-size:12px; color:var(--r-muted); }
.rb-resume .r-detail{ font-size:12.2px; color:#3a4350; font-style:italic; }
.rb-resume .r-bullets{ margin:4px 0 0; padding-left:17px; }
.rb-resume .r-bullets li{ margin-bottom:2px; padding-left:2px; }
.rb-resume .r-bullets li::marker{ color:var(--r-accent); }
.rb-resume .r-extra-body{ font-size:12.6px; color:#2c3642; white-space:pre-wrap; }

/* —— Skills —— */
.rb-resume .r-skill{ margin-bottom:3px; font-size:12.6px; line-height:1.4; }
.rb-resume .r-skill-label, .rb-resume .r-skill-colon{ font-weight:700; color:var(--r-ink); }
.rb-resume .r-skill-items{ color:#2c3642; }

/* —— Certifications —— */
.rb-resume .r-cert-meta{ color:var(--r-muted); font-size:11.8px; }

/* —— inline editing affordance in the live preview —— */
.rb-paper [contenteditable]{ outline:none; border-radius:3px; transition:background .15s; }
.rb-paper [contenteditable]:hover{ background:#fff6e9; }
.rb-paper [contenteditable]:focus{ background:#eaf7fc; box-shadow:0 0 0 2px #cfeaf5; }
/* Placeholder for empty editable fields, so a blank resume is still clickable/typeable. */
.rb-paper [contenteditable]:empty::before{ content:attr(data-ph); color:#b3bcc6; font-style:italic; cursor:text; }

/* —— inline structural controls (edit mode only; never printed) —— */
.rb-resume .r-add, .rb-resume .r-badd{ display:inline-block; margin:5px 6px 0 0; padding:2px 10px; font:600 11px/1.6 'Inter', sans-serif; color:var(--r-accent); background:#eef8fc; border:1px dashed #bfe3f0; border-radius:20px; cursor:pointer; }
.rb-resume .r-add:hover, .rb-resume .r-badd:hover{ background:#d8eff8; }
.rb-resume .r-del, .rb-resume .r-bdel{ margin-left:6px; padding:0; width:16px; height:16px; line-height:14px; text-align:center; font-size:10px; color:#c2503f; background:#fdecec; border:1px solid #f3c7c1; border-radius:50%; cursor:pointer; vertical-align:middle; }
.rb-resume .r-del:hover, .rb-resume .r-bdel:hover{ background:#f8d6d1; }
/* ✨ AI refine — one per line (bullets + summary) */
.rb-resume .r-improve{ margin-left:6px; padding:0 7px; height:18px; line-height:16px; font-size:11px; background:#f6f3ff; border:1px solid #e2dbff; border-radius:10px; cursor:pointer; vertical-align:middle; }
.rb-resume .r-improve:hover{ background:#ece6ff; }
.rb-resume .r-improve:disabled{ opacity:.5; cursor:wait; }
.rb-resume .r-link-wrap{ white-space:nowrap; }

/* ============================================================
   PRINT — only the resume prints, as real selectable text.
   ============================================================ */
@media print{
  @page{ size:A4; margin:13mm; }
  html, body{ background:#fff !important; }
  .fdnav, .fd-ftr, .rb-steps, .rb-preview-bar, .rb-pv-hint, .rb-paper-scroll{ box-shadow:none !important; }
  body *{ visibility:hidden !important; }
  .rb-paper, .rb-paper *{ visibility:visible !important; }
  /* Keep only the screen the user is on; never print a hidden (possibly empty) preview. */
  .rb-screen:not(.is-active){ display:none !important; }
  /* The editor's grid + full-bleed wrappers would clip/offset the absolutely-positioned
     .rb-paper — neutralise them so only the paper lays out on the printed page. */
  .rb-screen.is-active, .rb-ed-cols, .rb-paper-scroll{
    position:static !important; overflow:visible !important; height:auto !important; max-height:none !important;
    width:auto !important; transform:none !important; display:block !important; box-shadow:none !important;
    margin:0 !important; padding:0 !important;
  }
  .rb-ed-side{ display:none !important; }   /* never print the comparison/coach panel */
  .rb-paper::after, .rb-paper::before{ display:none !important; }   /* hide the on-screen page markers */
  .rb-paper{
    position:absolute; left:0; top:0; width:100%; min-height:0; margin:0;
    box-shadow:none !important; border-radius:0;
    transform:none !important;   /* the workspace preview is scaled on-screen — never in print */
  }
  .rb-resume{
    padding:0 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .rb-resume .r-item, .rb-resume .r-sec{ break-inside:avoid; }
  .rb-resume .r-sec > h2{ break-after:avoid; }
  /* never print the inline editing controls, AI popovers or empty-field placeholders */
  .rb-resume .r-add, .rb-resume .r-badd, .rb-resume .r-del, .rb-resume .r-bdel, .rb-resume .r-improve, .rb-ai-suggest{ display:none !important; }
  .rb-paper [contenteditable]:empty::before{ content:none !important; }
  /* and never let the materialize intro or gap pulse leak into the PDF */
  .rb-resume .r-head, .rb-resume .r-sec, .rb-paper .rb-gap-flash{ opacity:1 !important; animation:none !important; box-shadow:none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:780px){
  .rb-cols{ grid-template-columns:1fr; }
  .rb-score-card{ flex-direction:column; text-align:center; gap:18px; }
  .rb-sub-row{ grid-template-columns:96px 1fr 38px; }
  .rb-choice{ grid-template-columns:1fr; }
  /* keep the step rail on one swipeable line instead of wrapping tall */
  .rb-steps{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .rb-step{ flex:0 0 auto; }
}
@media(max-width:680px){
  .rb-page{ padding:20px 14px 70px; }
  .rb-paper{ width:100%; min-height:auto; padding:0; }
  .rb-paper::after{ display:none; }   /* page width changes on mobile — marker would mislead */
  .rb-resume{ padding:30px 22px; }
  .rb-preview-bar{ flex-wrap:wrap; justify-content:center; }
}

/* ============================================================
   TIER LOCK WALL — for live cohort gating
   ============================================================ */
.rb-lock-wall{
  display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 200px);
  padding:40px 20px;
}
.rb-lock-content{
  text-align:center; max-width:480px;
  background:var(--rb-card); border:1px solid var(--rb-line); border-radius:var(--rb-radius);
  padding:40px 30px; box-shadow:var(--rb-shadow-sm);
}
.rb-lock-icon{ font-size:48px; margin-bottom:16px; }
.rb-lock-content h2{
  font:800 28px var(--rb-head); color:var(--rb-ink); margin:0 0 12px;
}
.rb-lock-content p{
  color:var(--rb-ink2); font-size:15px; line-height:1.65; margin:0 0 24px;
}
.rb-lock-actions{
  display:flex; flex-direction:column; gap:12px;
}
.rb-lock-actions a, .rb-lock-actions button{
  min-height:46px;
}

/* ============================================================
   LENGTH TOGGLE · AUTOSAVE PILL · DOWNLOAD GATE
   ============================================================ */
/* Length: 1 page / 2 pages — segmented control */
.rb-len{ display:inline-flex; border:1px solid var(--rb-line2); border-radius:999px; overflow:hidden; background:#fff; }
.rb-len-opt{
  font:600 12.5px var(--rb-head); padding:6px 12px; border:0; background:transparent;
  color:var(--rb-ink2); cursor:pointer; line-height:1;
}
.rb-len-opt + .rb-len-opt{ border-left:1px solid var(--rb-line2); }
.rb-len-opt.is-active{ background:var(--rb-ink); color:#fff; }

/* Autosave status pill */
.rb-save{ font:600 12px var(--rb-head); color:var(--rb-good); display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; background:#eafaf3; border:1px solid #bce8d4; }
.rb-save.is-saving{ color:var(--rb-ink3); background:var(--rb-cream); border-color:var(--rb-line); }

/* Download gate modal */
.rb-gate{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(16,24,32,.55); backdrop-filter:blur(4px); }
.rb-gate[hidden]{ display:none; }
.rb-gate-box{ position:relative; max-width:460px; width:100%; background:#fff; border-radius:var(--rb-radius); box-shadow:var(--rb-shadow); padding:34px 30px 28px; text-align:center; }
.rb-gate-x{ position:absolute; top:12px; right:14px; border:0; background:transparent; font-size:18px; color:var(--rb-ink3); cursor:pointer; }
.rb-gate-icon{ font-size:38px; margin-bottom:8px; }
.rb-gate-box h3{ font:800 21px var(--rb-head); color:var(--rb-ink); margin:0 0 8px; }
.rb-gate-box p{ color:var(--rb-ink2); font-size:14.5px; line-height:1.6; margin:0 0 20px; }
.rb-gate-cta{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }

@media print{
  .rb-gate, .rb-len, .rb-save{ display:none !important; }
}