/* ==========================================================================
   Deadcity — dark underworld theme
   Near-black void, parchment-warm text, antique gold as the one signal
   color, crimson reserved for danger/urgency. Built as Bootstrap 5.3
   CSS-variable overrides so every stock Bootstrap component (buttons,
   forms, alerts, cards) picks the palette up for free.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bj-void: #0a0a0d;
  --bj-ink: #111116;
  --bj-surface: #17171d;
  --bj-surface-raised: #1e1e26;
  --bj-border: rgba(233, 230, 223, 0.09);
  --bj-border-strong: rgba(233, 230, 223, 0.18);
  --bj-text: #e9e6df;
  --bj-text-muted: #948f84;
  --bj-gold: #c8a24a;
  --bj-gold-bright: #e0bc66;
  --bj-gold-ink: #1c1305;
  --bj-crimson: #8b1e2b;
  --bj-crimson-bright: #c0293a;
  --bj-danger-text: #e08a92; /* error text on dark surfaces: 7:1 on --bj-surface (crimson-bright is only ~3:1) */
  --bj-focus: #7c8fd6;
  /* Risk bands (Jobs page): one colour per band, used for band labels and for exact percentages coloured by their band. All ≥4.5:1 on --bj-surface. */
  --bj-risk-low: #7cc47f;
  /* Yellow-green, clearly apart from gain gold (#e0bc66): a bust chance must never read as money gained. */
  --bj-risk-moderate: #c3d35a;
  --bj-risk-high: #ec9a4a;
  --bj-risk-severe: #ef6f7a;
  /* Rewards read as gains, Heat as a cost. */
  --bj-gain: var(--bj-gold-bright);
  --bj-cost: #ec9a4a;
  /* Leaderboard positions 1–3. */
  --bj-podium-gold: #e0bc66;
  --bj-podium-silver: #c9ced6;
  --bj-podium-bronze: #b9794c;
  /* Shared shape/spacing tokens. Each one names a value that was already repeated with the same meaning; none changes an existing look. */
  --bj-radius: 10px;             /* panels, cards, stat tiles, list rows */
  --bj-radius-pill: 999px;       /* badges, pills, round buttons */
  --bj-page-narrow: 36rem;       /* the narrow page width: forms and simple pages (Settings, Admin, sign-in, Privacy, status, error) */
  --bj-page-title-size: 1.9rem;  /* the h1 of every in-game page (Career, Inbox, Notifications, Profile, Settings) */
  --bj-panel-pad-y: 1.25rem;     /* general information panels; compact inbox cards and notification rows keep their own padding */
  --bj-panel-pad-x: 1.5rem;
  --bj-panel-pad-mobile: 1rem;
  --bj-panel-gap: 1rem;
  --bj-focus-ring-width: 3px;    /* the one keyboard-focus ring, used by links, buttons and menu items */
  --bj-focus-ring-offset: 2px;

  --bj-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --bj-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Bootstrap overrides */
  --bs-body-bg: var(--bj-void);
  --bs-body-color: var(--bj-text);
  --bs-body-font-family: var(--bj-font-body);
  --bs-border-color: var(--bj-border);
  --bs-secondary-color: var(--bj-text-muted);
  --bs-primary: var(--bj-gold);
  --bs-primary-rgb: 200, 162, 74;
  --bs-link-color: var(--bj-gold-bright);
  --bs-link-color-rgb: 224, 188, 102;
  --bs-link-hover-color: #f0d38a;
  --bs-link-hover-color-rgb: 240, 211, 138;
  --bs-danger: var(--bj-crimson-bright);
  --bs-emphasis-color: var(--bj-text);
}

/* One root size on every width (UI review M1): at 14px on a phone the small labels (0.72–0.8rem) rendered at about 11px. */
html {
  font-size: 16px;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200, 162, 74, 0.06), transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(139, 30, 43, 0.05), transparent 60%),
    var(--bj-void);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--bj-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bj-text);
}

.text-muted {
  color: var(--bj-text-muted) !important;
}

/* ---------------------------------------------------------------------- */
/* Focus ring — --bj-focus (a periwinkle blue, about 5.5:1 on the dark surfaces and clearly distinct from the gold accent) replaces
   Bootstrap's default blue. Links, buttons and menu items share one outline (width/offset tokens above) on :focus-visible, so keyboard
   focus looks the same everywhere; form fields keep Bootstrap's ring plus the gold border. */
/* ---------------------------------------------------------------------- */
.btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bj-void), 0 0 0 0.25rem var(--bj-focus);
}

.btn:focus-visible, .btn:active:focus-visible {
  outline: var(--bj-focus-ring-width) solid var(--bj-focus);
  outline-offset: var(--bj-focus-ring-offset);
  box-shadow: none;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---------------------------------------------------------------------- */
/* Header / navbar                                                        */
/* ---------------------------------------------------------------------- */
.bj-header {
  background: var(--bj-ink);
  border-bottom: 1px solid var(--bj-border-strong);
}

/* The brand is the Deadcity logo (images/logo-nav.webp, transparent) — sized by height, width follows its 2:1 shape. */
.bj-brand {
  display: inline-flex;
  align-items: center;
  padding-block: 0.25rem;
}
.bj-brand-logo {
  display: block;
  height: 48px;
  width: auto;
}
@media (max-width: 575.98px) {
  .bj-brand-logo { height: 40px; }
}

.bj-tagline {
  font-family: var(--bj-font-body);
  font-weight: 600;
  letter-spacing: 0.28em;
  font-size: 0.65rem;
  color: var(--bj-gold);
  text-transform: uppercase;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--bj-text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--bj-gold-bright);
}

.navbar-dark .navbar-toggler {
  border-color: var(--bj-border-strong);
}

.bj-user-pill {
  color: var(--bj-text);
  font-weight: 600;
}

.bj-user-email {
  color: var(--bj-text-muted);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--bj-gold-ink);
  --bs-btn-bg: var(--bj-gold);
  --bs-btn-border-color: var(--bj-gold);
  --bs-btn-hover-color: var(--bj-gold-ink);
  --bs-btn-hover-bg: var(--bj-gold-bright);
  --bs-btn-hover-border-color: var(--bj-gold-bright);
  --bs-btn-active-color: var(--bj-gold-ink);
  --bs-btn-active-bg: var(--bj-gold-bright);
  --bs-btn-active-border-color: var(--bj-gold-bright);
  --bs-btn-disabled-bg: var(--bj-gold);
  --bs-btn-disabled-border-color: var(--bj-gold);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bj-text-muted);
  --bs-btn-border-color: var(--bj-border-strong);
  --bs-btn-hover-color: var(--bj-text);
  --bs-btn-hover-bg: var(--bj-surface-raised);
  --bs-btn-hover-border-color: var(--bj-border-strong);
}

/* The optional-improvement button (counter a complication, use an approach, pay bail from a job): a gold outline, never Bootstrap's blue. */
.btn-outline-primary {
  --bs-btn-color: var(--bj-gold-bright);
  --bs-btn-border-color: var(--bj-gold);
  --bs-btn-hover-color: var(--bj-gold-ink);
  --bs-btn-hover-bg: var(--bj-gold-bright);
  --bs-btn-hover-border-color: var(--bj-gold-bright);
  --bs-btn-active-color: var(--bj-gold-ink);
  --bs-btn-active-bg: var(--bj-gold-bright);
  --bs-btn-active-border-color: var(--bj-gold-bright);
  --bs-btn-disabled-color: var(--bj-text-muted);
  --bs-btn-disabled-border-color: var(--bj-border-strong);
}

/* Danger buttons (the confirmation dialog's "Abandon job", "Walk away", …) use the game's crimson, not Bootstrap's red. */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bj-crimson-bright);
  --bs-btn-border-color: var(--bj-crimson-bright);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bj-crimson);
  --bs-btn-hover-border-color: var(--bj-crimson);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bj-crimson);
  --bs-btn-active-border-color: var(--bj-crimson);
  font-weight: 600;
}

.btn-outline-danger {
  --bs-btn-color: var(--bj-danger-text);
  --bs-btn-border-color: var(--bj-crimson-bright);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bj-crimson);
  --bs-btn-hover-border-color: var(--bj-crimson);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bj-crimson);
  --bs-btn-active-border-color: var(--bj-crimson);
}

.btn-link {
  color: var(--bj-gold-bright);
}

.btn-link:hover {
  color: #f0d38a;
}

/* ---------------------------------------------------------------------- */
/* Surfaces: cards, forms, alerts                                         */
/* ---------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--bj-surface);
  --bs-card-border-color: var(--bj-border);
  --bs-card-color: var(--bj-text);
}

.bj-panel {
  background: var(--bj-surface);
  border: 1px solid var(--bj-border);
  border-radius: var(--bj-radius);
  padding: 2rem;
}

.form-control, .form-select {
  background-color: var(--bj-surface-raised);
  border-color: var(--bj-border-strong);
  color: var(--bj-text);
}

.form-control:focus, .form-select:focus {
  background-color: var(--bj-surface-raised);
  color: var(--bj-text);
  border-color: var(--bj-gold);
}

.form-control::placeholder {
  color: var(--bj-text-muted);
  opacity: 0.7;
}

.form-label {
  color: var(--bj-text);
  font-weight: 500;
}

.alert-success {
  --bs-alert-bg: rgba(200, 162, 74, 0.12);
  --bs-alert-border-color: rgba(200, 162, 74, 0.35);
  --bs-alert-color: var(--bj-gold-bright);
}

.alert-danger {
  --bs-alert-bg: rgba(139, 30, 43, 0.15);
  --bs-alert-border-color: rgba(192, 41, 58, 0.4);
  --bs-alert-color: #e08a92;
}

/* React to this: news that needs a decision now — the cost colour, like an open complication. */
.alert-warning {
  --bs-alert-bg: rgba(236, 154, 74, 0.12);
  --bs-alert-border-color: rgba(236, 154, 74, 0.45);
  --bs-alert-color: var(--bj-cost);
}

/* Neutral: the player chose this and nothing went wrong. */
.alert-info {
  --bs-alert-bg: var(--bj-surface-raised);
  --bs-alert-border-color: var(--bj-border-strong);
  --bs-alert-color: var(--bj-text);
}

.alert strong { font-weight: 700; }

.text-danger {
  color: var(--bj-danger-text) !important;
}

