/* ═══════════════════════════════════════════════════════════════════════════
   JNA Design System v2 — client-web (Client Portal)
   Spec: 11-JNA-Design-System-Spec.md
   Mobile-first · WCAG 2.1 AA · Inter font
   Breakpoints: sm 640 / md 768 / lg 1024 / xl 1280
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1 Design Tokens ────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --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 */
  --jna-accent-500:#E3A008; --jna-accent-100:#FBEFCB;
  /* Ink */
  --jna-ink-900:#0F1B16; --jna-ink-700:#2B3A33; --jna-ink-500:#5A6B62; --jna-ink-400:#8A988F;
  --jna-line:#E3E8E5;
  /* Surfaces */
  --jna-surface:#FFFFFF; --jna-surface-2:#F7FAF8; --jna-surface-3:#EEF3F0;
  /* 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;
  /* Backward-compat aliases — existing pages use these names */
  --jna-green:#178A63; --jna-green-dark:#12664A; --jna-green-light:#1EA97C;
  --jna-gold:#E3A008; --jna-gold-dark:#B7791F;
  --jna-white:#FFFFFF; --jna-charcoal:#2B3A33; --jna-charcoal-soft:#5A6B62;
  --jna-bg:#F7FAF8; --jna-border:#E3E8E5;
  /* 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; --space-16:96px;
  /* Layout */
  --topbar-height:60px; --nav-width:264px; --content-max-w:1280px; --touch-min:44px;
  /* Typography */
  --font-sans:'Inter',system-ui,sans-serif; --font-base:'Inter',system-ui,sans-serif;
  --text-caption:12px; --text-sm:13px; --text-base:14px; --text-body-l:16px;
  --text-h3:17px; --text-h2:20px; --text-h1:24px; --text-display:32px;
  /* Old aliases */
  --text-xl:20px; --text-lg:17px; --text-2xl:24px; --text-3xl:32px;
  /* Radii */
  --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;
  /* Borders / elevation / motion */
  --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:0 4px 12px rgba(15,27,22,.08);
  --focus-ring:0 0 0 3px rgba(30,169,124,.35);
  --ease:cubic-bezier(.2,.6,.2,1); --dur:160ms;
}

/* ── 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-base);
  font-size: var(--text-base);
  color: var(--jna-ink-700);
  background-color: var(--jna-surface-2);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Accessibility utilities ─────────────────────────────────────────────── */
.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-700); color: var(--jna-surface);
  font-weight: 600; text-decoration: none;
  border-radius: var(--radius-sm); z-index: 9999; transition: top .2s;
}
.jna-skip-link:focus { top: var(--space-4); }

:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
  border-radius: var(--radius-sm);
}

/* ── §2 App shell ────────────────────────────────────────────────────────── */
/* Portal shell: fixed sidebar + topbar + scrollable content */
.jna-shell { min-height: 100vh; display: flex; flex-direction: column; }

.jna-portal-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.jna-sidebar {
  width: var(--nav-width);
  background: var(--jna-surface);
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* Mobile: off-canvas */
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
  overflow-y: auto;
}
.jna-sidebar--open { transform: translateX(0); }
@media (min-width: 1024px) {
  .jna-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none;
  }
}

/* Sidebar wordmark */
.jna-sidebar__brand {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: var(--border);
  flex-shrink: 0;
}
.jna-sidebar__wordmark {
  font-size: 18px;
  font-weight: 700;
  color: var(--jna-primary-700);
  letter-spacing: .04em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.jna-sidebar__nav { flex: 1; padding: var(--space-3) 0; overflow-y: auto; }
.jna-sidebar__footer {
  padding: var(--space-3) 0 var(--space-4);
  border-top: var(--border);
  flex-shrink: 0;
}

/* ── Main content wrapper ────────────────────────────────────────────────── */
.jna-portal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* On mobile the sidebar is off-canvas, main takes full width */
}

/* ── Top navigation bar — surface colored (NOT green) ───────────────────── */
.jna-topbar {
  background: var(--jna-surface);
  border-bottom: var(--border);
  height: var(--topbar-height);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.jna-topbar__inner {
  max-width: 100%; height: 100%;
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5);
}

/* Hamburger toggle — mobile only */
.jna-topbar__nav-toggle {
  display: flex; align-items: center; justify-content: center;
  width: var(--touch-min); height: var(--touch-min); min-width: var(--touch-min);
  background: none; border: none; cursor: pointer; color: var(--jna-ink-500);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur) var(--ease);
}
.jna-topbar__nav-toggle:hover { background: var(--jna-surface-3); }
@media (min-width: 1024px) { .jna-topbar__nav-toggle { display: none; } }

.jna-topbar__hamburger,
.jna-topbar__hamburger::before,
.jna-topbar__hamburger::after {
  display: block; width: 20px; height: 2px;
  background: var(--jna-ink-700); border-radius: 2px; position: relative; transition: .2s;
}
.jna-topbar__hamburger::before,
.jna-topbar__hamburger::after { content: ""; position: absolute; left: 0; }
.jna-topbar__hamburger::before { top: -6px; }
.jna-topbar__hamburger::after  { top: 6px; }

/* Page context in topbar */
.jna-topbar__context { flex: 1; font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-topbar__title { font-weight: 600; color: var(--jna-ink-900); }

/* User section */
.jna-topbar__user-section {
  display: flex; align-items: center; gap: var(--space-3); margin-left: auto;
}
.jna-topbar__user {
  font-size: var(--text-sm);
  color: var(--jna-ink-700);
  font-weight: 500;
}
.jna-topbar__auth { font-size: var(--text-sm); }
.jna-topbar__tagline { font-size: var(--text-sm); color: var(--jna-ink-500); flex: 1; display: none; }
@media (min-width: 640px) { .jna-topbar__tagline { display: block; } }

/* Topbar logout button */
.jna-topbar__logout {
  background: none;
  border: var(--border);
  color: var(--jna-ink-700);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  min-height: 32px;
  transition: background-color var(--dur) var(--ease);
}
.jna-topbar__logout:hover { background: var(--jna-surface-3); }

/* Logo (used in topbar on mobile) */
.jna-logo { text-decoration: none; flex-shrink: 0; }
.jna-logo__text {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--jna-primary-700);
  letter-spacing: .04em;
}

/* ── Nav overlay (mobile) ────────────────────────────────────────────────── */
.jna-nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,27,22,.4); z-index: 190;
}
.jna-nav-overlay--visible { display: block; }
@media (min-width: 1024px) { .jna-nav-overlay { display: none !important; } }

/* ── Content area ────────────────────────────────────────────────────────── */
.jna-portal-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  background: var(--jna-surface-2);
}
@media (min-width: 640px) {
  .jna-portal-content { padding: var(--space-6); }
}

/* ── Portal page wrapper ─────────────────────────────────────────────────── */
.jna-portal-body {
  display: flex;
  flex: 1;
  position: relative;
}
/* Legacy alias — sidebar used to live here */
.jna-portal-sidenav {
  width: var(--nav-width);
  background: var(--jna-surface);
  border-right: var(--border);
  min-height: calc(100vh - var(--topbar-height));
  flex-shrink: 0;
  overflow-y: auto;
  transform: translateX(-100%);
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  z-index: 90;
  transition: transform var(--dur) var(--ease);
}
.jna-portal-sidenav--open { transform: translateX(0); }
@media (min-width: 1024px) {
  .jna-portal-sidenav {
    position: sticky;
    transform: none;
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
  }
}

.jna-portal-page { max-width: var(--content-max-w); display: flex; flex-direction: column; gap: var(--space-8); }
.jna-portal-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.jna-portal-page__title {
  font-size: var(--text-h1);
  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: var(--text-base);
}
.jna-portal-page__nav-row { margin-bottom: var(--space-2); }

/* ── Page header component ───────────────────────────────────────────────── */
.jna-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.jna-page-header__left { display: flex; flex-direction: column; gap: var(--space-1); }
.jna-page-header__title {
  font-size: var(--text-h1);
  font-weight: 700;
  color: var(--jna-ink-900);
  line-height: 1.3;
}
.jna-page-header__subtitle { color: var(--jna-ink-500); font-size: var(--text-base); }
.jna-page-header__action { flex-shrink: 0; }

/* ── Section heading ─────────────────────────────────────────────────────── */
.jna-section-heading {
  font-size: var(--text-h3); font-weight: 600; color: var(--jna-ink-900);
  margin-bottom: var(--space-4);
}
.jna-section-heading__count { font-weight: 400; color: var(--jna-ink-500); margin-left: var(--space-2); }
.jna-section-heading--verified {
  color: var(--jna-success);
  display: flex; align-items: center; gap: var(--space-2);
}

