/* ==========================================================================
   GenioPrep — Dashboard app shell (4-item task nav + bottom-pinned Account group)
   Extends styles.css landing system (tokens, reset, orb/wordmark, theme toggle)
   ========================================================================== */

:root {
  --fs-1: .75rem;    /* 12px — pills/tags/uppercase labels */
  --fs-2: .8125rem;  /* 13px — secondary/meta text */
  --fs-3: .875rem;   /* 14px — body/nav/small text */
  --fs-4: 1rem;      /* 16px — card titles, emphasis text */
  --fs-5: 1.125rem;  /* 18px — section h2, sidebar wordmark */
  --fs-6: 1.5rem;    /* 24px — hero numbers (stat value, pack price) */
}

body.dash-body {
  height: 100vh;
  height: 100dvh;
  display: flex;
}

/* ---------- Sidebar ---------- */
.dash-sidebar {
  width: 240px; flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 20px 14px;
  z-index: 60;
}
.dash-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 20px; text-decoration: none; }
.dash-sidebar-brand .sq { width: 30px; height: 30px; }
.dash-sidebar-brand .orb { width: 19px; height: 19px; }
.dash-sidebar-brand .wordmark { font-size: var(--fs-5); }

.dash-nav { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px;
  border: 0; background: transparent; border-radius: 12px; cursor: pointer;
  color: var(--text-dim); font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-3); font-weight: 600; text-align: left; width: 100%;
}
.dash-nav-link svg { flex: none; width: 18px; height: 18px; }
a.dash-nav-link { text-decoration: none; }
.dash-nav-link:hover { color: var(--text); background: var(--tint-neutral); }
.dash-nav-link.active { color: var(--gold-text); background: var(--tint-gold); }

.dash-nav-account { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.dash-nav-group-label { font-size: var(--fs-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); padding: 0 12px 6px; }

/* ---------- Content column ---------- */
.dash-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Topbar ---------- */
.dash-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 24px; min-height: 64px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
  flex: none;
}
.dash-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash-topbar-right { display: flex; align-items: center; gap: 10px; }
.dash-mobile-toggle {
  display: none; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--border-hi); background: var(--tint-neutral);
  color: var(--text-dim); align-items: center; justify-content: center; cursor: pointer;
  flex: none;
}
.dash-mobile-toggle svg { width: 18px; height: 18px; }

.credit-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--tint-gold-line); background: var(--tint-gold); color: var(--gold-text);
  border-radius: 999px; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: var(--fs-3);
  cursor: pointer;
}
.credit-pill svg { width: 16px; height: 16px; }

/* ---------- Main ---------- */
.dash-main { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 32px 24px 80px; }
.dash-main-inner { width: min(100%, 1040px); }

/* ---------- Mobile drawer ---------- */
.dash-sidebar-backdrop { display: none; }
@media (max-width: 899px) {
  body.dash-body { display: block; }
  .dash-sidebar {
    position: fixed; inset: 0 auto 0 0; width: 240px;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.dash-sidebar-open .dash-sidebar { transform: translateX(0); }
  .dash-mobile-toggle { display: inline-flex; }
  .dash-sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(5,8,20,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  body.dash-sidebar-open .dash-sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .dash-main { padding: 20px 16px 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-sidebar, .dash-sidebar-backdrop { transition: none; }
  .wallet-ring-arc { transition: none; }
  .password-change-panel, .profile-avatar-overlay { transition: none; }
}

/* ==========================================================================
   Dashboard content components
   ========================================================================== */

[hidden] { display: none !important; }

.dash-main h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0 0 16px; }
.dash-main h2 { font-size: var(--fs-5); margin-bottom: 12px; }
.dash-main p { color: var(--text-dim); }

.panel, .card {
  border: 1px solid var(--border); border-radius: var(--r-md, 18px);
  background: var(--surface); box-shadow: var(--shadow-card);
}
.panel { padding: 24px; }
.panel + .panel { margin-top: 16px; }

/* Section labels are the sitewide v2 kicker (gp-v2.css .v2-kicker). Qualified with
   .dash-main h2 because `.dash-main h2` above outranked the bare class and set them at 18px. */
.sub-header, .dash-main h2.sub-header {
  display: flex; align-items: center; gap: 10px;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--gold-text); margin: 16px 0 12px;
}
.sub-header::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.sub-header:first-of-type { margin-top: 0; }

.card { padding: 16px; box-shadow: none; }
.label { display: block; color: var(--text-dim); font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.value { display: block; margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: var(--fs-6); font-weight: 700; color: var(--text); }

.credit-breakdown { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.credit-breakdown .cb-item { font-size: var(--fs-2); color: var(--text-dim); background: var(--tint-neutral); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.credit-breakdown .cb-item strong { color: var(--text); }

.account-cards-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 8px; background: var(--tint-neutral); }
.card h3 { margin-bottom: 0; font-size: var(--fs-4); }
.card p { margin-bottom: 4px; }
.card .button, .card button { margin-top: auto; }

/* Credit Bank pricing — reuses styles.css's .price/.price-feat system (pricing.html) so the
   logged-in buyer sees the same card language as the pre-signup pricing page. */
#packs.pricing { grid-template-columns: repeat(3, minmax(0,1fr)); }
.price .button { margin-top: auto; }
.button.block { width: 100%; }
.price-tagline { font-size: .84rem; color: var(--text-dim); line-height: 1.5; margin: 0 0 18px; }
.price-per-credit { font-family: "JetBrains Mono", monospace; font-size: .76rem; color: var(--gold-text); font-weight: 500; }

/* ---------- Wallet card (Credit Bank hero) ---------- */
.wallet-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap; padding: 28px; margin-bottom: 16px;
}
.wallet-card::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(240,165,0,.22), transparent 70%);
  pointer-events: none;
}
.wallet-ring-wrap { position: relative; flex: none; width: 132px; height: 132px; z-index: 1; }
.wallet-ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wallet-ring-track { fill: none; stroke: var(--border); stroke-width: 10; }
.wallet-ring-arc {
  fill: none; stroke: url(#walletRingGradient); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1);
}
.wallet-ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.wallet-ring-value {
  font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.7rem; line-height: 1;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wallet-ring-value.zero { background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--text-dim); }
.wallet-ring-label { font-size: var(--fs-1); color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; line-height: 1.2; margin-top: 4px; max-width: 92px; }
.wallet-meta { flex: 1; min-width: 200px; z-index: 1; }
.wallet-meta-row { display: flex; gap: 24px; margin-bottom: 14px; }
.wallet-meta-item .label { margin-bottom: 2px; }
.wallet-meta-item .value { font-family: "JetBrains Mono", monospace; font-size: var(--fs-5); font-weight: 700; color: var(--text); }
/* Below this the three stats are squeezed to 56/105/101px and every label wraps
   down six lines; they wrap onto separate rows instead. Not applied wider than
   this, where they already sit at almost full width on one line. */
@media (max-width: 560px) {
  .wallet-meta-row { flex-wrap: wrap; }
}
.wallet-activity { margin-top: 10px; }
.wallet-activity .label { margin-bottom: 6px; }
.wallet-sparkline { display: flex; align-items: flex-end; gap: 4px; height: 32px; }
.wallet-sparkline .bar { flex: 1; max-width: 10px; border-radius: 3px 3px 0 0; background: var(--tint-neutral); min-height: 3px; }
.wallet-sparkline .bar.positive { background: var(--grad-gold); }
.wallet-sparkline .bar.negative { background: var(--text-dim); opacity: .5; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-family: "Sora", sans-serif; font-size: var(--fs-3); font-weight: 700;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.available { color: var(--green-text); }
.status-pill.used { color: var(--text-dim); }

.credit-usage-explainer { color: var(--text-dim); margin-bottom: 16px; }

/* .price.featured's "Most Popular" ribbon is CSS ::before content — invisible to screen
   readers. This gives assistive tech the same information as real, readable text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Transaction history ---------- */
.tx-list { display: flex; flex-direction: column; gap: 2px; }
.tx-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.tx-row:last-child { border-bottom: 0; }
.tx-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tint-neutral); }
.tx-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tx-icon.positive { background: var(--tint-gold); }
.tx-icon.positive svg { stroke: var(--gold-text); }
.tx-icon.negative svg { stroke: var(--text-dim); }
.tx-body { flex: 1; min-width: 0; }
.tx-label { font-weight: 600; color: var(--text); }
.tx-date { font-size: var(--fs-2); color: var(--text-dim); }
.tx-amount { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: var(--fs-4); flex: none; }
.tx-amount.positive { color: var(--gold-text); }
.tx-amount.negative { color: var(--text-dim); }