code {
  color: var(--bj-gold-bright);
}

hr {
  border-color: var(--bj-border);
  opacity: 1;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.bj-footer {
  background: var(--bj-ink);
  border-top: 1px solid var(--bj-border-strong);
  color: var(--bj-text-muted);
  font-size: 0.85rem;
}

.bj-footer a {
  color: var(--bj-text-muted);
}

.bj-footer a:hover {
  color: var(--bj-gold-bright);
}

/* The Buy Me a Coffee link: styled exactly like the footer's other links — there if you look, never in the way. */
.bj-footer-support .ph { vertical-align: -0.1em; }

/* ---------------------------------------------------------------------- */
/* Hero (Index page)                                                      */
/* ---------------------------------------------------------------------- */
.bj-hero {
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
}

.bj-hero-tagline {
  font-family: var(--bj-font-body);
  font-weight: 700;
  letter-spacing: 0.4em;
  font-size: 0.8rem;
  color: var(--bj-gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.bj-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-bottom: 1.25rem;
}

.bj-hero p.lead {
  color: var(--bj-text-muted);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1rem;
}

.bj-hero-actions {
  margin-top: 2.25rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.bj-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.bj-feature {
  background: var(--bj-surface);
  border: 1px solid var(--bj-border);
  border-radius: var(--bj-radius);
  padding: 1.5rem;
  text-align: left;
}

.bj-feature h3 {
  font-size: 1rem;
  color: var(--bj-gold-bright);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.bj-feature p {
  color: var(--bj-text-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* The page frame (docs/ui-style-guide.md, "Pages")                        */
/* Every page's root element is .bj-page plus one of two widths, both inside the header's own container:
   standard fills it (content starts under the logo), narrow is a centred 36rem column. No page sets its own max-width,
   and the space above the page header is the same everywhere. Deadcity.LayoutTests measures [data-page-width]. */
/* ---------------------------------------------------------------------- */
.bj-page { margin: 1.5rem 0; min-width: 0; }
.bj-page-standard { width: 100%; }
.bj-page-narrow { max-width: var(--bj-page-narrow); margin-left: auto; margin-right: auto; }
.bj-page-header { margin-bottom: 1.25rem; }
.bj-page-header .bj-page-title { margin-bottom: 0.3rem; }
.bj-page-lead { margin: 0; color: var(--bj-text-muted); max-width: 75ch; }
/* A page header with one action beside it (Notifications' "Mark all as read", Settings' back link). */
.bj-page-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 1rem; flex-wrap: wrap; }
.bj-page-header-row .bj-page-header { margin-bottom: 1rem; }

/* The one panel/card heading (UI review L8): gold small caps with its icon — Jobs sections, Dashboard, Profile and Career
   panels, Settings, Admin, Notifications, Leaderboard, Privacy. */
.bj-panel-heading, .bj-profile-card h2, .bj-career-panel h2, .bj-privacy-heading {
  font-family: var(--bj-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-gold);
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.bj-panel-heading .bj-icon, .bj-profile-card h2 .bj-icon, .bj-career-panel h2 .bj-icon { font-size: 1.2rem; }

/* The shared page title: one size, weight and icon treatment for every in-game page. Home (hero) and Login (card title) stay different on purpose. */
.bj-page-title {
  font-size: var(--bj-page-title-size);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.bj-page-title .bj-icon { font-size: 1.15em; }

/* ---------------------------------------------------------------------- */
/* Stat tiles (game stats — money, respect, health, stolen cars, ...)     */
/* ---------------------------------------------------------------------- */
/* One tile on every page (UI review L4): icon and uppercase label, value, optional sub-lines — left-aligned and compact.
   Two per row on a phone, then as many as fit. */
.bj-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, calc(50% - 0.4rem)), 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.bj-stat {
  background: var(--bj-surface);
  border: 1px solid var(--bj-border);
  border-radius: var(--bj-radius);
  padding: 0.65rem 0.9rem;
  text-align: left;
  min-width: 0;
}

.bj-stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bj-text-muted);
  margin-bottom: 0.1rem;
}

.bj-stat-value {
  font-family: var(--bj-font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--bj-gold-bright);
  overflow-wrap: anywhere;
}

.bj-stat-value.bj-stat-danger {
  color: var(--bj-crimson-bright);
}

.bj-stat-sub {
  font-size: 0.78rem;
  color: var(--bj-text-muted);
  margin-top: 0.15rem;
}

/* ---------------------------------------------------------------------- */
/* Crime page                                                             */
/* ---------------------------------------------------------------------- */
.bj-crime-header {
  text-align: center;
  margin: 2.5rem 0 1.5rem;
}

/* ---------------------------------------------------------------------- */
/* Job inbox                                                              */
/* ---------------------------------------------------------------------- */
.bj-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.bj-job-card {
  background: var(--bj-surface);
  border: 1px solid var(--bj-border-strong);
  border-radius: var(--bj-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Terminal-status jobs (Completed/Expired/Failed/Rejected) recede visually —
   only New/Accepted jobs are meant to draw the eye for now. */
.bj-job-card-inactive {
  border-color: var(--bj-border);
  opacity: 0.65;
}

.bj-job-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.bj-job-card-title {
  font-family: var(--bj-font-display);
  font-size: 1.15rem;
  color: var(--bj-gold-bright);
}

.bj-job-card-description {
  color: var(--bj-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.bj-job-step-mark {
  font-family: var(--bj-font-body);
  font-weight: 600;
  color: var(--bj-text-muted);
}

.bj-job-step-failed .bj-job-step-mark {
  color: var(--bj-crimson-bright);
}

.bj-job-card-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--bj-text-muted);
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bj-job-card-specs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.bj-job-card-specs li span:last-child {
  color: var(--bj-text);
  font-weight: 500;
}

.bj-job-card-expiry {
  font-size: 0.82rem;
  color: var(--bj-text-muted);
}

.bj-job-countdown {
  font-weight: 600;
  color: var(--bj-gold-bright);
  /* Fixed-width digits and a stable minimum width: a ticking countdown never changes the width around it. */
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 7ch;
}

.bj-job-card-actions {
  display: flex;
  gap: 0.6rem;
}

.bj-job-card-action-form {
  flex: 1;
  margin: 0;
}

.bj-job-status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--bj-radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bj-job-status-new {
  background: rgba(224, 188, 102, 0.15);
  color: var(--bj-gold-bright);
}

.bj-job-status-accepted {
  background: rgba(124, 143, 214, 0.18);
  color: var(--bj-focus);
}

.bj-job-status-neutral {
  background: rgba(233, 230, 223, 0.08);
  color: var(--bj-text-muted);
}

.bj-job-status-negative {
  background: rgba(192, 41, 58, 0.15);
  color: var(--bj-crimson-bright);
}

/* ---------------------------------------------------------------------- */
/* Career page                                                            */
/* ---------------------------------------------------------------------- */
.bj-readiness-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bj-readiness-row-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.bj-readiness-row-name {
  color: var(--bj-text);
  font-weight: 500;
}

.bj-readiness-row-status {
  font-size: 0.8rem;
  color: var(--bj-text-muted);
  white-space: nowrap;
}

.bj-readiness-row-explanation {
  color: var(--bj-text-muted);
  font-size: 0.85rem;
  margin: 0.3rem 0 0;
}

.bj-readiness-bar {
  height: 8px;
  border-radius: var(--bj-radius-pill);
  background: var(--bj-surface-raised);
  border: 1px solid var(--bj-border);
  overflow: hidden;
}

.bj-readiness-bar-fill {
  height: 100%;
  background: var(--bj-gold);
  border-radius: var(--bj-radius-pill);
}

.bj-readiness-bar-fill-complete {
  background: var(--bj-gold-bright);
}

.bj-foundation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bj-foundation-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.bj-foundation-mark {
  font-weight: 700;
  flex-shrink: 0;
}

.bj-foundation-mark-complete {
  color: var(--bj-gold-bright);
}

.bj-foundation-mark-incomplete {
  color: var(--bj-text-muted);
}

.bj-foundation-text-complete {
  color: var(--bj-text-muted);
}

.bj-foundation-text-incomplete {
  color: var(--bj-text);
}

/* ---------------------------------------------------------------------- */
/* Job inbox — Active / Available / History layout                        */
/* ---------------------------------------------------------------------- */

.bj-inbox {
  --bj-inbox-gap: 1rem;
}

.bj-inbox * {
  min-width: 0;
}

.bj-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Visible keyboard focus for everything interactive in the inbox. */
.bj-inbox a:focus-visible,
.bj-inbox button:focus-visible,
.bj-inbox summary:focus-visible,
.bj-inbox #inbox-alerts:focus-visible {
  outline: var(--bj-focus-ring-width) solid var(--bj-focus);
  outline-offset: var(--bj-focus-ring-offset);
}

/* Touch-friendly targets. */
.bj-inbox .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tabs (docs/ui-style-guide.md): text tabs on a rule; the current one is bright with a gold underline. */
.bj-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--bj-border-strong);
  overflow-x: auto;
  scrollbar-width: none;
}

.bj-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.85rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--bj-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.bj-tab:hover { color: var(--bj-text); }

.bj-tab[aria-current] {
  color: var(--bj-gold-bright);
  border-bottom-color: var(--bj-gold);
}

.bj-tab-count {
  padding: 0 0.5rem;
  border-radius: var(--bj-radius-pill);
  background: rgba(233, 230, 223, 0.1);
  color: var(--bj-text);
  font-size: 0.75rem;
  font-weight: 400;
}

.bj-stat-action {
  margin: 0.4rem 0 0;
}

/* ---- Sections ----------------------------------------------------------- */
.bj-inbox-section {
  margin-top: 1.5rem;
  scroll-margin-top: 4.5rem;
}

/* A section of the page (not a card): the shared heading plus a rule under it. */
.bj-inbox-section > h2 {
  border-bottom: 1px solid var(--bj-border-strong);
  padding-bottom: 0.4rem;
  margin-bottom: 0.9rem;
}

.bj-inbox-count {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.55rem;
  border-radius: var(--bj-radius-pill);
  background: rgba(233, 230, 223, 0.1);
  color: var(--bj-text);
  font-size: 0.8rem;
  letter-spacing: 0;
}

.bj-inbox-empty {
  color: var(--bj-text-muted);
  margin: 0;
  padding: 0.75rem 0;
}

/* ---- Shared bits --------------------------------------------------------- */
.bj-job-title {
  font-family: var(--bj-font-display);
  font-size: 1.2rem;
  color: var(--bj-gold-bright);
  margin: 0;
  overflow-wrap: anywhere;
}

.bj-job-meta {
  color: var(--bj-text-muted);
  font-size: 0.85rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.bj-diff {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--bj-border-strong);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bj-text);
}

.bj-diff-hard { border-color: var(--bj-gold); }
.bj-diff-extreme { border-color: var(--bj-crimson-bright); }
/* Crew jobs (Stage 4c): the badge names the crew it needs. */
.bj-diff-crew { border-color: var(--bj-gold); display: inline-flex; align-items: center; gap: .3em; }

.bj-job-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
}

.bj-job-numbers > div {
  display: flex;
  flex-direction: column;
}

.bj-job-numbers dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-text-muted);
  font-weight: 500;
}

