/* ═══════════════════════════════════════════════════════════
   LearnScope.AI — Main Stylesheet (Light Glassmorphism)
   WCAG 2.1 AA compliant, targeting AAA where possible
   ADA Section 508 compliant
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  /* ── Base surfaces ── */
  --page-bg:     #f0f0fa;           /* soft lavender-white page  */
  --surface-1:   #ffffff;           /* cards, panels             */
  --surface-2:   #f5f4ff;           /* raised / inner surfaces   */
  --surface-3:   #ede9fe;           /* hover states              */

  /* ── Text ── */
  --text-primary:   #0f0f1a;        /* 18:1 on white — AAA  */
  --text-secondary: #3d3a55;        /* 9.5:1                */
  --text-muted:     #7c78a0;        /* 4.6:1 — AA           */

  /* ── Accents ── */
  --indigo:        #5a54f0;         /* primary brand        */
  --indigo-dark:   #4338ca;         /* hover / pressed      */
  --indigo-dim:    rgba(90,84,240,.10);
  --indigo-border: rgba(90,84,240,.25);
  --violet:        #7c3aed;
  --cyan:          #0ea5e9;
  --rose:          #f43f5e;
  --green:         #059669;
  --amber:         #d97706;
  --red:           #dc2626;

  /* ── Gradient presets ── */
  --grad-brand:  linear-gradient(135deg, #5a54f0 0%, #7c3aed 100%);
  --grad-cyan:   linear-gradient(135deg, #0ea5e9 0%, #5a54f0 100%);
  --grad-rose:   linear-gradient(135deg, #f472b6 0%, #f43f5e 100%);
  --grad-green:  linear-gradient(135deg, #059669 0%, #0ea5e9 100%);
  --grad-warm:   linear-gradient(135deg, #d97706 0%, #f43f5e 100%);

  /* ── Glass surfaces (light edition) ── */
  --glass:               rgba(255,255,255,0.65);
  --glass-md:            rgba(255,255,255,0.80);
  --glass-strong:        rgba(255,255,255,0.92);
  --glass-border:        rgba(90,84,240,0.12);
  --glass-border-strong: rgba(90,84,240,0.28);

  /* ── Legacy aliases ── */
  --navy:          var(--page-bg);
  --navy-card:     var(--surface-2);
  --navy-raise:    var(--surface-3);
  --cream:         var(--text-primary);
  --cream-sub:     var(--text-secondary);
  --cream-muted:   var(--text-muted);
  --copper:        var(--indigo);
  --copper-dim:    var(--indigo-dim);
  --copper-border: var(--indigo-border);
  --gold:          var(--violet);
  --border:        rgba(90,84,240,0.10);
  --border-warm:   rgba(90,84,240,0.25);

  /* ── Typography ── */
  --font-serif: 'Syne', system-ui, sans-serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Shape & motion ── */
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --ease: cubic-bezier(.4,0,.2,1);

  /* ── Backdrop blur ── */
  --blur-sm: blur(12px);
  --blur-md: blur(24px);
  --blur-lg: blur(40px);
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Skip navigation ───────────────────────────────────────────────── */
.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: var(--grad-brand); color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 500; font-size: 0.9rem;
  z-index: 1000; transition: top 0.2s;
}
.skip-nav:focus { top: 0; }

/* ── Page-level layout (avatar-bg pages) ───────────────────────────── */
.page-index,
.page-question,
.page-analysing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-index main,
.page-question main,
.page-analysing main {
  flex: 1;
  display: flex;
  flex-direction: row;        /* children laid out horizontally */
  align-items: flex-end;      /* push card to bottom of the flex area */
  justify-content: flex-start;/* card stays on the left */
  padding: 0 0 2.5rem 0;
  overflow: visible;
}

/* ── Ambient background mesh ────────────────────────────────────────── */
.noise {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 10% 40%,  rgba(90,84,240,.12)  0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 15%,  rgba(124,58,237,.10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 65% 90%,  rgba(14,165,233,.08) 0%, transparent 55%),
    var(--page-bg);
  pointer-events: none; z-index: 0;
}

/* ── Accessibility helpers ─────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.btn-start {
  display: inline-flex; align-items: center; gap: 0.625rem;
  background: var(--grad-brand); color: #fff;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 500;
  padding: 0.85rem 1.75rem;
  border-radius: 100px; border: none; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
  text-decoration: none; min-height: 44px;
  box-shadow: 0 4px 20px rgba(90,84,240,.30);
  position: relative; overflow: hidden;
}
.btn-start::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0); transition: background 0.2s;
  border-radius: inherit;
}
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(90,84,240,.40); }
.btn-start:hover::before { background: rgba(255,255,255,.10); }
.btn-start:active { transform: translateY(0); }
.btn-start:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost-sm {
  display: inline-flex; align-items: center;
  background: var(--glass); color: var(--text-secondary);
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 400;
  padding: 0.6rem 1.2rem; border-radius: 100px;
  border: 1px solid var(--glass-border);
  cursor: pointer; backdrop-filter: var(--blur-sm);
  transition: all 0.2s; min-height: 44px;
}
.btn-ghost-sm:hover, .btn-ghost-sm:focus {
  color: var(--indigo); border-color: var(--indigo-border);
  background: var(--indigo-dim);
}

.btn-send {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--grad-brand); color: #fff;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
  padding: 0.65rem 1.25rem; border-radius: 100px;
  border: none; cursor: pointer; min-height: 44px;
  transition: opacity 0.2s, transform 0.2s var(--ease);
  box-shadow: 0 2px 14px rgba(90,84,240,.28);
}
.btn-send:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-send:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════════════ */
.site-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 3rem;
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: var(--blur-sm);
  background: rgba(255,255,255,0.70);
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-dot {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
}
.header-tag {
  font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.exit-link {
  font-size: 0.8rem; color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5rem 1rem; border-radius: var(--r); transition: color 0.2s;
}
.exit-link:hover, .exit-link:focus { color: var(--indigo); }

/* ══════════════════════════════════════════════════════════════════
   AVATAR IMAGES
   ══════════════════════════════════════════════════════════════════ */
.avatar-svg {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 5%;
  transform: scale(1.35); transform-origin: center 20%;
}
.avatar-bg { position: fixed; inset: 0; z-index: 0; }
.avatar-bg-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 12%; display: block;
}
.avatar-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(240,240,250,0.38) 0%,
    rgba(240,240,250,0.18) 50%,
    rgba(240,240,250,0.30) 100%
  );
}

/* ══════════════════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════════════════ */
.page-index .site-header {
  position: relative; z-index: 10;
  background: rgba(255,255,255,0.60);
  border-bottom: 1px solid var(--glass-border);
}

.hero-chat-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;   /* don't stretch full width in parent flex */
  max-width: 480px; width: 100%;
  padding: 0 0 0 3rem; margin: 0;
}

/* Light glass card */
.chat-card,
.hero-chat-main .convo-card {
  background: var(--glass-strong);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-radius: var(--r-xl);
  padding: 1.5rem 1.75rem 1.375rem;
  box-shadow:
    0 0 0 1px var(--glass-border),
    0 16px 48px rgba(90,84,240,.10),
    inset 0 1px 0 rgba(255,255,255,0.90);
  width: 100%;
  color: var(--text-primary);
}

.advisor-chat-bubble {
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  padding: 0 !important; color: var(--text-primary) !important;
  box-shadow: none !important;
}
.advisor-chat-bubble .bubble-text {
  font-family: var(--font-sans); font-size: 1rem;
  line-height: 1.65; font-weight: 300; color: var(--text-secondary);
}
.advisor-chat-bubble .bubble-text strong { font-weight: 600; color: var(--text-primary); }
.advisor-chat-bubble .bubble-meta { color: var(--indigo) !important; margin-bottom: 0.625rem; }

.chat-cta { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.chat-cta-sub { font-size: 0.78rem; color: var(--text-muted); }

.chat-data-strip {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.65rem; color: var(--text-muted);
  letter-spacing: 0.07em; text-transform: uppercase;
}
.ds { opacity: 0.35; }

.advisor-badge {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.875rem; font-size: 0.72rem;
  color: var(--text-secondary); letter-spacing: 0.04em;
}
.avatar-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 6px rgba(5,150,105,.5);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.page-index .btn-start { background: var(--grad-brand); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   QUESTION WIZARD
   ══════════════════════════════════════════════════════════════════ */
.progress-strip {
  height: 2px; background: rgba(90,84,240,0.12);
  position: relative; z-index: 10;
}
.progress-fill {
  height: 100%; background: var(--grad-brand);
  transition: width 0.5s var(--ease);
  box-shadow: 0 0 10px rgba(90,84,240,.45);
}
.page-question .site-header {
  position: relative; z-index: 10;
  background: rgba(255,255,255,0.60);
  border-bottom: 1px solid var(--glass-border);
}
.page-question .convo-main {
  position: relative; z-index: 1;
  align-self: flex-start;   /* don't stretch full width */
  max-width: 480px; width: 100%;
  padding: 0 0 0 3rem; margin: 0;
}

/* Light glass conversation card */
.convo-card {
  background: var(--glass-strong);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-radius: var(--r-xl);
  padding: 1.5rem 1.75rem 1.375rem;
  box-shadow:
    0 0 0 1px var(--glass-border),
    0 16px 48px rgba(90,84,240,.10),
    inset 0 1px 0 rgba(255,255,255,0.90);
  width: 100%;
}
.convo-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.convo-advisor-name {
  font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--indigo); font-weight: 500;
}
.convo-step { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.06em; }
.convo-question {
  font-family: var(--font-sans); font-size: 1rem;
  line-height: 1.65; font-weight: 400; color: var(--text-primary); margin-bottom: 0;
}
.convo-divider { height: 1px; background: var(--glass-border); margin: 1rem 0; }
.bubble-meta { display: none; }
.bubble-text  { display: none; }

/* Inputs */
.user-textarea, .name-input {
  width: 100%;
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  color: var(--text-primary);
  font-family: var(--font-sans); font-size: 1rem;
  font-weight: 300; line-height: 1.6;
  padding: 1rem 1.25rem; resize: vertical; min-height: 90px;
  outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.name-input { font-family: var(--font-serif); font-size: 1.3rem; min-height: auto; resize: none; }
.user-textarea:focus, .name-input:focus {
  border-color: var(--indigo);
  background: #fff;
  box-shadow: 0 0 0 3px var(--indigo-dim);
}
.user-textarea::placeholder, .name-input::placeholder { color: var(--text-muted); font-style: italic; }

.input-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; }
.hint { font-size: 0.72rem; color: var(--text-muted); }
.field-error {
  padding: 0.625rem 1rem;
  background: rgba(220,38,38,.06);
  border: 1px solid rgba(220,38,38,.22);
  border-radius: var(--r); color: var(--red); font-size: 0.875rem;
}

/* Track pills */
.track-pill {
  font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.2rem 0.6rem;
  border-radius: 100px; border: 1px solid;
}
.track-a { color: var(--cyan);   border-color: rgba(14,165,233,.35); background: rgba(14,165,233,.08); }
.track-b { color: var(--violet); border-color: rgba(124,58,237,.35);  background: rgba(124,58,237,.08); }
.track-c { color: var(--green);  border-color: rgba(5,150,105,.35);   background: rgba(5,150,105,.08); }

/* ══════════════════════════════════════════════════════════════════
   ANALYSING PAGE
   ══════════════════════════════════════════════════════════════════ */
.page-analysing .analysing-main {
  position: relative; z-index: 1;
  align-self: flex-start;   /* don't stretch full width */
  max-width: 480px; width: 100%;
  padding: 0 0 0 3rem; margin: 0;
}
.analysing-card {
  background: var(--glass-strong);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-radius: var(--r-xl);
  padding: 2rem 1.75rem;
  box-shadow:
    0 0 0 1px var(--glass-border),
    0 20px 56px rgba(90,84,240,.12),
    inset 0 1px 0 rgba(255,255,255,0.90);
  text-align: center; width: 100%;
}
.avatar-analysing {
  width: 140px; height: 140px;
  margin: 0 auto 1.75rem;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--indigo-border);
  box-shadow: 0 0 0 4px var(--indigo-dim), 0 0 24px rgba(90,84,240,.15);
}
.analysing-title {
  font-family: var(--font-serif); font-size: 1.25rem;
  font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary);
}
.ellipsis { color: var(--indigo); }
.analysing-status {
  font-size: 0.82rem; color: var(--text-muted);
  margin-bottom: 1.25rem; min-height: 1.4em; transition: all 0.3s;
}
.steps-list { display: flex; flex-direction: column; gap: 0.375rem; text-align: left; }
.step-item {
  padding: 0.5rem 0.875rem; border-radius: 8px;
  font-size: 0.8rem; color: var(--text-muted);
  border: 1px solid transparent; transition: all 0.4s;
}
.step-item.active {
  color: var(--text-primary);
  border-color: var(--indigo-border);
  background: var(--indigo-dim);
}
.step-item.done {
  color: var(--green);
  border-color: rgba(5,150,105,.2);
  background: rgba(5,150,105,.06);
}
.step-item.done::before { content: '✓  '; }

