/* ═══════════════════════════════════════════════════════════════════════════
   JNA Design System — jna-admin-web
   Built STRICTLY to 11-JNA-Design-System-Spec.md §1–§4.
   Admin-web is the FIRST surface on the new design (client-web follows later).
   Desktop-first staff portal · WCAG 2.1 AA · Inter · tabular numerals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1.1 Color tokens — exact spec values ───────────────────────────────── */
:root {
  /* Brand — deep, trustworthy green */
  --jna-primary-900: #0B3D2E;
  --jna-primary-700: #12664A;
  --jna-primary-600: #178A63;
  --jna-primary-500: #1EA97C;
  --jna-primary-100: #D6F0E6;
  --jna-primary-50:  #EFF9F5;

  /* Accent — warm ochre/gold. ONLY for current/active state, never large fills */
  --jna-accent-500: #E3A008;
  --jna-accent-100: #FBEFCB;

  /* Neutrals */
  --jna-ink-900: #0F1B16;   /* headings */
  --jna-ink-700: #2B3A33;   /* body text */
  --jna-ink-500: #5A6B62;   /* secondary */
  --jna-ink-400: #8A988F;   /* muted / placeholder */
  --jna-line:    #E3E8E5;   /* borders / dividers */

  /* Surfaces — white cards on near-white page */
  --jna-surface:   #FFFFFF;
  --jna-surface-2: #F7FAF8;   /* page background */
  --jna-surface-3: #EEF3F0;   /* hover / subtle fill */

  /* Semantic */
  --jna-success:    #1E9E5A;  --jna-success-bg: #E6F6ED;
  --jna-warning:    #B7791F;  --jna-warning-bg: #FBF0D9;
  --jna-error:      #C0392B;  --jna-error-bg:   #FBEAE8;
  --jna-info:       #2563A8;  --jna-info-bg:    #E7F0FB;
  --jna-focus:      #1EA97C;

  /* ── §1.2 Typography ─────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* alias for legacy references */
  --font-base: var(--font-sans);

  /* ── §1.3 Spacing — 4px base, 8px rhythm ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 80px;  /* alias for page-level generous padding */

  /* ── §1.4 Radius / borders / elevation / motion ──────────────────────── */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --border:    1px solid var(--jna-line);
  --shadow-sm: 0 1px 2px rgba(15,27,22,.06);
  --shadow-md: 0 4px 12px rgba(15,27,22,.08);
  --shadow-lg: 0 12px 32px rgba(15,27,22,.12);
  --shadow:    var(--shadow-md);   /* alias */

  --focus-ring: 0 0 0 3px rgba(30,169,124,.35);
  --ease:  cubic-bezier(.2,.6,.2,1);
  --dur:   160ms;

  /* ── §2 Shell dimensions ─────────────────────────────────────────────── */
  --admin-nav-width:     264px;
  --admin-topbar-height: 60px;
  --content-max-w:       1280px;
  --touch-min:           44px;   /* WCAG 2.5.5 touch target */

  /* ── Legacy aliases (pages that reference old names continue to work) ─── */
  --jna-green:          var(--jna-primary-600);
  --jna-green-dark:     var(--jna-primary-700);
  --jna-green-light:    var(--jna-primary-500);
  --jna-green-muted:    var(--jna-primary-50);
  --jna-gold:           var(--jna-accent-500);
  --jna-gold-dark:      #B7791F;
  --jna-white:          var(--jna-surface);
  --jna-charcoal:       var(--jna-ink-700);
  --jna-charcoal-soft:  var(--jna-ink-500);
  --jna-bg:             var(--jna-surface-2);
  --jna-neutral-bg:     var(--jna-surface-3);
  --jna-border:         var(--jna-line);
  --jna-border-light:   var(--jna-line);
  --topbar-height:   var(--admin-topbar-height);
  --nav-width:       var(--admin-nav-width);

  /* Type scale aliases */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 0.875rem;          /* 14px — admin is dense */
  color: var(--jna-ink-700);
  background: var(--jna-surface-2);
  line-height: 1.57;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--jna-primary-600); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── §a11y ───────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.jna-skip-link {
  position: absolute; top: -100%; left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--jna-primary-600); color: var(--jna-surface);
  font-weight: 600; text-decoration: none;
  border-radius: var(--radius-sm); z-index: 9999; transition: top var(--dur) var(--ease);
}
.jna-skip-link:focus { top: var(--space-4); }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §2 — App Shell: sidebar + topbar + content
   ═══════════════════════════════════════════════════════════════════════════ */
.jna-admin-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Left sidebar (264px, surface, right border) ─────────────────────────── */
.jna-admin-nav {
  width: var(--admin-nav-width);
  flex-shrink: 0;
  background: var(--jna-surface);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
}
.jna-admin-nav__logo {
  padding: var(--space-4);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.jna-logo { text-decoration: none; }
.jna-logo__text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jna-primary-700);
  letter-spacing: .02em;
}
.jna-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.jna-brand__mark {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--jna-primary-600), var(--jna-primary-700));
  color: #fff;
  box-shadow: 0 2px 6px rgba(23, 138, 99, 0.35);
}
.jna-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.jna-brand__name { font-size: 1rem; font-weight: 700; color: var(--jna-ink-900); letter-spacing: .01em; }
.jna-brand__sub {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--jna-ink-400); font-weight: 600;
}
.jna-admin-nav__section { padding: var(--space-3) 0 var(--space-2); }
.jna-admin-nav__group {
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--jna-ink-400);
}
.jna-admin-nav__group--gap { margin-top: var(--space-4); border-top: var(--border); }

/* Nav item — rounded pill inset in the rail, icon tile, active = filled */
.jna-admin-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px var(--space-2);
  padding: 0 10px;
  height: 40px;
  border-radius: 10px;
  color: var(--jna-ink-500);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
  position: relative;
}
.jna-admin-nav__item:hover {
  background: var(--jna-surface-3);
  color: var(--jna-ink-900);
}
.jna-admin-nav__item--active,
.jna-admin-nav__item.active {
  background: var(--jna-primary-50);
  color: var(--jna-primary-700);
  font-weight: 600;
}
.jna-admin-nav__item--active::before,
.jna-admin-nav__item.active::before {
  content: "";
  position: absolute;
  left: -8px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px;
  background: var(--jna-primary-600);
}
.jna-admin-nav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0; color: inherit; opacity: 0.85;
}
.jna-admin-nav__item--active .jna-admin-nav__icon,
.jna-admin-nav__item.active .jna-admin-nav__icon { opacity: 1; }
.jna-admin-nav__label { flex: 1; min-width: 0; }
.jna-admin-nav__badge {
  margin-left: auto;
  background: var(--jna-accent-500);
  color: var(--jna-ink-900);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
  line-height: 20px;
  height: 20px;
}

/* ── Main area ───────────────────────────────────────────────────────────── */
.jna-admin-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.jna-admin-topbar {
  height: var(--admin-topbar-height);
  background: var(--jna-surface);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.jna-admin-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
}
.jna-admin-topbar__breadcrumb { display: flex; align-items: center; gap: var(--space-2); }
.jna-admin-topbar__title   { font-weight: 600; font-size: 0.875rem; color: var(--jna-ink-700); }
.jna-admin-topbar__right   { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.jna-admin-topbar__user    { font-size: 0.875rem; color: var(--jna-ink-500); text-decoration: none; }
a.jna-admin-topbar__user:hover { color: var(--jna-primary-600); text-decoration: underline; }
.jna-live-dot--connected    { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jna-success); box-shadow: 0 0 0 2px var(--jna-success-bg); }
.jna-live-dot--disconnected { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--jna-line); }
.jna-admin-content {
  flex: 1;
  overflow-y: auto;
  background: var(--jna-surface-2);
}

/* ── Page wrapper / header ───────────────────────────────────────────────── */
.jna-admin-page { padding: var(--space-6); max-width: var(--content-max-w); }
.jna-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.jna-page-header__left { display: flex; flex-direction: column; gap: var(--space-1); }
.jna-page-title    { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--jna-ink-900); }
.jna-page-subtitle { font-size: 0.875rem; color: var(--jna-ink-500); }
.jna-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--jna-ink-400); margin-bottom: var(--space-4); }
.jna-breadcrumb a { color: var(--jna-primary-600); text-decoration: none; }
.jna-breadcrumb a:hover { text-decoration: underline; }
.jna-breadcrumb__sep { color: var(--jna-line); }

/* Portal-level aliases (used by some pages) */
.jna-portal-page { max-width: var(--content-max-w); display: flex; flex-direction: column; gap: var(--space-6); }
.jna-portal-page__header { border-bottom: var(--border); padding-bottom: var(--space-4); }
.jna-portal-page__title { font-size: 1.5rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.3; }
.jna-portal-page__subtitle { margin-top: var(--space-1); color: var(--jna-ink-500); font-size: 0.9375rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   §3 — Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §3 Buttons ──────────────────────────────────────────────────────────── */
.jna-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 40px;               /* md = 40px */
  min-width: var(--touch-min);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.jna-btn:focus-visible { box-shadow: var(--focus-ring); }
.jna-btn:disabled, .jna-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.jna-btn--sm  { height: 32px; padding: 0 var(--space-3); font-size: 0.8125rem; min-width: 0; }
.jna-btn--lg  { height: 48px; padding: 0 var(--space-5); font-size: 0.9375rem; }
.jna-btn--full{ width: 100%; }
.jna-btn--icon{ width: 40px; height: 40px; padding: 0; border: none; background: transparent; color: var(--jna-ink-500); border-radius: var(--radius-sm); min-width: 0; }
.jna-btn--icon:hover:not(:disabled) { background: var(--jna-surface-3); color: var(--jna-ink-700); }
.jna-btn--icon.jna-btn--sm { width: 32px; height: 32px; }

/* Variants */
.jna-btn--primary   { background: var(--jna-primary-600); color: var(--jna-surface); border-color: var(--jna-primary-600); }
.jna-btn--primary:hover:not(:disabled) { background: var(--jna-primary-700); border-color: var(--jna-primary-700); }
.jna-btn--secondary { background: var(--jna-surface); color: var(--jna-ink-700); border-color: var(--jna-line); }
.jna-btn--secondary:hover:not(:disabled) { background: var(--jna-surface-3); }
.jna-btn--ghost     { background: transparent; color: var(--jna-ink-700); border-color: transparent; }
.jna-btn--ghost:hover:not(:disabled) { background: var(--jna-surface-3); }
.jna-btn--danger    { background: var(--jna-error); color: var(--jna-surface); border-color: var(--jna-error); }
.jna-btn--danger:hover:not(:disabled) { background: #A93226; border-color: #A93226; }
.jna-btn--outline   { background: transparent; color: var(--jna-primary-600); border-color: var(--jna-primary-600); }
.jna-btn--outline:hover:not(:disabled) { background: var(--jna-primary-50); }
.jna-btn--link      { background: none; border: none; height: auto; padding: 0; color: var(--jna-primary-600); font-weight: 500; text-decoration: underline; }
.jna-btn--link:hover { color: var(--jna-primary-700); }
.jna-action-group   { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* ── §3 Text inputs / select / textarea ──────────────────────────────────── */
.jna-form-field, .jna-form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.jna-label, .jna-form-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--jna-ink-500);
}
.jna-required { color: var(--jna-error); margin-left: 2px; }
.jna-hint, .jna-form-hint { font-size: 0.8125rem; color: var(--jna-ink-400); margin-top: 2px; }
.jna-field-error, .jna-form-error {
  font-size: 0.8125rem;
  color: var(--jna-error);
  margin-top: 2px;
}

.jna-input, .jna-select, .jna-textarea {
  padding: 0 var(--space-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--jna-ink-700);
  background: var(--jna-surface);
  height: 40px;
  min-height: var(--touch-min);
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.jna-input::placeholder, .jna-select::placeholder { color: var(--jna-ink-400); }
.jna-input:focus, .jna-select:focus, .jna-textarea:focus {
  border-color: var(--jna-primary-500);
  box-shadow: var(--focus-ring);
  outline: none;
}
.jna-textarea { height: auto; min-height: 80px; padding: var(--space-3); resize: vertical; }

/* Input states */
.jna-input--invalid { border-color: var(--jna-error) !important; }
.jna-input--invalid:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.3) !important; }
.jna-input--valid   { border-color: var(--jna-success) !important; }
.jna-input--disabled, .jna-input:disabled { background: var(--jna-surface-3); color: var(--jna-ink-400); cursor: not-allowed; }
.jna-input--otp {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  height: auto;
  font-variant-numeric: tabular-nums;
}

/* Password toggle wrapper */
.jna-input-wrapper { position: relative; display: flex; align-items: center; }
.jna-input-wrapper .jna-input { padding-right: 44px; }
.jna-input-wrapper__toggle {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--jna-ink-400);
  transition: color var(--dur) var(--ease);
}
.jna-input-wrapper__toggle:hover { color: var(--jna-ink-700); }

/* Amount input group */
.jna-amount-input-group { display: flex; align-items: stretch; }
.jna-amount-input-group__prefix {
  display: flex; align-items: center;
  padding: 0 var(--space-3);
  background: var(--jna-surface-3);
  border: var(--border); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-500);
}
.jna-amount-input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; flex: 1; }

/* Select */
.jna-select {
  padding-right: var(--space-8);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235A6B62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

/* ── §3 Card / panel ─────────────────────────────────────────────────────── */
.jna-card {
  background: var(--jna-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  overflow: hidden;
}
.jna-card__heading { font-size: 1.0625rem; font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-4); }
.jna-card__header { padding: var(--space-4) var(--space-5); border-bottom: var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.jna-card__title  { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--jna-ink-900); }
.jna-card__body   { padding: var(--space-5); }
.jna-card__section{ padding: var(--space-4) var(--space-5); border-top: var(--border); }
.jna-card__actions{ padding: var(--space-3) var(--space-5); border-top: var(--border); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.jna-panel { background: var(--jna-surface); border: var(--border); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.jna-panel--full { grid-column: 1 / -1; }
.jna-panel__title { font-size: 1.0625rem; font-weight: 600; color: var(--jna-primary-700); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--border); }
.jna-panel__section { margin-top: var(--space-5); }
.jna-panel__subtitle { font-size: 0.6875rem; font-weight: 500; color: var(--jna-ink-400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-3); }

/* ── §3 Stat / KPI card ──────────────────────────────────────────────────── */
.jna-stats-grid, .jna-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}
.jna-stat-card {
  background: var(--jna-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.jna-stat-card--highlight { background: var(--jna-primary-50); border-color: var(--jna-primary-100); }
.jna-stat-card--warning   { border-color: var(--jna-warning); }
/* KPI number — Display (32/40/700), tabular */
.jna-stat-card__value {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 700;
  color: var(--jna-ink-900);
  font-variant-numeric: tabular-nums;
}
.jna-stat-card__value--primary { color: var(--jna-primary-700); }
.jna-stat-card__value--alert   { color: var(--jna-error); }
.jna-stat-card__label {
  font-size: 0.6875rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--jna-ink-500);
  margin-top: var(--space-2);
}
.jna-stat-card__sub { font-size: 0.8125rem; color: var(--jna-ink-400); margin-top: 2px; }

/* ── §3 Table / data grid ────────────────────────────────────────────────── */
.jna-table-wrapper, .jna-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.jna-table, .jna-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--jna-surface);
}
.jna-table th, .jna-admin-table th {
  background: var(--jna-surface-3);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--jna-ink-500);
  border-bottom: var(--border);
  white-space: nowrap;
  position: sticky; top: 0;
}
.jna-table td, .jna-admin-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--jna-surface-3);
  color: var(--jna-ink-700);
  vertical-align: middle;
}
.jna-table tr:last-child td, .jna-admin-table tr:last-child td { border-bottom: none; }
.jna-table tr:hover td, .jna-admin-table tr:hover td { background: var(--jna-primary-50); }
.jna-table tr.clickable, .jna-admin-table tr.clickable { cursor: pointer; }
.jna-table__num, .jna-admin-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.jna-table__num--bold { font-weight: 700; color: var(--jna-primary-700); }
.jna-admin-table .primary { font-weight: 600; color: var(--jna-ink-900); }

