/* =============================================
   GigFinder – Members Area Styles
   ============================================= */

/* Members / employers / admin shared body. The background image lives here
   so all three areas pick it up; the semi-transparent white overlay keeps
   content cards / tables readable. Tune the alpha (0 = full image,
   1 = solid white) to change wash intensity. */
.members-body {
  background:
    linear-gradient(rgba(255,255,255,0.80), rgba(255,255,255,0.80)),
    url('/images/background/background-04.png') center center / 100% 100% no-repeat fixed,
    var(--bg-alt);
  min-height: 100vh;
}

/* Admin pages use the exact public-pages backdrop effect (.brand-bg in
   styles.css) -- same dark vignette, same cover fit, same fixed
   attachment -- only the image URL differs. body.admin-body bumps
   specificity above the shared .members-body rule that also applies
   here; !important on every sub-property is belt-and-suspenders so the
   white-wash .members-body shorthand cannot leak through any sub-prop
   (color, image, attachment) even if a later rule mutates one piece. */
/* Loose text on dark-backdrop pages (admin + members + employers
   areas) -- page headers and intro paragraphs need light type so
   they read against the dark navy backdrop. Card-internal text
   keeps its dark default. These live in members.css (not admin.css)
   because /members/*.asp and /employers/*.asp only load styles.css
   + members.css. */
.admin-body .m-page-header h1,
.member-area-bg .m-page-header h1,
.employer-area-bg .m-page-header h1 { color: #fff; }
.admin-body .m-page-header p,
.member-area-bg .m-page-header p,
.employer-area-bg .m-page-header p  { color: rgba(255, 255, 255, 0.85); }

/* Settings page tabs (Job Preferences / Background / Job Match
   Preferences) sit on the dark backdrop, not inside a card. Lift
   their muted-text color to white-ish and replace the light-gray
   bottom rule with a translucent-white hairline so the tab bar
   still reads as a tab bar against the dark backdrop. Active tab
   keeps its purple underline -- the underline color is already
   high-contrast on dark. */
.member-area-bg .pf-tab-bar,
.employer-area-bg .pf-tab-bar,
.member-area-bg .rt-tabs { border-bottom-color: rgba(255, 255, 255, 0.18); }
.member-area-bg .pf-tab,
.employer-area-bg .pf-tab,
.member-area-bg .rt-tab { color: rgba(255, 255, 255, 0.75); }
.member-area-bg .pf-tab:hover,
.member-area-bg .pf-tab--active,
.employer-area-bg .pf-tab:hover,
.employer-area-bg .pf-tab--active,
.member-area-bg .rt-tab:hover,
.member-area-bg .rt-tab--active { color: #DDD6FE; }
.member-area-bg .pf-tab--active,
.employer-area-bg .pf-tab--active,
.member-area-bg .rt-tab--active { border-bottom-color: #DDD6FE; }

/* Resume-tools upload/saved cards (.signup-panel reused inside .rt-grid)
   keep their purple stroke on the public signup page but drop it on the
   dark member-area backdrop -- the panel's drop-shadow + lavender fill
   already define the edge. .rt-side-card (the right "saved resumes"
   card) gets the same treatment so the two cards read consistently. */
.member-area-bg .signup-panel,
.member-area-bg .rt-side-card,
.employer-area-bg .signup-panel,
.employer-area-bg .rt-side-card { border: none; }

/* Thin hairline at the top of the dark-backdrop footers across all
   three dark areas (admin, members, employers). */
.admin-body .m-footer,
.member-area-bg .m-footer,
.employer-area-bg .m-footer { border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* White cards on the dark backdrop don't need their light-gray
   stroke -- the drop-shadow already defines the edge, and the
   border read as visual noise once the page went dark. Same
   call we made on the search-jobs / job-detail cards earlier. */
.member-area-bg .m-section,
.employer-area-bg .m-section { border: none; }

body.admin-body,
body.member-area-bg,
body.employer-area-bg {
  background-color: #111827 !important;
  background-image:
    /* Neutral darken layer -- pure black at low alpha so the image gets
       darker without picking up additional purple saturation. Matches
       the layer stack on .brand-bg / .hero / body.home-bg in styles.css.
       This is the layer that's load-bearing for the perceived darkness;
       without it, the surface reads noticeably lighter even with
       identical vignette + image. */
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    linear-gradient(
      to bottom,
      rgba(17, 24, 39, 0.72) 0%,
      rgba(17, 24, 39, 0.68) 55%,
      rgba(17, 24, 39, 0.82) 100%
    ),
    url('/images/background/background-members.png') !important;
  background-position: center !important;
  background-size: auto, auto, cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* ── Members Nav ── */
.m-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.m-nav-inner {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 24px;
  max-width: 1160px;
  margin: 0 auto;
  gap: 0;
}

.m-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 36px;
}
.m-nav-logo-img { height: 40px; width: auto; }

/* Desktop tab list */
.m-nav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.m-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.m-tab:hover  { color: var(--primary); background: var(--primary-light); }
.m-tab.active { color: var(--primary); font-weight: 600; background: var(--primary-light); }

.m-tab-ai-icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Right cluster */
.m-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Profile button + dropdown */
.m-profile-wrap { position: relative; }

/* Tiny effective-mode pill, pinned to the top-right corner of the profile
   dropdown so it overlaps the button without affecting nav layout. Tier
   colors: Free = neutral gray, Plus = brand purple, Premium = gold. */
.m-mode-pill {
  position: absolute;
  top: -6px;
  right: -4px;
  z-index: 3;
  pointer-events: none;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  white-space: nowrap;
}
/* All tiers share the Plus (brand purple) scheme. */
.m-mode-pill--free,
.m-mode-pill--plus,
.m-mode-pill--premium { background: #EDE9FE; color: #4F46E5; border-color: #C4B5FD; }

/* "Premium" is the widest label, so nudge it further right to keep it from
   overhanging the avatar's left edge. */
.m-mode-pill--premium { right: -12px; }

.m-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 8px;
  /* Very light lavender fill so the profile pill reads as a soft brand-
     tinted chip instead of a bare outline. Hover deepens to the next
     shade up so the button still gives feedback. */
  background: #FDFCFF;
  /* Soft lavender border with a faint brand-tinted drop shadow so the
     chip reads as a subtly-elevated pill rather than a flat outline.
     Hover still deepens the border so it stays interactive. */
  border: 1px solid #C7B8F5;
  border-radius: 40px;
  box-shadow: 0 1px 2px rgba(79, 70, 229, .12);
  cursor: pointer;
  transition: var(--transition);
}
.m-profile-btn:hover {
  border-color: #4F46E5;
  background: #E5DCFE;
}

.m-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.m-avatar--initials {
  background: var(--primary);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: #E5E7EB;
}

.m-caret {
  color: var(--text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
  margin-left: 10px;
}
.m-profile-wrap.open .m-caret { transform: rotate(180deg); }

.m-profile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 300;
}
.m-profile-wrap.open .m-profile-menu { display: block; }

.m-profile-menu-info {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-profile-menu-info strong { font-size: .875rem; color: var(--text-dark); }
.m-profile-menu-info span   { font-size: .78rem;  color: var(--text-muted); }

.m-profile-menu-divider { height: 1px; background: var(--border); }

.m-profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: .875rem;
  color: var(--text-mid);
  font-weight: 500;
  transition: var(--transition);
}
.m-profile-menu-item:hover { background: var(--bg-alt); color: var(--primary); }

/* Hamburger (mobile only) */
.m-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.m-hamburger span {
  display: block;
  height: 2px;
  background: var(--text-mid);
  border-radius: 2px;
  transition: var(--transition);
}
.m-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m-hamburger.open span:nth-child(2) { opacity: 0; }
.m-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.m-mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--white);
}
.m-mobile-nav.open { display: flex; }

.m-mobile-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.m-mobile-tab:last-child { border-bottom: none; }
.m-mobile-tab:hover,
.m-mobile-tab.active { color: var(--primary); background: var(--primary-light); }

/* ── AI Settings page (matching_settings.asp) ── */
.ms-hero,
.pf-hero {
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 36px 40px;
  margin-bottom: 0px;
  min-height: 170px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.ms-hero-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.ms-hero-icon {
  width: 48px; height: 48px;
  object-fit: contain; flex-shrink: 0;
  filter: brightness(0) invert(1);
  margin-top: 3px;
}
.ms-hero-title {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.ms-hero-desc {
  font-size: .925rem;
  color: rgba(255,255,255,.82);
  margin: 0;
  line-height: 1.7;
}
.ms-controls     { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 8px; }

@media (max-width: 700px) {
  .ms-controls   { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 600px) {
  .ms-hero        { padding: 24px 20px; }
  .ms-hero-inner  { gap: 14px; }
}

/* ── AI Matching Card (profile page, above tabs) ── */
.pf-ai-card {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 36px;
  box-shadow: 0 4px 24px rgba(79, 70, 229, .14);
  border: 1px solid rgba(79, 70, 229, .22);
}

.pf-ai-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
}

.pf-ai-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  margin-top: 2px;
}

.pf-ai-header-text h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 7px;
  letter-spacing: -.01em;
}

.pf-ai-header-text p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .82);
  margin: 0;
  line-height: 1.65;
  max-width: 680px;
}

.pf-ai-body {
  background: var(--white);
  padding: 28px 32px 24px;
}

.pf-ai-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 8px;
}

.pf-ai-col-title { font-size: .95rem; font-weight: 700; color: var(--text-dark); margin: 0 0 4px; }
.pf-ai-col-desc  { font-size: .84rem; color: var(--text-muted); margin: 0 0 4px; line-height: 1.55; }

