/* ============================================================
   BEEP — BFSI Employment Exchange Portal
   Enterprise service UI for structured jobs and apprenticeships.
   The visual system is intentionally restrained and institutional:
     - Neutral surfaces and clear blue action hierarchy
     - Compact controls and evidence-led status presentation
     - Strong accessibility focus states and responsive layouts
     - Existing p-*, jp-*, emp-*, b-* and cr-* class contracts retained
   ============================================================ */

/* ── Typography ──
   IBM Plex Sans and Plus Jakarta Sans are loaded by index.php. */

:root {
  /* Enterprise BFSI/MNC palette. Gold is retained only as a restrained accent;
     primary actions use an institutional blue so the product feels authoritative. */
  --c-brand:        #0b5cab;
  --c-brand-hover:  #084b8d;
  --c-brand-active: #063b70;
  --c-brand-glow:   rgba(11, 92, 171, 0.14);
  --c-accent:       #c69214;

  /* Structural surfaces */
  --c-surface:      #0b1f33;
  --c-surface-2:    #123452;
  --c-surface-3:    #1b4667;
  --c-text-inv:     #ffffff;
  --c-text-inv-2:   rgba(255,255,255,0.78);
  --c-text-inv-3:   rgba(255,255,255,0.58);
  --c-bg:           #f4f7fa;
  --c-layer:        #ffffff;
  --c-field:        #f8fafc;

  /* Text and borders */
  --c-ink:          #102a43;
  --c-ink-2:        #243b53;
  --c-muted:        #52606d;
  --c-hint:         #829ab1;
  --c-line:         #d9e2ec;
  --c-line-2:       #bcccdc;

  /* Functional status */
  --c-green:        #20744a; --c-green-bg: #e8f5ee;
  --c-amber:        #9a6700; --c-amber-bg: #fff7db;
  --c-red:          #b42318; --c-red-bg:   #fef0ef;
  --c-blue:         #005b96; --c-blue-bg:  #eaf3fb;

  /* Quiet enterprise geometry: rectangular controls, compact cards, pill status only. */
  --r-pill:         999px;
  --r-lg:           10px;
  --r-md:           8px;
  --r-sm:           6px;
  --r-xs:           4px;

  /* Low-contrast elevation; no promotional glow. */
  --shadow-cta:     0 1px 2px rgba(16,42,67,.12);
  --shadow-card:    0 1px 2px rgba(16,42,67,.06);
  --shadow-lg:      0 8px 24px rgba(16,42,67,.10);
  --shadow-nav:     0 1px 3px rgba(16,42,67,.08);

  --t-instant:      120ms;
  --t-fast:         180ms;
  --t-normal:       240ms;

  /* IBM Plex Sans is already loaded by the entry point and reads as institutional UI. */
  --font: 'IBM Plex Sans', 'Plus Jakarta Sans', ui-sans-serif, system-ui,
          -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* 4px-based spacing scale while preserving the existing variable names. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;

  /* Legacy aliases — existing modules continue to resolve without a rewrite. */
  --jp-primary:     var(--c-blue);
  --jp-primary-600: #004a7a;
  --jp-primary-500: #2479ad;
  --jp-primary-700: #003b62;
  --jp-primary-050: var(--c-blue-bg);
  --jp-accent:      var(--c-brand);
  --jp-accent-600:  var(--c-brand-hover);
  --jp-ink:         var(--c-ink);
  --jp-ink-2:       var(--c-ink-2);
  --jp-muted:       var(--c-muted);
  --jp-line:        var(--c-line);
  --jp-line-2:      var(--c-line-2);
  --jp-bg:          var(--c-bg);
  --jp-layer:       var(--c-layer);
  --jp-card:        var(--c-layer);
  --jp-field:       var(--c-field);
  --jp-green:       var(--c-green);  --jp-green-bg: var(--c-green-bg);
  --jp-amber:       var(--c-amber);  --jp-amber-bg: var(--c-amber-bg);
  --jp-red:         var(--c-red);    --jp-red-bg:   var(--c-red-bg);
  --jp-blue:        var(--c-blue);   --jp-blue-bg:  var(--c-blue-bg);
  --jp-radius:      var(--r-md);
  --jp-radius-sm:   var(--r-sm);
  --jp-shadow:      var(--shadow-card);
  --jp-shadow-lg:   var(--shadow-lg);
  --jp-font:        var(--font);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: 16px;           /* font.size.base */
  font-weight: 400;          /* font.weight.base */
  line-height: 24px;         /* font.lineHeight.base */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: var(--r-xs); }

/* ── Loading ── */
.p-loading { padding: 48px; text-align: center; color: var(--c-muted); font-size: 14px; }
.p-loading::before {
  content: ''; display: block; width: 28px; height: 28px; margin: 0 auto 14px;
  border: 2px solid var(--c-line); border-top-color: var(--c-brand);
  border-radius: 50%; animation: jpspin .7s linear infinite;
}
@keyframes jpspin { to { transform: rotate(360deg); } }

/* ── Message/alert strip ── */
.p-msg { padding: var(--sp-5) var(--sp-7); border-radius: var(--r-sm); font-size: 14px; margin: var(--sp-5) 0; border-left: 3px solid transparent; }
.p-msg.ok  { background: var(--c-green-bg); color: #0d5c2a; border-left-color: var(--c-green); }
.p-msg.err { background: var(--c-red-bg);   color: #8a0f1f; border-left-color: var(--c-red); }

/* ============================================================
   APP SHELL — dark navy, solid, Wellfound-inspired
   ============================================================ */
.jp-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); }

/* Navigation */
.jp-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-nav);
}
.jp-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--sp-7); height: 60px;
  display: flex; align-items: center; gap: var(--sp-5);
}

/* Brand mark: BFSI SSC logo image */
.jp-brand {
  display: flex; align-items: center; gap: var(--sp-5);
  cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.jp-brand-mark {
  height: 34px; width: auto; display: block;
}
.jp-brand-wordmark {
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--c-text-inv); line-height: 1;
}
.jp-brand-wordmark span { color: var(--c-brand); }
.jp-brand-sub { font-size: 11px; color: var(--c-text-inv-3); font-weight: 400; }

/* Nav links */
.jp-navlinks {
  display: flex; align-items: center; gap: 0; flex: 1; margin-left: var(--sp-7);
}
.jp-navlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-6); height: 60px;
  font-size: 14px; font-weight: 500; color: var(--c-text-inv-2);
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; cursor: pointer; font-family: inherit;
  transition: color var(--t-instant), background var(--t-instant);
  white-space: nowrap;
}
.jp-navlink:hover { color: var(--c-text-inv); background: rgba(255,255,255,.05); text-decoration: none; }
.jp-navlink.active { color: var(--c-text-inv); border-bottom-color: var(--c-brand); }
.jp-navlink i { font-size: 13px; }

.jp-nav-right { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.jp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-surface-3); border: 1.5px solid rgba(255,255,255,.18);
  color: var(--c-text-inv); display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}

/* ── Layout ── */
.p-main, .jp-container { max-width: 1280px; margin: 0 auto; padding: 40px var(--sp-7) 80px; width: 100%; }

/* Typography scale */
.jp-page-title { font-size: 28px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; color: var(--c-ink); line-height: 1.25; }
.p-h1  { font-size: 28px; font-weight: 700; margin: 0 0 var(--sp-7); color: var(--c-ink); line-height: 1.25; letter-spacing: -.02em; }
.p-h2  { font-size: 20px; font-weight: 700; margin: 0 0 var(--sp-5); color: var(--c-ink); letter-spacing: -.01em; }
.p-h3  { font-size: 14px; font-weight: 600; margin: 0 0 var(--sp-2); color: var(--c-ink); }
.p-muted   { color: var(--c-muted); font-size: 14px; line-height: 1.5; }
.p-fineprint { font-size: 12px; color: var(--c-muted); line-height: 1.5; }

/* ============================================================
   HERO — full-width dark surface, bold white type, brand glow
   ============================================================ */
.jp-hero {
  background: var(--c-surface);
  color: var(--c-text-inv);
  border-radius: var(--r-lg);
  padding: 56px 48px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
/* Ambient glow — a radial brand bleed from top-right */
.jp-hero::before {
  content: '';
  position: absolute; right: -80px; top: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(11,92,171,.18) 0%, transparent 65%);
  pointer-events: none;
}
/* Fine dot grid overlay (subtle texture, à la Wellfound) */
.jp-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size: 28px 28px;
}
.jp-hero > * { position: relative; z-index: 2; }

/* BFSI SSC logo in hero (top-left) */
.jp-hero-logo { height: 44px; width: auto; display: block; margin-bottom: 28px; filter: brightness(0) invert(1); opacity: .92; }

.jp-hero h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  margin: 0 0 16px; max-width: 760px; color: var(--c-text-inv);
}
.jp-hero h1 em { color: var(--c-brand); font-style: normal; }
.jp-hero p { font-size: 16px; opacity: .80; margin: 0 0 28px; max-width: 580px; line-height: 1.6; }

/* Hero search — white pill on dark */
.jp-hero-search {
  display: flex; align-items: center; gap: 0;
  background: var(--c-layer); border-radius: var(--r-pill);
  max-width: 620px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.jp-hero-search input {
  flex: 1; border: 0; outline: 0; padding: 15px 20px;
  font-size: 15px; font-family: inherit; color: var(--c-ink);
  background: transparent;
}
.jp-hero-search .p-btn, .jp-hero-search .jp-btn {
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  padding: 15px 24px;
}

.jp-hero-stats { display: flex; gap: 40px; margin-top: 36px; flex-wrap: wrap; }
.jp-hero-stat b { display: block; font-size: 26px; font-weight: 700; color: var(--c-text-inv); letter-spacing: -.02em; }
.jp-hero-stat span { font-size: 13px; color: var(--c-text-inv-2); margin-top: 2px; display: block; }

/* ── Trust bar (white surface below hero) ── */
.jp-trustbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) 32px; align-items: center;
  padding: var(--sp-6) 24px; margin: -16px 0 28px;
  background: var(--c-layer); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
}
.jp-trustbar .item { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--c-ink-2); font-weight: 500; }
.jp-trustbar .item i { color: var(--c-brand); font-size: 14px; }

/* ============================================================
   CARDS & GRID
   ============================================================ */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-7); }
.p-card {
  background: var(--c-layer); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--shadow-card); margin-bottom: var(--sp-7);
}
.p-row { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.p-row:last-child { border-bottom: 0; }
.p-label { color: var(--c-muted); font-size: 13px; }

/* Stat tile group — grid of 1px-separated tiles */
.jp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; margin-bottom: 28px;
  background: var(--c-line); border: 1px solid var(--c-line);
  border-radius: var(--r-md); overflow: hidden;
}
.jp-stat { background: var(--c-layer); padding: 22px 20px; }
.jp-stat .n { font-size: 32px; font-weight: 300; color: var(--c-ink); line-height: 1.1; letter-spacing: -.02em; }
.jp-stat .l { font-size: 13px; color: var(--c-muted); margin-top: var(--sp-2); }
.jp-stat .ic { float: right; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c-blue-bg); color: var(--c-blue); font-size: 16px; }