.bj-job-numbers dd {
  margin: 0;
  font-weight: 600;
  color: var(--bj-text);
}

.bj-job-numbers dd.bj-job-numbers-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--bj-text-muted);
}

.bj-subhead {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bj-text-muted);
  margin: 0 0 0.4rem;
  font-family: var(--bj-font-body);
}

.bj-note {
  color: var(--bj-text-muted);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

.bj-steps-compact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bj-details {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.bj-details > summary {
  cursor: pointer;
  color: var(--bj-text-muted);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.bj-details > summary:hover { color: var(--bj-text); }

/* Status badges never rely on colour alone: a glyph + the text label are always present. */
.bj-job-status .bj-job-status-glyph { margin-right: 0.2rem; font-size: 0.95rem; vertical-align: -0.15em; }

/* ---- Available cards ------------------------------------------------------ */
.bj-avail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--bj-inbox-gap);
}

.bj-avail-card {
  background: var(--bj-surface);
  border: 1px solid var(--bj-border-strong);
  border-radius: var(--bj-radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scroll-margin-top: 4.5rem;
}

.bj-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.bj-job-expiry {
  margin: 0;
  font-size: 0.82rem;
  color: var(--bj-text-muted);
}

.bj-job-actions {
  display: grid;
  /* Accept fills the row; Reject is a secondary button beside it. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
}

.bj-job-actions form { margin: 0; }

/* ---- Active panel ----------------------------------------------------------- */
.bj-active-list {
  display: flex;
  flex-direction: column;
  gap: var(--bj-inbox-gap);
}

.bj-active-panel {
  background: var(--bj-surface);
  border: 1px solid var(--bj-gold);
  border-radius: var(--bj-radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  scroll-margin-top: 4.5rem;
}

.bj-active-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  align-items: flex-start;
}

.bj-active-titleblock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.bj-active-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
}

.bj-active-prep {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bj-active-prep {
  border-left: 1px solid var(--bj-border);
  padding-left: 1.5rem;
}

@media (max-width: 899.98px) {
  .bj-active-prep {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--bj-border);
    padding-top: 1rem;
  }
}

.bj-intel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bj-intel > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  font-size: 0.9rem;
}

.bj-intel dt { color: var(--bj-text-muted); font-weight: 400; }
/* min-width: 0 lets a long value (e.g. "$900–$1,500 — above typical", added by the Information Only
   redesign's Target reward/respect comparison) wrap within its own flex item instead of clipping at the
   card's right edge on a narrow viewport — the pre-existing single-word values here never needed this. */
.bj-intel dd { margin: 0; font-weight: 500; text-align: right; min-width: 0; overflow-wrap: break-word; }

/* ---- Approach selector ------------------------------------------------------ */
.bj-approach { margin-bottom: 0.75rem; }

.bj-approach-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

.bj-approach-options form { margin: 0; height: 100%; }

.bj-approach-option {
  width: 100%;
  height: 100%;
  min-height: 44px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bj-ink);
  color: var(--bj-text);
  border: 1px solid var(--bj-border-strong);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}

.bj-approach-option:hover { border-color: var(--bj-gold); }

.bj-approach-option.is-selected {
  border: 2px solid var(--bj-gold);
  background: rgba(200, 162, 74, 0.12);
}

.bj-approach-name { font-weight: 600; }
.bj-approach-effect { font-size: 0.82rem; color: var(--bj-text-muted); }
.bj-approach-selected { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-gold-bright); }

/* ---- Preparation ------------------------------------------------------------ */
/* Categories flow in columns when there is room; each option is still its own full-width row inside its category. */
.bj-prep-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 0.25rem 1.25rem;
  align-items: start;
}

.bj-prep-category { margin-bottom: 0.9rem; }

.bj-prep-heading {
  font-size: 0.95rem;
  color: var(--bj-text);
  margin: 0 0 0.4rem;
  font-family: var(--bj-font-body);
  font-weight: 600;
}

.bj-prep-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bj-prep-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--bj-ink);
  border: 1px solid var(--bj-border);
  border-radius: 8px;
}

.bj-prep-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
}

.bj-prep-name { font-weight: 600; }
.bj-prep-effect { font-size: 0.82rem; color: var(--bj-text-muted); }
.bj-prep-details { margin-top: 0; }
.bj-prep-buy { margin: 0; flex: 0 0 auto; }
.bj-prep-buy .btn { min-width: 8rem; }

.bj-prep-state {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--bj-text-muted);
  white-space: nowrap;
}

.bj-prep-option.is-purchased {
  border-color: var(--bj-gold);
  background: rgba(200, 162, 74, 0.08);
}

.bj-prep-option.is-purchased .bj-prep-state { color: var(--bj-gold-bright); font-weight: 600; }
.bj-prep-option.is-locked { border-style: dashed; }

@media (max-width: 575.98px) {
  .bj-prep-option { flex-wrap: wrap; }
  .bj-prep-buy, .bj-prep-buy .btn { width: 100%; }
}

/* ---- History ------------------------------------------------------------------ */
.bj-history {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bj-border);
  border-radius: var(--bj-radius);
  overflow: hidden;
}

.bj-history-row + .bj-history-row { border-top: 1px solid var(--bj-border); }

.bj-history-summary {
  display: grid;
  grid-template-columns: 9rem minmax(0, 2fr) minmax(0, 1fr) 5.5rem 6rem 9.5rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  background: var(--bj-surface);
  color: var(--bj-text);
}

.bj-history-summary::-webkit-details-marker { display: none; }
.bj-history-summary > .bj-job-status { justify-self: start; }
.bj-history-summary:hover { background: var(--bj-surface-raised); }
.bj-history-title { font-weight: 600; overflow-wrap: anywhere; }
.bj-history-contact,
.bj-history-diff { color: var(--bj-text-muted); font-size: 0.85rem; }
.bj-history-reward { font-weight: 600; text-align: right; }
.bj-history-time { color: var(--bj-text-muted); font-size: 0.82rem; text-align: right; }

.bj-history-details {
  padding: 0.6rem 0.9rem 0.9rem;
  background: var(--bj-ink);
  font-size: 0.88rem;
  color: var(--bj-text-muted);
}

.bj-history-more {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  .bj-history-summary {
    /* The title gets a full row of its own, so a long name never breaks mid-word beside the date. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "status status reward" "title title title" "contact diff time";
    row-gap: 0.2rem;
  }
  .bj-history-summary > .bj-job-status { grid-area: status; }
  .bj-history-title { grid-area: title; }
  .bj-history-reward { grid-area: reward; }
  .bj-history-contact { grid-area: contact; }
  .bj-history-diff { grid-area: diff; }
  .bj-history-time { grid-area: time; }
}

/* ---------------------------------------------------------------------- */
/* Global account menu (avatar + unread badge + dropdown) and Notifications */
/* ---------------------------------------------------------------------- */
.bj-account { margin-left: auto; position: relative; }

/* On desktop the account menu sits after the collapsible links, at the right edge. */
@media (min-width: 576px) {
  .bj-account { order: 3; margin-left: 0; }
  .navbar-collapse { order: 2; }
}

.bj-account-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--bj-radius-pill);
  color: var(--bj-text);
}

.bj-account-toggle:focus-visible,
.bj-account-menu .dropdown-item:focus-visible,
.bj-notif-row:focus-visible {
  outline: var(--bj-focus-ring-width) solid var(--bj-focus);
  outline-offset: var(--bj-focus-ring-offset);
}

/* Account avatar: a 40px dark disc with a Phosphor user icon, centred in the 44px touch target. The unread badge is anchored to the
   disc's top-right corner (2px inset = the toggle's own padding) and pulled 35% of its own size outward, so it never affects layout. */
.bj-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bj-surface);
  border: 1px solid var(--bj-border-strong);
  color: var(--bj-gold-bright);
  font-size: 1.4rem;
  line-height: 1;
}

.bj-account-toggle:hover .bj-account-avatar { border-color: var(--bj-gold); }

.bj-account-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  transform: translate(35%, -35%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--bj-radius-pill);
  background: var(--bj-crimson-bright);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--bj-ink);
  pointer-events: none;
}

.bj-account-menu {
  min-width: min(22rem, 92vw);
  padding: 0.25rem 0;
  background: var(--bj-surface);
  border: 1px solid var(--bj-border-strong);
}

.bj-account-menu .dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: normal;
  color: var(--bj-text);
}

.bj-account-menu .dropdown-item:hover,
.bj-account-menu .dropdown-item:focus { background: var(--bj-surface-raised); color: var(--bj-text); }

.bj-account-menu form { margin: 0; }

.bj-account-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 1rem 0.7rem;
  border-bottom: 1px solid var(--bj-border);
}

.bj-account-name { font-weight: 700; overflow-wrap: anywhere; }
.bj-account-level { color: var(--bj-text-muted); font-size: 0.85rem; white-space: nowrap; }
.bj-account-count { margin-left: auto; background: var(--bj-crimson-bright); color: #fff; border-radius: var(--bj-radius-pill); padding: 0 0.5rem; font-size: 0.75rem; font-weight: 700; }
.bj-account-notif-actions { display: flex; }
.bj-account-notif-actions > .dropdown-item, .bj-account-notif-actions > form { flex: 1; }
.bj-account-notif-actions > form .dropdown-item { width: 100%; }

.bj-notif-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bj-gold-bright);
  box-shadow: 0 0 0 2px rgba(224, 188, 102, 0.25);
}

