/* Resume Builder – CV pages, print and WordPress integration (shared by the chat and Studio).
   The CV templates paint into #preview-pages-container, hidden inside the in-page .rb-app; the chat and Studio show clones
   of its .page-sheet elements in the body-level portal. */
/* ====== CRITICAL TEXT WRAPPING FIXES - APPLIED GLOBALLY ====== */
.rb-app #resume-root,
.rb-app #resume-root * {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.rb-app #resume-root pre {
  white-space: pre-wrap !important;
}

/* Multi-line answers (one achievement per line) keep their line breaks, on screen and in the PDF. */
.rb-ml.rb-ml.rb-ml,
.rb-app #resume-root .rb-ml.rb-ml.rb-ml {
  white-space: pre-line !important;
}

.rb-app #resume-root p,
.rb-app #resume-root div:not(.no-wrap),
.rb-app #resume-root span,
.rb-app #resume-root li,
.rb-app #resume-root h1,
.rb-app #resume-root h2,
.rb-app #resume-root h3,
.rb-app #resume-root h4,
.rb-app #resume-root h5,
.rb-app #resume-root h6 {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Ensure all flex/grid children don't overflow */
.rb-app #resume-root [style*="display: flex"],
.rb-app #resume-root [style*="display:flex"],
.rb-app #resume-root [style*="display: grid"],
.rb-app #resume-root [style*="display:grid"] {
  min-width: 0 !important;
}

/* ====== BASE STYLES ====== */
.rb-app, .rb-app * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.rb-app .resume-section {
  margin-bottom: 1.5em !important;
  break-inside: avoid;
}

.rb-app .exp-item, .rb-app .edu-item, .rb-app .proj-item, .rb-app .award-item, .rb-app .cert-item, .rb-app .lang-item, .rb-app .skill-item {
  margin-bottom: 1.5em !important;
  break-inside: avoid;
}

/* Ensure titles stay with content */
.rb-app h1, .rb-app h2, .rb-app h3, .rb-app h4, .rb-app h5, .rb-app h6 {
  break-after: avoid;
  page-break-after: avoid;
}

/* Keep related content together */
.rb-app .keep-together {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* ====== TEXT SELECTION STYLES ====== */
.rb-app #resume-root,
.rb-app #resume-root *,
.rb-app .page-sheet,
.rb-app .page-sheet *,
.rb-app .resume-page,
.rb-app .resume-page * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* ====== PAGE SHEET STYLES ====== */
.rb-app .page-sheet {
  position: relative;
  background: white;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  overflow: visible !important;
  width: 210mm;
  min-height: 297mm;
  padding: 0 !important;
  margin: 0 auto 20px;
  transform-origin: top center;
  transition: transform 0.2s;
}

.rb-app #resume-root {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 297mm;
  padding: 15mm 12mm;
  margin: 0;
  box-sizing: border-box;
  background: inherit;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* ====== DRAGGABLE IMAGES ====== */
.rb-app .draggable-img {
  pointer-events: auto !important;
  z-index: 100;
  cursor: move;
  position: absolute;
}

/* ====== CONTINUATION MARKERS ====== */
.rb-app .continuation-end,
.rb-app .continuation-start {
  font-style: italic;
  color: #666;
  padding: 4px 0;
  text-align: center;
  border-top: 1px dashed #999;
  border-bottom: 1px dashed #999;
  margin: 8px 0;
  font-size: 11px;
  width: 100%;
  clear: both;
  page-break-inside: avoid;
  break-inside: avoid;
}

.rb-app .continuation-start {
  border-top: none;
  border-bottom: 1px dashed #999;
  margin-top: 0;
}

.rb-app .continuation-end {
  border-bottom: none;
  border-top: 1px dashed #999;
  margin-bottom: 0;
}

/* ====== PRINT STYLES ====== */
@media print {
  .rb-app {
    background: white;
    padding: 0;
    margin: 0mm;
  }

  

  

  .rb-app .page-sheet {
    display: block !important;
    width: 210mm !important;
    height: 297mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: white !important;
    overflow: hidden !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    transform: none !important;
  }
  /* NEW-06: the !important break above also hit the last sheet and printed a trailing blank page. */
  .rb-app .page-sheet:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  .rb-app #resume-root {
    width: 100% !important;
    height: 100% !important;
    padding: 15mm 12mm !important;
    box-sizing: border-box !important;
    min-height: unset !important;
    page-break-inside: avoid;
  }
  }

/* Category Badges for Skills */