/* ── §3 Status badge / pill ──────────────────────────────────────────────── */
.jna-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.jna-badge::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.jna-badge--success, .jna-badge--verified { background: var(--jna-success-bg); color: var(--jna-success); }
.jna-badge--warning, .jna-badge--pending  { background: var(--jna-warning-bg); color: var(--jna-warning); }
.jna-badge--error,   .jna-badge--rejected { background: var(--jna-error-bg);   color: var(--jna-error); }
.jna-badge--info     { background: var(--jna-info-bg);    color: var(--jna-info); }
.jna-badge--muted, .jna-badge--neutral { background: var(--jna-surface-3); color: var(--jna-ink-500); }

/* Phase badge */
.jna-phase-badge {
  display: inline-block; padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.jna-phase-badge--design,
.jna-phase-badge--approvals    { background: var(--jna-info-bg);    color: var(--jna-info); }
.jna-phase-badge--construction { background: var(--jna-warning-bg); color: var(--jna-warning); }
.jna-phase-badge--handover     { background: var(--jna-accent-100); color: var(--jna-warning); }
.jna-phase-badge--completed    { background: var(--jna-success-bg); color: var(--jna-success); }

/* ── §3 Tabs — underline style ───────────────────────────────────────────── */
.jna-tabs, .jna-filter-tabs { display: flex; border-bottom: var(--border); gap: 0; }
.jna-tab, .jna-filter-tab {
  padding: var(--space-3) var(--space-5);
  font-size: 0.875rem; font-weight: 500;
  color: var(--jna-ink-500);
  background: transparent; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease);
  white-space: nowrap; min-height: 0;
}
.jna-tab:hover, .jna-filter-tab:hover { color: var(--jna-ink-700); }
.jna-tab--active, .jna-filter-tab--active {
  color: var(--jna-ink-900); font-weight: 600;
  border-bottom-color: var(--jna-primary-600);
}

/* ── §3 Modal / dialog ───────────────────────────────────────────────────── */
.jna-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,27,22,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: var(--space-4);
  backdrop-filter: blur(2px);
}
.jna-modal {
  background: var(--jna-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; gap: var(--space-5);
  max-height: 90vh; overflow-y: auto;
}
.jna-modal--wide  { max-width: 640px; }
.jna-modal__title { font-size: 1.25rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.4; }
.jna-modal__body  { font-size: 0.875rem; color: var(--jna-ink-500); line-height: 1.6; }
.jna-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }

/* ── §3 Banners / alerts ─────────────────────────────────────────────────── */
.jna-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.875rem; line-height: 1.5;
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.jna-banner--error   { background: var(--jna-error-bg);   color: var(--jna-error);   border: 1px solid var(--jna-error); }
.jna-banner--success { background: var(--jna-success-bg); color: var(--jna-success); border: 1px solid var(--jna-success); }
.jna-banner--info    { background: var(--jna-info-bg);    color: var(--jna-info);    border: 1px solid var(--jna-info); }
.jna-banner--warning { background: var(--jna-warning-bg); color: var(--jna-warning); border: 1px solid var(--jna-warning); }

/* ── §3 Toast ────────────────────────────────────────────────────────────── */
.jna-toast-container {
  position: fixed; top: var(--space-4); right: var(--space-4);
  z-index: 2000; display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 360px; pointer-events: none;
}
.jna-toast {
  background: var(--jna-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border-left: 4px solid;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  pointer-events: all;
  animation: jna-toast-in var(--dur) var(--ease);
}
@keyframes jna-toast-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.jna-toast--success { border-color: var(--jna-success); }
.jna-toast--error   { border-color: var(--jna-error); }
.jna-toast--info    { border-color: var(--jna-info); }
.jna-toast__body    { flex: 1; }
.jna-toast__title   { font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-900); }
.jna-toast__message { font-size: 0.8125rem; color: var(--jna-ink-500); margin-top: 2px; }
.jna-toast__dismiss { background: none; border: none; cursor: pointer; padding: 0; color: var(--jna-ink-400); min-width: 24px; display: flex; align-items: center; flex-shrink: 0; }
.jna-toast__dismiss:hover { color: var(--jna-ink-700); }

/* ── §3 Empty state ──────────────────────────────────────────────────────── */
.jna-empty-state {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  color: var(--jna-ink-400);
}
.jna-empty-state svg { color: var(--jna-line); }
.jna-empty-state h2, .jna-empty-state__title { font-size: 1.0625rem; font-weight: 600; color: var(--jna-ink-700); }
.jna-empty-state p, .jna-empty-state__desc   { font-size: 0.875rem; color: var(--jna-ink-400); max-width: 380px; }
.jna-empty-state--compact { padding: var(--space-6) var(--space-4); }

/* ── §3 Loading / spinner / skeleton ─────────────────────────────────────── */
@keyframes jna-spin    { to { transform: rotate(360deg); } }
@keyframes jna-pulse   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } }
@keyframes jna-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.jna-spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 3px solid rgba(23,138,99,.2); border-top-color: var(--jna-primary-500);
  border-radius: 50%; animation: jna-spin .7s linear infinite; flex-shrink: 0;
}
.jna-spinner--sm  { width: 14px; height: 14px; border-width: 2px; }
.jna-spinner--lg  { width: 28px; height: 28px; border-width: 3px; }
.jna-spinner--page { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-10) var(--space-6); color: var(--jna-ink-400); }
.jna-step-loading, .jna-auth-loading, .jna-boot-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); min-height: 200px; color: var(--jna-ink-400);
}
.jna-skeleton {
  background: linear-gradient(90deg, var(--jna-surface-3) 25%, var(--jna-surface-2) 50%, var(--jna-surface-3) 75%);
  background-size: 200% 100%;
  animation: jna-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
.jna-skeleton--text   { height: 0.875rem; }
.jna-skeleton--title  { height: 1.5rem; }
.jna-skeleton--card   { height: 120px; border-radius: var(--radius); }
.jna-skeleton--line   { height: 1rem; margin-bottom: var(--space-2); }
.jna-skeleton--short  { max-width: 60%; }
.jna-skeleton--bar    { height: 8px; }
.jna-skeleton--media-card { height: 180px; border-radius: var(--radius); }
.jna-skeleton-card    { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }

/* ── §3 Progress bar ─────────────────────────────────────────────────────── */
.jna-progress-bar { height: 8px; background: var(--jna-surface-3); border-radius: 4px; overflow: hidden; }
.jna-progress-bar__fill { height: 100%; background: var(--jna-primary-500); border-radius: 4px; transition: width .3s var(--ease); }
.jna-progress-bar--small  { height: 4px; }
.jna-progress-bar--lg     { height: 12px; border-radius: 6px; }
.jna-progress-bar--micro  { height: 4px; border-radius: 2px; margin-top: 4px; }
.jna-progress-bar__label  { font-size: 0.8125rem; color: var(--jna-ink-400); margin-top: var(--space-1); }
.jna-progress-inline      { display: flex; align-items: center; gap: var(--space-2); }
.jna-progress-inline__bar { flex: 1; height: 6px; background: var(--jna-surface-3); border-radius: 3px; overflow: hidden; min-width: 60px; }
.jna-progress-inline__fill{ height: 100%; background: var(--jna-primary-500); border-radius: 3px; transition: width .3s; }
.jna-progress-inline__label{ font-size: 0.75rem; color: var(--jna-ink-400); white-space: nowrap; }
/* OB-6: compact step-progress indicator for the onboarding pipeline table cell */
.jna-step-progress         { display: flex; flex-direction: column; gap: 3px; min-width: 120px; max-width: 220px; }
.jna-step-progress__bar    { height: 5px; background: var(--jna-surface-3); border-radius: 3px; overflow: hidden; }
.jna-step-progress__fill   { height: 100%; background: var(--jna-primary-500); border-radius: 3px; transition: width .3s var(--ease); }
.jna-step-progress__label  { font-size: 0.75rem; color: var(--jna-ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jna-step-progress__current{ color: var(--jna-ink-500); }
@media (max-width: 375px) {
  .jna-step-progress__current { display: none; }  /* collapse step name on very narrow screens */
  .jna-step-progress { min-width: 80px; }
}

/* ── §3 Timeline ─────────────────────────────────────────────────────────── */
.jna-timeline, .jna-milestone-timeline, .jna-phase-timeline {
  list-style: none; position: relative;
  display: flex; flex-direction: column; gap: 0;
}
.jna-timeline::before {
  content: ""; position: absolute; left: 11px; top: 0; bottom: 0;
  width: 2px; background: var(--jna-line); z-index: 0;
}
.jna-phase-timeline::before, .jna-milestone-timeline::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0;
  width: 2px; background: var(--jna-line);
}
.jna-timeline__item { display: flex; gap: var(--space-4); padding: var(--space-3) 0; position: relative; }
.jna-timeline__dot { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: var(--jna-line); z-index: 1; position: relative; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; }
.jna-timeline__item--current .jna-timeline__dot { background: var(--jna-primary-600); }
.jna-timeline__item--past    .jna-timeline__dot { background: var(--jna-primary-100); }
.jna-timeline__body  { flex: 1; }
.jna-timeline__phase { font-weight: 600; color: var(--jna-ink-900); font-size: 0.875rem; }
.jna-timeline__date  { font-size: 0.8125rem; color: var(--jna-ink-400); margin-top: 2px; }
.jna-timeline__note  { font-size: 0.875rem; color: var(--jna-ink-700); margin-top: var(--space-1); }
.jna-timeline__by    { font-size: 0.75rem; color: var(--jna-ink-400); margin-top: 2px; }

/* Phase / milestone items */
.jna-phase-item, .jna-milestone { display: flex; gap: var(--space-4); padding: var(--space-4) 0; position: relative; }
.jna-phase-item__marker, .jna-milestone__marker { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--jna-line); z-index: 1; position: relative; }
.jna-phase-item--completed .jna-phase-item__marker, .jna-milestone--achieved .jna-milestone__marker { background: var(--jna-primary-600); }
.jna-phase-item--active    .jna-phase-item__marker, .jna-milestone--inprogress .jna-milestone__marker { background: var(--jna-accent-500); }
.jna-phase-item--planned   .jna-phase-item__marker, .jna-milestone--planned .jna-milestone__marker { background: var(--jna-surface-2); border: 2px solid var(--jna-line); }
.jna-phase-item__pulse, .jna-milestone__pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--jna-surface); animation: jna-pulse 1.5s ease-in-out infinite; }
.jna-phase-item__content, .jna-milestone__content { flex: 1; padding-top: var(--space-2); }
.jna-phase-item__name, .jna-milestone__title { font-size: 0.9375rem; font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-1); }
.jna-phase-item__desc, .jna-milestone__desc { font-size: 0.875rem; color: var(--jna-ink-500); margin-bottom: var(--space-2); }

/* Phase stepper */
.jna-phase-stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: var(--space-2) 0 var(--space-4); scrollbar-width: none; }
.jna-phase-stepper::-webkit-scrollbar { display: none; }
.jna-phase-stepper__step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; position: relative; }
.jna-phase-stepper__step:not(:last-child)::after { content: ""; position: absolute; top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--jna-line); z-index: 0; }
.jna-phase-stepper__step--done:not(:last-child)::after { background: var(--jna-primary-100); }
.jna-phase-stepper__dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--jna-line); background: var(--jna-surface-2); display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; flex-shrink: 0; }
.jna-phase-stepper__step--done    .jna-phase-stepper__dot { background: var(--jna-primary-100); border-color: var(--jna-primary-100); }
.jna-phase-stepper__step--current .jna-phase-stepper__dot { background: var(--jna-primary-600); border-color: var(--jna-primary-600); box-shadow: 0 0 0 4px var(--jna-primary-50); }
.jna-phase-stepper__check { color: var(--jna-surface); font-size: 0.75rem; font-weight: 700; }
.jna-phase-stepper__label { font-size: 0.6875rem; font-weight: 600; text-align: center; color: var(--jna-ink-400); margin-top: var(--space-2); line-height: 1.2; max-width: 80px; }
.jna-phase-stepper__step--done    .jna-phase-stepper__label { color: var(--jna-primary-700); }
.jna-phase-stepper__step--current .jna-phase-stepper__label { color: var(--jna-primary-700); font-weight: 700; }

/* ── §3 Money display ────────────────────────────────────────────────────── */
.jna-money { display: inline-flex; flex-direction: column; gap: 2px; }
.jna-money__label { font-size: 0.875rem; color: var(--jna-ink-500); }
.jna-money__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.jna-money__value--prominent { font-size: 1.25rem; font-weight: 700; color: var(--jna-primary-700); }

/* ── §3 Meta-grid / definition list ─────────────────────────────────────── */
.jna-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); font-size: 0.875rem; }
.jna-meta-grid--wide { grid-template-columns: 1fr; }
@media (min-width: 480px) { .jna-meta-grid--wide { grid-template-columns: 1fr 1fr; } }
.jna-meta-grid dt { font-weight: 600; color: var(--jna-ink-500); }
.jna-meta-grid dd { color: var(--jna-ink-700); }
.jna-meta-grid__money { font-weight: 700; color: var(--jna-primary-700); font-variant-numeric: tabular-nums; }
.jna-meta-grid__warn  { color: var(--jna-error); font-weight: 600; }

/* ── §3 Filter bar / chips ───────────────────────────────────────────────── */
.jna-filter-bar { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.jna-filter-bar__search { min-width: 240px; max-width: 320px; flex: 1; }
.jna-filter-bar__select { min-width: 160px; }
.jna-filter-bar__date   { min-width: 140px; }
.jna-filter-chips, .jna-filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.jna-chip, .jna-filter-tab {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: var(--border); border-radius: var(--radius-pill);
  background: var(--jna-surface);
  font-size: 0.8125rem; font-weight: 500;
  cursor: pointer; color: var(--jna-ink-500);
  transition: background var(--dur), border-color var(--dur), color var(--dur);
  min-height: 0;
}
.jna-chip:hover, .jna-filter-tab:hover { border-color: var(--jna-primary-500); color: var(--jna-primary-600); }
.jna-chip--active, .jna-filter-tab--active { background: var(--jna-primary-600); border-color: var(--jna-primary-600); color: var(--jna-surface); }

/* ── §3 Pagination ───────────────────────────────────────────────────────── */
.jna-pagination { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: var(--border); justify-content: flex-end; }
.jna-pagination__info { font-size: 0.8125rem; color: var(--jna-ink-400); }

/* ── §3 Text utilities / links ───────────────────────────────────────────── */
.jna-text-muted, .jna-text--muted   { color: var(--jna-ink-400); }
.jna-text-success                   { color: var(--jna-success); }
.jna-text-error, .jna-text--error   { color: var(--jna-error); }
.jna-link { color: var(--jna-primary-600); text-decoration: underline; font-weight: 500; }
.jna-link:hover { color: var(--jna-primary-700); }
.jna-section-title { font-size: 1.0625rem; font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-4); border-bottom: var(--border); padding-bottom: var(--space-2); }
.jna-section-heading { font-size: 1.0625rem; font-weight: 600; color: var(--jna-ink-700); margin-bottom: var(--space-4); }
.jna-section-heading__count { font-weight: 400; color: var(--jna-ink-400); margin-left: var(--space-2); }

