/* ===== OnePlatt Parser Modal (scoped) ===== */

/* Let Bootstrap's .modal-fullscreen do the heavy lifting.
   Keep only minimal hardening that won't fight the theme. */


:is(#logomodal, #op-upload-logo).fade-in {
  animation: logoFadeIn 5.0s ease forwards;
}

.centermsgmodal {
  background: linear-gradient(100deg,#9ea0a5 0%,#9695af 22%,#a485a6 43%,#bf7291 65%,#df5f78 87%,#df5f78 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  opacity: 0;
  /* starts hidden; you fade it in via JS */
}

@keyframes logoFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

:is(#op_modal_parser, #op_account_upload).fade-in .modal-content {
  animation: modalFadeIn 5.0s ease forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

:is(#op_modal_parser, #op_account_upload) .modal-dialog {
  /* If your markup already has .modal-fullscreen, these are basically no-ops.
     They help if some global CSS accidentally constrains width. */
  width: 100vw;
  max-width: none;
  margin: 0;
}

:is(#op_modal_parser, #op_account_upload) .modal-content {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: var(--bs-body-bg) !important;
  /* drop !important unless you truly need it */
}

/* Branding (scoped) */
:is(#op_modal_parser, #op_account_upload) .oneplatt-logo {
  letter-spacing: -4px;
  line-height: 1;
  font-weight: 700;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

:is(#op_modal_parser, #op_account_upload) .one-logo {
  color: #cbcfd7;
}

:is(#op_modal_parser, #op_account_upload) .gradient-text {
  background: linear-gradient(100deg,#9ea0a5 0%,#9695af 22%,#a485a6 43%,#bf7291 65%,#df5f78 87%,#df5f78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Sender block: reserve exactly 2 lines + pulse */
@keyframes op-pulseSlow {

  0%,
  100% {
    transform: scale(var(--pulse-scale-start, 1));
  }

  50% {
    transform: scale(var(--pulse-scale-mid, 1.05));
    /* default */
  }
}

/* Default (desktop/tablet) */
:is(#op_modal_parser, #op_account_upload) :is(#modalSender, #op-upload-sender) {
  --op-ms-lines: 3;
  --op-ms-lh: 1.25;
  line-height: var(--op-ms-lh);
  height: calc(var(--op-ms-lines) * 1em * var(--op-ms-lh));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  overflow: hidden;

  background: linear-gradient(100deg,#9ea0a5 0%,#9695af 22%,#a485a6 43%,#bf7291 65%,#df5f78 87%,#df5f78 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  --pulse-scale-start: 1;
  --pulse-scale-mid: 1.05;
  /* default */
  animation: op-pulseSlow 4s ease-in-out infinite;
}

/* Mobile override: match card width */
@media (max-width: 767.98px) {
  :is(#op_modal_parser, #op_account_upload) :is(#modalSender, #op-upload-sender) {
    max-width: 280px;
    line-height: var(--op-ms-lh);
    height: calc(var(--op-ms-lines) * 2em * var(--op-ms-lh));
    /* same as card max-width on mobile */
  }
}

/* 2 columns for narrower tablets (portrait mode) */
@media (min-width:768px) and (max-width:991.98px) {
  :is(#op_modal_parser, #op_account_upload) :is(#modalSender, #op-upload-sender) {
    width: 85%;
    /* same as card max-width on mobile */
  }
}

/* Scroll area for cards/content — dvh for mobile address bars (with vh fallback) */
:is(#op_modal_parser, #op_account_upload) .hover-scroll-y {
  overflow-y: auto;
  padding: 15px;
}

/* Optional surface helper if you need inner panels */
[data-bs-theme="light"] :is(#op_modal_parser, #op_account_upload) .op-surface {
  background-color: color-mix(in srgb, var(--bs-body-bg) 92%, black);
}

[data-bs-theme="dark"] :is(#op_modal_parser, #op_account_upload) .op-surface {
  background-color: color-mix(in srgb, var(--bs-body-bg) 98%, white);
}

.tab-pane:not(.active) {
  display: none !important;
}

/* Keep nav-tabs fixed at top of modal */
.tabs-wrapper {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* higher than tab content */
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

/* On mobile, make sure it doesn’t collapse */
@media (max-width: 767.98px) {
  .tabs-wrapper ul.nav-tabs {
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .tabs-wrapper .nav-item {
    flex: 1 0 auto;
    /* prevent squishing */
  }
}

/* Make modal-content full height in fullscreen */
.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab content fills remaining space below the sticky nav */
.tab-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* ⚡ prevents scroll freeze */
}

/* Processing tab (mobile default) */
.parser-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Processing tab desktop split */
@media (min-width: 992px) {
  .parser-body.show {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .parser-body.show :is(#logomodal-wrapper, #op-upload-logo-wrapper),
  .parser-body.show :is(#modalSender-wrapper, #op-upload-sender-wrapper) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .parser-body.show :is(#resume-parser-host-modal, #op-upload-host) {
    flex: 4;
    min-height: 0;
    overflow-y: auto;
  }
}



.rpw {
  display: block !important;
  width: 100% !important;
  --rpw-gap: 1.25rem;
}

/* Sender (category 6) */
.rpw [data-rpw="sender"] {
  width: 100% !important;
  margin: .75rem auto 0 !important;
  max-width: 680px !important;
  display: none !important;
}

/* === GRID LAYOUT (5 across on desktop) === */
.rpw [data-rpw="cards"] {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(200px, 270px)) !important;
  justify-content: center !important;
  gap: var(--rpw-gap) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 1.5rem !important;
}

/* Cards (no flex-basis shenanigans) */
.rpw .card {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 185px !important;
  max-width: 270px !important;
  box-sizing: border-box !important;
  transition: filter 0.6s ease-in-out;
  transition: background 0.6s ease-in-out;
  border-top-left-radius: 0.625rem !important;
  border-top-right-radius: 0.625rem !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  /* allow smooth fade */
}

/* Light mode: darken base */
[data-bs-theme="light"] .rpw .card {
  background-color: color-mix(in srgb, var(--bs-body-bg) 95%, black) !important;
  filter: brightness(1.0) drop-shadow(1px 1px 1px lightgray);
}

[data-bs-theme="light"] .rpw .card.card-completed-done {
  filter: brightness(1.0) drop-shadow(1px 1px 1px lightgray);
  background-color: color-mix(in srgb, var(--bs-body-bg) 99%, black) !important;
}

/* Dark mode: lighten base */
[data-bs-theme="dark"] .rpw .card {
  background-color: color-mix(in srgb, var(--bs-body-bg) 97%, white) !important;
  filter: brightness(1.0) drop-shadow(1px 1px 1px black);
}

[data-bs-theme="dark"] .rpw .card.card-completed-done {
  filter: brightness(1.4) drop-shadow(1px 1px 1px black);
}


/* iPad Air landscape: squeeze to fit 5 cards in one row */
@media (min-width: 1080px) and (max-width: 1199.98px) {
  .rpw [data-rpw="cards"] {
    grid-template-columns: repeat(5, minmax(200px, 235px)) !important;
    justify-content: center !important;
  }
}

/* iPad Mini landscape: squeeze more to fit 5 cards */
@media (min-width: 1000px) and (max-width: 1079.98px) {
  .rpw [data-rpw="cards"] {
    grid-template-columns: repeat(5, minmax(175px, 210px)) !important;
    justify-content: center !important;
  }
}

/* 2 columns for narrower tablets (portrait mode) */
@media (min-width:768px) and (max-width:991.98px) {
  .rpw [data-rpw="cards"] {
    grid-template-columns: repeat(2, minmax(200px, 270px)) !important;
    justify-content: center !important;
  }
}

/* 1 across on phones — lock full width FROM FIRST PAINT */
@media (max-width:767.98px) {
  .rpw [data-rpw="cards"] {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: center !important;
    align-items: stretch !important;
  }

  .rpw .card {
    width: 100% !important;
    /* 🔹 set fixed percentage or px value */
    min-width: 100% !important;
    max-width: 420px !important;
    /* 🔹 adjust this for your “widest size” */
    justify-self: center !important;
    box-sizing: border-box !important;
  }
}

/* Header / titles */
.rpw .card-header {
  border-bottom: 0 !important;
  justify-content: center !important;
}

.rpw .card-title {
  font-weight: 500 !important;
  white-space: nowrap !important;

  [data-bs-theme="light"] & {
    filter: drop-shadow(1px 1px 1px lightgray);
  }

  [data-bs-theme="dark"] & {
    filter: drop-shadow(0px 0px 0px lightgray);
  }
}


.rpw .scalable-icon {
  font-size: clamp(2rem, 2.5vw, 3.5rem) !important;
}

.rpw .scalable-title {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
}

.rpw .scalable-spinner {
  width: clamp(1rem, 1.8vw, 1.5rem) !important;
  height: clamp(1rem, 1.8vw, 1.5rem) !important;
}

/* Mobile sizing extras */
@media (max-width: 767.98px) {
  .rpw .scalable-icon {
    font-size: 2.8rem !important;
  }

  .rpw .scalable-title {
    font-size: 1.4rem !important;
  }

  .rpw .scalable-spinner {
    width: 1.3rem !important;
    height: 1.3rem !important;
  }

  .rpw .category-message {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 1.2rem !important;
  }
}

/* Body: symmetric padding + stable scrollbar space */
.rpw .card-body {
  padding: 15px 14px 10px 14px !important;
  margin-bottom: 5px !important;
  justify-content: center !important;
  height: 200px !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.rpw .card-body {
  height: calc((100vh * 0.70) - 230px) !important;
}




@media (max-width:767.98px) {
  .rpw .card-body {
    height: 230px !important;
  }
}

/* Category messages inside body */
.rpw .category-message {
  border-radius: 5px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  opacity: .85 !important;
  font-weight: 500;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;

  /* Light mode: darken base */
  [data-bs-theme="light"] & {
    background-color: color-mix(in srgb, var(--bs-scrollbar-color) 1%, white);
    color: color-mix(in srgb, darkgray 40%, black);
    filter: drop-shadow(1px 1px 1px lightgray);
  }

  /* Dark mode: lighten base */
  [data-bs-theme="dark"] & {
    background-color: color-mix(in srgb, var(--bs-scrollbar-color) 98%, white) !important;
    color: color-mix(in srgb, darkgray 10%, white);
    filter: drop-shadow(1px 1px 1px black);
  }
}

[data-bs-theme="light"] .rpw .category-message.category-message-done {
  background-color: color-mix(in srgb, var(--bs-scrollbar-color) 90%, white) !important;
  color: color-mix(in srgb, var(--bs-success) 80%, black) !important;
}

.rpw [data-rpw="msgCheck"] {
  display: none !important;
  padding-right: 10px !important;
  align-items: center !important;
}

.rpw [data-rpw="msgCheck"] img {
  max-height: 15px !important;
  vertical-align: middle !important;
}

/* Progress bar pinned to bottom */
.rpw [data-rpw="progress"] {
  background: linear-gradient(to right, #cbcfd7, #9695af, #a485a6, #bf7291, #e65b71);
  height: 6px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden !important;
  width: 0%;
  transition: width .25s ease !important;
  flex: 0 0 auto !important;
  position: fixed;
}

.rpw [data-rpw="progress"].completed {
  width: 100% !important;
  background: var(--bs-success) !important;
  border-bottom-right-radius: 10px !important;
}

.rpw .hidden {
  display: none !important;
}

@keyframes op-pulsePrsMsg {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.02)
  }
}

.pulse-msg {
  position: relative;
  overflow: hidden;
  font-weight: 900 !important;
  filter: brightness(1.4);
  font-size: 105%;
  animation: op-pulsePrsMsg 2s ease-in-out infinite;
}

.pulse-msg::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -100%;
  width: 120%;
  height: 180%;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(to right,
      rgba(158, 160, 165, 0) 0%,
      rgba(158, 160, 165, 0.6) 5%,
      rgba(150, 149, 175, 0.6) 25%,
      rgba(164, 133, 166, 0.6) 50%,
      rgba(191, 114, 145, 0.6) 75%,
      rgba(230, 91, 113, 0.6) 95%,
      rgba(230, 91, 113, 0) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  animation: msg-glass-shine 5s ease-in-out infinite;
  /* 🔹 loop by default */
}

.pulse-labels {
  --shine-opacity: 0.25;
  --fade-x: 80%;
  --fade-y: 80%;
  --size-background: 100%;
  position: relative;
  overflow: hidden;
  animation: op-pulsePrsMsg 2s ease-in-out infinite;
}

.pulse-labels::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -100%;
  width: var(--size-background);
  height: 180%;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(to right,
      rgba(158, 160, 165, 0) 0%,
      rgba(158, 160, 165, 0.6) 5%,
      rgba(150, 149, 175, 0.6) 25%,
      rgba(164, 133, 166, 0.6) 50%,
      rgba(191, 114, 145, 0.6) 75%,
      rgba(230, 91, 113, 0.6) 95%,
      rgba(230, 91, 113, 0) 100%);
  opacity: var(--shine-opacity) !important;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
  animation: msg-glass-shine 5s ease-in-out infinite;
  /* 🔹 loop by default */
  /* cross-browser edge feather */
  -webkit-mask:
    linear-gradient(#0000, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), #0000)
    /* vertical */
    ,
    linear-gradient(90deg, #0000, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), #0000)
    /* horizontal */
  ;
  -webkit-mask-composite: source-in;

  mask:
    linear-gradient(#0000, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), #0000),
    linear-gradient(90deg, #0000, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), #0000);
  mask-composite: intersect;
}

@keyframes msg-glass-shine {
  0% {
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
  }

  10% {
    opacity: .7;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(160%) skewX(-18deg);
    opacity: 0;
  }
}

.parser-emphasis {
  font-weight: 900;
  font-size: 105%;
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--bs-code-color) !important;
}

.parser-emphasis-sender {
  font-weight: 900;
  color: var(--bs-primary) !important;
  font-size: 110%;
}

.namecandemphs {
  font-weight: 900;
}

.popoverTitle {
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  color: var(--bs-primary);
}

.popoverMsg {
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: var(--bs-secondary);
}

/* put in your custom css */
.popover-tour {
  max-width: 50%;
}

/* Mobile override: match card width */
@media (max-width: 767.98px) {
  .popover-tour {
    max-width: 80%;
  }
}


/* =========================================================
   OnePlatt × KT — Resume (Sober, Consolidated, vFix) — SCOPED
   Applies ONLY inside #resumepreviewtab
   ========================================================= */

/* Scoped brand tokens */
#resumepreviewtab {
  --op-ac2: #9695af;
  --op-ac3: #a485a6;
  --op-ac4: #bf7291;
  --op-ac5: #e65b71;
  --op-grad: linear-gradient(268deg, var(--op-ac2), var(--op-ac3), var(--op-ac4), var(--op-ac5));

  /* decorative short bar defaults */
  --op-uline-w: 92px;
  --op-uline-h: 6px;
  --op-uline-radius: 6px;
  --op-uline-opacity: .9;
}

/* ---------- Headings & separators (scoped) ---------- */
#resumepreviewtab .card-header {
  text-align: left !important;
}

#resumepreviewtab .card-header .card-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100%;
  margin: 0;
  padding: 0;
}

#resumepreviewtab .op-hstack-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* decorative short gradient bar under subtitle */
#resumepreviewtab .card-title .op-underline {
  display: block;
  width: var(--op-uline-w);
  height: var(--op-uline-h);
  border-radius: var(--op-uline-radius);
  background: var(--op-grad);
  opacity: var(--op-uline-opacity);
  margin-top: .5rem;
}

/* subtle full-width divider under header */
#resumepreviewtab .op-head-sep {
  height: 1px;
  width: 100%;
  margin-top: .45rem;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--bs-body-color) 14%, transparent) 0%,
      color-mix(in srgb, var(--bs-body-color) 20%, transparent) 50%,
      color-mix(in srgb, var(--bs-body-color) 14%, transparent) 100%);
}

/* subtitle */
#resumepreviewtab .op-subdesc {
  margin-top: .35rem;
  color: var(--bs-gray-600);
  font-weight: 600;
  font-size: .95rem;
}

/* ---------- Header (profile) ---------- */
#resumepreviewtab .symbol .presence-dot {
  height: 20px;
  width: 20px;
}