/* Progress meter */
.p-meter { height: 5px; background: var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.p-meter > span { display: block; height: 100%; background: var(--c-brand); border-radius: var(--r-pill); transition: width var(--t-normal); }

/* ============================================================
   BUTTONS (Wellfound-spec: all states, keyboard, pill radius)
   ============================================================ */
.p-btn, .jp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--c-brand); color: #0a0600;
  border: 1px solid transparent;
  padding: 11px 22px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; line-height: 1.2; letter-spacing: .01em;
  transition: background var(--t-instant), box-shadow var(--t-instant), transform var(--t-instant);
  box-shadow: var(--shadow-cta);
  text-decoration: none;
}
.p-btn:hover, .jp-btn:hover {
  background: var(--c-brand-hover); box-shadow: rgba(255,255,255,.18) 0px 1px 0px 0px inset, rgba(11,92,171,.55) 0px 10px 24px -6px;
  text-decoration: none;
}
.p-btn:active, .jp-btn:active { background: var(--c-brand-active); transform: none; box-shadow: none; }
.p-btn:focus-visible, .jp-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.p-btn:disabled, .jp-btn:disabled { background: #d9d9d9; color: #8a8a8a; box-shadow: none; cursor: not-allowed; }

/* Ghost: transparent + brand border */
.p-btn-ghost { background: transparent; color: var(--c-blue); border-color: var(--c-line-2); box-shadow: none; }
.p-btn-ghost:hover { background: var(--c-blue-bg); box-shadow: none; }

/* Outline: brand border */
.jp-btn-outline { background: transparent; border: 1.5px solid var(--c-brand); color: var(--c-brand); box-shadow: none; }
.jp-btn-outline:hover { background: rgba(11,92,171,.07); box-shadow: none; }

/* Dark/navy button (for use on light surfaces) */
.p-btn-dark, .jp-btn-dark { background: var(--c-surface); color: var(--c-text-inv); box-shadow: var(--shadow-card); border-color: transparent; }
.p-btn-dark:hover { background: var(--c-surface-2); }

/* Danger */
.p-btn-danger { background: var(--c-red); color: #fff; box-shadow: none; }
.p-btn-danger:hover { background: #a0101f; }

/* Link button */
.p-linkbtn { border: 0; background: transparent; color: var(--c-blue); font-size: 14px; font-weight: 500; cursor: pointer; padding: 4px 2px; font-family: inherit; text-decoration: none; }
.p-linkbtn:hover { text-decoration: underline; }
.p-linkbtn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 3px; }

/* ============================================================
   BADGES / TAGS (Wellfound: pill, tight padding)
   ============================================================ */
.p-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.b-green { background: var(--c-green-bg); color: #0d5c2a; }
.b-amber { background: var(--c-amber-bg); color: #6a4800; }
.b-red   { background: var(--c-red-bg);   color: #8a0f1f; }
.b-blue  { background: var(--c-blue-bg);  color: var(--c-blue); }
.b-gray  { background: #ebebeb; color: #444; }

/* ============================================================
   OPPORTUNITY CARDS (job board tiles)
   ============================================================ */
.jp-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-7); }
.jp-oppcard {
  background: var(--c-layer); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--sp-7);
  cursor: pointer; position: relative;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.jp-oppcard:hover { border-color: var(--c-brand); box-shadow: var(--shadow-lg); transform: none; }
.jp-oppcard:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* Accent left-border on hover */
.jp-oppcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; border-radius: var(--r-lg) 0 0 var(--r-lg); transition: background var(--t-fast); }
.jp-oppcard:hover::before { background: var(--c-brand); }

.jp-oppcard-top { display: flex; gap: var(--sp-5); align-items: flex-start; }
.jp-oppcard-logo { width: 46px; height: 46px; border-radius: var(--r-sm); flex: 0 0 auto; display: grid; place-items: center; background: var(--c-blue-bg); color: var(--c-blue); font-size: 18px; font-weight: 700; }
.jp-oppcard-logo.type-apprenticeship { background: #eef4f8; color: #0b1f33; }
.jp-oppcard-logo.type-job { background: var(--c-blue-bg); color: var(--c-blue); }
.jp-oppcard-title { font-size: 16px; font-weight: 700; color: var(--c-ink); line-height: 1.35; letter-spacing: -.01em; }
.jp-oppcard-emp { font-size: 13px; color: var(--c-muted); margin-top: 2px; }

/* Chips */
.jp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.jp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: #f0f1f4; color: var(--c-ink-2); border: 1px solid var(--c-line); transition: background var(--t-instant); }
.jp-chip i { font-size: 10px; color: var(--c-hint); }
.jp-chip.chip-apprenticeship { background: #eef4f8; color: #0b1f33; border-color: #c8ddea; }
.jp-chip.chip-job { background: var(--c-blue-bg); color: var(--c-blue); border-color: #c0d4ff; }

.jp-oppcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.jp-fee-free { color: var(--c-green); font-weight: 700; font-size: 13px; }
.jp-fee-paid { color: var(--c-ink); font-weight: 700; font-size: 13px; }
.jp-save { border: 0; background: transparent; color: var(--c-hint); cursor: pointer; font-size: 16px; padding: var(--sp-2); border-radius: 50%; transition: background var(--t-instant), color var(--t-instant); }
.jp-save:hover { background: var(--c-line); color: var(--c-red); }
.jp-save.saved { color: var(--c-red); }
.jp-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-blue); }

/* ============================================================
   FILTERS BAR
   ============================================================ */
.jp-filters { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; margin-bottom: 24px; }
.jp-search-inline { position: relative; flex: 1; min-width: 240px; }
.jp-search-inline i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-hint); font-size: 14px; }
.jp-search-inline input {
  width: 100%; padding: 11px 14px 11px 40px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  font-size: 14px; font-family: inherit; background: var(--c-layer);
  color: var(--c-ink); outline: none;
  transition: border-color var(--t-instant), box-shadow var(--t-instant);
}
.jp-search-inline input:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(11,92,171,.18); }
.jp-select {
  padding: 11px 16px; border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  font-size: 14px; background: var(--c-layer); font-family: inherit; color: var(--c-ink-2);
  outline: none; cursor: pointer;
  transition: border-color var(--t-instant);
}
.jp-select:focus { border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(11,92,171,.18); }

/* ============================================================
   FORMS (Wellfound-style: rounded fields, brand focus ring)
   ============================================================ */
.cr-form-label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: var(--sp-3); letter-spacing: .01em; }
.cr-form-input {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  font-size: 14px; font-family: inherit; background: var(--c-field);
  color: var(--c-ink); outline: none;
  transition: border-color var(--t-instant), background var(--t-instant), box-shadow var(--t-instant);
}
.cr-form-input:hover { border-color: var(--c-line-2); }
.cr-form-input:focus { border-color: var(--c-brand); background: var(--c-layer); box-shadow: 0 0 0 3px rgba(11,92,171,.18); }
.cr-form-input::placeholder { color: var(--c-hint); }
textarea.cr-form-input { resize: vertical; min-height: 96px; }
.cr-form-input:disabled { background: var(--c-field); opacity: .55; cursor: not-allowed; }
.w-100 { width: 100%; }
.mt-2 { margin-top: var(--sp-5); }
.mt-3 { margin-top: var(--sp-7); }

/* ============================================================
   TABLES (data-dense, clean header)
   ============================================================ */
.emp-table, .jp-table { width: 100%; border-collapse: collapse; background: var(--c-layer); }
.emp-table th, .emp-table td,
.jp-table th, .jp-table td { text-align: left; padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--c-line); font-size: 14px; }
.emp-table th, .jp-table th { color: var(--c-muted); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; background: var(--c-field); border-bottom: 1px solid var(--c-line-2); }
.emp-table tbody tr:hover, .jp-table tbody tr:hover { background: var(--c-blue-bg); }

/* ============================================================
   AUTH SCREEN (split-feeling card, Wellfound-style)
   ============================================================ */
.p-auth-wrap { max-width: 460px; margin: 64px auto; }
.p-auth-card { padding: 44px 40px; background: var(--c-layer); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.p-auth-head { text-align: center; margin-bottom: 28px; }
.p-auth-icon {
  width: 52px; height: 52px; border-radius: var(--r-lg); margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--c-surface); color: var(--c-brand); font-size: 22px;
  box-shadow: 0 0 0 1px rgba(11,92,171,.35);
}
.p-auth-head .jp-brand-logo-auth { height: 36px; margin: 0 auto 20px; display: block; }

/* Role toggle — pill switch */
.p-role-toggle {
  display: flex; gap: 0; padding: 4px; border-radius: var(--r-pill);
  background: var(--c-field); margin-bottom: 24px;
  border: 1.5px solid var(--c-line);
}
.p-role-toggle button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  border: 0; background: transparent; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; color: var(--c-muted); cursor: pointer; font-family: inherit;
  transition: background var(--t-instant), color var(--t-instant), box-shadow var(--t-instant);
}
.p-role-toggle button.active { background: var(--c-layer); color: var(--c-ink); box-shadow: var(--shadow-card); }
.p-role-toggle button:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* Sign In / Register tabs — underline style */
.p-auth-tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1.5px solid var(--c-line); }
.p-auth-tabs button { flex: 1; border: 0; background: transparent; padding: 12px; font-size: 14px; font-weight: 600; color: var(--c-muted); cursor: pointer; font-family: inherit; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; transition: color var(--t-instant), border-color var(--t-instant); }
.p-auth-tabs button.active { color: var(--c-ink); border-bottom-color: var(--c-brand); }
.p-auth-tabs button:hover { color: var(--c-ink-2); }
.p-auth-tabs button:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

/* Google button */
.p-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-5); border: 1.5px solid var(--c-line); background: var(--c-layer); border-radius: var(--r-pill); padding: 12px; font-size: 14px; font-weight: 500; color: var(--c-ink-2); cursor: pointer; font-family: inherit; transition: background var(--t-instant), border-color var(--t-instant); }
.p-google-btn:hover { background: var(--c-field); border-color: var(--c-line-2); }
.p-google-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

.p-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--c-hint); font-size: 12px; }
.p-divider::before, .p-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }

/* Inline alerts */
.p-alert { display: flex; align-items: center; gap: var(--sp-3); padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; margin: 0 0 var(--sp-7); border-left: 3px solid transparent; }
.p-alert-error { background: var(--c-red-bg);  color: #8a0f1f; border-left-color: var(--c-red); }
.p-alert-info  { background: var(--c-blue-bg); color: var(--c-blue); border-left-color: var(--c-blue); }
.p-alert i { flex-shrink: 0; }

/* OTP input */
.p-otp-input { letter-spacing: 14px; text-align: center; font-size: 24px; font-weight: 700; border-radius: var(--r-md); }

/* ============================================================
   EMPLOYER WORKSPACE
   ============================================================ */
.emp-shell { max-width: 1280px; margin: 0 auto; padding: 40px var(--sp-7) 80px; }
.emp-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: 28px; }
.emp-org { display: flex; align-items: center; gap: var(--sp-7); }
.emp-org-logo { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--c-blue-bg); color: var(--c-blue); display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.emp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); letter-spacing: .02em; }
.emp-badge-verified { background: var(--c-green-bg); color: #0d5c2a; }
.emp-badge-pending  { background: var(--c-amber-bg); color: #6a4800; }
.emp-tabs { display: flex; gap: 0; border-bottom: 1.5px solid var(--c-line); margin-bottom: 28px; flex-wrap: wrap; }
.emp-tabs button { border: 0; background: transparent; padding: 12px var(--sp-7); font-size: 14px; font-weight: 500; color: var(--c-muted); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; font-family: inherit; display: inline-flex; align-items: center; gap: var(--sp-3); transition: color var(--t-instant), border-color var(--t-instant); }
.emp-tabs button.active { color: var(--c-ink); border-bottom-color: var(--c-brand); font-weight: 600; }
.emp-tabs button:hover { color: var(--c-ink-2); }
.emp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; margin-bottom: 28px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.emp-stat { background: var(--c-layer); padding: 22px; }
.emp-stat .n { font-size: 32px; font-weight: 300; color: var(--c-ink); letter-spacing: -.02em; }
.emp-stat .l { font-size: 13px; color: var(--c-muted); margin-top: var(--sp-3); }
.emp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }

/* ============================================================
   MODAL
   ============================================================ */
.p-modal-overlay { position: fixed; inset: 0; background: rgba(5,15,26,.6); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 56px var(--sp-7); z-index: 1000; overflow-y: auto; }
.p-modal { background: var(--c-layer); border-radius: var(--r-lg); padding: 32px; width: 100%; max-width: 600px; box-shadow: var(--shadow-lg); }
.p-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-7); }
.p-modal-head h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }

/* ============================================================
   SIMPLE FIELD
   ============================================================ */
.p-field { margin-bottom: var(--sp-7); }
.p-field label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin-bottom: var(--sp-3); }
.p-field input, .p-field select, .p-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  font-size: 14px; font-family: inherit; background: var(--c-field); color: var(--c-ink); outline: none;
  transition: border-color var(--t-instant), box-shadow var(--t-instant);
}
.p-field input:focus, .p-field select:focus, .p-field textarea:focus { border-color: var(--c-brand); background: var(--c-layer); box-shadow: 0 0 0 3px rgba(11,92,171,.18); }
.p-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-7); }
@media (max-width: 560px) { .p-field-grid { grid-template-columns: 1fr; } }

