/* ============================================================
   FBI Careers Portal v1.0 — Design System
   Farbstoffe International brand: navy / blue / cyan
   ============================================================ */

:root {
  --fbc-navy-900: #041853;
  --fbc-navy-700: #042B6D;
  --fbc-blue-600: #0066CC;
  --fbc-blue-500: #0B87D0;
  --fbc-cyan-400: #2EB0E7;
  --fbc-ink: #1c2333;
  --fbc-body: #3a4354;
  --fbc-muted: #8a94a6;
  --fbc-line: #e3e9f1;
  --fbc-bg: #f2f5f9;
  --fbc-card: #ffffff;
  --fbc-green: #1d9e6f;
  --fbc-red: #d64550;
  --fbc-amber: #d98a1f;
  --fbc-radius: 12px;
  --fbc-shadow: 0 1px 3px rgba(4, 24, 83, .06), 0 8px 24px rgba(4, 24, 83, .07);
  --fbc-font-head: 'IBM Plex Sans', system-ui, sans-serif;
  --fbc-font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fbc-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fbc-body);
  background: var(--fbc-bg);
}
h1, h2, h3, h4 { font-family: var(--fbc-font-head); color: var(--fbc-navy-900); line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
a { color: var(--fbc-blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--fbc-cyan-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- Layout ---------- */
.fbc-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.fbc-main { padding: 36px 0 64px; min-height: 60vh; }

/* ---------- Top bar ---------- */
.fbc-topbar {
  background: linear-gradient(135deg, var(--fbc-navy-900), var(--fbc-navy-700));
  color: #fff;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px rgba(4, 24, 83, .25);
}
.fbc-topbar-inner { display: flex; align-items: center; gap: 18px; padding: 12px 20px; max-width: 1100px; margin: 0 auto; }
.fbc-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--fbc-font-head); font-weight: 700; font-size: 1.02rem; }
.fbc-brand:hover { text-decoration: none; }
.fbc-brand img { width: 38px; height: 38px; border-radius: 9px; background: #fff; padding: 3px; }
.fbc-brand small { display: block; font-size: .64rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--fbc-cyan-400); }
.fbc-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.fbc-nav a { color: rgba(255,255,255,.85); padding: 8px 13px; border-radius: 8px; font-size: .9rem; font-weight: 500; }
.fbc-nav a:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.fbc-nav a.fbc-active { background: rgba(46,176,231,.18); color: var(--fbc-cyan-400); }
.fbc-nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 8px; padding: 7px 11px; font-size: 1rem; cursor: pointer; }