#resumepreviewtab .op-field-icon {
  opacity: .7;
}

/* ---------- Chips & meters ---------- */
#resumepreviewtab .op-chip {
  display: inline-flex;
  align-items: center;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, .12);
  color: var(--bs-gray-600);
  background: var(--bs-light);
}

#resumepreviewtab .op-chip-more {
  cursor: pointer;
  border: 1px dashed var(--bs-gray-400, #c4c4c4);
  background: var(--bs-gray-300);
  padding: .1rem .45rem;
  border-radius: 1rem;
  line-height: 1.2;
  color: var(--bs-gray-800);
}


[data-bs-theme="dark"] #resumepreviewtab .op-chip {
  border-color: rgba(255, 255, 255, .18);
}

#resumepreviewtab .op-meter {
  --w: 100%;
  --pad-y: .18rem;
  --pad-x: .6rem;
  --block-bg: color-mix(in srgb, var(--op-ac4) 68%, white);
  --block-fg: #fff;
  display: inline-flex;
  align-items: center;
  width: var(--w);
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .6rem;
  background: var(--bs-body-bg);
  font-weight: 900;
  color: var(--bs-body-color);
}

#resumepreviewtab .op-meter .label {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--pad-y) var(--pad-x);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

#resumepreviewtab .op-meter .block {
  padding: var(--pad-y) calc(var(--pad-x) + .3rem);
  background: var(--block-bg);
  color: var(--block-fg);
  border-top-right-radius: .6rem;
  border-bottom-right-radius: .6rem;
  min-width: 4.1rem;
  border-left: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
}