/* ══════════════════════════════════════════════════════════════════
   REPORT PAGE
   ══════════════════════════════════════════════════════════════════ */
.page-report { background: var(--page-bg); }
.page-report .report-main {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto;
  padding: 0 2.5rem 5rem;
}
.report-hero {
  display: flex; align-items: flex-start; gap: 1.75rem;
  padding: 3rem 0 2.25rem;
  border-bottom: 1px solid var(--glass-border); margin-bottom: 2rem;
}
.avatar-report {
  width: 80px; height: 80px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--indigo-border);
  box-shadow: 0 0 0 3px var(--indigo-dim);
}
.report-eyebrow {
  font-size: 0.65rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--indigo); margin-bottom: 0.625rem;
}
.report-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 700; margin-bottom: 1rem; color: var(--text-primary);
}
.report-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.7rem; padding: 0.25rem 0.75rem;
  border-radius: 100px; border: 1px solid var(--glass-border);
  color: var(--text-secondary); letter-spacing: 0.03em;
  background: var(--glass-md);
}
.chip-track {
  border-color: var(--indigo-border); color: var(--indigo);
  background: var(--indigo-dim);
}

/* ── Impact card ── */
.impact-card {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 1.5rem; padding: 1.5rem 1.75rem;
  border-radius: var(--r); border: 1px solid;
  margin-bottom: 2rem; align-items: start;
}
.impact-label {
  font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.65; margin-bottom: 0.25rem;
}
.impact-value { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; }
.impact-outlook {
  font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 0.375rem; opacity: 0.65;
}
.impact-right { font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary); }
.impact-advice { margin-top: 0.5rem; font-style: italic; }