.bj-notif-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bj-notif-title { font-weight: 600; }
.bj-notif-time { color: var(--bj-text-muted); font-size: 0.78rem; }

/* Notifications page */
.bj-notifications h2 { margin: 1.25rem 0 0.6rem; }
.bj-notif-list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bj-notif-list form { margin: 0; }

.bj-notif-row {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bj-surface);
  color: var(--bj-text);
  border: 1px solid var(--bj-border-strong);
  border-radius: var(--bj-radius);
}

.bj-notif-row:hover { background: var(--bj-surface-raised); }
.bj-notif-row.is-unread { border-color: var(--bj-gold); border-left-width: 4px; }
/* Each row carries the icon of what it's about; a loss (hospital, arrest, bail running out) takes the danger accent. */
.bj-notif-icon { flex-shrink: 0; font-size: 1.2rem; margin-top: 0.1rem; color: var(--bj-gold-bright); }
.bj-notif-row:not(.is-unread) .bj-notif-icon { color: var(--bj-text-muted); }
.bj-notif-row.is-loss .bj-notif-icon { color: var(--bj-danger-text); }
.bj-notif-row.is-loss.is-unread { border-color: var(--bj-crimson-bright); }
.bj-notif-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.bj-notif-message { color: var(--bj-text-muted); font-size: 0.9rem; }
.bj-notif-row .bj-notif-dot { margin-top: 0.4rem; }

/* ---------------------------------------------------------------------- */
/* Profile page                                                           */
/* ---------------------------------------------------------------------- */
/* The Profile avatar is the header avatar (.bj-account-avatar) at a larger size — same icon, surface, border and accent. */
.bj-account-avatar-lg { width: 80px; height: 80px; font-size: 2.5rem; flex: 0 0 auto; }
.bj-profile-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.bj-profile-identity { min-width: 0; flex: 1 1 auto; }
.bj-profile-settings { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--bj-border-strong); border-radius: var(--bj-radius-pill); color: var(--bj-text); text-decoration: none; margin-left: auto; flex-shrink: 0; }
.bj-profile-settings:hover { border-color: var(--bj-gold); color: var(--bj-gold-bright); }
.bj-profile-settings:focus-visible, .bj-settings-back:focus-visible { outline: var(--bj-focus-ring-width) solid var(--bj-focus); outline-offset: var(--bj-focus-ring-offset); }
.bj-profile-settings .ph { font-size: 1.15rem; color: var(--bj-gold); }
.bj-profile-email, .bj-profile-since { margin: 0.15rem 0 0; color: var(--bj-text-muted); overflow-wrap: anywhere; }
.bj-profile-nav { margin: 0 0 1rem; }
.bj-profile-nav a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bj-text-muted); text-decoration: none; }
.bj-profile-nav a:hover { color: var(--bj-gold-bright); }
.bj-profile-nav a:focus-visible { outline: var(--bj-focus-ring-width) solid var(--bj-focus); outline-offset: var(--bj-focus-ring-offset); }
.bj-profile-kind { margin: 0 0 0.15rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-text-muted); }
.bj-profile-stats { margin-bottom: 1.5rem; }
.bj-profile-grid { columns: 20rem 3; column-gap: 1rem; }
.bj-profile-wide { column-span: all; }
.bj-profile-card { background: var(--bj-surface); border: 1px solid var(--bj-border); border-radius: var(--bj-radius); padding: var(--bj-panel-pad-y) var(--bj-panel-pad-x); min-width: 0; break-inside: avoid; margin: 0 0 var(--bj-panel-gap); }
.bj-profile-card h3 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bj-text-muted); margin: 1rem 0 0.4rem; }
.bj-profile-dl { margin: 0; display: grid; gap: 0.35rem; }
.bj-profile-dl > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--bj-border); padding-bottom: 0.3rem; }
.bj-profile-dl dt { font-weight: 400; color: var(--bj-text-muted); }
.bj-profile-dl dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.bj-profile-empty, .bj-profile-note { color: var(--bj-text-muted); margin: 0 0 0.5rem; }
.bj-profile-note { font-size: 0.8rem; margin-top: 0.75rem; }
.bj-profile-card a { text-decoration: underline; }
.bj-profile-card a:focus-visible { outline: var(--bj-focus-ring-width) solid var(--bj-focus); outline-offset: var(--bj-focus-ring-offset); }
.bj-profile-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.bj-profile-table th, .bj-profile-table td { text-align: left; padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid var(--bj-border); }
.bj-profile-table thead th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-text-muted); }
.bj-profile-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.bj-profile-contact-head { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.bj-profile-contact-desc { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--bj-text-muted); }
.bj-profile-progress { width: 100%; height: 0.6rem; margin-top: 0.25rem; accent-color: var(--bj-gold); }
/* Respect through the current level (_LevelProgress) */
.bj-level-progress { display: block; width: 100%; height: 0.4rem; margin-top: 0.3rem; accent-color: var(--bj-gold); }
.bj-profile-tags { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bj-profile-tags li { border: 1px solid var(--bj-border-strong); border-radius: var(--bj-radius-pill); padding: 0.15rem 0.7rem; font-size: 0.82rem; }
.bj-profile-tags { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bj-profile-contact-tags { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bj-profile-contact-tags li { border-bottom: 1px solid var(--bj-border-strong); padding: 0.45rem 0.6rem; font-size: 0.82rem; }
@media (max-width: 480px) {
  .bj-profile-header { flex-direction: column; text-align: center; }
  .bj-account-avatar-lg { width: 72px; height: 72px; font-size: 2.25rem; }
}

/* ---------------------------------------------------------------------- */
/* Dashboard                                                              */
/* ---------------------------------------------------------------------- */
/* Same touch-friendly-target convention .bj-inbox/.bj-login/.bj-notifications already each have their own copy of
   (see "Touch-friendly targets" above) — the Dashboard's own gameplay buttons (Lay Low, Contact "Visit") never had
   an equivalent rule, landing at Bootstrap's own default ~33.5-38px instead of this app's real 44px standard. */
.bj-dashboard .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Leaderboard                                                            */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Privacy                                                                */
/* ---------------------------------------------------------------------- */

/* Status and error pages (404, 403, 429, 500): one centred panel in the game's layout. */
.bj-status-page { text-align: center; }
.bj-status-icon { font-size: 3rem; color: var(--bj-gold); }
.bj-status-page .bj-page-title { justify-content: center; margin-top: 0.25rem; }
.bj-status-code { margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.3em; color: var(--bj-text-muted); }
.bj-status-message { color: var(--bj-text-muted); margin: 0.5rem 0 1.5rem; }
.bj-status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.bj-status-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
.bj-status-reference, .bj-status-dev { margin: 1.5rem 0 0; font-size: 0.8rem; color: var(--bj-text-muted); overflow-wrap: anywhere; }
.bj-privacy-heading { margin-top: 1.75rem; }

/* Leaderboard (docs/ui-style-guide.md): each view is a real table in a full-width panel; under 576px every row becomes a
   stacked block with a label per value. The position column is narrow, numbers are right-aligned. */
.bj-tabs-sub { margin-top: -0.5rem; }
.bj-board-note { margin: 0 0 0.75rem; color: var(--bj-text-muted); font-size: 0.9rem; max-width: 80ch; }
.bj-board { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.bj-board th, .bj-board td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--bj-border); vertical-align: middle; font-weight: 400; }
.bj-board thead th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-text-muted); font-weight: 600; }
.bj-board tbody tr:last-child th, .bj-board tbody tr:last-child td { border-bottom: 0; }
.bj-board .bj-board-pos { width: 3rem; padding-left: 0.6rem; color: var(--bj-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.bj-board .bj-board-num { text-align: right; padding-right: 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bj-board-player { overflow-wrap: anywhere; }
.bj-board-player a { color: var(--bj-text); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.bj-board-player a:hover { color: var(--bj-gold-bright); text-decoration: underline; }
.bj-board-player a:focus-visible { outline: var(--bj-focus-ring-width) solid var(--bj-focus); outline-offset: var(--bj-focus-ring-offset); }
.bj-board-score { font-size: 1.1rem; color: var(--bj-gold-bright); }
.bj-board-sub { color: var(--bj-text-muted); font-size: 0.85rem; }
.bj-board-titles, .bj-board-career { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; }
.bj-board-updates { margin: 0.75rem 0 0; color: var(--bj-text-muted); font-size: 0.8rem; }

/* Positions 1–3: the number in a small gold, silver or bronze ring. */
.bj-podium { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid currentColor; border-radius: 50%; font-size: 0.85rem; font-weight: 700; }
.bj-podium-1 { color: var(--bj-podium-gold); background: rgba(224, 188, 102, 0.16); }
.bj-podium-2 { color: var(--bj-podium-silver); background: rgba(201, 206, 214, 0.12); }
.bj-podium-3 { color: var(--bj-podium-bronze); background: rgba(185, 121, 76, 0.16); }

/* Titles on the legacy boards: a wrapping list, and from 1200px four fixed slots in Career order with a faint dash for a
   Career with no rank yet. */
/* A decorative dash (the slot's meaning is in its hidden text), so it's fainter than muted text. */
.bj-title-none { display: none; color: rgba(233, 230, 223, 0.3); }
@media (min-width: 1200px) {
  .bj-board-legacy td.bj-board-wide { width: 62%; }
  .bj-board-legacy .bj-board-titles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 0.5rem; justify-items: start; width: 100%; }
  .bj-board-legacy .bj-title-none { display: inline-block; padding-left: 0.6rem; }
}

/* A rank name shown as a title: the rank style wherever a rank stands in for a player's standing. The top rank is filled. */
.bj-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid rgba(200, 162, 74, 0.45);
  border-radius: var(--bj-radius-pill);
  color: var(--bj-gold-bright);
  font-family: var(--bj-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.bj-title-badge.is-top { background: rgba(200, 162, 74, 0.16); border-color: var(--bj-gold); }

/* The current player's own row, marked by more than colour: a gold edge plus an explicit "You" label. */
.bj-board tr.is-you { background: rgba(200, 162, 74, 0.08); box-shadow: inset 3px 0 0 var(--bj-gold); }
/* …and their pinned row when they rank below the rows shown, or the reason they aren't listed. */
.bj-board-own { margin: 0 0 0.75rem; padding: 0.6rem 0.9rem; border: 1px solid var(--bj-border); border-radius: var(--bj-radius); color: var(--bj-text-muted); }
.bj-board-own.is-listed { border-color: rgba(200, 162, 74, 0.45); background: rgba(200, 162, 74, 0.08); box-shadow: inset 3px 0 0 var(--bj-gold); color: var(--bj-text); font-weight: 600; }

@media (max-width: 575.98px) {
  .bj-board, .bj-board tbody, .bj-board th, .bj-board td { display: block; }
  .bj-board thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* One block per player. First line: position, name and the value the view ranks by (score or rank). Then the rest,
     each with its label: a full-width line (titles, the Career) or two values sharing a line (feats and a date). */
  .bj-board tbody tr { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: center; padding: 0.3rem 0.5rem 0.6rem 0.4rem; border-bottom: 1px solid var(--bj-border); }
  .bj-board tbody tr:last-child { border-bottom: 0; }
  .bj-board th, .bj-board td { border-bottom: 0; padding: 0.1rem 0; }
  .bj-board .bj-board-pos { grid-column: 1; grid-row: 1; width: auto; padding: 0; }
  .bj-board .bj-board-player { grid-column: 2; grid-row: 1; }
  .bj-board .bj-board-main { grid-column: 3; grid-row: 1; padding-right: 0; text-align: right; }
  .bj-board .bj-board-wide { grid-column: 2 / -1; }
  .bj-board .bj-board-half-a { grid-column: 2; text-align: left; padding-right: 0; }
  .bj-board .bj-board-half-b { grid-column: 3; text-align: right; padding-right: 0; }
  .bj-board .bj-board-half-a, .bj-board .bj-board-half-b { color: var(--bj-text-muted); font-size: 0.88rem; white-space: normal; }
  .bj-board .bj-board-half-a::before, .bj-board .bj-board-half-b::before { content: attr(data-label) " "; }
}

.bj-leaderboard-you {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--bj-gold);
  border-radius: var(--bj-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bj-gold-bright);
}

/* ---------------------------------------------------------------------- */
/* Career page — progression UX (Phosphor icons, readiness, requirements) */
/* ---------------------------------------------------------------------- */
.bj-career-panel { margin-bottom: var(--bj-panel-gap); }
.bj-career .bj-panel, .bj-settings .bj-panel { padding: var(--bj-panel-pad-y) var(--bj-panel-pad-x); }
.bj-career-panel h3.bj-subhead { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bj-text-muted); margin: 1.1rem 0 0.5rem; display: flex; align-items: center; gap: 0.4rem; }

.bj-icon { font-size: 1.25rem; color: var(--bj-gold); flex-shrink: 0; }
.bj-icon-section { font-size: 1.4rem; }
.bj-icon-inline { font-size: 1rem; vertical-align: -0.12em; color: inherit; }
.bj-state { font-size: 1.1rem; vertical-align: -0.16em; margin-right: 0.15rem; }
.bj-state-complete { color: var(--bj-gold-bright); }
.bj-state-open { color: var(--bj-text-muted); }

.bj-career-active-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }

.bj-career-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin-bottom: 0.6rem; }
.bj-career-score-value { font-family: var(--bj-font-display); font-size: 2.2rem; font-weight: 600; color: var(--bj-gold-bright); line-height: 1; }
.bj-career-score-label { color: var(--bj-text-muted); }
.bj-career-verdict { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; padding: 0.15rem 0.7rem; border-radius: var(--bj-radius-pill); border: 1px solid var(--bj-border-strong); }
.bj-career-verdict.is-ready { color: var(--bj-gold-bright); border-color: rgba(200, 162, 74, 0.5); }
.bj-career-verdict.is-blocked { color: #e0707c; border-color: rgba(192, 41, 58, 0.55); }
.bj-career-rule { margin: 0.9rem 0 0; color: var(--bj-text); font-size: 0.92rem; }
.bj-career-status.is-blocked { border-color: rgba(192, 41, 58, 0.4); }
.bj-career-status.is-ready { border-color: rgba(200, 162, 74, 0.45); }
.bj-career-ready-note { color: var(--bj-gold-bright); }
.bj-career-window { margin: 1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--bj-border); color: var(--bj-text-muted); font-size: 0.88rem; }