/* ============================================================
   STEPPER (progress indicator)
   ============================================================ */
.jp-steps { display: flex; gap: 0; margin-bottom: 28px; flex-wrap: wrap; }
.jp-step { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) 20px; background: transparent; color: var(--c-hint); font-size: 13px; font-weight: 500; border-top: 2.5px solid var(--c-line); flex: 1; min-width: 130px; transition: color var(--t-fast); }
.jp-step.active { color: var(--c-ink); border-top-color: var(--c-brand); }
.jp-step.done  { color: var(--c-ink-2); border-top-color: var(--c-green); }
.jp-step .n { width: 22px; height: 22px; border-radius: 50%; background: var(--c-line); color: var(--c-muted); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.jp-step.active .n { background: var(--c-brand); color: #0a0600; }
.jp-step.done .n  { background: var(--c-green); color: #fff; }

/* ============================================================
   BANNERS (inline notification, no radius — editorial weight)
   ============================================================ */
.jp-banner { display: flex; align-items: center; gap: var(--sp-6); padding: 14px 18px; border-radius: var(--r-md); margin-bottom: var(--sp-7); font-size: 14px; border-left: 3px solid transparent; }
.jp-banner-warn { background: var(--c-amber-bg); color: #6a4800; border-left-color: var(--c-amber); }
.jp-banner-info { background: var(--c-blue-bg);  color: var(--c-blue); border-left-color: var(--c-blue); }
.jp-banner-ok   { background: var(--c-green-bg); color: #0d5c2a; border-left-color: var(--c-green); }
.jp-banner i { font-size: 18px; flex-shrink: 0; }

/* ============================================================
   GUEST CTA ROW
   ============================================================ */
.jp-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); margin-top: var(--sp-5); }
.jp-cta { display: flex; align-items: center; gap: var(--sp-6); cursor: pointer; margin-bottom: 0; border-radius: var(--r-lg); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.jp-cta:hover { border-color: var(--c-brand); box-shadow: var(--shadow-lg); transform: none; }
.jp-cta-ic { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-surface); color: var(--c-brand); font-size: 18px; flex: 0 0 auto; }
@media (max-width: 560px) { .jp-cta-row { grid-template-columns: 1fr; } }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.jp-empty { text-align: center; padding: 64px 20px; color: var(--c-muted); background: var(--c-layer); border: 1px dashed var(--c-line); border-radius: var(--r-lg); }
.jp-empty i { font-size: 32px; color: var(--c-line-2); margin-bottom: var(--sp-5); display: block; }

/* ============================================================
   ONBOARDING / DOCUMENTS
   ============================================================ */
.doc-checklist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.doc-checklist li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-6) var(--sp-7); border: 1.5px solid var(--c-line); border-radius: var(--r-md); background: var(--c-layer); flex-wrap: wrap; transition: border-color var(--t-fast); }
.doc-checklist li.done { background: var(--c-green-bg); border-color: #a7f0ba; }
.doc-checklist li:hover { border-color: var(--c-line-2); }
.doc-ck-name { font-size: 14px; font-weight: 500; color: var(--c-ink-2); display: flex; align-items: center; gap: var(--sp-4); }
.doc-checklist li .doc-ck-name i.fa-circle { color: var(--c-line-2); }
.doc-checklist li.done .doc-ck-name i { color: var(--c-green); }
.doc-uploader { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.doc-uploader input[type=file] { font-size: 12px; max-width: 190px; }
.doc-any-type { padding: 10px 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-md); font-size: 13px; background: var(--c-field); font-family: inherit; }

/* ============================================================
   GETTING-STARTED JOURNEY STEPS
   ============================================================ */
.jp-journey { display: flex; flex-direction: column; gap: 1px; margin-top: var(--sp-5); background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.jp-jstep { display: flex; align-items: center; gap: var(--sp-7); padding: 20px 22px; background: var(--c-layer); transition: background var(--t-fast); }
.jp-jstep:hover { background: var(--c-field); }
.jp-jstep-num { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--c-field); color: var(--c-muted); border: 1.5px solid var(--c-line); }
.jp-jstep-body { flex: 1; min-width: 0; }
.jp-jstep-title { font-weight: 600; color: var(--c-ink); display: flex; align-items: center; gap: var(--sp-4); font-size: 15px; }
.jp-jstep.current { background: rgba(11,92,171,.04); box-shadow: inset 4px 0 0 var(--c-brand); }
.jp-jstep.current .jp-jstep-num { background: var(--c-brand); color: #0a0600; border-color: var(--c-brand); }
.jp-jstep.done .jp-jstep-num { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.jp-jstep.locked { opacity: .5; pointer-events: none; }

/* ============================================================
   REJECTED DOCUMENT ROWS
   ============================================================ */
.jp-reject-row { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-6) 0; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.jp-reject-row:first-of-type { border-top: 0; }
.jp-reject-reason { font-size: 13px; color: var(--c-ink-2); margin-top: var(--sp-1); }
.jp-reject-reason i { color: var(--c-red); }

/* ============================================================
   APPLICATION PIPELINE & TIMELINE
   ============================================================ */
.jp-pipeline { margin: var(--sp-7) 0 var(--sp-3); }
.jp-pipeline-pre { font-size: 13px; color: var(--c-muted); margin-bottom: var(--sp-5); }
.jp-pipeline-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.jp-pipe-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); position: relative; text-align: center; }
.jp-pipe-step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--c-line); z-index: 0; }
.jp-pipe-step.done:not(:last-child)::after { background: var(--c-brand); }
.jp-pipe-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: var(--c-field); color: var(--c-muted); font-size: 12px; font-weight: 700; border: 2px solid var(--c-line-2); }
.jp-pipe-step.done .jp-pipe-dot { background: var(--c-brand); color: #0a0600; border-color: var(--c-brand); }
.jp-pipe-step.next .jp-pipe-dot { background: var(--c-layer); color: var(--c-blue); border-color: var(--c-blue); }
.jp-pipe-label { font-size: 12px; color: var(--c-ink-2); }
.jp-pipe-step.next .jp-pipe-label { color: var(--c-blue); font-weight: 600; }
.jp-journey-terminal { margin: var(--sp-6) 0; padding: 12px 16px; background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-ink-2); font-size: 13px; }

.jp-nextaction { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-5) 0; padding: 14px 18px; border-radius: var(--r-md); background: rgba(11,92,171,.07); border: 1px solid rgba(11,92,171,.28); color: var(--c-ink); font-size: 14px; }
.jp-nextaction.urgent { background: var(--c-amber-bg); border-color: rgba(138,96,0,.25); color: #6a4800; }
.jp-next-hint { margin-top: var(--sp-4); font-size: 13px; color: var(--c-muted); }
.jp-timeline { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-6); }
.jp-timeline-item { display: flex; gap: var(--sp-5); align-items: flex-start; }
.jp-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand); margin-top: 5px; flex: 0 0 auto; }

/* ============================================================
   CANDIDATE DASHBOARD: MINI-STAT PIPELINE
   ============================================================ */
.jp-section-head { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-5) 0 var(--sp-5); }
.jp-mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.jp-mini-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); background: var(--c-layer); padding: 22px; cursor: pointer; font-family: inherit; border: 0; transition: background var(--t-instant); }
.jp-mini-stat:hover { background: rgba(11,92,171,.06); }
.jp-mini-stat:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.jp-mini-stat b { font-size: 30px; font-weight: 300; color: var(--c-ink); line-height: 1; letter-spacing: -.02em; }
.jp-mini-stat span { font-size: 13px; color: var(--c-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.jp-footer { margin-top: 56px; padding: 36px 20px; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: 13px; text-align: center; background: var(--c-layer); }
.jp-footer strong { color: var(--c-ink-2); font-weight: 600; }
.jp-footer .links { margin-top: var(--sp-4); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.jp-footer .links a { color: var(--c-blue); }

/* ============================================================
   PWBD DETAIL (inline sub-form)
   ============================================================ */
.p-pwbd-detail { background: var(--c-field); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--sp-6); margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }

/* ============================================================
   ADDITIONAL COMPONENTS
   ============================================================ */
.jp-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c-blue); }
.jp-verified i { color: var(--c-blue); }
.jp-fee-free { color: var(--c-green); font-weight: 700; font-size: 13px; }
.jp-fee-paid { color: var(--c-ink); font-weight: 700; font-size: 13px; }

/* ============================================================
   PROFILE PAGE — sectioned layout
   ============================================================ */

/* Completion bar — sits between page header and first section card */
.jp-profile-completionbar {
  background: var(--c-layer);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 16px 20px 14px;
  margin-bottom: var(--sp-7);
  box-shadow: var(--shadow-card);
}
.jp-profile-completionbar-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-3);
}
.jp-profile-completionbar-labels i { color: var(--c-brand); margin-right: 5px; }
.jp-profile-completionbar-pct {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.02em;
  line-height: 1;
}

/* Section cards — p-card with slightly reduced margin-bottom so the page
   reads as a single form flow, not disconnected islands */
.jp-profile-section {
  margin-bottom: var(--sp-6) !important;
}
.jp-profile-section .p-h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.jp-profile-section .p-h2 i { color: var(--c-brand); font-size: 16px; }

/* Hint / placeholder card when situation not yet chosen */
.jp-profile-section--hint {
  background: var(--c-field) !important;
  border-style: dashed !important;
  box-shadow: none !important;
}

/* Currently-open section gets a subtle brand left accent */
.jp-profile-section--editing {
  border-left: 3px solid var(--c-brand) !important;
  background: #f8fbff !important;
}
/* Small variant for inline Edit / Cancel buttons on section headers */
.p-btn-sm { padding: 5px 12px !important; font-size: .8rem !important; }

/* Sticky save bar — stays visible at the bottom of the page */
.jp-profile-savebar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--c-layer);
  border-top: 1px solid var(--c-line);
  padding: 14px 20px;
  margin: 0 calc(-1 * var(--sp-7)) calc(-80px);  /* bleeds to container edges */
  box-shadow: 0 -4px 16px rgba(5,15,26,.08);
}
.jp-profile-savebar .p-btn { flex-shrink: 0; }
.jp-profile-savebar-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-green);
}

/* ============================================================
   ONBOARDING — sub-card headers + action row + summary tiles
   ============================================================ */

/* Each step content card (p-card + this modifier) */
.jp-onb-card {
  margin-bottom: var(--sp-6);
}

/* Icon + title + subtitle row at the top of each sub-card */
.jp-onb-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.jp-onb-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--c-surface);
  color: var(--c-brand);
  font-size: 16px;
}
.jp-onb-card-header .p-h2 { margin-bottom: 0; }

/* Back / continue action row */
.jp-onb-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  flex-wrap: wrap;
}
.jp-onb-back {
  color: var(--c-muted) !important;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.jp-onb-back:hover { color: var(--c-ink) !important; }

/* Optional docs disclosure */
.jp-onb-optional-docs {
  margin-top: 16px;
}
.jp-onb-optional-docs > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-blue);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  padding: var(--sp-3) 0;
}
.jp-onb-optional-docs > summary::-webkit-details-marker { display: none; }
.jp-onb-optional-docs > summary:hover { text-decoration: underline; }

/* Submit step — summary tiles (3-up) */
.jp-onb-summary {
  display: flex;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 16px 0;
}
.jp-onb-summary-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: 18px 12px;
  background: var(--c-field);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
  text-align: center;
}
.jp-onb-summary-tile i {
  font-size: 20px;
  color: var(--c-green);
}

/* Required field star */
.jp-req-star {
  color: var(--c-red);
  font-weight: 700;
}

/* ── Onboarding: "What are you looking for?" option cards ── */
.jp-intent-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
  margin-bottom: 10px;
}
.jp-radio-list { display: flex; flex-direction: column; gap: 10px; }
.jp-radio-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-layer);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-ink);
  transition: border-color var(--t-instant), background var(--t-instant), box-shadow var(--t-instant);
}
.jp-radio-card:hover { border-color: var(--c-brand); background: var(--c-field); }
.jp-radio-card.selected {
  border-color: var(--c-brand);
  background: var(--c-blue-bg);
  box-shadow: 0 0 0 3px rgba(11,92,171,.12);
}
/* Keep the native radio a fixed small control — never stretched by the
   global `.p-field input { width:100% }` rule. */