.button {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid transparent; border-radius: 999px; padding: 14px 26px;
  background: var(--grad-gold); color: #3A2600; font-family: "Sora", sans-serif; font-weight: 600; font-size: .95rem; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 8px 24px rgba(240,165,0,.24);
  transition: transform .15s, box-shadow .2s, opacity .15s, background-color .2s, border-color .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(240,165,0,.34); }
.button:active { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }
.button.secondary { background: transparent; border-color: var(--border-hi); color: var(--text); box-shadow: none; }
.button.secondary:hover { border-color: var(--text-dim); background: var(--tint-neutral); }
.button.success-btn { background: var(--green); color: #06371f; box-shadow: none; }
/* A long label ("Practice this in your next mock") is wider than a card on a 360px phone; wrap it rather than overflow. */
@media (max-width: 420px) { .button { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; } }

.status { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--tint-neutral); color: var(--text-dim); }
.status.error { border-color: rgba(244,89,91,.35); color: var(--red-text); background: rgba(244,89,91,.08); }
.status.ok { border-color: rgba(34,197,94,.35); color: var(--green-text); background: rgba(34,197,94,.08); }

/* ---------- Profile form ---------- */
.profile-card { position: relative; overflow: hidden; }
.profile-card::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(240,165,0,.14), transparent 70%); pointer-events: none;
}
.profile-avatar-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.profile-avatar-btn { position: relative; flex: none; width: 96px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.profile-avatar-btn:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.profile-avatar { width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--tint-gold); color: var(--gold-text); display: flex; align-items: center; justify-content: center; font-family: "Sora", sans-serif; font-weight: 700; font-size: var(--fs-6); overflow: hidden; box-shadow: 0 0 0 3px var(--tint-gold-line); }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(10,12,20,.55); opacity: 0; transition: opacity .15s;
}
.profile-avatar-overlay svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-avatar-btn:hover .profile-avatar-overlay, .profile-avatar-btn:focus-visible .profile-avatar-overlay { opacity: 1; }
.profile-avatar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.profile-field { position: relative; z-index: 1; display: block; margin-bottom: 14px; }
.profile-field .label { margin-bottom: 6px; }
.profile-field-row { display: flex; align-items: center; gap: 10px; }
.profile-input {
  width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 10px;
  padding: 0 14px; background: var(--tint-neutral); color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--fs-4);
}
.profile-input:disabled { color: var(--text-dim); cursor: not-allowed; }
.profile-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--gold-text); }
.verify-badge { flex: none; font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.verify-badge.verified { color: var(--green-text); background: rgba(34,197,94,.1); }
.verify-badge.unverified { color: var(--text-dim); background: var(--tint-neutral); }
@media (max-width: 560px) {
  .profile-field-row { flex-wrap: wrap; }
  .profile-field-row .verify-badge { margin-top: 2px; }
}

.button.ghost { background: none; border-color: transparent; color: var(--text-dim); box-shadow: none; padding: 14px 12px; }
.button.ghost:hover { color: var(--red); transform: none; box-shadow: none; background: rgba(244,89,91,.08); }

.card.danger { border-color: rgba(244,89,91,.35); background: rgba(244,89,91,.06); }
.card.danger strong { color: var(--red-text); }
.button.danger { background: var(--red); color: #2a0708; box-shadow: 0 8px 24px rgba(244,89,91,.24); }
.button.danger:hover { box-shadow: 0 14px 34px rgba(244,89,91,.34); }
.button.danger:disabled { background: var(--tint-neutral); color: var(--text-dim); box-shadow: none; }

/* ---------- Avatar crop modal ---------- */
.avatar-modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,14,.7); padding: 20px;
}
.avatar-modal { width: min(100%, 360px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-card); padding: 24px; }
.avatar-modal-title { margin: 0 0 16px; font-size: var(--fs-5); }
.avatar-crop-stage { width: 240px; height: 240px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--tint-gold-line); }
.avatar-crop-stage:focus-within { box-shadow: 0 0 0 3px var(--gold-text); }
#avatar-crop-canvas { display: block; width: 240px; height: 240px; cursor: grab; touch-action: none; outline: none; }
#avatar-crop-canvas:active { cursor: grabbing; }
.avatar-zoom-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text-dim); }
.avatar-zoom-row svg { flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avatar-zoom-row input[type="range"] { flex: 1; accent-color: var(--gold-text); }
.avatar-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Login & Security: Google card, inline password panel ---------- */
.google-card { flex-direction: row; align-items: center; gap: 12px; }
.google-card-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.google-card-icon svg { width: 20px; height: 20px; }
.google-card-body { flex: 1; min-width: 0; }
.google-card.connected { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); }
.google-card.connected .google-card-icon { background: rgba(34,197,94,.14); }
.google-card #google-connect-btn { flex: none; }

.password-change-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.password-change-panel.open { max-height: 480px; opacity: 1; }
.password-change-panel-inner { padding-top: 18px; padding-bottom: 24px; margin-top: 18px; border-top: 1px solid var(--border); }
.password-change-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.password-new-row { display: flex; gap: 28px; align-items: flex-start; }
.password-new-fields { flex: 1; min-width: 0; max-width: 320px; }
.password-rules { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 180px; }
.password-rules li { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-dim); transition: color .15s; }
.password-rules li svg { width: 16px; height: 16px; flex: none; stroke: var(--text-faint, var(--text-dim)); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.password-rules li.met { color: var(--green-text); }
.password-rules li.met svg { stroke: var(--green-text); }
@media (max-width: 640px) {
  .password-new-row { flex-direction: column; gap: 12px; }
  .password-new-fields { max-width: none; }
  .password-rules { margin-top: 4px; }
}

/* ---------- Notifications ---------- */
.notif-list { display: flex; flex-direction: column; margin-bottom: 4px; }
.notif-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notif-row:hover { background: var(--tint-neutral); }
.notif-row input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--gold-text); }
.notif-row-unsub { border-top: 1px solid var(--border-hi); border-bottom: 0; margin-top: 4px; padding-top: 16px; }