@media (max-width: 680px) {
  .pf-ai-controls { grid-template-columns: 1fr; gap: 24px; }
  .pf-ai-header   { padding: 22px 20px; gap: 14px; }
  .pf-ai-body     { padding: 20px 20px 18px; }
}

/* ── Profile identity hero ── */
.pf-id-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pf-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 78px;
  height: 78px;
}

.pf-id-avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  overflow: hidden;
}

.pf-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.pf-avatar-edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(255,255,255,.6);
  color: #4F46E5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: background .15s, transform .15s;
  padding: 0;
}
.pf-avatar-edit-btn:hover {
  background: #ede9fe;
  transform: scale(1.1);
}

/* -- Photo modal -- */
.pf-photo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-photo-overlay--open { display: flex; }

.pf-photo-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pf-photo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
}

.pf-photo-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.pf-photo-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.pf-photo-close:hover { background: rgba(255,255,255,.3); }

.pf-photo-body {
  padding: 24px 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pf-photo-preview-wrap {
  display: flex;
  justify-content: center;
}

.pf-photo-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background: #ede9fe;
  border: 3px solid #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pf-photo-preview-initials {
  font-size: 2rem;
  font-weight: 700;
  color: #4F46E5;
}

.pf-photo-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pf-photo-choose-btn,
.pf-photo-delete-btn {
  width: 130px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  line-height: 1;
}

.pf-photo-choose-btn {
  background: transparent;
  border: 1.5px solid #a5b4fc;
  color: #4F46E5;
  cursor: pointer;
}
.pf-photo-choose-btn:hover {
  background: #ede9fe;
  border-color: #4F46E5;
}

.pf-photo-delete-btn {
  background: transparent;
  border: 1.5px solid #fca5a5;
  color: #dc2626;
}
.pf-photo-delete-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.pf-photo-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