/* ── §3 Password input extras ────────────────────────────────────────────── */
.jna-password-strength { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.jna-password-strength__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.jna-password-strength__segment { height: 4px; border-radius: 2px; background: var(--jna-line); transition: background-color .2s; }
.jna-password-strength__segment--weak   { background: var(--jna-error); }
.jna-password-strength__segment--fair   { background: var(--jna-warning); }
.jna-password-strength__segment--good   { background: var(--jna-accent-500); }
.jna-password-strength__segment--strong { background: var(--jna-success); }
.jna-password-strength__label { font-size: 0.8125rem; color: var(--jna-ink-400); }
.jna-password-strength__label--weak   { color: var(--jna-error); }
.jna-password-strength__label--fair   { color: var(--jna-warning); }
.jna-password-strength__label--good   { color: var(--jna-warning); }
.jna-password-strength__label--strong { color: var(--jna-success); }
.jna-password-rules { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); font-size: 0.8125rem; }
.jna-password-rules li { display: flex; align-items: center; gap: var(--space-2); color: var(--jna-ink-400); }
.jna-password-rules li::before { content: "○"; color: var(--jna-line); }
.jna-password-rules li.met::before { content: "✓"; color: var(--jna-success); }
.jna-password-rules li.met { color: var(--jna-primary-700); }

/* ── §3 Radio group ──────────────────────────────────────────────────────── */
.jna-radio-group { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
@media (min-width: 400px) { .jna-radio-group { flex-direction: row; gap: var(--space-4); } }
.jna-radio-label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 0.9375rem; min-height: var(--touch-min); padding: var(--space-2) var(--space-3); border: var(--border); border-radius: var(--radius-sm); transition: border-color .15s, background-color .15s; }
.jna-radio-label:hover { border-color: var(--jna-primary-500); background: var(--jna-primary-50); }
.jna-radio-label input[type="radio"] { width: 18px; height: 18px; accent-color: var(--jna-primary-600); cursor: pointer; }

/* ── §3 Card-stack / split layout ───────────────────────────────────────── */
.jna-card-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-list       { display: flex; flex-direction: column; gap: var(--space-3); }
.jna-split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }

/* ── §3 Upload / dropzone ────────────────────────────────────────────────── */
.jna-upload { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-upload__label { font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-700); }
.jna-upload__dropzone { border: 2px dashed var(--jna-line); border-radius: var(--radius); padding: var(--space-6); text-align: center; background: var(--jna-surface-2); transition: border-color .15s; }
.jna-upload__dropzone:hover, .jna-upload__dropzone:focus-within { border-color: var(--jna-primary-500); background: var(--jna-primary-50); }
.jna-upload__dropzone--error { border-color: var(--jna-error); }
.jna-upload__hint { font-size: 0.875rem; color: var(--jna-ink-400); margin-top: var(--space-2); }
.jna-upload__error { color: var(--jna-error); font-size: 0.875rem; }
.jna-upload__progress { display: flex; flex-direction: column; gap: var(--space-3); }
.jna-upload__success { display: flex; align-items: center; gap: var(--space-3); color: var(--jna-success); font-size: 0.875rem; font-weight: 500; }

/* ── §3 Delivery cards ───────────────────────────────────────────────────── */
.jna-delivery-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.jna-delivery-card { background: var(--jna-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); border-left: 4px solid var(--jna-line); display: flex; flex-direction: column; gap: var(--space-4); }
.jna-delivery-card--verified { border-left-color: var(--jna-success); }
.jna-delivery-card--pending  { border-left-color: var(--jna-accent-500); }
.jna-delivery-card--rejected { border-left-color: var(--jna-error); opacity: .85; }
.jna-delivery-card__header  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.jna-delivery-card__item    { font-size: 1rem; font-weight: 700; color: var(--jna-ink-900); }
.jna-delivery-card__meta    { display: grid; gap: var(--space-2); font-size: 0.875rem; }
.jna-delivery-card__meta-row { display: flex; gap: var(--space-3); align-items: baseline; }
.jna-delivery-card__meta-row dt { font-weight: 600; color: var(--jna-ink-500); min-width: 110px; flex-shrink: 0; }
.jna-delivery-card__meta-row dd { color: var(--jna-ink-700); }
.jna-delivery-card__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.jna-delivery-card__rejection-reason { font-size: 0.875rem; color: var(--jna-error); padding-top: var(--space-2); }

/* ── §3 Receipt panel ────────────────────────────────────────────────────── */
.jna-receipt-panel { background: var(--jna-success-bg); border-radius: var(--radius); border: 1px solid var(--jna-success); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.jna-receipt-panel__heading { font-size: 1.0625rem; font-weight: 700; color: var(--jna-success); display: flex; align-items: center; gap: var(--space-3); }
.jna-receipt-panel__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.jna-receipt-item { display: flex; align-items: center; gap: var(--space-3); background: var(--jna-surface); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); }
.jna-receipt-item__name { flex: 1; font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-900); }

/* ── §3 Finance / ledger ─────────────────────────────────────────────────── */
.jna-finance-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .jna-finance-cards { grid-template-columns: repeat(4, 1fr); } }
.jna-finance-card { background: var(--jna-surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.jna-finance-card--balance { background: var(--jna-success-bg); border-color: var(--jna-success); }
.jna-finance-card__label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--jna-ink-500); }
.jna-finance-card__value { font-size: 1.0625rem; font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }
.jna-finance-card__value--highlight { color: var(--jna-primary-700); font-size: 1.25rem; }
.jna-ledger-summary { display: flex; gap: var(--space-5); margin-bottom: var(--space-4); flex-wrap: wrap; }
.jna-ledger-total { background: var(--jna-surface); border: var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.jna-ledger-total__label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--jna-ink-400); }
.jna-finance-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.jna-finance-table th { background: var(--jna-surface-3); text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--jna-ink-500); border-bottom: var(--border); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; }
.jna-finance-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--jna-surface-3); color: var(--jna-ink-700); }
.jna-finance-table tr:last-child td { border-bottom: none; }
.jna-finance-table__amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.jna-finance-table__total td { background: var(--jna-surface-3); font-weight: 700; }

/* ── §3 Accountability / audit feed ─────────────────────────────────────── */
.jna-feed { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.jna-feed-item { background: var(--jna-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; border: var(--border); }
.jna-feed-item__icon { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--jna-surface-3); color: var(--jna-ink-500); font-size: 0.875rem; }
.jna-feed-item__body  { flex: 1; min-width: 0; }
.jna-feed-item__title { font-size: 0.9375rem; font-weight: 600; color: var(--jna-ink-900); }
.jna-feed-item__desc  { font-size: 0.875rem; color: var(--jna-ink-500); margin-top: var(--space-1); }
.jna-feed-item__meta  { font-size: 0.75rem; color: var(--jna-ink-400); margin-top: var(--space-2); }
.jna-feed-item--delivery .jna-feed-item__icon { background: var(--jna-success-bg); color: var(--jna-success); }
.jna-feed-item--expense  .jna-feed-item__icon { background: var(--jna-info-bg);    color: var(--jna-info); }
.jna-feed-item--progress .jna-feed-item__icon { background: var(--jna-warning-bg); color: var(--jna-warning); }

/* Accountability item */
.jna-accountability-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.jna-accountability-item__icon { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--jna-surface-3); color: var(--jna-ink-500); }
.jna-accountability-item__icon--delivery { background: var(--jna-success-bg); color: var(--jna-success); }
.jna-accountability-item__icon--finance  { background: var(--jna-info-bg);    color: var(--jna-info); }
.jna-accountability-item__icon--progress { background: var(--jna-warning-bg); color: var(--jna-warning); }
.jna-accountability-item__body   { flex: 1; min-width: 0; }
.jna-accountability-item__header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-1); }
.jna-accountability-item__title  { font-weight: 700; color: var(--jna-ink-900); font-size: 0.9375rem; }
.jna-accountability-item__desc   { font-size: 0.875rem; color: var(--jna-ink-700); line-height: 1.6; margin-bottom: var(--space-2); }
.jna-accountability-item__meta   { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.875rem; margin-bottom: var(--space-2); }
.jna-accountability-item__amount { font-weight: 700; color: var(--jna-primary-700); font-variant-numeric: tabular-nums; }
.jna-accountability-item__time   { font-size: 0.75rem; color: var(--jna-ink-400); }

/* ── §3 Maker-checker SoD notice ─────────────────────────────────────────── */
.jna-sod-notice, .jna-dialog-sod-notice {
  font-size: 0.8125rem; color: var(--jna-ink-500);
  background: var(--jna-warning-bg); border: 1px solid rgba(183,121,31,.25);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  line-height: 1.4;
}

/* ── §3 Dossier layout (M2 onboarding review) ────────────────────────────── */
.jna-dossier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.jna-dossier__actions { grid-column: 1 / -1; display: flex; gap: var(--space-3); padding-top: var(--space-4); flex-wrap: wrap; }

/* ── §3 Media / evidence grid ────────────────────────────────────────────── */
.jna-media-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .jna-media-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 900px) { .jna-media-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.jna-media-card { background: var(--jna-surface); border-radius: var(--radius); border: var(--border); overflow: hidden; display: flex; flex-direction: column; }
.jna-media-card__thumb { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; background: var(--jna-surface-3); }
.jna-media-card__thumb--placeholder { display: flex; align-items: center; justify-content: center; color: var(--jna-line); aspect-ratio: 4/3; }
.jna-media-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.jna-media-card__name { font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jna-media-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: 0.75rem; color: var(--jna-ink-400); }

.jna-evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .jna-evidence-grid { grid-template-columns: repeat(3, 1fr); } }
.jna-evidence-card { border-radius: var(--radius-sm); overflow: hidden; border: var(--border); background: var(--jna-surface); text-decoration: none; display: flex; flex-direction: column; transition: box-shadow var(--dur), border-color var(--dur); }
.jna-evidence-card:hover { box-shadow: var(--shadow-md); border-color: var(--jna-primary-500); }
.jna-evidence-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.jna-evidence-card__fallback { width: 100%; aspect-ratio: 3/4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--jna-ink-400); font-size: 0.875rem; background: var(--jna-surface-3); }
.jna-evidence-card__label { padding: var(--space-2) var(--space-3); font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-900); background: var(--jna-surface); border-top: var(--border); }

/* ── §3 Template / notification body ─────────────────────────────────────── */
.jna-template-body { font-family: 'Courier New', monospace; font-size: 0.8125rem; background: var(--jna-surface-3); border: var(--border); border-radius: var(--radius-sm); padding: var(--space-4); white-space: pre-wrap; word-break: break-word; line-height: 1.6; color: var(--jna-ink-700); }
.jna-event-type    { font-family: 'Courier New', monospace; font-size: 0.75rem; }
.jna-resource-type { font-size: 0.75rem; font-weight: 600; color: var(--jna-ink-500); background: var(--jna-surface-3); padding: 1px 4px; border-radius: var(--radius-sm); }
.jna-resource-id   { font-size: 0.75rem; color: var(--jna-ink-400); }
.jna-role-tags     { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.jna-scope-list    { padding-left: var(--space-5); font-size: 0.875rem; color: var(--jna-ink-500); display: flex; flex-direction: column; gap: var(--space-1); line-height: 1.6; }

/* ── §3 Document list ────────────────────────────────────────────────────── */
.jna-document-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.jna-document-item { background: var(--jna-surface); border-radius: var(--radius-sm); border: var(--border); padding: var(--space-4); display: flex; gap: var(--space-4); align-items: flex-start; }
.jna-document-item__icon     { color: var(--jna-ink-400); flex-shrink: 0; padding-top: 2px; }
.jna-document-item__body     { flex: 1; min-width: 0; }
.jna-document-item__title    { font-size: 0.9375rem; font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-1); }
.jna-document-item__meta     { font-size: 0.8125rem; color: var(--jna-ink-400); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jna-document-item__actions  { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; }

/* ── Blazor error UI ─────────────────────────────────────────────────────── */
#blazor-error-ui {
  background: var(--jna-error-bg); border-top: 3px solid var(--jna-error);
  color: var(--jna-error); display: none; font-size: 0.875rem;
  padding: var(--space-3) var(--space-6); position: fixed;
  bottom: 0; left: 0; right: 0; z-index: 9999;
}
#blazor-error-ui a         { color: inherit; font-weight: 600; }
#blazor-error-ui .reload   { margin-left: var(--space-4); }
#blazor-error-ui .dismiss  { float: right; cursor: pointer; }

/* ── Not found ───────────────────────────────────────────────────────────── */
.jna-not-found { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); text-align: center; }
.jna-not-found h1 { font-size: 1.5rem; font-weight: 700; color: var(--jna-ink-900); }
.jna-not-found p  { color: var(--jna-ink-500); }

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .jna-admin-nav, .jna-admin-topbar, .jna-toast-container, .jna-dossier__actions { display: none !important; }
  .jna-admin-content { overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §4.1 — Auth pages: SPLIT-SCREEN
   LEFT: brand panel (--jna-primary-900 #0B3D2E) · RIGHT: white form panel
   ═══════════════════════════════════════════════════════════════════════════ */
.jna-auth-split {
  display: flex;
  min-height: 100vh;
}

/* LEFT — dark-green brand panel (~45%) */
.jna-auth-brand {
  flex: 0 0 45%;
  background: var(--jna-primary-900);   /* #0B3D2E per spec */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8) var(--space-6);
  color: var(--jna-surface);
  position: relative;
  overflow: hidden;
}
.jna-auth-brand::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(30,169,124,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(227,160,8,.08) 0%, transparent 50%);
  pointer-events: none;
}
.jna-auth-brand__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.jna-auth-brand__wordmark {
  font-size: 1.5rem; font-weight: 700;
  color: var(--jna-surface); letter-spacing: .04em; text-decoration: none;
}
.jna-auth-brand__headline {
  font-size: 1.75rem; line-height: 1.25; font-weight: 700; color: var(--jna-surface);
}
.jna-auth-brand__sub {
  font-size: 1rem; line-height: 1.6;
  color: rgba(255,255,255,.7); max-width: 340px;
}
.jna-auth-brand__trust {
  position: relative; z-index: 1;
  font-size: 0.875rem; color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--space-4);
}