.tx-icon.promo { background: var(--tint-gold); }
.tx-icon.promo svg { stroke: var(--gold-text); }
.tx-amount.promo { color: var(--green-text); }

.empty { border: 1px dashed var(--border); border-radius: 10px; padding: 16px; color: var(--text-dim); background: var(--tint-neutral); margin-bottom: 16px; }
.small { font-size: var(--fs-3); }

.empty-note { border: 1px dashed var(--border); border-radius: 10px; padding: 16px; color: var(--text-dim); background: var(--tint-neutral); font-size: var(--fs-3); }
.empty-note-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--tint-gold); color: var(--gold-text); font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.empty-note-badge svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.history-list { display: flex; flex-direction: column; }
.history-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.history-row:last-child { border-bottom: 0; }
.history-row h3 { font-size: var(--fs-4); font-weight: 700; margin: 0; }
.history-row p { font-size: var(--fs-2); color: var(--text-dim); margin: 2px 0 0; }

/* Overview > At a glance (mini resume-score + latest-interview cards) */
/* ---------- Overview: profile hero ---------- */
.profile-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--r-lg, 20px);
  background: var(--surface); box-shadow: var(--shadow-card);
  padding: 24px 28px; margin-bottom: 16px;
}
.profile-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(240,165,0,.14), transparent 70%); pointer-events: none;
}
.profile-hero-avatar {
  position: relative; z-index: 1; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--tint-gold); color: var(--gold-text); display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: var(--fs-5);
  overflow: hidden; box-shadow: 0 0 0 3px var(--tint-gold-line);
}
.profile-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-body { position: relative; z-index: 1; flex: 1; min-width: 180px; }
.profile-hero-body h1 { margin: 0 0 4px; }
.profile-hero-email { color: var(--text-dim); font-size: var(--fs-3); margin: 0; display: flex; flex-wrap: wrap; gap: 0 10px; }
/* The separator is drawn, not typed, so it never ends up orphaned at a line break. */
.profile-hero-email .id-email::before { content: "|"; color: var(--text-faint); margin-right: 10px; }
@media (max-width: 560px) {
  .profile-hero-email { display: block; }
  .profile-hero-email .id-email::before { content: none; }
  .profile-hero-email .id-email { display: block; }
}
.profile-hero-stats { position: relative; z-index: 1; display: flex; gap: 24px; }
.profile-hero-stat { text-align: right; }
.profile-hero-stat .value { font-family: "JetBrains Mono", monospace; font-size: var(--fs-6); font-weight: 700; color: var(--text); display: block; }
.profile-hero-stat .label { font-size: var(--fs-1); color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Overview: recommended next step accent ---------- */
.next-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.next-step-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-gold); }
.next-step-icon svg { width: 21px; height: 21px; stroke: var(--gold-text); }
.next-step--free .next-step-icon { background: rgba(34,197,94,.12); }
.next-step--free .next-step-icon svg { stroke: var(--green-text); }
.next-step--paid .next-step-icon { background: var(--tint-cyan); }
.next-step--paid .next-step-icon svg { stroke: var(--cyan); }
.next-step--no-credits .next-step-icon { background: var(--tint-gold); }
.next-step--no-credits .next-step-icon svg { stroke: var(--amber-text); }

/* ---------- Overview: 3 prime-objective pillars ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 16px; }
/* Four pillars since Job Match: two by two before they fall to one column, never three and a lone one. */
@media (max-width: 1180px) { .pillar-grid { grid-template-columns: repeat(2,1fr); } }
/* One treatment for all four products, as on the homepage's product cards (gp-v2.css
   .v2-tool): no colour per product. Green stays a score signal only. */
.pillar-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  --pl-accent-text: var(--gold-text); --pl-tint: var(--tint-gold); --pl-tint-line: var(--tint-gold-line);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px); padding: 20px; background: var(--surface);
  transition: border-color .18s, box-shadow .2s, transform .2s;
}
.pillar-card:hover { box-shadow: 0 14px 32px var(--pl-tint); transform: translateY(-3px); border-color: var(--pl-tint-line); }
.pillar-icon { border: 1px solid var(--pl-tint-line); }
.pillar-head { display: flex; align-items: center; justify-content: space-between; }
.pillar-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--pl-tint); }
.pillar-icon svg { width: 22px; height: 22px; stroke: var(--pl-accent-text); }
.pillar-score-badge { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: var(--fs-5); }
.pillar-card h3 { font-size: var(--fs-4); font-weight: 700; margin: 4px 0 0; }
.pillar-card p { font-size: var(--fs-3); color: var(--text-dim); margin: 0; flex: 1; }
.pillar-cta { font-weight: 700; font-size: var(--fs-3); color: var(--pl-accent-text); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.pillar-cta svg { width: 15px; height: 15px; stroke: currentColor; transition: transform .18s; }
.pillar-card:hover .pillar-cta svg { transform: translateX(3px); }

/* Action cards grid (Interview Prep > Mock Interviews) */
.action-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.action-card {
  border: 1px solid var(--border); border-top: 3px solid var(--ac-accent, var(--border)); border-radius: 12px; padding: 22px;
  background: var(--surface); display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: border-color .18s, box-shadow .2s, transform .2s;
}
[data-theme="light"] .action-card { background: #FFFFFF; }
.action-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.action-card--free { --ac-accent: var(--green); --ac-accent-text: var(--green-text); --ac-tint: rgba(34,197,94,.12); --ac-tint-line: rgba(34,197,94,.32); }
.action-card--paid { --ac-accent: var(--cyan); --ac-accent-text: var(--cyan); --ac-tint: var(--tint-cyan); --ac-tint-line: var(--tint-cyan-line); }
.action-card--premium { --ac-accent: var(--gold); --ac-accent-text: var(--amber-text); --ac-tint: var(--tint-gold); --ac-tint-line: var(--tint-gold-line); }
.ac-head { display: flex; align-items: center; justify-content: space-between; }
.ac-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--ac-tint); }
.ac-icon svg { width: 20px; height: 20px; stroke: var(--ac-accent-text); }
.action-card .ac-tag, .next-step .ac-tag, .builder-panel .ac-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .03em; margin-bottom: 4px; }
.action-card .ac-tag { background: var(--ac-tint); color: var(--ac-accent-text); border: 1px solid var(--ac-tint-line); margin-bottom: 0; }
.ac-tag.free { background: rgba(34,197,94,.12); color: var(--green-text); }
.ac-tag.paid { background: var(--tint-cyan); color: var(--cyan); }
/* --cyan is not redefined for light, and #38BDF8 on white is 2.1:1; sky-700 is 5.9:1. */
[data-theme="light"] .action-card--paid { --ac-accent-text: #0369A1; }
[data-theme="light"] .ac-tag.paid { color: #0369A1; }
.ac-tag.no-credits { background: var(--tint-gold); color: var(--amber-text); }
.ac-tag.blue { background: var(--tint-blue); color: var(--blue-hi); }

/* ---------- Resume Builder panels ---------- */
.builder-panel { border-top: 3px solid var(--blue); }
.builder-panel-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.builder-panel-icon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--tint-blue); }
.builder-panel-icon svg { width: 22px; height: 22px; stroke: var(--blue-hi); }
.builder-panel-head h2 { margin: 0; }
.builder-panel-badge { margin-left: auto; flex: none; }
.builder-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.action-card h3 { font-size: var(--fs-4); font-weight: 700; margin: 0; }
.action-card p { font-size: var(--fs-3); color: var(--text-dim); margin: 0; }
[data-theme="light"] .action-card p { color: #5D6890; }
.ac-credit { font-size: var(--fs-2); color: var(--text-dim); }
.action-card .ac-credit { font-size: var(--fs-2); color: var(--text-dim); margin-top: auto; padding-top: 4px; border-top: 1px solid var(--border); }
.action-card.hero { background-color: transparent; background-image: linear-gradient(160deg, var(--ac-tint, var(--tint-gold)), var(--tint-neutral)); border-color: var(--ac-tint-line, var(--border-hi)); box-shadow: 0 10px 26px var(--ac-tint, var(--tint-gold)); }
[data-theme="light"] .action-card.hero { background-color: #FFFFFF; background-image: linear-gradient(160deg, var(--ac-tint, var(--tint-gold)), #FFFFFF); }
.action-card.hero:hover { box-shadow: 0 16px 34px var(--ac-tint, var(--tint-gold)); }

/* ── Practice History, grouped by role (interview-prep Zone B) ────────────── */
.role-block { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); margin-bottom: 12px; overflow: hidden; }
.role-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; user-select: none; background: none; border: 0; width: 100%; text-align: left; font-family: inherit; }
.role-head:hover { background: var(--tint-neutral); }
.role-chevron { width: 18px; height: 18px; stroke: var(--text-dim); fill: none; stroke-width: 2; flex: none; transition: transform .18s; }
.role-block.open .role-chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .role-chevron { transition: none; } }
.role-title { flex: 1; min-width: 0; }
.role-title .role-name { margin: 0; font-size: var(--fs-5); font-weight: 700; font-family: "Sora", "Sora Fallback", sans-serif; line-height: 1.08; letter-spacing: -0.03em; }
.role-meta { font-size: var(--fs-2); color: var(--text-dim); margin-top: 2px; }
.role-score { text-align: right; flex: none; }
.role-score .num { font-family: "JetBrains Mono", monospace; font-size: var(--fs-6); font-weight: 700; }
.role-delta { font-size: var(--fs-1); font-weight: 700; }
.role-delta.up { color: var(--green-text); }
.role-delta.down { color: var(--red-text); }
.role-delta.flat { color: var(--text-dim); }
.role-body { padding: 0 18px 18px; display: none; }
.role-block.open .role-body { display: block; }
/* Score History and Build History are flat lists, not accordions -- they have no
   .role-head to click, and .open is only ever added by that button's handler. Reusing
   .role-block left their bodies collapsed with no way to open them, so both sections read
   as empty while every row sat rendered in the DOM behind them. */