.pf-photo-fb {
  font-size: .82rem;
  min-height: 1.2em;
  text-align: center;
}
.pf-photo-fb--err { color: #dc2626; }

.pf-photo-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}
.pf-id-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-id-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.pf-id-email {
  font-size: .875rem;
  color: rgba(255,255,255,.75);
}
.pf-id-date-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 8px 14px;
  width: 140px;
  height: 68px;
  flex-shrink: 0;
  box-sizing: border-box;
  white-space: nowrap;
}
.pf-id-date-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  text-align: center;
}
.pf-id-date-val {
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.pf-id-date-val--mode {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.pf-id-date-val--word {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pf-id-date-sub {
  font-size: .65rem;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  text-align: center;
  letter-spacing: .02em;
  white-space: nowrap;
  margin-top: 2px;
}
/* Expired-plan accent: red label + value. The hero uses a purple
   gradient background, so a darker red-tint reads as a warning
   without clashing with the light-on-purple pattern. */
.pf-id-date-item--warn {
  background: rgba(220, 38, 38, .22);
  border-color: rgba(252, 165, 165, .4);
}
.pf-id-date-item--warn .pf-id-date-label,
.pf-id-date-item--warn .pf-id-date-val,
.pf-id-date-item--warn .pf-id-date-sub { color: #fecaca; }
.pf-id-badge-wrap {
  flex-shrink: 0;
  margin-left: auto;
}
.pf-id-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.pf-id-badge--active {
  background: rgba(134,239,172,.18);
  color: #86EFAC;
  border: 1px solid rgba(134,239,172,.35);
}
.pf-id-badge--setup {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.25);
}

@media (max-width: 600px) {
  .pf-hero    { padding: 24px 20px; }
  .pf-id-card { flex-wrap: wrap; }
  .pf-id-date-item { flex: 1; }
  .pf-id-badge-wrap { width: 100%; }
}

/* ── Profile Page ── */
.pf-tab-bar       { display: flex; gap: 0; border-bottom: 2px solid var(--border);
                    margin-bottom: 28px; }
.pf-tab           { padding: 10px 22px; font-size: .9rem; font-weight: 600;
                    font-family: var(--font); background: none; border: none;
                    color: var(--text-muted); cursor: pointer;
                    border-bottom: 3px solid transparent; margin-bottom: -2px;
                    transition: color 0.15s, border-color 0.15s; }
.pf-tab:hover     { color: var(--primary); }
.pf-tab--active   { color: var(--primary); border-bottom-color: var(--primary); }

.pf-panel         { display: none; }
.pf-panel--active { display: block; }

.pf-section-title { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 4px; }
.pf-section-desc  { font-size: .875rem; color: var(--text-muted); margin: 0 0 20px; }

.pf-readonly-row  { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 20px;
                    padding: 14px 18px; background: var(--bg-alt);
                    border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pf-readonly-item { display: flex; flex-direction: column; gap: 3px; }
.pf-readonly-label{ font-size: .72rem; font-weight: 700; color: var(--text-muted);
                    text-transform: uppercase; letter-spacing: .06em; }
.pf-readonly-val  { font-size: .9rem; color: var(--text-dark); font-weight: 500; }

.pf-opts          { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.pf-opt           { padding: 8px 20px; border: 1.5px solid var(--border);
                    border-radius: 40px; font-size: .875rem; font-weight: 500;
                    color: var(--text-mid); background: var(--white);
                    cursor: pointer; transition: var(--transition); font-family: var(--font); }
.pf-opt:hover     { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pf-opt--sel      { border-color: var(--primary); background: var(--primary); color: #fff; }
.pf-opt--sel:hover{ background: var(--primary-dark); border-color: var(--primary-dark); }

.pf-salary-wrap   { max-width: 580px; }

.pf-save-row      { display: flex; align-items: center; justify-content: flex-end;
                    gap: 14px; margin-top: 20px; padding-top: 16px;
                    border-top: 1px solid var(--border); }
.pf-feedback      { font-size: .85rem; font-weight: 500; min-width: 80px; text-align: right; }
.pf-feedback--ok  { color: var(--success); }
.pf-feedback--err { color: #DC2626; }

.pf-section--coming { opacity: .65; }
.pf-coming-soon   { font-size: .875rem; color: var(--text-muted); font-style: italic; margin: 8px 0 0; }

/* ── Hero expiry: expired state ── */
.pf-id-date-item--expired .pf-id-date-label { color: #fca5a5; }
.pf-id-date-item--expired .pf-id-date-val   { color: #fca5a5; }

/* ── Billing expiry block ── */
.pf-expiry-block {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 24px;
  margin-bottom: 20px;
}
.pf-expiry-block--expired {
  background: #fef2f2;
  border-color: #fecaca;
}
.pf-expiry-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.pf-expiry-date {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
}
.pf-expiry-block--expired .pf-expiry-date { color: #b91c1c; }
.pf-expiry-note {
  font-size: .8rem;
  font-weight: 500;
  margin-top: 4px;
}
.pf-expiry-note--soon    { color: #b45309; }
.pf-expiry-note--expired { color: #b91c1c; }

.pf-renew-link {
  display: inline-block;
  margin-top: 2px;
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-decoration: underline;
  letter-spacing: .02em;
  line-height: 1;
}
.pf-renew-link:hover { color: #fff; }

/* ── Main layout ── */
.m-main {
  padding-top: 80px;
  min-height: 100vh;
}

.m-content {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Page header */
.m-page-header { margin-bottom: 32px; }
.m-page-header h1 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  margin-bottom: 4px;
}
.m-page-header p { font-size: .95rem; color: var(--text-muted); }

/* Stats grid */
.m-stats-hero {
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin-bottom: 28px;
  min-height: 170px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.m-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.m-stat-card {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 160px;
  transition: var(--transition);
}
.m-stat-card:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); }

.m-stat-icon { font-size: 1.4rem; }
.m-stat-num  { font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; }
.m-stat-num--word { font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; }
/* Larger variant of .m-match-card__score for the dashboard stat tile that
   displays the member's average match rating. Renders as a hollow ring
   on the dark tile (no white center disc); the unfilled portion uses a
   translucent white so it reads against the dark backdrop. The ring is
   painted by a masked ::before pseudo so the parent's text content stays
   unmasked and remains legible inside the cutout. */
.m-stat-ring {
  flex: 0 0 60px !important;
  width: 60px !important;
  height: 60px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: none !important;
}
.m-stat-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(var(--score-color) calc(var(--pct) * 1%), rgba(255, 255, 255, .18) 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 68%, #000 69%);
          mask: radial-gradient(circle closest-side, transparent 68%, #000 69%);
}
.m-stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Content sections */
.m-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Sitewide raised-panel treatment -- matches the shadow on the
     /employers/applications.asp split panes so every .m-section reads
     as a card lifted off the page background. */
  box-shadow: 0 2px 6px rgba(15,23,42,.12);
  padding: 28px;
  margin-bottom: 24px;
}

.m-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.m-section-header h2 { font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

/* Variant: header rendered as a flush colored strip across the top of
   the card. Pull the header out to the card edges via negative margins
   matching .m-section's padding, then re-pad the strip itself.
   overflow:hidden on the section clips the match-list (which uses
   negative bottom margin to sit flush with the bottom edge) to the
   section's border-radius so the bottom corners stay rounded. */
.m-section--strip-header {
  overflow: hidden;
}
.m-section--strip-header > .m-section-header {
  background: #6B7280;
  color: #fff;
  margin: -28px -28px 0;
  padding: 14px 28px;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* Inside the dark strip, all child text/labels read on white. */
.m-section--strip-header > .m-section-header h2,
.m-section--strip-header > .m-section-header .m-thresh-control,
.m-section--strip-header > .m-section-header .m-thresh-label,
.m-section--strip-header > .m-section-header .m-thresh-label strong {
  color: #fff;
}
/* Inline "X% Threshold" link inside the title strip routes to the AI Match
   Notifications tab on settings. Subtle dotted underline so it reads as a
   link without competing with the heading itself. */
.m-section--strip-header > .m-section-header .m-thresh-link {
  color: inherit;
  text-decoration: underline dotted rgba(255,255,255,0.55);
  text-underline-offset: 2px;
}
.m-section--strip-header > .m-section-header .m-thresh-link:hover {
  text-decoration: underline solid #fff;
}
/* "(AI-Score Matched)" subtitle treatment: smaller + muted gray on the
   dark strip so it reads as a parenthetical clarifier next to the bigger
   "Job Recommendations" title. */
.m-section--strip-header > .m-section-header .m-section-header__sub {
  font-size: .82rem;
  font-weight: 500;
  color: #D1D5DB;
}
/* Slider track gets a slightly lighter gray so the brand thumb still pops. */
.m-section--strip-header > .m-section-header .m-thresh-slider {
  background: #9CA3AF;
}
/* "Displaying X of Y" badge on the right end of the strip header so the
   user knows the slider is filtering a larger pool. */
.m-section-header__count {
  font-size: .85rem;
  color: #E5E7EB;
  white-space: nowrap;
}
/* Secondary line under "Displaying X of Y" -- only rendered when the
   employer has more applications than the dashboard's 300-row cap, so
   they know the list is showing the most recent slice rather than the
   whole pool. Sits right-aligned beneath the count, smaller + lighter. */
.m-section-header__cap-note {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 600;
  color: #C7D2FE;
  text-align: right;
}
/* Pulse dots: lighten so they remain visible on the dark strip. */
.m-section--strip-header > .m-section-header .m-dot-pulse span {
  background: #F3F4F6;
}
.m-section--strip-header > .m-section-header .m-dot-pulse--paused span {
  background: #D1D5DB;
}
@media (max-width: 480px) {
  .m-section--strip-header > .m-section-header {
    margin: -20px -16px 0;
    padding: 12px 16px;
  }
}

/* Left cluster inside the strip header: title sits next to the threshold
   slider so adjusting the cutoff feels like part of the section title.
   Pulse indicator stays on the right via the parent's space-between. */
.m-section-header__left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

/* Inline threshold control (label + slider + saved-flash). */
.m-thresh-control {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: #374151;
  white-space: nowrap;
}
.m-thresh-label strong {
  color: var(--primary);
  font-weight: 700;
  font-size: 1.05rem;
}
.m-thresh-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 6px;
  border-radius: 999px;
  background: #D1D5DB;
  outline: none;
  cursor: pointer;
}
.m-thresh-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}
.m-thresh-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}
/* Show the focus ring only for keyboard navigation (:focus-visible) so a
   mouse drag/click doesn't leave the purple outline lingering on the
   slider until the user clicks away. */
.m-thresh-slider:focus { outline: none; }
.m-thresh-slider:focus-visible {
  outline: 2px solid rgba(124, 58, 237, .35);
  outline-offset: 2px;
}
.m-thresh-saved {
  color: #15803d;
  font-weight: 600;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .2s;
  min-width: 50px;
}
.m-thresh-saved.show {
  opacity: 1;
}

@media (max-width: 600px) {
  .m-thresh-slider { width: 110px; }
  .m-thresh-control { gap: 8px; font-size: .92rem; }
  .m-thresh-label strong { font-size: .98rem; }
}

/* ------------------------------------------------------------------
   Dashboard AI match listing cards. One row per ai_match_ratings hit
   for this member; client-side filter on the threshold slider toggles
   visibility via [hidden]. Whole row is the link to job-detail.
------------------------------------------------------------------ */
.m-match-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Pull the list to the card's outer edges so rows extend full-width.
     Negative margins offset the .m-section padding (28px desktop / 16px
     mobile via the breakpoint below). The -28px on the bottom also pulls
     the last card flush with the section's bottom rounded corner so we
     don't show a white strip below the final row. */
  margin: 0 -28px -28px;
}
@media (max-width: 480px) {
  .m-match-list { margin: 0 -16px -16px; }
}

/* Body wrapper for the AI matches card. Caps at viewport math so the
   section never pushes past the footer, but shrinks to content when
   fewer cards are rendered -- otherwise an empty white strip shows
   between the last card and the section's bottom edge. */
.m-match-section-body {
  max-height: min(calc(100vh - 540px), 380px);
  /* Floor height so the section doesn't bounce around as the threshold
     filter shows/hides cards (or as the empty / wait / no-above states
     swap in). Cards still size to content -- any extra space appears as
     a white gap below the last card on purpose. */
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.m-match-section-body > .m-empty-state {
  flex: 1 1 auto;
  /* min-height keeps the empty / wait / no-above states visible even when
     the section itself has no explicit height (we removed that earlier so
     the cards list could shrink-to-fit without leaving a white margin). */
  min-height: 380px;
  justify-content: center;
}
.m-match-section-body > .m-match-list {
  /* Size to card content, capped by the section's max-height. Without
     this the list would stretch to fill the section and leave a white
     gap below the last card when there are fewer cards than fit. */
  flex: 0 1 auto;
  min-height: 0;
}
.m-match-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  /* Left padding 28px aligns the score badge column with the strip
     header's "Recent AI Matched Listings" text. Right padding 36px
     pulls the salary/chip/posted/arrow cluster off the card edge. */
  padding: 12px 36px 12px 28px;
  /* Fixed row height pegged to the natural height of rows that include
     a location (those wrap meta to two lines: title + city/state + employer),
     so every card sits at that uniform height regardless of whether the
     individual row has a location. flex-shrink:0 prevents the parent flex
     column from compressing rows with less content (no city/state) more
     than rows with more content. */
  height: 77px;
  flex-shrink: 0;
  background: #fff;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s;
}
/* Tiny GF flag at the top-left of the row for partner_id=1 jobs. */
.m-match-card__partner-flag {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 7px;
  vertical-align: -2px;
  opacity: 0.6;
  pointer-events: none;
}
/* Stripe alternation is driven by JS so hidden (filter-skipped) rows
   don't break the visual rhythm. JS toggles .is-alt on every other
   currently-visible card. */
.m-match-card.is-alt { background: #F8F9FB; }
.m-match-card:hover  { background: #EDE9FE; }
.m-match-card[hidden] { display: none; }

/* Hide / un-hide control: tiny circle pinned to the row's top-right. It
   lives inside the card <a>, so its JS handler stops the anchor navigating. */
/* Sits where the old carat arrow did: pinned to the row's right edge,
   vertically centered. z-index + its own click handler (which stops the
   event) keep this hit zone separate from the row-anchor navigation, so
   clicking the circle never opens the job. */
.m-match-card__hide {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #858D9A;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s, background .15s, color .15s;
}
/* Invisible hit halo: extends the clickable area ~9px past the visible circle
   so taps near the icon land on the button (which stops the event) instead of
   the row link -- a safer, more forgiving target without growing the circle. */
.m-match-card__hide::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.m-match-card:hover .m-match-card__hide { opacity: 1; }
.m-match-card__hide:hover { background: #4B5563; color: #fff; }
.m-match-card__hide:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  opacity: 1;
}
/* Restore (+) variant on already-hidden rows: brand-purple tint so it reads
   as a distinct "bring this back" affordance, and stays fully visible. */
.m-match-card__hide--restore {
  background: #E5E7EB;
  color: #9CA3AF;
  opacity: 1;
}
.m-match-card__hide--restore:hover { background: #D1D5DB; color: #6B7280; }

/* Faded look for member-hidden rows. Grayscale + reduced opacity is applied
   to every part EXCEPT the restore control, so the "+" stays crisp and
   clickable (a parent opacity would otherwise clamp the child's). */
.m-match-card--hidden > :not(.m-match-card__hide) {
  filter: grayscale(1);
  opacity: .55;
}
/* On hidden rows, push the normally-dark job title and salary to a light
   gray too so the whole row reads as muted/dismissed. */
.m-match-card--hidden .m-match-card__title,
.m-match-card--hidden .m-match-card__salary {
  color: #9CA3AF;
}

/* Thin section headers ("TODAY" / "YESTERDAY" / "MORE") sit between
   match-card rows and group them by matched-on calendar day. Same
   uppercase/letter-spaced typography as .mj-card-stat-label so it reads
   as a quiet divider rather than a competing heading. */
.m-match-list__hdr {
  padding: 6px 28px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6B7280;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
/* The first header sits flush at the top of the list -- skip the
   redundant top border so it doesn't double up with the card surface. */
.m-match-list__hdr:first-child { border-top: 0; }
.m-match-list__hdr[hidden]     { display: none; }

/* Standalone notice shown when the member has hit their daily AI-match
   cap. Free + Plus only -- Premium never sees this. Lives OUTSIDE the AI
   Matched Listings card (sibling of .m-section), styled as a soft purple
   banner so it reads as its own callout rather than a card row. */
.m-match-cap-note {
  margin: -8px 0 24px;
  padding: 10px 20px;
  background: #EDE9FE;
  border: 1px solid #DDD6FE;
  border-radius: var(--radius);
  font-size: .85rem;
  color: #4B5563;
  line-height: 1.4;
  text-align: center;
}
.m-match-cap-note strong { color: #1F2937; }
.m-match-cap-note__cta {
  display: inline-block;
  margin-left: 8px;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.m-match-cap-note__cta:hover { text-decoration: underline; }

/* Applicant identity block sits in the cluster on the employer dashboard's
   Application Recommendations card. Two stacked lines: applicant name on
   top (prominent), applied-when below in muted gray. Left-aligned so both
   lines share a single starting edge for cleaner reading. */
.m-match-card__applicant-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  white-space: nowrap;
  line-height: 1.25;
}
.m-match-card__applicant {
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
  line-height: 1.2;
}
.m-match-card__applicant-when {
  font-size: .76rem;
  color: #9CA3AF;
  line-height: 1.2;
}
.m-match-card__applicant-when--empty {
  color: #C7CACF;
  font-style: italic;
}
/* Applicant's home location ("City, State") sits as its own column
   directly to the right of the applicant-block (name + Applied stack),
   so the location reads as part of the same identity unit instead of
   being pushed to the far right of the cluster. */
.m-match-card__applicant-from {
  font-size: .9rem;
  color: #4B5563;
  white-space: nowrap;
  padding-left: 18px;
}

/* Lifecycle pill. Pinned to the right side of the row via
   margin-left:auto so the cluster's name/location/avatar stay grouped
   on the left while the current lifecycle stage ("Viewed", "Contacted",
   etc.) reads as a separate status indicator on the right edge -- just
   before the row arrow. Neutral gray to keep it from competing visually
   with the AI score ring. */
.m-match-card__lc-pill {
  margin-left: auto;
  margin-right: 48px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: #4B5563;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .01em;
}
/* Terminal "Withdrawn" state. Light-red fill + dark-red frame/text so
   the row reads at-a-glance that the applicant pulled their
   application -- distinct from the neutral white pill used for active
   lifecycle stages. Applied wherever the base .m-match-card__lc-pill
   is rendered (member + employer application lists, dashboard). */
.m-match-card__lc-pill--withdrawn {
  background: #FEE2E2;
  border-color: #B91C1C;
  color: #991B1B;
}
/* "Under Review" -- light-green in-progress pill. Member-facing only;
   employer lifecycle stages don't use this status string. */
.m-match-card__lc-pill--review {
  background: #DCFCE7;
  border-color: #16A34A;
  color: #166534;
}
/* Lifecycle tone pills -- mirror the employer status-picker option tones
   (ar-lc-status-opt--pos/--neg) so the applications-list pills use the exact
   same color coding as the picker popup. pos = progressing (green),
   neg = terminal-negative (red). Driven by AppLifecycleTone(). */
.m-match-card__lc-pill--pos {
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: #166534;
}
.m-match-card__lc-pill--neg {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #991B1B;
}

/* Applicant-card variant: shrink the body's fixed slot so the cluster
   (applicant name + applied-when) sits closer to the title rather than
   floating far to the right after a 360px-wide body. */
.m-match-card--applicant .m-match-card__body {
  flex: 0 0 240px;
}
/* Extra breathing room between the ring score and the applicant/match body
   on the dashboard strip and the employer applicants strip. The parent's
   14px gap reads tight against the circular ring; a small margin pushes
   the title column out a touch without disturbing tight contexts like the
   search-jobs or job-detail badges that reuse .m-match-card__score. */
.m-match-card--applicant .m-match-card__score,
.m-match-list .m-match-card__score {
  margin-right: 6px;
}

/* Applicant avatar inside the cluster. Mirrors the .ap-avatar treatment
   on /employers/applications.asp so the chip looks identical across both
   surfaces -- circular 40px, brand-purple gradient + initials when no
   members.photo is on file. */
.m-match-card__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #E5E7EB;
  display: inline-block;
}
.m-match-card__avatar--initials {
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* "Search All Jobs" CTA pill rendered below the match list. Centered
   horizontally; brand purple per the rest of the site's primary CTAs.
   Negative margin-bottom pulls the page's bottom edge up so the pill
   doesn't sit far above the footer. */
.m-search-all-cta {
  display: flex;
  justify-content: center;
  padding: 18px 0 0;
  margin-bottom: -24px;
}
.m-search-all-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #4F46E5;
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: background .15s;
}
.m-search-all-pill:hover { background: #4338CA; }
.m-search-all-pill svg  { flex: 0 0 auto; }

/* Ring-style match score. Renders as a circular conic-gradient progress
   ring with the score number reading inside a white center cutout.
   Callers pass the score percentage via inline `style="--pct:N"`. The
   band color (good/mid/low/unrated) comes from the modifier classes
   below, exposed as the `--score-color` custom property so the same
   value drives both the conic fill and the number's text color. */
.m-match-card__score {
  --pct: 0;
  --score-color: #9CA3AF;
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .78rem;
  color: var(--score-color);
  /* Two-layer background paints the white center disk ON TOP of the
     conic ring without a pseudo. Text content of the element renders
     above the background automatically, so the score number is always
     legible (positioned ::before would otherwise paint above text and
     hide it). */
  background:
    radial-gradient(circle closest-side, #ffffff 85%, transparent 86%),
    conic-gradient(var(--score-color) calc(var(--pct) * 1%), #E5E7EB 0);
  box-shadow: 0 1px 3px rgba(17, 24, 39, .08);
}
/* Tiny AI badge pinned to the upper-right of the score pill. Opt-in via
   the --with-ai modifier so listing surfaces (dashboard match cards,
   search-jobs cards) stay clean -- the badge only shows on standalone
   pills (e.g. the top of /members/job-detail.asp) where it can identify
   the rating as AI-generated without competing with neighboring icons. */
.m-match-card__score--with-ai::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff url("/images/ai.png") center/11px no-repeat;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  pointer-events: none;
}
/* Score-tier colors mirror the search-jobs badge palette for consistency
   across surfaces: green for strong matches, amber for marginal, red for
   low. Same thresholds (>=80 / >=60 / <60) drive both. */
.m-match-card__score--good     { --score-color: #16A34A; }
.m-match-card__score--mid      { --score-color: #F59E0B; }
.m-match-card__score--low      { --score-color: #DC2626; }
.m-match-card__score--unrated  { --score-color: #9CA3AF; }

/* Top-rated (>=90%) gold star overlay -----------------------------------------
   A small gold star pinned to a rating badge whose score is 90% or higher.
   The render sites add the --ace modifier class (server-side, and via JS in the
   employer review popup) whenever the score clears 90. Pure CSS overlay -- no
   animation. Shared across the member and employer surfaces, which both load
   this stylesheet. Default geometry targets the 42px badge; the overrides below
   handle the 38px / 60px / 96px variants. The star rides ::after, except on the
   job-detail badge -- it already uses ::after for its AI sub-badge, so there the
   star rides ::before at the top-left instead (an element has only one ::after).
   --------------------------------------------------------------------------- */
.m-match-card__score--ace,
.je-aim-score--ace,
.ar-aimatch-score--ace { position: relative; }

.m-match-card__score--ace:not(.m-match-card__score--with-ai)::after,
.je-aim-score--ace::after,
.ar-aimatch-score--ace::after,
.m-match-card__score--with-ai.m-match-card__score--ace::before {
  content: "\2605";              /* solid star */
  position: absolute;
  top: -7px;
  right: 1px;
  font-size: 17px;
  line-height: 1;
  color: #FBBF24;               /* gold */
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  pointer-events: none;
}
/* job-detail badge: star to the top-LEFT so it clears the AI sub-badge. */
.m-match-card__score--with-ai.m-match-card__score--ace::before { right: auto; left: 1px; }
/* 38px employer applications-list badge */
.je-aim-score--ace::after { top: -6px; font-size: 15px; }
/* 60px dashboard average-rating ring */
.m-stat-ring.m-match-card__score--ace::after { top: -10px; right: 2px; font-size: 24px; }
/* 96px employer review-popup modal score */
.ar-aim-modal-score.ar-aimatch-score--ace::after { top: -14px; right: 4px; font-size: 36px; }

/* Strong-match (>=85%) one-shot attention pulse. The server tags qualifying
   rows with .m-match-card--hot; the dashboard's load script adds .is-pulsing
   to the visible ones and strips it on animationend, so the green pulse plays
   exactly once when the dashboard first renders. */
@keyframes mMatchHotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
  100% { box-shadow: 0 1px 3px rgba(17,24,39,.08); }
}
/* Pulse only the circular score badge, not the whole row. animationend
   bubbles from the badge up to the card, so the load script's listener
   still strips .is-pulsing cleanly. The score badge sits above neighbors
   for the ring to read fully. */
.m-match-card--hot.is-pulsing .m-match-card__score {
  animation: mMatchHotPulse 0.6s ease-out 2;
  position: relative;
  z-index: 1;
}

.m-match-card__body {
  /* Fixed body width so the cluster after it always starts at the same
     horizontal column across rows. Combined with a fixed-width salary
     slot below, this aligns the chip pills' start position row-to-row. */
  flex: 0 0 360px;
  min-width: 0;
}
.m-match-card__title {
  font-weight: 600;
  font-size: .98rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-match-card__emp {
  color: #9CA3AF;
  display: inline-block;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.m-match-card__meta {
  font-size: .82rem;
  color: #6B7280;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.m-match-card__employer {
  color: #1F2937;
  font-weight: 600;
}
.m-match-card__sep {
  color: #D1D5DB;
}
.m-match-card__loc {
  color: #6B7280;
}
/* Right-side cluster after the body: salary (bold text), work-model and
   job-type as light pills, posted-date as muted text, then a right caret.
   Each piece is its own flex item so the row reads as separated cells. */
.m-match-card__salary {
  /* Fixed-width slot so the pills that follow start at a consistent
     horizontal position across rows regardless of how long any one
     salary string is. Wide enough for a dual six-figure range; any
     longer string (e.g. non-USD currency + " / yr" suffix) clips with
     an ellipsis rather than bleeding over the chips beside it. */
  flex: 0 0 180px;
  font-weight: 500;
  font-size: .95rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
}
.m-match-card__chip {
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #E5E7EB;
  border: 1px solid #D1D5DB;
  color: #1F2937;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Personal-state icons (bookmark, applied check) that live in the cluster
   grid's third column. Always render so the grid slot stays occupied and
   the dates column past it stays aligned. */
.m-match-card__flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.m-match-card__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.m-match-card__flag--bm  { color: #7C3AED; }
.m-match-card__flag--app { color: #16A34A; }
.m-match-card__posted {
  flex: 0 0 auto;
  font-size: .76rem;
  color: #9CA3AF;
  white-space: nowrap;
}
/* Stacks "Job Posted: ..." over "Matched: ..." in the right cluster so the
   row stays compact horizontally. The wrapper carries the leading margin
   that the inner spans used to provide individually. */
.m-match-card__dates {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: right;
  gap: 2px;
  /* margin-left: auto pins the dates to the cluster's right edge so
     they land in the same column row-to-row regardless of how wide the
     work_model / job_type chips are above them. */
  margin-left: auto;
  margin-right: 10px;
  /* Nudge the whole posted/matched block left, off the right edge. margin
     alone gets absorbed by the grid cell's auto-margin/stretch resolution
     (no visible shift), so use a transform -- it's not subject to that. */
  transform: translateX(-34px);
  line-height: 1.2;
}
.m-match-card__dates .m-match-card__posted {
  display: block;
  width: 100%;
  text-align: right;
}
/* Right-side cluster wrapper. CSS grid. The dates ride the trailing 1fr
   track so they stay pinned at a fixed spot just left of the row's "x"
   regardless of how wide the salary/chips are. The salary is the only
   flexible track -- minmax(0,180px) lets it shrink and ellipsize under
   pressure (it's the long, variable string) instead of forcing the grid
   to overflow and shove the dates rightward. Columns:
     minmax(0,180px)  salary slot (shrinks + ellipsizes; matches .m-match-card__salary)
     auto             chips slot  (natural width: 0/1/2 pills)
     50px             flags slot  (two 14px SVGs + gap + buffer)
     1fr              dates slot  (absorbs slack; dates pin right). */
.m-match-card__cluster {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 180px) auto 50px 1fr;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
/* Chips run inside their cluster cell as their own flex line so 0/1/2
   chips all left-align inside the fixed-width chips slot. */
.m-match-card__chips {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 480px) {
  .m-match-card { padding: 10px 12px; gap: 10px; }
  .m-match-card__score { flex: 0 0 36px; width: 36px; height: 36px; font-size: .68rem; }
  .m-match-card__title { font-size: .92rem; }
  /* On narrow screens, drop the desktop fixed widths -- body grows again
     and salary sizes to its own content. Cluster reverts from grid to
     flex so the empty chips/dates cells don't reserve dead space. */
  .m-match-card__body   { flex: 1 1 auto; }
  .m-match-card__salary { flex: 0 0 auto; font-size: .9rem; }
  .m-match-card__cluster {
    display: flex;
    grid-template-columns: none;
  }
  /* Hide the chips/dates text to keep the row compact. Flags still show. */
  .m-match-card__chips,
  .m-match-card__chip,
  .m-match-card__posted,
  .m-match-card__dates { display: none; }
}

.m-section--activity { min-height: 260px; }
.m-see-all { font-size: .85rem; color: var(--primary); font-weight: 500; }


.m-gear-spin {
  display: inline-block;
  animation: mGearSpin 10s linear infinite;
  color: var(--text-muted);
  line-height: 1;
}

.m-gear-lg {
  font-size: 1.6rem;
  position: relative;
  top: -10px;
}

.m-searching-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.m-searching-label {
  font-size: .65rem;
  font-weight: 500;
  color: #9CA3AF;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.m-dot-pulse {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.m-dot-pulse span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: mDotFade 2.4s ease-in-out infinite;
}

.m-dot-pulse span:nth-child(2) { animation-delay: .2s; }
.m-dot-pulse span:nth-child(3) { animation-delay: .4s; }

.m-dot-pulse--paused span {
  animation: none;
  opacity: .2;
  transform: scale(.85);
}

/* Static dots: present and fully visible, just not pulsing. Used for Basic-mode
   accounts, which receive no automatic AI matching, so the "actively searching"
   pulse would be misleading. Keeps the normal size/opacity (unlike --paused). */
.m-dot-pulse--static span {
  animation: none;
}

@keyframes mDotFade {
  0%, 80%, 100% { opacity: .2; transform: scale(.85); }
  40%           { opacity: 1;  transform: scale(1); }
}

@keyframes mGearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.m-threshold-badge {
  font-weight: 700;
  color: #B0B7C3;
}

.m-ai-sup {
  position: relative;
  top: -4px;
  margin-left: -3px;
}
.m-see-all:hover { text-decoration: underline; }

/* Empty state */
.m-empty-state {
  text-align: center;
  padding: 0 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.m-empty-state[hidden] { display: none; }
.m-empty-icon { font-size: 2.8rem; }
.m-empty-state h3 { font-size: 1.05rem; color: var(--text-dark); }
.m-empty-state p  { font-size: .95rem; color: var(--text-muted); max-width: 320px; }
.m-empty-state .btn { margin-top: 6px; }
.m-empty-state--centered { padding: 0 20px 40px; justify-content: center; min-height: 380px; }
.m-searching-badge { font-size: 1rem; padding: 10px 22px; color: #16a34a; border-color: #16a34a; }
.m-empty-state p.m-empty-searching { font-size: .95rem; color: var(--text-muted); margin: 0; }
.m-empty-state p.m-matching-wait-msg {
  font-size: .98rem;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.55;
  margin: 0;
  padding: 14px 20px;
  background: rgba(79,70,229,.035);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.m-matching-wait-msg a { color: #4F46E5; font-weight: 600; text-decoration: underline; }
.m-matching-wait-msg a:hover { color: #7C3AED; }

/* Standalone "browse the catalog" line under the Basic-mode panel -- plain
   muted text (no tinted box) so it reads as a secondary note, not a second card. */
.m-basic-off-browse { margin: 0; font-size: .92rem; color: var(--text-muted); }
.m-basic-off-browse a { color: #4F46E5; font-weight: 600; text-decoration: underline; }
.m-basic-off-browse a:hover { color: #7C3AED; }
.m-matching-wait-icon { color: #4F46E5; opacity: .85; animation: m-wait-pulse 2.4s ease-in-out infinite; }
@keyframes m-wait-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Colorful "matching off / upgrade to launch" rocket for the Basic-mode panel.
   Own class (not .m-matching-wait-icon) so the brand-blue tint + fade don't
   wash out its fills; gentle bob keeps it lively without looping the eye. */
.m-basic-off-icon {
  transform-origin: center;
  animation: m-basic-off-bob 3.2s ease-in-out infinite;
  /* Pull the robot down toward the message; the panel's 14px flex gap
     otherwise leaves it floating too far above the text. */
  margin-bottom: -8px;
}
@keyframes m-basic-off-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-5px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .m-basic-off-icon { animation: none; }
}
.m-matching-wait-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 600px;
  text-align: center;
}

/* ── Nav Bell ── */
.m-nav-bell {
  /* Alerts bell hidden site-wide; envelope now occupies this slot.
     Remove this line to restore the bell. */
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-mid);
  transition: var(--transition);
  flex-shrink: 0;
  margin-right: 10px;
}
.m-nav-bell:hover { color: var(--primary); }
/* Quiet state = no unread alerts. Bell is still fully clickable (opens
   the popup's empty state); the muted color just signals there's nothing
   urgent waiting. */
.m-nav-bell--quiet { color: #C8CDD6; }
.m-nav-bell--quiet:hover { color: #9CA3AF; }
.m-nav-bell:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.m-nav-bell .m-alert-badge {
  position: absolute;
  top: 4px;
  right: 0;
  width: 18px;
  height: 18px;
  font-size: .62rem;
}

/* ── Nav Messages (envelope) ── */
/* Mirrors .m-nav-bell so the envelope and bell read as a matched pair.
   No margin-right: the .m-nav-right flex gap handles spacing to the bell. */
.m-nav-msg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  /* Envelope frame reads dark gray (stroke inherits currentColor). */
  color: #374151;
  transition: var(--transition);
  flex-shrink: 0;
  transform: translate(-30px, 2px);
}
/* Bump the SVG up a touch from its 38x27 attribute size, and thin the stroke.
   Set here (not on the markup) so both headers grow/thin together. */
.m-nav-msg-ico { width: 44px; height: 32px; stroke-width: 1.2; }
.m-nav-msg:hover { color: var(--primary); }
/* "Quiet" = nothing unread. The frame stays the SAME dark #374151 whether or
   not there's a count -- only the badge (red count vs gray "0") and the
   wiggle reflect unread state. The class is kept solely to gate that animation
   (see the :not(.m-nav-msg--quiet) rule below); it no longer mutes the color. */
.m-nav-msg:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Message badge ALWAYS shows. Red with a count when unread, gray "0" when
   the inbox is clear (the --zero modifier). */
.m-msg-badge {
  position: absolute;
  top: 1px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #EF4444;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
}
/* Empty inbox: an outlined gray circle -- white fill, gray ring, gray "0"
   (box-sizing keeps the ring inside the fixed 18x18 so the size matches the
   filled count badge). */
.m-msg-badge--zero {
  background: #fff;
  color: #9CA3AF;
  border: 1px solid #9CA3AF;
  box-sizing: border-box;
}

/* ── Unread attention animation ──────────────────────────────────────────
   Only when there's something unread: the envelope is .m-nav-msg WITHOUT the
   --quiet modifier, and the badge is .m-msg-badge WITHOUT --zero. Both effects
   are mostly at rest with a short burst on a long loop so they nudge for
   attention without being a distraction. Animating the inner .m-nav-msg-ico
   (not the button) preserves the button's translate() offset. */
.m-nav-msg:not(.m-nav-msg--quiet) .m-nav-msg-ico {
  transform-origin: 50% 0;
  animation: m-msg-wiggle 3.2s ease-in-out infinite;
}
.m-msg-badge:not(.m-msg-badge--zero) {
  animation: m-msg-badge-pulse 3.2s ease-in-out infinite;
}

@keyframes m-msg-wiggle {
  /* Rest for the bulk of the loop, then a quick pendulum shake. */
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-11deg); }
  91% { transform: rotate(9deg); }
  94% { transform: rotate(-5deg); }
  97% { transform: rotate(2deg); }
}
@keyframes m-msg-badge-pulse {
  0%, 78%, 100% { transform: scale(1); }
  86% { transform: scale(1.28); }
  93% { transform: scale(1); }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .m-nav-msg:not(.m-nav-msg--quiet) .m-nav-msg-ico,
  .m-msg-badge:not(.m-msg-badge--zero) { animation: none; }
}

/* ── Alerts Stat Card ── */
.m-stat-card--alerts {
  cursor: pointer;
  position: relative;
}
.m-stat-card--alerts:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}
.m-stat-card--alerts:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.m-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #EF4444;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 50%;
  vertical-align: super;
  margin-left: 2px;
  line-height: 1;
}

/* ── Alerts Popup ── */
.m-alerts-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .45);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: mSetupFadeIn .2s ease;
}
.m-alerts-overlay--out {
  animation: mSetupFadeOut .24s ease forwards;
}

.m-alerts-modal {
  background: var(--white);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,.18));
  max-width: 640px;
  width: 100%;
  /* Tall by default so the empty state has room to breathe and a few
     alerts don't make the popup feel cramped. Caps at 80% of viewport so
     it never bleeds off the screen on short windows. */
  min-height: 560px;
  height: 560px;
  max-height: 80vh;
  overflow: hidden;          /* clip the purple bar to the rounded corners */
  animation: mSetupSlideIn .2s ease;
  display: flex;
  flex-direction: column;
}
.m-alerts-overlay--out .m-alerts-modal {
  animation: mSetupSlideOut .24s ease forwards;
}

/* Standard purple bar: matches the .ap-pane-header pattern used on
   /employers/applications. Bell + "Alerts" + count pill on the left,
   white X on the right. */
.m-alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  color: #fff;
  flex-shrink: 0;
}

.m-alerts-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  margin: 0;
}

.m-alerts-header-icon { font-size: 1.15rem; line-height: 1; }

/* Count pill, translucent-on-purple to match the applications pane chip. */
.m-alerts-count {
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.32);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* White-on-purple X, lightens on hover. */
.m-alerts-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.0);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.m-alerts-close:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.m-alerts-close:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

.m-alerts-list {
  list-style: none;
  padding: 12px 0;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.m-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 28px;
  font-size: 1.1rem;
  color: var(--text-mid);
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
}
.m-alert-item:last-child { border-bottom: none; }

.m-alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  margin-top: 8px;
}

.m-alert-text {
  flex: 1;
}

.m-alert-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  margin-top: 2px;
}
.m-alert-dismiss:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #EF4444;
}
.m-alert-dismiss:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.m-alert-item--removing {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .22s ease, transform .22s ease;
}

@media (max-width: 520px) {
  .m-alerts-modal { border-radius: 16px 16px 0 0; }
  .m-alerts-overlay { align-items: flex-end; padding: 0; }
}

/* ── Members Footer ── */
.m-footer {
  background: var(--text-dark);
  color: rgba(255, 255, 255, .7);
  margin-top: 60px;
}

.m-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 24px;
  flex-wrap: wrap;
}

.m-footer-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.m-footer-logo-img {
  height: 28px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.m-footer-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 2px;
}

.m-footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: .825rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .65);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}

.m-footer-nav a:hover {
  color: var(--white);
  background: rgba(255, 255, 255, .08);
}

.m-footer-nav-ai .m-tab-ai-icon {
  filter: brightness(0) invert(1);
  opacity: .7;
}

.m-footer-nav-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .15);
  margin: 0 8px;
  flex-shrink: 0;
}

.m-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.m-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px;
  font-size: .78rem;
  flex-wrap: wrap;
}

.m-footer-legal {
  display: flex;
  gap: 20px;
}

.m-footer-legal a,
.m-footer-bottom-inner a {
  color: rgba(255, 255, 255, .5);
  transition: color var(--transition);
}

.m-footer-legal a:hover,
.m-footer-bottom-inner a:hover {
  color: var(--white);
}

@media (max-width: 600px) {
  .m-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 16px;
  }

  .m-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }

  .m-footer-nav {
    gap: 2px;
  }
}

/* ── Profile Setup Popup ── */
.m-setup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .5);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: mSetupFadeIn .22s ease;
}

.m-setup-overlay--out {
  animation: mSetupFadeOut .26s ease forwards;
}

@keyframes mSetupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mSetupFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.m-setup-modal {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,.18));
  max-width: 460px;
  width: 100%;
  padding: 40px 36px 32px;
  text-align: center;
  animation: mSetupSlideIn .22s ease;
}

@keyframes mSetupSlideIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.m-setup-overlay--out .m-setup-modal {
  animation: mSetupSlideOut .26s ease forwards;
}

@keyframes mSetupSlideOut {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(16px); opacity: 0; }
}

.m-setup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.m-setup-close:hover {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-dark);
}

.m-setup-icon-wrap {
  margin-bottom: 16px;
}

.m-setup-icon {
  font-size: 2.6rem;
  line-height: 1;
}

.m-setup-modal h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.m-setup-modal > p {
  font-size: .925rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 28px;
}

.m-setup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.m-setup-actions .btn {
  text-align: center;
  justify-content: center;
}

.m-setup-note {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .m-setup-modal {
    padding: 32px 24px 28px;
  }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .m-stats-hero { padding: 28px 24px; }
  .m-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .m-nav-tabs  { display: none; }
  .m-hamburger { display: flex; }
  .m-nav-logo  { margin-right: auto; }
}

@media (max-width: 480px) {
  .m-nav-inner { padding: 0 16px; }
  .m-content   { padding: 20px 16px; }
  .m-stats-hero { padding: 20px 16px; min-height: unset; }
  .m-stats-grid { gap: 12px; }
  .m-stat-card  { padding: 16px 14px; min-height: 140px; }
  .m-stat-num   { font-size: 1.5rem; }
  .m-stat-num--word { font-size: 1rem; }
  .m-section    { padding: 20px 16px; }
}


/* =============================================
   Profile Setup Wizard  (/members/profile_wizard.asp)
   ============================================= */

/* Overlay backdrop — hidden until pwOpen() adds .pw-open */
.pw-page {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.82);
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pwFadeIn 0.22s ease;
}
.pw-page.pw-open {
  display: flex;
}
.pw-page.pw-closing {
  animation: pwFadeOut 0.24s ease forwards;
}

@keyframes pwFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pwFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Wizard card */
.pw-modal {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.30);
  width: 100%;
  max-width: 860px;
  height: 82vh;
  max-height: 780px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pwSlideIn 0.22s ease;
}
.pw-closing .pw-modal {
  animation: pwSlideOut 0.24s ease forwards;
}

@keyframes pwSlideIn {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pwSlideOut {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(18px); opacity: 0; }
}

/* ── Header ── */
.pw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 22px;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  flex-shrink: 0;
}

