/* ═════════════════════════════════════════════════════════════════════════
   MindImmerse — shared theme (Wave 3 design unification, rev 3 2026-05-18)

   Color tokens are Donna's official brand palette. Buttons keep the 3D
   recipe (bevel highlight + bottom edge + drop shadow); colors come from
   the brand system. Single clean sans throughout (Source Sans 3).

   Overall feeling: professional, calm, trustworthy, clinical with
   strong military/government authority.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core brand colors (Figma spec) ──────────────────────────────────── */
  --primary-deep: #1E3A8A;       /* Deep Blue — header gradient top */
  --primary: #1E40AF;            /* Primary Blue — header gradient bottom, main */
  --primary-secondary: #2563EB;  /* Vibrant Blue — accents, buttons, links */
  --primary-bright: #3B82F6;     /* Bright Blue — button gradient end */
  --primary-light: #60A5FA;      /* Light Blue — hover states */

  /* Backwards-compat aliases */
  --primary-hover: var(--primary-secondary);
  --teal-deep: var(--primary);
  --teal-mid: var(--primary-secondary);

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --bg-page: #FAF8F5;        /* Warm page background (Tier 1.6) */
  --bg-surface: #FFFFFF;     /* White cards */
  --bg-paper: #FFFFFF;
  --bg-paper-warm: #FDFBF7;  /* genuinely warm paper for content-heavy cards */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --ink: #0F172A;            /* Text Primary (Figma spec) */
  --ink-mid: #475569;        /* Text Secondary (Figma spec) */
  --ink-light: #6B7280;      /* Muted Text — instructions, captions */

  /* ── Borders / dividers ──────────────────────────────────────────────── */
  --rule: #E2E8F0;
  --rule-strong: #CBD5E1;

  /* ── Semantic / risk colors (Figma spec) ─────────────────────────────── */
  --flag-high: #EF4444;      /* PTSD / High Risk — red */
  --flag-medium: #F59E0B;    /* Afghanistan / Medium — amber */
  --flag-assessed: #0F766E;  /* Assessed: confirmation teal, distinct from CTA green (Tier 1.7) */

  /* Legacy tag-name aliases (so existing page CSS keeps working) */
  --flag-orange: var(--flag-medium);
  --flag-red: var(--flag-high);
  --flag-yellow: #EAB308;
  --flag-green: var(--flag-assessed);

  /* ── Action / CTA green ──────────────────────────────────────────────── */
  --accent-green: #10B981;
  --accent-green-hover: #059669;
  --accent-green-bright: #34D399;

  /* ── Progress / phase indicators ─────────────────────────────────────── */
  --progress-bar: #3B82F6;
  --ready-dot: #22C55E;
  --phase-opening: #22C55E;
  --phase-exploration: #3B82F6;
  --phase-closing: #6D28D9;  /* plum; red is reserved for risk flags (Tier 1.2) */

  /* ── Step indicators ─────────────────────────────────────────────────── */
  --step-active: var(--primary-secondary);
  --step-done: var(--accent-green);
  --step-pending: #64748B;  /* was #CBD5E1 (1.5:1); must stay readable (a11y 2026-07-11) */

  /* Legacy aliases for variables still referenced by existing CSS */
  --teal-light: #DBEAFE;
  --teal-pale: #EFF6FF;
  --gold: #C4973A;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  /* Layered shadows + a faint lit top edge so surfaces read lifted, not flat.
     Upgraded 2026-05-31 (depth pass) so all cards across the app gain dimension. */
  --shadow-sm:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-md:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 10px 24px rgba(15, 23, 42, 0.12),
    0 20px 40px rgba(15, 23, 42, 0.08);
  --shadow-header: 0 4px 12px rgba(15, 23, 42, 0.12);

  /* ── Gradients (Figma spec) ──────────────────────────────────────────── */
  --gradient-header: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
  --gradient-primary-btn: linear-gradient(90deg, #1E40AF 0%, #2563EB 100%); /* >=4.5:1 with white (Tier 3.2) */
  --gradient-primary-btn-hover: linear-gradient(90deg, #2563EB 0%, #3B82F6 100%);
  --gradient-cta-btn: linear-gradient(180deg, #059669 0%, #047857 100%); /* >=4.5:1 with white (Tier 3.2) */
  --gradient-cta-btn-hover: linear-gradient(180deg, #10B981 0%, #059669 100%);
  --gradient-secondary-btn: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
  --gradient-disabled-btn: linear-gradient(180deg, #CBD5E1 0%, #94A3B8 100%);

  /* ── Accent tier (Tier 1.1, approved 2026-07-11) ─────────────────────────
     Navy remains the anchor. Accents appear as chips, 3-4px bars, eyebrows,
     and soft tint washes; never as large saturated fills. Red stays reserved
     for risk semantics. */
  --accent-teal: #0D9488;   --accent-teal-tint: #CCFBF1;   --accent-teal-ink: #115E59;
  --accent-amber: #B45309;  --accent-amber-tint: #FEF3C7;  --accent-amber-ink: #92400E;
  --accent-plum: #6D28D9;   --accent-plum-tint: #EDE9FE;   --accent-plum-ink: #5B21B6;
  --accent-sage: #4D7C0F;   --accent-sage-tint: #ECFCCB;

  /* Per-module identity (mirrors js/modules specs' accentColor) */
  --mod-orientation: var(--accent-teal);
  --mod-narrative: #2563EB;
  --mod-plan: var(--accent-amber);
  --mod-capstone: var(--accent-plum);

  /* Progress bar pairing (client vs supervision) */
  --progress-client: #2563EB;
  --progress-supervision: var(--accent-amber);
}

/* ── Base typography + page chrome ──────────────────────────────────────── */
html, body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Single sans family — no serif headings. Hierarchy via weight + size. */
h1, h2, h3 {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

/* ── Top navigation (Figma spec, rev 4) ─────────────────────────────────
   Height 72px. Vertical gradient #1E3A8A → #1E40AF. Drop shadow +
   subtle bottom border. 24px horizontal padding. */
.top-nav {
  height: 72px;
  background: var(--gradient-header);
  box-shadow: var(--shadow-header);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  color: white;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top-nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: white;
  text-decoration: none;
  transition: opacity 0.15s;
}
.top-nav-brand:hover { opacity: 0.92; }
.brand-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: white;
}
.brand-tag {
  font-size: 12.5px;
  font-weight: 400;
  opacity: 0.82;
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.top-nav-links {
  display: flex;
  gap: 10px;
  font-size: 14px;
}
.top-nav-links a {
  color: white;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 500;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.top-nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}
.top-nav-links a.active {
  /* Solid white pill so the current location is unmistakable (Tier 1.8). */
  background: #FFFFFF;
  color: var(--primary-deep);
  border-color: #FFFFFF;
  font-weight: 600;
}

/* ── Profile avatar in nav (renders photo or initials) ───────────────────── */
.nav-profile-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6 0%, #1E3A8A 100%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-weight: 700;
  font-size: 0.92rem;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.35);
  padding: 0 !important;
  transition: transform 0.12s, border-color 0.15s;
  flex-shrink: 0;
}
.nav-profile-avatar:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.65);
  background: linear-gradient(135deg, #3B82F6 0%, #1E3A8A 100%) !important;
}
.nav-profile-avatar.active {
  border-color: white;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.nav-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nav-profile-avatar .initials {
  text-transform: uppercase;
}

/* Session pill (Figma spec) — appears in the center of the live Daniel
   page header, showing the current client. Optional element; pages that
   don't need it just don't render it. */
.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 6px 16px;
  color: white;
  font-size: 15px;
}
.session-pill img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────
   3D button family (bevel highlight + bottom edge + drop shadow)

   Three variants:
     .btn-3d-primary  — brand blue, for primary actions
     .btn-cta         — pill-shaped green, for "Connect" / "Submit" CTAs
     .btn-3d-secondary — white card, for secondary actions
   ──────────────────────────────────────────────────────────────────────── */

.btn-3d,
.btn-3d-primary {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  color: white;
  background: var(--gradient-primary-btn);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 2px 0 rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(30, 64, 175, 0.28);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.btn-3d:hover:not(:disabled),
.btn-3d-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--gradient-primary-btn-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 3px 0 rgba(0, 0, 0, 0.14),
    0 5px 14px rgba(30, 64, 175, 0.34);
}
.btn-3d:active:not(:disabled),
.btn-3d-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.10);
}
.btn-3d:disabled,
.btn-3d-primary:disabled {
  background: var(--gradient-disabled-btn);
  color: rgba(255, 255, 255, 0.85);
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Green pill CTA */
.btn-cta {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  color: white;
  background: var(--gradient-cta-btn);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 2px 0 rgba(0, 0, 0, 0.12),
    0 4px 14px rgba(16, 185, 129, 0.34);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.btn-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--gradient-cta-btn-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 3px 0 rgba(0, 0, 0, 0.14),
    0 6px 18px rgba(16, 185, 129, 0.40);
}
.btn-cta:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(0, 0, 0, 0.10);
}
.btn-cta:disabled {
  background: var(--gradient-disabled-btn);
  color: rgba(255, 255, 255, 0.85);
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(0, 0, 0, 0.06);
}

/* White secondary */
.btn-3d-secondary {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  background: var(--gradient-secondary-btn);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 2px 0 rgba(0, 0, 0, 0.05),
    0 2px 6px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.btn-3d-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 3px 0 rgba(0, 0, 0, 0.07),
    0 4px 10px rgba(15, 23, 42, 0.12);
}
.btn-3d-secondary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.05);
}
.btn-3d-secondary:disabled {
  background: var(--bg-paper-warm);
  color: var(--ink-light);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Accessibility helpers (Tier 3.7) ─────────────────────────────────────
   Skip link: first element in <body>, visually hidden until focused, jumps
   keyboard users straight to the <main id="main"> landmark. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100000;
  background: var(--primary);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.3);
}

/* Screen-reader-only text (e.g. "(opens in new tab)" on new-tab links). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Global keyboard focus indicator. Pages may override where the default
   would be invisible (e.g. white-on-navy chrome), but never with
   outline: none unless a visible replacement is provided. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #1E40AF;
  outline-offset: 2px;
}

/* Respect the user's reduced-motion preference: collapse transitions and
   animations (incl. the module page's mic-pulse) to effectively none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Site-wide footer (Commit 8). */
.site-footer { margin-top: 1rem; padding: 0.4rem 1rem 0.6rem; border-top: 1px solid var(--rule, #E2E8F0); text-align: center; font-size: 0.78rem; color: #475569; background: var(--bg-page, #FAF8F5); }
.site-footer-inner { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 720px; }
.site-footer a { color: #1E40AF; text-decoration: underline; }
.site-footer a:hover { color: var(--primary-deep, #1E3A8A); }
.site-footer-sep { color: var(--ink-light, #6a6862); opacity: 0.6; }
/* Third footer row: on small screens the fixed corner links (consent /
   content notice) relocate here so they never overlap content (Tier 4.4). */
.site-footer-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; align-items: center; padding: 0.15rem 0 0.3rem; }
.site-footer-links a { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 8px; font-size: 0.75rem; }

/* ── Responsive shared chrome (canonical breakpoint: 768px) ──────────────────
   The nav previously had no media queries at all, so at phone widths the
   seven-item link row overflowed the viewport and clipped (Tier 4.1). */
@media (max-width: 768px) {
  .top-nav {
    height: auto;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    gap: 0.4rem 0.75rem;
  }
  .top-nav-links {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .top-nav-links a {
    padding: 9px 12px; /* keeps tap targets comfortable on touch screens */
  }
  .brand-tag { display: none; } /* the wordmark alone identifies the app on small screens */
}