/* RIGHT — white form panel */
.jna-auth-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--jna-surface);
  overflow-y: auto;
}
.jna-auth-panel__inner {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.jna-auth-panel__header { display: flex; flex-direction: column; gap: var(--space-2); }
.jna-auth-panel__title  { font-size: 1.5rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.3; }
.jna-auth-panel__subtitle { font-size: 0.9375rem; color: var(--jna-ink-500); line-height: 1.5; }
.jna-auth-panel__footer   { text-align: center; font-size: 0.875rem; color: var(--jna-ink-400); }

/* Auth form — consistent gap */
.jna-auth-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* Mobile: brand panel → slim green header */
@media (max-width: 767px) {
  .jna-auth-split { flex-direction: column; }
  .jna-auth-brand { flex: none; padding: var(--space-4) var(--space-5); }
  .jna-auth-brand__content { gap: var(--space-3); }
  .jna-auth-brand__sub, .jna-auth-brand__trust { display: none; }
  .jna-auth-brand__headline { font-size: 1.125rem; line-height: 1.3; }
  .jna-auth-panel { padding: var(--space-6) var(--space-4); align-items: flex-start; }
}

/* Legacy auth card (fallback for any remaining centered-card pages) */
.jna-auth-page {
  min-height: 100vh; display: flex;
  align-items: flex-start; justify-content: center;
  padding: var(--space-8) var(--space-4); background: var(--jna-surface-2);
}
@media (min-width: 480px) { .jna-auth-page { align-items: center; } }
.jna-auth-card {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); border: var(--border);
  padding: var(--space-8) var(--space-6);
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.jna-auth-card .jna-logo__text { color: var(--jna-primary-600); }
.jna-auth-card__header { display: flex; flex-direction: column; gap: var(--space-2); text-align: center; }
.jna-auth-card__title  { font-size: 1.5rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.3; }
.jna-auth-card__subtitle { font-size: 0.9375rem; color: var(--jna-ink-500); }
.jna-auth-card__footer   { text-align: center; font-size: 0.875rem; color: var(--jna-ink-400); }
.jna-auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--jna-ink-400); font-size: 0.875rem; }
.jna-auth-divider::before, .jna-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--jna-line); }

/* BlankLayout wrapper — full-height centre for auth pages */
.jna-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jna-surface);
}

/* Muted / empty-state text */
.jna-muted { color: var(--jna-text-muted, #888); }

/* ── Hamburger button (mobile only — hidden at ≥1024px) ──────────────────── */
.jna-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.35rem;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: var(--space-3);
  border-radius: var(--radius-sm);
}
.jna-hamburger:hover { background: var(--jna-surface-2); }
.jna-hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--jna-text);
  border-radius: 1px;
}

/* ── Nav close button (mobile only) ──────────────────────────────────────── */
.jna-nav-close {
  display: none;
  position: absolute; top: 1rem; right: 1rem;
  width: 2rem; height: 2rem;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--jna-text);
  line-height: 1;
}

/* ── Nav backdrop (mobile only) ──────────────────────────────────────────── */
.jna-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 299;
}

/* ── Responsive admin shell ───────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .jna-hamburger  { display: flex; }
  .jna-nav-close  { display: block; }
  .jna-nav-backdrop { display: block; }
  .jna-admin-nav {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 300;
  }
  .jna-admin-nav--open { transform: translateX(0); }
  .jna-dossier { grid-template-columns: 1fr; }
  .jna-split-layout { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .jna-admin-page { padding: var(--space-4); }
  .jna-stats-grid, .jna-stat-grid { grid-template-columns: 1fr 1fr; }
  .jna-filter-bar { flex-direction: column; align-items: stretch; }
  .jna-filter-bar__search, .jna-filter-bar__select { max-width: none; min-width: 0; }
}

/* ── M19 Staff detail expand row ──────────────────────────────────────────── */
.jna-table__row--expanded { background: var(--jna-surface-2, #f8f8f8); }
.jna-table__expand-cell { padding: 1rem 1.5rem !important; }
.jna-staff-detail { font-size: 0.875rem; }
.jna-staff-detail__roles { border-top: 1px solid var(--jna-line); padding-top: 0.75rem; margin-top: 0.75rem; }
.jna-role-revoke-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jna-badge--revokable {
  cursor: pointer;
  background: var(--jna-surface-3, #e8e8e8);
  border: 1px solid var(--jna-line);
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  transition: background .15s;
}
.jna-badge--revokable:hover { background: var(--jna-danger-bg, #fde8e8); }
.jna-badge--revokable:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════════
   Doc 15 §4.2–§4.4 — Hub & Tab-panel styles
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hub tab scrolling (many tabs on project hub) ──────────────────────────── */
.jna-project-hub-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 0; }
.jna-project-hub-tabs::-webkit-scrollbar { display: none; }

/* ── Tab panel: suppress inner breadcrumb and duplicate page titles ─────────── *
   When a page component is mounted as a child inside a hub tab, its breadcrumb
   (pointing to /admin/projects) and its h1/subtitle are redundant — the hub
   header and tab label provide that context.
   Action bars inside .jna-page-header (buttons) ARE kept visible. *@
.jna-tab-panel .jna-breadcrumb { display: none; }
.jna-tab-panel .jna-page-title { display: none; }
.jna-tab-panel .jna-page-subtitle:not(.jna-keep) { display: none; }
.jna-tab-panel .jna-admin-page { padding-top: var(--space-4); }

/* ── Tab panel top spacing ──────────────────────────────────────────────────── */
.jna-tab-panel { padding-top: var(--space-4); }

/* ── Read-only notice — shown when role can't act on a tab ─────────────────── */
.jna-read-only-notice {
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface-3);
  border-left: 3px solid var(--jna-line);
  border-radius: var(--radius-sm);
  color: var(--jna-ink-500);
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}

/* ── Action bar — top of each tab panel, primary command first ──────────────── */
.jna-action-bar {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

/* ── Project hub header (§4.3) ──────────────────────────────────────────────── */
.jna-project-hub-header {
  background: var(--jna-surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.jna-project-hub-header__nav {
  margin-bottom: var(--space-3);
}

.jna-project-hub-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.jna-project-hub-header__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.jna-project-hub-header__ref {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--jna-ink-500); font-variant-numeric: tabular-nums;
}

.jna-project-hub-header__client {
  font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--jna-ink-900); margin: 0;
}

.jna-project-hub-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.jna-project-hub-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-4) 0;
}

.jna-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jna-meta-item .jna-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jna-ink-400);
}

.jna-meta-item span:not(.jna-label),
.jna-meta-item time,
.jna-meta-item .jna-money {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--jna-ink-900);
  font-variant-numeric: tabular-nums;
}

/* ── Confirm inline in hub header ─────────────────────────────────────────── */
.jna-project-hub-header .jna-confirm-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.jna-project-hub-header .jna-confirm-inline__label {
  font-size: 0.875rem;
  color: var(--jna-ink-700);
  white-space: nowrap;
}

/* ── Responsive project hub ─────────────────────────────────────────────── */
@media (max-width: 639px) {
  .jna-project-hub-header__top { flex-direction: column; }
  .jna-project-hub-header__meta { gap: var(--space-4); }
  .jna-project-hub-header .jna-confirm-inline { flex-direction: column; align-items: flex-start; }
  .jna-project-hub-header__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .jna-project-hub-header__actions > .jna-btn,
  .jna-project-hub-header__actions .jna-action-menu,
  .jna-project-hub-header__actions .jna-action-menu__trigger { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Shared components — append-only, namespaced per component (T1.B).
   Layering: action-menu (890/900) < drawer (905/910) < jna-modal-overlay (1000)
   so ConfirmDialog always stacks above an open drawer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── JnaDrawer (jna-drawer-*) — right-hand slide-over ────────────────────── */
.jna-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,27,22,.4);
  backdrop-filter: blur(2px);
  z-index: 905;
}
.jna-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--jna-drawer-width, 480px);
  max-width: 100vw;
  background: var(--jna-surface);
  box-shadow: var(--shadow-lg);
  border-left: var(--border);
  display: flex; flex-direction: column;
  z-index: 910;
  outline: none;
  animation: jna-drawer-in var(--dur) var(--ease);
}
@keyframes jna-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: none; }
}
.jna-drawer__header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border);
  background: var(--jna-surface);
}
.jna-drawer__title {
  font-size: 1.0625rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.4;
}
.jna-drawer__close {
  background: none; border: none; cursor: pointer;
  color: var(--jna-ink-400); font-size: 1rem; line-height: 1;
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); flex-shrink: 0;
}
.jna-drawer__close:hover { color: var(--jna-ink-700); background: var(--jna-surface-3); }
.jna-drawer__body {
  flex: 1; overflow-y: auto;
  padding: var(--space-5);
  -webkit-overflow-scrolling: touch;
}
.jna-drawer__footer {
  flex-shrink: 0;
  display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-top: var(--border);
  background: var(--jna-surface);
}
/* Full-width at small viewports — no horizontal page scroll at 375px (Doc 15 §6). */
@media (max-width: 480px) {
  .jna-drawer { width: 100%; border-left: none; }
}

/* ── JnaActionMenu (jna-action-menu-*) — header dropdown ─────────────────── */
.jna-action-menu { position: relative; display: inline-block; }
.jna-action-menu__caret { font-size: 0.75em; margin-left: 2px; }
.jna-action-menu__backdrop {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 890;
}
.jna-action-menu__list {
  position: absolute; top: calc(100% + var(--space-1)); right: 0;
  min-width: 220px; max-width: calc(100vw - var(--space-6));
  max-height: 60vh; overflow-y: auto;
  background: var(--jna-surface);
  border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  z-index: 900;
  animation: jna-toast-in var(--dur) var(--ease);
}
.jna-action-menu__group {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--jna-ink-400);
  padding: var(--space-2) var(--space-4) var(--space-1);
}
.jna-action-menu__group:not(:first-child) {
  border-top: var(--border);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}
.jna-action-menu__item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.875rem; color: var(--jna-ink-700);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
}
.jna-action-menu__item:hover:not(:disabled),
.jna-action-menu__item:focus-visible { background: var(--jna-surface-3); color: var(--jna-ink-900); }
.jna-action-menu__item:disabled { color: var(--jna-ink-400); cursor: not-allowed; }

/* ── JnaFileUpload (jna-file-upload-*) — direct-to-blob upload ───────────── */
.jna-file-upload { display: flex; flex-direction: column; gap: var(--space-2); }
.jna-file-upload__label { display: block; }
.jna-file-upload__dropzone {
  border: 1.5px dashed var(--jna-line);
  border-radius: var(--radius);
  background: var(--jna-surface-2);
  padding: var(--space-4);
}
.jna-file-upload__dropzone--error { border-color: var(--jna-error); }
.jna-file-upload__dropzone input[type="file"] { width: 100%; font-size: 0.875rem; }
.jna-file-upload__hint {
  font-size: 0.8125rem; color: var(--jna-ink-400); margin-top: var(--space-2); line-height: 1.5;
}
.jna-file-upload__list {
  list-style: none;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.jna-file-upload__item {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: var(--border); border-radius: var(--radius-sm);
  background: var(--jna-surface);
  font-size: 0.875rem; min-width: 0;
}
.jna-file-upload__item--failed { border-color: var(--jna-error); background: var(--jna-error-bg); }
.jna-file-upload__name {
  flex: 1; min-width: 120px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--jna-ink-900); font-weight: 500;
}
.jna-file-upload__status {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: 0.8125rem; color: var(--jna-ink-500);
}
.jna-file-upload__check { color: var(--jna-success); font-weight: 700; }
.jna-file-upload__error-text { color: var(--jna-error); }
.jna-file-upload__item-actions {
  display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex-shrink: 0;
}
.jna-file-upload__remove {
  background: none; border: none; cursor: pointer;
  color: var(--jna-ink-400); line-height: 1;
  min-width: 28px; min-height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.jna-file-upload__remove:hover { color: var(--jna-error); background: var(--jna-surface-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   Materials pipeline — M-materials (MaterialRegister, AddLineForm, RecordDeliveryForm)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Summary strip — 4 stat chips in a horizontal row ──────────────────── */
.mat-summary-strip {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.mat-summary-chip {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--jna-surface);
  border: 1px solid var(--jna-line);
  border-radius: var(--radius);
}
.mat-summary-chip--reconciled { border-color: var(--jna-primary-500); }
.mat-summary-chip--awaiting { border-color: var(--jna-accent-100); background: var(--jna-accent-100); }
.mat-summary-chip--awaiting .mat-summary-chip__amount { color: var(--jna-warning); }
.mat-summary-chip__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jna-ink-500);
}
.mat-summary-chip__amount { font-size: 1.125rem; font-weight: 700; color: var(--jna-ink-900); }
.mat-summary-chip__sub { font-size: 0.75rem; color: var(--jna-ink-400); }

/* ── Register table — card-per-line (spec §4.1) ─────────────────────────── */
.mat-register-table {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: transparent; border: none; box-shadow: none; padding: 0;
  /* Override .jna-card's overflow:hidden — it clips the per-row kebab (JnaActionMenu)
     dropdown, which opens downward and was cut off on the lower rows. This container
     is visually flattened (no border/shadow), so nothing needs clipping here. */
  overflow: visible;
}

/* ── Line row card ───────────────────────────────────────────────────────── */
.mat-line-row {
  background: var(--jna-surface);
  border: 1px solid var(--jna-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--jna-line);
}
.mat-line-row--expanded { box-shadow: var(--shadow-md); border-color: var(--jna-primary-100); }
.mat-line-row__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

/* ── Expand button ──────────────────────────────────────────────────────── */
.mat-expand-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--jna-ink-400);
  line-height: 1;
  margin-top: 2px;
}
.mat-expand-btn:hover { background: var(--jna-surface-3); color: var(--jna-ink-700); }
.mat-expand-btn__icon { font-size: 0.875rem; }

/* ── Line info ──────────────────────────────────────────────────────────── */
.mat-line-info { flex: 1 1 200px; min-width: 0; }
.mat-line-info__no {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jna-ink-400);
  display: block;
  margin-bottom: var(--space-1);
}
.mat-line-info__name { font-weight: 600; color: var(--jna-ink-900); font-size: 0.9375rem; line-height: 1.3; }
.mat-line-info__meta { font-size: 0.8125rem; color: var(--jna-ink-500); margin-top: var(--space-1); }

/* ── 4-stage pipeline — CSS rail + state dots (spec §4.2) ───────────────── */
.mat-pipeline {
  display: flex; align-items: stretch; gap: 0; flex: 2 1 520px;
}
/* arrow spans are deleted from razor; rule removed */
.mat-stage {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: 0 var(--space-3);
  text-align: center;
}
/* connecting rail between stages */
.mat-stage:not(:last-child)::after {
  content: ""; position: absolute; top: 9px; right: -1px; width: 100%;
  height: 2px; background: var(--jna-line); z-index: 0;
}
/* state dot */
.mat-stage__dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--jna-line); background: var(--jna-surface);
  margin: 0 auto var(--space-1); position: relative; z-index: 1;
}
.mat-stage--reached .mat-stage__dot { background: var(--jna-primary-500); border-color: var(--jna-primary-500); }
.mat-stage--reached::after       { background: var(--jna-primary-100); }
.mat-stage--reconciled .mat-stage__dot { background: var(--jna-success); border-color: var(--jna-success); }
.mat-stage__label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--jna-ink-400);
}
.mat-stage--reached .mat-stage__label { color: var(--jna-ink-700); }
.mat-stage__qty { font-size: 0.8125rem; color: var(--jna-ink-500); }
.mat-stage__pct { color: var(--jna-ink-400); font-size: 0.75rem; }
.mat-stage__money { font-size: 0.9375rem; font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }
.mat-stage__none  { color: var(--jna-ink-400); font-size: 0.875rem; }