.pw-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pw-wand {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.pw-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1;
  position: relative;
  top: 2px;
  letter-spacing: -.02em;
}

.pw-review-badge {
  display: inline-block;
  padding: 5px 11px;
  background: #F59E0B;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  border-radius: 4px;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(245,158,11,.28);
  text-transform: uppercase;
  position: relative;
  top: 1px;
}

.pw-review-note {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-left: 4px solid #F59E0B;
  border-radius: 6px;
  color: #78350F;
  font-size: .9rem;
  line-height: 1.5;
}

.pw-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  text-decoration: none;
}
.pw-close svg { stroke-width: 2.2; }
.pw-close:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.4);
}
.pw-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Progress bar ── */
.pw-progress-wrap {
  height: 5px;
  background: var(--border);
  flex-shrink: 0;
}

.pw-progress-fill {
  height: 100%;
  background: var(--success);
  transition: width 0.45s ease;
  width: 16.67%; /* default: step 1 of 6 */
}

/* ── Scrollable body ── */
.pw-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scroll-behavior: smooth;
}

/* ── Step panels ── */
.pw-step { display: none; }

.pw-step--active {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  padding: 36px 40px 28px;
  box-sizing: border-box;
}

.pw-step-intro  { margin-bottom: 28px; }

.pw-step-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 7px;
}