.role-block.no-toggle .role-body { display: block; }

.focus-card { border: 1px solid var(--border-hi); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; background: linear-gradient(160deg, var(--tint-gold), transparent); }
.focus-eyebrow { font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-text); margin: 0 0 8px; }
.focus-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.focus-list li { font-size: var(--fs-3); display: flex; align-items: baseline; gap: 8px; }
.focus-list li::before { content: "\2192"; color: var(--gold-text); font-weight: 700; flex: none; }
/* The sentence and its source link are one flow inside the li, so the link trails
   the last word instead of being squeezed into its own flex column and wrapping
   "from / feedback" over two lines. */
.focus-list .focus-text { min-width: 0; }
.focus-list a { color: var(--text-dim); font-size: var(--fs-1); text-decoration: none; border-bottom: 1px dotted var(--text-faint); margin-left: 4px; white-space: nowrap; }
.focus-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.sess-label { font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin: 0 0 10px; }
.sess-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.sess-row:first-of-type { border-top: 0; }
.sess-dur { font-size: var(--fs-1); font-weight: 700; color: var(--text-dim); background: var(--tint-neutral); border-radius: 999px; padding: 3px 9px; flex: none; }
.sess-info { flex: 1; min-width: 0; font-size: var(--fs-3); }
.sess-date { color: var(--text-dim); }
.sess-score { font-family: "JetBrains Mono", monospace; font-weight: 700; flex: none; width: 34px; text-align: right; }
@media (max-width: 899px) { .sess-score { font-size: 12px !important; } }
.sess-link { flex: none; font-size: var(--fs-2); color: var(--gold-text); text-decoration: none; font-weight: 700; padding: 10px 0 10px 10px; margin: -10px 0; }  /* a 40px-tall target on a phone without moving the row */
@media (max-width: 560px) {
  .sess-row { flex-wrap: wrap; row-gap: 6px; }
  .sess-info { flex: 1 1 100%; order: -1; }
  .sess-link { margin: -10px 0 -10px auto; }
}

/* Overview > ambient brand glow (fills the wide-viewport empty column, mirrors .hero) */
[data-view-panel="overview"] { position: relative; }
[data-view-panel="overview"]::before {
  content: ""; position: absolute; top: -160px; right: -200px;
  width: 620px; height: 520px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 60% 40%, var(--hero-glow) 0%, transparent 68%);
}
[data-view-panel="overview"]::after {
  content: ""; position: absolute; top: 140px; right: -280px;
  width: 520px; height: 460px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 40% 40%, var(--hero-glow-2) 0%, transparent 66%);
}
[data-view-panel="overview"] .dash-main-inner { position: relative; }

/* Overview > Recommended next step (featured treatment, mirrors .pillar.featured/.price.featured) */
.next-step { border-color: var(--tint-gold-line); box-shadow: var(--shadow-card), var(--glow-gold); }
.next-step .ac-tag { margin-bottom: 8px; }
/* Above 700px the card's right half was empty at every width: the text stacked on the
   left and the button under it. The button takes the right column, vertically centred
   on the copy, and the card is a third shorter. */
@media (min-width: 700px) {
  .next-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: 28px; align-items: center; }
  .next-step .next-step-head { grid-column: 1 / -1; }
  .next-step .sub-header, .next-step h3, .next-step p { grid-column: 1; }
  .next-step p { margin-bottom: 0 !important; }
  .next-step .button { grid-column: 2; grid-row: 2 / span 3; justify-self: end; align-self: center; white-space: nowrap; }
}

/* Onboarding panel */
.onboarding-panel { border: 1px solid var(--tint-blue-line); border-radius: 14px; padding: 20px; background: var(--tint-blue); margin-bottom: 20px; }
.onboarding-panel h2 { color: var(--text); margin-bottom: 4px; }
.onboarding-panel p { margin-bottom: 12px; font-size: var(--fs-3); }

