/* ═══════════════════════════════════════════════════════════════════════
   mpma.css — MPMA Manufacturing Pathways skin.
   Additive layer over styles.css + coaching.css. Keeps the VisionOne
   "Unstoppable" design structure (crisp cards, pill accents, rings) dressed
   in the MPMA brand: deep navy #003E6B, accent blue #0074B8, light gray
   #F5F7F8 sections, #333 body copy — Montserrat display / Open Sans body.
   Theme colors themselves come from the tenant (applied as CSS vars by app.js).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --mp-navy: #003E6B;        /* Primary Blue — buttons, headers, icons, nav */
  --mp-navy-deep: #002A49;   /* Deeper navy for gradients / sidebar bottom */
  --mp-blue: #0074B8;        /* Accent Blue — links, highlights, 2nd buttons */
  --mp-gray: #F5F7F8;        /* Light Gray — section backgrounds, cards */
  --mp-ink: #333333;         /* Dark Gray — body copy */
  --primary-tint: #e6eef5;   /* Navy at ~8% — chips, tinted icon plates */
  --mp-display: "Montserrat", "Poppins", "Segoe UI", system-ui, sans-serif;
  --mp-ui: "Poppins", "Montserrat", "Segoe UI", system-ui, sans-serif;
}

/* ── Brand typography hierarchy (H1 large bold → body regular) ──────────── */
.topbar h1, .card h2, .card h3, .brand-title {
  font-family: var(--mp-display) !important;
  letter-spacing: -.005em;
  font-weight: 700;
}
.topbar h1 { text-transform: none; font-weight: 700; }
.card h3 { font-weight: 600; }                      /* H3 = medium weight */
.nav-group { font-family: var(--mp-ui); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
button, .btn { font-family: var(--mp-ui); font-weight: 600; }
button.primary, .btn.primary { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* ── Top banner: the Manufacturing Pathways lockup, MPMA accent-blue rule ─
      The logo already carries the wordmark and the "in conjunction with MPMA &
      MN Manufactured" line, so no separate org text sits beside it. ────────── */
/* The logo is an SVG with almost no internal padding, so with the bar sized to
   the image it reads as squashed against the top edge and the blue rule. The
   padding is what gives it room; align-items:center keeps it optically centred
   in that room at every breakpoint. */
.app-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; box-sizing: border-box;
  background: var(--surface, #fff);
  border-bottom: 3px solid var(--mp-blue);
}
.app-topbar-logo { display: block; height: 72px; width: auto; max-width: 100%; }
@media (max-width: 900px) { .app-topbar { padding: 13px 18px; } .app-topbar-logo { height: 58px; } }
@media (max-width: 640px) { .app-topbar { padding: 10px 14px; } .app-topbar-logo { height: 46px; } }

/* ── Sidebar brand + Powered-by-VisionOne footer ────────────────────────── */
.brand-title { font-size: 22px; text-transform: uppercase; }
.brand-tag { font-size: 12px; opacity: .8; }
.powered-by {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 11px; letter-spacing: .03em; color: rgba(255,255,255,.62); font-weight: 600;
}

/* ── Support banner (988 Lifeline) — always visible where used. Deliberately
      OFF-palette: an alert must not read as ordinary brand chrome. ────────── */
.crisis-banner {
  background: #fff5f5; border: 1px solid #f0c8c8; border-left: 4px solid #b3261e;
  color: #7a1a15; border-radius: 10px; padding: 12px 16px; margin: 0 0 18px; font-size: 13.5px;
}
.crisis-banner b { color: #b3261e; }

/* ── Checkable rows (MN resources, pathway planner, education) ──────────── */
.checkrow { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--border, #e5e7eb); cursor: pointer; }
.checkrow:last-child { border-bottom: 0; }
.checkrow input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--primary); cursor: pointer; }
.checkrow a { color: var(--accent); font-size: 12px; white-space: nowrap; }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress { height: 9px; background: #e3e9ee; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--mp-navy), var(--accent, var(--mp-blue))); border-radius: 999px; transition: width .3s ease; }

/* ── Stat tiles (financial calculator) ──────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--mp-navy); border-radius: 12px; padding: 18px; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.06)); }
.stat-n { font-family: var(--mp-display); font-size: 30px; font-weight: 700; color: var(--mp-navy); line-height: 1; }
.stat-l { font-size: 12.5px; color: var(--muted, #6b7280); margin-top: 6px; }

/* ── Chips (ATS keywords) ───────────────────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip, span.chip { display: inline-block; background: var(--primary-tint); color: var(--mp-navy-deep); border: 1px solid #c9dced; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }

/* ── Timeline (transition countdown) ────────────────────────────────────── */
.timeline { position: relative; margin: 4px 0 0 8px; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #dbe2e8; }
.tl-stage { position: relative; margin-bottom: 8px; }
.tl-dot { position: absolute; left: -26px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #c2d2de; border: 2px solid var(--bg, #F5F7F8); }
.tl-stage.is-active .tl-dot { background: var(--mp-blue); box-shadow: 0 0 0 4px rgba(0,116,184,.18); }
.tl-body { background: var(--surface); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 12px 16px; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.05)); }
.tl-stage.is-active .tl-body { border-color: var(--mp-navy); }
.tl-when { font-family: var(--mp-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; color: var(--mp-navy); margin-bottom: 6px; }
.tl-now { font-family: var(--wt-font-stack, sans-serif); background: var(--mp-blue); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; margin-left: 6px; vertical-align: middle; }
.tl-badge { margin-top: 10px; font-size: 14px; color: var(--mp-navy-deep); }

/* ── Shop-floor culture guide (tag pairs: expectation vs. reality) ──────── */
.culture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.culture-card { background: var(--surface); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 18px; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.06)); }
.culture-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.culture-ic { font-size: 22px; }
.culture-head h3 { margin: 0; font-size: 16px; }
.culture-row { display: flex; gap: 10px; margin: 6px 0; font-size: 13px; line-height: 1.45; }
.culture-tag { flex: none; width: 62px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 0; text-align: center; height: fit-content; border-radius: 6px; }
.culture-tag.mil { background: var(--primary-tint); color: var(--mp-navy-deep); }
.culture-tag.civ { background: #e6f1f9; color: #005a8f; }
.culture-do { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #eee); font-size: 13px; color: var(--text); }
.culture-do b { color: var(--mp-navy); }

/* ── Plain-language rewrite output block ────────────────────────────────── */
.dm-out { background: var(--soft, #F5F7F8); border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 16px; }

/* Buttons pick up MPMA navy automatically via --primary; give ghost a navy hover. */
button.ghost:hover { background: var(--primary-tint); border-color: #c2d2de; }

/* ── Inline SVG icons (replace emoji) ───────────────────────────────────── */
.ic { display: inline-block; vertical-align: -0.18em; flex: none; }
/* Runtime emoji→icon replacements: a 1em inline box the SVG fills, so it flows
   with text on one line and never balloons regardless of the SVG's own attrs. */
.ic-emoji { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; line-height: 0; color: var(--mp-navy); }
.ic-emoji svg, .ic-emoji .ic { display: block; width: 100% !important; height: 100% !important; }
/* On dark surfaces (sidebar, active tabs) inherit the light text color instead */
.sidebar .ic-emoji, .tabbar button.active .ic-emoji, .coach-tab.is-active .ic-emoji, button.primary .ic-emoji, .btn:not(.ghost) .ic-emoji { color: currentColor; }
/* Nav rows: icon + label aligned */
#nav a { display: flex; align-items: center; gap: 10px; }
.nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; opacity: .92; flex: none; }
.nav-ic .ic { width: 18px; height: 18px; }
.nav-lbl { flex: 1; min-width: 0; }
/* Icons inside headings/buttons inherit text color; nudge baseline */
h1 .ic, h2 .ic, h3 .ic, button .ic, .btn .ic, summary .ic { vertical-align: -0.15em; margin-right: 4px; }
/* Card-heading leading icon accent (navy) */
.card h2 .ic, .card h3 .ic { color: var(--mp-navy); }

/* ── Resource list (branded rows) ───────────────────────────────────────── */
.res-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.res-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb); border-left: 3px solid var(--mp-navy); border-radius: 10px; background: var(--surface, #fff); transition: border-color .15s, box-shadow .15s, transform .08s; }
.res-item:hover { border-color: var(--mp-navy); border-left-color: var(--mp-blue); box-shadow: var(--wt-shadow-1, 0 4px 14px rgba(16,24,16,.07)); transform: translateY(-1px); }
.res-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.res-item-title { font-weight: 700; font-size: 14px; color: var(--mp-navy-deep); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-item-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--primary-tint); color: var(--mp-navy); }
.res-item-desc { font-size: 12.5px; color: var(--ink-soft, #4b5563); line-height: 1.45; }
.res-item-ic { flex: none; color: var(--mp-navy); opacity: .7; display: inline-flex; }
.res-item:hover .res-item-ic { opacity: 1; color: var(--mp-blue); }

/* ── Persistent page footer (co-branding on every page) ─────────────────── */
.app-footer { margin: 34px auto 8px; padding-top: 16px; border-top: 1px solid var(--border, #e5e7eb); text-align: center; font-size: 12px; letter-spacing: .02em; color: var(--muted, #6b7280); }
.app-footer b { color: var(--mp-navy); font-weight: 700; }

/* ── Admin console ──────────────────────────────────────────────────────── */
.adm-funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.adm-funnel-row { display: flex; align-items: center; gap: 10px; }
.adm-funnel-l { flex: none; width: 96px; font-size: 12.5px; color: var(--ink-soft, #4b5563); text-align: right; }
.adm-funnel-bar { flex: 1; height: 18px; background: #eaf0f5; border-radius: 6px; overflow: hidden; }
.adm-funnel-bar > div { height: 100%; background: linear-gradient(90deg, var(--mp-navy), var(--accent, var(--mp-blue))); border-radius: 6px; min-width: 2px; transition: width .3s ease; }
.adm-funnel-n { flex: none; width: 56px; font-weight: 700; font-size: 13px; color: var(--mp-navy); }
.adm-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border, #eef); font-size: 13.5px; }
.adm-kv:last-child { border-bottom: 0; }
.adm-kv span { color: var(--muted, #6b7280); }
.adm-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.adm-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.adm-toggle input { width: auto; accent-color: var(--primary); }

/* ── Mentoring vs coaching vs counseling explainer ──────────────────────── */
.tri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tri-card { border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--mp-navy); border-radius: 10px; padding: 14px; background: var(--surface, #fff); }
.tri-card:last-child { border-top-color: var(--mp-blue); }
.tri-h { font-family: var(--mp-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; color: var(--mp-navy); margin-bottom: 8px; }
.tri-r { font-size: 12.5px; line-height: 1.45; margin: 6px 0; color: var(--ink-soft, #4b5563); }
.tri-r b { color: var(--mp-navy-deep); }

/* ── Mentoring hub ──────────────────────────────────────────────────────── */
.mentor-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 3px solid var(--mp-blue); }
.mentor-road { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mentor-mile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--surface, #fff); }
.mentor-mile.is-done { border-color: #bfe6cd; background: #f4fbf6; }
.mentor-mile-chk { flex: none; display: flex; align-items: center; }
.mentor-mile-chk input { width: 18px; height: 18px; accent-color: var(--primary); }
.mentor-mile-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-tint); color: var(--mp-navy); font-weight: 700; font-size: 12px; }
.mentor-mile-t { font-weight: 700; font-size: 14px; color: var(--mp-navy-deep); }
.mentor-mile-link { font-size: 12px; color: var(--accent); font-weight: 600; margin-left: 6px; }
.mentor-mile-d { font-size: 12.5px; color: var(--ink-soft, #4b5563); margin-top: 2px; }

/* ── STAR story cards ───────────────────────────────────────────────────── */
.star-card { border-left: 3px solid var(--mp-navy); }
.star-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.star-comp { font-family: var(--mp-display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; color: var(--mp-navy); }
.star-q { font-size: 13px; color: var(--ink-soft, #4b5563); margin: 0 0 12px; }
.star-part { display: flex; gap: 10px; margin: 8px 0; font-size: 13.5px; line-height: 1.5; }
.star-tag { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--primary-tint); color: var(--mp-navy); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, var(--mp-navy-deep), var(--mp-navy)); color: #fff; border: 0; }
.dash-hero h2 { color: #fff; }
.dash-hero .muted { color: rgba(255,255,255,.8); }
.dash-hero-main { flex: 1; min-width: 240px; }
.dash-ring { flex: none; width: 118px; height: 118px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, rgba(255,255,255,.12) 79%, transparent 80%), conic-gradient(var(--mp-blue) calc(var(--pct,0) * 1%), rgba(255,255,255,.18) 0); }
.dash-ring-num { font-family: var(--mp-display); font-size: 30px; font-weight: 700; line-height: 1; }
.dash-ring-lbl { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-top: 3px; }
.dash-metric { text-align: left; cursor: pointer; border: 1px solid var(--border, #e5e7eb); border-top: 3px solid var(--mp-navy); background: var(--surface, #fff); transition: border-color .15s, transform .1s; }
.dash-metric:hover { border-color: var(--mp-navy); transform: translateY(-1px); }
.dash-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.dash-step { text-align: left; cursor: pointer; background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 14px; transition: border-color .15s, box-shadow .15s, transform .1s; }
.dash-step:hover { border-color: var(--mp-navy); transform: translateY(-1px); box-shadow: var(--wt-shadow-1, 0 6px 18px rgba(16,24,16,.08)); }
.dash-step.is-done { border-left: 3px solid #2e9e5b; }
.dash-step.is-active { border-left: 3px solid var(--mp-blue); }
.dash-step.is-todo { border-left: 3px solid #cbd6df; }
.dash-step-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dash-step-ic { color: var(--mp-navy); display: inline-flex; }
.dash-step-no { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6b7280); }
.dash-step-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-tint); color: var(--mp-navy-deep); }
.dash-step.is-done .dash-step-badge { background: #e3f4ea; color: #1e7a45; }
.dash-step.is-active .dash-step-badge { background: #e6f1f9; color: #005a8f; }
.dash-step-label { font-family: var(--mp-display); font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.dash-profilebar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ── Combined AI Coaches: persona switcher ──────────────────────────────── */
.coach-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 18px; }
.coach-tab { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: var(--surface, #fff); cursor: pointer; box-shadow: var(--wt-shadow-1, 0 1px 2px rgba(16,24,16,.05)); transition: border-color .15s, box-shadow .15s; }
.coach-tab:hover { border-color: #c2d2de; }
.coach-tab.is-active { border-color: var(--mp-navy); box-shadow: 0 0 0 2px rgba(0,62,107,.16); }
.coach-tab-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--mp-navy); }
.coach-tab.is-active .coach-tab-ic { background: var(--mp-navy); color: #fff; }
.coach-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coach-tab-txt b { font-size: 14.5px; }
.coach-tab-txt .muted { font-size: 12px; line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════════════════
   MPMA-specific components: the multi-select profile fields, career
   pathways, the job board + match rings, and the employer workspace.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Check-all-that-apply grids (profile, talent card, job editor) ──────── */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.check-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; padding: 4px 0; }
.check-opt input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.check-opt.is-on { font-weight: 600; color: var(--mp-navy); }
.demo-field-wide { grid-column: 1 / -1; }

/* Toggle-style ghost buttons used as filters (category, stage, opening). */
button.ghost.is-on, .btn.ghost.is-on { background: var(--mp-navy); border-color: var(--mp-navy); color: #fff; }

/* Chip variants — a small, fixed vocabulary so meaning stays consistent:
   good = an advantage to the reader, watch = something to fix or verify. */
.chip-good { background: #e3f4ea !important; color: #1e7a45 !important; border-color: #bfe6cd !important; }
.chip-watch { background: #fdf2e3 !important; color: #8a5a12 !important; border-color: #f0dcb8 !important; }

/* ── Career pathways ────────────────────────────────────────────────────── */
.pw-grid { display: flex; flex-direction: column; gap: 16px; }
.pw-card { padding: 0; overflow: hidden; }
.pw-head { display: flex; align-items: center; gap: 14px; padding: 18px; cursor: pointer; }
.pw-head:hover { background: var(--mp-gray); }
.pw-ic { flex: none; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--mp-navy); }
.pw-chev { flex: none; color: var(--muted, #6b7280); }
.pw-card.is-open .pw-head { border-bottom: 1px solid var(--border, #e5e7eb); background: var(--mp-gray); }
.pw-body { padding: 18px; }
.pw-entry { background: var(--primary-tint); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; }
.pw-ladder { display: flex; flex-direction: column; gap: 10px; }
.pw-rung { display: flex; gap: 12px; }
.pw-rung-no { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mp-navy); color: #fff; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.pw-rung-body { flex: 1; min-width: 0; border-left: 2px solid var(--border, #e5e7eb); padding: 0 0 8px 14px; margin-left: -1px; }
.pw-rung:last-child .pw-rung-body { border-left-color: transparent; }
.pw-rung-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pw-rung-does { font-size: 13.5px; line-height: 1.55; }
.pw-rung-next { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft, #4b5563); margin-top: 4px; }
.pw-rung-next b { color: var(--mp-navy); }
.pw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border, #e5e7eb); }

/* ── Training & education routes ────────────────────────────────────────── */
.edu-card { border-left: 3px solid var(--mp-navy); }
.edu-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.edu-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.edu-chk { display: flex; align-items: center; gap: 6px; cursor: pointer; flex: none; }
.edu-chk input { width: 16px; height: 16px; accent-color: var(--primary); }
.edu-honest { margin-top: 10px; padding: 11px 13px; background: var(--mp-gray); border-radius: 9px; font-size: 13px; line-height: 1.55; }
.edu-honest b { color: var(--mp-navy); }

/* ── Job board ──────────────────────────────────────────────────────────── */
.job-card { border-left: 3px solid var(--mp-navy); }
.job-top { display: flex; align-items: flex-start; gap: 14px; }
.job-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft, #4b5563); margin-top: 8px; }
.job-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); }
.job-extra:not(:empty) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); }
.job-detail .step-label { margin-top: 12px; }
.job-detail ul { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; }
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.inv-row:last-of-type { border-bottom: 0; }

/* Match ring — the score plus its band. Colour carries meaning here, so the
   number is always shown too rather than relying on hue alone. */
.match-ring { flex: none; width: 62px; height: 62px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--border, #e5e7eb); }
.match-n { font-family: var(--mp-display); font-size: 20px; font-weight: 700; line-height: 1; }
.match-l { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b7280); margin-top: 2px; }
.match-strong { border-color: #2e9e5b; background: #f2fbf6; } .match-strong .match-n { color: #1e7a45; }
.match-possible { border-color: var(--mp-blue); background: #eff7fc; } .match-possible .match-n { color: var(--mp-navy); }
.match-stretch { border-color: #d9a441; background: #fdf8ef; } .match-stretch .match-n { color: #8a5a12; }
.match-weak { border-color: #cbd6df; background: #f7f9fa; } .match-weak .match-n { color: #6b7280; }
.match-why, .match-gap { font-size: 12.5px; line-height: 1.5; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--border, #e5e7eb); }
.match-why { border-left-color: #2e9e5b; }
.match-gap { border-left-color: #d9a441; color: var(--ink-soft, #4b5563); }
.match-verdict { font-size: 14.5px; line-height: 1.6; font-weight: 600; color: var(--mp-navy); background: var(--primary-tint); border-radius: 9px; padding: 12px 14px; }

/* ── Talent cards (the seeker preview and the employer list share these) ── */
.cand-card { border-left: 3px solid var(--mp-blue); }
.cand-top { display: flex; align-items: flex-start; gap: 14px; }
.cand-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-soft, #4b5563); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #e5e7eb); }
.cand-contact { font-weight: 600; color: var(--mp-navy); }
.tp-toggle { border-left: 3px solid var(--mp-blue); }

/* ── Employer: profile completeness ring ────────────────────────────────── */
.emp-score { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.emp-score-ring { flex: none; width: 96px; height: 96px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, var(--surface, #fff) 79%, transparent 80%), conic-gradient(var(--mp-blue) calc(var(--pct, 0) * 1%), #e3e9ee 0); }
.emp-score-n { font-family: var(--mp-display); font-size: 26px; font-weight: 700; line-height: 1; color: var(--mp-navy); }
.emp-score-l { font-size: 10.5px; color: var(--muted, #6b7280); margin-top: 2px; }

/* ── Employer: postings list ────────────────────────────────────────────── */
.ej-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.ej-row:last-child { border-bottom: 0; }
.ej-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Employer: hiring pipeline ──────────────────────────────────────────── */
.pl-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.pl-row:last-child { border-bottom: 0; }
.pl-row.is-stale { background: #fdf8ef; margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-left: 3px solid #d9a441; }
.pl-note { margin-top: 6px; font-size: 12.5px; font-style: italic; color: var(--ink-soft, #4b5563); border-left: 2px solid var(--border, #e5e7eb); padding-left: 10px; }
.pl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-actions select { padding: 6px 10px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--surface, #fff); }

/* ── Employer: interview kit Q&A blocks ─────────────────────────────────── */
.ik-q { padding: 12px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.ik-q:last-child { border-bottom: 0; }
.ik-q-t { font-size: 14px; line-height: 1.5; margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ik-a { font-size: 12.5px; line-height: 1.55; padding: 7px 11px; border-radius: 8px; margin-top: 5px; }
.ik-a-good { background: #f2fbf6; color: #1e5f38; }
.ik-a-weak { background: #fdf8ef; color: #7a4f10; }

/* ── Employer: outreach follow-ups ──────────────────────────────────────── */
.ou-follow { padding: 10px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.ou-follow:last-child { border-bottom: 0; }

/* ── Employer toolkit ───────────────────────────────────────────────────── */
.tk-card { padding: 0; overflow: hidden; }
.tk-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
.tk-head:hover { background: var(--mp-gray); }
.tk-card.is-open .tk-head { border-bottom: 1px solid var(--border, #e5e7eb); background: var(--mp-gray); }
.tk-ic { flex: none; color: var(--mp-navy); display: inline-flex; }
.tk-diagnostic { margin: 16px 18px 0; padding: 13px 15px; background: var(--primary-tint); border-left: 3px solid var(--mp-navy); border-radius: 0 9px 9px 0; font-size: 13.5px; line-height: 1.6; }
.tk-card .res-list { padding: 0 18px 18px; }

/* ── Admin: employer table ──────────────────────────────────────────────── */
tr.is-revoked { opacity: .5; }
tr.is-revoked input, tr.is-revoked select { text-decoration: line-through; }

/* ── Narrow screens: stack the two-up rows ──────────────────────────────── */
@media (max-width: 620px) {
  .job-top, .cand-top { flex-direction: column; }
  .match-ring { align-self: flex-start; }
  .ej-row, .pl-row { flex-direction: column; }
  .check-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Dictation (assets/js/dictation.js)
   The mic sits inside the field's bottom-right, clear of the native resize grip
   so both stay usable. Padding on the field keeps long text from running under
   the button.
   --------------------------------------------------------------------------- */
.dict-shell { position: relative; display: block; }

.dict-shell > textarea {
  /* Room for the button; the grip lives in the very corner, the mic sits left of it. */
  padding-right: 46px;
}

.dict-btn {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #dde3ea);
  border-radius: 999px;
  background: #fff;
  color: var(--muted, #6b7785);
  cursor: pointer;
  opacity: .62;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
  z-index: 2;
}
/* Quiet until wanted — present but not competing with the field's own content. */
.dict-shell:hover .dict-btn,
.dict-shell > textarea:focus ~ .dict-btn,
.dict-btn:hover,
.dict-btn:focus-visible { opacity: 1; }

.dict-btn:hover { color: var(--primary, #003E6B); border-color: var(--primary, #003E6B); }
.dict-btn:focus-visible { outline: 2px solid var(--primary, #003E6B); outline-offset: 2px; opacity: 1; }

.dict-btn.dict-on {
  opacity: 1;
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
  animation: dictPulse 1.5s ease-in-out infinite;
}
@keyframes dictPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}
/* Vestibular safety: the pulse is decorative, so drop it rather than force it. */
@media (prefers-reduced-motion: reduce) {
  .dict-btn.dict-on { animation: none; box-shadow: 0 0 0 3px rgba(192, 57, 43, .3); }
}

.dict-shell > textarea.dict-field-on {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.dict-status {
  display: block;
  font-size: 12px;
  color: #c0392b;
  margin-top: 5px;
  min-height: 0;
}
.dict-status:empty { display: none; }

/* First-use notice */
.dict-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(16, 24, 32, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dict-modal-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  max-width: 470px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  max-height: 90vh;
  overflow-y: auto;
}
.dict-modal-card h3 { margin: 0 0 10px; font-size: 18px; }
.dict-modal-card p { font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.dict-modal-tip { color: var(--muted, #6b7785); font-size: 13px !important; }
.dict-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .dict-modal-actions { flex-direction: column-reverse; }
  .dict-modal-actions button { width: 100%; }
}