/* ── Row meta (status badge + kebab) ────────────────────────────────────── */
.mat-line-row__meta { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* ── Reconciliation chip (link styled as badge) ─────────────────────────── */
a.mat-recon-chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 0.75rem;
  padding: 2px 8px;
}
a.mat-recon-chip:hover { opacity: 0.8; }

/* ── Delivery sub-rows ──────────────────────────────────────────────────── */
.mat-deliveries {
  background: var(--jna-surface-2);
  border-top: 1px solid var(--jna-line);
  padding: var(--space-4) var(--space-5);
}
.mat-deliveries__empty {
  font-size: 0.875rem;
  color: var(--jna-ink-400);
  font-style: italic;
  padding: var(--space-2) 0;
}
.mat-deliveries__table { margin: 0; }

/* ── Drawer form helpers ─────────────────────────────────────────────────── */
.mat-live-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--jna-primary-50);
  border: 1px solid var(--jna-primary-100);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.mat-live-total__label { font-size: 0.875rem; font-weight: 600; color: var(--jna-ink-700); }
.mat-live-total__amount { font-size: 1rem; font-weight: 700; color: var(--jna-ink-900); }

.mat-evidence-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--jna-info-bg);
  border: 1px solid var(--jna-info);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  color: var(--jna-info);
}
.mat-evidence-rule__icon {
  flex-shrink: 0;
  font-weight: 700;
  font-style: normal;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--jna-info);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  margin-top: 1px;
}

/* ── Responsive: stack pipeline vertically at <768px (spec §4.4) ─────────── */
@media (max-width: 767px) {
  .mat-line-row__header { flex-wrap: wrap; gap: var(--space-3); }
  .mat-line-info { flex: 1 1 100%; }
  .mat-pipeline { flex: 1 1 100%; flex-direction: column; gap: var(--space-2); }
  .mat-stage {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    text-align: left; padding: var(--space-2) 0; border-bottom: 1px dashed var(--jna-line);
  }
  .mat-stage::after { display: none; }
  .mat-stage__dot   { margin: 0 var(--space-2) 0 0; }
  .mat-line-row__meta { flex: 1 1 100%; justify-content: space-between; margin-top: var(--space-2); }
  .mat-summary-strip { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-1: Zone tab system (Amendment 1 §4.3) + form helpers + back link
   Append-only block — prefix jna-zone-* to avoid worktree conflicts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Back link (← Projects / ← All projects) ─────────────────────────────── */
.jna-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--jna-primary-600);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.jna-back-link:hover { color: var(--jna-primary-700); text-decoration: underline; }

/* ── Zone tab bar — segmented control (spec §2) ─────────────────────────── */
.jna-zone-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--jna-surface-3);
  border: 1px solid var(--jna-line);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  width: fit-content;
  max-width: 100%;
}
.jna-zone-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--jna-ink-500);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.jna-zone-tab:hover:not(.jna-zone-tab--active) { color: var(--jna-ink-700); background: rgba(255,255,255,.5); }
.jna-zone-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Active = white "raised" segment with primary-700 text */
.jna-zone-tab--active {
  background: var(--jna-surface);
  color: var(--jna-primary-700);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 639px) {
  .jna-zone-tabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .jna-zone-tabs::-webkit-scrollbar { display: none; }
  .jna-zone-tab { flex: 1 0 auto; padding: var(--space-2) var(--space-3); }
}

/* ── Sub-pill row override (project hub only) — spec §3 ──────────────────── */
/*
  Scoped override: .jna-tab inside .jna-project-hub-tabs becomes a quiet pill,
  clearly subordinate to zone tabs (smaller, no underline, pill-radius).
*/
.jna-project-hub-tabs { border-bottom: none; gap: var(--space-2); padding: 0 0 var(--space-4); }
.jna-project-hub-tabs .jna-tab {
  padding: var(--space-1) var(--space-3);
  min-height: 30px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--jna-ink-500);
  background: var(--jna-surface-2);
  border: 1px solid var(--jna-line);
  border-bottom: 1px solid var(--jna-line);
  border-radius: var(--radius-pill);
  margin-bottom: 0;
}
.jna-project-hub-tabs .jna-tab:hover { color: var(--jna-primary-700); border-color: var(--jna-primary-500); }
.jna-project-hub-tabs .jna-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.jna-project-hub-tabs .jna-tab--active {
  background: var(--jna-primary-50);
  color: var(--jna-primary-700);
  border-color: var(--jna-primary-100);
  font-weight: 600;
}

/* ── Hub panel (embedded page component, not standalone) ──────────────────── */
.jna-hub-panel { padding: var(--space-4) 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Form helpers — used by drawer forms (AddLineForm, RecordDeliveryForm,
   SiteUpdateForm) and other pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* jna-form-grid: 2-column grid; collapses to 1 column inside narrow drawers */
.jna-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 520px) { .jna-form-grid { grid-template-columns: 1fr; } }

/* Form field wrapper (label + input + error) */
.jna-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
/* Span both columns */
.jna-field--full { grid-column: 1 / -1; }

/* jna-field-hint — same role as jna-hint but bound to form field context */
.jna-field-hint {
  font-size: 0.8125rem;
  color: var(--jna-ink-400);
  margin-top: 2px;
}

/* Confirm note (grey text below confirm dialog details) */
.jna-confirm-note {
  font-size: 0.8125rem;
  color: var(--jna-ink-500);
  margin-top: var(--space-2);
}

/* ── Alert aliases → jna-banner tokens ───────────────────────────────────── */
/*
  Forms use jna-alert / jna-alert--error / jna-alert--success; CSS uses jna-banner.
  These aliases make the form alerts work without touching the form Razor files.
*/
.jna-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.jna-alert--error {
  background: var(--jna-error-bg);
  color: var(--jna-error);
  border: 1px solid var(--jna-error);
}
.jna-alert--success {
  background: var(--jna-success-bg);
  color: var(--jna-success);
  border: 1px solid var(--jna-success);
}

/* ── Inline loading and empty states ─────────────────────────────────────── */
.jna-loading-inline {
  font-size: 0.875rem;
  color: var(--jna-ink-400);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.jna-loading-inline::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(23,138,99,.2);
  border-top-color: var(--jna-primary-500);
  border-radius: 50%;
  animation: jna-spin .7s linear infinite;
  flex-shrink: 0;
}
.jna-empty-inline {
  font-size: 0.875rem;
  color: var(--jna-ink-400);
  font-style: italic;
  padding: var(--space-2) 0;
}

/* ── Site update media preview ────────────────────────────────────────────── */
.site-update-preview {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-update-preview__tile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--jna-surface-3);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.site-update-preview__type-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.site-update-preview__type-badge--photo {
  background: var(--jna-info-bg);
  color: var(--jna-info);
}
.site-update-preview__type-badge--video {
  background: var(--jna-warning-bg);
  color: var(--jna-warning);
}
.site-update-preview__name {
  font-size: 0.875rem;
  color: var(--jna-ink-700);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Banner dismiss button ────────────────────────────────────────────────── */
/* jna-banner__dismiss is referenced in ProjectHub.razor for action banners. */
.jna-banner__dismiss {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  line-height: 1;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.jna-banner__dismiss:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   FIX-3: Wave 3.1 Visual Polish — new CSS rules (spec §1–§6)
   Append-only, namespaced. No duplicates of FIX-1/FIX-2.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §6.2 Missing button variants ────────────────────────────────────────── */
/* Verify (positive confirm) — MaterialRegister.razor */
.jna-btn--success { background: var(--jna-success); color: var(--jna-surface); border-color: var(--jna-success); }
.jna-btn--success:hover:not(:disabled) { background: #17864C; border-color: #17864C; }

/* Extra-small — ProjectsCard.razor grant/revoke inline actions */
.jna-btn--xs { height: 28px; padding: 0 var(--space-2); font-size: 0.75rem; min-width: 0; }

/* Button row wrapper — MaterialRegister.razor Verify/Reject pair */
.jna-btn-row { display: flex; gap: var(--space-2); align-items: center; }

/* ── §5.5 Gold chip — needs-attention (Doc 11: gold = current/attention only) */
.jna-chip--gold {
  background: var(--jna-accent-100); border-color: var(--jna-accent-100); color: var(--jna-warning); cursor: default;
}
.jna-chip--gold::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--jna-accent-500); margin-right: var(--space-1); }
.jna-chip--gold:hover { border-color: var(--jna-accent-500); color: var(--jna-warning); }

/* ── §5.4 Onboarding stepper ─────────────────────────────────────────────── */
.jna-onboarding-stepper { display: flex; align-items: flex-start; }
.jna-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; min-width: 0; }
.jna-step__dot {
  width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  border: 2px solid var(--jna-line); background: var(--jna-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--jna-ink-400);
}
/* connector rail via ::after — razor drops the <span class="jna-step__connector"> nodes */
.jna-step:not(:last-child)::after { content:""; position:absolute; top:11px; left:50%; width:100%; height:2px; background:var(--jna-line); z-index:0; }
.jna-step--done:not(:last-child)::after { background: var(--jna-primary-100); }
.jna-step__label { font-size: 0.6875rem; font-weight: 600; color: var(--jna-ink-400); margin-top: var(--space-2); text-align: center; }
.jna-step--done .jna-step__dot { background: var(--jna-primary-500); border-color: var(--jna-primary-500); color: var(--jna-surface); }
.jna-step--done .jna-step__label { color: var(--jna-primary-700); }
.jna-step--active .jna-step__dot { border-color: var(--jna-accent-500); background: var(--jna-accent-100); color: var(--jna-warning); box-shadow: 0 0 0 4px var(--jna-accent-100); }
.jna-step--active .jna-step__label { color: var(--jna-warning); font-weight: 700; }

/* ── §5.1 Client 360 profile header ─────────────────────────────────────── */
.c360-header {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--jna-surface); border: 1px solid var(--jna-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: var(--space-5); margin-bottom: var(--space-5);
}
.c360-avatar {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%;
  background: var(--jna-primary-100); color: var(--jna-primary-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700;
}
.c360-header__id { flex: 1 1 auto; min-width: 0; }
.c360-header__name { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: var(--jna-ink-900); margin: 0; }
.c360-header__contacts {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  font-size: 0.875rem; color: var(--jna-ink-500); margin-top: var(--space-1);
}
.c360-dot { color: var(--jna-ink-400); }
.c360-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 639px) {
  .c360-header { flex-direction: column; align-items: flex-start; }
  .c360-header__actions { width: 100%; flex-wrap: wrap; }
  .c360-header__actions .jna-btn--primary { flex: 1 1 100%; }
}

/* ── §5.2 Card grid rhythm ───────────────────────────────────────────────── */
.c360-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-5);
}
@media (min-width: 768px) { .c360-grid { grid-template-columns: 1fr 1fr; } }

/* Icon slot in card headers */
.jna-card__header .jna-card__icon {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--jna-primary-50); color: var(--jna-primary-700);
  display: inline-flex; align-items: center; justify-content: center; margin-right: var(--space-2);
}
.jna-card__title { display: flex; align-items: center; }

/* ── §5.3 Money summary stat tiles ──────────────────────────────────────── */
.c360-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
.c360-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.c360-stat__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--jna-ink-500);
}
.c360-stat__value { font-size: 1.25rem; font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }
.c360-stat__value--muted { font-size: 0.9375rem; font-weight: 600; color: var(--jna-ink-500); }
@media (max-width: 400px) { .c360-stat-grid { grid-template-columns: 1fr; } }

/* ── §5.5 Project block ──────────────────────────────────────────────────── */
.jna-project-block { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--jna-line); }
.jna-project-block:last-child { border-bottom: none; }
.jna-project-block__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.jna-project-block__ref { font-weight: 700; color: var(--jna-primary-700); font-variant-numeric: tabular-nums; }
.jna-project-block__meta { display: flex; align-items: baseline; gap: var(--space-3); }
.jna-project-block__meta .jna-money { font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }

/* ── §6.4 Access section disclosure toggle ───────────────────────────────── */
.jna-access-section__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: var(--jna-primary-700); list-style: none; padding: var(--space-1) 0;
}
.jna-access-section__toggle::-webkit-details-marker { display: none; }

/* ── §5.6 Recent activity feed ───────────────────────────────────────────── */
.jna-activity-feed { list-style: none; padding: 0; margin: 0; }
.jna-activity-feed__item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--jna-line);
}
.jna-activity-feed__item:last-child { border-bottom: none; }
.jna-activity-feed__icon {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--jna-surface-3); color: var(--jna-ink-500);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.jna-activity-feed__text { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; color: var(--jna-ink-700); }
.jna-activity-feed__time { flex-shrink: 0; white-space: nowrap; font-size: 0.75rem; color: var(--jna-ink-400); font-variant-numeric: tabular-nums; }

/* ── §2 / §1.2 jna-phase-stepper spacing ─────────────────────────────────── */
.jna-phase-stepper { margin-top: var(--space-2); }