/* Intent banner */
.intent-banner { border: 1px solid rgba(34,197,94,.35); border-radius: 12px; padding: 12px 16px; background: rgba(34,197,94,.06); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.intent-banner .ib-icon { font-size: var(--fs-6); flex-shrink: 0; color: var(--green); }
.intent-banner .ib-text { flex: 1; }
.intent-banner .ib-title { font-weight: 700; color: var(--text); font-size: var(--fs-4); margin-bottom: 4px; }
.intent-banner .ib-sub { color: var(--text-dim); font-size: var(--fs-3); }

.deletion-banner { border-bottom: 1px solid rgba(244,89,91,.35); padding: 12px 24px; background: rgba(244,89,91,.08); display: flex; align-items: center; gap: 12px; }
.deletion-banner .db-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(244,89,91,.18); color: var(--red); font-weight: 800; }
.deletion-banner .db-text { flex: 1; }
.deletion-banner .db-title { font-weight: 700; color: var(--text); font-size: var(--fs-4); }
.deletion-banner .db-sub { color: var(--text-dim); font-size: var(--fs-3); }
@media (max-width: 640px) { .deletion-banner { flex-wrap: wrap; } }

/* Rewrite progress */
.rewrite-progress { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--tint-neutral); font-size: var(--fs-3); color: var(--text-dim); }