.impact-high        { border-color: rgba(220,38,38,.25);  background: rgba(220,38,38,.05);  color: var(--red); }
.impact-mediumhigh  { border-color: rgba(217,119,6,.25);  background: rgba(217,119,6,.05);  color: var(--amber); }
.impact-medium      { border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.05); color: var(--violet); }
.impact-low         { border-color: rgba(5,150,105,.25);  background: rgba(5,150,105,.05);  color: var(--green); }
.impact-caution     { border-color: rgba(217,119,6,.25);  background: rgba(217,119,6,.05);  color: var(--amber); }
.impact-opportunity { border-color: rgba(5,150,105,.25);  background: rgba(5,150,105,.05);  color: var(--green); }
.impact-na          { border-color: var(--glass-border);  background: var(--surface-2);     color: var(--text-muted); }

/* ── Report cards ── */
.report-cards { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.report-card {
  background: var(--surface-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 12px rgba(90,84,240,.06);
}
.report-card:hover {
  border-color: var(--indigo-border);
  box-shadow: 0 6px 32px rgba(90,84,240,.12);
}

.card-conventional { border-left: 3px solid var(--green); }
.card-discovery    { border-left: 3px solid var(--indigo); }
.card-cybersec     { border-left: 3px solid var(--violet); }
.card-impact       { border-left: 3px solid var(--amber); }
.card-context      { border-left: 3px solid var(--text-muted); }
.card-default      { border-left: 3px solid var(--glass-border); }

.card-header {
  padding: 1rem 1.5rem 0;
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.card-conventional .card-header { color: var(--green); }
.card-discovery    .card-header { color: var(--indigo); }
.card-cybersec     .card-header { color: var(--violet); }
.card-impact       .card-header { color: var(--amber); }

.card-body { padding: 1rem 1.5rem 1.5rem; }
.card-field { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.625rem; }
.field-label {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); min-width: 5rem; flex-shrink: 0; padding-top: 0.125rem;
}
.field-val { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.4; color: var(--text-primary); }
.card-highlight .field-val { color: var(--indigo); font-weight: 600; }

.card-nextstep {
  margin-top: 1rem; padding: 0.75rem 1rem;
  background: var(--indigo-dim); border-radius: var(--r);
  font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary);
  border-left: 2px solid var(--indigo);
}
.card-wage { font-size: 0.875rem; color: var(--violet); margin-top: 0.5rem; }
.card-task { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); padding-left: 1rem; margin-bottom: 0.25rem; }
.card-section-label {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.875rem; margin-bottom: 0.375rem;
}
.card-para { font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: 0.375rem; }