/* ── FIX-4 release blockers: previously unstyled classes (audit drift-report) ── */
.jna-btn--warning {
    background: #FEF3C7;
    color: #B7791F;
    border: 1px solid #B7791F;
}
.jna-btn--warning:hover { background: #FBBF24; color: #7C5510; }

.jna-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--jna-border, #E5E7EB);
    border-radius: 9999px;
    background: #fff;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--jna-text-muted, #4B5563);
    cursor: pointer;
    white-space: nowrap;
}
.jna-filter-chip:hover { border-color: #178A63; color: #12664A; }
.jna-filter-chip--active {
    background: #E7F4EF;
    border-color: #178A63;
    color: #12664A;
    font-weight: 600;
}
/* Filter chips lay out as a wrapping inline row at every viewport */
.jna-filter-bar, .mat-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.jna-checkbox { accent-color: #12664A; width: 1rem; height: 1rem; }

/* Money display: currency + amount never break apart mid-figure */
.jna-money { white-space: nowrap; }
.jna-money__currency { display: inline; font-size: 0.8em; color: var(--jna-text-muted, #6B7280); margin-right: 0.25em; }
.jna-money__amount { display: inline; font-variant-numeric: tabular-nums; }

/* Card title reference chip (was drift class with zero rules — caused "OnboardingAPP-…" jam) */
.jna-card__title-ref {
    margin-left: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--jna-text-muted, #6B7280);
    background: #F3F4F6;
    padding: 0.1rem 0.5rem;
    border-radius: 0.375rem;
    white-space: nowrap;
}

/* ── M2 Review Dossier — bespoke classes ────────────────────────────────────
   Everything else reuses c360-header / c360-grid / jna-card / c360-stat-grid.
   Only add what cannot be expressed by existing tokens.
   ─────────────────────────────────────────────────────────────────────────── */

/* "Not actionable" explanation shown in the header action bar */
.dossier-review-not-ready {
  font-size: 0.8125rem;
  color: var(--jna-ink-500);
  background: var(--jna-surface-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  max-width: 240px;
  line-height: 1.4;
}

/* Journey rail (redesign 2026-07-14) — replaces the old jna-onboarding-stepper
   inside the dossier. Dots + filled connectors; done = brand green, active = amber
   ring, upcoming = muted. The note line says whose move it is. */
.jna-dj { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.jna-dj__track {
  display: flex; align-items: flex-start;
  list-style: none; margin: 0; padding: 0;
}
.jna-dj__step {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
/* connector — drawn from each step (except the first) back to the previous dot */
.jna-dj__step + .jna-dj__step::before {
  content: ""; position: absolute;
  top: 13px; right: 50%; width: 100%; height: 3px;
  background: var(--jna-surface-3); border-radius: 2px;
  margin-right: 14px; z-index: 0;
}
.jna-dj__step--done + .jna-dj__step::before,
.jna-dj__step--done + .jna-dj__step--done::before {
  background: var(--jna-primary-500);
}
.jna-dj__dot {
  width: 28px; height: 28px; border-radius: 50%; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-weight: 700;
  background: var(--jna-surface-2); color: var(--jna-ink-300);
  border: 2px solid var(--jna-border-default);
  transition: all .2s var(--ease, ease);
}
.jna-dj__step--done .jna-dj__dot {
  background: var(--jna-primary-500); border-color: var(--jna-primary-500); color: #fff;
}
.jna-dj__step--active .jna-dj__dot {
  background: #fff; border-color: var(--jna-warning-500, #F59E0B);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.jna-dj__step--active .jna-dj__dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--jna-warning-500, #F59E0B);
}
.jna-dj__label {
  font-size: 0.75rem; font-weight: 600; color: var(--jna-ink-400);
  text-align: center; line-height: 1.2; max-width: 90px;
}
.jna-dj__step--done .jna-dj__label   { color: var(--jna-ink-500); }
.jna-dj__step--active .jna-dj__label { color: var(--jna-ink-700); }
.jna-dj__note {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px dashed var(--jna-border-subtle);
  font-size: 0.8125rem; color: var(--jna-ink-500); line-height: 1.5;
}
.jna-dj__note-you { color: var(--jna-ink-700); font-weight: 600; }
.jna-dj__note--ready { color: var(--jna-primary-700); font-weight: 600; }
@media (max-width: 720px) {
  .jna-dj__label { display: none; }
  .jna-dj__step--active .jna-dj__label { display: block; }
}

/* Dossier cards (redesign 2026-07-14, wave 7b) — richer card language for the
   review dossier: icon-tiled headers, document-style panels for IDs and deeds,
   fact chips for the brief, a quote block for the proposal. Sections manage
   their own padding, so the base card padding is zeroed. */
.jna-dcard { padding: 0; display: flex; flex-direction: column; }
.jna-dcard__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--jna-border-subtle);
}
.jna-dcard__icon {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.jna-dcard__icon svg { width: 20px; height: 20px; }
.jna-dcard__icon--identity  { background: #E8F3EC; color: #2E7D32; }
.jna-dcard__icon--intent    { background: #EDF0FB; color: #4356C0; }
.jna-dcard__icon--plot      { background: #FBF3E4; color: #B45309; }
.jna-dcard__icon--money     { background: #E4F3F1; color: #0F766E; }
.jna-dcard__icon--agreement { background: #F3EDFB; color: #7C3AED; }
.jna-dcard__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jna-dcard__title { font-size: 1rem; font-weight: 700; color: var(--jna-ink-900); margin: 0; line-height: 1.3; }
.jna-dcard__sub   { font-size: 0.75rem; color: var(--jna-ink-400); margin-top: 1px; }

/* In-card hero — the one fact that matters (project type, plot location) */
.jna-dcard__hero { padding: var(--space-4) var(--space-5) var(--space-2); }
.jna-dcard__hero-title { font-size: 1.1875rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.3; letter-spacing: -0.01em; }
.jna-dcard__hero-sub {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 0.8125rem; color: var(--jna-ink-500);
}
.jna-dcard__hero-sub svg { width: 14px; height: 14px; color: var(--jna-ink-400); flex: none; }

/* Fact chips (budget band, timeline, size, financing) */
.jna-dcard__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); }
.jna-dcard-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--jna-surface-2, #f6f8f7); border: 1px solid var(--jna-border-subtle);
  font-size: 0.8125rem; font-weight: 600; color: var(--jna-ink-600);
}
.jna-dcard-chip--accent { background: var(--jna-primary-50); border-color: #BFDCC6; color: var(--jna-primary-700, #1B5E20); }

/* Labelled facts (identity, proposal meta) */
.jna-dcard__facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) var(--space-5); margin: 0;
}
.jna-dcard__facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jna-dcard__facts dt {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--jna-ink-400);
}
.jna-dcard__facts dd { margin: 0; font-size: 0.9375rem; color: var(--jna-ink-600); overflow-wrap: anywhere; }
.jna-dcard__facts dd.jna-dcard__fact-strong { font-weight: 650; color: var(--jna-ink-900); }
@media (max-width: 400px) { .jna-dcard__facts { grid-template-columns: 1fr; } }

/* Document panel — renders an ID / title deed as a physical document */
.jna-dcard__doc {
  margin: var(--space-2) var(--space-5) var(--space-4);
  border: 1px dashed var(--jna-border-default, #d5ded8);
  border-radius: 12px;
  padding: var(--space-4);
  background: linear-gradient(140deg, var(--jna-surface-2, #f7faf8) 0%, var(--jna-surface, #fff) 70%);
}
.jna-dcard__doc-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--jna-ink-400);
}
.jna-dcard__doc-label svg { width: 14px; height: 14px; }
.jna-dcard__doc-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--jna-ink-900); margin-top: 6px; overflow-wrap: anywhere;
}
.jna-dcard__doc-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
  font-size: 0.8125rem; color: var(--jna-ink-500);
}
.jna-dcard__doc-meta strong { color: var(--jna-ink-700); font-weight: 600; }
.jna-dcard__doc-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* Quote block — the proposal's money moment */
.jna-dcard__quote { padding: var(--space-4) var(--space-5) var(--space-3); }
.jna-dcard__quote-label {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--jna-ink-400);
}
.jna-dcard__quote-amount {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.015em;
  color: var(--jna-ink-900); line-height: 1.2; margin-top: 2px;
}
.jna-dcard__quote-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Quoted note block (scope notes, special requirements) */
.jna-dcard__note {
  margin: 0 var(--space-5) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface-2, #f6f8f7);
  border-left: 3px solid var(--jna-primary-500, #2E7D32);
  border-radius: 0 10px 10px 0;
  font-size: 0.875rem; color: var(--jna-ink-600); line-height: 1.55;
}
.jna-dcard__note-label {
  display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--jna-ink-400); margin-bottom: 4px;
}

/* Attached file rows */
.jna-dcard__files { padding: 0 var(--space-5) var(--space-4); display: flex; flex-direction: column; }
.jna-dcard__file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.jna-dcard__file + .jna-dcard__file { border-top: 1px solid var(--jna-border-subtle); }
.jna-dcard__file-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--jna-surface-2, #f6f8f7); color: var(--jna-ink-400);
  display: inline-flex; align-items: center; justify-content: center;
}
.jna-dcard__file-icon svg { width: 17px; height: 17px; }
.jna-dcard__file-name { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--jna-ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Friendly empty state */
.jna-dcard__empty {
  padding: var(--space-6) var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  text-align: center; color: var(--jna-ink-400); font-size: 0.875rem; line-height: 1.55;
  flex: 1; justify-content: center;
}
.jna-dcard__empty svg { width: 28px; height: 28px; opacity: 0.45; }
.jna-dcard__empty p { margin: 0; max-width: 34ch; }

/* Generic padded section for anything else the cards host (forms, banners) */
.jna-dcard__body { padding: var(--space-4) var(--space-5); }
.jna-dcard__body--top-line { border-top: 1px solid var(--jna-border-subtle); }

/* Agreed-amount tile inside the Proposal card (post-approval, immutable) */
.dossier-agreed-amount-section {
  background: var(--jna-primary-50);
  border-top-color: var(--jna-primary-100);
}
.dossier-agreed-amount-value {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--jna-primary-700);
  margin-top: var(--space-2);
}
.dossier-agreed-amount-note {
  font-size: 0.8125rem;
  color: var(--jna-primary-600);
  margin: var(--space-1) 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   M15 — Collaboration / RFI threads (2026-07-12)
   The page shipped referencing these classes but they were never added
   to the token layer — the accordion header rendered as a raw browser
   button ("pure HTML" report). Block: thread accordion + reply chain.
   ═══════════════════════════════════════════════════════════════════ */

.jna-threads { display: flex; flex-direction: column; }

.jna-thread { padding: 0; }

.jna-thread__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.jna-thread__header:hover { background: var(--jna-surface-3); }
.jna-thread__header:focus-visible {
  outline: 2px solid var(--jna-focus);
  outline-offset: -2px;
}

.jna-thread__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--jna-ink-900);
}

.jna-thread__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8125rem;
  width: 100%;
}
.jna-thread__chevron {
  margin-left: auto;
  color: var(--jna-ink-400);
  font-size: 0.75rem;
}

.jna-thread__body {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--jna-line);
}

.jna-thread__op {
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: var(--jna-primary-50);
  border-left: 3px solid var(--jna-primary-600);
  border-radius: var(--radius-sm, 6px);
  color: var(--jna-ink-700);
  white-space: pre-wrap;
}
.jna-thread__op p { margin: 0; }

.jna-thread__replies {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.jna-reply {
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface-2);
  border: 1px solid var(--jna-line);
  border-radius: var(--radius-sm, 6px);
}
.jna-reply__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: 0.8125rem;
}
.jna-reply__author { font-weight: 600; color: var(--jna-primary-700); }
.jna-reply__body { margin: 0; color: var(--jna-ink-700); white-space: pre-wrap; }

.jna-thread__reply-input { margin-top: var(--space-4); }

/* Inline notices (info strip inside a card — lighter than jna-banner) */
.jna-notice {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8125rem;
  margin: 0;
}
.jna-notice--info  { background: var(--jna-info-bg);  color: var(--jna-info); }
.jna-notice--muted { background: var(--jna-surface-3); color: var(--jna-ink-500); }

/* Form-card variant used by inline create forms (RFI new-thread etc.) */
.jna-card--form { background: var(--jna-surface-2); }

/* KPI row (financing summary etc.) */
.jna-kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-4) 0;
}
.jna-kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.jna-kpi__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jna-ink-500);
}
.jna-kpi__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jna-ink-900);
  font-variant-numeric: tabular-nums;
}

/* Notification template body preview */
.jna-template-body {
  padding: var(--space-4);
  background: var(--jna-surface-2);
  border: 1px solid var(--jna-line);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 0;
}

/* Expandable table detail row content (inspections notes etc.) */
.jna-detail-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--jna-surface-2);
  border-left: 3px solid var(--jna-line);
  font-size: 0.875rem;
  color: var(--jna-ink-700);
}

/* ── AD-2 Global search (⌘K command palette) ─────────────────────────────── */

.jna-cmdk-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    padding: 7px 10px;
    border: 1px solid var(--jna-line);
    border-radius: 10px;
    background: var(--jna-surface-2);
    color: var(--jna-ink-400);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.jna-cmdk-trigger:hover, .jna-cmdk-trigger:focus-visible {
    border-color: var(--jna-primary-600);
    background: var(--jna-surface);
    box-shadow: 0 0 0 3px rgba(23, 138, 99, 0.12);
}
.jna-cmdk-trigger svg { flex-shrink: 0; }
.jna-cmdk-trigger__label {
    flex: 1;
    text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-cmdk-trigger__kbd {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid var(--jna-line);
    border-radius: 5px;
    background: var(--jna-surface);
    color: var(--jna-ink-400);
    flex-shrink: 0;
}
@media (max-width: 760px) {
    .jna-cmdk-trigger { width: auto; }
    .jna-cmdk-trigger__label, .jna-cmdk-trigger__kbd { display: none; }
}

.jna-cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 22, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1100;
    animation: jna-cmdk-fade 0.12s ease;
}
@keyframes jna-cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
.jna-cmdk {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, calc(100vw - 32px));
    background: var(--jna-surface);
    border: 1px solid var(--jna-line);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 26, 22, 0.32);
    z-index: 1101;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: jna-cmdk-pop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes jna-cmdk-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.985); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.jna-cmdk__input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--jna-line);
}
.jna-cmdk__input-icon { color: var(--jna-ink-400); flex-shrink: 0; }
.jna-cmdk__input {
    border: none;
    padding: 14px 0;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    flex: 1;
    min-width: 0;
    background: transparent;
    color: var(--jna-ink-900);
}
.jna-cmdk__input::placeholder { color: var(--jna-ink-400); }
.jna-cmdk__esc {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 7px;
    border: 1px solid var(--jna-line);
    border-radius: 5px;
    background: var(--jna-surface-2);
    color: var(--jna-ink-400);
    cursor: pointer;
    flex-shrink: 0;
}
.jna-cmdk__esc:hover { color: var(--jna-ink-900); border-color: var(--jna-ink-400); }

.jna-cmdk__idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px 18px;
}
.jna-cmdk__idle-title { font-size: 0.9rem; font-weight: 600; color: var(--jna-ink-500); }
.jna-cmdk__idle-examples { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.jna-cmdk__idle-chip {
    padding: 4px 10px;
    border: 1px dashed var(--jna-line);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--jna-ink-400);
    background: var(--jna-surface-2);
}
.jna-cmdk__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 30px 18px;
    text-align: center;
    color: var(--jna-ink-500);
    font-size: 0.9rem;
}
.jna-cmdk__empty svg { color: var(--jna-ink-400); opacity: 0.6; margin-bottom: 6px; }
.jna-cmdk__empty p { margin: 0; }
.jna-cmdk__empty-sub { font-size: 0.8rem; color: var(--jna-ink-400); }

.jna-cmdk__results {
    max-height: 46vh;
    overflow-y: auto;
    padding: 8px;
}
.jna-cmdk__group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 10px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jna-ink-400);
}
.jna-cmdk__group-label span {
    background: var(--jna-surface-3);
    border-radius: 999px;
    padding: 0 7px;
    line-height: 16px;
    font-weight: 600;
}
.jna-cmdk__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.jna-cmdk__item--active { background: var(--jna-primary-50); }
.jna-cmdk__item-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--jna-primary-600); color: #fff;
    font-size: 0.72rem; font-weight: 700;
}
.jna-cmdk__item-tile {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--jna-primary-50); color: var(--jna-primary-600);
    border: 1px solid var(--jna-line);
}
.jna-cmdk__item--active .jna-cmdk__item-tile { background: var(--jna-surface); }
.jna-cmdk__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jna-cmdk__item-name {
    font-weight: 600; color: var(--jna-ink-900); font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-cmdk__item-sub  {
    font-size: 0.78rem; color: var(--jna-ink-500);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-cmdk__item-phase {
    flex-shrink: 0;
    font-size: 0.7rem; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    background: var(--jna-surface-3); color: var(--jna-ink-500);
}
.jna-cmdk__item-go {
    flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 6px;
    display: none; align-items: center; justify-content: center;
    background: var(--jna-primary-600); color: #fff;
    font-size: 0.7rem;
}
.jna-cmdk__item--active .jna-cmdk__item-go { display: inline-flex; }
.jna-cmdk__footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--jna-line);
    font-size: 0.72rem;
    color: var(--jna-ink-400);
    background: var(--jna-surface-2);
    align-items: center;
}
.jna-cmdk__footer span { display: inline-flex; align-items: center; gap: 4px; }
.jna-cmdk__footer kbd {
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 1px 5px;
    border: 1px solid var(--jna-line);
    border-radius: 4px;
    background: var(--jna-surface);
    color: var(--jna-ink-500);
}