.pw-step-desc {
  font-size: .9rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Form layout ── */
.pw-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pw-row {
  display: grid;
  gap: 16px;
}
.pw-row--2 { grid-template-columns: 1fr 1fr; }
.pw-row--3 { grid-template-columns: 1fr 1fr 1fr; }

.pw-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pw-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-mid);
  letter-spacing: .025em;
  text-transform: uppercase;
}

.pw-optional {
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: .78rem;
}

.pw-readonly-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 500;
  background: #F1F5F9;
  color: #94A3B8;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 5px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

.pw-input {
  width: 100%;
  padding: 10px 14px;
  font-size: .9rem;
  font-family: var(--font);
  color: var(--text-dark);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.pw-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.pw-input--readonly {
  background: #F8FAFC;
  color: #9CA3AF;
  cursor: not-allowed;
}
.pw-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.pw-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

/* ── Choice cards (SELECT ONE) ── */
.pw-choices {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pw-choices--3 .pw-choice {
  flex: 1;
  min-width: 180px;
}

.pw-choices--wrap {
  flex-wrap: wrap;
  justify-content: center;
}
.pw-choices--wrap .pw-choice {
  flex: 0 1 calc(33.33% - 14px);
  min-width: 180px;
}

.pw-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 20px 28px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.18s, box-shadow 0.2s;
  font-family: var(--font);
}
.pw-choice:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(79, 70, 229, 0.12);
}
.pw-choice:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
.pw-choice--selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12),
              0 8px 28px rgba(79, 70, 229, 0.14);
}