@media (max-width: 720px) {
  .action-grid, .cards, .pillar-grid, .account-cards-row, #packs.pricing { grid-template-columns: 1fr; }
  .history-row { flex-direction: column; align-items: flex-start; }
  .profile-hero { flex-direction: column; align-items: flex-start; }
  .profile-hero-stats { width: 100%; justify-content: space-between; }
}
@media (min-width: 721px) and (max-width: 1023px) {
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  #packs.pricing { grid-template-columns: repeat(2, 1fr); }
  /* Three packs in two columns left Deep Prep alone beside an empty cell. */
  #packs.pricing .price:last-child:nth-child(odd), .action-grid .action-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Job Match view (dashboard option A: stats strip, then tabs over one compact list) */
.jm-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.jm-head h1 { margin: 0; }
.jm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.jm-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--tint-neutral); }
.jm-stat-l { font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.jm-stat-v { font-family: "JetBrains Mono", monospace; font-size: 1.375rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.jm-stat-v small { font-family: "Plus Jakarta Sans", sans-serif; font-size: var(--fs-2); font-weight: 500; color: var(--text-dim); margin-left: 6px; }
.jm-panel { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.jm-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.jm-tabs button { font: 600 var(--fs-3) "Plus Jakarta Sans", sans-serif; padding: 7px 12px; border: 0; border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.jm-tabs button span { font-family: "JetBrains Mono", monospace; font-size: var(--fs-1); margin-left: 6px; opacity: .8; }
.jm-tabs button[aria-selected="true"] { color: var(--gold-text); background: var(--tint-gold); }
.jm-tabs button:focus-visible, .jm-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jm-ptitle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px; padding: 12px 16px 6px; }
.jm-ptitle h3 { margin: 0; font-size: var(--fs-4); }
.jm-ptitle span { color: var(--text-dim); font-size: var(--fs-2); }
.jm-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); }
.jm-ring { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 var(--fs-3) "JetBrains Mono", monospace; border: 3px solid var(--success, #22C55E); color: var(--text); }
.jm-ring.is-good { border-color: var(--blue); }
.jm-ring.is-stretch { border-color: var(--gold); }
.jm-main { display: grid; gap: 1px; min-width: 0; }
.jm-main strong { font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-main span { color: var(--text-dim); font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-chip { font: 700 var(--fs-1) "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; white-space: nowrap; }
.jm-chip:empty { visibility: hidden; }
.jm-chip[data-status="applied"] { color: var(--green-text); background: rgba(34,197,94,.12); }
.jm-chip[data-status="saved"] { color: var(--gold-text); background: var(--tint-gold); }
.jm-actions { display: flex; gap: 6px; justify-content: flex-end; }
.jm-btn { font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.jm-btn:hover { border-color: var(--blue); }
.jm-btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.jm-btn--icon { padding: 6px 9px; }
.jm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--fs-2); color: var(--text-dim); }
.jm-foot a { color: var(--blue-hi, var(--blue)); font-weight: 600; text-decoration: none; }
.jm-past a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.jm-past a:first-child { border-top: 0; }
.jm-past a:hover { background: var(--tint-neutral); }
.jm-past strong { display: block; font-size: var(--fs-3); }
.jm-past span { color: var(--text-dim); font-size: var(--fs-2); }
.jm-past em { font: 700 var(--fs-1) "JetBrains Mono", monospace; font-style: normal; color: var(--gold-text); align-self: center; }
.jm-empty { color: var(--text-dim); padding: 16px; margin: 0; }
@media (max-width: 720px) {
  .jm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jm-row { grid-template-columns: 40px minmax(0, 1fr); }
  .jm-chip, .jm-actions { grid-column: 2; justify-content: flex-start; }
  .jm-chip { justify-self: start; }
}

/* Job Match targets: one tab per role the person is going after. */
.jm-targets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.jm-target { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-3) "Plus Jakarta Sans", sans-serif; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text-dim); cursor: pointer; text-decoration: none; }
.jm-target:hover { border-color: var(--gold); }
.jm-target[aria-selected="true"] { border-color: var(--gold); background: var(--tint-gold); color: var(--gold-text); }
.jm-target span { font: 600 var(--fs-1) "JetBrains Mono", monospace; padding: 1px 7px; border-radius: 999px; background: var(--tint-neutral); color: var(--text-dim); }
.jm-target--add { border-style: dashed; color: var(--blue-hi, var(--blue)); }
.jm-target:focus-visible, .jm-strip button:focus-visible, .wp-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.jm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--tint-blue, rgba(77,130,255,.10)); color: var(--text-mid, var(--text-dim)); font-size: var(--fs-2); }
.jm-strip b { color: var(--text); }
.jm-strip .jm-strip-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.jm-strip a, .jm-strip button { font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; color: var(--blue-hi, var(--blue)); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.jm-strip button.is-danger { color: var(--danger, #E5484D); }
.jm-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--danger, #E5484D); border-radius: 12px; font-size: var(--fs-2); }

/* Work profile (Account → Work profile). */
.wp-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.wp-head h1 { margin: 0; }
.wp-head p { margin: 4px 0 0; color: var(--text-dim); font-size: var(--fs-2); }
.wp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.wp-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; min-width: 0; margin-bottom: 14px; }
.wp-grid .wp-card { margin-bottom: 0; }
.wp-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.wp-card-head h2 { margin: 0; font-size: var(--fs-4); }
.wp-card-head span { color: var(--text-dim); font-size: var(--fs-2); }
.wp-years { font-family: "Sora", sans-serif; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.wp-years small { font: 600 var(--fs-3) "Plus Jakarta Sans", sans-serif; color: var(--text-dim); margin-left: 6px; }
.wp-note { margin: 0; color: var(--text-dim); font-size: var(--fs-2); }
.wp-field { display: grid; gap: 5px; font-size: var(--fs-2); color: var(--text-dim); font-weight: 600; }
.wp-input { font: 500 var(--fs-3) "Plus Jakarta Sans", sans-serif; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--tint-neutral); color: var(--text); min-width: 0; width: 100%; }
.wp-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-chip { font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-dim); cursor: pointer; }
.wp-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--tint-blue, rgba(77,130,255,.12)); color: var(--blue-hi, var(--blue)); }
.wp-chip--tag { cursor: default; color: var(--text); background: var(--tint-neutral); display: inline-flex; align-items: center; gap: 6px; }
.wp-chip--tag button { border: 0; background: none; color: var(--text-dim); cursor: pointer; padding: 0 2px; font-size: 1rem; line-height: 1; }
.wp-add { display: flex; gap: 6px; }
.wp-add .wp-input { max-width: 260px; }
.wp-role { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--border); }
.wp-role:first-child { border-top: 0; padding-top: 0; }
.wp-role .wp-current { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--text-dim); margin-top: 4px; font-weight: 500; }
.wp-role .wp-len { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--text-dim); margin-top: -2px; }
.wp-link { font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; color: var(--blue-hi, var(--blue)); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.wp-remove { font-size: var(--fs-2); color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.wp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.wp-msg { font-size: var(--fs-2); color: var(--text-dim); }
.wp-msg.is-ok { color: var(--green-text); }
.wp-msg.is-err { color: var(--danger, #E5484D); }
@media (max-width: 720px) {
  .wp-grid { grid-template-columns: 1fr; }
  .wp-role { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wp-role .wp-field:first-child { grid-column: 1 / -1; }
}
.wp-present { display: flex; align-items: center; color: var(--text); }
.wp-role .wp-remove { margin-top: 22px; }

/* Resume Score section (Oct 2026): the full report in place, earlier scores a tab away, and the
   jobs the resume fits. The report itself is the score page in a frame. */
.rs-recheck { padding: 10px 18px; font-size: var(--fs-3); }
.rs-new { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.10); font-size: var(--fs-3); }
.rs-new b { font-family: "Sora", sans-serif; font-size: var(--fs-4); color: var(--green-text); }
.rs-new span { flex: 1 1 320px; color: var(--text-mid, var(--text)); }
.rs-new.is-down { border-color: var(--tint-gold-line); background: var(--tint-gold); }
.rs-new.is-down b { color: var(--gold-text); }
.jm-link { font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; color: var(--blue-hi, var(--blue)); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jm-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rs-jobs-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 20px 24px; margin-bottom: 14px; border-radius: 14px; background: #0A1026; color: #fff; text-decoration: none; border: 1px solid transparent; }
:root:not([data-theme="light"]) .rs-jobs-banner { background: #141C3A; border-color: var(--tint-gold-line); }
.rs-jobs-banner > div { flex: 1 1 360px; display: grid; gap: 6px; }
.rs-jobs-banner strong { font-family: "Sora", sans-serif; font-size: 1.25rem; line-height: 1.3; color: #fff; }
.rs-jobs-banner span { font-size: var(--fs-3); color: #C4CDEA; }
.rs-jobs-banner .btn { flex: none; color: #3A2600; }
.rs-jobs-banner .rs-kicker { font: 700 var(--fs-1) "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: #FFD56A; }
.rs-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #FFD56A; animation: rs-spin .9s linear infinite; flex: none; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rs-spin { animation: none; } }
.jm-stat-v.is-up { color: var(--green-text); }
.jm-stat-v.is-down { color: var(--red-text); }
.rs-panel { background: var(--surface); }
.rs-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 12px 16px; font-size: var(--fs-2); color: var(--text-dim); border-bottom: 1px solid var(--border); }
.rs-role:empty { display: none; }
/* A past score opened from the list: tinted and labelled, so it never reads as the latest. */
.rs-line.is-past { align-items: center; background: var(--tint-gold); border-left: 3px solid var(--gold-text); color: var(--text); font-size: var(--fs-3); }
.rs-line.is-past b { color: var(--gold-text); }
.rs-back { padding: 7px 14px; font-size: var(--fs-2); }
.rs-frame { display: block; width: 100%; height: 900px; border: 0; background: transparent; }
/* The report folds to its snapshot; this opens the rest. */
.rs-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: var(--tint-neutral); color: var(--blue-hi, var(--blue)); font: 700 var(--fs-3) "Plus Jakarta Sans", sans-serif; cursor: pointer; }
.rs-more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.rs-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.rs-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-more:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* While a new score is being set up or awaited, it is the only thing on the tab. */
.rs-scoring #rs-new, .rs-scoring #rs-jobs-banner, .rs-scoring #resume-score-section, .rs-scoring #rs-jobs-card { display: none; }
/* Resume Rebuilding: while the builder is open it is the only thing on the tab, at full width. */
.rb-building .dash-main-inner { width: 100%; }
.rb-building .dash-main-inner > :not(.jm-head):not(#rb-host) { display: none; }
/* The title row keeps the button's height while it is hidden, so "Resume Rebuilding" sits
   exactly where "Resume Score" and "Job Match" sit. */
.rb-close:not(.is-on) { visibility: hidden; }
.rb-frame { display: block; width: 100%; min-height: 520px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
/* Mock Interview (Oct 2026): setup, room and report framed the same way. */
.mi-running .dash-main-inner { width: 100%; }
.mi-running .dash-main-inner > :not(.jm-head):not(#mi-host) { display: none; }
.sess-score.mi-score { width: auto; min-width: 46px; text-align: left; color: var(--gold-text); }
.sess-score.mi-score small { font-size: .78em; font-weight: 600; color: var(--text-dim); margin-left: 1px; }
#mi-stats + .rb-start-dash { margin-top: 28px; }
#mi-cost a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* On a phone the row wraps; a dash on its own line says nothing the note does not. */
@media (max-width: 600px) { .sess-score.mi-score.is-empty { display: none; } }
.mi-focus { margin-top: 22px; padding: 20px 22px; border: 1px solid var(--tint-gold-line); border-radius: 14px; background: var(--tint-gold); }
.mi-focus .rs-kicker { font: 700 var(--fs-1) "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.mi-focus h2 { margin: 6px 0 10px; font-size: 1.15rem; }
.mi-focus ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--text); }
/* Salary Negotiation: the Resume Score tab's "Ready for you" card, under the interview choices. */
.rs-jobs-banner.mi-salary { margin: 16px 0 0; }

/* Start a rebuild: three ways in, the way the public Resume Rebuilding page offers them. */
.rb-start-dash .sub-header { margin-top: 4px; }
.rb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rb-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 14px; align-items: center; min-height: 84px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-hi); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s; }
.rb-opt:hover { border-color: var(--tint-gold-line); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.rb-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.rb-opt.is-lead { border-color: var(--tint-gold-line); background: var(--tint-gold); }
.rb-opt-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.rb-opt.is-lead .rb-opt-ico { background: var(--grad-gold); border-color: transparent; }
.rb-opt-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rb-opt.is-lead .rb-opt-ico svg { stroke: #3A2600; }
.rb-opt-txt b { display: block; font-family: "Sora", sans-serif; font-size: 1rem; }
.rb-opt-txt small { display: block; margin-top: 3px; font-size: var(--fs-2); line-height: 1.45; color: var(--text-dim); }
.rb-opt-go { width: 18px; height: 18px; fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-cost { margin: 12px 0 0; font-size: var(--fs-3); color: var(--text-dim); }
.rb-cost b { color: var(--text); }

/* Next step after a rebuild: the jobs it fits. */
.rb-jobs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 28px; padding: 24px 26px; border-radius: 18px; border: 1px solid var(--tint-gold-line); background: radial-gradient(120% 140% at 100% 0%, rgba(46,107,255,.16), transparent 55%), linear-gradient(135deg, var(--tint-gold), transparent 70%), var(--surface); }
.rb-jobs .rs-kicker { font: 700 var(--fs-1) "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.rb-jobs h2 { margin: 6px 0 6px; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }
.rb-jobs p { margin: 0 0 16px; font-size: var(--fs-3); line-height: 1.6; color: var(--text-mid); max-width: 60ch; }
.rb-jobs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rb-jobs-act .rs-spin { width: 16px; height: 16px; border-width: 2px; border-color: rgba(58,38,0,.25); border-top-color: #3A2600; }
.rb-jobs-msg { font-size: var(--fs-2); color: var(--red-text, #F4595B); }
.rb-jobs-art { display: grid; justify-items: center; gap: 12px; }
.rb-jobs-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--grad-gold); box-shadow: 0 10px 28px rgba(240,165,0,.3); }
.rb-jobs-ico svg { width: 30px; height: 30px; fill: none; stroke: #3A2600; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rb-jobs-art ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-jobs-art li { padding: 4px 12px; border-radius: 999px; font-size: var(--fs-1); font-weight: 700; text-align: center; border: 1px solid var(--border); background: var(--surface); }
.rb-jobs-art .is-strong { color: var(--green-text); border-color: rgba(34,197,94,.35); }
.rb-jobs-art .is-good { color: var(--gold-text); border-color: var(--tint-gold-line); }
.rb-jobs-art .is-stretch { color: var(--text-dim); }

/* History rows: a document mark instead of a version number. */
.sess-score.rb-doc { display: grid; place-items: center; }
.sess-score.rb-doc svg { width: 20px; height: 20px; fill: none; stroke: var(--gold-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .rb-jobs { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .rb-jobs-art { display: none; }
  /* On a phone the row wraps, so an unseen button would only leave a gap. */
  .rb-close:not(.is-on), .sess-score.rb-doc { display: none; }
}
.rs-note { margin: 0; padding: 12px 16px 0; font-size: var(--fs-2); color: var(--text-dim); }
.rs-delta { flex: none; font: 700 var(--fs-1) "JetBrains Mono", monospace; padding: 3px 8px; border-radius: 6px; background: var(--tint-neutral); color: var(--text-dim); }
.rs-delta.is-up { background: rgba(34,197,94,.12); color: var(--green-text); }
.rs-delta.is-down { background: rgba(244,89,91,.12); color: var(--red-text); }
.rs-open { background: none; border: 0; cursor: pointer; font-family: inherit; }
.rs-job { grid-template-columns: 44px minmax(0, 1fr); }
.rs-job em { font-style: normal; font-size: var(--fs-2); color: var(--text-mid, var(--text)); white-space: normal !important; }

/* Scoring a resume inside the dashboard (Oct 2026): the form, then the wait, in one panel. */
.rs-intake { margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.rs-intake form { display: grid; gap: 14px; }
.rs-intake-head h2 { margin: 0 0 4px; font-size: var(--fs-5); }
.rs-intake-head h2:focus { outline: none; }
.rs-intake-head p { margin: 0; font-size: var(--fs-3); color: var(--text-dim); }
.rs-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rs-src legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.rs-src-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.rs-src-opt:has(input:checked) { border-color: var(--tint-gold-line); background: var(--tint-gold); }
.rs-src-opt input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--gold-text); }
.rs-src-opt span { display: grid; gap: 2px; min-width: 0; }
.rs-src-opt b { font-size: var(--fs-3); color: var(--text); }
.rs-src-opt small { font-size: var(--fs-2); color: var(--text-dim); }
.rs-new-resume { display: grid; gap: 10px; justify-items: start; }
.rs-new-resume > * { justify-self: stretch; }
.rs-new-resume > .jm-link { justify-self: start; }
.rs-drop { position: relative; }
.rs-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.rs-drop-box { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--tint-neutral); text-align: center; cursor: pointer; font-size: var(--fs-3); color: var(--text); }
.rs-drop-box svg { width: 26px; height: 26px; color: var(--gold-text); }
.rs-drop-box small { font-size: var(--fs-2); color: var(--text-dim); }
.rs-drop-box u { color: var(--blue-hi, var(--blue)); text-underline-offset: 3px; }
.rs-file:focus-visible + .rs-drop-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.rs-drop.is-drag .rs-drop-box, .rs-drop.has-file .rs-drop-box { border-color: var(--gold-text); border-style: solid; }
.rs-drop.has-file #rs-drop-text { font-weight: 700; overflow-wrap: anywhere; }
.rs-group { margin: 4px 0 -4px; font-size: var(--fs-3); font-weight: 700; color: var(--text); }
.rs-opt { font-weight: 600; color: var(--blue-hi, var(--blue)); }
.rs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rs-fields #rs-custom-wrap { grid-column: 1 / -1; }
.rs-intake textarea.wp-input { resize: vertical; min-height: 96px; line-height: 1.5; }
.rs-hint, .rs-legal { margin: -6px 0 0; font-size: var(--fs-2); color: var(--text-dim); }
.rs-legal { margin: 0; }
.rs-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rs-intake-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rs-intake-actions .btn { padding: 11px 20px; font-size: var(--fs-3); }
.rs-msg { margin: 0; font-size: var(--fs-3); color: var(--text-dim); }
.rs-msg:empty { display: none; }
.rs-msg.is-error { color: var(--red-text); font-weight: 600; }
.rs-progress { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px 20px; align-items: center; }
.rs-progress-copy h2 { margin: 0 0 4px; font-size: var(--fs-5); }
.rs-progress-copy p { margin: 0; font-size: var(--fs-3); color: var(--text-dim); }
.rs-progress-copy .btn { margin-top: 12px; padding: 10px 18px; font-size: var(--fs-3); }
.rs-progress.is-error .rs-progress-copy h2 { color: var(--red-text); }
.rs-ring { position: relative; width: 64px; height: 64px; }
.rs-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.rs-ring circle { fill: none; stroke-width: 5; }
.rs-ring .trk { stroke: var(--border); }
.rs-ring .fill { stroke: var(--gold-text); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0)); transition: stroke-dashoffset .6s ease; }
.rs-ring .spin { stroke: var(--gold-text); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 93; opacity: .7; transform-origin: 32px 32px; animation: rs-spin 1.4s linear infinite; }
.rs-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 var(--fs-2) "JetBrains Mono", monospace; color: var(--text); }
.rs-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: var(--fs-2); color: var(--text-dim); }
.rs-steps .rs-dot { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font: 700 var(--fs-1) "JetBrains Mono", monospace; }
.rs-steps .rs-dot svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rs-steps li.done { color: var(--green-text); border-color: rgba(34,197,94,.3); }
.rs-steps li.done .rs-dot { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12); }
.rs-steps li.active { color: var(--text); border-color: var(--tint-gold-line); }
.rs-steps li.active .rs-dot { border-color: var(--gold-text); color: var(--gold-text); }
.rs-progress.is-error .rs-ring, .rs-progress.is-error .rs-steps { display: none; }
.rs-progress.is-error { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .rs-ring .fill { transition: none; } .rs-ring .spin { animation: none; } }

/* The top-bar chip: a score running, ready or failed, seen from another tab. Quiet like the
   credit pill; gold while scoring, green when ready, red when it did not finish. */
.rs-chip { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--tint-neutral); color: var(--text); font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; white-space: nowrap; cursor: pointer; }
.rs-chip:hover { border-color: var(--border-hi); }
.rs-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rs-chip-ring { position: relative; flex: none; width: 20px; height: 20px; }
.rs-chip-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.rs-chip-ring circle { fill: none; stroke-width: 2.6; }
.rs-chip-ring .trk { stroke: var(--border); }
.rs-chip-ring .fill { stroke: var(--gold-text); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0)); transition: stroke-dashoffset .6s ease; }
.rs-chip-ring .spin { stroke: var(--gold-text); stroke-linecap: round; stroke-dasharray: 9 91; opacity: .5; transform-origin: 10px 10px; animation: rs-spin 1.4s linear infinite; }
.rs-chip-ring b { display: none; }
.rs-chip-long { overflow: hidden; text-overflow: ellipsis; }
.rs-chip-short { display: none; font-family: "JetBrains Mono", monospace; font-weight: 700; }
.rs-chip.is-ready { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.10); color: var(--green-text); }
.rs-chip.is-ready .fill { stroke: var(--green-text); }
.rs-chip.is-ready .spin, .rs-chip.is-failed svg { display: none; }
.rs-chip.is-failed { border-color: rgba(244,89,91,.4); background: rgba(244,89,91,.10); color: var(--red-text); }
.rs-chip.is-failed .rs-chip-ring b { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; font: 800 var(--fs-1)/1 "JetBrains Mono", monospace; }
@media (prefers-reduced-motion: reduce) { .rs-chip-ring .spin { display: none; } .rs-chip-ring .fill { transition: none; } }
@media (max-width: 599px) {
  .rs-chip { padding: 0 10px 0 8px; }
  .rs-chip-long { display: none; }
  .rs-chip-short { display: inline; }
}
/* Below 360px the top bar has room for the ring alone; its label still names the state. */
@media (max-width: 359px) {
  .rs-chip { padding: 0 7px; }
  .rs-chip-short { display: none; }
}
.rs-progress-copy h2:focus, .rs-new:focus { outline: none; }
@media (max-width: 640px) {
  .rs-intake { padding: 18px 16px; }
  /* iOS zooms into any field under 16px when it is tapped. */
  .rs-intake .wp-input { font-size: 16px; }
  .rs-src, .rs-fields { grid-template-columns: minmax(0, 1fr); }
  .rs-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Job Match: a job opened in place, what is new since the last search, and the menu badge. */
.dash-nav-badge { margin-left: auto; font: 700 var(--fs-1) "JetBrains Mono", monospace; padding: 2px 8px; border-radius: 999px; background: var(--blue); color: #fff; white-space: nowrap; }
.jm-item { border-top: 1px solid var(--border); }
.jm-item > .jm-row { border-top: 0; }
.jm-item.is-open { background: var(--tint-neutral); }
.jm-flags { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.jm-new { font: 700 var(--fs-1) "JetBrains Mono", monospace; letter-spacing: .03em; padding: 4px 8px; border-radius: 999px; background: var(--blue); color: #fff; white-space: nowrap; }
.jm-new.is-seen { background: var(--tint-neutral); color: var(--text-dim); border: 1px solid var(--border); }
.jm-new.is-closed { background: rgba(244,89,91,.12); color: var(--red-text); }
.jm-detail { display: grid; gap: 14px; padding: 4px 16px 18px 72px; }
.jm-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: var(--fs-2); color: var(--text-dim); }
.jm-band { font-weight: 700; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-1); }
.jm-band.is-strong { background: rgba(34,197,94,.12); color: var(--green-text); }
.jm-band.is-good { background: var(--tint-blue); color: var(--blue-hi, var(--blue)); }
.jm-band.is-stretch { background: var(--tint-gold); color: var(--gold-text); }
.jm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.jm-sub { font-size: var(--fs-2); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.jm-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.jm-sk { font-size: var(--fs-1); font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.jm-sk.is-have { background: rgba(34,197,94,.12); color: var(--green-text); }
.jm-sk.is-close { background: var(--tint-gold); color: var(--gold-text); }
.jm-sk.is-miss { background: rgba(244,89,91,.12); color: var(--red-text); }
.jm-legend { margin: 8px 0 0; font-size: var(--fs-1); color: var(--text-dim); }
.jm-f { display: grid; grid-template-columns: 90px minmax(0, 1fr) 30px; gap: 10px; align-items: center; font-size: var(--fs-2); margin-bottom: 7px; }
.jm-f b { font-family: "JetBrains Mono", monospace; text-align: right; }
.jm-bar { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.jm-bar i { display: block; height: 100%; background: var(--green-text); }
.jm-bar i.is-lo { background: var(--gold); }
.jm-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: var(--fs-2); line-height: 1.55; }
.jm-why > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.jm-why b { display: block; color: var(--text); margin-bottom: 2px; }
.jm-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-detail-actions .jm-btn { padding: 10px 14px; min-height: 40px; }
.jm-btn--gold { background: var(--gold); border-color: var(--gold); color: #3A2600; }
.jm-pm { display: grid; gap: 8px; max-width: 520px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.jm-pm-round { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); font-weight: 600; }
.jm-pm-round select { flex: 1; min-height: 40px; border: 1px solid var(--border-hi); border-radius: 8px; padding: 0 10px; font: inherit; background: var(--surface); color: var(--text); }
.jm-pm-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); }
.jm-pm-opt:hover { border-color: var(--blue); }
.jm-pm-opt span { font-size: var(--fs-2); color: var(--text-dim); }
.jm-pm-opt.is-off { opacity: .65; }
.jm-compare { display: grid; gap: 10px; padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.jm-compare-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.jm-compare-h b { font-family: "Sora", sans-serif; font-size: var(--fs-4); color: var(--text); }
.jm-compare-h span { font-size: var(--fs-2); color: var(--text-dim); }
.jm-compare-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-compare-chips .jm-chip { text-transform: none; letter-spacing: 0; }
.jm-compare p { margin: 0; font-size: var(--fs-2); color: var(--text-dim); }
.jm-seg { display: inline-flex; border: 1px solid var(--border-hi); border-radius: 10px; overflow: hidden; }
.jm-seg button { min-height: 36px; padding: 0 12px; border: 0; background: transparent; font: 600 var(--fs-2) "Plus Jakarta Sans", sans-serif; color: var(--text-dim); cursor: pointer; }
.jm-seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.jm-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.jm-note { margin: 0; padding: 12px 16px 4px; font-size: var(--fs-2); color: var(--text-dim); }
.jm-pastrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); }
.jm-pastrow-main strong { display: block; font-size: var(--fs-3); }
.jm-pastrow-main span { color: var(--text-dim); font-size: var(--fs-2); }
.jm-dropped { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 0 2px; font-size: var(--fs-2); }
.jm-dropped > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jm-dropped .jm-sub { margin: 0; }
.jm-muted { color: var(--text-dim); }
@media (max-width: 720px) {
  .jm-detail { padding: 4px 14px 16px; }
  .jm-cols, .jm-why { grid-template-columns: minmax(0, 1fr); }
  .jm-flags { grid-column: 2; justify-content: flex-start; }
  .jm-pastrow { grid-template-columns: minmax(0, 1fr) auto; }
  .jm-pastrow .jm-flags { grid-column: 1; }
}