/* ── Notification bell (in-app inbox) ────────────────────────────────────── */

.jna-bell { position: relative; display: inline-flex; }
.jna-bell__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--jna-line);
    border-radius: 8px;
    background: var(--jna-surface);
    cursor: pointer;
    font-size: 0.95rem;
    transition: border-color 120ms ease;
}
.jna-bell__button:hover { border-color: var(--jna-green); }
.jna-bell__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--jna-error);
    color: var(--jna-white);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.jna-bell__backdrop { position: fixed; inset: 0; z-index: 1090; }
.jna-bell__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    background: var(--jna-white);
    border: 1px solid var(--jna-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 26, 22, 0.22);
    z-index: 1091;
    overflow: hidden;
}
.jna-bell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--jna-line);
    font-weight: 600;
    font-size: 0.85rem;
}
.jna-bell__mark-all {
    border: none;
    background: none;
    color: var(--jna-green);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
}
.jna-bell__mark-all:hover { text-decoration: underline; }
.jna-bell__empty {
    padding: 20px 14px;
    color: var(--jna-charcoal-soft);
    font-size: 0.85rem;
    text-align: center;
}
.jna-bell__list { max-height: 50vh; overflow-y: auto; }
.jna-bell__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--jna-border-light);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.jna-bell__item:last-child { border-bottom: none; }
.jna-bell__item:hover { background: var(--jna-primary-50); }
.jna-bell__item--unread { background: var(--jna-surface-2); }
.jna-bell__item--unread .jna-bell__item-title::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--jna-gold);
    vertical-align: middle;
}
.jna-bell__item-title { font-weight: 600; font-size: 0.85rem; color: var(--jna-charcoal); }
.jna-bell__item-snippet {
    font-size: 0.78rem;
    color: var(--jna-charcoal-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jna-bell__item-time { font-size: 0.7rem; color: var(--jna-charcoal-soft); }

/* ═══ Money tab redesign (2026-07-13) ══════════════════════════════════════ */

/* Wallet pipeline: Money in → Spent → Reserved → Available to spend */
.jna-wallet-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--jna-surface-2);
  border: 1px solid var(--jna-line);
  border-radius: 10px;
  margin-bottom: var(--space-4);
}
.jna-wallet-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 130px;
  flex: 1 1 130px;
}
.jna-wallet-step__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jna-ink-500);
}
.jna-wallet-step__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jna-ink-900);
  font-variant-numeric: tabular-nums;
}
.jna-wallet-step__value--big { font-size: 1.75rem; }
.jna-wallet-step__sub { font-size: 0.8rem; color: var(--jna-ink-400); }
.jna-wallet-arrow {
  align-self: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--jna-ink-400);
  flex: 0 0 auto;
}
.jna-wallet-step--result {
  border-left: 3px solid var(--jna-primary-500);
  padding-left: var(--space-4);
}
.jna-wallet-flow--overdrawn { border-color: var(--jna-error); background: var(--jna-error-bg); }
.jna-wallet-flow--overdrawn .jna-wallet-step--result { border-left-color: var(--jna-error); }
.jna-wallet-flow--overdrawn .jna-wallet-step--result .jna-wallet-step__value { color: var(--jna-error); }

/* Expected-in note: money in flight, deliberately OUTSIDE the pipeline */
.jna-wallet-expected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--jna-info-bg);
  border-radius: 8px;
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
  color: var(--jna-ink-700);
}
.jna-wallet-expected__label { font-weight: 600; color: var(--jna-info); }
.jna-wallet-expected__item { white-space: normal; }

/* Where-from / where-went, side by side (stack on narrow viewports) */
.jna-wallet-breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}

/* Collapsible detail sections under the action queue */
.jna-collapse { margin-bottom: var(--space-3); }
.jna-collapse__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface);
  border: 1px solid var(--jna-line);
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  color: var(--jna-ink-900);
  text-align: left;
  cursor: pointer;
}
.jna-collapse__summary:hover { background: var(--jna-surface-3); }
.jna-collapse__chevron { transition: transform 0.15s ease; color: var(--jna-ink-500); }
.jna-collapse--open .jna-collapse__chevron { transform: rotate(90deg); }
.jna-collapse__hint { font-weight: 400; font-size: 0.8rem; color: var(--jna-ink-400); }
.jna-collapse--open .jna-collapse__summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Ledger filter chips */
.jna-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.jna-filter-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--jna-line);
  border-radius: 999px;
  background: var(--jna-surface);
  color: var(--jna-ink-700);
  font-size: 0.8rem;
  cursor: pointer;
}
.jna-filter-chip:hover { background: var(--jna-surface-3); }
.jna-filter-chip--active {
  background: var(--jna-primary-50);
  border-color: var(--jna-primary-500);
  color: var(--jna-primary-700);
  font-weight: 600;
}

/* In prose contexts the stacked currency-over-amount layout breaks line flow —
   lay the money out horizontally inside notes, banners and step footnotes. */
.jna-wallet-expected .jna-money,
.jna-wallet-step__sub .jna-money,
.jna-banner .jna-money,
.jna-table__cell .jna-money {
  flex-direction: row;
  align-items: baseline;
  gap: 0.25em;
}

/* "+ New" drawer forms — single-column stack with breathing room */
.jna-drawer-form { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-drawer-form__intro {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface-2);
  border-left: 3px solid var(--jna-primary-500);
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--jna-ink-700);
}

/* ── Account centre (Doc 10 self-service) ─────────────────────────────────── */