.pw-choice-icon {
  color: var(--text-muted);
  transition: color 0.2s;
  line-height: 1;
}
.pw-choice:hover .pw-choice-icon,
.pw-choice--selected .pw-choice-icon { color: var(--primary); }

.pw-choice-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

.pw-choice-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Step 3 (Job Type & Salary): shrink cards so the salary slider below
   is visible without scrolling on initial render. */
#pwStep3 .pw-choices { gap: 12px; }
#pwStep3 .pw-choice {
  padding: 14px 14px 12px;
  gap: 6px;
  border-radius: 12px;
}
#pwStep3 .pw-choice-icon svg { width: 30px; height: 30px; }
#pwStep3 .pw-choice-title { font-size: .92rem; }
#pwStep3 .pw-choice-desc  { font-size: .74rem; line-height: 1.4; }

/* ── Footer nav ── */
.pw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-top: 1px solid var(--border);
  background: #FAFBFC;
  flex-shrink: 0;
}

/* Step dots */
.pw-step-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.25s, transform 0.25s;
}
.pw-dot--active {
  background: var(--primary);
  transform: scale(1.4);
}
.pw-dot--done {
  background: var(--primary);
  opacity: 0.35;
}

/* Prev / Next buttons */
.pw-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--font);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  line-height: 1;
}
.pw-nav-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.pw-nav-btn--prev {
  background: var(--white);
  color: var(--text-mid);
}
.pw-nav-btn--prev:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.pw-nav-btn--prev:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.pw-nav-btn--next {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.pw-nav-btn--next:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.pw-nav-btn--next:disabled,
.pw-nav-btn--saving {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Saving spinner */
.pw-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pwSpin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes pwSpin {
  to { transform: rotate(360deg); }
}

/* ── Toast notification ── */
.pw-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: #1E293B;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font);
  padding: 12px 24px;
  border-radius: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
  z-index: 9999;
  white-space: nowrap;
  max-width: calc(100vw - 48px);
}
.pw-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pw-toast--error   { background: #DC2626; }
.pw-toast--success { background: var(--success); }

/* ── Step sub-section (combined steps) ── */
.pw-step-section       { margin-top: 26px; padding-top: 0; }
.pw-step-section-title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 0 0 6px; }

/* ── Salary Slider (Step 5) ── */
.pw-salary-wrap        { display: flex; flex-direction: column; gap: 0; padding: 12px 0 0; }

.pw-salary-slider-wrap { position: relative; padding: 54px 44px 0; margin-bottom: 6px; }

.pw-salary-tooltip {
  position: absolute; top: 0;
  transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: .95rem; font-weight: 700; font-family: var(--font);
  padding: 9px 18px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  transition: left 0.06s linear;
}
.pw-salary-tooltip::after {
  content: "";
  position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom: none;
  border-top-color: var(--primary);
}

/* Custom range input */
:root { --sal-track: #E2E8F0; }

.pw-salary-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--primary) 19%, var(--sal-track) 19%);
}
.pw-salary-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
  cursor: pointer; transition: box-shadow 0.15s;
}
.pw-salary-slider::-webkit-slider-thumb:hover,
.pw-salary-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(79,70,229,0.22);
}
.pw-salary-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
  cursor: pointer;
}
.pw-salary-slider::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--sal-track);
}