.bj-blockers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.bj-blockers li { display: flex; gap: 0.55rem; align-items: flex-start; }
.bj-blockers li > i { color: #e0707c; margin-top: 0.2rem; flex-shrink: 0; }
.bj-blockers a, .bj-career a { text-decoration: underline; }
.bj-career a:focus-visible, .bj-select-button:focus-visible { outline: var(--bj-focus-ring-width) solid var(--bj-focus); outline-offset: var(--bj-focus-ring-offset); }

.bj-dim-list, .bj-foundation-list, .bj-req-list, .bj-metrics, .bj-history-list, .bj-begin-list { list-style: none; margin: 0; padding: 0; }
.bj-dim-list { display: grid; gap: 1.1rem 2rem; }
/* Readiness rows (UI review D1): one line each — state, name, progress, status. An unfinished row opens to its detail. */
.bj-ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; align-items: start; }
.bj-ready-item { border-bottom: 1px solid var(--bj-border); scroll-margin-top: 5rem; }
.bj-ready-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "state name status" ". progress progress";
  gap: 0 0.5rem;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
  list-style: none;
}
summary.bj-ready-row { cursor: pointer; }
summary.bj-ready-row::-webkit-details-marker { display: none; }
.bj-ready-row > .bj-state { grid-area: state; }
.bj-ready-name { grid-area: name; font-weight: 500; }
.bj-ready-status { grid-area: status; font-size: 0.85rem; color: var(--bj-text-muted); white-space: nowrap; }
.bj-ready-progress { grid-area: progress; font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-ready-item.is-complete .bj-ready-name { color: var(--bj-text-muted); font-weight: 400; }
.bj-ready-item.is-blocking .bj-ready-status { color: var(--bj-danger-text); }
summary.bj-ready-row .bj-ready-status::after { content: "▾"; margin-left: 0.4rem; color: var(--bj-text-muted); }
details[open] > summary.bj-ready-row .bj-ready-status::after { content: "▴"; }
.bj-ready-detail { padding: 0 0 0.75rem 1.6rem; }
.bj-ready-explanation { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--bj-text-muted); }
/* Areas have a short progress ("2 of 2 met"), so from 576px it sits on the same line; a foundation's is a sentence and stays below its name. */
@media (min-width: 576px) {
  .bj-ready-list.is-inline .bj-ready-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "state name progress status"; gap: 0 0.75rem; }
  .bj-ready-list.is-inline .bj-ready-progress { text-align: right; white-space: nowrap; }
}
.bj-dim { scroll-margin-top: 5rem; }
.bj-dim.is-unstarted { border-left: 3px solid rgba(192, 41, 58, 0.6); padding-left: 0.75rem; }
.bj-dim-name { font-size: 1rem; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 0.45rem; color: var(--bj-text); }
.bj-dim-needed { margin: 0.35rem 0 0; font-size: 0.85rem; color: #e0707c; display: flex; gap: 0.4rem; align-items: baseline; }
.bj-metrics { margin-top: 0.45rem; display: grid; gap: 0.2rem; font-size: 0.86rem; color: var(--bj-text-muted); }
.bj-metrics li.is-met { color: var(--bj-text); }
.bj-req-note { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--bj-text-muted); }

.bj-foundation-list { display: grid; gap: 0.7rem 2rem; }
.bj-foundation-item { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.92rem; }
.bj-foundation-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bj-foundation-title { display: block; }
.bj-foundation-status { color: var(--bj-text-muted); font-weight: 400; }
.bj-foundation-progress { color: var(--bj-text); font-size: 0.86rem; }
.bj-foundation-explanation { color: var(--bj-text-muted); font-size: 0.8rem; }
.bj-foundation-mark { flex-shrink: 0; }

.bj-new-status { font-weight: 500; }
/* Success text uses the site's bright gold (9.8:1 on the panel surface) plus a check icon and the word "Complete" — never colour alone. */
.bj-success-text { color: var(--bj-gold-bright); }
.bj-metric-note { display: block; margin-left: 1.4rem; font-size: 0.8rem; color: var(--bj-text-muted); }

.bj-req-list { display: grid; gap: 0.9rem 2rem; align-items: start; }
/* The label keeps at least half the row; the status sits in its own right-hand column and wraps inside it (UI review L9). */
.bj-req-head { display: grid; grid-template-columns: minmax(50%, 1fr) auto; gap: 0.75rem; align-items: baseline; margin-bottom: 0.3rem; }
.bj-req-value { text-align: right; }
.bj-req-label { font-weight: 500; }
.bj-req-value { font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-req.is-met .bj-req-value { color: var(--bj-text); }
/* Career ranks: a broken feat is struck through and says "Broken" (never colour alone); a kept "never" feat reads as current. */
.bj-feat-list .bj-req { margin: 0; }
.bj-req.is-broken .bj-req-label { text-decoration: line-through; color: var(--bj-text-muted); }
.bj-req.is-broken .bj-req-value { color: var(--bj-danger-text); }
.bj-req.is-kept .bj-req-value { color: var(--bj-text); }
.bj-req-remaining { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--bj-text); }
.bj-career-summary-line { margin-top: 1rem; }

.bj-steps { padding-left: 1.25rem; margin: 0 0 0.75rem; font-size: 0.92rem; }
.bj-route-list { margin: 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--bj-text-muted); }
.bj-begin-list { display: grid; gap: 0.5rem; }
.bj-begin-list li { position: relative; padding-left: 1.1rem; font-size: 0.92rem; }
.bj-begin-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--bj-gold); }