#resumepreviewtab .op-meter+.op-meter {
  margin-top: .45rem;
}

[data-bs-theme="dark"] #resumepreviewtab .op-meter {
  border-color: rgba(255, 255, 255, .18);
}

[data-bs-theme="dark"] #resumepreviewtab .op-meter .block {
  border-left-color: rgba(255, 255, 255, .14);
}

/* stars */
#resumepreviewtab .op-stars {
  letter-spacing: .12rem;
  font-size: .95rem;
  color: color-mix(in srgb, var(--bs-body-color) 65%, transparent);
}

/* ---------- Lists & narrative spacing ---------- */
#resumepreviewtab .card-body>*+* {
  margin-top: 1rem;
}

#resumepreviewtab .op-item+.op-item {
  position: relative;
  margin-top: 1.25rem;
}

#resumepreviewtab .op-item+.op-item::before {
  content: "";
  display: block;
  height: 1px;
  margin: 1rem 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, .12) 75%, rgba(230, 91, 113, .18) 95%, rgba(230, 91, 113, 0) 100%);
}

[data-bs-theme="dark"] #resumepreviewtab .op-item+.op-item::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .22) 40%, rgba(255, 255, 255, .14) 75%, rgba(230, 91, 113, .28) 95%, rgba(230, 91, 113, 0) 100%);
}