.jp-radio-card input[type="radio"] {
  width: 18px; height: 18px; min-width: 18px;
  margin: 0; padding: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
  flex: 0 0 auto;
}

/* ── Onboarding sub-step progress: slim segmented bar + label ── */
.jp-substep-bar { margin-bottom: 22px; }
.jp-substep-track {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.jp-substep-seg {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  transition: background var(--t-fast);
}
.jp-substep-seg.active { background: var(--c-brand); }
.jp-substep-seg.done   { background: var(--c-green); }
.jp-substep-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-2);
}
.jp-substep-meta i { color: var(--c-brand); margin-right: 6px; }
.jp-substep-meta .p-muted { font-weight: 500; }

/* Invalid field highlight during onboarding inline validation */
.jp-field-invalid input,
.jp-field-invalid select,
.jp-field-invalid textarea {
  border-color: #c0392b !important;
  background: #fef6f5;
}

/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   ============================================================ */

/* Tablet */
@media (max-width: 960px) {
  .p-main, .jp-container, .emp-shell { padding: 28px var(--sp-7) 56px; }
  .jp-hero { padding: 40px 28px; }
  .jp-hero h1 { font-size: clamp(24px, 5vw, 36px); }
  .jp-board, .p-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6); }
  .jp-hero-stats { gap: 28px; }
  .emp-form-row { grid-template-columns: 1fr; }
}

/* Phone landscape / small tablet */
@media (max-width: 640px) {
  .jp-nav-inner { height: auto; min-height: 56px; flex-wrap: wrap; padding: var(--sp-4) var(--sp-6); gap: var(--sp-4); }
  .jp-navlinks { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .jp-navlinks::-webkit-scrollbar { display: none; }
  .jp-navlink { flex: 0 0 auto; height: 44px; padding: 0 var(--sp-5); font-size: 13px; }
  .jp-board, .p-grid, .jp-stats, .emp-stat-grid { grid-template-columns: 1fr; }
  .jp-hero-stats { flex-wrap: wrap; gap: 20px; }
  .jp-hero { padding: 32px 20px; border-radius: var(--r-md); }
  .jp-hero h1 { font-size: 24px; }
  .jp-hero-search { flex-direction: column; border-radius: var(--r-md); }
  .jp-hero-search input { border-radius: var(--r-md) var(--r-md) 0 0; }
  .jp-hero-search .p-btn, .jp-hero-search .jp-btn { width: 100%; border-radius: 0 0 var(--r-md) var(--r-md); }
  .p-card { padding: 20px; border-radius: var(--r-md); }
  .jp-page-title, .p-h1 { font-size: 22px; }
  .p-field input, .p-field select, .p-field textarea, .cr-form-input { font-size: 16px; }
  .p-btn, .jp-btn { width: 100%; }
  .p-row .p-btn, .p-row .jp-btn, .doc-uploader .p-btn, .jp-oppcard-foot .p-btn, .p-linkbtn, .p-btn-ghost, .jp-btn-outline { width: auto; }
  .p-auth-wrap { margin: 28px auto; }
  .p-auth-card { padding: 28px 20px; border-radius: var(--r-lg); }
  .p-field-grid { grid-template-columns: 1fr; }
  .jp-steps { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .jp-step { min-width: 130px; }
  .jp-pipeline-row { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .jp-pipe-step { min-width: 80px; }
  .jp-table, .emp-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; border-radius: var(--r-md); }
  .jp-nextaction { flex-direction: column; align-items: stretch; }
  .jp-nextaction .p-btn { width: 100%; }
  .jp-mini-stats { grid-template-columns: repeat(2, 1fr); }
  .jp-cta-row { grid-template-columns: 1fr; }
  .p-modal-overlay { padding: 20px var(--sp-5); align-items: flex-end; }
  .p-modal { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 28px 20px; }
  /* Profile sections */
  .jp-profile-savebar { padding: 12px var(--sp-6); gap: var(--sp-4); }
  .jp-profile-savebar .p-btn { width: auto; }   /* override the full-width btn rule for this specific context */
  /* Onboarding */
  .jp-onb-card-header { flex-direction: column; gap: var(--sp-4); }
  .jp-onb-summary { flex-direction: column; }
  .jp-onb-actions { flex-direction: column-reverse; align-items: stretch; }
  .jp-onb-back { justify-content: center; }
}

/* Small phone */
@media (max-width: 400px) {
  .jp-hero h1 { font-size: 22px; }
  .jp-brand-sub { display: none; }
  .p-auth-card { padding: 24px 16px; }
}

/* ============================================================
   JOB SEARCH — Wellfound-style 3-zone layout
   Left filter rail + main column (result count + sort + rows).
   ============================================================ */
.jp-search { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; }

/* Filter rail (left) */
.jp-rail {
  position: sticky; top: 84px;
  background: var(--c-layer); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 20px; align-self: start;
}
.jp-rail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.jp-rail-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-ink); }
.jp-rail-clear { border: 0; background: transparent; color: var(--c-blue); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.jp-rail-clear:hover { text-decoration: underline; }
.jp-rail-group { border-top: 1px solid var(--c-line); padding: var(--sp-6) 0; }
.jp-rail-group:first-of-type { border-top: 0; padding-top: 0; }
.jp-rail-group > .lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--sp-5); }
.jp-check { display: flex; align-items: center; gap: var(--sp-4); padding: 6px 0; font-size: 14px; color: var(--c-ink-2); cursor: pointer; }
.jp-check input { width: 16px; height: 16px; accent-color: var(--c-brand); cursor: pointer; margin: 0; }
.jp-check:hover { color: var(--c-ink); }
.jp-rail select { width: 100%; }

/* Results main column */
.jp-results-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.jp-results-count { font-size: 14px; color: var(--c-muted); }
.jp-results-count b { color: var(--c-ink); font-weight: 700; }
.jp-sort { display: flex; align-items: center; gap: var(--sp-3); font-size: 13px; color: var(--c-muted); }
.jp-sort select { padding: 8px 12px; border: 1.5px solid var(--c-line); border-radius: var(--r-pill); font-size: 13px; background: var(--c-layer); font-family: inherit; color: var(--c-ink-2); cursor: pointer; }
.jp-sort select:focus { border-color: var(--c-brand); outline: none; box-shadow: 0 0 0 3px rgba(11,92,171,.18); }

/* Rows list */
.jp-rows { display: flex; flex-direction: column; gap: var(--sp-5); }

/* A single job row */
.jp-row {
  display: flex; align-items: center; gap: var(--sp-6);
  background: var(--c-layer); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 16px 20px; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.jp-row:hover { border-color: var(--c-brand); box-shadow: var(--shadow-card); }
.jp-row:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.jp-row-logo { width: 48px; height: 48px; border-radius: var(--r-sm); flex: 0 0 auto; display: grid; place-items: center; font-size: 18px; font-weight: 700; background: var(--c-blue-bg); color: var(--c-blue); }
.jp-row-logo.type-apprenticeship { background: #eef4f8; color: #0b1f33; }
.jp-row-main { flex: 1; min-width: 0; }
.jp-row-title { font-size: 16px; font-weight: 700; color: var(--c-ink); line-height: 1.3; letter-spacing: -.01em; }
.jp-row-emp { font-size: 13px; color: var(--c-muted); margin: 2px 0 8px; }
.jp-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.jp-row-metaitem { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--c-ink-2); }
.jp-row-metaitem i { color: var(--c-hint); font-size: 11px; }
.jp-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); flex: 0 0 auto; }
.jp-row-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--c-blue); white-space: nowrap; }
.jp-row:hover .jp-row-cta { text-decoration: none; }

/* Filters as a collapsible drawer on mobile */
.jp-rail-toggle { display: none; }

/* ============================================================
   OPPORTUNITY DETAIL — two-column with sticky apply sidebar
   ============================================================ */
.jp-detail { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.jp-detail-main { min-width: 0; }
.jp-detail-side { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: var(--sp-6); }

/* Detail header block */
.jp-detail-head { display: flex; gap: var(--sp-6); align-items: flex-start; }
.jp-detail-logo { width: 60px; height: 60px; border-radius: var(--r-md); flex: 0 0 auto; display: grid; place-items: center; font-size: 26px; font-weight: 700; background: var(--c-blue-bg); color: var(--c-blue); }
.jp-detail-logo.type-apprenticeship { background: #eef4f8; color: #0b1f33; }
.jp-detail-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--c-ink); line-height: 1.2; margin: 0; }
.jp-detail-emp { font-size: 14px; color: var(--c-muted); margin-top: 6px; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

/* Sticky apply card */
.jp-apply-card { background: var(--c-layer); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-card); }
.jp-apply-card .fact { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); font-size: 14px; }
.jp-apply-card .fact:last-of-type { border-bottom: 0; }
.jp-apply-card .fact .k { color: var(--c-muted); font-size: 13px; }
.jp-apply-card .fact .v { font-weight: 600; color: var(--c-ink); }
.jp-apply-card .p-btn { width: 100%; margin-top: var(--sp-6); }
.jp-apply-note { font-size: 12px; color: var(--c-muted); margin-top: var(--sp-5); line-height: 1.5; text-align: center; }

/* Content sections in the main column */
.jp-detail-section { margin-top: 28px; }
.jp-detail-section h2 { font-size: 18px; font-weight: 700; color: var(--c-ink); margin: 0 0 var(--sp-5); letter-spacing: -.01em; }
.jp-detail-desc { white-space: pre-wrap; line-height: 1.65; color: var(--c-ink-2); font-size: 15px; }

/* Similar opportunities strip */
.jp-similar { margin-top: 36px; }
.jp-similar h2 { font-size: 18px; font-weight: 700; margin: 0 0 var(--sp-6); }

/* ============================================================
   SEARCH / DETAIL RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .jp-search { grid-template-columns: 1fr; }
  .jp-rail { position: static; margin-bottom: var(--sp-6); }
  .jp-rail.collapsed .jp-rail-body { display: none; }
  .jp-rail-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--c-ink); cursor: pointer; padding: 0; }
  .jp-detail { grid-template-columns: 1fr; }
  .jp-detail-side { position: static; order: -1; }  /* apply card jumps to top on mobile */
}
@media (max-width: 640px) {
  .jp-search { gap: 16px; }
  .jp-row { flex-wrap: wrap; gap: var(--sp-5); padding: 14px 16px; }
  .jp-row-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; order: 3; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
  .jp-row-cta { display: none; }
  .jp-detail-title { font-size: 22px; }
  .jp-results-head { gap: var(--sp-4); }
}


/* ============================================================
   ENTERPRISE VISUAL LAYER
   Replaces the previous startup/marketplace treatment without
   changing the existing React class contract or API behavior.
   ============================================================ */

html { background: var(--c-bg); }
body.ott-theme {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
}
a { color: var(--c-brand); }
a:hover { color: var(--c-brand-hover); }
:focus-visible {
  outline: 3px solid rgba(11,92,171,.26);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Shell and institutional header */
.jp-shell { background: var(--c-bg); }
.jp-nav {
  background: var(--c-layer);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-nav);
}
.jp-nav-inner {
  max-width: 1240px;
  height: 68px;
  padding: 0 24px;
  gap: 20px;
}
.jp-brand { gap: 12px; }
.jp-brand-mark {
  max-width: 118px;
  height: 34px;
  object-fit: contain;
}
.jp-brand-wordmark {
  color: var(--c-surface);
  font-size: 16px;
  letter-spacing: .01em;
}
.jp-brand-wordmark span { color: var(--c-brand); }
.jp-brand-sub { color: var(--c-muted); font-size: 11px; }
.jp-navlinks {
  margin-left: 24px;
  gap: 2px;
}
.jp-navlink {
  height: 68px;
  padding: 0 14px;
  color: var(--c-muted);
  font-size: 14px;
  font-weight: 500;
  border-bottom-width: 3px;
}
.jp-navlink:hover {
  color: var(--c-ink);
  background: #f5f8fb;
}
.jp-navlink.active {
  color: var(--c-brand);
  border-bottom-color: var(--c-brand);
  font-weight: 600;
}
.jp-navlink i { color: currentColor; }
.jp-nav-right { gap: 10px; }
.jp-nav-right > .jp-navlink {
  height: 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 0 11px;
}
.jp-nav-right > .jp-navlink:hover { border-color: var(--c-line-2); }
.jp-avatar {
  width: 36px;
  height: 36px;
  background: var(--c-blue-bg);
  border: 1px solid #b7d1e5;
  color: var(--c-brand);
  border-radius: 50%;
}
.jp-container, .p-main {
  max-width: 1240px;
  padding: 36px 24px 72px;
}