.bj-career-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.bj-career-cards .bj-job-card-specs li { display: block; }
.bj-career-cards .bj-job-card-specs li span:first-child { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-text-muted); }
.bj-career-cards .bj-job-card-specs li span:last-child { display: block; text-align: left; }
.bj-career-cards .bj-job-card-actions { display: block; }
.bj-career-cards .bj-select-button { justify-content: center; }
.bj-career-cards .bj-job-card { display: flex; flex-direction: column; }
.bj-career-cards .bj-job-card-actions { margin-top: auto; padding-top: 1rem; }
.bj-career-cards .bj-job-card-title { font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.bj-select-button { min-height: 44px; }

.bj-career-history { border-color: var(--bj-border); }
.bj-history-list { display: grid; gap: 0.35rem; margin-bottom: 0.75rem; }

@media (max-width: 480px) {
  .bj-career .bj-panel, .bj-settings .bj-panel, .bj-profile-card { padding: var(--bj-panel-pad-mobile); }
  .bj-career-score-value { font-size: 1.9rem; }
}

/* Profile settings */
.bj-settings-back { color: var(--bj-text-muted); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem; }
.bj-settings-input, .bj-settings-save { min-height: 44px; }
@media (max-width: 480px) {
  .bj-profile-settings { margin-left: 0; }
}

/* ---------------------------------------------------------------------- */
/* Account menu on narrow screens, invalid inputs, 44px touch targets      */
/* ---------------------------------------------------------------------- */

/* Below the sm breakpoint the toggle sits left of the hamburger, so a menu anchored to the toggle's right edge ran off the left of the
   screen. Anchor it to the header instead: it keeps its width where there is room and otherwise shrinks to fit inside the viewport. */
@media (max-width: 575.98px) {
  .bj-account { position: static; }
  .bj-account .bj-account-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: auto;
    inset-inline-end: 0.75rem;
    width: min(22rem, calc(100vw - 1.5rem));
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
  }
}

/* A failed field is marked by more than colour: a thicker leading edge, plus the message (with an icon) beneath it. */
.form-control.input-validation-error,
.form-control[aria-invalid="true"] {
  border-color: var(--bj-danger-text);
  border-inline-start-width: 4px;
}

.bj-settings-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--bj-danger-text);
}

.bj-settings-error .ph-bold { margin-top: 0.15rem; flex-shrink: 0; }

/* Interactive controls the audit found under the 44px convention. Inline text links are left alone (WCAG 2.5.8 inline exception). */
.bj-header .navbar-nav .nav-link { min-height: 44px; display: flex; align-items: center; }
.bj-header .bj-brand { min-height: 44px; align-items: center; }
.bj-header .navbar-toggler { min-height: 44px; min-width: 44px; }
.bj-notifications .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.bj-login .btn, .bj-login .form-control { min-height: 44px; }
/* The 6-digit sign-in code: spaced digits, easy to read back from a phone. */
.bj-login-code { letter-spacing: .3em; }

/* ---------------------------------------------------------------------- */
/* Preparation and bust-chance transparency (Job Inbox)                    */
/* ---------------------------------------------------------------------- */

.bj-approach-idle { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bj-text-muted); }

.bj-approach-warning { flex-basis: 100%; margin: 0; color: var(--bj-text); display: flex; gap: 0.4rem; align-items: baseline; }
.bj-prep-effect-icon { font-size: 1rem; vertical-align: -0.15em; margin-right: 0.15rem; color: var(--bj-gold); }
.bj-prep-bought { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; }
.bj-prep-bought li { display: flex; flex-direction: column; gap: 0.1rem; }
.bj-intel-generic { color: var(--bj-text-muted); font-size: 0.8rem; font-weight: 400; }

/* Mastery clean-streak note — visually distinct from the muted .bj-note baseline (so it isn't
   missed among the rest of a job card's fine print) but deliberately gold/informational, never
   the danger-red an alarming warning would use: this is a strategic fact to weigh, not an error. */
.bj-mastery-note {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--bj-gold);
  background: rgba(200, 162, 74, 0.08);
  color: var(--bj-text);
}
.bj-mastery-note-icon { color: var(--bj-gold-bright); flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Shared confirmation dialog (Bootstrap Modal, DeadCity styling)          */
/* ---------------------------------------------------------------------- */
.bj-confirm {
  --bs-modal-bg: var(--bj-surface);
  --bs-modal-color: var(--bj-text);
  --bs-modal-border-color: var(--bj-border-strong);
  --bs-modal-border-radius: var(--bj-radius);
  --bs-modal-inner-border-radius: var(--bj-radius);
  --bs-modal-padding: var(--bj-panel-pad-mobile);
  --bs-modal-margin: 0.75rem;
}

.bj-confirm .modal-dialog { max-width: 30rem; }
.bj-confirm .modal-content { box-shadow: none; }
.bj-confirm .modal-body { padding: var(--bj-panel-pad-y) var(--bj-panel-pad-x) 0.5rem; overflow-wrap: anywhere; }
.bj-confirm-icon { display: block; font-size: 1.6rem; color: var(--bj-gold); margin-bottom: 0.5rem; }
.bj-confirm-danger .bj-confirm-icon { color: var(--bj-danger-text); }
.bj-confirm-title { font-size: 1.3rem; font-weight: 600; margin: 0 0 0.6rem; }
.bj-confirm-message { margin: 0 0 0.9rem; }
.bj-confirm-details { border: 1px solid var(--bj-border); border-radius: var(--bj-radius); padding: 0.75rem 1rem; background: var(--bj-surface-raised); }
.bj-confirm-details-title { font-family: var(--bj-font-body); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bj-text-muted); margin: 0 0 0.4rem; }
.bj-confirm-details ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.bj-confirm .modal-footer { border-top: 0; padding: 0.75rem var(--bj-panel-pad-x) var(--bj-panel-pad-y); gap: 0.6rem; }
.bj-confirm .modal-footer .btn { min-height: 44px; margin: 0; }

@media (max-width: 575.98px) {
  .bj-confirm .modal-body { padding: var(--bj-panel-pad-mobile) var(--bj-panel-pad-mobile) 0.5rem; }
  .bj-confirm .modal-footer { flex-direction: column; align-items: stretch; padding: 0.75rem var(--bj-panel-pad-mobile) var(--bj-panel-pad-mobile); }
  .bj-confirm .modal-footer .btn { width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Cookie notice (shared strap, DeadCity styling)                         */
/* ---------------------------------------------------------------------- */
/* Deliberately discreet: a thin fixed strap along the bottom edge, not a full-screen blocking overlay — this app
   sets only strictly-necessary cookies (sign-in, CSRF, and Cloudflare Turnstile's own anti-abuse check on the
   sign-in form when configured — see Pages/Privacy.cshtml#cookies), so there is nothing to opt in/out of, only
   something to disclose. Same "fixed, dismiss-once, remembered via localStorage" shape as every other lazy,
   per-viewer UI convenience in this app already uses browser storage for. */
.bj-cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.5rem;
  padding: 0.85rem 1.25rem;
  background: var(--bj-ink);
  border-top: 1px solid var(--bj-border-strong);
  color: var(--bj-text);
  box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.bj-cookie-notice-text {
  margin: 0;
  max-width: 56rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--bj-text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.bj-cookie-notice-text .ph { flex-shrink: 0; margin-top: 0.15rem; color: var(--bj-gold); }
.bj-cookie-notice-text a { color: var(--bj-gold-bright); }

.bj-cookie-notice-dismiss { flex-shrink: 0; min-height: 44px; }

/* ---------------------------------------------------------------------- */
/* Admin                                                                  */
/* ---------------------------------------------------------------------- */
/* Same narrow, centered "utility page" shape as .bj-settings — this page is two small pieces of content, not a
   dashboard-style grid. */
.bj-admin .bj-stat-grid { grid-template-columns: 1fr; max-width: 16rem; margin-bottom: 1.5rem; }
.bj-admin .bj-panel + .bj-panel { margin-top: var(--bj-panel-gap); }
.bj-admin .bj-panel, .bj-login .bj-panel { padding: var(--bj-panel-pad-y) var(--bj-panel-pad-x); }
.bj-admin .btn { min-height: 44px; }

/* ==========================================================================
   Jobs page redesign (2026-09-25): status bar, rules, step list, decision panel
   ========================================================================== */

.bj-risk-low { color: var(--bj-risk-low); }
.bj-risk-moderate { color: var(--bj-risk-moderate); }
.bj-risk-high { color: var(--bj-risk-high); }
.bj-risk-severe { color: var(--bj-risk-severe); }

.bj-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.bj-gain { color: var(--bj-gain); }
.bj-cost dt, .bj-cost dd, .bj-payout-cost { color: var(--bj-cost); }

/* ---- Heat status bar -------------------------------------------------------- */
/* A grid whose columns depend only on the viewport width — never on how wide its text is (a ticking bribe countdown used
   to flip the old flex-wrap layout between two columns and stacked). Stacked on phones, two equal columns from 768px. */
.bj-heat-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem 1.5rem;
  background: var(--bj-surface);
  border: 1px solid var(--bj-border-strong);
  border-radius: var(--bj-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.bj-heat-line { margin: 0; font-size: 1rem; }
.bj-heat-line .ph-fire { color: var(--bj-cost); }
.bj-heat-max { color: var(--bj-text-muted); font-size: 0.85rem; }
.bj-heat-sub { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--bj-text-muted); }

@media (min-width: 768px) {
  .bj-heat-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.bj-heat-main, .bj-heat-actions { min-width: 0; }
.bj-heat-effects { color: var(--bj-text); }

.bj-heat-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bj-heat-buttons form { margin: 0; }
.bj-heat-buttons .btn { gap: 0.35rem; }

/* ---- How jobs work ------------------------------------------------------------ */
/* Help (docs/ui-style-guide.md, "Help"): the Job Inbox links to the help page; the rules live there, by topic. */
.bj-help-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-decoration: none;
}
.bj-help-link:hover { text-decoration: underline; }

.bj-help-nav { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-bottom: 0.75rem; }
.bj-help-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.bj-help-nav a:hover { text-decoration: underline; }

.bj-help-topic {
  background: var(--bj-surface);
  border: 1px solid var(--bj-border);
  border-radius: var(--bj-radius);
  padding: 0 1rem;
  margin-bottom: 0.6rem;
  scroll-margin-top: 4.5rem;
}
.bj-help-topic > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bj-gold-bright);
}
.bj-help-topic > summary h2 { margin: 0; font-size: 1rem; font-family: inherit; font-weight: 600; letter-spacing: 0; text-transform: none; color: inherit; }
.bj-help-topic ul { margin: 0 0 0.9rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; }
.bj-help-topic .bj-risk-legend { display: flex; margin: 0.3rem 0 0; }

.bj-risk-legend { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.25rem; }

/* ---- Offer cards ----------------------------------------------------------------- */
/* Offer cards: title on its own line, badges underneath — a long name never gets squeezed by the badges. */
.bj-avail-card .bj-card-head { flex-direction: column; align-items: stretch; gap: 0.4rem; }

.bj-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.bj-card-badges .bj-job-expiry { white-space: nowrap; }

.bj-expired-note { display: none; margin: 0; color: var(--bj-text-muted); font-weight: 600; }
/* Expired: never shown by fading alone — dashed border, grey, the "Expired" label, and no actions. */
.bj-avail-card.is-expired { border-style: dashed; filter: grayscale(1); color: var(--bj-text-muted); }
.bj-avail-card.is-expired .bj-job-actions { display: none; }
.bj-avail-card.is-expired .bj-job-expiry { display: none; }
.bj-avail-card.is-expired .bj-expired-note { display: block; }

.bj-about > summary { gap: 0.35rem; }

/* ---- Modifier chips -------------------------------------------------------------- */
.bj-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bj-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bj-border-strong);
  border-radius: 8px;
  background: var(--bj-ink);
  font-size: 0.8rem;
}