#resumepreviewtab .op-expr p,
#resumepreviewtab .op-edu p {
  margin: .5rem 0 0;
  line-height: 1.55;
  color: var(--bs-gray-800);
}

/* ---------- Card sizing polish ---------- */
#resumepreviewtab .card.h-md-100,
#resumepreviewtab .card.h-lg-100,
#resumepreviewtab .card.h-xl-100 {
  height: auto !important;
}

#resumepreviewtab .card {
  padding-bottom: .15rem;
}

/* Profile Details rows spacing */
#resumepreviewtab #kt_profile_details_view .card-body>.row+.row {
  margin-top: 1rem;
}

/* ---------- Mobile header layout (scoped, xs only) ---------- */
@media (max-width: 576.98px) {

  /* header wrapper in this tab only */
  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 {
    flex-wrap: nowrap !important;
  }

  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3>.flex-shrink-0 {
    flex: 0 0 auto;
  }

  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3>.flex-grow-1 {
    min-width: 0;
  }

  /* shrink avatar to give name room */
  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .symbol.symbol-100px {
    width: 72px !important;
    height: 72px !important;
  }

  /* first row beside avatar: name only; badge below */
  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .d-flex.align-items-center.flex-wrap.gap-2.mb-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .25rem .5rem !important;
    margin-bottom: .35rem !important;
  }

  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .d-flex.align-items-center.flex-wrap.gap-2.mb-2 .badge {
    order: 2;
    width: 100%;
  }

  /* stack meta under name */
  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .d-flex.flex-wrap.fw-semibold.fs-6 {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: .35rem !important;
    margin-bottom: .9rem !important;
  }

  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .d-flex.flex-wrap.fw-semibold.fs-6>* {
    margin-right: 0 !important;
  }

  /* slightly smaller name on very narrow screens */
  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .fs-2.fw-bold {
    font-size: 1.125rem !important;
    line-height: 1.25 !important;
  }

  /* stats spacing under header */
  #resumepreviewtab .card-body>.d-flex.align-items-start.mb-3+.d-flex.flex-wrap {
    gap: .5rem .75rem;
  }
}