.card-ladder-title {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.875rem; margin-bottom: 0.625rem;
}
.ladder-rung {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(90,84,240,.08);
}
.rung-label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--indigo); min-width: 3.5rem; }
.rung-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

.report-raw {
  background: var(--surface-1); border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); padding: 2rem; margin-bottom: 2rem;
}
.report-raw pre {
  font-family: var(--font-sans); font-size: 0.9rem;
  line-height: 1.8; white-space: pre-wrap;
  color: var(--text-primary); font-weight: 300; word-break: break-word;
}
.report-actions { display: flex; gap: 1rem; align-items: center; margin-bottom: 3rem; }
.report-footer {
  text-align: center; color: var(--text-muted); font-size: 0.72rem;
  padding-top: 1.5rem; border-top: 1px solid var(--glass-border);
}

/* ══════════════════════════════════════════════════════════════════
   TRACK SELECTION CARDS
   ══════════════════════════════════════════════════════════════════ */
.track-cards { display: flex; flex-direction: column; gap: 0.625rem; }
.track-cards form { display: flex; flex-direction: column; gap: 0.625rem; }
.track-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1.125rem;
  background: rgba(255,255,255,0.75);
  backdrop-filter: var(--blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--r); cursor: pointer; text-align: left;
  transition: border-color 0.2s, transform 0.15s var(--ease), background 0.2s, box-shadow 0.2s;
  width: 100%; min-height: 60px;
  box-shadow: 0 1px 4px rgba(90,84,240,.06);
}
.track-card:hover {
  transform: translateX(3px);
  border-color: var(--indigo-border);
  background: #fff;
  box-shadow: 0 4px 16px rgba(90,84,240,.12);
}
.track-card:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.tc-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.tc-content { flex: 1; }
.tc-label { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.15rem; }
.tc-desc { font-size: 0.75rem; line-height: 1.45; color: var(--text-muted); }
.tc-arrow { font-size: 1rem; color: var(--text-muted); transition: color 0.2s, transform 0.2s; flex-shrink: 0; }
.track-card:hover .tc-arrow { color: var(--indigo); transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .avatar-status-dot { animation: none; }
}
@media (forced-colors: active) {
  .btn-start, .btn-send { border: 2px solid ButtonText; }
  .report-card { border: 1px solid CanvasText; }
  .progress-fill { background: Highlight; }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header { padding: 1.25rem 1.5rem; }
  .header-tag { display: none; }

  .page-index .hero {
    grid-template-columns: 1fr; gap: 2.5rem;
    padding: 2.5rem 1.5rem; text-align: center;
  }
  .hero-text-block { padding: 3rem 1.5rem 2rem; }
  .avatar-full { height: 360px; }
  .hero-data-strip { padding: 1rem 1.5rem; }
  .avatar-caption { left: 1.5rem; }

  .page-question .convo-main,
  .page-analysing .analysing-main { padding: 0 0 0 1.25rem; max-width: calc(100% - 1.25rem); }
  .hero-chat-main { padding: 0 0 0 1.25rem; max-width: calc(100% - 1.25rem); }
  .page-index main,
  .page-question main,
  .page-analysing main { min-height: calc(100vh - 64px); }

  .report-main { padding: 0 1.25rem 3rem; }
  .report-hero { flex-direction: column; }
  .impact-card { grid-template-columns: 1fr; }
  .analysing-card { padding: 2.5rem 1.75rem; }
}

/* ── AI disclaimer ──────────────────────────────────────────────────── */
.ai-disclaimer {
  position: relative; z-index: 2;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.6rem 1.5rem 0;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

/* On avatar pages the disclaimer sits at the very bottom, full width */
.page-index .ai-disclaimer,
.page-question .ai-disclaimer,
.page-analysing .ai-disclaimer {
  position: fixed;
  bottom: 0.6rem;
  left: 0; right: 0;
  padding: 0;
  z-index: 5;
}

/* On report page, sits below the footer line */
.page-report .ai-disclaimer {
  margin-top: 1rem;
  padding-top: 0;
  border-top: none;
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
  .noise, .site-header, .report-actions, .skip-nav { display: none; }
  body { background: white; color: #111; font-size: 12pt; }
  .report-card { border: 1px solid #ccc; background: white; break-inside: avoid; }
  .card-header, .field-label, .card-section-label { color: #555; }
  .field-val, .rung-text, .card-para, .card-task { color: #111; }
  .card-nextstep { background: #f5f5f5; border-left: 2px solid #999; color: #333; }
  .impact-card { background: #f9f9f9; border: 1px solid #ccc; color: #111; }
  .report-footer { color: #777; }
}