.bj-chip strong { font-weight: 600; }
.bj-chip-effect { color: var(--bj-text-muted); }

/* ---- Step list (compact on offers, detailed on the active panel) -------------------- */
.bj-steplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bj-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-size: 0.88rem;
}

.bj-step-icon { font-size: 1.05rem; align-self: center; color: var(--bj-text-muted); }
/* A resolved job's steps in the history: the same state icons as the live list, one line each. */
.bj-history-steps { list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.85rem; display: grid; gap: 0.2rem; }
.bj-history-step { display: flex; align-items: center; gap: 0.4rem; }
.bj-history-step.is-completed .bj-step-icon { color: var(--bj-gold-bright); }
.bj-history-step.is-failed .bj-step-icon { color: var(--bj-risk-severe); }
.bj-step-main { display: flex; flex-wrap: wrap; gap: 0 0.5rem; min-width: 0; }
.bj-step-action { font-weight: 600; }
.bj-step-target { color: var(--bj-text-muted); }
.bj-step-target::before { content: "· "; }
.bj-step-note { font-size: 0.8rem; font-weight: 600; }
.bj-step-risk { text-align: right; font-weight: 600; white-space: nowrap; }
.bj-step-breakdown { display: block; font-size: 0.75rem; font-weight: 400; color: var(--bj-text-muted); white-space: normal; }

/* Complications (Stage 3): known ones on their step row; a countered one is muted. */
/* A chip is one sentence ("Witnesses: +5 Heat on completion · counter: bring Jade or Corner Watch ($300)") and wraps inside its step
   row — it must never widen the row, the card or the page. */
.bj-step-complications { flex-basis: 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.8rem; }
.bj-complication { color: var(--bj-risk-high); min-width: 0; overflow-wrap: anywhere; }
.bj-complication.is-countered { color: var(--bj-text-muted); }
.bj-complication-list { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--bj-text-muted); }