/* Scope to the resume tab only */
#resumepreviewtab .rpv-desktop-header {
  display: flex;
}

#resumepreviewtab .rpv-mobile-header {
  display: none;
}

/* Mobile toggle */
@media (max-width: 576.98px) {
  #resumepreviewtab .rpv-desktop-header {
    display: none !important;
  }

  #resumepreviewtab .rpv-mobile-header {
    display: block !important;
  }

  /* smaller avatar already set with symbol-72px, nothing else needed */
}

#resumepreviewtab .op-skillgrid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .35rem .75rem;
}

/* Scope assumed: #resumepreviewtab … */
#resumepreviewtab .op-role {
  font-size: 1.05rem;
  /* slightly emphasized but not oversized */
}

#resumepreviewtab .op-meta {
  gap: .4rem 1rem;
  /* breathing room when it wraps */
}

/* On very narrow screens, let company/date stack neatly */
@media (max-width: 576.98px) {
  #resumepreviewtab .op-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
  }
}

/* Group header */
#resumepreviewtab .op-oinfo-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

#resumepreviewtab .op-oinfo-title {
  font-weight: 700;
  color: var(--bs-gray-900);
}

/* Bulleted list */
#resumepreviewtab .op-oinfo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#resumepreviewtab .op-oinfo-list li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--bs-gray-800);
  line-height: 1.55;
  margin: .25rem 0;
}

#resumepreviewtab .op-oinfo-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bs-gray-800);
  opacity: .7;
}

/* Inline-pill skills: Option A */
#resumepreviewtab .op-skill-inline .op-line {
  margin-top: .75rem;
  margin-left: 1.0rem;
}

#resumepreviewtab.op-skill-inline .op-chip {
  display: inline;
  /* behaves like words */
  background: var(--bs-light, #f5f5f5);
  border-radius: 1rem;
  padding: .28rem .62rem;
  margin-right: var(--op-chip-gap-x, .55rem);
  /* a tad more separation */
  margin-bottom: var(--op-chip-gap-y, .40rem);
  /* subtle row gap */
  line-height: 1.3;
  white-space: normal;
  /* allow multi-word phrases to wrap */
  overflow-wrap: normal;
  /* don't break in the middle of words */
}

/* if a single giant token has no spaces, allow last-resort wrapping */
.op-skill-inline .op-chip[data-long="1"] {
  overflow-wrap: anywhere;
}

.op-years-plus {
  margin-left: -0.5rem;
}

.hideit-hard {
  display: none !important;
}
/* Saved resume chips use the same expertise gradients as the editors. */
#resumepreviewtab .op-chip[data-skill-level="4"] {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--bs-primary-light) 92%, var(--bs-primary) 8%),
    var(--bs-primary-light));
}
#resumepreviewtab .op-chip[data-skill-level="3"] {
  background: linear-gradient(110deg,
    var(--bs-primary-light),
    color-mix(in srgb, var(--bs-primary-light) 92%, var(--bs-body-bg) 8%));
}
#resumepreviewtab .op-chip[data-skill-level="2"] {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--bs-primary-light) 88%, var(--bs-body-bg) 12%),
    color-mix(in srgb, var(--bs-primary-light) 78%, var(--bs-body-bg) 22%));
}
#resumepreviewtab .op-chip[data-skill-level="1"] {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--bs-primary-light) 70%, var(--bs-body-bg) 30%),
    color-mix(in srgb, var(--bs-primary-light) 55%, var(--bs-body-bg) 45%));
}