/* ---------- Buttons ---------- */
.fbc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 9px; border: 1px solid transparent;
  font-family: var(--fbc-font-body); font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: all .18s ease; text-decoration: none !important;
}
.fbc-btn-primary { background: var(--fbc-blue-600); color: #fff; }
.fbc-btn-primary:hover { background: var(--fbc-navy-700); box-shadow: 0 4px 14px rgba(0,102,204,.35); }
.fbc-btn-outline { background: transparent; border-color: var(--fbc-blue-600); color: var(--fbc-blue-600); }
.fbc-btn-outline:hover { background: rgba(0,102,204,.07); }
.fbc-btn-ghost { background: transparent; color: var(--fbc-body); border-color: var(--fbc-line); }
.fbc-btn-ghost:hover { border-color: var(--fbc-blue-500); color: var(--fbc-blue-600); }
.fbc-btn-danger { background: var(--fbc-red); color: #fff; }
.fbc-btn-block { width: 100%; }
.fbc-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Cards ---------- */
.fbc-card { background: var(--fbc-card); border: 1px solid var(--fbc-line); border-radius: var(--fbc-radius); box-shadow: var(--fbc-shadow); }
.fbc-card-pad { padding: 28px; }

/* ---------- Forms ---------- */
.fbc-field { margin-bottom: 18px; }
.fbc-label { display: block; font-size: .84rem; font-weight: 600; color: var(--fbc-ink); margin-bottom: 6px; }
.fbc-label .req { color: var(--fbc-red); }
.fbc-input, .fbc-select, .fbc-textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--fbc-line);
  border-radius: 9px; font-family: var(--fbc-font-body); font-size: .93rem; color: var(--fbc-ink);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.fbc-input:focus, .fbc-select:focus, .fbc-textarea:focus {
  outline: none; border-color: var(--fbc-blue-500); box-shadow: 0 0 0 3px rgba(11,135,208,.13);
}
.fbc-hint { font-size: .78rem; color: var(--fbc-muted); margin-top: 5px; }
.fbc-error-text { font-size: .8rem; color: var(--fbc-red); margin-top: 5px; }

/* ---------- Auth pages ---------- */
.fbc-auth-wrap { max-width: 440px; margin: 48px auto; padding: 0 20px; }
.fbc-auth-logo { text-align: center; margin-bottom: 22px; }
.fbc-auth-logo img { width: 58px; height: 58px; border-radius: 14px; background: #fff; padding: 6px; box-shadow: var(--fbc-shadow); }
.fbc-auth-title { text-align: center; margin-bottom: 4px; }
.fbc-auth-sub { text-align: center; color: var(--fbc-muted); font-size: .9rem; margin: 0 0 26px; }
.fbc-auth-foot { text-align: center; font-size: .88rem; margin-top: 20px; color: var(--fbc-muted); }

/* ---------- Alerts / flash ---------- */
.fbc-alert { padding: 13px 16px; border-radius: 10px; font-size: .9rem; margin-bottom: 18px; border: 1px solid; }
.fbc-alert-success { background: #ecf9f3; border-color: #bfe8d6; color: #146b4b; }
.fbc-alert-error { background: #fdf0f1; border-color: #f3c8cc; color: #a3323c; }
.fbc-alert-info { background: #eef6fd; border-color: #c8e4f7; color: #0a51a0; }

/* ---------- Badges ---------- */
.fbc-badge { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: .74rem; font-weight: 600; letter-spacing: .3px; }
.fbc-badge-blue { background: #e5f0fb; color: var(--fbc-blue-600); }
.fbc-badge-cyan { background: #e4f5fc; color: #1583ad; }
.fbc-badge-navy { background: #e2e6f2; color: var(--fbc-navy-700); }
.fbc-badge-green { background: #e6f7f0; color: var(--fbc-green); }
.fbc-badge-red { background: #fdeef0; color: var(--fbc-red); }
.fbc-badge-amber { background: #fcf3e4; color: var(--fbc-amber); }
.fbc-badge-gray { background: #eef1f5; color: var(--fbc-muted); }

/* ---------- Job cards (public) ---------- */
.fbc-hero {
  background: linear-gradient(135deg, var(--fbc-navy-900) 0%, var(--fbc-navy-700) 55%, var(--fbc-blue-600) 130%);
  color: #fff; padding: 58px 0 66px; position: relative; overflow: hidden;
}
.fbc-hero::after {
  content: ''; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px;
  border-radius: 50%; border: 54px solid rgba(46,176,231,.14);
}
.fbc-hero h1 { color: #fff; font-size: 2.3rem; margin-bottom: 10px; }
.fbc-hero p { color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 560px; margin: 0 0 26px; }
.fbc-hero .fbc-eyebrow { color: var(--fbc-cyan-400); font-size: .76rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 12px; display: block; }

.fbc-job-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.fbc-job-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .16s ease, box-shadow .16s ease; }
.fbc-job-card:hover { transform: translateY(-3px); box-shadow: 0 6px 28px rgba(4,24,83,.13); }
.fbc-job-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .8rem; color: var(--fbc-muted); }
.fbc-job-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fbc-job-deadline { font-size: .78rem; color: var(--fbc-amber); font-weight: 600; }

/* ---------- Empty state ---------- */
.fbc-empty { text-align: center; padding: 56px 24px; }
.fbc-empty h3 { color: var(--fbc-navy-700); }
.fbc-empty p { color: var(--fbc-muted); max-width: 420px; margin: 0 auto 22px; }

/* ---------- Dashboard shell ---------- */
.fbc-dash { display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: start; }
.fbc-side { position: sticky; top: 82px; }
.fbc-side a {
  display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 9px;
  color: var(--fbc-body); font-size: .9rem; font-weight: 500; margin-bottom: 3px;
}
.fbc-side a:hover { background: #e9eff7; text-decoration: none; }
.fbc-side a.fbc-active { background: var(--fbc-navy-900); color: #fff; }
.fbc-stat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 26px; }
.fbc-stat { padding: 20px 22px; }
.fbc-stat .num { font-family: var(--fbc-font-head); font-size: 1.9rem; font-weight: 700; color: var(--fbc-navy-900); }
.fbc-stat .lbl { font-size: .8rem; color: var(--fbc-muted); font-weight: 500; }

/* ---------- Tables ---------- */
.fbc-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.fbc-table th { text-align: left; padding: 12px 14px; background: #f7f9fc; color: var(--fbc-muted); font-size: .74rem; letter-spacing: .8px; text-transform: uppercase; border-bottom: 1px solid var(--fbc-line); }
.fbc-table td { padding: 13px 14px; border-bottom: 1px solid var(--fbc-line); }
.fbc-table tr:last-child td { border-bottom: none; }
.fbc-table tr:hover td { background: #fafcfe; }

/* ---------- Footer ---------- */
.fbc-footer { background: var(--fbc-navy-900); color: rgba(255,255,255,.65); padding: 26px 0; font-size: .82rem; }
.fbc-footer a { color: var(--fbc-cyan-400); }
.fbc-footer-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- Utilities ---------- */
.fbc-mt-0{margin-top:0}.fbc-mb-0{margin-bottom:0}.fbc-mt-2{margin-top:16px}.fbc-mb-2{margin-bottom:16px}
.fbc-flex{display:flex;gap:12px;align-items:center}.fbc-between{justify-content:space-between}
.fbc-muted{color:var(--fbc-muted)}.fbc-small{font-size:.83rem}
.fbc-divider{height:1px;background:var(--fbc-line);margin:22px 0;border:0}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .fbc-dash { grid-template-columns: 1fr; }
  .fbc-side { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .fbc-side a { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .fbc-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--fbc-navy-700); padding: 10px 16px 16px; box-shadow: 0 12px 24px rgba(4,24,83,.3); }
  .fbc-nav.fbc-open { display: flex; }
  .fbc-nav-toggle { display: block; }
  .fbc-hero h1 { font-size: 1.7rem; }
  .fbc-card-pad { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   PREMIUM v1.1 — B sidebar + A banner + C pipeline + responsive
   ============================================================ */

html, body { overflow-x: clip; }
.fbc-container { max-width: 1180px; }

/* ---------- Dark icon sidebar (Option B) ---------- */
.fbc-dash { grid-template-columns: 232px minmax(0, 1fr); }
.fbc-dash > * { min-width: 0; }
.fbc-side {
  background: linear-gradient(180deg, var(--fbc-navy-900), #071F63 70%, var(--fbc-navy-700));
  border-radius: 16px; padding: 18px 12px 12px;
  display: flex; flex-direction: column;
  position: sticky; top: 82px;
  min-height: calc(100vh - 140px);
  box-shadow: 0 10px 30px rgba(4, 24, 83, .28);
}
.fbc-side-head { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 12px; }
.fbc-side-head img { width: 36px; height: 36px; border-radius: 9px; background: #fff; padding: 3px; }
.fbc-side-head strong { display: block; color: #fff; font-size: .86rem; font-weight: 600; line-height: 1.2; word-break: break-word; }
.fbc-side-head small { color: var(--fbc-cyan-400); font-size: .62rem; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; }
.fbc-side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.fbc-side a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px; border-left: 3px solid transparent;
  color: #93a3c8; font-size: .88rem; font-weight: 500; margin-bottom: 0;
  transition: background .15s ease, color .15s ease;
}
.fbc-side a svg { flex-shrink: 0; opacity: .9; }
.fbc-side a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.fbc-side a.fbc-active { background: rgba(46,176,231,.18); border-left-color: var(--fbc-cyan-400); color: #fff; border-radius: 0 10px 10px 0; }
.fbc-side-badge { margin-left: auto; background: #e5484d; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; }
.fbc-ticktable td, .fbc-ticktable th { vertical-align: middle; }
.fbc-tickrow { cursor: pointer; transition: background .12s; }
.fbc-tickrow:hover { background: #f4f8ff; }
.fbc-tickrow.is-open { background: #eef4fc; }
.fbc-tickcaret { display: inline-block; transition: transform .15s; color: #8a94a6; font-size: .9rem; }
.fbc-tickrow.is-open .fbc-tickcaret { transform: rotate(90deg); color: #0066CC; }
.fbc-tickdetail > td { background: #fbfdff; padding: 0 !important; border-top: none; }
.fbc-tickdetail-inner { padding: 16px 18px 20px; }
.fbc-side-out { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px !important; color: #93a3c8 !important; }
.fbc-side-out:hover { color: #ffb4b4 !important; }

/* ---------- Greeting banner (Option A) ---------- */
.fbc-banner {
  background: linear-gradient(120deg, var(--fbc-navy-900), var(--fbc-navy-700) 60%, #0A57B0 140%);
  border-radius: 16px; padding: 24px 28px; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  position: relative; overflow: hidden; margin-bottom: 22px;
  box-shadow: 0 10px 30px rgba(4, 24, 83, .25);
}
.fbc-banner::after { content: ''; position: absolute; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; border: 34px solid rgba(46,176,231,.16); pointer-events: none; }
.fbc-banner h1 { color: #fff; font-size: 1.45rem; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; }
.fbc-banner h1 svg { color: var(--fbc-cyan-400); }
.fbc-banner p { margin: 0; color: #9fb8e8; font-size: .88rem; }
.fbc-banner-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.fbc-banner-pills span { font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.13); color: #cfe0f7; }
.fbc-banner-pills span.hot { background: var(--fbc-cyan-400); color: #04233a; }
.fbc-banner-time { text-align: right; flex-shrink: 0; position: relative; z-index: 1; }
.fbc-banner-time .clock { font-family: 'IBM Plex Sans', monospace; font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: 1px; }
.fbc-banner-time .date { font-size: .78rem; color: #9fb8e8; margin-top: 2px; }

/* ---------- Stat cards with icons + trends (Option B) ---------- */
.fbc-stat { position: relative; padding: 18px 20px; }
.fbc-stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fbc-staticon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.fbc-staticon.blue { background: #e6f1fb; color: var(--fbc-blue-600); }
.fbc-staticon.cyan { background: #e4f5fc; color: #1583ad; }
.fbc-staticon.navy { background: #e2e6f2; color: var(--fbc-navy-700); }
.fbc-staticon.amber { background: #fcf3e4; color: var(--fbc-amber); }
.fbc-staticon.green { background: #e6f7f0; color: var(--fbc-green); }
.fbc-staticon.red { background: #fdeef0; color: var(--fbc-red); }
.fbc-trend { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; }
.fbc-trend.up { background: #e6f7f0; color: var(--fbc-green); }
.fbc-trend.flat { background: #eef1f5; color: var(--fbc-muted); }
.fbc-stat .num { font-size: 1.75rem; }
.fbc-stat .lbl { margin-top: 1px; }
.fbc-card { border-radius: 16px; }

/* ---------- Pipeline bar (Option C) ---------- */
.fbc-pipe-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--fbc-line); }
.fbc-pipe-bar div { transition: width .4s ease; }
.fbc-pipe-legend { display: flex; gap: 16px; margin-top: 10px; font-size: .76rem; color: var(--fbc-muted); flex-wrap: wrap; }
.fbc-pipe-legend b { color: var(--fbc-ink); font-weight: 600; }
.fbc-pipe-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- Topbar polish ---------- */
.fbc-topbar { background: rgba(4, 24, 83, .97); backdrop-filter: blur(8px); }

/* ============================================================
   RESPONSIVE — kills horizontal scroll on mobile
   ============================================================ */
@media (max-width: 1000px) {
  .fbc-dash { grid-template-columns: 1fr !important; }
  .fbc-side { position: static; min-height: 0; flex-direction: column; padding: 12px; }
  .fbc-side-head { padding-bottom: 12px; }
  .fbc-side-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .fbc-side a { padding: 8px 13px; border-left: none; border-radius: 99px !important; font-size: .82rem; }
  .fbc-side a.fbc-active { border-left: none; background: var(--fbc-cyan-400); color: #04233a; }
  .fbc-side a.fbc-active svg { color: #04233a; }
  .fbc-side-out { margin-top: 8px; border-top: none; padding-top: 8px !important; }
}
@media (max-width: 760px) {
  .fbc-main { padding: 20px 0 48px; }
  .fbc-container { padding: 0 14px; }
  .fbc-card-pad { padding: 18px 16px; }
  /* Any .fbc-dash used as an inner form grid collapses too (inline styles overridden) */
  .fbc-banner { flex-direction: column; align-items: flex-start; padding: 20px; }
  .fbc-banner-time { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .fbc-banner-time .clock { font-size: 1.4rem; }
  .fbc-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .fbc-stat { padding: 14px 15px; }
  .fbc-stat .num { font-size: 1.4rem; }
  /* Tables scroll inside themselves, never the page */
  .fbc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .fbc-table th, .fbc-table td { padding: 10px 10px; }
  .fbc-job-grid { grid-template-columns: 1fr; }
  .fbc-hero { padding: 40px 0 46px; }
  .fbc-hero h1 { font-size: 1.5rem; }
  .fbc-flex { flex-wrap: wrap; }
  .fbc-btn { padding: 10px 16px; font-size: .88rem; }
  h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */
  .fbc-pipe-legend { gap: 10px; font-size: .72rem; }
  .fbc-auth-wrap { margin: 24px auto; }
}
@media (max-width: 420px) {
  .fbc-stat-grid { grid-template-columns: 1fr !important; }
  .fbc-banner-pills span { font-size: .68rem; }
}

/* ============================================================
   v1.2 — fluid width, animated wordmark, hero v2, job detail
   ============================================================ */

/* FIX: use the screen — fluid container on big displays */
.fbc-container { max-width: min(1360px, 94%); }
.fbc-topbar-inner { max-width: min(1360px, 94%); }

/* Animated gradient wordmark */
.fbc-wordmark {
  background: linear-gradient(90deg, #ffffff 0%, var(--fbc-cyan-400) 30%, var(--fbc-blue-500) 55%, #9fd8f5 75%, #ffffff 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: fbcWordShift 5s linear infinite;
}
@keyframes fbcWordShift { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fbc-wordmark { animation: none !important; background: none; color: #fff; }
}

/* Hero v2 */
.fbc-hero { padding: 66px 0 74px; }
.fbc-hero::before {
  content: ''; position: absolute; left: -100px; bottom: -140px; width: 300px; height: 300px;
  border-radius: 50%; border: 40px solid rgba(11,135,208,.12);
}
.fbc-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; position: relative; z-index: 1; }
.fbc-hero-stats .chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  color: #dbe7fa; font-size: .8rem; font-weight: 500;
  padding: 8px 15px; border-radius: 99px;
}
.fbc-hero-stats .chip svg { color: var(--fbc-cyan-400); }
.fbc-hero-stats .chip b { color: #fff; font-weight: 700; }

/* Job cards v2 */
.fbc-job-card { padding: 22px; gap: 12px; border-radius: 16px; }
.fbc-job-top { display: flex; justify-content: space-between; align-items: center; }
.fbc-job-ico { width: 42px; height: 42px; border-radius: 12px; background: #e6f1fb; color: var(--fbc-blue-600); display: inline-flex; align-items: center; justify-content: center; }
.fbc-job-card h3 { transition: color .15s ease; }
.fbc-job-card:hover h3 { color: var(--fbc-blue-600); }
.fbc-job-meta svg { color: var(--fbc-blue-500); vertical-align: -3px; }
.fbc-job-go { display: inline-flex; align-items: center; gap: 6px; color: var(--fbc-blue-600); font-size: .84rem; font-weight: 600; margin-top: auto; }
.fbc-job-card:hover .fbc-job-go { text-decoration: underline; }

/* Section heading accent */
.fbc-sechead { display: flex; align-items: center; gap: 10px; }
.fbc-sechead::before { content: ''; width: 5px; height: 24px; border-radius: 4px; background: linear-gradient(180deg, var(--fbc-cyan-400), var(--fbc-blue-600)); }

/* Job detail v2 */
.fbc-jobhead {
  background: linear-gradient(120deg, var(--fbc-navy-900), var(--fbc-navy-700) 60%, #0A57B0 140%);
  border-radius: 18px; color: #fff; padding: 34px 34px 30px;
  position: relative; overflow: hidden; margin-bottom: 22px;
  box-shadow: 0 12px 34px rgba(4, 24, 83, .28);
}
.fbc-jobhead::after { content: ''; position: absolute; right: -80px; top: -100px; width: 280px; height: 280px; border-radius: 50%; border: 40px solid rgba(46,176,231,.15); }
.fbc-jobhead { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fbc-jobhead-main { position: relative; z-index: 1; flex: 1; min-width: 0; }
.fbc-jobhead-cta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.fbc-jobhead-apply { box-shadow: 0 8px 22px rgba(11, 135, 208, .45); white-space: nowrap; }
.fbc-jobhead-sub { color: #cfe0f5; font-size: .8rem; text-decoration: none; }
.fbc-jobhead-sub:hover { color: #fff; text-decoration: underline; }
.fbc-jobhead-save { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.35); color:#fff; padding:9px 16px; border-radius:99px; font-size:.85rem; font-weight:600; cursor:pointer; transition:.15s; }
.fbc-jobhead-save:hover { background:rgba(255,255,255,.22); }
.fbc-jobhead-save.is-saved { background:rgba(46,176,231,.25); border-color:var(--fbc-cyan-400); }
.fbc-btn-lg { padding: 14px 26px; font-size: 1.02rem; font-weight: 700; }
.fbc-jobhead h1 { color: #fff; margin: 12px 0 14px; font-size: 1.85rem; position: relative; z-index: 1; }
.fbc-jobhead-meta { display: flex; gap: 9px; flex-wrap: wrap; position: relative; z-index: 1; }
.fbc-jobhead-meta span {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  color: #dbe7fa; font-size: .8rem; padding: 7px 13px; border-radius: 99px;
}
.fbc-jobhead-meta svg { color: var(--fbc-cyan-400); }
.fbc-jobgrid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.fbc-jobside { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 16px; }
.fbc-overview-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--fbc-line); font-size: .86rem; }
.fbc-overview-row:last-child { border-bottom: none; }
.fbc-overview-row .k { color: var(--fbc-muted); display: inline-flex; align-items: center; gap: 7px; }
.fbc-overview-row .k svg { color: var(--fbc-blue-500); }
.fbc-overview-row .v { color: var(--fbc-ink); font-weight: 600; text-align: right; }
.fbc-jobdesc { font-size: .94rem; line-height: 1.8; }
@media (max-width: 900px) {
  .fbc-jobgrid { grid-template-columns: 1fr; }
  .fbc-jobside { position: static; }
  .fbc-jobhead { padding: 24px 20px; flex-direction: column; align-items: flex-start; }
  .fbc-jobhead-cta { align-items: stretch; width: 100%; }
  .fbc-jobhead-cta .fbc-btn { width: 100%; justify-content: center; }
  .fbc-jobhead-sub { text-align: center; }
  .fbc-jobhead h1 { font-size: 1.4rem; }
}

/* Registrations mini chart (root) */
.fbc-minichart { display: flex; gap: 10px; align-items: flex-end; height: 130px; padding-top: 6px; }
.fbc-minichart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; min-width: 0; }
.fbc-minichart .val { font-size: .74rem; font-weight: 700; color: var(--fbc-navy-900); }
.fbc-minichart .bar { width: 100%; max-width: 46px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--fbc-cyan-400), var(--fbc-blue-600)); }
.fbc-minichart .bar.zero { background: var(--fbc-line); }
.fbc-minichart .day { font-size: .7rem; color: var(--fbc-muted); }

/* ============================================================
   v1.3 — richer wordmark, why-join, photos, share, strength
   ============================================================ */

/* Richer animated wordmark spectrum */
.fbc-wordmark {
  background: linear-gradient(90deg, #ffffff 0%, var(--fbc-cyan-400) 18%, var(--fbc-blue-500) 38%, #8f9bff 55%, #3fd6c0 72%, #9fd8f5 86%, #ffffff 100%);
  background-size: 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Why join strip */
.fbc-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.fbc-why-card { padding: 22px; transition: transform .16s ease, box-shadow .16s ease; }
.fbc-why-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(4,24,83,.12); }
.fbc-why-card h3 { margin: 14px 0 6px; font-size: 1rem; }
.fbc-why-card p { margin: 0; font-size: .85rem; color: var(--fbc-muted); line-height: 1.6; }

/* Photo grid (renders only when photos are uploaded) */
.fbc-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.fbc-photo-grid img { width: 100%; height: 200px; object-fit: cover; border-radius: 16px; box-shadow: var(--fbc-shadow); }
.fbc-photo-grid img.tall { grid-row: span 1; }
@media (max-width: 760px) { .fbc-photo-grid { grid-template-columns: 1fr; } .fbc-photo-grid img { height: 180px; } }

/* Share buttons */
.fbc-share { display: flex; flex-direction: column; gap: 8px; }
.fbc-share a, .fbc-share button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 9px; font-size: .85rem; font-weight: 600;
  border: 1.5px solid var(--fbc-line); background: #fff; color: var(--fbc-body);
  cursor: pointer; text-decoration: none !important; font-family: var(--fbc-font-body);
  transition: all .15s ease;
}
.fbc-share .wa:hover { border-color: #25D366; color: #128C4A; background: #f0fdf5; }
.fbc-share .li:hover { border-color: #0A66C2; color: #0A66C2; background: #f0f7fd; }
.fbc-share .cp:hover { border-color: var(--fbc-blue-500); color: var(--fbc-blue-600); background: #f0f6fd; }
.fbc-share .cp.copied { border-color: var(--fbc-green); color: var(--fbc-green); background: #ecf9f3; }

/* Password strength meter */
.fbc-strength { margin-top: 8px; }
.fbc-strength .bar { height: 6px; border-radius: 99px; background: var(--fbc-line); overflow: hidden; }
.fbc-strength .bar span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s ease, background .25s ease; }
.fbc-strength small { display: block; margin-top: 4px; font-size: .74rem; font-weight: 600; }
.fbc-strength.s1 .bar span { width: 33%; background: var(--fbc-red); }
.fbc-strength.s1 small { color: var(--fbc-red); }
.fbc-strength.s2 .bar span { width: 66%; background: var(--fbc-amber); }
.fbc-strength.s2 small { color: var(--fbc-amber); }
.fbc-strength.s3 .bar span { width: 100%; background: var(--fbc-green); }
.fbc-strength.s3 small { color: var(--fbc-green); }

/* reCAPTCHA sizing on small screens */
@media (max-width: 420px) { .g-recaptcha { transform: scale(.88); transform-origin: 0 0; } }

/* ============================================================
   v1.4 — mobile bottom nav (Expo style), points, team UI
   ============================================================ */

.fbc-points { margin: 10px 0 0; padding-left: 4px; list-style: none; }
.fbc-points li { position: relative; padding: 6px 0 6px 30px; font-size: .93rem; line-height: 1.65; }
.fbc-points li::before {
  content: ''; position: absolute; left: 4px; top: 13px;
  width: 9px; height: 9px; border-radius: 3px;
  background: linear-gradient(135deg, var(--fbc-cyan-400), var(--fbc-blue-600));
}

.fbc-checkline { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; background: #f5f8fc; border: 1px solid var(--fbc-line); border-radius: 9px; padding: 8px 13px; cursor: pointer; }
.fbc-checkline input { accent-color: var(--fbc-blue-600); width: 15px; height: 15px; }

/* ---- Mobile bottom nav for dashboards ---- */
@media (max-width: 760px) {
  .fbc-dash { padding-bottom: 88px; }
  .fbc-side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    height: auto; min-height: 0; max-height: 86px;
    border-radius: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(4, 24, 83, .35);
  }
  .fbc-side-head { display: none; }
  .fbc-side-nav {
    flex-direction: row; flex-wrap: nowrap; flex: 1;
    justify-content: space-around; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fbc-side-nav::-webkit-scrollbar { display: none; }
  .fbc-side a {
    flex-direction: column; gap: 3px;
    padding: 7px 9px; border-left: none; border-radius: 10px !important;
    font-size: .58rem; font-weight: 600; letter-spacing: .2px;
    min-width: 56px; text-align: center; flex-shrink: 0;
  }
  .fbc-side a svg { width: 21px; height: 21px; }
  .fbc-side a.fbc-active { background: rgba(46,176,231,.22); color: #fff; }
  .fbc-side a.fbc-active svg { color: var(--fbc-cyan-400); }
  .fbc-side-out { margin: 0; border-top: none; padding: 7px 9px !important; }
  .fbc-side-out span { display: none; }
  /* When a "More" sheet exists it already contains Sign out, so keep the bar
     to a single tidy row instead of letting the logout icon wrap onto a second. */
  .fbc-side.has-more .fbc-side-out { display: none; }
  /* Only the first 4 items stay in the bar; the rest move into the "More" sheet */
  .fbc-side-nav a.fbc-side-extra { display: none; }
  .fbc-side-nav { overflow: visible; justify-content: space-between; }
  .fbc-side-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    position: relative; background: none; border: none; cursor: pointer; color: #cfe0f5;
    padding: 7px 9px; border-radius: 10px; font-size: .58rem; font-weight: 600; letter-spacing: .2px;
    min-width: 56px; flex-shrink: 0;
  }
  .fbc-side-more svg { width: 21px; height: 21px; }
  .fbc-side-more .fbc-side-badge { position: absolute; top: 2px; right: 6px; margin: 0; }
  .fbc-side-nav .fbc-side-badge { position: absolute; top: 2px; right: 6px; margin: 0; }
  .fbc-side-nav a { position: relative; }
}

/* ---- "New application" indicators ---- */
.fbc-newpill { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; margin-left:10px;
  background:linear-gradient(135deg,#0066CC,#2EB0E7); color:#fff; font-size:.62rem; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase; padding:5px 11px; border-radius:99px;
  box-shadow:0 2px 10px rgba(0,102,204,.35); }
.fbc-newpill::before { content:''; width:6px; height:6px; border-radius:50%; background:#fff;
  animation: fbcPulse 1.8s ease-in-out infinite; }
@keyframes fbcPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.75); } }

.fbc-newtag { display:inline-block; vertical-align:middle; margin-left:7px; background:#e8f4ff; color:#0066CC;
  border:1px solid #b9dcff; font-size:.6rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; }

/* sidebar / nav count */
.fbc-side-badge.is-new { background:#0066CC; }

@media (prefers-reduced-motion: reduce) { .fbc-newpill::before { animation:none; } }

/* ---- Pagination ---- */
.fbc-pager { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--fbc-line,#e3e9f1); }
.fbc-pager-info { color:#5a6b85; font-size:.85rem; }
.fbc-pager-info strong { color:#041853; }
.fbc-pager-links { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.fbc-pager-btn { display:inline-block; padding:7px 13px; border-radius:8px; border:1px solid var(--fbc-line,#e3e9f1); background:#fff; color:#041853; font-size:.83rem; font-weight:600; text-decoration:none; }
.fbc-pager-btn:hover { border-color:#0066CC; color:#0066CC; }
.fbc-pager-btn.is-off { color:#b6c0cf; background:#f7f9fc; border-color:#eef2f8; cursor:default; }
.fbc-pager-num { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border-radius:8px; border:1px solid var(--fbc-line,#e3e9f1); background:#fff; color:#041853; font-size:.83rem; font-weight:600; text-decoration:none; }
.fbc-pager-num:hover { border-color:#0066CC; color:#0066CC; }
.fbc-pager-num.is-on { background:var(--fbc-navy-900,#041853); border-color:var(--fbc-navy-900,#041853); color:#fff; }
.fbc-pager-gap { color:#9aa7bd; padding:0 2px; }
@media (max-width:620px){ .fbc-pager { justify-content:center; } .fbc-pager-info { width:100%; text-align:center; } }

/* ---- Mobile "More" menu sheet ---- */
@media (min-width: 761px) { .fbc-side-more { display: none !important; } }
.fbc-sheet { position: fixed; inset: 0; z-index: 1200; }
.fbc-sheet-backdrop { position: absolute; inset: 0; background: rgba(4,24,83,.55); backdrop-filter: blur(2px); }
.fbc-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: #fff;
  border-radius: 18px 18px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(4,24,83,.3);
  animation: fbcSheetUp .22s ease;
}
@keyframes fbcSheetUp { from { transform: translateY(20px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.fbc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--fbc-line, #e3e9f1); margin-bottom: 14px; }
.fbc-sheet-head strong { display: block; color: #041853; font-size: .98rem; }
.fbc-sheet-head small { color: #5a6b85; font-size: .78rem; }
.fbc-sheet-x { border: none; background: #f2f5fa; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; color: #5a6b85; cursor: pointer; }
.fbc-sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fbc-sheet-grid a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 15px 8px; border: 1px solid var(--fbc-line, #e3e9f1); border-radius: 13px;
  text-decoration: none; color: #041853; font-size: .74rem; font-weight: 600; text-align: center; line-height: 1.25;
}
.fbc-sheet-grid a svg { width: 22px; height: 22px; color: #0066CC; }
.fbc-sheet-grid a.is-on { background: #eef4fc; border-color: #0066CC; }
.fbc-sheet-badge { position: absolute; top: 7px; right: 8px; background: #e5484d; color: #fff; font-style: normal; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: flex; align-items: center; justify-content: center; }
.fbc-sheet-out { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 13px; border-radius: 12px; background: #fdf2f2; color: #c0392b; font-weight: 700; font-size: .88rem; text-decoration: none; }
@media (min-width: 761px) { .fbc-sheet { display: none !important; } }

/* ============================================================
   v1.4.1 — hero artwork, distinct sections, mobile menu fixes
   ============================================================ */

/* Anchor scroll offset (sticky topbar) */
.fbc-anchor { display: block; position: relative; top: -86px; visibility: hidden; }

/* ---- Hero with artwork background (auto-uses hero.jpg if uploaded) ---- */
.fbc-hero-art {
  background: linear-gradient(rgba(3, 18, 62, .55), rgba(4, 43, 109, .72)), url('../img/hero.jpg') center/cover no-repeat, url('../img/hero-bg.svg') center/cover no-repeat;
  padding: 84px 0 92px;
}
.fbc-hero-art::before, .fbc-hero-art::after { display: none; }
.fbc-hero-art h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); text-shadow: 0 2px 18px rgba(3, 18, 62, .5); }
.fbc-hero-art .fbc-hero-sub { font-size: 1.02rem; }

/* Eyebrow labels */
.fbc-eyebrow {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--fbc-blue-600); margin-bottom: 6px;
}
.fbc-eyebrow.light { color: var(--fbc-cyan-400); }

/* ---- Distinct job cards (accent bar + hover glow) ---- */
.fbc-job-card {
  border-left: 4px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box;
  position: relative;
}
.fbc-job-card:hover { border-left-color: var(--fbc-cyan-400); box-shadow: 0 14px 34px rgba(4, 24, 83, .16); }
.fbc-job-new {
  position: absolute; top: -9px; right: 14px;
  background: linear-gradient(90deg, var(--fbc-cyan-400), var(--fbc-blue-500));
  color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: 1px;
  padding: 3px 11px; border-radius: 99px; box-shadow: 0 4px 12px rgba(11, 135, 208, .4);
}

/* ---- Why-join navy band ---- */
.fbc-whyband {
  background: linear-gradient(120deg, var(--fbc-navy-900), var(--fbc-navy-700) 65%, #0A57B0 130%), url('../img/hero-bg.svg') center/cover;
  background-blend-mode: normal, soft-light;
  border-radius: 22px; padding: 40px 34px 34px; color: #fff;
  box-shadow: 0 16px 44px rgba(4, 24, 83, .3);
}
.fbc-whyband-head { text-align: center; margin-bottom: 26px; }
.fbc-whyband-head h2 { color: #fff; margin: 0; }
.fbc-whyband .fbc-why-grid { gap: 14px; }
.fbc-whyband .fbc-why-card {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(5px); border-radius: 16px; padding: 22px;
}
.fbc-whyband .fbc-why-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .11); box-shadow: none; }
.fbc-whyband .fbc-why-card h3 { color: #fff; }
.fbc-whyband .fbc-why-card p { color: #b9cbee; }
.fbc-whyband .wicon {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.fbc-whyband .wicon.c1 { background: linear-gradient(135deg, #0B87D0, #0066CC); }
.fbc-whyband .wicon.c2 { background: linear-gradient(135deg, #2EB0E7, #0B87D0); }
.fbc-whyband .wicon.c3 { background: linear-gradient(135deg, #3fd6c0, #14a389); }
.fbc-whyband .wicon.c4 { background: linear-gradient(135deg, #8f9bff, #5d6fe8); }

/* ---- Mobile menu fixes ---- */
@media (max-width: 760px) {
  /* Panel pages: bottom nav is THE menu — hide topbar burger/nav to avoid double menus */
  .fbc-panelpage .fbc-burger, .fbc-panelpage .fbc-nav { display: none !important; }
  /* Public burger dropdown above everything */
  .fbc-nav { z-index: 90; }
  .fbc-whyband { padding: 28px 18px 22px; border-radius: 18px; }
  .fbc-hero-art { padding: 56px 0 60px; }
}

/* Built-in captcha */
.fbc-captcha-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fbc-captcha-img { border: 1.5px solid var(--fbc-line); border-radius: 9px; background: #f0f5fb; }
.fbc-captcha-refresh { border: 1.5px solid var(--fbc-line); background: #fff; color: var(--fbc-blue-600); width: 38px; height: 38px; border-radius: 9px; font-size: 1.15rem; cursor: pointer; }
.fbc-captcha-refresh:hover { border-color: var(--fbc-blue-500); background: #f0f6fd; }

/* Profile photo */
.fbc-photo-block { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.fbc-avatar-xl { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: #e6f1fb; color: var(--fbc-blue-600); display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(4,24,83,.18); flex-shrink: 0; }
.fbc-avatar-xl img { width: 100%; height: 100%; object-fit: cover; }
.fbc-avatar-md { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #e6f1fb; color: var(--fbc-blue-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fbc-avatar-md img { width: 100%; height: 100%; object-fit: cover; }

/* CV import */
.fbc-cvimport-banner { padding: 18px 22px; border: 1px solid #cfe4f7; background: linear-gradient(120deg, #f0f6fd, #e8f4fb); }
.fbc-cv-hero { display: flex; align-items: center; gap: 16px; }
.fbc-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #eef4fc; border: 1px solid #cfe0f5; border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; }
.fbc-bulkbar-count { color: #041853; font-size: .9rem; }
.fbc-availpick { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border:1.5px solid var(--fbc-line,#e3e9f1); border-radius:99px; cursor:pointer; font-size:.88rem; font-weight:600; color:#5a6b85; transition:.15s; }
.fbc-availpick:hover { border-color:#b9cbe6; }
.fbc-availpick.is-on { border-color:var(--fbc-blue-500,#0066CC); background:#eef4fc; color:#041853; }
.fbc-availbadge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:.72rem; font-weight:700; }
.fbc-availbadge.open { background:#e6f6ec; color:#1e7d47; }
.fbc-availbadge.passive { background:#fdf3e0; color:#8a5a10; }
.fbc-availbadge.not_looking { background:#eef1f5; color:#5a6b85; }
.fbc-chip { display:inline-block; padding:6px 14px; border-radius:99px; border:1.5px solid var(--fbc-line,#e3e9f1); background:#fff; color:#5a6b85; font-size:.82rem; font-weight:600; text-decoration:none; transition:.15s; }
.fbc-chip:hover { border-color:#b9cbe6; }
.fbc-chip.is-on { background:var(--fbc-navy-900,#041853); border-color:var(--fbc-navy-900,#041853); color:#fff; }

/* Floating Support/Feedback launcher */
/* The container is click-through: only the button (and the open menu) catch clicks,
   so the invisible menu area can never block page buttons underneath it. */
.fbc-fab { position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none; }
.fbc-fab-btn { pointer-events:auto; display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; padding:14px 20px; border-radius:99px;
  background:linear-gradient(135deg,#0066CC,#041853); color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:0 10px 30px rgba(4,24,83,.35); transition:transform .18s, box-shadow .18s; }
.fbc-fab-btn:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(4,24,83,.45); }
.fbc-fab-btn .fbc-fab-ic-close { display:none; font-size:1.1rem; line-height:1; }
.fbc-fab.is-open .fbc-fab-ic-open { display:none; }
.fbc-fab.is-open .fbc-fab-ic-close { display:inline; }
.fbc-fab.is-open .fbc-fab-label { display:none; }
.fbc-fab-menu { display:flex; flex-direction:column; gap:8px; opacity:0; visibility:hidden; transform:translateY(12px) scale(.96);
  pointer-events:none; transition:opacity .18s, transform .18s, visibility .18s; transform-origin:bottom right; }
.fbc-fab.is-open .fbc-fab-menu { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
.fbc-fab-item { pointer-events:auto; display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--fbc-line,#e3e9f1);
  border-radius:14px; padding:12px 16px; text-decoration:none; color:#041853; min-width:230px;
  box-shadow:0 8px 24px rgba(4,24,83,.12); transition:transform .15s, border-color .15s; }
.fbc-fab-item:hover { transform:translateX(-3px); border-color:#0066CC; }
.fbc-fab-item .ic { font-size:1.4rem; line-height:1; flex:0 0 auto; }
.fbc-fab-item strong { display:block; font-size:.9rem; }
.fbc-fab-item small { color:#5a6b85; font-size:.78rem; }
@media (max-width:560px){ .fbc-fab { right:14px; bottom:14px; } .fbc-fab-item { min-width:200px; } }
/* On dashboard pages the bottom nav bar occupies the same corner on small screens,
   so lift the help button (and its menu) clear of it. */
@media (max-width:760px){
  .fbc-panelpage .fbc-fab { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .fbc-panelpage .fbc-fab-btn { padding:12px 16px; font-size:.85rem; }
  .fbc-panelpage .fbc-fab-menu { max-height:52vh; overflow-y:auto; }
}
@media print { .fbc-fab { display:none; } }
.fbc-cv-tip { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; padding: 10px 14px; background: #fdecec; border: 1px solid #f5c6c6; border-radius: 9px; color: #c0392b; font-size: .85rem; font-weight: 600; }
.fbc-cv-tip svg { flex: 0 0 auto; }

/* ============ Split-screen auth (login / register) ============ */
.fbc-auth-split { display: grid; grid-template-columns: 0.82fr 1fr; min-height: calc(100vh - 64px); }
.fbc-auth-visual {
  position: relative; overflow: hidden; color: #fff;
  background: #042B6D url('../img/auth-bg.svg') center/cover no-repeat;
  display: flex; flex-direction: column; justify-content: center; padding: 54px 48px;
}
.fbc-auth-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,18,62,.30) 0%, rgba(3,18,62,.05) 40%, rgba(3,18,62,.55) 100%);
  pointer-events: none;
}
.fbc-auth-visual > * { position: relative; z-index: 1; }
.fbc-auth-brand { display: flex; align-items: center; gap: 12px; }
.fbc-auth-brand img { width: 44px; height: 44px; border-radius: 12px; background: #fff; padding: 5px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.fbc-auth-brand span { font-family: var(--fbc-head, 'IBM Plex Sans', sans-serif); font-weight: 700; font-size: 1.1rem; letter-spacing: .2px; }
.fbc-auth-visual-mid { margin: 0; }
.fbc-auth-headline { font-family: var(--fbc-head, 'IBM Plex Sans', sans-serif); font-size: 2.35rem; line-height: 1.16; font-weight: 700; margin: 0 0 20px; color: #ffffff; text-shadow: 0 2px 20px rgba(0,0,0,.2); }
.fbc-auth-headline .accent { color: #46c6ff; }
.fbc-auth-tag { font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,.9); max-width: 34ch; margin-bottom: 36px; }
.fbc-auth-points { display: flex; flex-direction: column; gap: 13px; }
.fbc-auth-point {
  display: flex; align-items: center; gap: 13px; font-size: .96rem; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 12px 16px; border-radius: 12px;
}
.fbc-auth-point .ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: rgba(70,198,255,.22); color: #bfe9ff; display: flex; align-items: center; justify-content: center; }
.fbc-auth-visual-foot { font-size: .82rem; color: rgba(255,255,255,.6); margin-top: 40px; }
.fbc-auth-formside { display: flex; align-items: center; justify-content: center; padding: 44px 28px; background: #f6f8fc; }
.fbc-auth-formcard { width: 100%; max-width: 420px; }
.fbc-auth-formcard .fbc-auth-title { text-align: left; font-size: 1.85rem; margin-bottom: 4px; }
.fbc-auth-formcard .fbc-auth-sub { text-align: left; color: var(--fbc-muted, #5a6b85); margin-bottom: 22px; }
.fbc-auth-formcard .fbc-card { box-shadow: 0 12px 40px rgba(4,24,83,.10); border: 1px solid #eef1f6; }
@media (max-width: 900px) {
  .fbc-auth-split { grid-template-columns: 1fr; min-height: 0; }
  .fbc-auth-visual { padding: 40px 32px; min-height: 320px; }
  .fbc-auth-headline { font-size: 1.9rem; }
  .fbc-auth-tag { margin-bottom: 24px; }
  .fbc-auth-points { display: none; }
  .fbc-auth-visual-foot { display: none; }
}
@media (max-width: 560px) {
  .fbc-auth-visual { min-height: 240px; padding: 32px 24px; }
  .fbc-auth-formside { padding: 28px 18px; }
}

/* ============ Homepage job filter bar ============ */
.fbc-jobfilter { padding: 14px 16px; }
.fbc-jobfilter-row { display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; }
.fbc-jobfilter-field { position: relative; display: flex; align-items: center; }
.fbc-jobfilter-search { flex: 1 1 auto; min-width: 0; }
.fbc-jobfilter-search svg { position: absolute; left: 12px; color: var(--fbc-blue-600); pointer-events: none; }
.fbc-jobfilter-search input {
  width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--fbc-line);
  border-radius: 10px; font-size: .92rem; font-family: inherit; background: #fff;
}
.fbc-jobfilter-search input:focus { outline: none; border-color: var(--fbc-blue-500); box-shadow: 0 0 0 3px rgba(11,135,208,.12); }
.fbc-jobfilter .fbc-select { flex: 0 0 auto; width: auto; min-width: 130px; }
.fbc-jobfilter .fbc-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 760px) {
  .fbc-jobfilter-row { flex-wrap: wrap; }
  .fbc-jobfilter-search { flex: 1 1 100%; }
  .fbc-jobfilter .fbc-select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .fbc-jobfilter .fbc-btn { flex: 1 1 auto; }
}

/* ============ Subscribe (job alerts) form ============ */
.fbc-subscribe-form { display: block; }
.fbc-subscribe-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fbc-subscribe-row .fbc-input { flex: 1; min-width: 200px; }
.fbc-subscribe-row .fbc-btn { flex: 0 0 auto; }
.fbc-subscribe-form .fbc-captcha { margin-bottom: 0; }
.fbc-subscribe-form .fbc-captcha-row { flex-wrap: wrap; }

/* ============ Panel layout modes (Root > Settings > Panel Layout) ============ */
/* Wide: logged-in panels use the full screen width instead of the 1100px cap */
.fbc-panel-wide .fbc-main .fbc-container { max-width: none; padding-left: 28px; padding-right: 28px; }
.fbc-panel-wide .fbc-dash { grid-template-columns: 240px minmax(0, 1fr); }

/* Immersive: full width AND hide the site header + footer for a focused workspace.
   A small floating "logout / exit" bar keeps navigation available. */
.fbc-panel-immersive .fbc-topbar,
.fbc-panel-immersive .fbc-footer { display: none; }
.fbc-panel-immersive .fbc-main { padding-top: 16px; }
.fbc-panel-immersive .fbc-main .fbc-container { max-width: none; padding-left: 24px; padding-right: 24px; }
.fbc-panel-immersive .fbc-dash { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 860px) {
  .fbc-panel-wide .fbc-main .fbc-container,
  .fbc-panel-immersive .fbc-main .fbc-container { padding-left: 16px; padding-right: 16px; }
}

/* Immersive exit bar (only shown in immersive layout) */
.fbc-immersive-bar { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding: 8px 24px; background: #041853; color: #fff; font-size: .85rem; }
.fbc-immersive-bar a { color: #cfe0f5; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.fbc-immersive-bar a:hover { color: #fff; }
.fbc-immersive-bar .sep { flex: 1; }
.fbc-immersive-bar .who { color: rgba(255,255,255,.6); }

/* ============================================================
   Utilities added in v2.9.3
   These four class names were being used by the Broadcast,
   Greetings, Events, Match Scoring and Analytics pages but had
   never been defined, so small buttons rendered full size and
   two spacing helpers did nothing at all.
   Purely additive — nothing above is changed.
   ============================================================ */
.fbc-btn-sm {
  padding: 6px 12px;
  font-size: .8rem;
  line-height: 1.3;
}
.fbc-input-sm {
  padding: 7px 10px;
  font-size: .85rem;
}
.fbc-mb-1 { margin-bottom: 10px; }
.fbc-mt-1 { margin-top: 10px; }
.fbc-mt-3 { margin-top: 28px; }

/* On a narrow screen a row of small buttons should be able to
   stack rather than push the page sideways. */
@media (max-width: 560px) {
  .fbc-btn-sm { padding: 7px 10px; }
  .fbc-table .fbc-btn-sm { white-space: nowrap; }
}


/* Collapsible action panels (Events greeting form).
   Without this the browser draws its own disclosure triangle next to the
   button, which makes a styled <summary> look broken. */
.fbc-reveal > summary { list-style: none; cursor: pointer; }
.fbc-reveal > summary::-webkit-details-marker { display: none; }
.fbc-reveal > summary::marker { content: ''; }
.fbc-reveal[open] > summary { margin-bottom: 4px; }

/* Countdown chip used on the Events list */
.fbc-when {
  flex: none;
  min-width: 62px;
  text-align: center;
  padding: 8px 10px;
  border-radius: var(--fbc-radius);
  background: var(--fbc-bg);
  border: 1px solid var(--fbc-line);
  line-height: 1.15;
}
.fbc-when b { display: block; font-size: 1.25rem; color: var(--fbc-navy-900); }
.fbc-when span { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fbc-muted); }
.fbc-when.is-today { background: var(--fbc-navy-900); border-color: var(--fbc-navy-900); }
.fbc-when.is-today b, .fbc-when.is-today span { color: #fff; }

/* One event per row inside a single card */
.fbc-evrow { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--fbc-line); }
.fbc-evrow:last-child { border-bottom: 0; padding-bottom: 0; }
.fbc-evrow:first-child { padding-top: 0; }

/* ============================================================
   Guided dashboard tour (v2.9.7)
   ============================================================ */
body.fbc-tour-on { overflow: hidden; }

.fbc-tour-ov {
  position: fixed; inset: 0; z-index: 9000;
  animation: fbcTourIn .18s ease;
}
@keyframes fbcTourIn { from { opacity: 0 } to { opacity: 1 } }

/* The dim layer is the huge shadow cast OUT of the cut-out, so the element
   underneath stays fully readable and nothing is drawn over it. */
.fbc-tour-hole {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(4, 24, 83, .72);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  pointer-events: none;
}
.fbc-tour-hole::after {
  content: '';
  position: absolute; inset: -2px;
  border: 2px solid var(--fbc-cyan-400, #2EB0E7);
  border-radius: 12px;
}

.fbc-tour-card {
  position: absolute;
  width: min(330px, calc(100vw - 24px));
  background: #fff;
  border-radius: var(--fbc-radius, 12px);
  box-shadow: 0 12px 40px rgba(4, 24, 83, .3);
  padding: 18px 18px 14px;
  transition: top .25s ease, left .25s ease;
  outline: none;
}
.fbc-tour-card .fbc-tour-step {
  font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fbc-blue-600, #0066CC); margin-bottom: 6px;
}
.fbc-tour-card h4 {
  margin: 0 0 6px; font-size: 1.05rem; color: var(--fbc-navy-900, #041853);
}
.fbc-tour-card p {
  margin: 0 0 14px; font-size: .88rem; line-height: 1.55; color: var(--fbc-body, #3a4354);
}
.fbc-tour-btns { display: flex; align-items: center; gap: 8px; }
.fbc-tour-btns .fbc-tour-sp { flex: 1; }
.fbc-tour-btns button {
  font: inherit; font-size: .84rem; cursor: pointer;
  padding: 7px 15px; border-radius: 8px; border: 1px solid var(--fbc-line, #e3e9f1);
  background: #fff; color: var(--fbc-body, #3a4354);
}
.fbc-tour-btns button:hover { border-color: var(--fbc-blue-600, #0066CC); }
.fbc-tour-btns .fbc-tour-skip { border-color: transparent; color: var(--fbc-muted, #8a94a6); }
.fbc-tour-btns .fbc-tour-next {
  background: var(--fbc-blue-600, #0066CC); border-color: var(--fbc-blue-600, #0066CC); color: #fff; font-weight: 600;
}
.fbc-tour-btns .fbc-tour-next:hover { background: var(--fbc-navy-700, #042B6D); }

@media (max-width: 560px) {
  .fbc-tour-card { width: calc(100vw - 24px); padding: 16px 15px 12px; }
  .fbc-tour-card p { font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fbc-tour-ov, .fbc-tour-hole, .fbc-tour-card { animation: none; transition: none; }
}

/* ============================================================
   v3.0 — PANEL SHELL (icon rail + contextual panel)

   Replaces the flat .fbc-side list. The shell is fixed and full height;
   the body simply gets a left padding equal to its width, so the existing
   topbar and every page's markup slide across without being touched.
   Scoped to .fbc-panelpage so public pages are unaffected.
   ============================================================ */
:root { --fbc-rail: 60px; --fbc-panelw: 214px; }

.fbc-shell { display: flex; }
.fbc-shell-open, .fbc-shell-open[hidden] { display: none; }

@media (min-width: 992px) {
  .fbc-panelpage .fbc-shell {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 900;
    display: flex; align-items: stretch;
  }
  /* The sidebar is out of flow now, so the page-level two-column grid would
     leave an empty 230px gutter behind it.
     MUST stay a direct-child selector: .fbc-dash is reused across 14 files as
     a generic grid — the filter rows on Applicants and Talent Pool, the
     two-column forms on Settings, Job form, HR Team, My Account, and the
     candidate detail split. A bare `.fbc-panelpage .fbc-dash` flattened every
     one of them, so filters stacked vertically and forms lost their columns. */
  .fbc-panelpage .fbc-container > .fbc-dash { display: block; }
  .fbc-panelpage { padding-left: calc(var(--fbc-rail) + var(--fbc-panelw)); transition: padding-left .16s ease; }
  .fbc-panelpage.fbc-shell-simple { padding-left: var(--fbc-panelw); }
  .fbc-panelpage.fbc-folded { padding-left: var(--fbc-rail); }
  .fbc-panelpage.fbc-shell-simple.fbc-folded { padding-left: 0; }
  .fbc-panelpage.fbc-folded .fbc-panel { display: none; }

  .fbc-panelpage .fbc-container { max-width: none; padding-left: 26px; padding-right: 26px; margin: 0; }
  .fbc-panelpage .fbc-main { padding-top: 22px; }

  /* The rail stays on screen when the panel folds, so this button has to clear
     it — at left:10px it sat directly on top of the section icons. For the
     applicant shell there is no rail, so it starts at the edge. */
  /* This is shown ONLY while the panel is folded. A plain `display: grid` here
     beat the element's own [hidden] attribute — class selectors outrank the
     browser's [hidden] rule — so the button sat on top of the panel heading on
     every screen, clipping "OVERVIEW" down to "VIEW". */
  .fbc-panelpage.fbc-folded .fbc-shell-open {
    position: fixed; left: calc(var(--fbc-rail) + 10px); top: 4px; z-index: 950;
    display: grid; place-items: center; width: 36px; height: 36px;
    border: 1px solid var(--fbc-line, #e3e9f1); border-radius: 9px;
    background: #fff; color: #475569; cursor: pointer;
  }
  .fbc-shell-open:hover { color: var(--fbc-navy-900, #041853); border-color: #cbd5e1; }
  .fbc-shell-open svg { width: 17px; height: 17px; }
  .fbc-panelpage.fbc-shell-simple .fbc-shell-open { left: 10px; }
  /* With a rail present these three sit in the avatar menu instead. */
  .fbc-shell:not(.is-simple) .fbc-panel-foot { display: none; }
}

/* ---------- context bar (replaces the site header on panel screens) ---------- */
.fbc-panelpage .fbc-topbar { display: none; }
.fbc-panelpage { padding-top: 44px; }

.fbc-crumbbar {
  position: fixed; top: 0; right: 0; left: 0; height: 44px; z-index: 800;
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: #fff; border-bottom: 1px solid var(--fbc-line, #e3e9f1);
}
.fbc-crumb { font-size: .84rem; color: #475569; display: flex; align-items: center; gap: 8px; min-width: 0; }
.fbc-crumb b { font-weight: 600; color: #94a3b8; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.fbc-crumb i { font-style: normal; color: #cbd5e1; }
.fbc-crumb-gap { flex: 1; }
.fbc-crumb-site { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: #64748b; }
.fbc-crumb-site:hover { color: var(--fbc-blue-600, #0066cc); text-decoration: none; }
.fbc-crumb-site svg { width: 15px; height: 15px; }

@media (min-width: 992px) {
  .fbc-crumbbar { left: calc(var(--fbc-rail) + var(--fbc-panelw)); transition: left .16s ease; }
  .fbc-panelpage.fbc-shell-simple .fbc-crumbbar { left: var(--fbc-panelw); }
  .fbc-panelpage.fbc-folded .fbc-crumbbar { left: var(--fbc-rail); padding-left: 56px; }
  .fbc-panelpage.fbc-shell-simple.fbc-folded .fbc-crumbbar { left: 0; }
}
@media (max-width: 991px) {
  .fbc-crumb-site span { display: none; }
}

/* The footer used to float wherever the content ended, so a short page left it
   halfway up the screen with empty space beneath. Standard sticky-footer: the
   page is a column at least a viewport tall and the main region takes up the
   slack. */
.fbc-panelpage { min-height: 100vh; display: flex; flex-direction: column; }
.fbc-panelpage .fbc-main { flex: 1 0 auto; }
.fbc-panelpage .fbc-footer { flex: none; margin-top: auto; }

/* ---------- rail ---------- */
.fbc-rail {
  width: var(--fbc-rail); flex: 0 0 var(--fbc-rail);
  background: var(--fbc-navy-900, #041853);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 0 12px;
}
.fbc-rail-mark { width: 36px; height: 36px; border-radius: 10px; background: #fff; padding: 3px; margin-bottom: 12px; flex: none; }
.fbc-rail-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fbc-rail-btn {
  position: relative; width: 46px; height: 48px; border: 0; background: none; cursor: pointer;
  border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: rgba(255,255,255,.62); transition: background .12s, color .12s;
}
.fbc-rail-btn svg { width: 19px; height: 19px; }
.fbc-rail-btn span { font-family: var(--fbc-font-head, inherit); font-size: .6rem; letter-spacing: .01em; }
.fbc-rail-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.fbc-rail-btn.is-on { background: var(--fbc-navy-700, #042b6d); color: #fff; }
.fbc-rail-btn.is-on::before {
  content: ""; position: absolute; left: -7px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--fbc-cyan-400, #2eb0e7);
}
.fbc-rail-dot {
  position: absolute; top: 4px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #e5484d; color: #fff; font-size: .62rem; font-weight: 700;
  font-style: normal; line-height: 17px; text-align: center;
}
.fbc-rail-gap { flex: 1; }

/* ---------- v3.1.3: account items as rail icons ----------
   The visual grammar is doing real work here. Section buttons are filled
   rounded squares with a label, an active fill and a cyan edge marker; these
   are outlined circles, muted, no label, no fill even when current. Anyone can
   see at a glance that the bottom group is a different kind of control — which
   matters, because these navigate away while the ones above only swap panels. */
.fbc-rail-util {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding-top: 10px; margin-bottom: 10px; flex: none;
  border-top: 1px solid rgba(255,255,255,.14); width: 34px;
}
.fbc-rail-u {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  color: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.16);
  transition: color .12s, border-color .12s, background .12s;
}
.fbc-rail-u:hover { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.08); text-decoration: none; }
.fbc-rail-u svg { width: 16px; height: 16px; }
/* Current page: brighter, but still no fill — it must not read as a section. */
.fbc-rail-u.is-here { color: var(--fbc-cyan-400, #2eb0e7); border-color: rgba(46,176,231,.5); }
/* Sign out ends the session. It only turns red on approach, so it is never
   shouting from the rail, but it is unmistakable once the pointer is on it. */
.fbc-rail-u.is-out:hover { color: #fff; background: #e5484d; border-color: #e5484d; }
.fbc-rail-u:focus-visible { outline: 2px solid var(--fbc-cyan-400, #2eb0e7); outline-offset: 2px; }

.fbc-rail-me {
  width: 33px; height: 33px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--fbc-blue-500, #0b87d0); color: #fff;
  display: grid; place-items: center; font-family: var(--fbc-font-head, inherit);
  font-size: .68rem; font-weight: 600; flex: none;
  box-shadow: 0 0 0 0 rgba(46,176,231,.9); transition: box-shadow .14s;
}
.fbc-rail-me:hover, .fbc-rail-me[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(46,176,231,.45); }
.fbc-rail-me.has-photo { padding: 0; overflow: hidden; background: #fff; }

.fbc-me-menu {
  position: fixed; left: calc(var(--fbc-rail) + 8px); bottom: 12px; z-index: 1200;
  min-width: 202px; background: #fff; border: 1px solid var(--fbc-line, #e3e9f1);
  border-radius: 12px; box-shadow: 0 12px 34px rgba(4,24,83,.18); padding: 6px;
}
.fbc-me-menu[hidden] { display: none; }
.fbc-me-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px 10px; border-bottom: 1px solid var(--fbc-line, #e3e9f1); margin-bottom: 5px;
}
.fbc-me-head > span { min-width: 0; }
.fbc-me-head strong { display: block; font-size: .87rem; color: #0f172a; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbc-me-head small { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: #0066cc; font-weight: 700; }
.fbc-me-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--fbc-blue-500, #0b87d0); color: #fff;
  display: grid; place-items: center; font-family: var(--fbc-font-head, inherit);
  font-size: .72rem; font-weight: 600;
}
.fbc-me-av img, .fbc-rail-me img, .fbc-foot-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- applicant panel: brand, and an account row with a face on it ---------- */
.fbc-panel-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fbc-panel-brand:hover { text-decoration: none; }
.fbc-panel-brand img { width: 34px; height: 34px; border-radius: 9px; flex: none; object-fit: contain; }
.fbc-panel-brand strong {
  display: block; font-family: var(--fbc-font-head, inherit); font-size: .82rem; font-weight: 700;
  color: var(--fbc-navy-900, #041853); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fbc-panel-brand small {
  display: block; font-size: .58rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fbc-blue-600, #0066cc); font-weight: 700;
}

.fbc-panel-foot a.fbc-foot-me { padding: 8px 10px; gap: 10px; }
.fbc-foot-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--fbc-blue-500, #0b87d0); color: #fff;
  display: grid; place-items: center; font-family: var(--fbc-font-head, inherit);
  font-size: .7rem; font-weight: 600;
}
.fbc-foot-me > span { min-width: 0; line-height: 1.25; }
.fbc-foot-me strong { display: block; font-size: .855rem; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbc-foot-me small { display: block; font-size: .7rem; color: #94a3b8; }
.fbc-foot-me:hover strong { color: var(--fbc-navy-900, #041853); }
.fbc-foot-me.fbc-active strong { color: #185fa5; }
.fbc-me-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px;
  color: #475569; font-size: .875rem;
}
.fbc-me-menu a svg { width: 17px; height: 17px; flex: none; color: #94a3b8; }
.fbc-me-menu a:hover { background: #f1f5f9; color: #0f172a; text-decoration: none; }
.fbc-me-menu a:hover svg { color: #475569; }
.fbc-me-menu a:focus-visible { outline: 2px solid var(--fbc-blue-600, #0066cc); outline-offset: -2px; }
.fbc-me-menu a.fbc-active { background: #e6f1fb; color: #185fa5; font-weight: 600; }
.fbc-me-out { color: #94a3b8 !important; }
.fbc-me-out:hover { color: #b91c1c !important; background: #fef2f2 !important; }

/* ---------- panel ---------- */
.fbc-panel {
  width: var(--fbc-panelw); flex: 0 0 var(--fbc-panelw);
  background: #fff; border-right: 1px solid var(--fbc-line, #e3e9f1);
  display: flex; flex-direction: column; overflow: hidden;
}
.fbc-panel-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 12px 10px; }
.fbc-panel-top h2 {
  margin: 0; font-family: var(--fbc-font-head, inherit); font-size: .72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #94a3b8; white-space: nowrap;
}
.fbc-panel-fold { width: 27px; height: 27px; border: 0; background: none; border-radius: 7px; cursor: pointer; color: #94a3b8; display: grid; place-items: center; }
.fbc-panel-fold:hover { background: #f1f5f9; color: #475569; }
.fbc-panel-fold svg { width: 15px; height: 15px; }
.fbc-panel-nav { flex: 1; overflow-y: auto; padding: 0 8px 10px; }
.fbc-panel-set { display: none; }
.fbc-panel-set.is-on { display: block; }
.fbc-panel-nav a, .fbc-panel-foot a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: #475569; font-size: .875rem; white-space: nowrap;
}
.fbc-panel-nav a svg, .fbc-panel-foot a svg { width: 17px; height: 17px; flex: none; color: #94a3b8; }
.fbc-panel-nav a:hover, .fbc-panel-foot a:hover { background: #f1f5f9; color: #0f172a; text-decoration: none; }
.fbc-panel-nav a:hover svg, .fbc-panel-foot a:hover svg { color: #475569; }
.fbc-panel-nav a.fbc-active, .fbc-panel-foot a.fbc-active {
  background: #e6f1fb; color: #185fa5; font-weight: 600;
}
.fbc-panel-nav a.fbc-active svg { color: #185fa5; }
.fbc-panel-pill {
  margin-left: auto; min-width: 21px; padding: 1px 6px; border-radius: 10px;
  background: #fee2e2; color: #991b1b; font-size: .68rem; font-weight: 700; font-style: normal; text-align: center;
}
.fbc-panel-foot { border-top: 1px solid var(--fbc-line, #e3e9f1); padding: 8px; }
.fbc-panel-out { color: #94a3b8 !important; }
.fbc-panel-out:hover { color: #b91c1c !important; background: #fef2f2 !important; }

/* Keyboard users need to see where they are. The rail is navy and the panel is
   white, so they take different rings. */
.fbc-rail-btn:focus-visible { outline: 2px solid var(--fbc-cyan-400, #2eb0e7); outline-offset: -3px; }
.fbc-panel-nav a:focus-visible,
.fbc-panel-foot a:focus-visible,
.fbc-panel-fold:focus-visible,
.fbc-shell-open:focus-visible { outline: 2px solid var(--fbc-blue-600, #0066cc); outline-offset: 2px; }

/* ---------- mobile: rail becomes the bottom bar, panel becomes a sheet ---------- */
@media (max-width: 991px) {
  .fbc-panelpage .fbc-container > .fbc-dash { display: block; }
  .fbc-panelpage .fbc-main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .fbc-shell { display: contents; }

  .fbc-rail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    width: auto; flex-direction: row; align-items: stretch; gap: 4px;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .fbc-rail-mark, .fbc-rail-gap { display: none; }
  /* v3.1.3 — the desktop account icons must not follow the rail into the bottom
     bar. That bar already holds every section plus the avatar across ~380px;
     three more targets would squeeze the sections below a comfortable tap size,
     and the avatar menu is already the account route on a phone. */
  .fbc-rail-util { display: none; }
  /* .fbc-rail-me and .fbc-me-menu used to be hidden here; see the v3.0.7 block
     at the end of this file for why they are now the mobile account route. */
  .fbc-rail-btn { flex: 1; width: auto; height: 50px; }
  .fbc-rail-btn.is-on::before { display: none; }
  .fbc-rail-dot { right: calc(50% - 21px); }

  .fbc-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    width: auto; flex-basis: auto; max-height: 74vh; border-right: 0;
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(4,24,83,.22);
    transform: translateY(101%); transition: transform .2s ease;
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }
  .fbc-sheet-on .fbc-panel { transform: translateY(0); }
  .fbc-sheet-on::after {
    content: ""; position: fixed; inset: 0; z-index: 999; background: rgba(4,24,83,.45);
  }
  .fbc-panel-fold svg { transform: rotate(-90deg); }
  .fbc-shell-open { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fbc-panelpage, .fbc-panel { transition: none !important; }
}

/* ============================================================
   v3.0.6 — the phone route into the panel menu.

   The applicant shell renders no rail (its links declare no section), and on a
   phone the rail is what raises the panel sheet. With the site header hidden on
   panel screens, that left candidates on a phone with no navigation at all —
   no menu, no My Profile, no Sign out. The context bar now carries a menu
   button on narrow screens for every shell, staff included.
   ============================================================ */
.fbc-crumb-menu { display: none; }

@media (max-width: 991px) {
  .fbc-crumbbar { padding: 0 12px; gap: 10px; }
  .fbc-crumb-menu {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--fbc-line, #e3e9f1); border-radius: 9px;
    background: #fff; color: #475569; cursor: pointer;
  }
  .fbc-crumb-menu svg { width: 18px; height: 18px; }
  .fbc-crumb-menu[aria-expanded="true"] { background: #eef2f8; color: #041853; border-color: #cbd5e1; }
  .fbc-crumb-menu:focus-visible { outline: 2px solid var(--fbc-blue-600, #0066cc); outline-offset: 2px; }

  /* The applicant shell has no bottom bar, so it needs none of the clearance
     the staff shell reserves for one. Higher specificity than the rule it
     overrides, so placement at the end of the file is safe. */
  .fbc-panelpage.fbc-shell-simple .fbc-main { padding-bottom: 28px; }
  .fbc-shell-simple .fbc-panel { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   v3.0.7 — the staff panel on a phone

   Two things were wrong once the sheet opened on a phone.

   1. The account block repeated under every section. On desktop the avatar menu
      holds User Guide / My Account / Sign out and .fbc-panel-foot is hidden;
      on a phone the avatar was hidden instead, so the foot had to carry those
      items — and because it sits outside the per-section list, it appeared
      again under Overview, Hiring, People, Comms and System alike. It also
      wears the applicant panel's face-and-name styling, which is why the admin
      sheet looked like the candidate one. The avatar now joins the bottom bar
      and the foot goes away, matching desktop exactly.

   2. The sheet covered the bottom bar. It sat at bottom:0 and reserved 66px of
      INNER padding for the bar — but padding is inside the element, so its own
      white background painted straight over it (z-index 1001 against 1000).
      The bar was invisible and un-tappable while the sheet was up, so changing
      section meant closing the sheet first, and the reserved strip just read as
      dead space under "Sign out". The sheet now stops above the bar.

   The applicant shell is untouched by both: it has no bar, so its foot stays
   put and its sheet still runs to the bottom of the screen.
   ============================================================ */
@media (max-width: 991px) {
  .fbc-rail-me { width: 40px; height: 40px; align-self: center; margin-left: 4px; }

  .fbc-shell:not(.is-simple) .fbc-panel-foot { display: none; }

  .fbc-me-menu {
    left: 10px; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom));
    min-width: 0; z-index: 1002; border-radius: 14px;
  }

  .fbc-panelpage:not(.fbc-shell-simple) .fbc-panel {
    bottom: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: 10px;
    max-height: 62vh;
  }
}

/* ============================================================
   v3.1.0 — job-alert targeting + brand on the phone context bar
   ============================================================ */
.fbc-subscribe-prefs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.fbc-subscribe-prefs-lbl { font-size: .78rem; color: var(--fbc-muted, #64748b); }
.fbc-subscribe-prefs .fbc-select { width: auto; min-width: 150px; font-size: .84rem; padding: 8px 10px; }

/* The logo is in the rail on desktop; on a phone the rail is the bottom bar and
   carries no mark, so the context bar takes it. */
.fbc-crumb-brand { display: none; }
@media (max-width: 991px) {
  .fbc-crumb-brand {
    display: inline-flex; align-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 7px; overflow: hidden; background: #fff;
  }
  .fbc-crumb-brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .fbc-crumb b { display: none; }          /* section name — the sheet already says it */
  .fbc-crumb i { display: none; }
  .fbc-crumb { font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fbc-subscribe-prefs .fbc-select { flex: 1 1 100%; min-width: 0; }
}

/* ── Talent pool prompts (v3.1.5) ─────────────────────────────────────────
   Appended, not merged into existing rules, so a future patch that ships an
   older app.css cannot silently revert part of a block it does not know about.
   That is what happened to .fbc-subscribe-prefs in 3.1.3. */

/* Public listing — the permanent line under the job grid. */
.fbc-pool-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 26px 0 4px; padding: 20px 24px;
  background: linear-gradient(135deg, rgba(46, 176, 231, .09), rgba(0, 102, 204, .06));
  border: 1px solid var(--fbc-line);
  border-left: 3px solid var(--fbc-cyan-400);
  border-radius: var(--fbc-radius);
}
.fbc-pool-strip-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--fbc-navy-900); color: #fff;
}
.fbc-pool-strip-text { flex: 1 1 260px; min-width: 0; }
.fbc-pool-strip-text h3 { margin: 0 0 4px; font-size: 1.02rem; }
.fbc-pool-strip-text p { margin: 0; color: var(--fbc-body); font-size: .9rem; line-height: 1.55; }
.fbc-pool-strip .fbc-btn { flex: none; }

/* Applicant dashboard — the card that stays until they join. */
.fbc-pool-card { display: flex; align-items: flex-start; gap: 16px; }
.fbc-pool-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; margin-top: 2px;
  background: rgba(46, 176, 231, .14); color: var(--fbc-navy-700);
}
.fbc-pool-body { flex: 1 1 auto; min-width: 0; }
.fbc-pool-body h3 { margin: 0 0 6px; }
.fbc-pool-body p { margin: 0 0 14px; line-height: 1.55; }

@media (max-width: 640px) {
  .fbc-pool-strip { padding: 18px; gap: 14px; }
  .fbc-pool-strip .fbc-btn { width: 100%; justify-content: center; }
  .fbc-pool-card { flex-direction: column; gap: 12px; }
  .fbc-pool-body .fbc-btn { width: 100%; justify-content: center; }
}

/* ── v3.1.8 — hiring company on the job card ───────────────────────── */
.fbc-job-logo {
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
  display: block;
}
.fbc-job-ico:has(.fbc-job-logo) { background: #fff; border: 1px solid var(--fbc-line); }
.fbc-job-company {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fbc-blue-600);
  margin-bottom: 2px;
}
.fbc-job-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fbc-job-brand img { max-height: 46px; max-width: 150px; object-fit: contain; }
.fbc-job-brand .nm { font-weight: 700; }
.fbc-job-brand .tag { font-size: .84rem; color: var(--fbc-muted, #667085); }

/* ── v3.1.8 — group brands block on the homepage ───────────────────── */
.fbc-group { padding: 40px 0 8px; }
.fbc-group-head { text-align: center; margin-bottom: 22px; }
.fbc-group-head h2 { font-size: 1.35rem; }
.fbc-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.fbc-group-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 22px 16px;
  background: #fff;
  border: 1px solid var(--fbc-line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.fbc-group-card:hover {
  border-color: var(--fbc-blue-600);
  box-shadow: 0 6px 20px rgba(4, 24, 83, .09);
  transform: translateY(-2px);
}
.fbc-group-card img {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 10px;
}
.fbc-group-init {
  height: 48px; width: 48px; margin-bottom: 10px;
  border-radius: 50%; background: #e6f1fb; color: var(--fbc-navy-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem; letter-spacing: .04em;
}
.fbc-group-card .nm { font-weight: 700; font-size: .95rem; color: var(--fbc-navy-900); }
.fbc-group-card .tag { font-size: .8rem; color: var(--fbc-muted); }
.fbc-group-card .go { margin-top: 9px; font-size: .82rem; font-weight: 600; color: var(--fbc-blue-600); }
.fbc-group-card .go.is-none { color: var(--fbc-muted); font-weight: 500; }
.fbc-group-card.is-quiet { background: #fbfcfe; }
@media (max-width: 560px) {
  .fbc-group { padding: 26px 0 4px; }
  .fbc-group-head { margin-bottom: 16px; }
  .fbc-group-head h2 { font-size: 1.15rem; }
  /* One card per row below 560px: two columns squeeze the longer names
     ("Pacific School System") onto three lines. */
  .fbc-group-grid { grid-template-columns: 1fr; gap: 10px; }
  /* Logo beside the text rather than above it, so three brands do not push
     the job listings a full screen down. */
  .fbc-group-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 14px 16px;
    row-gap: 0;
  }
  .fbc-group-card img,
  .fbc-group-init { height: 40px; width: 40px; margin-bottom: 0; flex: 0 0 40px; }
  .fbc-group-card img { object-fit: contain; }
  .fbc-group-card .nm,
  .fbc-group-card .tag,
  .fbc-group-card .go { flex: 1 1 100%; }
  .fbc-group-card .nm { font-size: .9rem; }
  .fbc-group-card .go { margin-top: 3px; }
  /* Name, tagline and count stack in the space to the right of the logo. */
  .fbc-group-card > :not(img):not(.fbc-group-init) { flex-basis: calc(100% - 54px); }
}