/* The crew (Stage 4): who can come along on a job in preparation — one toggle per hired crew member. */
/* Crew cards reuse the approach cards (.bj-approach-option): one per crew member, in a grid that drops to one column. */
.bj-crew-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.bj-crew-cards form { margin: 0; height: 100%; }
.bj-crew-card { white-space: normal; }
.bj-crew-role { font-weight: 400; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bj-text-muted); margin-left: 0.35rem; }
.bj-crew-risk { color: var(--bj-cost); }
.bj-crew-note { font-size: 0.8rem; font-style: italic; color: var(--bj-text-muted); }
.bj-crew-share { color: var(--bj-text-muted); }
/* Counters in the decision panel: the next step's revealed complication and one-click ways to deal with it. */
.bj-counter-panel { border-left: 3px solid var(--bj-cost); padding: 0.35rem 0 0.35rem 0.65rem; margin: 0.5rem 0; }
.bj-counter-threat { margin: 0 0 0.35rem; }
.bj-counter-threat .ph-bold { color: var(--bj-cost); }
.bj-counter-none { font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-counter-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bj-counter-actions form { margin: 0; }
.bj-counter-action { white-space: normal; text-align: left; min-height: 44px; }
.bj-counter-effect { color: var(--bj-text-muted); }
.bj-counter-detail { display: block; font-size: 0.75rem; color: var(--bj-text-muted); }
/* On the gold hover/active fill the muted parts take the button's own dark text. */
.btn:hover .bj-counter-effect, .btn:hover .bj-counter-detail, .btn:active .bj-counter-effect, .btn:active .bj-counter-detail { color: inherit; }
/* One-shot approaches in the decision panel: each use waiting for a step, and "buy another use". */
.bj-approach-uses { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.bj-approach-use { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.bj-approach-use form, .bj-approach-uses > form { margin: 0; }
.bj-approach-use-line { margin: 0; }
.bj-approach-use.is-applied .bj-approach-use-line { color: var(--bj-gold-bright); }
.bj-approach-use-risk { color: var(--bj-text-muted); }
.bj-step-approach { color: var(--bj-text-muted); }
/* The Execute button's own risk: a dark pill so the band colour reads on the gold button. */
.bj-exec-risk { display: inline-block; margin-left: 0.25rem; padding: 0 0.45rem; border-radius: var(--bj-radius-pill); background: var(--bj-ink); font-weight: 700; }
.bj-reveal-alert .ph-bold { margin-right: 0.25rem; }
/* Several lines inside one figure's sub row stack instead of overlapping. */
.bj-figure-subline { display: block; }

.bj-step.is-next { background: rgba(200, 162, 74, 0.1); box-shadow: inset 3px 0 0 var(--bj-gold); }
.bj-step.is-next .bj-step-icon { color: var(--bj-gold-bright); }
.bj-step.is-completed .bj-step-icon,
.bj-step.is-completed .bj-step-risk { color: var(--bj-gold-bright); }
.bj-step.is-completed .bj-step-action { color: var(--bj-text-muted); }
.bj-step.is-failed .bj-step-icon,
.bj-step.is-failed .bj-step-risk { color: var(--bj-risk-severe); }

.bj-steplist-detailed .bj-step { padding: 0.5rem 0.6rem; font-size: 0.95rem; }
.bj-steplist-detailed .bj-step.is-next .bj-step-risk-value { font-size: 1.1rem; }

/* ---- Active panel ------------------------------------------------------------------ */
.bj-payout { text-align: right; }
.bj-payout p { margin: 0; }
.bj-payout-gain { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 0.4rem; color: var(--bj-gain); font-weight: 600; }
.bj-payout-cost { font-size: 0.85rem; }
.bj-payout-breakdown { font-size: 0.8rem; color: var(--bj-text-muted); }

.bj-active-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
}

.bj-active-main { display: flex; flex-direction: column; gap: 0.75rem; }
/* Step list with the job's details (Intel, About…) directly under it — the decision panel sits beside it on wide screens. */
.bj-active-left { display: flex; flex-direction: column; gap: 0.5rem; }
.bj-active-core { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
.bj-active-extras { display: flex; flex-direction: column; gap: 0.25rem; }
.bj-active-extras .bj-details { margin-top: 0; }

@media (min-width: 900px) {
  /* Accepted: steps and decision side by side, so a wide panel never leaves an empty right half. */
  .bj-active-panel:not(.is-preparing) .bj-active-core { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Preparing: job on the left, preparation on the right. */
  .bj-active-panel.is-preparing .bj-active-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.bj-decision {
  background: var(--bj-ink);
  border: 1px solid var(--bj-border-strong);
  border-radius: var(--bj-radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bj-decision-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
  gap: 0.75rem;
}

/* Each figure spans three shared rows (label, value, caption) via subgrid, so a label that wraps on a narrow
   screen ("Pocket at risk") pushes every value down together instead of knocking one figure out of line. */
.bj-figure { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.bj-figure-label { align-self: end; }
.bj-figure-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bj-text-muted); }
.bj-figure-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.bj-figure-sub { font-size: 0.75rem; color: var(--bj-text-muted); }
/* A money range ("+$1,240–$1,840") is too long for the 1.6rem single-number size; it also gets two columns. */
.bj-figure-wide { grid-column: span 2; }
.bj-figure-value-range { font-size: 1.3rem; }

.bj-decision .bj-note { margin: 0; }

.bj-decision-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.bj-decision-actions form { margin: 0; }
.bj-decision-actions .btn-primary,
.bj-decision-actions .btn-outline-secondary { min-width: 9rem; }
/* Abandon is the one destructive way out: apart from the decision buttons, on its own row, as a red text link. */
.bj-decision-abandon { margin: 0; padding-top: 0.5rem; border-top: 1px solid var(--bj-border); }
/* What walking away banks, directly above the Execute / Walk away row. */
.bj-decision .bj-walkaway-note { margin: 0; }

.bj-btn-text { color: var(--bj-gold-bright); text-decoration: none; gap: 0.3rem; }
.bj-btn-text:hover { color: var(--bj-text); text-decoration: underline; }
.bj-btn-danger-link { color: var(--bj-danger-text); text-decoration: none; gap: 0.3rem; font-size: 0.85rem; padding-left: 0; padding-right: 0; }
.bj-btn-danger-link:hover { color: var(--bj-danger-text); text-decoration: underline; }

@media (max-width: 575.98px) {
  .bj-figure-value { font-size: 1.3rem; }
  .bj-payout { text-align: left; }
  .bj-payout-gain { justify-content: flex-start; }
  .bj-decision-actions form,
  .bj-decision-actions .btn { width: 100%; }
  .bj-decision-actions .bj-btn-text { justify-content: center; }
}

.bj-approach-line .ph { color: var(--bj-gold-bright); }
.bj-approach-option.is-locked { border-style: dashed; color: var(--bj-text-muted); background: transparent; }
.bj-intel-block > summary { gap: 0.35rem; }

/* Dashboard — Network (Stage 2): introducer and network-contact cards */
.bj-network-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.bj-network-card { border: 1px solid var(--bj-border-strong); border-radius: var(--bj-radius); padding: 0.75rem 0.9rem; background: var(--bj-ink); }
.bj-network-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; margin-bottom: 0.25rem; }
.bj-network-meta { font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-network-status { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bj-text-muted); }
.bj-network-status.is-retainerdue { color: var(--bj-gold-bright); }
.bj-network-status.is-left { color: var(--bj-crimson-bright); }
/* Jobs page — a network contact's held offers, first in the Available Jobs grid */
/* Keeps its own height: it has far less in it than the offer cards it shares a row with. */
.bj-retainer-card { border-color: var(--bj-gold); align-self: start; }
.bj-retainer-card .bj-job-title .ph-bold { color: var(--bj-gold-bright); }
.bj-retainer-badge { font-size: 0.75rem; font-weight: 600; color: var(--bj-gold-bright); }
.bj-retainer-missed { font-size: 0.75rem; color: var(--bj-crimson-bright); }
.bj-retainer-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.bj-retainer-preview li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 0.5rem; }
.bj-retainer-preview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bj-retainer-preview-money { font-weight: 600; white-space: nowrap; }
.bj-retainer-preview-complications { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; }
/* Small "introduction available" pointers (Jobs page Heat bar, Dashboard Contact heading) */
.bj-intro-indicator .ph-bold { color: var(--bj-gold-bright); }
.bj-intro-pill { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: none; font-family: var(--bj-font-body); color: var(--bj-gold-bright); text-decoration: none; }

.bj-retainer-card .bj-job-actions { grid-template-columns: 1fr; }

/* ---- Career completed screen (UI review E3) ---------------------------------------- */
/* One column on every width: hero (type, rank, ladder), feats, numbers, what's next — the page's one primary action last. */
.bj-recap { display: grid; gap: var(--bj-panel-gap); }
.bj-recap > .bj-panel { margin: 0; }
.bj-recap-hero { text-align: center; padding: 2rem var(--bj-panel-pad-x); border-color: var(--bj-gold); }
.bj-recap-icon { font-size: 2.5rem; color: var(--bj-gold); }
.bj-recap-kicker { margin: 0.25rem 0 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bj-text-muted); }
.bj-recap-hero .bj-page-title { justify-content: center; }
.bj-recap-rank { margin: 0.5rem 0 0; font-family: var(--bj-font-display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1.1; color: var(--bj-gold-bright); overflow-wrap: anywhere; }
.bj-recap-rank-line { margin: 0.35rem 0 0; color: var(--bj-text-muted); }
/* The ladder: the five ranks, lowest first. A row of five from 576px, a stack on a phone. The reached rank is gold and
   bold and carries aria-current; passed ranks keep normal text, the ones above are muted. */
.bj-recap-ladder { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.4rem; text-align: left; }
.bj-recap-ladder li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; border: 1px solid var(--bj-border); border-radius: var(--bj-radius); min-width: 0; }
.bj-recap-ladder-number { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bj-radius-pill); border: 1px solid var(--bj-border-strong); font-size: 0.8rem; font-weight: 600; }
.bj-recap-ladder-name { min-width: 0; overflow-wrap: anywhere; }
.bj-recap-ladder li.is-above { color: var(--bj-text-muted); }
.bj-recap-ladder li.is-reached { border-color: var(--bj-gold); background: rgba(200, 162, 74, 0.12); color: var(--bj-gold-bright); font-weight: 700; }
.bj-recap-ladder li.is-reached .bj-recap-ladder-number { background: var(--bj-gold); border-color: var(--bj-gold); color: var(--bj-gold-ink); }
.bj-recap-ladder li.is-passed .bj-recap-ladder-number { border-color: var(--bj-gold); color: var(--bj-gold-bright); }
@media (min-width: 576px) {
  .bj-recap-ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bj-recap-ladder li { flex-direction: column; text-align: center; gap: 0.3rem; padding: 0.6rem 0.4rem; }
}
.bj-recap-feats { list-style: none; margin: 0; padding: 0; }
.bj-recap-feats + .bj-recap-feats { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--bj-border); }
.bj-recap-feats li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.4rem; padding: 0.35rem 0; }
.bj-recap-feat-status { grid-column: 2; font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-recap-feats li.is-earned .bj-recap-feat-status { color: var(--bj-gold-bright); }
.bj-recap-feats li.is-missed .bj-recap-feat-text { color: var(--bj-text-muted); }
@media (min-width: 768px) {
  .bj-recap-feats li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bj-recap-feat-status { grid-column: 3; text-align: right; white-space: nowrap; }
}
.bj-recap-next-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.bj-recap-next-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; align-items: baseline; }
.bj-recap-next-list .ph, .bj-recap-next-list .ph-bold { color: var(--bj-gold); }
.bj-recap-new-best { color: var(--bj-gold-bright); font-weight: 600; }
.bj-recap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.bj-recap-actions .btn { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.bj-recap-profile-link { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 575.98px) {
  .bj-recap-actions .btn { width: 100%; justify-content: center; }
}

/* The Career page's "Last Career" line, above readiness once a Career has ended. */
.bj-career-last { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.bj-career-last-text { margin: 0; min-width: 0; }
.bj-career-last a { min-height: 44px; display: inline-flex; align-items: center; }
/* The finale's own requirement states: locked (muted) and unlocked (gold) — never the "not yet" mark. */
.bj-req.is-unlocked .bj-state { color: var(--bj-gold-bright); }

/* ---- Abandon a Career (2026-09-29) ------------------------------------------------ */
.bj-career-abandon { margin-top: 1rem; }
.bj-career-abandon .btn, .bj-askaround-form .form-select { min-height: 44px; }
.bj-career-abandon .btn { display: inline-flex; align-items: center; }
.bj-profile-table tr.is-abandoned th, .bj-profile-table tr.is-abandoned td { color: var(--bj-text-muted); }
/* The Careers table sits in a full-width card; on a phone each Career becomes a stacked block — its name, then one
   "label … value" line per column (the label comes from data-label) — so nothing is cut off and nothing scrolls sideways. */
@media (max-width: 575.98px) {
  .bj-profile-careers, .bj-profile-careers tbody, .bj-profile-careers tr, .bj-profile-careers th, .bj-profile-careers td { display: block; }
  .bj-profile-careers thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bj-profile-careers tr { padding: 0.5rem 0; border-bottom: 1px solid var(--bj-border); }
  .bj-profile-careers tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .bj-profile-careers th, .bj-profile-careers td { border-bottom: 0; padding: 0.1rem 0; }
  .bj-profile-careers td { display: flex; justify-content: space-between; gap: 1rem; }
  .bj-profile-careers td::before { content: attr(data-label); color: var(--bj-text-muted); }
}

/* Career ranks: the best rank per Career type, as titles above the Profile's Careers list. */
.bj-profile-titles { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.bj-profile-titles li { display: flex; flex-direction: column; }

/* ---- Ask around for work (Dashboard, 2026-09-30) ----------------------------- */
/* Stacked at every width: the card is a narrow column in the Dashboard grid, so the selector keeps its full width. */
.bj-askaround-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-bottom: 0.5rem; }
.bj-askaround-form .form-label { margin-bottom: 0; }
.bj-askaround-form .btn { justify-self: start; }
.bj-askaround-pending { font-weight: 500; }
.bj-askaround-reasons { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-askaround-reasons li + li { margin-top: 0.15rem; }
.bj-diff-requested { border-color: var(--bj-gold); display: inline-flex; align-items: center; gap: .3em; }
.bj-heat-request { font-weight: 500; }

/* ---- The Career page at the standard width --------------------------------------------- */
/* Lists of independent items sit in two columns once there is room; running text keeps a readable measure. */
@media (min-width: 992px) {
  .bj-dim-list, .bj-foundation-list, .bj-req-list, .bj-ready-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bj-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .bj-recap > .bj-recap-hero, .bj-recap > .bj-recap-next { grid-column: 1 / -1; }
}
.bj-career-panel > p, .bj-career-rule, .bj-career-window, .bj-begin-list { max-width: 80ch; }

/* ---- Step rows on a phone (UI review L12) ----------------------------------------------- */
/* The exact-risk breakdown ("15 fence + 1 alert + 16 heat (×4 for hot goods)") goes on its own line under the step, so it
   never squeezes the step's text into a narrow column. */
@media (max-width: 575.98px) {
  .bj-steplist-detailed .bj-step-risk { display: contents; }
  .bj-steplist-detailed .bj-step-risk-value { text-align: right; font-weight: 600; white-space: nowrap; }
  .bj-steplist-detailed .bj-step-breakdown { grid-column: 2 / -1; text-align: left; }
}
/* A complication on a step that's already done (UI review L6): past, so muted, and with no counter advice. */
.bj-complication.is-past { color: var(--bj-text-muted); }

/* ---- Buttons and alerts (UI review batch 4) ------------------------------------------- */
/* The line above a button: what the action does, costs in time, or why it's unavailable. The label itself stays short. */
.bj-action-note { margin: 0 0 0.3rem; font-size: 0.85rem; color: var(--bj-text-muted); }
.bj-action-reason { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--bj-text-muted); }
/* A link out of a card to the page it summarises (Dashboard). */
.bj-card-link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
/* The destructive action (Abandon, Walk away, Reject, Cancel request, Reset): a red text link, always behind the danger dialog. */
.bj-btn-danger-link { min-height: 44px; display: inline-flex; align-items: center; }
/* One option in the decision panel: what it changes, then its button. */
.bj-counter-option { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.bj-counter-option form { margin: 0; }
.bj-counter-option .bj-counter-effect { font-size: 0.85rem; }
/* Heat as a cost inside an alert that is otherwise good news. */
.alert .bj-alert-cost { color: var(--bj-cost); }

/* The completion screen's rank ladder on a phone: five small steps that wrap, not five full-width rows, so the feats
   show sooner. */
@media (max-width: 575.98px) {
  .bj-recap-ladder { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-top: 0.9rem; }
  .bj-recap-ladder li { gap: 0.35rem; padding: 0.2rem 0.55rem 0.2rem 0.25rem; border-radius: var(--bj-radius-pill); font-size: 0.85rem; }
  .bj-recap-ladder-number { width: 1.35rem; height: 1.35rem; font-size: 0.72rem; }
  .bj-recap-hero { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* Leaderboard tabs on a phone: four views (and four Career types) fit the row without their icons. */
@media (max-width: 575.98px) {
  .bj-leaderboard-page .bj-tabs { gap: 0; }
  .bj-leaderboard-page .bj-tab { padding: 0 0.45rem; font-size: 0.85rem; }
  .bj-leaderboard-page .bj-tab .bj-icon-inline { display: none; }
}