.rb-app .category-frontend { background: #e3f2fd; color: #0d47a1; }
.rb-app .category-backend { background: #e8f5e9; color: #1b5e20; }
.rb-app .category-design { background: #f3e5f5; color: #4a148c; }
.rb-app .category-tools { background: #fff3e0; color: #bf360c; }
.rb-app .category-soft { background: #fce4ec; color: #880e4f; }

/* Ensure all elements are selectable */
.rb-app .page-sheet::before,
.rb-app .page-sheet::after {
  pointer-events: none;
}

/* Firefox selection fix */
@-moz-document url-prefix() {
  .rb-app .page-sheet, .rb-app .resume-page {
    user-select: text !important;
  }
}

    

/* ===== WordPress integration (Resume Builder plugin) ===== */
.rb-app{all:initial;display:block;container-type:inline-size;container-name:rb;position:relative;width:100%;max-width:100%;font-family:'Inter',sans-serif;color:#202124;line-height:1.4;text-align:left}
/* the in-page block holds only the hidden CV engine (the chat and Studio open in the body-level portal), so it takes no room on the page */
.rb-app:not(.rb-portal){padding:0;margin:0;background:none;border:0;min-height:0}
.rb-app .rb-noscript{margin:0;padding:16px 20px;border-radius:12px;background:#fff;color:#191635;font:500 16px/1.5 Inter,system-ui,sans-serif;border:1px solid rgba(25,22,53,.18)}
.rb-app .rb-store[hidden]{display:none!important}
/* template colours print as on screen (e.g. the Left Title Bold red panel) */
@media print{.rb-app .page-sheet,.rb-app .page-sheet *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}}
.rb-app *,.rb-app *::before,.rb-app *::after{box-sizing:border-box}
.rb-app button,.rb-app input,.rb-app select,.rb-app textarea{font-family:inherit;letter-spacing:normal;text-transform:none;text-shadow:none;box-shadow:none;min-height:0}
.rb-app a{box-shadow:none;text-decoration:none}
.rb-app img{height:auto}
.rb-app .fas,.rb-app .far{font-family:'Font Awesome 6 Free','Font Awesome 6 Brands';font-style:normal}
.rb-app .fas{font-weight:900}
.rb-app.rb-fullwidth{width:100vw;max-width:100vw!important;position:relative;left:calc(50% - 50vw);margin-left:0!important;margin-right:0!important;border-radius:0}

/* RB-CF-41: the CV templates use their own typography, never the theme's. Themes style h1-h6 directly (e.g. saaslauncher:
   Funnel Display at 40px for h2, 33px for h3), which made section headings and job titles far taller than designed and
   pushed content off the page. Inside the CV (the pages, their clones, and the pager's measuring box) headings go back
   to the plain sizes the templates are built on; a template's own inline styles still win. */
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) :is(h1,h2,h3,h4,h5,h6){font-family:inherit;font-style:inherit;font-weight:700;line-height:inherit;letter-spacing:inherit;word-spacing:inherit;text-transform:inherit;text-shadow:none}
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h1{font-size:2em}
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h2{font-size:1.5em}
/* Builder H1 fix: the chat title is the builder's only <h1>, so the CV name is an h2.rb-h1, sized as the h1 it was; heading
   rules (the theme's included) treat it as before. Outside .rb-app (the pager's measuring box) it keeps an h1's default margins. */
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h2.rb-h1{font-size:2em}
.rb-measure h2.rb-h1{margin-block:.67em}
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h3{font-size:1.17em}
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h4{font-size:1em}
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h5{font-size:.83em}
:is(.rb-app #resume-root,.rb-app .resume-page,.rb-measure) h6{font-size:.67em}
/* Print: show only the CV pages, hide the WP theme, the chat and Studio */
@media print{
 @page{size:A4;margin:0}
 body.rb-printing{background:#fff!important;margin:0!important;padding:0!important}
 body.rb-printing *:not(:has(.rb-print-target)):not(.rb-print-target):not(.rb-print-target *){display:none!important}
 body.rb-printing *:has(.rb-print-target){position:static!important;transform:none!important;margin:0!important;padding:0!important;border:0!important;min-height:0!important;height:auto!important;max-width:none!important;width:auto!important;background:none!important;box-shadow:none!important;overflow:visible!important}
 body.rb-printing .rb-app.rb-print-target{padding:0!important;background:#fff!important;border-radius:0}
 body.rb-printing .rb-print-target #preview-pages-container{display:block!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;height:auto!important;overflow:visible!important;width:auto!important;background:none!important}

}

@media print{
 body.rb-printing .rb-print-target *:has(.page-sheet){display:block!important;position:static!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;background:none!important;transform:none!important;width:auto!important}
 body.rb-printing .rb-print-target *:has(> .page-sheet) > :not(.page-sheet){display:none!important}
 body.rb-printing .rb-print-target .page-sheet{display:block!important;width:840px!important;height:1188px!important;min-height:1188px!important;max-height:1188px!important;zoom:0.94488;margin:0!important;box-shadow:none!important;transform:none!important;overflow:hidden!important;break-after:page;page-break-after:always}
 body.rb-printing .rb-print-target .page-sheet:last-child{break-after:auto;page-break-after:auto}
}

/* ===== notices ===== */

.rb-app button:focus-visible,.rb-app [role=button]:focus-visible,.rb-app input:focus-visible,.rb-app select:focus-visible,.rb-app textarea:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}

.rb-app .rb-toast{white-space:pre-line;max-width:min(640px,calc(100vw - 32px));max-height:45vh;overflow:auto;position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#202124;color:#fff;padding:10px 16px;border-radius:10px;font:500 13px Inter,sans-serif;z-index:100001;transition:opacity .2s,transform .2s}
.rb-app .rb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* RB-130-01: the toast lives in the body-level portal and sizes to its text, so it is never squeezed to half the screen;
   .is-top when it would cover the focused field or a bottom bar; with a 'Show details' button it takes clicks. */
.rb-app .rb-toast{box-sizing:border-box;width:max-content;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;line-height:1.4;bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.rb-app .rb-toast.is-top{top:calc(16px + env(safe-area-inset-top,0px));bottom:auto;transform:translateX(-50%) translateY(-20px)}
.rb-app .rb-toast.is-top.show{transform:translateX(-50%) translateY(0)}
.rb-app .rb-toast.show.has-act{pointer-events:auto}
.rb-app .rb-toast.rb-measure,.rb-app .rb-f-toast.rb-measure{transition:opacity .2s!important}
.rb-app .rb-toast-msg,.rb-app .rb-f-toast-msg,.rb-app .rb-ie-notice-msg{flex:1 1 auto;min-width:0}
/* RB-130-01/02: the shared 'Show details' button of a notice (builder toast, flow toast, Studio popover notice) */
.rb-app .rb-note-act{flex:none;box-sizing:border-box;min-height:36px;margin:0;padding:6px 14px;border:1px solid rgba(255,255,255,.55);border-radius:8px;background:transparent;color:#fff;font:600 14px/1.2 Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}
.rb-app .rb-note-act:hover{background:rgba(255,255,255,.12)}
.rb-app .rb-note-act:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.rb-app .rb-ie-notice.has-act,.rb-app .rb-f-toast.has-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;white-space:normal}
/* RB-130-01/02: details dialog with every cut field (portal; above the chat, Studio and their toasts) */
.rb-app .rb-nd{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(17,24,39,.5);font:400 15px/1.5 Inter,system-ui,sans-serif;color:#111827;text-align:left}
.rb-app .rb-nd-box{box-sizing:border-box;display:flex;flex-direction:column;width:min(640px,100%);max-height:min(720px,100%);margin:0;background:#fff;color:#111827;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden;outline:none}
.rb-app .rb-nd-head{display:flex;align-items:flex-start;gap:12px;padding:16px 12px 4px 20px}
.rb-app .rb-nd-title{flex:1 1 auto;margin:8px 0 0;padding:0;font:700 18px/1.35 Inter,system-ui,sans-serif;color:#111827;letter-spacing:0;text-transform:none}
.rb-app .rb-nd-x{flex:none;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:#111827;font:400 28px/1 Inter,system-ui,sans-serif;cursor:pointer}
.rb-app .rb-nd-x:hover{background:#f3f4f6}
.rb-app .rb-nd-intro{margin:0;padding:0 20px 8px;font:400 15px/1.5 Inter,system-ui,sans-serif;color:#374151}
.rb-app .rb-nd-list{flex:1 1 auto;min-height:72px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box;margin:0 8px;padding:4px 12px 8px 32px;list-style:disc;font:400 15px/1.5 Inter,system-ui,sans-serif;color:#111827;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;outline:none}
.rb-app .rb-nd-list li{margin:8px 0;padding:0;overflow-wrap:anywhere;list-style:disc}
.rb-app .rb-nd-foot{display:flex;justify-content:flex-end;padding:12px 20px 16px}
.rb-app .rb-nd-ok{box-sizing:border-box;min-height:44px;min-width:96px;margin:0;padding:0 20px;border:0;border-radius:10px;background:#111827;color:#fff;font:600 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
.rb-app .rb-nd-x:focus-visible,.rb-app .rb-nd-ok:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.rb-app .rb-nd-list:focus-visible{outline:3px solid #2563eb;outline-offset:-3px}
/* narrow screens: message and button on one row, so the toast stays short and covers less */
@media (max-width:480px){.rb-app .rb-toast.has-act,.rb-app .rb-f-toast.has-act{font-size:14px;padding:8px 8px 8px 14px;gap:6px 8px;flex-wrap:nowrap}.rb-app .rb-toast.has-act .rb-note-act,.rb-app .rb-f-toast.has-act .rb-note-act{padding:6px 10px}}
@media print{.rb-app .rb-nd,.rb-app .rb-toast{display:none!important}}

/* no horizontal scrollbar, no clipped side panels */
.rb-app{overflow-x:clip}

/* reduced motion */
@media (prefers-reduced-motion:reduce){.rb-app *,.rb-app *::before,.rb-app *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.rb-app{box-sizing:border-box}

.rb-app .page-sheet .rb-empty-sec{display:none!important}

/* CAP-01: character counter and page-cap warning */
.rb-app .rb-count{font:500 11px/1.4 Inter,sans-serif;color:#5f6368;text-align:right;margin-top:4px}
.rb-app .rb-count.is-full{color:#b3261e}
.rb-app .rb-cap-warn{margin:0 auto 12px;max-width:840px;padding:10px 14px;border:1px solid #f2b8b5;border-radius:10px;background:#fce8e6;color:#8c1d18;font:500 13px/1.5 Inter,sans-serif}
@media print{ body.rb-capped .rb-app .page-sheet{display:none!important} body.rb-capped .rb-app .rb-cap-warn{display:block!important} }

/* 1.4.0 AI labelling (EU AI Act Art 50): "AI suggestion" tag on AI buttons and previews; "AI-assisted" marker on fields whose text came from an accepted AI suggestion. */
.rb-app .rb-ai-tag{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:999px;background:#ede9fe;color:#4c1d95;font:600 11px/1.5 Inter,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap}
.rb-app .rb-ai-mark{display:inline-flex;align-self:flex-start;width:max-content;max-width:100%;box-sizing:border-box;align-items:center;gap:4px;margin-left:8px;padding:0 7px;border-radius:999px;border:1px solid #c4b5fd;background:#f5f3ff;color:#5b21b6;font:500 11px/1.6 Inter,system-ui,sans-serif;vertical-align:middle;white-space:nowrap;cursor:help}
.rb-app .rb-ai-mark i{font-size:10px}
.rb-app [data-ai-generated="true"]{border-left:3px solid #a78bfa!important}
@media print{.rb-app .rb-ai-mark,.rb-app .rb-ai-tag{display:none!important}}

/* 1.4.0 builder footer while AI is on: How AI is used · Cookie settings · Withdraw AI consent */
.rb-app .rb-ai-footer{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:center;padding:12px 16px;font:400 13px/1.5 Inter,system-ui,sans-serif;color:#374151}
/* RB-AG-10: every footer link and button is a tap target at least 24px tall (WCAG 2.5.8), in editor, guided and chat mode */
.rb-app .rb-ai-footer a,.rb-app .rb-ai-footer .rb-ai-footer-btn{color:#1d4ed8;text-decoration:underline;background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;box-shadow:none;min-height:24px;display:inline-flex;align-items:center;width:auto}
.rb-app .rb-ai-footer .rb-ai-footer-btn[hidden]{display:none}
.rb-app .rb-ai-footer .rb-ai-footer-btn:disabled{opacity:.6;cursor:progress}
.rb-app .rb-ai-footer-msg:empty{display:none}
.rb-app .rb-ai-footer-msg{flex-basis:100%;text-align:center;color:#065f46}
/* RB-AG-01: compact row inside the chat composer / at the end of the guided step column */
.rb-app .rbc-root .rbc-aifoot:empty{display:none}
.rb-app .rbc-root .rbc-aifoot .rb-ai-footer{padding:2px 0 0;gap:2px 16px;font-size:12.5px;line-height:1.6;color:#3b3570;justify-content:center}
.rb-app .rbc-root .rbc-aifoot .rb-ai-footer a,.rb-app .rbc-root .rbc-aifoot .rb-ai-footer .rb-ai-footer-btn{color:#2f1fa8;min-height:24px;display:inline-flex;align-items:center}
@media print{.rb-app .rb-ai-footer{display:none!important}}