/* ── §3 Nav links ────────────────────────────────────────────────────────── */
.jna-nav { padding: var(--space-2) 0; }
.jna-nav__list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.jna-nav__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  height: 40px;
  text-decoration: none;
  color: var(--jna-ink-500);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  margin: 0 var(--space-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  border-left: 3px solid transparent;
}
.jna-nav__item:hover { background: var(--jna-surface-3); color: var(--jna-ink-700); }
.jna-nav__item--active,
.jna-nav__item.active {
  background: var(--jna-primary-50);
  color: var(--jna-primary-700);
  font-weight: 600;
  border-left-color: var(--jna-primary-600);
}
.jna-nav__icon { flex-shrink: 0; color: inherit; }
.jna-nav__label { flex: 1; }

/* Nav group label */
.jna-nav__group { padding: var(--space-3) 0 var(--space-1); }
.jna-nav__group-label {
  display: block;
  padding: 0 var(--space-4);
  margin: 0 var(--space-2) var(--space-1);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--jna-ink-400);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Nav divider + logout */
.jna-nav__divider {
  margin: var(--space-2) var(--space-3);
  border-bottom: var(--border);
  list-style: none;
}
.jna-nav__item--logout {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  color: var(--jna-ink-500);
}
.jna-nav__item--logout:hover,
.jna-nav__item--logout:focus-visible {
  color: var(--jna-ink-700);
  background: var(--jna-surface-3);
}
.jna-nav__item--logout:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ── §3 Buttons ──────────────────────────────────────────────────────────── */
.jna-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; /* default md */
  min-width: 40px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-base); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.jna-btn:disabled, .jna-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* 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--link {
  background: transparent; color: var(--jna-primary-600);
  border-color: transparent; padding: 0; height: auto; min-width: 0;
  text-decoration: underline;
}
.jna-btn--link:hover:not(:disabled) { color: var(--jna-primary-700); }

/* Sizes */
.jna-btn--sm { height: 32px; font-size: var(--text-sm); padding: 0 var(--space-3); }
.jna-btn--md { height: 40px; }
.jna-btn--lg { height: 48px; font-size: var(--text-body-l); padding: 0 var(--space-5); }

/* Modifiers */
.jna-btn--full { width: 100%; }
.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--icon {
  padding: 0; width: 40px; height: 40px; min-width: 40px;
  background: transparent; border: none; cursor: pointer;
  color: var(--jna-ink-500); border-radius: var(--radius-sm);
}
.jna-btn--icon:hover { background: var(--jna-surface-3); color: var(--jna-ink-700); }

/* ── §3 Form elements ────────────────────────────────────────────────────── */
.jna-form-field  { display: flex; flex-direction: column; gap: var(--space-1); }
.jna-form-group  { display: flex; flex-direction: column; gap: var(--space-1); }
.jna-label       { font-size: var(--text-caption); font-weight: 500; color: var(--jna-ink-500); text-transform: uppercase; letter-spacing: .04em; }
.jna-form-label  { font-size: var(--text-caption); font-weight: 500; color: var(--jna-ink-500); text-transform: uppercase; letter-spacing: .04em; }
.jna-required    { color: var(--jna-error); margin-left: 2px; }
.jna-hint        { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-form-hint   { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-field-error { font-size: var(--text-sm); color: var(--jna-error); margin-top: var(--space-1); }
.jna-form-error  { font-size: var(--text-sm); color: var(--jna-error); margin-top: var(--space-1); }

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

.jna-input--invalid { border-color: var(--jna-error) !important; }
.jna-input--valid   { border-color: var(--jna-success) !important; }
.jna-input--otp {
  font-size: var(--text-h2); font-weight: 700; letter-spacing: .5em;
  text-align: center; padding: var(--space-4); height: auto;
}

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

/* ── §3 Cards ────────────────────────────────────────────────────────────── */
.jna-card {
  background: var(--jna-surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.jna-card--sm { padding: var(--space-3); }
.jna-card--lg { padding: var(--space-6); }
.jna-card__heading {
  font-size: var(--text-h3); font-weight: 600;
  color: var(--jna-ink-900); margin-bottom: var(--space-4);
}

/* ── §3 Stat cards ───────────────────────────────────────────────────────── */
.jna-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
@media (min-width: 640px) { .jna-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.jna-stat-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-stat-card--highlight { background: var(--jna-primary-50); border-color: var(--jna-primary-100); }
.jna-stat-card__label {
  font-size: var(--text-caption); font-weight: 500;
  color: var(--jna-ink-500);
  text-transform: uppercase; letter-spacing: .04em;
}
.jna-stat-card__value {
  font-size: var(--text-h1); font-weight: 700;
  color: var(--jna-ink-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.jna-stat-card__value--primary { color: var(--jna-primary-700); font-size: var(--text-display); }
.jna-stat-card__sub { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-stat-card__delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--text-caption); font-weight: 600;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}
.jna-stat-card__delta--positive { background: var(--jna-success-bg); color: var(--jna-success); }
.jna-stat-card__delta--negative { background: var(--jna-error-bg); color: var(--jna-error); }

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

/* ── §3 Banners / alerts ─────────────────────────────────────────────────── */
.jna-banner {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); line-height: 1.6;
  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 Spinner ──────────────────────────────────────────────────────────── */
@keyframes jna-spin { to { transform: rotate(360deg); } }
.jna-spinner {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid rgba(23,138,99,.2); border-top-color: var(--jna-primary-600);
  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; }

/* ── §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-600); border-radius: 4px;
  transition: width .3s ease;
}
.jna-progress-bar--small  { height: 4px; margin-top: var(--space-1); }
.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: var(--text-sm); color: var(--jna-ink-500); margin-top: var(--space-1); }

/* ── §3 Toast notifications ──────────────────────────────────────────────── */
.jna-toast-container {
  position: fixed; top: var(--space-5); right: var(--space-5);
  z-index: 1000; display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 360px; width: calc(100% - var(--space-8));
}
.jna-toast {
  background: var(--jna-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  border-left: 4px solid;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); animation: jna-toast-in .2s 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--warning { border-color: var(--jna-warning); }
.jna-toast__body    { flex: 1; min-width: 0; }
.jna-toast__title   { font-size: var(--text-sm); font-weight: 700; color: var(--jna-ink-900); display: block; }
.jna-toast__message { font-size: var(--text-sm); color: var(--jna-ink-500); margin-top: var(--space-1); }
.jna-toast__dismiss {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--jna-ink-400); flex-shrink: 0;
  min-width: 24px; min-height: 24px; display: flex; align-items: center;
}
.jna-toast__dismiss:hover { color: var(--jna-ink-700); }

/* ── §3 Empty state ──────────────────────────────────────────────────────── */
.jna-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-6); color: var(--jna-ink-500);
  font-size: var(--text-base);
}
.jna-empty-state--compact { padding: var(--space-5) 0; }
.jna-empty-state svg { color: var(--jna-line); margin-bottom: var(--space-3); }
.jna-empty-state h2, .jna-empty-state h3 {
  font-size: var(--text-h3); font-weight: 600; color: var(--jna-ink-900);
  margin-bottom: var(--space-1);
}
.jna-empty-state p { max-width: 360px; margin: 0 auto; color: var(--jna-ink-500); }

/* ── §3 Skeleton loading ─────────────────────────────────────────────────── */
@keyframes jna-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.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: 1em; }
.jna-skeleton--title  { height: 1.5em; }
.jna-skeleton--line   { height: 1rem; margin-bottom: var(--space-2); }
.jna-skeleton--short  { max-width: 60%; }
.jna-skeleton--bar    { height: 8px; }
.jna-skeleton--card   { height: 120px; }
.jna-skeleton--media-card { height: 180px; border-radius: var(--radius-lg); }
.jna-skeleton-card    { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }

/* ── §4.1 Auth — split-screen ────────────────────────────────────────────── */
/* Legacy auth card layout (preserved for backward compat) */
.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);
  padding: var(--space-8) var(--space-6);
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
@media (min-width: 480px) {
  .jna-auth-card { padding: var(--space-10) var(--space-8); }
}
.jna-auth-card .jna-logo__text { color: var(--jna-primary-600); font-size: var(--text-h2); }
.jna-auth-card__header  { display: flex; flex-direction: column; gap: var(--space-2); text-align: center; }
.jna-auth-card__title   { font-size: var(--text-h2); font-weight: 700; color: var(--jna-ink-900); line-height: 1.3; }
.jna-auth-card__subtitle{ font-size: var(--text-base); color: var(--jna-ink-500); }
.jna-auth-card__footer  { text-align: center; font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-auth-form  { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--jna-ink-500); font-size: var(--text-sm);
}
.jna-auth-divider::before, .jna-auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--jna-line);
}

/* New split-screen layout */
.jna-auth-split {
  display: flex;
  min-height: 100vh;
}
.jna-auth-brand {
  flex: 0 0 45%;
  background: var(--jna-primary-900);
  color: var(--jna-surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10) var(--space-8);
  gap: var(--space-6);
}
.jna-auth-brand__wordmark {
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jna-surface);
}
.jna-auth-brand__headline {
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--jna-surface);
  line-height: 1.4;
}
.jna-auth-brand__tagline {
  font-size: var(--text-base);
  color: rgba(255,255,255,.7);
  line-height: 1.6;
}
.jna-auth-form-panel {
  flex: 1;
  background: var(--jna-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}
.jna-auth-form-panel__inner {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.jna-auth-form-panel__title { font-size: var(--text-h2); font-weight: 700; color: var(--jna-ink-900); }
.jna-auth-form-panel__subtitle { font-size: var(--text-base); color: var(--jna-ink-500); }

/* Mobile: brand panel as a compact 80px banner */
@media (max-width: 767px) {
  .jna-auth-split { flex-direction: column; }
  .jna-auth-brand {
    flex: 0 0 80px;
    flex-direction: row;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    gap: var(--space-4);
  }
  .jna-auth-brand__wordmark { font-size: var(--text-h2); }
  .jna-auth-brand__headline,
  .jna-auth-brand__tagline { display: none; }
  .jna-auth-form-panel { padding: var(--space-6) var(--space-4); }
}

/* Loading state */
.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-500);
}

/* ── Text helpers ────────────────────────────────────────────────────────── */
.jna-text-muted   { color: var(--jna-ink-500); }
.jna-text-success { color: var(--jna-success); }
.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); }

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.jna-dashboard-summary { }
.jna-summary-card {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
  border: var(--border);
}
.jna-summary-card__phase    { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.jna-summary-card__offering { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-summary-card__progress { display: flex; flex-direction: column; gap: var(--space-2); }
.jna-summary-card__pct      { font-size: var(--text-display); font-weight: 700; color: var(--jna-primary-700); }
.jna-summary-card__pct-label{ font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-summary-card__next-milestone {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--jna-ink-500);
}
.jna-summary-card__next-milestone svg { color: var(--jna-accent-500); }
.jna-summary-card__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
}
.jna-summary-card__meta dt { font-weight: 600; color: var(--jna-ink-500); }
.jna-summary-card__meta dd { color: var(--jna-ink-700); }

/* Phase badge */
.jna-phase-badge {
  display: inline-block; padding: 2px var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--text-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.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-gold-dark); }
.jna-phase-badge--completed    { background: var(--jna-success-bg); color: var(--jna-success); }

/* Quick links */
.jna-quick-links__heading {
  font-size: var(--text-h3); font-weight: 600; color: var(--jna-ink-900); margin-bottom: var(--space-4);
}
.jna-quick-links__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
@media (min-width: 480px) { .jna-quick-links__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 768px) { .jna-quick-links__grid { grid-template-columns: repeat(3, 1fr); } }
.jna-quick-link-card {
  background: var(--jna-surface); border: var(--border);
  border-radius: var(--radius); padding: var(--space-4);
  text-decoration: none; color: var(--jna-ink-700);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; text-align: center;
  min-height: 88px; justify-content: center;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.jna-quick-link-card svg { color: var(--jna-primary-600); }
.jna-quick-link-card:hover { border-color: var(--jna-primary-600); background: var(--jna-primary-50); }

/* Dashboard status area */
.jna-dashboard-status {
  display: flex; flex-direction: column; gap: var(--space-5);
}
@media (min-width: 600px) {
  .jna-dashboard-status { flex-direction: row; gap: var(--space-6); }
  .jna-dashboard-status__main { flex: 1; }
  .jna-dashboard-status__progress { width: 220px; flex-shrink: 0; }
}
.jna-dashboard-status__phase { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.jna-dashboard-status__progress { display: flex; flex-direction: column; gap: var(--space-2); }
.jna-progress-ring-label { font-size: var(--text-display); font-weight: 700; color: var(--jna-primary-700); }

/* Progress report cards */
.jna-progress-report-card { display: flex; flex-direction: column; gap: var(--space-3); }
.jna-progress-report-card__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.jna-progress-report-card__week { font-weight: 600; color: var(--jna-ink-900); }
.jna-progress-report-card__summary { font-size: var(--text-sm); color: var(--jna-ink-700); line-height: 1.6; }
.jna-progress-report-card__by { font-size: var(--text-caption); color: var(--jna-ink-500); }

/* ── Overview page ────────────────────────────────────────────────────────── */
.jna-overview-hero {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6); border: var(--border);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.jna-overview-hero__pct  { font-size: var(--text-h2); font-weight: 700; color: var(--jna-primary-700); }
.jna-overview-hero__progress { display: flex; flex-direction: column; gap: var(--space-2); }
.jna-overview-hero__next { font-size: var(--text-sm); color: var(--jna-ink-500); }

/* Project hero header */
.jna-project-hero {
  background: linear-gradient(135deg, var(--jna-primary-600) 0%, var(--jna-primary-900) 100%);
  border-radius: var(--radius-lg); padding: var(--space-6);
  color: var(--jna-surface); margin-bottom: var(--space-6);
}
.jna-project-hero__ref {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .08em;
  color: rgba(255,255,255,.75); text-transform: uppercase; margin-bottom: var(--space-2);
}
.jna-project-hero__title {
  font-size: var(--text-h1); font-weight: 700; color: var(--jna-surface); margin: 0 0 var(--space-3);
}
.jna-project-hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jna-project-hero__badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600;
  background: rgba(255,255,255,.18); color: var(--jna-surface);
  border: 1px solid rgba(255,255,255,.3);
}
.jna-project-hero__badge--gold {
  background: var(--jna-accent-500); color: var(--jna-ink-900); border-color: transparent;
}

/* ── Phase timeline ──────────────────────────────────────────────────────── */
.jna-phase-timeline {
  list-style: none; display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.jna-phase-timeline::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0;
  width: 2px; background: var(--jna-line);
}
.jna-phase-item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; position: relative; }
.jna-phase-item__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 { background: var(--jna-success); }
.jna-phase-item--active    .jna-phase-item__marker { background: var(--jna-accent-500); }
.jna-phase-item--planned   .jna-phase-item__marker { background: var(--jna-surface-2); border: 2px solid var(--jna-line); }
.jna-phase-item__pulse {
  width: 12px; height: 12px; border-radius: 50%; background: white;
  animation: jna-pulse 1.5s ease-in-out infinite;
}
@keyframes jna-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } }
.jna-phase-item__content { flex: 1; padding-top: var(--space-2); }
.jna-phase-item__name { font-size: var(--text-base); font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-1); }
.jna-phase-item__desc { font-size: var(--text-sm); color: var(--jna-ink-500); margin-bottom: var(--space-2); }
.jna-phase-item__dates{ font-size: var(--text-sm); color: var(--jna-ink-500); margin-bottom: var(--space-2); }

/* ── Progress feed ───────────────────────────────────────────────────────── */
.jna-progress-feed { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); }
.jna-progress-report {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-5); border: var(--border);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.jna-progress-report__header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
.jna-progress-report__meta   { display: flex; flex-direction: column; gap: var(--space-1); }
.jna-progress-report__week   { font-size: var(--text-base); font-weight: 700; color: var(--jna-primary-700); }
.jna-progress-report__date   { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-progress-report__status { display: flex; align-items: center; gap: var(--space-3); }
.jna-progress-report__pct    { font-size: var(--text-xl); font-weight: 700; color: var(--jna-ink-900); }
.jna-progress-report__summary{ font-size: var(--text-sm); color: var(--jna-ink-700); line-height: 1.6; }
.jna-progress-report__details{ font-size: var(--text-sm); }
.jna-progress-report__details-toggle {
  cursor: pointer; font-weight: 600; color: var(--jna-primary-600);
  list-style: none; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0;
}
.jna-progress-report__details-toggle::-webkit-details-marker { display: none; }
.jna-progress-report__activities {
  list-style: disc; padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
  color: var(--jna-ink-500); margin-top: var(--space-2);
}
.jna-progress-report__next-week { color: var(--jna-ink-500); margin-top: var(--space-3); }
.jna-progress-report__verified-by { font-size: var(--text-sm); color: var(--jna-success); }
.jna-progress-report__footer {
  display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-caption); color: var(--jna-ink-500);
  border-top: var(--border); padding-top: var(--space-3); margin-top: var(--space-1);
}
.jna-progress-report__verified { color: var(--jna-success); font-weight: 600; }

/* ── Media gallery ───────────────────────────────────────────────────────── */
.jna-media-upload-section {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6); border: var(--border);
}
.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-item {
  background: var(--jna-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: var(--border); overflow: hidden; display: flex; flex-direction: column;
}
.jna-media-item__link  { display: block; }
.jna-media-item__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--jna-surface-3); }
.jna-media-item__img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.jna-media-item__placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--jna-line);
}
.jna-media-item__info    { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.jna-media-item__caption { font-size: var(--text-sm); font-weight: 600; color: var(--jna-ink-700); }
.jna-media-item__meta    { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.jna-media-item__date    { font-size: var(--text-caption); color: var(--jna-ink-500); }
.jna-media-item__by      { font-size: var(--text-caption); color: var(--jna-ink-500); }

/* Media card */
.jna-media-card {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); 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: var(--text-sm); font-weight: 600; color: var(--jna-ink-700); 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: var(--text-caption); color: var(--jna-ink-500); }
.jna-media-card__date { font-size: var(--text-caption); color: var(--jna-ink-500); }

/* ── File upload ─────────────────────────────────────────────────────────── */
.jna-upload { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-upload__label { font-size: var(--text-sm); 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 var(--dur) var(--ease);
}
.jna-upload__dropzone:hover, .jna-upload__dropzone:focus-within { border-color: var(--jna-primary-600); background: var(--jna-primary-50); }
.jna-upload__dropzone--error { border-color: var(--jna-error); }
.jna-upload__hint    { font-size: var(--text-sm); color: var(--jna-ink-500); margin-top: var(--space-2); }
.jna-upload__error   { color: var(--jna-error); font-size: var(--text-sm); }
.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: var(--text-sm); font-weight: 500; }

/* ── Documents ───────────────────────────────────────────────────────────── */
.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);
  box-shadow: var(--shadow-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-500); flex-shrink: 0; padding-top: 2px; }
.jna-document-item__body     { flex: 1; min-width: 0; }
.jna-document-item__title    { font-size: var(--text-base); font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-1); }
.jna-document-item__meta     { font-size: var(--text-sm); color: var(--jna-ink-500); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jna-document-item__sep      { color: var(--jna-line); }
.jna-document-item__category { font-weight: 600; }
.jna-document-item__filename { font-family: monospace; font-size: .8rem; }
.jna-document-item__actions  { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; flex-wrap: wrap; }

/* Document card variant */
.jna-document { display: flex; gap: var(--space-4); align-items: flex-start; }
.jna-document__icon   { color: var(--jna-ink-500); flex-shrink: 0; padding-top: 2px; }
.jna-document__body   { flex: 1; min-width: 0; }
.jna-document__title  { font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-2); }
.jna-document__meta   { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--jna-ink-500); margin-bottom: var(--space-1); }
.jna-document__desc   { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-document__action { flex-shrink: 0; }

/* ── Milestones ──────────────────────────────────────────────────────────── */
.jna-milestone-timeline {
  list-style: none; position: relative; display: flex; flex-direction: column; gap: 0;
}
.jna-milestone-timeline::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0;
  width: 2px; background: var(--jna-line); z-index: 0;
}
.jna-milestone {
  display: flex; gap: var(--space-4); padding: var(--space-4) 0; position: relative;
}
.jna-milestone__marker {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  z-index: 1; position: relative;
}
.jna-milestone--achieved   .jna-milestone__marker { background: var(--jna-success); }
.jna-milestone--inprogress .jna-milestone__marker { background: var(--jna-accent-500); }
.jna-milestone--planned    .jna-milestone__marker { background: var(--jna-surface-2); border: 2px solid var(--jna-line); }
.jna-milestone__pulse {
  width: 12px; height: 12px; border-radius: 50%; background: var(--jna-ink-900);
  animation: jna-pulse 1.5s ease-in-out infinite;
}
.jna-milestone__content  { flex: 1; padding-top: var(--space-2); }
.jna-milestone__header   { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-1); }
.jna-milestone__title    { font-size: var(--text-base); font-weight: 700; color: var(--jna-ink-900); }
.jna-milestone__desc     { font-size: var(--text-sm); color: var(--jna-ink-500); margin-bottom: var(--space-2); }
.jna-milestone__phase    { font-size: var(--text-sm); color: var(--jna-ink-500); margin-bottom: var(--space-2); }
.jna-milestone__dates    { font-size: var(--text-sm); }
.jna-milestone__date--achieved { color: var(--jna-success); font-weight: 600; }
.jna-milestone__date--planned  { color: var(--jna-ink-500); }
.jna-milestone-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.jna-milestone-legend__item {
  display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm);
}
.jna-milestone-legend__item::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; display: block;
}
.jna-milestone-legend__item--achieved::before  { background: var(--jna-success); }
.jna-milestone-legend__item--inprogress::before{ background: var(--jna-accent-500); }
.jna-milestone-legend__item--planned::before   { background: var(--jna-surface-2); border: 2px solid var(--jna-line); }

/* Milestone card variant */
.jna-milestone--achieved { border-left: 3px solid var(--jna-success); padding-left: var(--space-4); }
.jna-milestone__icon { color: var(--jna-ink-500); flex-shrink: 0; }
.jna-milestone--achieved .jna-milestone__icon { color: var(--jna-success); }
.jna-milestone__body { flex: 1; min-width: 0; }
.jna-milestone__name { font-weight: 700; color: var(--jna-ink-900); margin-bottom: var(--space-2); }
.jna-milestone__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--jna-ink-500); margin-bottom: var(--space-2); }
.jna-milestone__disbursement { font-size: var(--text-sm); color: var(--jna-success); font-weight: 600; display: flex; align-items: center; gap: var(--space-1); }

/* ── Decisions ───────────────────────────────────────────────────────────── */
.jna-decision-card {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6); border: var(--border);
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.jna-decision-card--pending { border-left: 4px solid var(--jna-accent-500); }
.jna-decision-card--decided { border-left: 4px solid var(--jna-success); opacity: .85; }
.jna-decision-card__header  { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); }
.jna-decision-card__title   { font-size: var(--text-h3); font-weight: 700; color: var(--jna-ink-900); }
.jna-decision-card__deadline{ font-size: var(--text-sm); color: var(--jna-warning); font-weight: 600; }
.jna-decision-card__desc    { font-size: var(--text-sm); color: var(--jna-ink-500); line-height: 1.6; }
.jna-decision-form { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-decision-card__chosen    { font-size: var(--text-sm); color: var(--jna-ink-700); }
.jna-decision-card__decided-at{ font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-decision-history { margin-top: var(--space-4); }
.jna-decision-history ul { list-style: none; }

/* Decision item variant */
.jna-decision { display: flex; flex-direction: column; gap: var(--space-3); }
.jna-decision--pending { border-left: 4px solid var(--jna-accent-500); }
.jna-decision__header  { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.jna-decision__title   { font-size: var(--text-base); font-weight: 700; color: var(--jna-ink-900); }
.jna-decision__type    { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-decision__description { font-size: var(--text-sm); color: var(--jna-ink-700); line-height: 1.6; }
.jna-decision__deadline { font-size: var(--text-sm); font-weight: 600; color: var(--jna-warning); display: flex; align-items: center; gap: var(--space-1); }
.jna-decision__deadline--expired { color: var(--jna-error); }
.jna-decision__response { font-size: var(--text-sm); color: var(--jna-ink-700); background: var(--jna-success-bg); border-radius: var(--radius-sm); padding: var(--space-3); }
.jna-decision__notes    { color: var(--jna-ink-500); margin-top: var(--space-1); }
.jna-decision__actions  { display: flex; gap: var(--space-3); }
.jna-decision__footer   { font-size: var(--text-caption); color: var(--jna-ink-500); border-top: var(--border); padding-top: var(--space-3); margin-top: var(--space-1); }

/* ── Finance ─────────────────────────────────────────────────────────────── */
.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-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-5); border: var(--border);
  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: var(--text-caption); color: var(--jna-ink-500); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.jna-finance-card__value   { font-size: var(--text-h3); font-weight: 700; color: var(--jna-ink-700); }
.jna-finance-card__value--highlight { color: var(--jna-success); font-size: var(--text-xl); }
.jna-finance-ledger-header { display: flex; flex-direction: column; gap: var(--space-3); }
.jna-finance-ledger-header__label { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-finance-table-wrap { overflow-x: auto; }
.jna-finance-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  background: var(--jna-surface); border-radius: var(--radius); overflow: hidden;
}
.jna-finance-table th {
  background: var(--jna-surface-3); text-align: left; padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption); font-weight: 500; color: var(--jna-ink-500);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--jna-line);
}
.jna-finance-table td {
  padding: var(--space-3) var(--space-4); border-bottom: var(--border);
  color: var(--jna-ink-700); height: 52px; vertical-align: middle;
}
.jna-finance-table tr:last-child td { border-bottom: none; }
.jna-finance-table tr:hover td { background: var(--jna-surface-2); }
.jna-finance-table__amount { text-align: right; font-variant-numeric: tabular-nums; }
.jna-finance-table__total td { background: var(--jna-surface-3); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.jna-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: var(--border); }
.jna-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-sm);
  background: var(--jna-surface);
}
.jna-table th {
  background: var(--jna-surface-3); text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-caption); font-weight: 500;
  color: var(--jna-ink-500);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--jna-line);
  white-space: nowrap;
}
.jna-table td {
  padding: var(--space-3) var(--space-4); border-bottom: var(--border);
  color: var(--jna-ink-700); vertical-align: top; height: 52px;
}
.jna-table tr:last-child td { border-bottom: none; }
.jna-table tr:hover td { background: var(--jna-surface-2); }
.jna-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.jna-table__num--bold { font-weight: 700; color: var(--jna-success); }

/* ── Money display ───────────────────────────────────────────────────────── */
.jna-money { display: inline-flex; flex-direction: column; gap: 2px; }
.jna-money__label { font-size: var(--text-sm); color: var(--jna-ink-500); }
.jna-money__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.jna-money__value--prominent { font-size: var(--text-xl); font-weight: 700; color: var(--jna-success); }

/* ── Meta-grid ────────────────────────────────────────────────────────────── */
.jna-meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
}
.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-success); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.jna-meta-grid__warn  { color: var(--jna-error); font-weight: 600; }

/* ── Materials page ──────────────────────────────────────────────────────── */
.jna-materials-section { display: flex; flex-direction: column; gap: var(--space-4); }
.jna-materials-query {
  background: var(--jna-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-6); border: var(--border);
}

/* 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-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-5); border: var(--border);
  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: var(--text-base); font-weight: 700; color: var(--jna-ink-900); }
.jna-delivery-card__meta { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.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: var(--text-sm); color: var(--jna-error); padding-top: var(--space-2); }
.jna-delivery-card__reconciled       { color: var(--jna-success); font-weight: 600; }
.jna-delivery-card__pending-reconcile{ color: var(--jna-ink-500); font-style: italic; }

/* Receipt panel */
.jna-receipt-panel {
  background: var(--jna-success-bg); border-radius: var(--radius-lg);
  border: 1px solid var(--jna-success);
  padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.jna-receipt-panel__heading {
  font-size: var(--text-h3); 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: var(--text-sm); font-weight: 600; color: var(--jna-ink-900); }

/* Delivery row */
.jna-delivery-row {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  text-align: left; width: 100%;
}
.jna-delivery-row--clickable { cursor: pointer; transition: box-shadow var(--dur) var(--ease); }
.jna-delivery-row--clickable:hover { box-shadow: var(--shadow-md); }
.jna-delivery-row:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.jna-delivery-row__main  { flex: 1; min-width: 0; }
.jna-delivery-row__item  { font-weight: 600; color: var(--jna-ink-900); }
.jna-delivery-row__meta  { font-size: var(--text-sm); color: var(--jna-ink-500); margin-top: 2px; }
.jna-delivery-row__right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.jna-delivery-row__cost  { font-weight: 700; color: var(--jna-success); font-variant-numeric: tabular-nums; }
.jna-delivery-row__date  { font-size: var(--text-caption); color: var(--jna-ink-500); width: 100%; }
.jna-delivery-row__receipt-icon { color: var(--jna-success); }

/* ── Accountability 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-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); border: var(--border);
  display: flex; gap: var(--space-4); align-items: flex-start;
}
.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: var(--text-sm);
}
.jna-feed-item__body  { flex: 1; min-width: 0; }
.jna-feed-item__title { font-size: var(--text-base); font-weight: 600; color: var(--jna-ink-900); }
.jna-feed-item__desc  { font-size: var(--text-sm); color: var(--jna-ink-500); margin-top: var(--space-1); }
.jna-feed-item__meta  { font-size: var(--text-caption); color: var(--jna-ink-500); 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__icon--request  { background: var(--jna-surface-3); color: var(--jna-ink-500); }
.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: var(--text-base); }
.jna-accountability-item__desc    { font-size: var(--text-sm); 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: var(--text-sm); margin-bottom: var(--space-2); }
.jna-accountability-item__amount  { font-weight: 700; color: var(--jna-success); font-variant-numeric: tabular-nums; }
.jna-accountability-item__verified{ color: var(--jna-success); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.jna-accountability-item__evidence{ color: var(--jna-ink-500); display: flex; align-items: center; gap: 4px; }
.jna-accountability-item__time    { font-size: var(--text-caption); color: var(--jna-ink-500); }

/* ── Evidence grid ───────────────────────────────────────────────────────── */
.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); } }
@media (min-width: 900px) { .jna-evidence-grid { grid-template-columns: repeat(4, 1fr); } }
.jna-evidence-card {
  border-radius: var(--radius); overflow: hidden;
  border: var(--border); background: var(--jna-surface);
  text-decoration: none; display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jna-evidence-card:hover { box-shadow: var(--shadow-md); border-color: var(--jna-primary-600); }
.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-500); font-size: var(--text-sm); background: var(--jna-surface-3);
}
.jna-evidence-card__label {
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600;
  color: var(--jna-ink-900); background: var(--jna-surface);
  border-top: var(--border);
}

/* ── Timeline ─────────────────────────────────────────────────────────────── */
.jna-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-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;
}
.jna-timeline__item--current .jna-timeline__dot { background: var(--jna-primary-600); }
.jna-timeline__item--past    .jna-timeline__dot { background: var(--jna-primary-500); }
.jna-timeline__body  { flex: 1; }
.jna-timeline__phase { font-weight: 700; color: var(--jna-ink-900); font-size: var(--text-base); display: flex; align-items: center; }
.jna-timeline__date  { font-size: var(--text-sm); color: var(--jna-ink-500); margin-top: 2px; }
.jna-timeline__note  { font-size: var(--text-sm); color: var(--jna-ink-700); margin-top: var(--space-1); }
.jna-timeline__by    { font-size: var(--text-caption); color: var(--jna-ink-500); margin-top: 2px; }

/* ── Phase stepper ────────────────────────────────────────────────────────── */
.jna-phase-stepper {
  display: flex; align-items: flex-start; gap: 0;
  overflow-x: auto; padding: var(--space-2) 0 var(--space-4);
  -webkit-overflow-scrolling: touch; 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-500); }
.jna-phase-stepper__step--current:not(:last-child)::after { background: var(--jna-line); }
.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-500); border-color: var(--jna-primary-500); }
.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-100);
}
.jna-phase-stepper__check { color: var(--jna-surface); font-size: .8rem; font-weight: 700; }
.jna-phase-stepper__label {
  font-size: var(--text-caption); font-weight: 600; text-align: center;
  color: var(--jna-ink-500); 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; }
.jna-phase-stepper__date {
  font-size: .65rem; color: var(--jna-ink-400); text-align: center; margin-top: 2px;
}

/* ── Filter tabs ─────────────────────────────────────────────────────────── */
.jna-filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.jna-filter-tab {
  background: var(--jna-surface); border: var(--border);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  color: var(--jna-ink-500); min-height: 32px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.jna-filter-tab:hover { border-color: var(--jna-primary-600); color: var(--jna-primary-600); }
.jna-filter-tab--active {
  background: var(--jna-primary-600); border-color: var(--jna-primary-600);
  color: var(--jna-surface); font-weight: 600;
}

/* ── Ledger entries ──────────────────────────────────────────────────────── */
.jna-ledger-entry {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  font-size: var(--text-sm);
}
.jna-ledger-entry__type   { flex-shrink: 0; }
.jna-ledger-entry__ref    { flex: 1; font-weight: 600; color: var(--jna-ink-900); min-width: 120px; }
.jna-ledger-entry__amount { font-weight: 700; color: var(--jna-success); font-size: var(--text-base); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.jna-ledger-entry__notes  { width: 100%; color: var(--jna-ink-500); font-size: .8rem; }
.jna-ledger-entry__date   { font-size: var(--text-caption); color: var(--jna-ink-500); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.jna-modal-overlay {
  position: fixed; inset: 0; background: rgba(15,27,22,.4); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.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__title   { font-size: var(--text-h2); font-weight: 700; color: var(--jna-ink-900); }
.jna-modal__body    { font-size: var(--text-sm); color: var(--jna-ink-700); line-height: 1.6; }
.jna-modal__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }

/* ── 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: var(--text-h1); font-weight: 700; color: var(--jna-ink-900); }
.jna-not-found p  { color: var(--jna-ink-500); }

/* ── Generic list ─────────────────────────────────────────────────────────── */
.jna-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* ── Inline text helpers ─────────────────────────────────────────────────── */
/* 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: var(--text-base); min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.jna-radio-label:hover { border-color: var(--jna-primary-600); background: var(--jna-primary-50); }
.jna-radio-label input[type="radio"] { width: 18px; height: 18px; accent-color: var(--jna-primary-600); cursor: pointer; }

/* Password strength meter */
.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: var(--text-sm); color: var(--jna-ink-500); }
.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-accent-500); }
.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: var(--text-sm); }
.jna-password-rules li { display: flex; align-items: center; gap: var(--space-2); color: var(--jna-ink-500); }
.jna-password-rules li::before { content: "o"; color: var(--jna-line); }
.jna-password-rules li.met { color: var(--jna-success); }
.jna-password-rules li.met::before { content: "v"; color: var(--jna-success); }

/* ── 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: var(--text-sm);
  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; }

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .jna-topbar, .jna-sidebar, .jna-portal-sidenav,
  .jna-toast-container, .jna-btn { display: none !important; }
  .jna-portal-content { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   T3.C3 — Media gallery enhancements: video cards, evidence viewer drawer,
   freshness cue, capture thumbnail strip, clickable card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Clickable media card (button reset + hover) ─────────────────────────── */
.jna-media-card--clickable {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--jna-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: var(--border);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.jna-media-card--clickable:hover { box-shadow: var(--shadow-md); border-color: var(--jna-primary-600); }
.jna-media-card--clickable:focus-visible { box-shadow: var(--focus-ring); border-color: var(--jna-primary-600); outline: none; }

/* ── Video card thumbnail area ───────────────────────────────────────────── */
.jna-media-card__thumb--video {
  aspect-ratio: 4/3;
  width: 100%;
  background: var(--jna-ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.jna-media-card__play-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--jna-surface);
  transition: background-color var(--dur) var(--ease);
}
.jna-media-card--clickable:hover .jna-media-card__play-btn { background: rgba(255,255,255,.3); }

/* "Evidence unavailable" label inside card body */
.jna-media-card__unavailable {
  font-size: var(--text-caption);
  color: var(--jna-ink-400);
  font-style: italic;
}

/* ── Freshness cue (MediaGallery + Accountability) ───────────────────────── */
.jna-freshness-cue {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--jna-success);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  background: var(--jna-success-bg);
  border-radius: var(--radius-pill);
  border: 1px solid var(--jna-success);
  width: fit-content;
}
.jna-freshness-cue--stale {
  color: var(--jna-warning); background: var(--jna-warning-bg);
  border-color: var(--jna-warning);
}
@keyframes jna-fresh-flash {
  0%   { opacity: 1; transform: scale(1); }
  20%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.jna-freshness-cue--flash {
  color: var(--jna-primary-700);
  background: var(--jna-primary-100);
  border-color: var(--jna-primary-600);
  animation: jna-fresh-flash .4s var(--ease);
}

/* ── Evidence viewer overlay ─────────────────────────────────────────────── */
.jna-viewer-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15,27,22,.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.jna-viewer {
  background: var(--jna-ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 900px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Toolbar */
.jna-viewer__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.jna-viewer__nav-btns { display: flex; align-items: center; gap: var(--space-2); }
.jna-viewer__nav-btn, .jna-viewer__close {
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
}
.jna-viewer__nav-btn:hover:not(:disabled), .jna-viewer__close:hover {
  background: rgba(255,255,255,.16);
  color: var(--jna-surface);
}
.jna-viewer__nav-btn:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.jna-viewer__counter {
  font-size: var(--text-sm); color: rgba(255,255,255,.6);
  min-width: 52px; text-align: center;
}
/* Media area */
.jna-viewer__media {
  flex: 1; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--jna-ink-900);
  min-height: 0;
}
.jna-viewer__img {
  max-width: 100%; max-height: 72vh;
  object-fit: contain; display: block;
}
.jna-viewer__video {
  max-width: 100%; max-height: 72vh;
  display: block;
  background: #000;
}
.jna-viewer__unavailable {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  color: rgba(255,255,255,.4); text-align: center; padding: var(--space-8);
}
.jna-viewer__unavailable p { font-size: var(--text-sm); }
.jna-viewer__video-error {
  color: rgba(255,255,255,.6); font-size: var(--text-sm); text-align: center;
  padding: var(--space-6);
}
.jna-viewer__video-error .jna-link { color: var(--jna-primary-500); }
/* Footer */
.jna-viewer__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,.1);
  gap: var(--space-4); flex-wrap: wrap;
  flex-shrink: 0;
}
.jna-viewer__caption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jna-viewer__filename { font-size: var(--text-sm); font-weight: 600; color: var(--jna-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jna-viewer__date     { font-size: var(--text-caption); color: rgba(255,255,255,.5); }
.jna-viewer__verified-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--jna-success); flex-shrink: 0;
}
/* Full-screen on 375px */
@media (max-width: 640px) {
  .jna-viewer-overlay { padding: 0; align-items: flex-end; }
  .jna-viewer { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; max-height: 95vh; }
}

/* ── Accountability capture icon ─────────────────────────────────────────── */
.jna-accountability-item__icon--capture {
  background: var(--jna-primary-50); color: var(--jna-primary-700);
}

/* ── Capture thumbnail strip in accountability feed ──────────────────────── */
.jna-capture-thumbs {
  display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3);
}
.jna-capture-thumb {
  all: unset;
  box-sizing: border-box;
  width: 56px; height: 56px; min-width: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--jna-line);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--jna-surface-3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.jna-capture-thumb:hover { border-color: var(--jna-primary-600); box-shadow: var(--shadow-md); }
.jna-capture-thumb:focus-visible { box-shadow: var(--focus-ring); border-color: var(--jna-primary-600); outline: none; }
.jna-capture-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jna-capture-thumb--video { background: var(--jna-ink-700); }
.jna-capture-thumb__play  { color: var(--jna-surface); }
.jna-capture-thumb__placeholder { color: var(--jna-line); }
.jna-capture-thumb--more {
  all: unset;
  box-sizing: border-box;
  width: 56px; height: 56px; min-width: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--jna-line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--jna-ink-500);
  background: var(--jna-surface-3);
}
/* ── 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);
    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); }

/* ── 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-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); }
}
.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; }
}

/* File upload (JnaFileUpload) — ported from jna-admin-web */
.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); }

/* ═══════════════════════════════════════════════════════════════════════════
   SITE PORTAL LAYER v2 (sw-*) — mobile-first, field-grade.
   Language: deep-green heroes w/ gold glow (landing-page treatment), tinted
   icon discs, floating tab dock, timeline feeds, layered depth. One-hand use.
   ═══════════════════════════════════════════════════════════════════════════ */

.sw-shell { min-height: 100vh; min-height: 100dvh; background: var(--jna-surface-2); display: flex; flex-direction: column; }

/* ── Topbar — merges seamlessly into the page hero below it ── */
.sw-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-2);
  min-height: calc(58px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-4) 0 var(--space-2);
  background: var(--jna-primary-900); color: #fff;
}
.sw-topbar__back {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; color: #fff; border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease);
}
.sw-topbar__back:active { background: rgba(255,255,255,.12); }
.sw-topbar__brand { font-size: 1.3125rem; font-weight: 800; letter-spacing: -.01em; padding-left: var(--space-2); }
.sw-topbar__brand em { font-style: normal; background: linear-gradient(100deg, var(--jna-gold), #F6C443); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sw-topbar__context { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.sw-topbar__title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-topbar__sub { font-size: .75rem; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-topbar__avatar {
  margin-left: auto; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-weight: 700; font-size: .8125rem; text-decoration: none;
}

/* ── Hero masthead — deep green, gold/green glows, grid texture ── */
.sw-hero {
  position: relative; overflow: hidden;
  background: var(--jna-primary-900); color: #fff;
  padding: var(--space-2) var(--space-4) var(--space-5);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 28px rgba(11,61,46,.28);
}
.sw-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 85% -10%, rgba(227,160,8,.16) 0%, transparent 55%),
    radial-gradient(ellipse 80% 90% at 10% 110%, rgba(30,169,124,.22) 0%, transparent 60%);
}
.sw-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 26px 26px;
}
.sw-hero > * { position: relative; z-index: 1; }
.sw-hero__row { display: flex; align-items: center; gap: var(--space-4); }
.sw-hero__eyebrow {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jna-gold); margin-bottom: var(--space-1);
}
.sw-hero__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.sw-hero__sub { font-size: .875rem; color: rgba(255,255,255,.72); margin-top: 2px; }
.sw-hero__main { flex: 1; min-width: 0; }
.sw-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.sw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14);
  padding: 5px 11px; border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.sw-chip strong { color: #fff; font-weight: 800; }
.sw-chip--gold { background: rgba(227,160,8,.18); border-color: rgba(227,160,8,.35); color: #F6C443; }
.sw-chip--alert { background: rgba(192,57,43,.22); border-color: rgba(192,57,43,.4); color: #FFB4A8; }

/* Progress ring (SVG) in the hero */
.sw-ring { flex-shrink: 0; width: 76px; height: 76px; position: relative; }
.sw-ring svg { width: 76px; height: 76px; transform: rotate(-90deg); }
.sw-ring__track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 6; }
.sw-ring__fill {
  fill: none; stroke: url(#swRingGrad); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ease);
}
.sw-ring__label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1.1;
}
.sw-ring__val { font-size: 1.0625rem; font-weight: 800; color: #fff; }
.sw-ring__cap { font-size: .5625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── Greeting (My sites) ── */
.sw-greet { padding: var(--space-2) 0 var(--space-1); }
.sw-greet__hello { font-size: .875rem; color: rgba(255,255,255,.68); }
.sw-greet__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.25; }

/* ── Content & page scaffolding ── */
.sw-content { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; }
.sw-content--tabbed { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.sw-page { padding: var(--space-4) var(--space-4) var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
.sw-page--flush { padding-top: 0; }
.sw-page__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sw-page__title { font-size: 1.4375rem; font-weight: 800; letter-spacing: -.02em; color: var(--jna-ink-900); line-height: 1.25; }
.sw-shell h1:focus, .sw-page__title:focus, .jna-auth-panel__title:focus { outline: none; box-shadow: none; }
.sw-page__sub { font-size: .9375rem; color: var(--jna-ink-500); line-height: 1.55; margin-top: calc(-1 * var(--space-2)); }

/* Section eyebrow — gold dash + spaced caps (landing language) */
.sw-eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jna-ink-400);
}
.sw-eyebrow::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--jna-gold), #F6C443); }
.sw-section { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }

/* ── Floating tab dock ── */
.sw-tabbar {
  position: fixed; z-index: 40;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 560px);
  display: flex; justify-content: space-around; align-items: stretch;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,27,22,.06);
  border-radius: 24px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(11,61,46,.18), 0 2px 8px rgba(11,61,46,.10);
}
.sw-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 6px; border-radius: 18px;
  font-size: .625rem; font-weight: 700; letter-spacing: .01em;
  color: var(--jna-ink-400); text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sw-tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sw-tab.active { color: var(--jna-primary-700); background: var(--jna-primary-50); }
.sw-tab:active { background: var(--jna-surface-3); }

/* ── Stat tiles (hero row on site home) ── */
.sw-glance { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

/* ── Quick actions — tinted icon discs ── */
.sw-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sw-action {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--jna-surface); border: 1px solid rgba(15,27,22,.05);
  border-radius: var(--radius-xl); padding: var(--space-4);
  min-height: 118px; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sw-action:active { transform: scale(.965); box-shadow: none; }
.sw-action__disc {
  width: 42px; height: 42px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.sw-action__disc svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sw-action__disc--green { background: var(--jna-primary-100); color: var(--jna-primary-700); }
.sw-action__disc--gold  { background: var(--jna-accent-100); color: var(--jna-gold-dark); }
.sw-action__disc--blue  { background: var(--jna-info-bg); color: var(--jna-info); }
.sw-action__disc--slate { background: var(--jna-surface-3); color: var(--jna-ink-500); }
.sw-action__title { font-weight: 800; font-size: .9375rem; letter-spacing: -.01em; color: var(--jna-ink-900); }
.sw-action__sub { font-size: .75rem; color: var(--jna-ink-400); line-height: 1.4; margin-top: -6px; }
.sw-action--primary { background: linear-gradient(140deg, #0E4A38, var(--jna-primary-900)); border-color: transparent; box-shadow: 0 8px 20px rgba(11,61,46,.32); }
.sw-action--primary .sw-action__disc { background: rgba(227,160,8,.18); color: #F6C443; }
.sw-action--primary .sw-action__title { color: #fff; }
.sw-action--primary .sw-action__sub { color: rgba(255,255,255,.62); }

/* ── Cards & feeds ── */
.sw-feed, .sw-site-list, .sw-line-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); padding: 0; margin: 0; }
.sw-card {
  display: block; background: var(--jna-surface);
  border: 1px solid rgba(15,27,22,.05);
  border-radius: var(--radius-xl); padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.sw-card--link { text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sw-card--link:active { transform: scale(.98); }
.sw-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sw-card__row strong { color: var(--jna-ink-900); font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.sw-card__text { font-size: .9375rem; color: var(--jna-ink-700); line-height: 1.55; margin-top: var(--space-2); overflow-wrap: anywhere; }
.sw-card__meta { font-size: .8125rem; color: var(--jna-ink-400); margin-top: var(--space-2); line-height: 1.5; }
.sw-card__meta--error { color: var(--jna-error); font-weight: 600; }
.sw-card__hint { font-size: .8125rem; color: var(--jna-ink-400); font-style: italic; margin-top: var(--space-2); }
.sw-card__cta { margin-top: var(--space-3); }

/* ── Site cards (My sites) — avatar tile + phase accent + mini progress ── */
.sw-site-card {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  background: var(--jna-surface); border: 1px solid rgba(15,27,22,.05);
  border-radius: var(--radius-xl); padding: var(--space-4);
  min-height: 84px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.sw-site-card:active { transform: scale(.98); }
.sw-site-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--jna-primary-500);
}
.sw-site-card--design::before { background: var(--jna-info); }
.sw-site-card--handover::before, .sw-site-card--completed::before { background: var(--jna-gold); }
.sw-site-card__avatar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--jna-primary-100), var(--jna-primary-50));
  color: var(--jna-primary-700); font-weight: 800; font-size: .9375rem; letter-spacing: .02em;
}
.sw-site-card--design .sw-site-card__avatar { background: var(--jna-info-bg); color: var(--jna-info); }
.sw-site-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sw-site-card__ref { font-weight: 800; color: var(--jna-ink-900); font-size: .9375rem; letter-spacing: -.01em; }
.sw-site-card__client { font-size: .8125rem; color: var(--jna-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-site-card__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; }
.sw-site-card__updated { font-size: .6875rem; color: var(--jna-ink-400); }
.sw-site-card__chev { color: var(--jna-ink-400); flex-shrink: 0; }
.sw-phase-chip {
  font-size: .6563rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--jna-surface-3); color: var(--jna-ink-500); white-space: nowrap;
}
.sw-phase-chip--construction { background: var(--jna-success-bg); color: var(--jna-success); }
.sw-phase-chip--design { background: var(--jna-info-bg); color: var(--jna-info); }
.sw-phase-chip--approvals { background: var(--jna-accent-100); color: var(--jna-gold-dark); }

/* ── Timeline feed (Updates) ── */
.sw-tl { list-style: none; padding: 0; margin: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-4); }
.sw-tl__item { position: relative; padding-left: 30px; }
.sw-tl__item::before {
  content: ""; position: absolute; left: 9px; top: 30px; bottom: calc(-1 * var(--space-4));
  width: 2px; background: linear-gradient(var(--jna-line), rgba(227,232,229,0));
}
.sw-tl__item:last-child::before { display: none; }
.sw-tl__dot {
  position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--jna-surface); border: 2px solid var(--jna-ink-400);
  display: flex; align-items: center; justify-content: center;
}
.sw-tl__item--verified .sw-tl__dot { border-color: var(--jna-success); background: var(--jna-success); }
.sw-tl__item--verified .sw-tl__dot::after { content: "✓"; color: #fff; font-size: .625rem; font-weight: 800; }
.sw-tl__item--submitted .sw-tl__dot { border-color: var(--jna-gold); box-shadow: 0 0 0 4px rgba(227,160,8,.15); }
.sw-delta {
  display: inline-flex; align-items: center; font-size: .6875rem; font-weight: 800;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--jna-success-bg); color: var(--jna-success);
}
.sw-delta--flat { background: var(--jna-surface-3); color: var(--jna-ink-400); }

/* ── Empty / error / skeleton states ── */
.sw-empty {
  text-align: center; padding: var(--space-8) var(--space-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.sw-empty--inline { padding: var(--space-5) var(--space-4); }
.sw-empty__disc {
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: var(--space-2);
  display: flex; align-items: center; justify-content: center;
  background: var(--jna-primary-50); color: var(--jna-primary-600);
}
.sw-empty__disc svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sw-empty__title { font-weight: 800; color: var(--jna-ink-900); font-size: 1rem; letter-spacing: -.01em; }
.sw-empty__sub { font-size: .875rem; color: var(--jna-ink-400); line-height: 1.55; max-width: 300px; }
.sw-empty .jna-btn { margin-top: var(--space-3); }
.sw-skeleton-list { display: flex; flex-direction: column; gap: var(--space-3); }
.sw-skeleton-card {
  height: 92px; border-radius: var(--radius-xl);
  background: linear-gradient(90deg, var(--jna-surface-3) 25%, var(--jna-surface) 50%, var(--jna-surface-3) 75%);
  background-size: 200% 100%; animation: sw-shimmer 1.4s infinite;
}
@keyframes sw-shimmer { to { background-position: -200% 0; } }

/* ── Progress bars ── */
.sw-progressbar {
  position: relative; height: 20px; border-radius: var(--radius-pill); background: var(--jna-surface-3);
  overflow: hidden; margin-top: var(--space-3);
}
.sw-progressbar--thin { height: 6px; margin-top: var(--space-2); }
.sw-progressbar__fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--jna-primary-700), var(--jna-primary-500));
  transition: width .4s var(--ease);
}
.sw-progressbar__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .6563rem; font-weight: 800; color: var(--jna-ink-900);
}

/* ── Forms ── */
.sw-form { display: flex; flex-direction: column; gap: var(--space-4); }
.sw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sw-input-lg { min-height: 52px; font-size: 1rem; border-radius: var(--radius-lg); }
.sw-shell .jna-input, .sw-sheet .jna-input { border-radius: var(--radius-lg); }
.sw-btn-lg { min-height: 52px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-lg); padding-left: var(--space-5); padding-right: var(--space-5); }
.sw-btn-block { width: 100%; }
.sw-shell .jna-btn--primary, .sw-sheet .jna-btn--primary {
  background: linear-gradient(135deg, var(--jna-primary-700), var(--jna-primary-600));
  border: none; box-shadow: 0 6px 16px rgba(18,102,74,.28);
}
.sw-shell .jna-btn--primary:active, .sw-sheet .jna-btn--primary:active { transform: scale(.98); box-shadow: none; }
.sw-shell .jna-btn--danger { box-shadow: 0 6px 16px rgba(192,57,43,.24); border: none; }
.sw-total { font-size: 1rem; color: var(--jna-ink-500); }
.sw-total strong { color: var(--jna-ink-900); font-size: 1.125rem; font-weight: 800; }
.sw-form-hint { font-size: .8125rem; color: var(--jna-ink-400); text-align: center; }
.sw-range { width: 100%; accent-color: var(--jna-primary-600); height: 44px; }
.sw-range__scale { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--jna-ink-400); }
.sw-percent-big { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--jna-primary-700); line-height: 1; }
.sw-percent-big small { font-size: 1rem; font-weight: 700; color: var(--jna-ink-400); }

/* ── Photo grid ── */
.sw-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: var(--space-3); }
.sw-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--jna-surface-3); display: block; }
.sw-photo-grid a { display: block; border-radius: 12px; overflow: hidden; }

/* ── Facts (delivery detail) ── */
.sw-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  background: var(--jna-surface); border: 1px solid rgba(15,27,22,.05);
  border-radius: var(--radius-xl); padding: var(--space-4); margin: 0;
  box-shadow: var(--shadow-sm);
}
.sw-facts dt { font-size: .6563rem; text-transform: uppercase; letter-spacing: .08em; color: var(--jna-ink-400); font-weight: 700; }
.sw-facts dd { font-size: 1rem; font-weight: 700; color: var(--jna-ink-900); margin: 2px 0 0; letter-spacing: -.01em; }

/* ── Delivery / order-line cards ── */
.sw-line { display: flex; gap: var(--space-3); align-items: flex-start; }
.sw-line__disc {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--jna-surface-3); color: var(--jna-ink-500);
}
.sw-line__disc svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sw-line__disc--pending { background: var(--jna-accent-100); color: var(--jna-gold-dark); }
.sw-line__disc--ok { background: var(--jna-success-bg); color: var(--jna-success); }
.sw-line__body { flex: 1; min-width: 0; }
.sw-money { font-weight: 800; color: var(--jna-ink-900); letter-spacing: -.01em; }

/* ── QS decision block ── */
.sw-decision {
  background: var(--jna-surface); border: 1px solid rgba(15,27,22,.05);
  border-left: 4px solid var(--jna-gold);
  border-radius: var(--radius-xl); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.sw-decision__hint { font-size: .875rem; color: var(--jna-ink-500); line-height: 1.55; }
.sw-decision__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-3); margin-top: var(--space-1); }

/* ── Milestone roadmap ── */
.sw-roadmap { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.sw-roadmap__item { position: relative; padding-left: 32px; }
.sw-roadmap__item::before {
  content: ""; position: absolute; left: 10px; top: 30px; bottom: calc(-1 * var(--space-3));
  width: 2px; background: var(--jna-line);
}
.sw-roadmap__item:last-child::before { display: none; }
.sw-roadmap__dot {
  position: absolute; left: 1px; top: 18px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--jna-surface); border: 2.5px solid var(--jna-ink-400);
}
.sw-roadmap__item--achieved .sw-roadmap__dot { background: var(--jna-success); border-color: var(--jna-success); }
.sw-roadmap__item--achieved .sw-roadmap__dot::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .625rem; font-weight: 800;
}
.sw-roadmap__item--inprogress .sw-roadmap__dot { border-color: var(--jna-gold); animation: sw-pulse 1.6s infinite; }
.sw-roadmap__item--missed .sw-roadmap__dot { background: var(--jna-error); border-color: var(--jna-error); }
@keyframes sw-pulse { 50% { box-shadow: 0 0 0 6px rgba(227,160,8,.22); } }

/* ── Bottom sheet ── */
.sw-sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(11,61,46,.5); backdrop-filter: blur(3px); }
.sw-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--jna-surface); border-radius: 24px 24px 0 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 640px; margin: 0 auto;
  animation: sw-sheet-in .24s var(--ease);
  box-shadow: 0 -12px 40px rgba(11,61,46,.25);
}
@keyframes sw-sheet-in { from { transform: translateY(45%); opacity: .4; } }
.sw-sheet__grab { width: 44px; height: 5px; border-radius: var(--radius-pill); background: var(--jna-line); margin: 0 auto; }
.sw-sheet__title { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.01em; color: var(--jna-ink-900); }
.sw-sheet__message { font-size: .9375rem; color: var(--jna-ink-500); line-height: 1.55; }
.sw-sheet__reason { resize: vertical; }
.sw-sheet__actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-3); margin-top: var(--space-2); }

/* ── Account ── */
.sw-account {
  display: flex; align-items: center; gap: var(--space-4);
  background: linear-gradient(140deg, #0E4A38, var(--jna-primary-900));
  border: none; color: #fff;
}
.sw-account__avatar {
  width: 54px; height: 54px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(227,160,8,.2); color: #F6C443; font-weight: 800; font-size: 1.0625rem;
}
.sw-account__name { font-weight: 800; color: #fff; font-size: 1.0625rem; letter-spacing: -.01em; }
.sw-account__roles { font-size: .8125rem; color: rgba(255,255,255,.65); margin-top: 2px; }

/* ── Not found ── */
.sw-notfound { text-align: center; padding: var(--space-10) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }

/* ── Auth screens — full dark brand treatment (overrides the split layout) ── */
.jna-auth-split {
  flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 100vh; min-height: 100dvh;
  background: var(--jna-primary-900); position: relative; overflow: hidden;
}
.jna-auth-split::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 100% 55% at 85% -5%, rgba(227,160,8,.16) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 0% 100%, rgba(30,169,124,.2) 0%, transparent 60%);
}
.jna-auth-split::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}
.jna-auth-brand {
  flex: none; background: transparent; padding: calc(var(--space-8) + env(safe-area-inset-top)) var(--space-5) var(--space-4);
  position: relative; z-index: 1; overflow: visible;
  width: 100%; max-width: 460px; color: #fff;
}
.jna-auth-brand::before { display: none; }
.jna-auth-brand__content { gap: var(--space-2); }
.jna-auth-brand__wordmark { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.jna-auth-brand__headline { font-size: 1.375rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.jna-auth-brand__sub { font-size: .875rem; color: rgba(255,255,255,.66); max-width: none; }
.jna-auth-brand__trust {
  border-top: none; padding-top: var(--space-3);
  font-size: .75rem; color: rgba(255,255,255,.45);
}
.jna-auth-panel {
  flex: none; width: 100%; max-width: 460px;
  background: transparent; position: relative; z-index: 1;
  padding: 0 var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
  overflow: visible; align-items: stretch;
}
.jna-auth-panel__inner {
  max-width: none;
  background: var(--jna-surface); border-radius: 24px;
  padding: var(--space-5) var(--space-4) var(--space-5);
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  gap: var(--space-4);
}
.jna-auth-panel__header .jna-logo { display: none; }   /* wordmark already in the brand block */
.jna-auth-panel__title { margin-top: 0 !important; font-size: 1.3125rem; font-weight: 800; letter-spacing: -.01em; }
.jna-auth-panel__subtitle { font-size: .875rem; }
.jna-auth-panel .jna-btn--primary {
  min-height: 52px; font-size: 1rem; font-weight: 700; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--jna-primary-700), var(--jna-primary-600));
  border: none; box-shadow: 0 6px 16px rgba(18,102,74,.28);
}
.jna-auth-panel .jna-input { min-height: 50px; border-radius: var(--radius-lg); }
.jna-auth-panel__footer { color: var(--jna-ink-400); }
@media (max-width: 767px) {
  .jna-auth-brand { flex: none; padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) var(--space-3); }
  .jna-auth-brand__sub { display: block; }
  .jna-auth-brand__trust { display: block; }
  .jna-auth-panel { padding: 0 var(--space-4) var(--space-6); align-items: stretch; }
}

/* Wider phones / small tablets */
@media (min-width: 480px) {
  .sw-photo-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Sites search (hero) ── */
.sw-search { position: relative; margin-top: var(--space-3); }
.sw-search > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.55); pointer-events: none;
}
.sw-search input {
  width: 100%; min-height: 48px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.12);
  color: #fff; font-size: .9375rem; font-family: var(--font-base);
  padding: 0 44px 0 42px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sw-search input::placeholder { color: rgba(255,255,255,.5); }
.sw-search input:focus { outline: none; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.16); }
.sw-search input::-webkit-search-cancel-button { display: none; }
.sw-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: .8125rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sw-search__clear:active { background: rgba(255,255,255,.28); }