/* Calm institutional page hierarchy */
.jp-page-title, .p-h1 {
  color: var(--c-surface);
  font-weight: 700;
  letter-spacing: -.015em;
}
.p-h2 { color: var(--c-surface); font-weight: 650; }
.p-h3 { color: var(--c-ink-2); }
.p-muted { color: var(--c-muted); }
.p-fineprint { color: var(--c-muted); }

/* Replace the promotional hero with a service header */
.jp-hero {
  color: var(--c-ink);
  background: var(--c-layer);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.jp-hero::before, .jp-hero::after { display: none; }
.jp-hero > * { position: relative; z-index: 1; }
.jp-hero-logo {
  height: 38px;
  max-width: 180px;
  margin-bottom: 24px;
  filter: none;
  opacity: 1;
}
.jp-hero h1 {
  max-width: 760px;
  margin-bottom: 12px;
  color: var(--c-surface);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.jp-hero h1 em { color: var(--c-brand); }
.jp-hero p {
  max-width: 650px;
  color: var(--c-muted);
  opacity: 1;
  line-height: 1.6;
  margin-bottom: 24px;
}
.jp-hero-search {
  max-width: 640px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-layer);
  box-shadow: none;
}
.jp-hero-search input { padding: 13px 16px; }
.jp-hero-search .p-btn, .jp-hero-search .jp-btn {
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 13px 20px;
}
.jp-hero-stats {
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--c-line);
  padding-top: 20px;
}
.jp-hero-stat {
  min-width: 150px;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid var(--c-line);
}
.jp-hero-stat:last-child { border-right: 0; }
.jp-hero-stat b {
  color: var(--c-brand);
  font-size: 20px;
  font-weight: 600;
}
.jp-hero-stat span { color: var(--c-muted); }
.jp-trustbar {
  margin: 20px 0 28px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  box-shadow: none;
}
.jp-trustbar .item { color: var(--c-ink-2); }
.jp-trustbar .item i { color: var(--c-brand); }