/* Mobile identity: fixed photo at left, name at right, role on its own row. */
@media (max-width:576.98px) {
 #resumepreviewtab .rpv-mobile-header > .d-flex.align-items-center {
   display:grid !important; grid-template-columns:72px minmax(0,1fr); gap:1rem;
 }
 #resumepreviewtab .rpv-mobile-header > .d-flex.align-items-center > .flex-shrink-0 { margin:0 !important; }
 #resumepreviewtab .rpv-mobile-header .symbol { display:block; width:72px !important; height:72px !important; position:relative; }
 #resumepreviewtab .rpv-mobile-header .symbol > img { display:block; width:72px !important; height:72px !important; object-fit:cover; }
 #resumepreviewtab .rpv-mobile-header .op-profile-photo-action {
   width:30px !important; height:30px !important; min-width:30px; padding:0;
   right:0 !important; bottom:0 !important; top:auto !important; left:auto !important;
   transform:translate(20%,20%); z-index:1;
 }
 #resumepreviewtab .rpv-mobile-header [data-bind-text="NAME"] { min-width:0; overflow-wrap:anywhere; }
 #resumepreviewtab .rpv-mobile-header .badge { max-width:100%; white-space:normal; text-align:start; line-height:1.5; }
 #resumepreviewtab .rpv-mobile-header a { overflow-wrap:anywhere; }
}

#SignInDv { width:100%; max-width:500px; }

/* Match the in-progress TT footprint to the completion check in both parser flows. */
.rpw .op-tt-loader.scalable-spinner{width:clamp(2rem,2.5vw,3.5rem)!important;height:clamp(2rem,2.5vw,3.5rem)!important}
.rpw .op-tt-loader.scalable-spinner img{width:42%;height:48%}
@media(max-width:767.98px){.rpw .op-tt-loader.scalable-spinner{width:2.8rem!important;height:2.8rem!important}}

/* The branding wrapper sits above the tabs' content, not inside .parser-body. */
:is(#op_modal_parser, #op_account_upload) :is(#logomodal-wrapper, #op-upload-logo-wrapper){
  flex:none;padding:clamp(24px,5dvh,48px) 16px clamp(12px,2dvh,24px);
}
:is(#op_modal_parser, #op_account_upload) .op-image-wordmark{margin-bottom:0;}

/* mobile-readability-r1: phone typography, preserving original geometry. */
@media screen and (max-width:767.98px), screen and (max-width:991.98px) and (pointer:coarse){
.rpw .scalable-icon:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:clamp(2.4rem, 3vw, 4.2rem)!important;}
.rpw .scalable-title:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:clamp(1.32rem, 1.92vw, 1.68rem)!important;}
@media  (max-width: 767.98px) {.rpw .scalable-icon:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:3.36rem!important;}
.rpw .scalable-title:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.68rem!important;}
.rpw .category-message:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.44rem!important;}}
.popoverTitle:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.68rem!important;}
.popoverMsg:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.44rem!important;}
#resumepreviewtab .op-subdesc:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.14rem;}
#resumepreviewtab .op-stars:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.14rem;}
@media  (max-width: 576.98px) {#resumepreviewtab .card-body>.d-flex.align-items-start.mb-3 .fs-2.fw-bold:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.35rem!important;}}
#resumepreviewtab .op-role:where(:not(i,svg,svg *,[class*="ki-"],.op-fa,.fa,.fas,.far,.fab,.fad,.bi,.op-pdf-mini,.op-pdf-mini *,[data-op-document],[data-op-document] *)){font-size:1.26rem;}
}

/* R41: dark parser contrast only. Light-theme rendering is unchanged. */
[data-bs-theme="dark"] .rpw .rpw-section-icon:not(.text-success) .op-fa{color:#d5bedf;--fa-primary-color:#d5bedf;--fa-secondary-color:#a58daf;--fa-primary-opacity:1;--fa-secondary-opacity:1;}
[data-bs-theme="dark"] .rpw .op-tt-loader::before{border-top-color:#d5bedf;}
[data-bs-theme="dark"] .rpw .op-tt-loader::after{border-top-color:#a58daf;}
[data-bs-theme="dark"] .rpw .op-tt-loader img{filter:brightness(0) invert(1);}
[data-bs-theme="dark"] .rpw .card-progress-custom.bg-primary{background-color:#d5bedf!important;}