.pw-salary-desc   { font-size: .9rem; color: var(--text-mid); font-weight: 500;
                    margin: 10px 0 0; text-align: center; }

.pw-salary-tabs   { display: flex; border: 1.5px solid var(--primary);
                    border-radius: var(--radius-sm); overflow: hidden;
                    align-self: center; }
.pw-salary-tab    { padding: 7px 16px; font-size: .85rem; font-weight: 600;
                    font-family: var(--font); background: none; border: none;
                    color: var(--primary); cursor: pointer;
                    transition: background 0.15s, color 0.15s; }
.pw-salary-tab + .pw-salary-tab { border-left: 1.5px solid var(--primary); }
.pw-salary-tab--active { background: var(--primary); color: #fff; }
.pw-salary-tab:hover:not(.pw-salary-tab--active) { background: var(--primary-light); }

/* ── AI Matching & Notifications (Step 7) ── */
.pw-notify-block       { margin-bottom: 28px; }
.pw-notify-block:last-child { margin-bottom: 0; }

.pw-toggle-list        { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.pw-toggle-row         { display: flex; align-items: center; gap: 16px;
                         padding: 16px 20px; background: var(--bg-alt);
                         border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pw-toggle-info        { flex: 1; }
.pw-toggle-label       { font-size: .9rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; }
.pw-toggle-desc        { font-size: .9rem; color: var(--text-muted); margin-top: 3px; }

.pw-toggle {
  position: relative; flex-shrink: 0;
  width: 46px; height: 26px; border-radius: 13px;
  background: #CBD5E1; border: none; cursor: pointer;
  transition: background 0.2s; padding: 0;
}
.pw-toggle[aria-checked="true"]  { background: var(--primary); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.pw-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  pointer-events: none;
}
.pw-toggle[aria-checked="true"] .pw-toggle-thumb { transform: translateX(20px); }

/* Tier-locked toggle: forced OFF, visibly dim, click ignored. */
.pw-toggle--locked,
.pw-toggle[disabled] {
  background: #E5E7EB !important;
  cursor: not-allowed;
  opacity: 0.55;
}
.pw-toggle--locked:focus-visible,
.pw-toggle[disabled]:focus-visible { outline: none; }

/* ── Completion Screen (Step 8) ── */
.pw-complete        { display: flex; flex-direction: column; align-items: center;
                      justify-content: center; text-align: center;
                      flex: 1; gap: 18px; padding: 8px 0; }

.pw-complete-headline { font-size: 2.4rem; font-weight: 800; color: var(--text-dark);
                        letter-spacing: -.02em; line-height: 1; }

.pw-complete-check  { width: 90px; height: 90px; border-radius: 50%;
                      background: #16A34A; display: flex; align-items: center;
                      justify-content: center; flex-shrink: 0;
                      box-shadow: 0 0 0 10px rgba(22,163,74,0.12); }
.pw-complete-check svg { width: 46px; height: 46px; }

.pw-complete-title  { font-size: 1.6rem; font-weight: 700; color: var(--text-dark);
                      margin: 0; }
.pw-complete-sub    { font-size: 1.05rem; color: var(--text-mid); max-width: 420px;
                      line-height: 1.65; margin: 0; }
.pw-complete-note   { font-size: .9rem; color: var(--text-muted); max-width: 400px;
                      line-height: 1.6; margin: 0; border-top: 1px solid var(--border);
                      padding-top: 18px; }

/* ── Category Picker (Step 4) ── */
.pw-cat-wrap        { display: flex; flex-direction: column; gap: 14px; }

.pw-cat-sel-area    { display: flex; flex-wrap: wrap; gap: 10px; min-height: 52px;
                      align-items: center; padding: 14px 18px;
                      background: var(--bg-alt); border-radius: var(--radius-sm);
                      border: 1px solid var(--border); }
.pw-cat-none        { font-size: .85rem; color: var(--text-muted); }

.pw-cat-browser     { max-height: 280px; overflow-y: auto;
                      border: 1px solid var(--border); border-radius: var(--radius-sm);
                      padding: 8px 16px 16px; }
.pw-cat-group       { margin-bottom: 16px; }
.pw-cat-group:last-child { margin-bottom: 0; }
.pw-cat-group-label { font-size: .72rem; font-weight: 700; color: var(--text-muted);
                      text-transform: uppercase; letter-spacing: .06em;
                      margin-bottom: 8px; }

.pw-cat-pills       { display: flex; flex-wrap: wrap; gap: 7px; }

.pw-cat-pill        { display: inline-flex; align-items: center; gap: 5px;
                      padding: 5px 13px; border: 1.5px solid var(--border);
                      border-radius: 40px; font-size: .83rem; font-weight: 500;
                      color: var(--text-mid); background: var(--white);
                      cursor: pointer; transition: var(--transition);
                      font-family: var(--font); line-height: 1.3; }
.pw-cat-pill:hover  { border-color: var(--primary); color: var(--primary);
                      background: var(--primary-light); }
.pw-cat-pill--sel   { border-color: var(--primary); background: var(--primary-light);
                      color: var(--primary); }
.pw-cat-pill-x      { font-size: .88rem; line-height: 1; opacity: .65; }

.pw-cat-empty       { font-size: .875rem; color: var(--text-muted);
                      padding: 24px 0; text-align: center; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .pw-page.pw-open { padding: 0; align-items: flex-end; }
  .pw-modal        { border-radius: 20px 20px 0 0; height: 94vh; max-height: 94vh; }
  .pw-step--active { padding: 24px 20px 20px; }
  .pw-header  { padding: 18px 20px 16px; }
  .pw-footer  { padding: 14px 20px; }
  .pw-row--2,
  .pw-row--3  { grid-template-columns: 1fr; }
  .pw-choices { flex-direction: column; }
  .pw-choice  { flex-direction: row; text-align: left; padding: 20px; gap: 16px; }
  .pw-choice-icon { flex-shrink: 0; }
}


/* ============================================================
   Job cards -- shared between search-jobs.asp (results list) and
   job-detail.asp (single-job detail view). Each card renders a
   purple-gradient header bar with the job title + posted date,
   followed by a body containing title/employer, pills, location,
   stat strip, and (on the search page only) a clamped description
   excerpt + Details button.
============================================================ */

.mj-cards {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 20px 0;
}
.mj-card {
  display: flex;
  flex-direction: column;
  height: 580px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.mj-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 14px;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  color: #fff;
  flex: 0 0 auto;
}
/* Applied state -- the member already submitted an application for this job.
   Green gradient (Tailwind green-600 -> green-700) so the card visually
   confirms an applied status at a glance. */
.mj-card-header--applied {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}
/* Withdrawn state -- the member applied but later withdrew. Gray gradient
   (Tailwind gray-500 -> gray-600) so the strip reads as inactive/neutral
   rather than the active purple or the green applied treatment. */
.mj-card-header--withdrawn {
  background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
}
.mj-card-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.mj-card-title-id {
  font-size: .65rem;
  font-weight: 500;
  opacity: .75;
  margin-left: 4px;
  vertical-align: middle;
}
.mj-card-date {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  flex: 0 0 auto;
}
.mj-card-body {
  flex: 1 1 auto;
  padding: 18px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: .88rem;
  color: var(--text-mid, #475569);
}

/* Top row inside the body: title (large, dark) + small posted line on
   the left, then the employer logo right next to it, then the action
   cluster pinned to the right via margin-left:auto on the cluster. */
.mj-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.mj-card-top-text { min-width: 0; flex: 0 1 auto; }
.mj-card-job-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mj-card-top-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  font-size: .82rem;
  color: #6B7280;
}
.mj-card-employer { color: #6B7280; font-weight: 600; font-size: .95rem; }
.mj-card-top-sep  { color: #9CA3AF; }
.mj-card-top-posted { color: #6B7280; }
/* Guest-mode "Accepting applications until ..." nudge rendered next to
   the Posted date on search-jobs cards + job-detail header. Quiet purple
   so it reads as a soft scarcity prompt without competing with the
   posted-on label beside it. */
.mj-card-top-deadline { color: #6D28D9; font-weight: 600; }
.mj-card-top-actions {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  flex: 0 0 auto;
  margin-left: auto;   /* pin to the right edge regardless of how
                          short the title block is */
}

/* "Withdrawn" pill in the card's top-action cluster, just left of the
   bookmark. Light-red treatment mirrors the withdrawn lifecycle pill used
   elsewhere (m-match-card__lc-pill--withdrawn). */
.mj-card-withdrawn-pill {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #FEE2E2;
  border: 1px solid #B91C1C;
  color: #991B1B;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Employer logo (or generic-employer SVG fallback) sandwiched between
   the title block and the action cluster. flex: 0 0 auto and align-self
   stretch so the box matches the height of the title+meta lines without
   shifting the text on its left. */
.mj-card-top-logo {
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;   /* keep padding+border inside the stretched
                               height so the box matches the text block
                               exactly, not text-block + padding. */
  width: 110px;              /* landscape-friendly: most employer logos
                                are wider than tall. Height stays pinned
                                to the title+meta rows via stretch. */
  margin-top: 6px;           /* nudge down so the logo box sits closer to
                                the meta line baseline rather than the
                                title cap-height */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  padding: 4px;
}
.mj-card-top-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mj-card-top-logo svg {
  /* The fallback building icon has a 1:1 viewBox; scale by height so
     it stays square inside the wider landscape box. */
  height: 80%;
  width: auto;
  color: #9CA3AF;
}

.mj-card-airating {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  margin: -4px;
  margin-top: 4px;
  color: #4B5563;
  border-radius: 6px;
  flex: 0 0 auto;
  cursor: help;
}
.mj-card-airating-badge {
  position: absolute;
  top: -7px;
  right: -10px;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #16A34A;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
/* Score-based variants. Thresholds match the prototype's matches-table:
   >=80 good (green), >=60 mid (amber), <60 low (red), no record => gray. */
.mj-card-airating-badge--good { background: #16A34A; }
.mj-card-airating-badge--mid  { background: #F59E0B; }
.mj-card-airating-badge--low  { background: #DC2626; }
.mj-card-airating-badge--none { background: #6B7280; }

.mj-card-bookmark {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  margin: -4px;
  color: #4B5563;
  cursor: pointer;
  border-radius: 6px;
  flex: 0 0 auto;
  transition: color .15s, background .15s;
}
.mj-card-bookmark:hover { color: #4F46E5; background: #F5F3FF; }
.mj-card-bookmark.is-saved { color: #4F46E5; }
.mj-card-bookmark.is-saved svg path { fill: currentColor; }
.mj-card-bookmark:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}

/* Purple "saved!" pulse. JS adds .bm-pulsing to the bookmark control the
   moment a job is saved (not on un-save, not on page load) and strips it on
   animationend, so the star pops once with a brief purple glow. Applies to
   both the card star (.mj-card-bookmark) and the job-detail Save button
   (.jd-save-btn). */
@keyframes bmSavePulse {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
  40%  { transform: scale(1.45); filter: drop-shadow(0 0 7px rgba(124,58,237,.75)); }
  100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(124,58,237,0)); }
}
.mj-card-bookmark.bm-pulsing svg,
.jd-save-btn.bm-pulsing svg {
  transform-origin: center;
  animation: bmSavePulse .5s ease-out;
}

/* Message-the-employer pill. Shown in the top-right action cluster (in
   place of the AI score + bookmark) once the member has applied to the
   job; envelope icon + "Message Employer" label. Brand-purple gradient
   fill so it reads as the primary post-application action. Opens the
   compose modal on /members/job-detail.asp. */
.mj-card-msg {
  appearance: none;
  position: relative; /* anchor for the .mj-card-msg-dot unread indicator */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  /* White fill + gray outline + gray label -- matches the employer end's
     "Message Applicant" pill (.ar-msg-applicant-btn) so both sides look alike. */
  border: 1px solid #374151;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(17,24,39,.12);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.mj-card-msg:hover { background: #F3F4F6; box-shadow: 0 3px 8px rgba(17,24,39,.2); }
.mj-card-msg:active { transform: translateY(1px); }
.mj-card-msg svg { flex: 0 0 auto; }
.mj-card-msg:focus-visible {
  outline: 2px solid #4F46E5;
  outline-offset: 2px;
}
/* Unread-messages indicator: small red dot pinned to the button's top-right
   corner. Rendered only when the job has unread incoming messages for the
   member. The white ring lifts it off the button edge. */
.mj-card-msg-dot {
  position: absolute;
  top: -8px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #EF4444;
  border: 2px solid #fff;
  box-sizing: border-box;
  pointer-events: none;
}

/* Pill row -- color-coded by data type for fast visual scanning. */
.mj-card-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* Force the work-model + job-type pills onto their own line below the
   category pills by giving their wrapper full width within the flex row. */
.mj-card-pills-row2 { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 12px; }
.mj-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}
.mj-pill--cat  { background: #EDE9FE; color: #5B21B6; border-color: #C4B5FD; }
.mj-pill--work { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.mj-pill--type { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }

/* Category-fix "?" rendered as a corner badge attached to the last
   category pill on partner-feed jobs. */
.mj-card-pills .mj-pill-wrap {
  position: relative;
  display: inline-flex;
}
.mj-card-pills .cc-trigger {
  position: absolute;
  top: -6px;
  right: -7px;
  width: 14px;
  height: 14px;
  margin: 0;
  font-size: .58rem;
  background: #6B7280;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.mj-card-pills .cc-trigger:hover {
  background: #4F46E5;
  transform: scale(1.1);
}

/* Meta row: location pin and (when present) the closing-date indicator. */
.mj-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 6px 0;
  font-size: .88rem;
  color: #4B5563;
}
.mj-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mj-card-meta-item svg { color: #6B7280; flex: 0 0 auto; }

/* Shaded stat strip: 3 equal columns. */
.mj-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mj-card-stat {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}
.mj-card-stat-label {
  font-size: .68rem;
  font-weight: 700;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.mj-card-stat-value {
  font-size: .92rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Description excerpt (search-results card only): clamp to a fixed
   height so the Details button below stays pinned to the same spot
   regardless of how long the source text is. */
.mj-card-desc {
  position: relative;
  margin: 6px 0 0;
  color: #4B5563;
  font-size: 1.0625rem;
  line-height: 1.65;
  max-height: 9.9em;  /* ~6 lines at line-height 1.65 */
  overflow: hidden;
}
.mj-card-desc-cut {
  color: #7C3AED;
  font-weight: 700;
  letter-spacing: .04em;
  margin-left: 2px;
}

/* Actions row pinned to the bottom of the card. */
.mj-card-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mj-card-partner-flag {
  width: 14px;
  height: 14px;
  margin-right: auto;
  margin-bottom: -18px;
  opacity: .85;
}
.mj-card-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .15s, box-shadow .15s;
}
.mj-card-details-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 4px 12px rgba(79,70,229,.25);
}
/* "View Application" variant: green gradient matching the .va-status-cell
   panels and the .mj-card-header--applied strip on job-detail.asp so the
   applied state reads consistently across surfaces. */
.mj-card-details-btn--applied {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
}
.mj-card-details-btn--applied:hover {
  box-shadow: 0 4px 12px rgba(22,163,74,.28);
}
/* "View Application" withdrawn variant: gray gradient matching the
   .mj-card-header--withdrawn strip so a withdrawn application reads as
   inactive across the whole card rather than the active purple. */
.mj-card-details-btn--withdrawn {
  background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
}
.mj-card-details-btn--withdrawn:hover {
  box-shadow: 0 4px 12px rgba(75,85,99,.28);
}