/* One-level surfaces and quiet interactions */
.p-card {
  border-radius: var(--r-lg);
  border-color: var(--c-line);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.p-card:hover { box-shadow: var(--shadow-card); }
.jp-stats, .jp-mini-stats, .emp-stat-grid {
  border-radius: var(--r-lg);
  box-shadow: none;
}
.jp-stat, .jp-mini-stat { background: var(--c-layer); }
.jp-mini-stat:hover { background: #f5f8fb; }
.p-meter { height: 6px; border-radius: var(--r-xs); }
.p-meter > span { background: var(--c-brand); border-radius: var(--r-xs); }

/* Enterprise controls: rectangular, legible, no glow */
.p-btn, .jp-btn {
  min-height: 40px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--c-brand);
  color: #fff;
  box-shadow: var(--shadow-cta);
  letter-spacing: 0;
}
.p-btn:hover, .jp-btn:hover {
  background: var(--c-brand-hover);
  box-shadow: var(--shadow-cta);
  transform: none;
}
.p-btn:active, .jp-btn:active { background: var(--c-brand-active); transform: none; }
.p-btn:disabled, .jp-btn:disabled { background: #d9e2ec; color: #829ab1; }
.p-btn-ghost {
  background: var(--c-layer);
  color: var(--c-brand);
  border-color: var(--c-line-2);
  box-shadow: none;
}
.p-btn-ghost:hover { background: var(--c-blue-bg); color: var(--c-brand-hover); box-shadow: none; }
.jp-btn-outline {
  background: var(--c-layer);
  color: var(--c-brand);
  border-color: var(--c-brand);
  box-shadow: none;
}
.jp-btn-outline:hover { background: var(--c-blue-bg); box-shadow: none; }
.p-btn-dark, .jp-btn-dark { background: var(--c-surface); color: #fff; box-shadow: none; }
.p-btn-dark:hover { background: var(--c-surface-2); }
.p-btn-danger { background: var(--c-red); }
.p-linkbtn { color: var(--c-brand); }
.p-linkbtn:focus-visible, .p-btn:focus-visible, .jp-btn:focus-visible { outline-color: rgba(11,92,171,.35); }

/* Status language remains compact and factual */
.p-badge {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: .015em;
}
.b-green { background: var(--c-green-bg); color: #17613e; }
.b-amber { background: var(--c-amber-bg); color: #785000; }
.b-red { background: var(--c-red-bg); color: #9f2018; }
.b-blue { background: var(--c-blue-bg); color: var(--c-brand); }
.b-gray { background: #eef2f6; color: #52606d; }

/* Opportunity presentation: credible list/card, not a gamified marketplace */
.jp-board { gap: 16px; }
.jp-oppcard {
  border-radius: var(--r-lg);
  padding: 20px;
  gap: 18px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.jp-oppcard:hover {
  border-color: #8eb8d5;
  box-shadow: 0 4px 14px rgba(16,42,67,.09);
  transform: none;
}
.jp-oppcard::before { display: none; }
.jp-oppcard-logo, .jp-row-logo, .jp-detail-logo {
  background: var(--c-blue-bg);
  color: var(--c-brand);
  border-radius: var(--r-sm);
}
.jp-oppcard-logo.type-apprenticeship,
.jp-row-logo.type-apprenticeship,
.jp-detail-logo.type-apprenticeship {
  background: #eef4f8;
  color: var(--c-surface-2);
}
.jp-oppcard-title, .jp-row-title { color: var(--c-surface); }
.jp-oppcard-emp, .jp-row-emp { color: var(--c-muted); }
.jp-chips { gap: 6px; }
.jp-chip {
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: #f1f5f8;
  border-color: #e1e8ee;
  color: var(--c-ink-2);
}
.jp-chip.chip-apprenticeship, .jp-chip.chip-job {
  background: var(--c-blue-bg);
  border-color: #c8ddea;
  color: var(--c-brand);
}
.jp-chip.chip-apprenticeship { color: var(--c-surface-2); }
.jp-save { border-radius: var(--r-sm); }
.jp-save:hover { background: var(--c-blue-bg); color: var(--c-brand); }
.jp-save.saved { color: var(--c-red); }
.jp-verified { color: var(--c-green); }
.jp-fee-free { color: var(--c-green); }
.jp-fee-paid { color: var(--c-ink-2); }

/* Search/list/detail surfaces */
.jp-filters { gap: 12px; margin-bottom: 24px; }
.jp-search-inline input, .jp-select, .jp-sort select {
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-2);
  background: var(--c-layer);
  box-shadow: none;
}
.jp-search-inline input { padding: 11px 14px 11px 40px; }
.jp-search-inline input:focus, .jp-select:focus, .jp-sort select:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(11,92,171,.12);
}
.jp-search { grid-template-columns: 248px 1fr; gap: 24px; }
.jp-rail, .jp-apply-card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.jp-rail { padding: 18px; }
.jp-rail-group { padding: 16px 0; }
.jp-rail-group > .lbl { color: var(--c-muted); letter-spacing: .06em; }
.jp-check input { accent-color: var(--c-brand); }
.jp-row {
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: none;
}
.jp-row:hover { border-color: #8eb8d5; box-shadow: var(--shadow-card); }
.jp-row-cta { color: var(--c-brand); }
.jp-detail { gap: 24px; }
.jp-detail-title { color: var(--c-surface); font-weight: 700; }
.jp-detail-section { margin-top: 32px; }
.jp-detail-section h2, .jp-similar h2 { color: var(--c-surface); font-size: 18px; }
.jp-detail-desc { color: var(--c-ink-2); }
.jp-apply-card { padding: 22px; }
.jp-apply-card .fact { border-color: var(--c-line); }
.jp-apply-card .p-btn { border-radius: var(--r-sm); }
.jp-empty { border-radius: var(--r-lg); padding: 52px 20px; }

/* Forms, auth and feedback */
.cr-form-input, .p-field input, .p-field select, .p-field textarea,
.doc-any-type {
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-layer);
  color: var(--c-ink);
  box-shadow: none;
}
.cr-form-input:focus, .p-field input:focus, .p-field select:focus, .p-field textarea:focus {
  border-color: var(--c-brand);
  background: var(--c-layer);
  box-shadow: 0 0 0 3px rgba(11,92,171,.12);
}
.p-field label, .cr-form-label { color: var(--c-ink-2); }
.p-auth-wrap { max-width: 480px; margin: 44px auto; }
.p-auth-card { border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-lg); }
.p-auth-icon {
  border-radius: var(--r-md);
  background: var(--c-blue-bg);
  color: var(--c-brand);
  box-shadow: none;
}
.p-role-toggle { border-radius: var(--r-sm); padding: 3px; }
.p-role-toggle button { border-radius: var(--r-xs); }
.p-role-toggle button.active { box-shadow: none; }
.p-auth-tabs button.active { border-bottom-color: var(--c-brand); }
.p-google-btn { border-radius: var(--r-sm); padding: 11px; }
.p-alert, .p-banner, .jp-banner { border-radius: var(--r-sm); }
.p-alert-info, .jp-banner-info { color: #0b587f; }
.p-alert-error, .jp-banner-warn { color: #7b2b24; }
.p-msg { border-radius: var(--r-sm); }
.p-loading::before { border-top-color: var(--c-brand); }

/* Verification/onboarding/profile */
.jp-steps { margin-bottom: 24px; }
.jp-step { border-top-width: 2px; padding: 12px 16px; }
.jp-step.active { border-top-color: var(--c-brand); }
.jp-step.active .n { background: var(--c-brand); color: #fff; }
.jp-step .n { border-radius: 50%; }
.jp-step.done { border-top-color: var(--c-green); }
.jp-step.done .n { background: var(--c-green); }
.jp-banner { border-left-width: 3px; }
.jp-journey { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.jp-jstep { padding: 18px 20px; }
.jp-jstep.current { background: #f2f7fb; box-shadow: inset 4px 0 0 var(--c-brand); }
.jp-jstep.current .jp-jstep-num { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.jp-nextaction { background: #f2f7fb; border-color: #c8ddea; }
.jp-nextaction.urgent { background: var(--c-amber-bg); }
.jp-pipe-step.done .jp-pipe-dot { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
.jp-pipe-step.done:not(:last-child)::after { background: var(--c-brand); }
.jp-profile-completionbar, .jp-onb-card { box-shadow: var(--shadow-card); }
.jp-profile-section .p-h2 i { color: var(--c-brand); }
.jp-profile-section--hint { background: #f8fafc !important; }
.jp-profile-savebar { box-shadow: 0 -3px 12px rgba(16,42,67,.07); }
.jp-onb-card-icon { background: var(--c-blue-bg); color: var(--c-brand); border-radius: var(--r-md); }
.jp-onb-card-header { border-color: var(--c-line); }
.jp-onb-summary { border-radius: var(--r-md); }
.jp-onb-summary-tile { background: #f8fafc; }
.doc-checklist li { border-width: 1px; border-radius: var(--r-md); }
.doc-checklist li.done { background: var(--c-green-bg); border-color: #b8dec8; }

/* Employer workspace keeps the same institutional system */
.emp-shell { max-width: 1240px; padding: 36px 24px 72px; }
.emp-org-logo { background: var(--c-blue-bg); color: var(--c-brand); border-radius: var(--r-sm); }
.emp-badge { border-radius: var(--r-pill); }
.emp-tabs button.active { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.emp-stat-grid { border-radius: var(--r-lg); }
.emp-table th, .jp-table th { background: #f5f8fb; color: var(--c-muted); }
.emp-table tbody tr:hover, .jp-table tbody tr:hover { background: #f7fafc; }

/* Footer now reads as a service footer, not a marketing strip */
.jp-footer {
  margin-top: 32px;
  padding: 28px 24px;
  background: var(--c-layer);
  border-top: 1px solid var(--c-line);
  color: var(--c-muted);
}
.jp-footer strong { color: var(--c-surface); }
.jp-footer .links { gap: 16px; }
.jp-footer .links a { color: var(--c-brand); }

/* ============================================================
   ENTERPRISE RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 960px) {
  .jp-nav-inner { padding: 0 20px; }
  .jp-navlinks { margin-left: 8px; }
  .jp-navlink { padding: 0 10px; }
  .jp-container, .p-main, .emp-shell { padding-left: 20px; padding-right: 20px; }
  .jp-hero { padding: 32px; }
}
@media (max-width: 640px) {
  .jp-nav-inner { padding: 10px 16px; }
  .jp-navlinks { margin-left: 0; }
  .jp-navlink { height: 42px; }
  .jp-container, .p-main, .emp-shell { padding: 24px 16px 56px; }
  .jp-hero { padding: 28px 22px; border-left-width: 3px; }
  .jp-hero h1 { font-size: 28px; }
  .jp-hero-stats { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .jp-hero-stat { border-right: 0; border-bottom: 1px solid var(--c-line); padding: 0 0 12px; margin: 0; }
  .jp-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
  .jp-hero-search { max-width: none; }
  .jp-hero-search .p-btn, .jp-hero-search .jp-btn { border-radius: 0 0 var(--r-sm) var(--r-sm); }
  .jp-hero-search input { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .p-btn, .jp-btn { min-height: 42px; }
  .p-auth-card { padding: 28px 20px; }
  .jp-row { padding: 16px; }
  .jp-profile-savebar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}


/* Shell additions for the enterprise account/identity treatment. */
.jp-brand-mark { flex: 0 0 auto; }
.jp-oppcard-logo img, .jp-row-logo img, .jp-detail-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.jp-account-name {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 180px;
  min-width: 0;
  line-height: 1.2;
  color: var(--c-ink-2);
  font-size: 12px;
}
.jp-account-name-label {
  color: var(--c-muted);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jp-account-name strong {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.jp-nav-signout { gap: 7px; }
@media (max-width: 960px) {
  .jp-account-name { display: none; }
}


/* Landing/dashboard service messaging and action rows. */
.jp-hero-kicker {
  margin-bottom: 10px;
  color: var(--c-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.jp-hero-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--c-muted);
  font-size: 13px;
}
.jp-hero-note i { color: var(--c-brand); }
.jp-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.jp-cta:hover {
  border-color: #8eb8d5;
  box-shadow: var(--shadow-card);
  transform: none;
}
@media (max-width: 640px) {
  .jp-hero-actions { align-items: stretch; flex-direction: column; }
  .jp-hero-actions .p-btn { width: 100%; margin: 0; }
}

.jp-onb-card-icon-apprentice {
  background: #eef4f8;
  color: var(--c-surface-2);
}
.jp-onb-card-icon-success {
  background: var(--c-green-bg);
  color: var(--c-green);
}
.jp-rejection-card {
  margin-bottom: 18px;
  border-color: #e5b9b4;
  background: #fff9f8;
}


/* ============================================================
   BUGFIX PATCH — logo, mobile nav, button colours, misc
   ============================================================ */

/* ── Logo: use the CDN image without a dark invert filter ── */
.jp-brand-mark,
.jp-hero-logo {
  filter: none !important;
  opacity: 1 !important;
  background: transparent;
}
.jp-hero-logo {
  max-height: 48px;
  max-width: 200px;
  height: auto;
  width: auto;
  display: block;
  margin-bottom: 20px;
  object-fit: contain;
}
.jp-brand-mark {
  max-height: 36px;
  max-width: 130px;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* ── Buttons: always white text on brand-blue background ── */
/* The base layer wrote color:#0a0600 (near-black) on the blue button.
   The enterprise layer correctly sets #fff but guard it explicitly. */
.p-btn, .jp-btn {
  color: #ffffff !important;
}
.p-btn:hover, .jp-btn:hover,
.p-btn:active, .jp-btn:active {
  color: #ffffff !important;
}
/* Ghost / outline: blue text, not white */
.p-btn-ghost,
.p-btn-ghost:hover,
.p-btn-ghost:active {
  color: var(--c-brand) !important;
}
.jp-btn-outline,
.jp-btn-outline:hover,
.jp-btn-outline:active {
  color: var(--c-brand) !important;
}
/* Dark button: white text */
.p-btn-dark, .jp-btn-dark,
.p-btn-dark:hover, .jp-btn-dark:hover {
  color: #ffffff !important;
}
/* Danger: white text */
.p-btn-danger,
.p-btn-danger:hover {
  color: #ffffff !important;
}

/* ── Mobile navbar: visible, scrollable, correct colours ── */
/* The enterprise layer makes the nav white (var(--c-layer)) so we need
   dark text on it. That is already done above. What was missing:
   • The wrapped navlinks row needs a visible bottom border to separate it
     from the page body.
   • The Log-in / Sign-up button must NOT go full-width inside the nav.
   • Account-name + sign-out area must not overflow on small screens.      */

@media (max-width: 640px) {
  /* Prevent ALL nav buttons from inheriting the 640px full-width p-btn rule */
  .jp-nav .p-btn,
  .jp-nav .jp-btn,
  .jp-nav-right .p-btn {
    width: auto !important;
    min-width: 0;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Navlinks row: add a separator line below it when it wraps */
  .jp-navlinks {
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 4px;
    /* Allow horizontal scroll without a scrollbar showing */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jp-navlinks::-webkit-scrollbar { display: none; }

  /* Individual nav tab: slightly smaller, still tap-friendly */
  .jp-navlink {
    height: 40px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Brand: keep logo visible but compact */
  .jp-brand-mark { max-width: 90px; max-height: 28px; }
  .jp-brand-wordmark { font-size: 14px; }

  /* Right-side area: compress on very small screens */
  .jp-nav-right {
    margin-left: auto;
    gap: 6px;
    flex-shrink: 0;
  }
  /* Avatar: smaller on mobile */
  .jp-avatar { width: 30px; height: 30px; font-size: 11px; }
}

@media (max-width: 400px) {
  /* On very small phones hide the wordmark, keep logo + icon only */
  .jp-brand-wordmark { display: none; }
  .jp-brand-mark { max-width: 80px; }
}

/* ── Opportunity card footer: prevent cramping on narrow cards ── */
.jp-oppcard-foot {
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Hero search: stack on very narrow screens ── */
@media (max-width: 480px) {
  .jp-hero-search {
    flex-direction: column;
    border-radius: var(--r-sm);
  }
  .jp-hero-search input {
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    border-bottom: 1px solid var(--c-line-2);
  }
  .jp-hero-search .p-btn,
  .jp-hero-search .jp-btn {
    width: 100% !important;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
  }
}

/* ── Auth card: prevent overflow on very small phones ── */
@media (max-width: 400px) {
  .p-auth-wrap { margin: 16px auto; padding: 0 8px; }
  .p-auth-card { padding: 22px 14px; }
}

/* ── Step badges: prevent overflow on narrow stepper ── */
.jp-step { overflow: hidden; }
.jp-step > span, .jp-step > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ============================================================
   PROFILE PHOTO / AVATAR (candidate)
   ============================================================ */

/* Nav avatar can now hold an image (falls back to the letter). */
.jp-avatar { overflow: hidden; }
.jp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Profile page identity header */
.jp-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.jp-avatar-lg {
  width: 84px; height: 84px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-blue-bg);
  color: var(--c-brand);
  display: grid; place-items: center;
  font-size: 32px; font-weight: 700;
  overflow: hidden;
  border: 2px solid var(--c-line);
}
.jp-avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-profile-header-info { min-width: 0; flex: 1; }
.jp-profile-header-info .p-h2 { color: var(--c-surface); }

/* Dashboard hero identity (top-right: photo + name + position) */
.jp-dashboard-hero { position: relative; }
.jp-hero-identity {
  position: absolute; top: 24px; right: 28px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 6px;
  box-shadow: var(--shadow-card);
  max-width: 260px;
}
.jp-hero-avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-blue-bg); color: var(--c-brand);
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px; overflow: hidden;
}
.jp-hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-hero-identity-text { min-width: 0; line-height: 1.25; }
.jp-hero-identity-text strong { display: block; font-size: 13px; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-hero-identity-text span { display: block; font-size: 11px; color: var(--c-muted); text-transform: capitalize; }

@media (max-width: 640px) {
  /* On phones the hero identity chip moves into the flow so it never overlaps the title. */
  .jp-hero-identity { position: static; margin-bottom: 16px; max-width: none; display: inline-flex; }
  .jp-profile-header { gap: 14px; }
  .jp-avatar-lg { width: 64px; height: 64px; font-size: 24px; }
}


/* ============================================================
   PROFILE OVERVIEW (read-only, view-first)
   ============================================================ */
.jp-ov-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-7);
  align-items: start;
}
.jp-ov-cards .p-card { margin-bottom: 0; }
.jp-ov-cards .p-h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.jp-ov-cards .p-h2 i { color: var(--c-brand); font-size: 14px; }

/* label / value rows */
.jp-ov-grid { display: flex; flex-direction: column; gap: 2px; }
.jp-ov-grid > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px dashed var(--c-line);
}
.jp-ov-grid > div:last-child { border-bottom: 0; }
.jp-ov-grid > div > span { color: var(--c-muted); font-size: 13px; flex: 0 0 auto; }
.jp-ov-grid > div > strong {
  color: var(--c-ink); font-size: 14px; font-weight: 600;
  text-align: right; min-width: 0; word-break: break-word;
}

/* skill chips */
.jp-skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jp-skill-chip {
  display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--c-blue-bg); color: var(--c-brand);
  border: 1px solid #c8ddea; font-size: 13px; font-weight: 500;
}


/* ============================================================
   FINAL NAVBAR — single authoritative layout (overrides the
   earlier layered nav rules for a clean desktop + mobile bar)
   ============================================================ */
.jp-nav { background: var(--c-layer); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-nav); position: sticky; top: 0; z-index: 100; }
.jp-nav-inner {
  max-width: 1280px; margin: 0 auto; height: 64px;
  padding: 0 24px; display: flex; align-items: center; gap: 16px;
}
.jp-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; cursor: pointer; text-decoration: none; }
.jp-brand-mark { height: 32px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.jp-brand-wordmark { font-size: 16px; font-weight: 700; color: var(--c-surface); line-height: 1.1; }
.jp-brand-wordmark span { color: var(--c-brand); }
.jp-brand-sub { font-size: 11px; color: var(--c-muted); font-weight: 400; }

/* Links: horizontal, never wrap; scroll horizontally if they don't fit. */
.jp-navlinks {
  display: flex; align-items: center; gap: 1px; flex: 1 1 auto; min-width: 0;
  margin-left: 10px; padding-right: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.jp-navlinks::-webkit-scrollbar { display: none; }
.jp-navlink {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 64px; padding: 0 11px; border: 0; border-bottom: 3px solid transparent;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--c-muted); white-space: nowrap;
  transition: color .12s, background .12s, border-color .12s;
}
.jp-navlink:hover { color: var(--c-ink); background: #f5f8fb; }
.jp-navlink.active { color: var(--c-brand); border-bottom-color: var(--c-brand); font-weight: 600; }
.jp-navlink i { font-size: 13px; color: currentColor; }

/* Right cluster: sign-out + avatar. Kept compact so all nav links (incl. Profile)
   stay visible. The "Signed in as / name" text chip is hidden — the avatar's
   tooltip and the Profile page already show the identity — because on many
   laptop widths it pushed the last nav link off-screen. */
.jp-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.jp-nav-right > .jp-navlink { height: auto; border-bottom: 0; } /* undo tab styling if any nav-link lands here */
.jp-account-name { display: none !important; }
.jp-account-name-label { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.jp-account-name strong { font-size: 13px; font-weight: 600; color: var(--c-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-nav-signout {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm); background: #fff;
  color: var(--c-ink-2); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.jp-nav-signout:hover { border-color: var(--c-line-2); background: #f5f8fb; color: var(--c-ink); }
.jp-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: var(--c-blue-bg); color: var(--c-brand); display: grid; place-items: center;
  font-weight: 700; font-size: 14px; border: 1px solid #b7d1e5;
}
.jp-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Tablet */
@media (max-width: 960px) {
  .jp-nav-inner { padding: 0 16px; gap: 10px; }
  .jp-navlinks { margin-left: 6px; }
  .jp-account-name { display: none; }
}
/* Phone: brand + account on the top row, links become a scrollable strip below */
@media (max-width: 720px) {
  .jp-nav-inner { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 14px; gap: 8px; }
  .jp-brand-sub { display: none; }
  .jp-navlinks { order: 3; width: 100%; margin-left: 0; border-top: 1px solid var(--c-line); }
  .jp-navlink { height: 46px; padding: 0 12px; font-size: 13px; }
  .jp-nav-right { margin-left: auto; }
  .jp-nav-signout span { display: none; }   /* icon-only sign-out on phones */
  .jp-nav-signout { padding: 0 11px; }
}
@media (max-width: 400px) {
  .jp-brand-wordmark { font-size: 14px; }
}


/* ============================================================
   PROFILE HEADER ("profile hero") + consistent edit grid
   ============================================================ */
.jp-profile-header {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(180deg, #f6fafd 0%, #ffffff 70%);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-bottom: var(--sp-7);
}
.jp-avatar-lg {
  width: 92px; height: 92px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-blue-bg); color: var(--c-brand);
  display: grid; place-items: center;
  font-size: 34px; font-weight: 700; overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-line-2);
}
.jp-avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp-profile-header-info { min-width: 0; flex: 1; }
.jp-profile-header-info .p-h2 { color: var(--c-surface); font-size: 21px; }
.jp-profile-header-info .p-muted { margin-top: 2px; text-transform: capitalize; }
.jp-profile-header-info .p-fineprint { margin-top: 6px; }

/* Edit mode reuses the overview's 2-column card grid so the look is consistent
   with the read-only view (no jarring layout change on Edit). */
.jp-profile-edit-grid { margin-bottom: var(--sp-7); }
.jp-profile-edit-grid .jp-profile-section { margin-bottom: 0; }
.jp-profile-edit-grid .p-h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.jp-profile-edit-grid .p-h2 i { color: var(--c-brand); font-size: 14px; }
/* Full-width sections inside the edit grid (span both columns) for readability. */
.jp-profile-edit-grid .jp-profile-section:first-child,           /* Situation */
.jp-profile-edit-grid .jp-profile-section--hint { grid-column: 1 / -1; }


/* ============================================================
   MAIN PAGE HERO — richer, more premium look (light + branded)
   ============================================================ */
.jp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 240px at 90% -40%, rgba(11,92,171,.10), transparent 60%),
    linear-gradient(180deg, #f4f9fe 0%, #ffffff 62%);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-lg);
  padding: 34px 36px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
}
.jp-hero .jp-hero-kicker { color: var(--c-brand); }
.jp-hero h1 { color: var(--c-surface); letter-spacing: -.025em; }
.jp-hero p { color: var(--c-muted); }
.jp-hero-logo { height: 40px; max-width: 190px; width: auto; margin-bottom: 18px; }

/* Public hero stats → clean 3-up row with icon tiles */
.jp-public-hero .jp-hero-stats {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--c-line);
}
.jp-public-hero .jp-hero-stat { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.jp-public-hero .jp-hero-stat b {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 10px; background: var(--c-blue-bg); color: var(--c-brand); font-size: 16px;
}
.jp-public-hero .jp-hero-stat span { color: var(--c-ink-2); font-size: 13px; font-weight: 500; }

/* Verified dashboard hero: identity chip (top-right) with a verified tick */
.jp-dashboard-hero { position: relative; }
.jp-hero-identity {
  position: absolute; top: 22px; right: 24px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--c-line);
  border-radius: 999px; padding: 6px 16px 6px 6px;
  box-shadow: 0 4px 14px rgba(16,42,67,.08); max-width: 280px;
}
.jp-hero-avatar { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; overflow: visible; background: var(--c-blue-bg); color: var(--c-brand); display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.jp-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.jp-hero-verified-tick {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: var(--c-green); font-size: 15px;
  display: grid; place-items: center; line-height: 1;
}
.jp-hero-verified-tick i { display: block; }
.jp-hero-identity-text strong { display: block; font-size: 14px; color: var(--c-ink); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-hero-identity-text span { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-green); font-weight: 600; }

@media (max-width: 720px) {
  .jp-hero { padding: 26px 20px; }
  .jp-hero-identity { position: static; margin-bottom: 16px; max-width: none; display: inline-flex; }
}


/* ============================================================
   PROFILE EDIT — single-column cards (fixes cramped/jumbled
   form fields that happened when edit cards sat in a 2-col grid)
   ============================================================ */
.jp-profile-edit-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
.jp-profile-edit-grid .jp-profile-section { grid-column: 1 / -1; }
/* Fields keep their two-up layout inside the full-width cards, collapsing to one
   column on small screens (handled by the existing .p-field-grid breakpoint). */


/* ============================================================
   MARKETING LANDING (guest home) — Wellfound-style, dual audience
   ============================================================ */
.jp-landing { margin: -40px calc(-1 * var(--sp-7)) -80px; }         /* bleed to full width inside .jp-container */
@media (max-width: 960px) { .jp-landing { margin: -28px -20px -48px; } }
@media (max-width: 640px) { .jp-landing { margin: -24px -14px -48px; } }
@media (max-width: 400px) { .jp-landing { margin: -24px -12px -48px; } }

/* ── Hero (bold navy, premium) ── */
.jp-mkt-hero {
  background:
    radial-gradient(900px 320px at 88% -10%, rgba(198,146,20,.18), transparent 60%),
    radial-gradient(1000px 420px at 10% 120%, rgba(11,92,171,.45), transparent 60%),
    linear-gradient(135deg, #0b1f33 0%, #123452 55%, #0b3a63 100%);
  color: #fff; padding: 64px 24px 72px; text-align: center;
}
.jp-mkt-hero-inner { max-width: 860px; margin: 0 auto; }
.jp-mkt-hero-logo { height: 46px; width: auto; max-width: 200px; margin-bottom: 22px; filter: brightness(0) invert(1); opacity: .95; }
.jp-mkt-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.jp-mkt-hero h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 16px; font-weight: 800; color: #fff; }
.jp-mkt-hero h1 em { color: #f0c14b; font-style: normal; }
.jp-mkt-hero p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 680px; margin: 0 auto 28px; }
.jp-mkt-hero strong { color: #fff; }

.jp-mkt-search {
  display: flex; max-width: 560px; margin: 0 auto 20px;
  background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.jp-mkt-search input { flex: 1; border: 0; outline: 0; padding: 15px 18px; font-size: 15px; font-family: inherit; color: var(--c-ink); }
.jp-mkt-search .p-btn { border-radius: 0; padding: 15px 22px; }

.jp-mkt-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-bottom: 34px; }
.jp-mkt-btn-light { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 11px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.jp-mkt-btn-light:hover { background: rgba(255,255,255,.2); }
.jp-mkt-btn-link { background: transparent; border: 0; color: #f0c14b; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; }

.jp-mkt-hero-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; }
.jp-mkt-hero-stats > div { text-align: center; }
.jp-mkt-hero-stats b { display: block; font-size: 18px; color: #fff; font-weight: 700; }
.jp-mkt-hero-stats span { font-size: 13px; color: rgba(255,255,255,.65); }

/* ── Generic section shell ── */
.jp-mkt-section { max-width: 1120px; margin: 0 auto; padding: 56px 24px; }
.jp-mkt-head { text-align: center; margin-bottom: 34px; }
.jp-mkt-head h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--c-surface); margin: 0 0 8px; }
.jp-mkt-head p { color: var(--c-muted); font-size: 15px; margin: 0; }
.jp-mkt-head--row { display: flex; align-items: flex-end; justify-content: space-between; text-align: left; gap: 16px; flex-wrap: wrap; }
.jp-mkt-head--row h2 { font-size: 24px; }

/* ── How it works ── */
.jp-mkt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.jp-mkt-step { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 26px 22px; }
.jp-mkt-step .n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-blue-bg); color: var(--c-brand); font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.jp-mkt-step h3 { margin: 0 0 6px; font-size: 17px; color: var(--c-surface); }
.jp-mkt-step p { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.6; }

/* ── Dual-audience split ── */
.jp-mkt-split { max-width: 1120px; margin: 0 auto; padding: 20px 24px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.jp-mkt-panel { border-radius: var(--r-lg); padding: 30px 28px; border: 1px solid var(--c-line); background: #fff; }
.jp-mkt-panel--dark { background: linear-gradient(160deg, #0b1f33, #123452); border-color: transparent; color: #fff; }
.jp-mkt-panel-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--c-blue-bg); color: var(--c-brand); margin-bottom: 16px; }
.jp-mkt-panel--dark .jp-mkt-panel-ic { background: rgba(255,255,255,.14); color: #f0c14b; }
.jp-mkt-panel h3 { margin: 0 0 14px; font-size: 20px; color: var(--c-surface); }
.jp-mkt-panel--dark h3 { color: #fff; }
.jp-mkt-panel ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.jp-mkt-panel li { font-size: 14px; color: var(--c-ink-2); display: flex; align-items: flex-start; gap: 10px; }
.jp-mkt-panel--dark li { color: rgba(255,255,255,.85); }
.jp-mkt-panel li i { color: var(--c-green); margin-top: 3px; }
.jp-mkt-panel--dark li i { color: #6ee7a8; }
.jp-mkt-panel-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Features grid ── */
.jp-mkt-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jp-mkt-feature { text-align: center; padding: 24px 16px; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; }
.jp-mkt-feature i { font-size: 24px; color: var(--c-brand); margin-bottom: 12px; }
.jp-mkt-feature h4 { margin: 0 0 6px; font-size: 15px; color: var(--c-surface); }
.jp-mkt-feature p { margin: 0; font-size: 13px; color: var(--c-muted); line-height: 1.55; }

/* ── Final CTA band ── */
.jp-mkt-cta-band { background: linear-gradient(135deg, #0b5cab, #0b3a63); color: #fff; text-align: center; padding: 56px 24px; }
.jp-mkt-cta-band h2 { font-size: 28px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; }
.jp-mkt-cta-band p { color: rgba(255,255,255,.82); margin: 0 0 24px; }
.jp-mkt-cta-band-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .jp-mkt-steps { grid-template-columns: 1fr; }
  .jp-mkt-split { grid-template-columns: 1fr; }
  .jp-mkt-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .jp-mkt-hero { padding: 48px 18px 54px; }
  .jp-mkt-search { flex-direction: column; }
  .jp-mkt-search .p-btn { border-radius: 0; }
  .jp-mkt-features { grid-template-columns: 1fr; }
  .jp-mkt-section { padding: 40px 18px; }
}

/* ═══════════════════════════════════════════════════════════
   TRUSTED-BY PARTNER LOGOS (guest landing)
   ═══════════════════════════════════════════════════════════ */
.jp-mkt-partners {
  background: #f7f9fc;
  border-top: 1px solid #e6ebf2;
  border-bottom: 1px solid #e6ebf2;
  padding: 44px 20px;
}
.jp-mkt-partners-inner {
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}
.jp-mkt-kicker2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0b5cab;
  margin-bottom: 8px;
}
.jp-mkt-partners-sub {
  color: #5a6b7d;
  font-size: 15px;
  margin: 0 auto 28px;
  max-width: 640px;
}
.jp-partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.jp-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  height: 78px;
  padding: 14px 18px;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.jp-partner:hover {
  border-color: #cfdcec;
  box-shadow: 0 6px 18px rgba(11, 31, 51, .08);
  transform: translateY(-2px);
}
.jp-partner img {
  max-height: 42px;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .18s ease, opacity .18s ease;
}
.jp-partner:hover img {
  filter: grayscale(0);
  opacity: 1;
}
@media (max-width: 640px) {
  .jp-partner-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .jp-partner { height: 64px; padding: 10px 12px; }
  .jp-partner img { max-height: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   BRANDED AUTH PAGE (login / signup)
   ═══════════════════════════════════════════════════════════ */
.jp-auth-page {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(15, 92, 171, .35), transparent 60%),
    linear-gradient(160deg, #0b1f33 0%, #0d2748 55%, #0b1f33 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.jp-auth-page .p-auth-wrap {
  margin: 0;
  width: 100%;
  max-width: 460px;
}
.jp-auth-back {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  padding: 6px 2px;
  margin-bottom: 10px;
}
.jp-auth-back:hover { color: #fff; }
.jp-auth-brandhead {
  text-align: center;
  margin-bottom: 18px;
}
.jp-auth-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.jp-auth-logo-chip img {
  height: 42px;
  width: auto;
  display: block;
}
.jp-auth-page .p-auth-card {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* ═══════════════════════════════════════════════════════════
   LANDING: hero logo chip (full-colour logo on white)
   ═══════════════════════════════════════════════════════════ */
.jp-mkt-hero-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.jp-mkt-hero-logo-chip img {
  height: 50px;
  width: auto;
  max-width: 240px;
  display: block;
}
@media (max-width: 560px) {
  .jp-mkt-hero-logo-chip { padding: 11px 16px; }
  .jp-mkt-hero-logo-chip img { height: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   LANDING: events / activity showcase
   ═══════════════════════════════════════════════════════════ */
.jp-mkt-events-wrap { background: #f7f9fc; }
.jp-mkt-events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.jp-mkt-event {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
}
.jp-mkt-event:hover {
  box-shadow: 0 14px 34px rgba(11, 31, 51, .12);
  transform: translateY(-3px);
}
.jp-mkt-event-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #eef2f7;
  overflow: hidden;
}
.jp-mkt-event-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jp-mkt-event-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(11, 31, 51, .88);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
}
.jp-mkt-event-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jp-mkt-event-date {
  font-size: 12px;
  font-weight: 700;
  color: #0b5cab;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jp-mkt-event-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #34465a;
}
@media (max-width: 560px) {
  .jp-mkt-events { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTHORITATIVE MOBILE LAYER  (loads last → wins)
   Fixes horizontal shift ("page moves") + polishes every screen for phones.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1) GLOBAL OVERFLOW GUARD ──────────────────────────────────────────────
   The single most common cause of a page "moving"/jiggling sideways on mobile
   is a child element wider than the viewport. Lock the document to the viewport
   width and never allow horizontal scrolling of the whole page. Individual
   scroll strips (nav links, tables, steppers) still scroll internally. */
html, body {
  max-width: 100%;
  overflow-x: hidden;         /* page itself never scrolls sideways */
}
html { -webkit-text-size-adjust: 100%; }   /* iOS: don't auto-zoom text on rotate */

/* Media never overflows its box. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Long unbroken strings (URLs, emails, IDs) wrap instead of widening the page. */
.jp-row-title, .jp-row-emp, .p-muted, .jp-mkt-event-body p,
.jp-account-name, .p-h1, .jp-page-title, .p-card, td, th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The app shell and its main content must stay within the viewport. */
.jp-shell, .jp-nav, main.jp-container, .p-main, .emp-shell {
  max-width: 100%;
}

/* ── 2) TABLET (<= 960px) ──────────────────────────────────────────────── */
@media (max-width: 960px) {
  .p-main, .jp-container, .emp-shell { padding-left: 20px; padding-right: 20px; }
}

/* ── 3) PHONE (<= 640px) ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Containers: comfortable, consistent side padding. */
  .p-main, .jp-container, .emp-shell { padding-left: 14px; padding-right: 14px; padding-bottom: 48px; }

  /* Navbar: brand + account on the top row; links become a scroll strip below.
     (Single authoritative definition — supersedes earlier duplicated blocks.) */
  .jp-nav-inner {
    height: auto; min-height: 54px; flex-wrap: wrap;
    padding: 8px 14px; gap: 8px; max-width: 100%;
  }
  .jp-brand { min-width: 0; }
  .jp-brand-sub { display: none; }
  .jp-navlinks {
    order: 3; width: 100%; margin-left: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; gap: 4px;
  }
  .jp-navlinks::-webkit-scrollbar { display: none; }
  .jp-navlink { flex: 0 0 auto; height: 40px; padding: 0 12px; font-size: 13px; }
  .jp-nav-right { margin-left: auto; gap: 8px; }

  /* Hero. */
  .jp-hero { padding: 26px 18px; border-radius: var(--r-md); }
  .jp-hero h1 { font-size: 23px; line-height: 1.2; }
  .jp-hero-stats { flex-wrap: wrap; gap: 16px; }
  .jp-hero-search { flex-direction: column; }
  .jp-hero-search input,
  .jp-hero-search .p-btn { width: 100%; }

  /* Cards / grids collapse to one column. */
  .jp-board, .p-grid, .jp-stats, .emp-stat-grid { grid-template-columns: 1fr; }
  .jp-mini-stats { grid-template-columns: repeat(2, 1fr); }
  .p-card { padding: 18px 16px; border-radius: var(--r-md); }
  .jp-page-title, .p-h1 { font-size: 21px; }

  /* Forms: 16px inputs prevent iOS auto-zoom (which shifts the layout). */
  .p-field input, .p-field select, .p-field textarea, .cr-form-input { font-size: 16px; }
  .p-field-grid { grid-template-columns: 1fr; }

  /* Buttons go full-width by default; inline contexts opt back out. */
  .p-btn, .jp-btn { width: 100%; }
  .p-row .p-btn, .p-row .jp-btn, .doc-uploader .p-btn, .jp-oppcard-foot .p-btn,
  .p-linkbtn, .p-btn-ghost, .jp-btn-outline, .jp-profile-savebar .p-btn,
  .jp-nav .p-btn, .jp-nav .jp-btn { width: auto; }

  /* Job search: single column, rail unsticks and stacks. */
  .jp-search { grid-template-columns: 1fr; gap: 16px; }
  .jp-rail { position: static; top: auto; margin-bottom: 12px; }
  .jp-row { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .jp-row-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }

  /* Opportunity detail: apply card jumps to top, single column. */
  .jp-detail { grid-template-columns: 1fr; gap: 18px; }
  .jp-detail-side { position: static; top: auto; order: -1; }

  /* Wizard stepper + pipeline scroll horizontally within their own strip. */
  .jp-steps, .jp-pipeline-row {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 6px;
  }
  .jp-step { min-width: 120px; }
  .jp-pipe-step { min-width: 76px; }

  /* Any wide table scrolls inside its own box, not the page. */
  .jp-table, .emp-table, .data-table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }

  /* Modals dock to the bottom (thumb-reachable). */
  .p-modal-overlay { padding: 16px; align-items: flex-end; }
  .p-modal { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 22px 18px; width: 100%; }

  /* Footer links wrap. */
  .jp-footer { padding-left: 16px; padding-right: 16px; }
  .jp-footer .links { flex-wrap: wrap; gap: 10px 16px; }

  /* Marketing sections: one column, tighter padding. */
  .jp-mkt-section { padding-left: 16px; padding-right: 16px; }
  .jp-mkt-steps, .jp-mkt-split { grid-template-columns: 1fr; }
  .jp-mkt-features { grid-template-columns: 1fr; }
  .jp-mkt-events { grid-template-columns: 1fr; }
  .jp-mkt-cta-band-btns { flex-direction: column; }
  .jp-mkt-cta-band-btns .p-btn, .jp-mkt-cta-band-btns .jp-mkt-btn-light { width: 100%; }

  /* Admin reports summary cards stack two-up. */
  .stats-row { gap: 10px; }
  .stat-card { min-width: calc(50% - 5px) !important; }

  /* ── Employer workspace ── */
  /* Top bar: org identity + logout stack cleanly. */
  .emp-top { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .emp-org { gap: 12px; min-width: 0; }
  .emp-org-logo { width: 42px; height: 42px; font-size: 17px; }

  /* Tabs become a horizontal scroll strip (no awkward wrapping). */
  .emp-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-bottom: 20px;
  }
  .emp-tabs::-webkit-scrollbar { display: none; }
  .emp-tabs button { flex: 0 0 auto; padding: 12px 14px; font-size: 13px; white-space: nowrap; }

  /* Employer stat tiles: two per row on phones. */
  .emp-stat-grid { grid-template-columns: 1fr 1fr; }
  .emp-stat { padding: 16px; }
  .emp-stat .n { font-size: 26px; }

  /* Create-opportunity / edit forms: single column. */
  .emp-form-row { grid-template-columns: 1fr; }
}

/* ── 4) SMALL PHONE (<= 400px) ─────────────────────────────────────────── */
@media (max-width: 400px) {
  .p-main, .jp-container, .emp-shell { padding-left: 12px; padding-right: 12px; }
  .jp-brand-wordmark { font-size: 14px; }
  .jp-hero h1 { font-size: 21px; }
  .jp-mini-stats { grid-template-columns: 1fr; }
  .stat-card { min-width: 100% !important; }
  .emp-stat-grid { grid-template-columns: 1fr; }   /* employer tiles one-up on tiny phones */

  /* Auth card: full-width, no side bleed. */
  .jp-auth-page { padding: 24px 12px; }
  .p-auth-wrap { margin: 0 auto; padding: 0; width: 100%; }
  .p-auth-card { padding: 22px 16px; }
  .jp-auth-logo-chip { padding: 10px 14px; }
  .jp-auth-logo-chip img { height: 34px; }
}

/* ════════════════════════════════════════════════════════════════════════
   EMPLOYEE (CANDIDATE) MOBILE POLISH  — primary audience, screen-by-screen
   Loads last → wins. Targets the real candidate markup: dashboard, jobs,
   opportunity detail, application wizard, My Applications, Documents, Profile.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Label / value rows (used across My Applications + opportunity detail) ──
     Stack the label above the value so long values (org names, districts,
     application numbers) never get squeezed into a thin column. */
  .p-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 0;
  }
  .p-row > .p-label { font-size: 12px; }
  /* Rows that intentionally hold buttons stay horizontal. */
  .p-row:has(.p-btn), .p-row:has(.jp-btn), .jp-nextaction {
    flex-direction: row;
    align-items: center;
  }

  /* ── Dashboard: getting-started journey steps ── */
  .jp-jstep { flex-wrap: wrap; gap: 12px 14px; padding: 16px; }
  .jp-jstep-body { flex: 1 1 auto; }
  .jp-jstep .p-btn { width: 100%; order: 3; }   /* action drops full-width below */
  .jp-jstep-title { font-size: 14px; flex-wrap: wrap; }

  /* Quick-action cards + hero actions stack. */
  .jp-cta-row { grid-template-columns: 1fr; }
  .jp-hero-actions { flex-direction: column; align-items: stretch; }
  .jp-hero-actions .p-btn, .jp-hero-actions .jp-btn-outline { width: 100%; }

  /* ── Rejected-document rows (verification feedback) ── */
  .jp-reject-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .jp-reject-row .p-btn { width: 100%; }

  /* ── My Applications detail: action row buttons stack ── */
  .jp-timeline-item { gap: 10px; }

  /* ── Documents checklist: name on top, uploader controls full-width below ── */
  .doc-checklist li { flex-direction: column; align-items: stretch; gap: 10px; }
  .doc-uploader { width: 100%; justify-content: flex-start; }
  .doc-uploader input[type=file] { max-width: 100%; flex: 1; }

  /* ── Profile: identity header centers + stacks on phones ── */
  .jp-profile-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 22px 16px;
    gap: 12px;
  }
  .jp-profile-header-info { text-align: center; }
  .jp-profile-header-info > div { justify-content: center; }   /* name + badge row */
  .jp-profile-completionbar-labels { flex-wrap: wrap; gap: 4px; }
  .jp-profile-savebar {
    flex-direction: column; align-items: stretch; gap: 10px;
    position: sticky; bottom: 0; z-index: 5;
  }
  .jp-profile-savebar .p-btn { width: 100%; }

  /* ── Opportunity card foot: keep the apply/save controls tidy ── */
  .jp-oppcard-foot { flex-wrap: wrap; gap: 8px; }

  /* ── Status/eligibility badges never force overflow ── */
  .p-badge, .jp-badge { white-space: nowrap; }
}

/* Very small phones: tighten the profile + journey a touch more. */
@media (max-width: 380px) {
  .jp-avatar-lg { width: 60px; height: 60px; font-size: 22px; }
  .jp-jstep-num { width: 30px; height: 30px; font-size: 13px; }
}

/* Employer dashboard stat tiles are clickable (navigate to the tab). Keep the
   button reset so they look identical to the original div tiles. */
button.emp-stat {
  border: 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--t-fast);
}
button.emp-stat:hover { background: var(--c-field); }