/* Identity masthead */
.jna-acct-hero {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--jna-primary-50, #E8F3EA) 0%, var(--jna-surface, #fff) 70%);
  border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.jna-acct-hero__avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-600, #2E7D32); color: #fff;
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.28);
}
.jna-acct-hero__avatar-skeleton { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.jna-acct-hero__who { flex: 1; min-width: 200px; }
.jna-acct-hero__name { font-size: 1.35rem; font-weight: 700; color: var(--jna-ink-900); margin: 0; line-height: 1.2; }
.jna-acct-hero__contact { margin: 2px 0 var(--space-2); color: var(--jna-ink-500); font-size: var(--text-sm); }
.jna-acct-hero__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.jna-acct-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--jna-surface, #fff); border: 1px solid var(--jna-line);
  font-size: 0.75rem; font-weight: 600; color: var(--jna-ink-700, #33413a);
}
.jna-acct-chip svg { color: var(--jna-primary-600, #2E7D32); }
.jna-acct-chip--ok { color: var(--jna-primary-600, #2E7D32); border-color: var(--jna-primary-600, #2E7D32); }
.jna-acct-chip--warn { color: var(--jna-warning-700, #B45309); border-color: var(--jna-warning-500, #F59E0B); }
.jna-acct-hero__meta { display: flex; gap: var(--space-5); margin: 0; }
.jna-acct-hero__meta dt { font-size: 0.7rem; color: var(--jna-ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.jna-acct-hero__meta dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900); }

/* Section tabs — underline style with icons */
.jna-acct-tabs {
  display: flex; gap: var(--space-1);
  border-bottom: 2px solid var(--jna-line);
  margin-bottom: var(--space-4);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jna-acct-tabs::-webkit-scrollbar { display: none; }
.jna-acct-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: -2px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--jna-ink-500); cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.jna-acct-tab:hover { color: var(--jna-ink-900); }
.jna-acct-tab--active { color: var(--jna-primary-600, #2E7D32); border-bottom-color: var(--jna-primary-600, #2E7D32); }

/* Section headers inside cards */
.jna-acct-section-head { margin-bottom: var(--space-3); }
.jna-acct-section-head .jna-form-hint { margin-top: 2px; }
.jna-acct-section-head--split {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3); flex-wrap: wrap;
}

/* Rows: icon + text + actions */
.jna-account-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--jna-line); flex-wrap: wrap;
  border-radius: var(--radius-sm, 6px);
}
.jna-account-row:last-child { border-bottom: none; }
.jna-account-row--active { background: var(--jna-primary-50, #E8F3EA); border-bottom-color: transparent; }
.jna-account-row__icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-50, #E8F3EA); color: var(--jna-primary-600, #2E7D32);
}
.jna-account-row--active .jna-account-row__icon { background: var(--jna-surface, #fff); }
.jna-account-row__text { flex: 1; min-width: 180px; }
.jna-account-row__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--jna-ink-900); font-size: var(--text-sm);
}
.jna-account-row__value { display: block; color: var(--jna-ink-500); font-size: var(--text-sm); margin-top: 1px; }
.jna-account-row__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Empty state + danger zone */
.jna-acct-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); text-align: center;
  color: var(--jna-ink-500); font-size: var(--text-sm);
}
.jna-acct-empty svg { color: var(--jna-primary-600, #2E7D32); opacity: 0.5; }
.jna-acct-dangerzone { border-left: 3px solid var(--jna-error, #C0392B); }

.jna-totp-qr { width: 180px; height: 180px; margin: var(--space-3) auto; }
.jna-totp-qr svg { width: 100%; height: 100%; }

/* ── Topbar user menu ──────────────────────────────────────────────────────── */
.jna-usermenu { position: relative; }
.jna-usermenu__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: none; border: 1px solid transparent;
  font: inherit; cursor: pointer; color: var(--jna-ink-700, #33413a);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.jna-usermenu__trigger:hover,
.jna-usermenu__trigger--open { background: var(--jna-primary-50, #E8F3EA); border-color: var(--jna-line); }
.jna-usermenu__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-600, #2E7D32); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.jna-usermenu__avatar--lg { width: 40px; height: 40px; font-size: 0.9rem; }
.jna-usermenu__name {
  font-size: var(--text-sm); font-weight: 500; max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-usermenu__chevron { transition: transform 0.15s ease; color: var(--jna-ink-500); }
.jna-usermenu__trigger--open .jna-usermenu__chevron { transform: rotate(180deg); }
.jna-usermenu__backdrop { position: fixed; inset: 0; z-index: 90; }
.jna-usermenu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 95;
  width: 264px; background: var(--jna-surface, #fff);
  border: var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 27, 22, 0.16);
  overflow: hidden;
  animation: jna-usermenu-in 0.14s ease;
}
@keyframes jna-usermenu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jna-usermenu__identity {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--jna-primary-50, #E8F3EA);
  border-bottom: 1px solid var(--jna-line);
}
.jna-usermenu__who { min-width: 0; }
.jna-usermenu__who-label { display: block; font-size: 0.68rem; color: var(--jna-ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.jna-usermenu__who-value {
  display: block; font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-usermenu__item {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  width: 100%; padding: var(--space-2) var(--space-3);
  background: none; border: none; font: inherit; font-size: var(--text-sm);
  color: var(--jna-ink-900); text-decoration: none; cursor: pointer; text-align: left;
}
.jna-usermenu__item:hover { background: var(--jna-primary-50, #E8F3EA); }
.jna-usermenu__item svg { color: var(--jna-ink-500); flex-shrink: 0; }
.jna-usermenu__item--danger { color: var(--jna-error, #C0392B); }
.jna-usermenu__item--danger svg { color: var(--jna-error, #C0392B); }
.jna-usermenu__hint { flex-basis: 100%; padding-left: 24px; font-size: 0.72rem; color: var(--jna-ink-500); }
.jna-usermenu__divider { height: 1px; background: var(--jna-line); margin: 4px 0; }

@media (max-width: 640px) {
  .jna-usermenu__name { display: none; }
  .jna-acct-hero { padding: var(--space-4); }
  .jna-acct-hero__meta { gap: var(--space-4); }
}

/* ── Operations dashboard (redesign 2026-07-14) ───────────────────────────── */
.jna-dash-head { margin-bottom: var(--space-5); }

.jna-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.jna-dash-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
  background: var(--jna-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.jna-dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 27, 22, 0.1);
  border-color: var(--jna-primary-600);
}
.jna-dash-kpi__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-50); color: var(--jna-primary-600);
  margin-bottom: var(--space-2);
}
.jna-dash-kpi--hot .jna-dash-kpi__icon { background: var(--jna-warning-bg, #FCF3E3); color: var(--jna-accent-600, #B7791F); }
.jna-dash-kpi--hot { border-top: 3px solid var(--jna-accent-500); }
.jna-dash-kpi__value {
  font-size: 1.9rem; font-weight: 700; line-height: 1.1;
  color: var(--jna-ink-900); font-variant-numeric: tabular-nums;
}
.jna-dash-kpi__label { font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-700); }
.jna-dash-kpi__go {
  font-size: 0.75rem; font-weight: 600; color: var(--jna-primary-600);
  margin-top: var(--space-2); opacity: 0; transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.jna-dash-kpi:hover .jna-dash-kpi__go { opacity: 1; transform: translateX(0); }

.jna-dash-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 980px) { .jna-dash-columns { grid-template-columns: 1fr; } }

.jna-dash-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.jna-dash-section-head .jna-form-hint { margin-top: 2px; }
.jna-dash-count {
  min-width: 26px; height: 26px; border-radius: 999px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-accent-500); color: var(--jna-ink-900);
  font-size: 0.8rem; font-weight: 700;
}

/* Task rows in "Needs your attention" */
.jna-dash-task {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--jna-line);
  flex-wrap: wrap;
}
.jna-dash-task:last-child { border-bottom: none; }
.jna-dash-task__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-50); color: var(--jna-primary-600);
}
.jna-dash-task__text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 1px; }
.jna-dash-task__title { font-size: var(--text-sm); color: var(--jna-ink-700); }
.jna-dash-task__title strong { color: var(--jna-ink-900); }
.jna-dash-task__sub { font-size: 0.78rem; color: var(--jna-ink-500); }
.jna-dash-age {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
.jna-dash-age--green { background: var(--jna-success-bg, #E8F3EA); color: var(--jna-primary-700); }
.jna-dash-age--amber { background: var(--jna-warning-bg, #FCF3E3); color: #8a5a12; }
.jna-dash-age--red   { background: var(--jna-error-bg, #FBEAE8); color: var(--jna-error); }

.jna-dash-clear {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); text-align: center;
  color: var(--jna-ink-500); font-size: var(--text-sm);
}
.jna-dash-clear__icon { color: var(--jna-primary-600); }
.jna-dash-clear p { margin: 0; }

/* Activity timeline */
.jna-dash-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.jna-dash-timeline::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 2px; background: var(--jna-line); border-radius: 2px;
}
.jna-dash-timeline__row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) 0; position: relative;
}
.jna-dash-timeline__dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: var(--jna-surface); border: 3px solid var(--jna-primary-600);
  margin-top: 3px; position: relative; z-index: 1;
}
.jna-dash-timeline__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jna-dash-timeline__event { font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900); }
.jna-dash-timeline__detail {
  font-size: 0.78rem; color: var(--jna-ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-dash-timeline__time { flex-shrink: 0; font-size: 0.72rem; color: var(--jna-ink-400); margin-top: 2px; }

/* ── Dashboard enrichment (2026-07-14): pulse, funnel, phases, deltas ─────── */
.jna-dash-kpi__delta {
  font-size: 0.72rem; font-weight: 600; color: var(--jna-primary-600);
  margin-top: 2px;
}
.jna-dash-sla {
  display: inline-block; margin-left: var(--space-2);
  font-size: 0.72rem; font-weight: 600; color: var(--jna-warning);
}

.jna-dash-pulse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--jna-primary-700) 0%, var(--jna-primary-600) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}
.jna-dash-pulse__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jna-dash-pulse__label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}
.jna-dash-pulse__value { font-size: 1.25rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.jna-dash-pulse__sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.75); }
.jna-dash-pulse__item--alert {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 200, 100, 0.6);
  border-radius: 10px;
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
}
.jna-dash-pulse__item--alert .jna-dash-pulse__value { color: #FFD98A; }

.jna-dash-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.jna-dash-funnel { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.jna-dash-funnel__stage { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; }
.jna-dash-funnel__count { grid-row: span 2; font-size: 1.1rem; font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; text-align: right; }
.jna-dash-funnel__bar {
  height: 10px; border-radius: 5px; min-width: 6px;
  background: linear-gradient(90deg, var(--jna-primary-600), var(--jna-primary-500, #2AA275));
}
.jna-dash-funnel__label { font-size: 0.75rem; color: var(--jna-ink-500); }

.jna-dash-phases { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.jna-dash-phases__row { display: flex; align-items: center; gap: var(--space-2); }
.jna-dash-phases__name { width: 92px; flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--jna-ink-700); }
.jna-dash-phases__track { flex: 1; height: 8px; border-radius: 4px; background: var(--jna-surface-3); overflow: hidden; }
.jna-dash-phases__fill { height: 100%; border-radius: 4px; background: var(--jna-primary-600); min-width: 2px; }
.jna-dash-phases__count { width: 24px; text-align: right; font-size: 0.78rem; font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }

/* ── Project 360 overview (hub redesign 2026-07-14) ───────────────────────── */
.jna-360-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.jna-360-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface);
  border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.jna-360-kpi__label {
  font-size: 0.66rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--jna-ink-400);
}
.jna-360-kpi__value { font-size: 1.3rem; font-weight: 700; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }
.jna-360-kpi__value--text { font-size: 1rem; line-height: 1.3; }
.jna-360-kpi__sub { font-size: 0.72rem; color: var(--jna-ink-500); }
.jna-360-kpi--alert { border-left: 3px solid var(--jna-error); }
.jna-360-kpi--alert .jna-360-kpi__value { color: var(--jna-error); }
.jna-360-kpi--work { border-left: 3px solid var(--jna-accent-500); }

.jna-360-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 980px) { .jna-360-columns { grid-template-columns: 1fr; } }
.jna-360-main, .jna-360-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.jna-360-main .jna-card, .jna-360-side .jna-card { margin: 0; }

.jna-360-money { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.jna-360-money > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.jna-360-money dt { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-360-money dd { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900); font-variant-numeric: tabular-nums; }
.jna-360-money__total { border-top: 1px solid var(--jna-line); padding-top: 6px; margin-top: 2px; }
.jna-360-money__total dd { font-size: 1.05rem; font-weight: 700; color: var(--jna-primary-700); }

.jna-360-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2);
}
.jna-360-photos img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--jna-line);
}

.jna-link--btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }

.jna-project-hub-header__client-link { color: inherit; text-decoration: none; }
.jna-project-hub-header__client-link:hover { color: var(--jna-primary-700); text-decoration: underline; }
.jna-project-hub-header__ref { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Hub mobile fixes: zone tabs fill + shrink, stepper stays swipeable */
@media (max-width: 640px) {
  .jna-zone-tabs { width: 100%; }
  .jna-zone-tab { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jna-phase-stepper__step { min-width: 68px; }
  .jna-phase-stepper__label { font-size: 0.62rem; }
}

/* Sub-pill workload badge (project hub) */
.jna-pill-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--jna-accent-500); color: var(--jna-ink-900);
  font-size: 0.68rem; font-weight: 700; line-height: 1;
}

/* Lifecycle controls card (360 overview) — danger actions separated */
.jna-lifecycle-card .jna-action-group { margin-bottom: 0; }
.jna-action-group--danger {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--jna-error);
}

/* Money figures never wrap mid-amount in 360 cards */
.jna-360-money dd, .jna-360-kpi__sub, .jna-360-kpi__value { white-space: nowrap; }
.jna-360-kpi__value--text { white-space: normal; }
.jna-360-photos img[src=""] { display: none; }

/* Action menu: left-aligned variant (trigger near the left content edge) */
.jna-action-menu__list--left { left: 0; right: auto; }

/* ── RFI chat (WhatsApp-style, redesign 2026-07-14) ──────────────────────── */
.jna-chat {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: var(--border); border-radius: var(--radius);
  background: var(--jna-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 62vh; max-height: 74vh;
}
.jna-chat__list {
  border-right: var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--jna-surface);
}
.jna-chat__list-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3);
  border-bottom: var(--border);
  position: sticky; top: 0; background: var(--jna-surface); z-index: 1;
}
.jna-chat__list-title { font-weight: 700; color: var(--jna-ink-900); }
.jna-chat__empty, .jna-chat__nothing {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); text-align: center;
  color: var(--jna-ink-500); font-size: var(--text-sm);
}
.jna-chat__empty svg, .jna-chat__nothing svg { color: var(--jna-ink-400); opacity: 0.55; }
.jna-chat__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px var(--space-3);
  background: none; border: none; border-bottom: 1px solid var(--jna-line);
  font: inherit; text-align: left; cursor: pointer;
}
.jna-chat__item:hover { background: var(--jna-surface-3); }
.jna-chat__item--active { background: var(--jna-primary-50); }
.jna-chat__item-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.jna-chat__item-dot--open     { background: var(--jna-success); }
.jna-chat__item-dot--resolved { background: var(--jna-info, #2A6F97); }
.jna-chat__item-dot--closed   { background: var(--jna-ink-400); }
.jna-chat__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jna-chat__item-title {
  font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-chat__item-preview {
  font-size: 0.76rem; color: var(--jna-ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-chat__item-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0;
  font-size: 0.68rem; color: var(--jna-ink-400);
}
.jna-chat__item-count {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-600); color: #fff;
  font-size: 0.64rem; font-weight: 700;
}

.jna-chat__pane { display: flex; flex-direction: column; min-width: 0; background: var(--jna-surface-2); }
.jna-chat__nothing { margin: auto; }
.jna-chat__head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-3);
  border-bottom: var(--border); background: var(--jna-surface);
  flex-wrap: wrap;
}
.jna-chat__back {
  display: none;
  background: none; border: none; font-size: 1.1rem; cursor: pointer;
  color: var(--jna-ink-500); padding: 4px 8px; border-radius: 8px;
}
.jna-chat__back:hover { background: var(--jna-surface-3); }
.jna-chat__head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jna-chat__head-title {
  font-weight: 700; color: var(--jna-ink-900); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jna-chat__head-sub { font-size: 0.72rem; color: var(--jna-ink-500); }

.jna-chat__messages {
  flex: 1; overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 6px;
}
.jna-chat__day {
  align-self: center;
  font-size: 0.68rem; font-weight: 600; color: var(--jna-ink-500);
  background: var(--jna-surface-3);
  padding: 3px 12px; border-radius: 999px;
  margin: var(--space-2) 0;
}
.jna-chat__bubble-row { display: flex; }
.jna-chat__bubble-row--mine { justify-content: flex-end; }
.jna-chat__bubble {
  max-width: min(76%, 520px);
  background: var(--jna-surface);
  border: 1px solid var(--jna-line);
  border-radius: 14px 14px 14px 4px;
  padding: 7px 12px 5px;
  box-shadow: 0 1px 1px rgba(15, 27, 22, 0.05);
}
.jna-chat__bubble--mine {
  background: var(--jna-primary-600); border-color: var(--jna-primary-600);
  border-radius: 14px 14px 4px 14px;
}
.jna-chat__bubble--question { border-left: 3px solid var(--jna-accent-500); }
.jna-chat__bubble-tag {
  display: inline-block;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--jna-accent-600, #B7791F); margin-bottom: 2px;
}
.jna-chat__bubble-author { display: block; font-size: 0.7rem; font-weight: 700; color: var(--jna-primary-700); margin-bottom: 1px; }
.jna-chat__bubble-body { margin: 0; font-size: var(--text-sm); color: var(--jna-ink-900); white-space: pre-wrap; word-break: break-word; }
.jna-chat__bubble--mine .jna-chat__bubble-body { color: #fff; }
.jna-chat__bubble-time { display: block; text-align: right; font-size: 0.62rem; color: var(--jna-ink-400); margin-top: 2px; }
.jna-chat__bubble--mine .jna-chat__bubble-time { color: rgba(255,255,255,0.75); }

.jna-chat__composer {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: var(--border); background: var(--jna-surface);
}
.jna-chat__composer--closed {
  justify-content: center; color: var(--jna-ink-500); font-size: var(--text-sm);
  padding: var(--space-3);
}
.jna-chat__input {
  flex: 1; resize: none;
  border: 1px solid var(--jna-line); border-radius: 20px;
  padding: 9px 14px; font: inherit; font-size: var(--text-sm);
  outline: none; background: var(--jna-surface-2);
  max-height: 100px;
}
.jna-chat__input:focus { border-color: var(--jna-primary-600); background: var(--jna-surface); }
.jna-chat__send {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-600); color: #fff; border: none; cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.jna-chat__send:hover:not(:disabled) { background: var(--jna-primary-700); transform: scale(1.05); }
.jna-chat__send:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 900px) {
  .jna-chat { grid-template-columns: 1fr; }
  .jna-chat__pane { display: none; }
  .jna-chat--conversation .jna-chat__list { display: none; }
  .jna-chat--conversation .jna-chat__pane { display: flex; }
  .jna-chat__back { display: inline-block; }
}

/* ── Client decisions Q&A cards (redesign 2026-07-14) ─────────────────────── */
.jna-decision-list { display: flex; flex-direction: column; gap: var(--space-3); }
.jna-dq { border-left: 3px solid var(--jna-line); }
.jna-dq--waiting  { border-left-color: var(--jna-accent-500); }
.jna-dq--answered { border-left-color: var(--jna-success); }
.jna-dq__meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.jna-dq__ref {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--jna-ink-500); background: var(--jna-surface-3);
  padding: 2px 8px; border-radius: 999px;
}
.jna-dq__meta-sub { font-size: 0.75rem; color: var(--jna-ink-500); }
.jna-dq__q, .jna-dq__a { display: flex; gap: 10px; align-items: flex-start; }
.jna-dq__icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-primary-50); color: var(--jna-primary-600);
  margin-top: 2px;
}
.jna-dq__icon--client { background: var(--jna-success-bg); color: var(--jna-success); }
.jna-dq__q-text, .jna-dq__a-text { flex: 1; min-width: 0; }
.jna-dq__question { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900); line-height: 1.45; }
.jna-dq__notes { margin: 3px 0 0; font-size: 0.8rem; color: var(--jna-ink-500); }
.jna-dq__a {
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--jna-success-bg); border-radius: 12px;
}
.jna-dq__a-label {
  display: block; font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--jna-success);
}
.jna-dq__answer { margin: 1px 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-900); }
.jna-dq__a-time { font-size: 0.7rem; color: var(--jna-ink-500); }
.jna-dq__waiting {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--space-3);
  font-size: 0.8rem; color: var(--jna-ink-500);
}
.jna-dq__pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--jna-accent-500);
  animation: jna-dq-pulse 1.6s ease-in-out infinite;
}
@keyframes jna-dq-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ── Milestone roadmap (redesign 2026-07-14) ─────────────────────────────── */
.jna-ms-summary {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: var(--space-4);
}
.jna-ms-summary__stat { display: flex; flex-direction: column; }
.jna-ms-summary__value { font-size: 1.4rem; font-weight: 700; color: var(--jna-ink-900); line-height: 1.1; }
.jna-ms-summary__of { font-size: 0.9rem; font-weight: 600; color: var(--jna-ink-400); }
.jna-ms-summary__label { font-size: 0.7rem; color: var(--jna-ink-500); text-transform: uppercase; letter-spacing: 0.05em; }
.jna-ms-summary__bar-wrap { flex: 1; min-width: 160px; }
.jna-ms-summary__bar { height: 10px; border-radius: 5px; background: var(--jna-surface-3); overflow: hidden; }
.jna-ms-summary__fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--jna-primary-600), var(--jna-primary-500)); transition: width 0.4s ease; }
.jna-ms-summary__bar-label { font-size: 0.72rem; color: var(--jna-ink-500); }
.jna-ms-summary__next { font-size: 0.8rem; color: var(--jna-ink-500); }
.jna-ms-summary__next strong { color: var(--jna-ink-900); }

.jna-ms-road { list-style: none; margin: 0; padding: 0; position: relative; }
.jna-ms-road::before {
  content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px;
  width: 2px; background: var(--jna-line); border-radius: 2px;
}
.jna-ms-item { display: flex; gap: var(--space-3); padding: var(--space-2) 0; position: relative; }
.jna-ms-item__node {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jna-surface); border: 2px solid var(--jna-line);
  color: #fff; margin-top: var(--space-2);
  position: relative; z-index: 1;
}
.jna-ms-item--achieved .jna-ms-item__node { background: var(--jna-success); border-color: var(--jna-success); }
.jna-ms-item--missed   .jna-ms-item__node { background: var(--jna-error); border-color: var(--jna-error); }
.jna-ms-item--active   .jna-ms-item__node {
  border-color: var(--jna-accent-500);
  box-shadow: 0 0 0 4px rgba(227, 160, 8, 0.18);
  animation: jna-dq-pulse 1.8s ease-in-out infinite;
}
.jna-ms-item__card { flex: 1; min-width: 0; }
.jna-ms-item__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.jna-ms-item__name { font-weight: 700; color: var(--jna-ink-900); }
.jna-ms-item__desc { margin: var(--space-1) 0 0; font-size: 0.82rem; color: var(--jna-ink-500); }
.jna-ms-item__meta { margin-top: var(--space-1); font-size: 0.76rem; color: var(--jna-ink-500); display: flex; gap: 5px; flex-wrap: wrap; }
.jna-ms-item__early { color: var(--jna-success); font-weight: 600; }
.jna-ms-item__late  { color: var(--jna-error); font-weight: 600; }
.jna-ms-item__planner { color: var(--jna-ink-400); }

/* ── Progress reports (redesign 2026-07-14) ──────────────────────────────── */
.jna-pr-summary {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--jna-surface); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: var(--space-4);
}
.jna-pr-summary__gauge { flex: 1; min-width: 220px; }
.jna-pr-summary__pct { font-size: 1.5rem; font-weight: 700; color: var(--jna-primary-700); }
.jna-pr-summary__bar { height: 10px; border-radius: 5px; background: var(--jna-surface-3); overflow: hidden; margin: 4px 0; }
.jna-pr-summary__fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--jna-primary-600), var(--jna-primary-500)); }
.jna-pr-summary__label { font-size: 0.75rem; color: var(--jna-ink-500); }
.jna-pr-summary__side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 0.8rem; color: var(--jna-ink-500); }
.jna-pr-bar { height: 6px; border-radius: 3px; background: var(--jna-surface-3); overflow: hidden; margin: var(--space-2) 0; }
.jna-pr-bar__fill { height: 100%; border-radius: 3px; background: var(--jna-primary-600); }
.jna-pr-slider { width: 100%; accent-color: var(--jna-primary-600); }

/* Report meta row: spaced, wrapping */
.jna-report-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Client 360 hero actions */
.c360-hero-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }