/* ============================================================
   ResumeATS — custom styles (LIGHT theme)
   Tailwind handles ~95% of styling; this file holds reusable
   component classes.
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #f8fafc;
}

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================ NAV LINKS ============================ */
.nav-link {
  position: relative;
  color: rgb(71 85 105); /* slate-600 */
  transition: color .2s ease;
}
.nav-link:hover { color: rgb(15 23 42); /* slate-900 */ }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #d946ef);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: rgb(15 23 42); }

.mobile-link {
  padding: .75rem 1rem;
  border-radius: .75rem;
  color: rgb(51 65 85);
  transition: background .2s ease;
}
.mobile-link:hover { background: rgb(241 245 249); color: rgb(15 23 42); }

/* Header on scroll shadow */
#site-header.is-scrolled > div > div {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 40px -12px rgba(15, 23, 42, 0.12);
}

/* ============================ HEADER — MOBILE / TABLET FIX ============================
 * The page templates use Tailwind's `md` (≥768px) breakpoint to swap between
 * the desktop nav and the hamburger menu. On most tablets that's too tight —
 * the desktop nav and auth row overlap, and the hamburger ends up squeezed.
 * Push the swap to `lg` (≥1024px) via a CSS override so we don't have to
 * touch every page's header markup.
 *
 * The selectors specifically target #site-header so we don't touch any other
 * `hidden md:flex` usage on the page.
 */
@media (max-width: 1023.98px) {
  /* Hide the desktop nav row on phones & tablets */
  #site-header nav.hidden.md\:flex {
    display: none !important;
  }
  /* Keep the auth row visible so the logged-in avatar / user menu can show.
     We then selectively hide its sign-in/sign-up children + Plans link below
     — those CTAs live in the hamburger drawer instead. */
  #site-header > div > div > div.hidden.md\:flex {
    display: flex !important;
    gap: .5rem;
    align-items: center;
  }
  #site-header #auth-out,
  #site-header > div > div > div.hidden.md\:flex > a {
    display: none !important;
  }
  /* Compact the user-menu button — drop the name text + chevron, keep the
     round avatar. Still opens the same dropdown with email + sign-out. */
  #site-header #userMenuBtn #userName,
  #site-header #userMenuBtn > i {
    display: none !important;
  }
  #site-header #userMenuBtn {
    padding: 4px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    gap: 0 !important;
  }
  /* Bump the avatar from 28→36px so the tap target hits ≈44px with padding. */
  #site-header #userMenuBtn > span:first-child {
    height: 36px !important;
    width: 36px !important;
    font-size: 13px !important;
  }
  /* Keep the dropdown inside the viewport on very narrow phones. */
  #site-header #userMenu {
    width: min(16rem, calc(100vw - 24px)) !important;
    right: 0 !important;
  }
  /* Show the hamburger button + (when not collapsed) the mobile drawer */
  #site-header #menu-toggle.md\:hidden {
    display: grid !important;
  }
  #site-header #mobile-menu.md\:hidden:not(.hidden) {
    display: block !important;
  }
}

/* Breathing room + safe shrink behaviour inside the header card */
#site-header > div > div {
  gap: .5rem;
}
#site-header > div > div > a:first-child {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
#site-header > div > div > a:first-child .font-display {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#site-header #menu-toggle { flex-shrink: 0; }

/* Narrow-phone (≤480px) polish: tighter padding so the hamburger never gets
   pushed past the viewport edge, slightly smaller brand text. */
@media (max-width: 480px) {
  #site-header > div { padding-left: .75rem; padding-right: .75rem; }
  #site-header > div > div { padding-left: .75rem; padding-right: .75rem; }
  #site-header > div > div > a:first-child .font-display { font-size: 1rem; }
}

/* ============================ MOBILE OVERFLOW SAFETY ============================
 * Prevent any wide element (long unbreakable strings, fixed-width grids on a
 * specific page, the background blur-blobs etc.) from making the whole page
 * horizontally scrollable on phones. The user should never have to swipe
 * sideways to reach buttons or content.
 *
 * `overflow-x: clip` is preferred over `hidden` because it doesn't create a
 * new scroll container — sticky elements (sidebar, header) keep working.
 * Browsers without clip support fall back to hidden via the second declaration.
 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================ PLAN CARDS ============================ */
.plan-card {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid rgb(226 232 240); /* slate-200 */
  background: #ffffff;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 20px 45px -20px rgba(99, 102, 241, 0.35);
}

.plan-card-featured {
  border-color: rgba(99, 102, 241, 0.45);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(99,102,241,0.08), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(217,70,239,0.08), transparent 60%),
    #ffffff;
  box-shadow: 0 25px 50px -25px rgba(99, 102, 241, 0.4);
}

.plan-icon {
  display: inline-grid;
  place-items: center;
  height: 48px; width: 48px;
  border-radius: 14px;
  margin-bottom: 1.25rem;
}

.plan-title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: rgb(15 23 42);
  letter-spacing: -0.01em;
}
.plan-sub {
  margin-top: .35rem;
  color: rgb(100 116 139); /* slate-500 */
  font-size: .9rem;
}

.plan-price {
  margin-top: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.plan-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.plan-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .9rem;
  color: rgb(51 65 85); /* slate-700 */
}
.check-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #d946ef);
  color: #fff;
}

.plan-cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  justify-content: center;
  padding: .75rem 1.1rem;
  border-radius: .85rem;
  font-size: .9rem;
  font-weight: 600;
  transition: all .2s ease;
}
.plan-cta-primary {
  background: linear-gradient(90deg, #6366f1, #d946ef);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.55);
}
.plan-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -10px rgba(217, 70, 239, 0.5); }
.plan-cta-ghost {
  background: rgb(248 250 252); /* slate-50 */
  border: 1px solid rgb(226 232 240);
  color: rgb(15 23 42);
}
.plan-cta-ghost:hover {
  background: #fff;
  border-color: rgba(99, 102, 241, 0.45);
  color: rgb(67 56 202); /* brand-700 */
}

/* ============================ BUNDLE OPTIONS ============================ */
.bundle-option { display: block; cursor: pointer; }
.bundle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem;
  border-radius: .85rem;
  border: 1px solid rgb(226 232 240);
  background: #ffffff;
  transition: all .2s ease;
}
.bundle-option:hover .bundle-row {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgb(238 242 255); /* brand-50 */
}
.bundle-option input:checked + .bundle-row {
  border-color: rgba(217, 70, 239, 0.55);
  background: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(217,70,239,0.06));
  box-shadow: inset 0 0 0 1px rgba(217, 70, 239, 0.35);
}

/* ============================ STEPS ============================ */
.step-card {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid rgb(226 232 240);
  background: #ffffff;
  padding: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.4); /* cyan */
  box-shadow: 0 20px 45px -20px rgba(6, 182, 212, 0.3);
}
.step-num {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(217,70,239,0.18));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: absolute;
  top: 1rem;
  right: 1.25rem;
}
.step-icon {
  display: inline-grid;
  place-items: center;
  height: 44px; width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(34,211,238,0.12));
  color: rgb(67 56 202); /* brand-700 */
  margin-bottom: 1rem;
}
.step-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: rgb(15 23 42);
  font-size: 1.1rem;
}
.step-desc {
  margin-top: .5rem;
  color: rgb(71 85 105);
  font-size: .9rem;
  line-height: 1.55;
}

/* ============================ FEATURE ROWS ============================ */
.feature-row {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.feature-row:hover {
  background: rgb(248 250 252);
  border-color: rgba(99, 102, 241, 0.35);
  transform: translateY(-2px);
}
.feature-icon {
  display: grid;
  place-items: center;
  height: 40px; width: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(217,70,239,0.12));
  color: rgb(67 56 202);
}

/* ============================ SUGGESTIONS ============================ */
.suggestion {
  padding: 1rem;
  border-radius: .85rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
}
.suggestion-tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .15rem .5rem;
  border-radius: 999px;
  margin-bottom: .5rem;
}
.tag-high { background: rgb(254 226 226); color: rgb(190 18 60); }
.tag-med  { background: rgb(254 243 199); color: rgb(180 83 9); }
.tag-low  { background: rgb(220 252 231); color: rgb(21 128 61); }

/* ============================ TESTIMONIALS ============================ */
.testimonial {
  border-radius: 1.25rem;
  border: 1px solid rgb(226 232 240);
  background: #ffffff;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 20px 45px -20px rgba(245, 158, 11, 0.3);
}

/* ============================ FAQ ============================ */
.faq-item {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 8px 25px -10px rgba(99, 102, 241, 0.2);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: rgb(15 23 42);
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: rgb(99 102 241);
  transition: transform .25s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-body {
  padding: 0 1.25rem 1.25rem;
  color: rgb(71 85 105);
  font-size: .95rem;
  line-height: 1.65;
}

/* ============================ UPLOAD ZONE ============================ */
.upload-zone {
  display: block;
  cursor: pointer;
  border-radius: 1.25rem;
  border: 2px dashed rgb(203 213 225); /* slate-300 */
  background: #ffffff;
  padding: 3rem 1.5rem;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.upload-zone:hover {
  border-color: rgb(99 102 241);
  background: rgb(238 242 255);
}
.upload-zone--drag {
  border-color: rgb(217 70 239);
  background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(217,70,239,0.05));
  transform: scale(1.005);
}
.upload-zone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.upload-zone__inner > * { pointer-events: auto; }

/* ============================ LOADING ============================ */
.loading-pulse {
  animation: pulse-glow 1.6s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
  50%      { box-shadow: 0 0 0 14px rgba(99,102,241,0); }
}
.loading-bar {
  width: 30%;
  animation: loading-slide 1.4s ease-in-out infinite;
}
@keyframes loading-slide {
  0%   { transform: translateX(-100%); width: 30%; }
  50%  { width: 60%; }
  100% { transform: translateX(350%); width: 30%; }
}

/* ============================ HELP PAGE ============================ */
.toc-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgb(71 85 105);
  transition: color .15s ease;
}
.toc-link:hover { color: rgb(67 56 202); }
.toc-link i { width: 14px; height: 14px; flex-shrink: 0; }

.term-card {
  border: 1px solid rgb(226 232 240);
  border-radius: .85rem;
  background: #fff;
  padding: .9rem 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.term-card dt {
  font-weight: 700;
  color: rgb(15 23 42);
  font-size: .9rem;
}
.term-card dd {
  margin: .35rem 0 0;
  color: rgb(71 85 105);
  font-size: .85rem;
  line-height: 1.55;
}

.anatomy-item {
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .15s ease;
}
.anatomy-item[open] { border-color: rgba(99, 102, 241, .35); }
.anatomy-item summary {
  list-style: none;
  cursor: pointer;
  padding: .9rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-weight: 600;
  color: rgb(15 23 42);
}
.anatomy-item summary::-webkit-details-marker { display: none; }
.anatomy-icon {
  width: 18px;
  height: 18px;
  color: rgb(99 102 241);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.anatomy-item[open] .anatomy-icon { transform: rotate(180deg); }
.anatomy-body {
  padding: 0 1.15rem 1.15rem;
  color: rgb(71 85 105);
  font-size: .9rem;
  line-height: 1.65;
}

.mistake-card {
  display: flex;
  gap: .75rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgb(254 226 226);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.mistake-card > i {
  flex-shrink: 0;
  margin-top: .15rem;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================ REWRITE EDITOR (single-document) ============================ */
.rw-toolbar {
  position: sticky;
  top: 92px;
  z-index: 30;
  margin-top: .5rem;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  padding: .65rem 1rem;
  box-shadow: 0 6px 24px -10px rgba(15, 23, 42, .12);
}

/* ----- The "document" — looks like a printed resume ----- */
.rw-document {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 2.25rem 2.5rem 2.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 8px 32px -12px rgba(15, 23, 42, .08);
  font-family: 'Inter', system-ui, sans-serif;
  color: rgb(15 23 42);
  line-height: 1.55;
  font-size: 14px;
}
@media (max-width: 640px) {
  .rw-document { padding: 1.25rem 1.25rem 1.5rem; }
}

.rw-doc-header { text-align: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid rgb(15 23 42); }

.rw-personal-details {
  margin: .75rem auto 0;
  padding: .65rem .85rem;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: .65rem;
  display: grid;
  gap: .25rem;
  max-width: 520px;
  text-align: left;
  font-size: 12.5px;
}
.rw-pd-row {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: .5rem;
  align-items: baseline;
}
.rw-pd-label {
  margin: 0;
  font-weight: 700;
  color: rgb(67 56 202);
}
.rw-pd-label::after { content: ':'; }
.rw-pd-value {
  margin: 0;
  color: rgb(51 65 85);
}

.rw-role-desc {
  margin: .35rem 0;
}
.rw-role-desc-line {
  margin: .15rem 0;
  font-size: 13.5px;
  color: rgb(51 65 85);
  font-style: italic;
}
.rw-name {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -.01em;
  margin: 0 0 .35rem 0;
  color: rgb(15 23 42);
}
.rw-contact {
  margin: 0;
  color: rgb(71 85 105);
  font-size: 13px;
  display: flex; flex-wrap: wrap; gap: .35rem .5rem; justify-content: center;
}
.rw-sep { color: rgb(148 163 184); user-select: none; }
.rw-sep-colon { user-select: none; }

.rw-section { margin-top: 1.5rem; }
.rw-section-h {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgb(67 56 202);
  margin: 0 0 .65rem 0;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgb(226 232 240);
  display: flex; align-items: center; gap: .65rem;
}

.rw-summary-line { margin: .35rem 0; }
.rw-role { margin-top: 1rem; }
.rw-role-head {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: rgb(15 23 42);
}
.rw-role-meta {
  margin: .1rem 0 .35rem 0;
  font-size: 12.5px;
  color: rgb(100 116 139);
  font-style: italic;
}
.rw-role-title  { font-weight: 700; }
.rw-role-company{ font-weight: 600; color: rgb(67 56 202); }
.rw-role-dates  {}
.rw-role-location {}

.rw-bullets { margin: .35rem 0 .35rem 1.25rem; padding: 0; list-style: disc; }
.rw-bullets li { margin: .15rem 0; }

.rw-skill-row { margin: .25rem 0; font-size: 13.5px; }
.rw-skill-label { font-weight: 700; }
.rw-skill-items { color: rgb(51 65 85); }

.rw-edu-block { margin: .5rem 0 .75rem 0; }
.rw-edu-head { font-weight: 600; margin: 0; }
.rw-edu-line { margin: 0; color: rgb(71 85 105); font-size: 13px; }

.rw-project-name { font-weight: 700; margin: .65rem 0 .25rem 0; font-size: 1rem; }

/* ----- Per-line contenteditable ----- */
.rl-line {
  outline: none;
  cursor: text;
  border-radius: 4px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.rl-line:focus,
.rl-line:hover { background: rgb(248 250 252); }
.rl-line:focus { box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .35); }
.rl-line-empty::before {
  content: '·';
  color: rgb(203 213 225);
  user-select: none;
}

/* ----- Highlights for AI-anchored lines ----- */
.rl-anchor {
  background-color: rgb(254 249 195);  /* yellow-100 */
  box-shadow: inset 0 -2px 0 rgb(250 204 21);  /* yellow-400 underline */
  cursor: pointer;
  position: relative;
}
.rl-anchor:hover { background-color: rgb(253 224 71); }
.rl-anchor::after {
  content: '✨';
  position: absolute;
  right: -1.4em; top: 50%; transform: translateY(-50%);
  font-size: .75em;
  opacity: .7;
  pointer-events: none;
}
.rl-anchor.rw-bullet::after,
.rl-anchor.rw-summary-line::after { right: auto; left: -1.4em; }
.rl-anchor:focus {
  /* When user is editing the highlighted line directly, soften the highlight */
  background-color: rgb(254 252 232);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .4);
}

.rl-anchor-grammar {
  background-color: rgb(254 226 226);  /* rose-100 */
  box-shadow: inset 0 -2px 0 rgb(244 63 94);
}
.rl-anchor-grammar:hover { background-color: rgb(252 165 165); }
.rl-anchor-grammar::after { content: '⚠'; }

.rl-line-applied {
  background-color: rgb(220 252 231) !important;  /* emerald-100 */
  box-shadow: inset 0 -2px 0 rgb(16 185 129) !important;
}
.rl-line-applied::after {
  content: '✓' !important;
  font-size: .85em !important;
  opacity: 1 !important;
  color: rgb(5 150 105) !important;
  font-weight: 700;
}

/* ----- Popover ----- */
.rl-popover {
  position: absolute;
  z-index: 60;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: .85rem;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, .25);
  font-family: 'Inter', system-ui, sans-serif;
}
.rl-popover.hidden { display: none; }
.rl-popover-arrow {
  position: absolute;
  top: -7px;
  width: 14px; height: 14px;
  background: #fff;
  border-left: 1px solid rgb(226 232 240);
  border-top: 1px solid rgb(226 232 240);
  transform: rotate(45deg);
}
.rl-popover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .85rem;
  border-bottom: 1px solid rgb(226 232 240);
}
.rl-popover-title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: rgb(15 23 42);
}
.rl-popover-close {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 0; background: transparent;
  color: rgb(100 116 139); cursor: pointer;
}
.rl-popover-close:hover { background: rgb(241 245 249); color: rgb(15 23 42); }

.rl-popover-original {
  padding: .65rem .85rem;
  background: rgb(248 250 252);
  border-bottom: 1px solid rgb(226 232 240);
}
.rl-popover-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(100 116 139);
}
.rl-popover-current {
  margin: .25rem 0 0;
  font-size: .85rem;
  color: rgb(51 65 85);
  font-style: italic;
  word-break: break-word;
}

.rl-popover-options {
  padding: .65rem;
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 50vh;
  overflow-y: auto;
}
.rl-popover-option {
  text-align: left;
  width: 100%;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  border-radius: .55rem;
  padding: .55rem .7rem;
  cursor: pointer;
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .15s ease, transform .1s ease, background .1s ease;
}
.rl-popover-option:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgb(238 242 255);
  transform: translateY(-1px);
}
.rl-popover-option.rl-option-grammar { background: rgb(254 242 242); border-color: rgb(254 226 226); }
.rl-popover-option.rl-option-grammar:hover { background: rgb(254 226 226); }
.rl-popover-option-text {
  font-size: .87rem;
  color: rgb(15 23 42);
  line-height: 1.5;
  word-break: break-word;
}
.rl-popover-rationale {
  color: rgb(100 116 139);
  font-style: italic;
  font-size: .72rem;
}
.rl-pill {
  align-self: flex-start;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rl-pill-rose    { background: rgb(254 226 226); color: rgb(190 18 60); }
.rl-pill-brand   { background: rgb(238 242 255); color: rgb(67 56 202); }
.rl-pill-magenta { background: rgb(250 232 255); color: rgb(134 25 143); }
.rl-pill-emerald { background: rgb(220 252 231); color: rgb(5 150 105); }

.rl-popover-applied-msg {
  margin: 0;
  font-size: .85rem;
  color: rgb(51 65 85);
  line-height: 1.5;
  padding: .5rem 0;
}
.rl-popover-applied-msg .rl-pill {
  margin-right: .35rem;
  vertical-align: middle;
}

.rl-popover-foot {
  padding: .55rem .85rem;
  border-top: 1px solid rgb(226 232 240);
  display: flex; justify-content: flex-end;
}
.rl-revert-btn {
  background: transparent;
  color: rgb(100 116 139);
  border: 1px solid rgb(226 232 240);
  border-radius: .4rem;
  padding: .25rem .65rem;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.rl-revert-btn:hover { background: rgb(248 250 252); color: rgb(15 23 42); }

/* ----- Section-rewrite button + modal ----- */
.rl-section-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 600;
  color: rgb(67 56 202);
  background: rgb(238 242 255);
  border: 1px solid rgb(199 210 254);
  border-radius: 999px;
  padding: .15rem .55rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.rl-section-btn:hover { background: rgb(224 231 255); }
.rl-section-count {
  background: #fff;
  color: rgb(67 56 202);
  border-radius: 999px;
  padding: 0 .35rem;
  font-size: .65rem;
  margin-left: .25rem;
}

.rl-section-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.rl-section-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}
.rl-section-modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rl-section-modal-head {
  padding: .85rem 1rem;
  border-bottom: 1px solid rgb(226 232 240);
  display: flex; justify-content: space-between; align-items: center;
}
.rl-section-modal-close {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 0; background: transparent;
  color: rgb(100 116 139); cursor: pointer;
}
.rl-section-modal-close:hover { background: rgb(241 245 249); }
.rl-section-modal-body {
  padding: 1rem;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .75rem;
}
.rl-section-option {
  border: 1px solid rgb(226 232 240);
  border-radius: .65rem;
  padding: .85rem;
}
.rl-section-option-head {
  display: flex; gap: .5rem; align-items: center;
  margin-bottom: .35rem;
}
.rl-section-option-text {
  white-space: pre-wrap;
  font-family: 'Inter', system-ui, sans-serif;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: .35rem;
  padding: .55rem .65rem;
  font-size: .85rem;
  margin: 0 0 .55rem 0;
}
.rl-apply-section {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: .45rem;
  background: linear-gradient(90deg, #6366f1, #d946ef);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}
.rl-apply-section:hover { opacity: .92; }

/* ----- Reorder modal ----- */
.rw-reorder-card { max-width: 480px; }
.rw-reorder-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.rw-reorder-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border: 1px solid rgb(226 232 240);
  border-radius: .55rem;
  background: #fff;
  font-size: .9rem;
  color: rgb(15 23 42);
}
.rw-reorder-item:hover { border-color: rgba(99, 102, 241, .35); background: rgb(248 250 252); }
.rw-reorder-grip {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  color: rgb(148 163 184);
  cursor: grab;
}
.rw-reorder-name {
  flex: 1;
  font-weight: 600;
}
.rw-reorder-actions {
  display: flex;
  gap: .25rem;
}
.rw-reorder-up,
.rw-reorder-down {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  color: rgb(71 85 105);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rw-reorder-up:hover:not([disabled]),
.rw-reorder-down:hover:not([disabled]) {
  border-color: rgba(99, 102, 241, .45);
  color: rgb(67 56 202);
  background: rgb(238 242 255);
}
.rw-reorder-up[disabled],
.rw-reorder-down[disabled] {
  opacity: .35;
  cursor: not-allowed;
}
.rw-reorder-foot {
  padding: .85rem 1rem;
  border-top: 1px solid rgb(226 232 240);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.rw-reorder-spacer { flex: 1; }

/* ============================ BUILD WIZARD ============================ */
.bw-sidebar { position: sticky; top: 92px; align-self: start; }
.bw-sidebar-card {
  border-radius: 1.25rem;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 4px 24px -12px rgba(15, 23, 42, .12);
}
.bw-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: rgb(241 245 249);
  overflow: hidden;
}
.bw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #d946ef);
  transition: width .3s ease;
}
.bw-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.bw-step-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: .65rem;
  cursor: pointer;
  font-size: .85rem;
  color: rgb(71 85 105);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bw-step-item:hover { background: rgb(248 250 252); }
.bw-step-item-current {
  background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(217,70,239,.08));
  border-color: rgba(99, 102, 241, .35);
  color: rgb(15 23 42);
  font-weight: 600;
}
.bw-step-item-complete .bw-step-num-circle {
  background: rgb(220 252 231);
  color: rgb(5 150 105);
  border-color: rgb(5 150 105);
}
.bw-step-num-circle {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgb(203 213 225);
  background: #fff;
  color: rgb(100 116 139);
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.bw-step-item-current .bw-step-num-circle {
  background: linear-gradient(135deg, #6366f1, #d946ef);
  border-color: transparent;
  color: #fff;
}
.bw-step-name { flex: 1; }
.bw-step-status {
  display: inline-flex;
  align-items: center;
  color: rgb(99 102 241);
}
.bw-step-item-complete .bw-step-status { color: rgb(5 150 105); }

/* ----- Main step content ----- */
.bw-main { min-width: 0; }
.bw-step {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1.25rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
@media (max-width: 640px) { .bw-step { padding: 1.25rem; } }
.bw-step-title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  color: rgb(15 23 42);
}
.bw-step-desc { margin-top: .5rem; color: rgb(100 116 139); font-size: .95rem; }

.bw-form { display: flex; flex-direction: column; gap: .75rem; }
.bw-field { display: block; }
.bw-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(100 116 139);
  margin-bottom: .25rem;
}
.bw-req { color: rgb(244 63 94); }
.bw-input,
.bw-textarea {
  width: 100%;
  border: 1px solid rgb(226 232 240);
  border-radius: .65rem;
  background: #fff;
  padding: .6rem .8rem;
  font-size: .95rem;
  color: rgb(15 23 42);
  font-family: inherit;
  line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bw-textarea { resize: vertical; min-height: 2.5rem; }
.bw-input:focus,
.bw-textarea:focus {
  outline: none;
  border-color: rgb(99 102 241);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}
.bw-bullet { font-size: .92rem; }

@keyframes bw-applied-pulse {
  0%   { background: rgb(220 252 231); }
  100% { background: #fff; }
}
.bw-applied { animation: bw-applied-pulse 1.4s ease-out; }

/* ----- Suggestion panel ----- */
.bw-suggest {
  border: 1px dashed rgb(199 210 254);
  background: linear-gradient(180deg, rgb(238 242 255) 0%, #fff 100%);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}
.bw-suggest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
}
.bw-suggest-title {
  font-weight: 700;
  font-size: .9rem;
  color: rgb(67 56 202);
}
.bw-suggest-refresh {
  background: linear-gradient(90deg, #6366f1, #d946ef);
  color: #fff;
  border: 0;
  border-radius: .5rem;
  padding: .35rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}
.bw-suggest-refresh:hover { opacity: .9; }
.bw-suggest-refresh:disabled { opacity: .55; cursor: not-allowed; }
.bw-suggest-options {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.bw-suggest-loading {
  text-align: center;
  color: rgb(100 116 139);
  font-size: .85rem;
  padding: .9rem .25rem;
  font-style: italic;
}
.bw-suggest-opt {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: .65rem;
  align-items: start;
  text-align: left;
  width: 100%;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: .7rem;
  padding: .65rem .85rem;
  cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
  font-family: inherit;
  color: inherit;
}
.bw-suggest-opt:hover {
  border-color: rgba(99, 102, 241, .55);
  transform: translateY(-1px);
}
.bw-suggest-opt-num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgb(238 242 255);
  color: rgb(67 56 202);
  font-size: .75rem;
  font-weight: 700;
}
.bw-suggest-opt-body { min-width: 0; }
.bw-suggest-opt-text {
  font-size: .9rem;
  color: rgb(15 23 42);
  line-height: 1.5;
  white-space: pre-wrap;
}
.bw-suggest-opt-rat {
  font-size: .72rem;
  color: rgb(100 116 139);
  margin-top: .25rem;
  font-style: italic;
}
.bw-suggest-opt-action {
  align-self: center;
  font-size: .72rem;
  font-weight: 600;
  color: rgb(67 56 202);
  background: rgb(238 242 255);
  padding: .25rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.bw-suggest-opt-used {
  background: rgb(236 253 245);
  border-color: rgb(110 231 183);
}
.bw-suggest-opt-used .bw-suggest-opt-action {
  background: rgb(220 252 231);
  color: rgb(5 150 105);
}

/* ----- Role / project / edu blocks ----- */
.bw-role {
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}
.bw-role[open] { border-color: rgba(99, 102, 241, .35); }
.bw-role-summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1rem;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: .65rem;
  align-items: center;
}
.bw-role-summary::-webkit-details-marker { display: none; }
.bw-role-num {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgb(238 242 255);
  color: rgb(67 56 202);
  font-size: .75rem;
  font-weight: 700;
}
.bw-role-label { display: flex; flex-direction: column; min-width: 0; }
.bw-role-label-title { font-weight: 600; color: rgb(15 23 42); }
.bw-role-label-meta { font-size: .75rem; color: rgb(100 116 139); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-role[open] .bw-role-chevron { transform: rotate(180deg); }
.bw-role-chevron { transition: transform .2s ease; }
.bw-role-body {
  padding: .75rem 1rem 1.1rem;
  border-top: 1px solid rgb(241 245 249);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.bw-edu-block,
.bw-proj-block {
  border: 1px solid rgb(226 232 240);
  border-radius: .85rem;
  padding: .85rem 1rem;
  background: #fff;
}

.bw-collapsible {
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}
.bw-collapsible[open] { border-color: rgba(99, 102, 241, .25); }
.bw-collapsible summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: rgb(15 23 42);
}
.bw-collapsible summary::-webkit-details-marker { display: none; }
.bw-collapsible[open] summary i[data-lucide="chevron-down"] { transform: rotate(180deg); }
.bw-collapsible summary i { transition: transform .2s ease; }
.bw-collapsible-body {
  padding: .25rem 1rem 1rem;
  border-top: 1px solid rgb(241 245 249);
}

/* ----- Step nav (Back / Next) ----- */
.bw-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
  padding: 0 .25rem;
}
.bw-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.1rem;
  border-radius: .65rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  border: 1px solid transparent;
}
.bw-nav-back {
  background: #fff;
  border-color: rgb(226 232 240);
  color: rgb(71 85 105);
}
.bw-nav-back:hover:not([disabled]) { background: rgb(248 250 252); }
.bw-nav-back[disabled] { opacity: .4; cursor: not-allowed; }
.bw-nav-next {
  background: linear-gradient(90deg, #6366f1, #d946ef);
  color: #fff;
}
.bw-nav-next:hover { transform: translateY(-1px); }

/* ----- Legend swatches ----- */
.rl-legend-swatch {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
}
.rl-legend-anchor  { background: rgb(254 249 195); border-bottom: 2px solid rgb(250 204 21); }
.rl-legend-applied { background: rgb(220 252 231); border-bottom: 2px solid rgb(16 185 129); }

/* ============================ MODALS ============================ */
#planModal.is-open,
#authModal.is-open { display: flex; }

/* Allow <button> elements styled as mobile-link (auth Sign in) */
button.mobile-link {
  background: transparent;
  border: 0;
  width: 100%;
  font: inherit;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}