/* ── Global foundation ──────────────────────────────────────────────────────
   The whole app is wrapped in `.app2`, which owns the theme tokens — the SINGLE
   source of truth (see the `.app2` block below + the `data-theme="lavender|dark"`
   override blocks). `:root` keeps only a pre-paint backdrop; everything visible
   renders inside `.app2` and inherits its (themeable) tokens. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100vh; background: #ffffff; }
body { color: #18222f; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -0.02em; }

.tagline { color: var(--muted); font-size: 1.1rem; }
.lead, .note { color: var(--muted); line-height: 1.55; }
.note.small, .hint, .verify { font-size: 0.9rem; }
.hint { color: var(--muted); }
.error { color: var(--bad); } .warn { color: var(--warn); }
.loading { color: var(--muted); }

button { font: inherit; cursor: pointer; border-radius: var(--r-control); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 9px 14px; transition: .12s; }
button:hover { border-color: var(--brand-deep); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--brand-deep); border: none; color: var(--on-brand); font-weight: 600; }
button.primary:hover { background: var(--brand-hover); }
button.primary.big { padding: 13px 22px; font-size: 1rem; }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--hover); border-color: transparent; color: var(--ink); }
button.small { padding: 7px 12px; font-size: .85rem; }
.qactions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 22px; align-items: center; }
/* Structured back button sits on the left; the primary stays on the right. */
.qback { margin-right: auto; }

/* Intro */
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 18px; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots span.on { background: var(--accent); }

/* Personalise */
.ps h1 { margin-bottom: 4px; }
.ps-row { margin-top: 22px; }
.ps-row h3 { margin: 0 0 10px; color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.ps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ps-card { text-align: left; padding: 14px; }
.ps-card.selected { border-color: var(--accent); background: var(--accent-tint); }
.ps-card-title { font-weight: 600; margin-bottom: 4px; }
.ps-card-blurb { color: var(--muted); font-size: .85rem; line-height: 1.4; }

/* Assessment */
.assessment-grid { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
.progress-map { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; position: sticky; top: 18px; }
.pm-overall { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pm-overall-num { font-size: 2.2rem; font-weight: 700; }
.pm-overall-label { color: var(--muted); font-size: .8rem; }
.pm-remaining { color: var(--muted); font-size: .75rem; margin-top: 4px; }
.pm-group-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 12px 0 8px; }
.pm-domain { margin-bottom: 10px; }
.pm-domain-head { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 4px; }
.pm-pct { color: var(--muted); }
.pm-bar { height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; }
.pm-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }

/* Calm entrance per question (keyed remount triggers it) so the next-question
   swap eases in instead of snapping. Respects reduced-motion. */
.qcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; animation: q-enter .42s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes q-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qcard { animation: none; } }
.qtext { font-size: 1.35rem; line-height: 1.4; margin: 0 0 22px; }
.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--accent); height: 6px; }
.anchor { color: var(--muted); font-size: .85rem; width: 80px; }
.anchor:last-child { text-align: right; }
.slider-val { text-align: center; font-size: 2rem; font-weight: 700; margin: 10px 0; }
.slider-val span { color: var(--muted); font-size: 1rem; }
.verify { background: var(--accent-tint); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 8px; color: var(--ink); }
.freeform { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px; resize: vertical; font: inherit; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option { text-align: left; padding: 14px 16px; }
.option.selected { border-color: var(--accent); background: var(--accent-tint); }

/* Generating */
.generating { text-align: center; padding-top: 60px; }
.spinner { width: 46px; height: 46px; border: 4px solid var(--line); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 22px; animation: spin 1s linear infinite; }
.spinner.sm { width: 15px; height: 15px; border-width: 2px; margin: 0; display: inline-block; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Typing indicator (chat "thinking" dots) */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: 4px 2px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing-bounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Report (narrative markdown + safety banner; layout is .app2 .report-* ) */
.safety-banner { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad-ink); padding: 14px 18px; border-radius: 12px; margin-bottom: 18px; }
.markdown { line-height: 1.65; }
.markdown h1 { font-size: 1.9rem; margin: 8px 0 18px; }
.markdown h2 { font-size: 1.4rem; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.markdown h3 { font-size: 1.1rem; margin: 20px 0 8px; color: var(--accent); }
.markdown p { margin: 0 0 14px; }
.markdown ul { margin: 0 0 14px; padding-left: 22px; }
.markdown li { margin: 4px 0; }
.markdown ul ul { margin: 4px 0; }
/* Hanging blockquote — the Word doc's indented archetype/sub-blocks (bold label + indented body) */
.app2 .report-narrative .markdown blockquote { margin: 12px 0; padding: 2px 0 2px 16px; border-left: 2px solid color-mix(in srgb, var(--brand) 40%, var(--border-c)); color: var(--ink); }
.app2 .report-narrative .markdown blockquote p { margin: 0 0 8px; }

/* Conversation */
.chat { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; }
/* pre-line keeps the conductor's blank line between its reflection and the question,
   so the two breathe; larger, airier type on desktop for readability. */
.bubble { padding: 14px 18px; border-radius: 16px; max-width: 80%; line-height: 1.55; white-space: pre-line; }
@media (min-width: 760px) { .chat .bubble { font-size: 1.12rem; line-height: 1.7; padding: 17px 22px; } }
/* Peeled reflection + question(s): the question sits on its own line, clearly
   spaced from the empathetic lead (presentation only — see splitReply). */
.reply-lead { display: block; }
.reply-q { display: block; margin-top: 0.85em; }
/* Fade the assistant reply in so the next question eases in rather than snapping. */
.bubble.assistant.enter { animation: bubble-in 340ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bubble.assistant.enter { animation: none; } }
.bubble.assistant { background: var(--card); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.user { background: var(--brand-deep); color: var(--on-brand); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble-note { display: flex; justify-content: flex-end; margin-top: 6px; }
.bubble-note-btn { width: 26px; height: 26px; color: var(--muted); border-color: transparent; background: none; }
.bubble-note-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-input { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; }
.input-wrap { position: relative; flex: 1; display: flex; }
.chat-input textarea { flex: 1; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 12px 44px 12px 12px; resize: none; font: inherit; }

/* Speech-to-text dictation */
.mic-btn { position: absolute; right: 6px; bottom: 6px; }
.mic-btn.listening { color: var(--bad); border-color: var(--bad); animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .45); } 50% { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0); } }
.dictation-interim { margin: 6px 2px 0; color: var(--muted); font-style: italic; font-size: .9rem; }

/* History (session list) */
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.session-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.history-head-actions { display: flex; align-items: center; gap: 10px; }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.session-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
button.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; }

/* Danger buttons */
button.danger { color: var(--bad); }
button.danger:hover { border-color: var(--bad); color: var(--bad); }
button.danger-solid { background: var(--bad); border: none; color: #fff; font-weight: 600; }
button.danger-solid:hover { background: color-mix(in srgb, var(--bad) 88%, #000); border: none; }
.modal-actions.confirm { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.session-when { font-weight: 600; }
.session-sub { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; }
.session-flow { text-transform: capitalize; }
.session-scores { font-variant-numeric: tabular-nums; }
.badge { padding: 2px 9px; border-radius: 999px; font-size: .76rem; border: 1px solid var(--line); }
.badge.done { color: var(--score-strong-ink); border-color: color-mix(in srgb, var(--good) 35%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.badge.ready { color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand-deep) 35%, transparent); background: var(--accent-tint); }
.badge.active { color: var(--score-low-ink); border-color: color-mix(in srgb, var(--warn) 38%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }

/* Settings gear (floating, bottom-right) + modal */
.settings-fab {
  position: fixed; bottom: 18px; right: 18px; z-index: 50;
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; line-height: 1; color: var(--muted);
  background: var(--card2); border: 1px solid var(--line);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--navy) 12%, transparent);
}
.settings-fab:hover { border-color: var(--accent); color: var(--ink); }
.modal-overlay {
  position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--navy) 40%, transparent);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(2px);
}
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: 100%; max-width: 460px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 1.3rem; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 1rem; padding: 6px 8px; }
.modal-close:hover { color: var(--ink); border: none; }
.modal .provider-picker { margin: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
.modal-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.setting-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-weight: 600; }
.setting-value { color: var(--accent); }
.modal-section input[type=range] { width: 100%; accent-color: var(--accent); }
.setting-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; margin-top: 4px; }

/* Provider picker */
.provider-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 26px; }
.pp-label { color: var(--muted); font-size: .85rem; }
.pp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-chip { display: flex; align-items: center; gap: 7px; padding: 7px 13px; font-size: .85rem; }
.pp-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.pp-chip.disabled { opacity: .4; }
.pp-chip:not(.disabled) .dot { background: var(--good); }
.pp-chip.active { border-color: var(--accent); background: var(--accent-tint); }
.pp-note { color: var(--muted); font-size: .8rem; }

@media (max-width: 760px) {
  .assessment-grid { grid-template-columns: 1fr; }
  .progress-map { position: static; }
  .ps-cards { grid-template-columns: 1fr; }
}

/* ── End-of-assessment review (conversational flow) ─────────────────── */
.review h1 { margin-bottom: 6px; }
.review-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 22px 0 26px; }
.review-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.review-card.uncertain { border-color: var(--warn); }
.review-card-head { display: flex; align-items: baseline; gap: 10px; }
.review-card-head h2 { font-size: 1.05rem; margin: 0; }
.review-flag { margin-left: auto; font-size: 0.72rem; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.review-summary { color: var(--ink); line-height: 1.5; margin: 8px 0 12px; }
.review-card .ghost.small { padding: 5px 12px; font-size: 0.85rem; }

/* ── Slider: neutral/untouched until the user interacts ─────────────── */
input[type="range"].untouched { opacity: 0.55; }
.slider-hint { color: var(--muted); font-size: 0.9rem; }

/* Dev-only demo shortcut (never shown in prod) */
.dev-demo { margin-top: 22px; opacity: 0.7; }

/* ── Auth (login / signup) ──────────────────────────────────────────── */
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px; margin-top: 8px; }
.auth-card h1 { font-size: 1.6rem; margin: 0 0 6px; }
.auth-card .lead { margin: 0 0 20px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tabs .tab { flex: 1; }
.auth-tabs .tab.on { border-color: var(--accent); background: var(--accent-tint); color: var(--ink); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.auth-form .opt { color: var(--muted); font-weight: 400; }
.auth-form input { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; }
.auth-form input:focus { outline: none; border-color: var(--accent); }
.auth-form .primary.big { margin-top: 4px; justify-content: center; display: inline-flex; gap: 8px; align-items: center; }
.auth-confidential { color: var(--muted); font-size: .82rem; margin-top: 18px; text-align: center; }

/* ── Auth: confidentiality reassurance (prominent, not fine-print) ───── */
.auth-confidential {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding: 14px 16px;
  background: var(--accent-tint); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px;
}
.auth-confidential .lock { font-size: 1.5rem; line-height: 1; }
.auth-confidential p { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.45; }

/* ── Intro: its own welcoming moment (distinct from assessment cards) ── */
.intro-moment {
  min-height: 56vh; display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 24px 8px;
  background: radial-gradient(620px 320px at 50% 30%, color-mix(in srgb, var(--brand-deep) 5%, transparent), transparent);
}
.intro-hero {
  font-size: clamp(1.7rem, 4.4vw, 2.4rem); line-height: 1.25; font-weight: 500;
  letter-spacing: -0.02em; max-width: 26ch; margin: 0 auto;
}
.intro-statement {
  max-width: 56ch; margin: 0 auto; text-align: left; font-size: 1.15rem; line-height: 1.6;
  animation: fade-in .5s ease both;
}
.intro-actions { justify-content: center; min-height: 56px; }
/* Beta-onboarding: compact, skippable orientation card before the warm intro screens. */
.intro-orient { max-width: 480px; margin: 0 auto; text-align: left; }
.intro-orient h1 { font-size: clamp(1.5rem, 3.4vw, 1.9rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-align: center; margin: 0 0 24px; }
.intro-orient ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.intro-orient li { position: relative; padding-left: 24px; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.intro-orient li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.intro-skip { color: var(--muted); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* TypedText: calm top-to-bottom fade-in. Each paragraph is laid out up front and
   ONLY opacity/transform animate (per-paragraph delay set inline), so there is zero
   reflow during the entrance. A single paragraph = one 500ms fade; multiple cascade. */
.fade-line { display: block; opacity: 0; animation: line-fade 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.fade-line + .fade-line { margin-top: 0.5em; }
@keyframes line-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fade-line { opacity: 1; animation: none; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MindAmp design system v2 — built fresh to the bFluid craft bar.
   Construction studied from design-reference/ (shadcn "base-nova", Tailwind v4,
   Inter): pure-white surfaces, near-black ink, crisp 1px neutral ring borders
   with NO shadows, restrained compact type (14px body · 16px card titles · 20px
   page title · 24px stat numbers), tight spacing, ONE accent + a small chart
   palette, pill badges, neutral avatars. Scoped under `.app2` (the /?design
   sample) until global rollout. PALETTE = a single swappable layer (Tier 1).
   ════════════════════════════════════════════════════════════════════════ */
.app2 {
  /* Tier 1 — raw brand + neutrals (ALL a palette variant redefines) */
  --brand:       #0078ff;   /* primary action · dark end of data-viz */
  --brand-light: #00b4ff;
  --brand-cyan:  #07e0e5;   /* tiny accent only — never a chart fill */
  --ink:         #18222f;   /* near-black navy — body + headings (high contrast) */
  --ink-soft:    #5b6675;   /* secondary text (cool neutral grey) */
  --canvas:      #ffffff;
  --sidebar-bg:  #f7f8fb;
  --surface:     #ffffff;
  --hover:       #f3f5f8;
  --border-c:    #e6e9ee;   /* crisp neutral hairline */
  --good: #16a34a; --warn: #d97706; --bad: #dc2626;

  /* Tier 2 — derived (components reference ONLY these) */
  --brand-tint:  color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-press: color-mix(in srgb, var(--brand) 88%, #000);
  --on-brand: #ffffff;
  /* Primary CTA — defaults to brand; a theme may override (dark sets a distinct CTA). */
  --cta: var(--brand);
  --cta-press: color-mix(in srgb, var(--cta) 88%, #000);
  --bad-ink: #9a1c1c; /* readable red ink (safety banner) — themed per palette */
  --navy: #0b1b30;     /* fixed dark — modal scrim + FAB shadow (theme-independent) */
  --c-strong: var(--good); --c-mid: var(--brand); --c-low: var(--warn);
  --c-strong-ink: #15803d; --c-low-ink: #b45309;
  --r-control: 8px; --r-card: 12px; --r-pill: 999px;
  /* Legacy aliases — every token the inherited screens reference, mapped to the
     fresh palette so all existing component classes re-skin consistently when
     rendered inside `.app2`. (Global rollout: the whole app is wrapped in .app2.) */
  --bg: var(--canvas); --bg2: var(--hover); --card: var(--surface); --card2: var(--hover);
  --line: var(--border-c); --muted: var(--ink-soft);
  --accent: var(--brand); --accent2: var(--brand-light);
  --accent-tint: var(--brand-tint); --brand-deep: var(--brand); --brand-hover: var(--brand-press);
  --score-strong: var(--c-strong); --score-mid: var(--c-mid); --score-low: var(--c-low);
  --score-strong-ink: var(--c-strong-ink); --score-low-ink: var(--c-low-ink);
  --ring-track: #e9edf2;
  /* Home washes/tints — derived from brand + surface so every theme (cyan/lavender/
     dark) inherits automatically; components reference ONLY these, never raw hex. */
  --home-tint:  color-mix(in srgb, var(--brand) 3%, var(--surface));   /* faint surface variation */
  --home-shard: color-mix(in srgb, var(--brand) 22%, var(--surface));  /* soft brand shard (avatar/dot bg) */
  --home-dot:   color-mix(in srgb, var(--brand) 26%, var(--surface));  /* inactive quote dot */
  --home-hero-bg:
    radial-gradient(90% 160% at 88% -20%, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 60%),
    radial-gradient(70% 140% at 8% 120%, color-mix(in srgb, var(--brand) 12%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 3%, var(--surface)) 0%, var(--sidebar-bg) 100%);

  position: fixed; inset: 0; overflow: auto;
  background: var(--canvas); color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased;
}
.app2 *, .app2 *::before, .app2 *::after { box-sizing: border-box; }
.app2 h1, .app2 h2, .app2 h3 { margin: 0; color: var(--ink); letter-spacing: -0.02em; }

/* Shell */
.app2 .shell2 { display: flex; min-height: 100vh; }
.app2 .side { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--border-c); }
.app2 .side-logo { display: flex; align-items: center; gap: 9px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--border-c); }
.app2 .side-logo .wm { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
/* Agency lockup/mark images (lavender/dark themes) */
.app2 .brand-lockup-img { height: 24px; width: auto; display: block; }
.app2 .brand-mark-img { height: 26px; width: auto; display: block; }
.app2 .side-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; }
.app2 .nav { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 12px; border: 0; background: none; border-radius: var(--r-control); color: var(--ink-soft); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.app2 .nav:hover { background: var(--hover); color: var(--ink); }
.app2 .nav.on { background: var(--brand-tint); color: var(--brand); }
.app2 .nav svg { width: 17px; height: 17px; flex-shrink: 0; }
.app2 .side-foot { border-top: 1px solid var(--border-c); padding: 10px; }
.app2 .who { display: flex; align-items: center; gap: 10px; padding: 6px; }
.app2 .who .av { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--hover); border: 1px solid var(--border-c); color: var(--ink-soft); display: grid; place-items: center; font-size: .72rem; font-weight: 600; }
.app2 .who .nm { font-size: .8125rem; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app2 .who .em { font-size: .75rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app2 .signout { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 2px; padding: 8px 12px; border: 0; background: none; border-radius: var(--r-control); color: var(--ink-soft); font: inherit; font-size: .8125rem; cursor: pointer; }
.app2 .signout:hover { background: var(--hover); color: var(--ink); }
.app2 .signout svg { width: 16px; height: 16px; }
/* Footer row: sign-out + the user-facing Light/Dark toggle (B8) side by side. */
.app2 .side-foot-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.app2 .side-foot-row .signout { width: auto; flex: 1; margin-top: 0; }
.app2 .theme-toggle { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 8px 11px; border: 1px solid var(--border-c); background: none; border-radius: var(--r-control); color: var(--ink-soft); font: inherit; font-size: .8125rem; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s; }
.app2 .theme-toggle:hover { background: var(--hover); color: var(--ink); border-color: var(--brand); }
.app2 .theme-toggle svg { width: 16px; height: 16px; }

/* Main + page header */
.app2 .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app2 .phead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 32px; border-bottom: 1px solid var(--border-c); }
.app2 .phead h1 { font-size: 1.25rem; font-weight: 600; }
.app2 .phead .sub { color: var(--ink-soft); font-size: .875rem; margin-top: 3px; }
.app2 .pbody { padding: 28px 32px 64px; display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 1180px; }

/* Buttons */
.app2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--border-c); background: var(--surface); color: var(--ink); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: .12s; }
.app2 .btn:hover { background: var(--hover); }
.app2 .btn svg { width: 16px; height: 16px; }
.app2 .btn.primary { background: var(--cta); border-color: transparent; color: var(--on-brand); }
.app2 .btn.primary:hover { background: var(--cta-press); }
.app2 .btn.ghost { background: none; border-color: transparent; }
.app2 .btn.ghost:hover { background: var(--hover); }
.app2 .btn.sm { height: 30px; padding: 0 11px; font-size: .8125rem; }

/* Card */
.app2 .card { background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); }
.app2 .card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-c); }
.app2 .card-h .t { font-size: 1rem; font-weight: 600; }
.app2 .card-h .d { font-size: .8125rem; color: var(--ink-soft); margin-top: 2px; }
.app2 .card-b { padding: 20px; }

/* Stat tiles */
.app2 .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.app2 .tile { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); padding: 18px 20px; }
.app2 .tile .ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-control); background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.app2 .tile .ic svg { width: 20px; height: 20px; }
.app2 .tile .v { font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.app2 .tile .l { font-size: .8125rem; color: var(--ink-soft); margin-top: 5px; }
/* Headline descriptor — one short, performance-positive line. Deliberately neutral
   colour (not band-coloured) so the hero carries no population-ranked verdict. */
.app2 .tile .desc { font-size: .8125rem; font-weight: 500; color: var(--ink); margin-top: 4px; }

/* Badges (pills) */
.app2 .bdg { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--r-pill); font-size: .6875rem; font-weight: 600; border: 1px solid transparent; }
.app2 .bdg.strong { color: var(--c-strong-ink); background: color-mix(in srgb, var(--good) 12%, transparent); }
.app2 .bdg.mid { color: var(--brand); background: var(--brand-tint); }
.app2 .bdg.low { color: var(--c-low-ink); background: color-mix(in srgb, var(--warn) 14%, transparent); }

/* Recent rows */
.app2 .rows { display: flex; flex-direction: column; }
.app2 .row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-top: 1px solid var(--border-c); }
.app2 .row:first-child { border-top: 0; }
.app2 .row .rt { font-weight: 500; font-size: .875rem; }
.app2 .row .rs { color: var(--ink-soft); font-size: .8125rem; margin-top: 2px; }
.app2 .row .sp { margin-left: auto; }

.app2 .placeholder h1 { font-size: 1.25rem; font-weight: 600; }
.app2 .placeholder .sub { color: var(--ink-soft); font-size: .875rem; margin-top: 6px; }

/* Metrics: radar hero (six-area shape) + per-area bars (detail) + roll-ups */
.app2 .rollups { display: flex; gap: 26px; }
.app2 .rollups .ru b { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.app2 .rollups .ru span { font-size: .75rem; color: var(--ink-soft); }
.app2 .metrics-b { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.app2 .radar { width: 300px; max-width: 100%; height: auto; display: block; margin: 0 auto; overflow: visible; }
.app2 .radar-grid { fill: none; stroke: var(--border-c); stroke-width: 1; }
.app2 .radar-spoke { stroke: var(--border-c); stroke-width: 1; }
.app2 .radar-area { fill: color-mix(in srgb, var(--brand) 16%, transparent); stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.app2 .radar-dot { fill: var(--brand); }
.app2 .radar-label { fill: var(--ink-soft); font-size: 11px; font-weight: 500; }
.app2 .areas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.app2 .abar { padding: 9px 0; }
.app2 .abar-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.app2 .abar-name { font-size: .875rem; font-weight: 500; }
.app2 .abar-num { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.app2 .abar-track { position: relative; height: 6px; background: var(--ring-track); border-radius: 999px; overflow: hidden; margin: 8px 0 5px; }
.app2 .abar-fill { height: 100%; border-radius: 999px; }
/* Midpoint "typical" marker — per-area bars only (never the headline roll-ups). */
.app2 .abar-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); background: color-mix(in srgb, var(--ink) 38%, transparent); z-index: 1; }
.app2 .abar-tag { font-size: .75rem; color: var(--ink-soft); }
.app2 .abar-tag.strong { color: var(--c-strong-ink); }
.app2 .abar-tag.low { color: var(--c-low-ink); }
.app2 .metrics-legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .75rem; color: var(--ink-soft); }
.app2 .legend-tick { width: 1.5px; height: 12px; flex-shrink: 0; border-radius: 1px; background: color-mix(in srgb, var(--ink) 38%, transparent); }
@media (max-width: 760px) {
  .app2 .metrics-b { grid-template-columns: 1fr; gap: 24px; }
  .app2 .areas { grid-template-columns: 1fr; }
}

/* ── Focus mode (auth + assessment flow): no sidebar, centred, slim header ── */
.app2 .focus { min-height: 100vh; display: flex; flex-direction: column; }
.app2 .focus-head { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-bottom: 1px solid var(--border-c); flex-shrink: 0; }
.app2 .focus-head .wm { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.app2 .focus-head .spacer { flex: 1; }
.app2 .focus-body { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 36px 24px 72px; }
.app2 .focus-body.wide { max-width: 1080px; }
.app2 .focus-body.narrow { max-width: 480px; padding-top: 56px; }

/* Report screen (in the sidebar shell): metrics hero, then the narrative */
.app2 .report-body { display: flex; flex-direction: column; gap: 24px; }
.app2 .report-narrative { background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); padding: 28px 32px; }
.app2 .report-narrative .markdown { line-height: 1.7; }
.app2 .report-narrative .markdown h1 { font-size: 1.5rem; margin: 4px 0 16px; }
.app2 .report-narrative .markdown h2 { font-size: 1.15rem; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-c); }
.app2 .report-narrative .markdown h3 { font-size: 1rem; color: var(--ink); margin: 18px 0 8px; }

/* Report → Plan hand-off CTA (closes the assess → understand → improve loop) */
.app2 .report-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 11%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); border-radius: var(--r-card); padding: 24px 28px; }
.app2 .report-cta-text { min-width: 0; flex: 1 1 320px; }
.app2 .report-cta-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.app2 .report-cta-h { font-size: 1.25rem; font-weight: 600; }
.app2 .report-cta-p { font-size: .9rem; color: var(--ink-soft); margin: 6px 0 0; max-width: 62ch; line-height: 1.55; }
.app2 .report-cta .btn.big { height: 44px; padding: 0 22px; font-size: .95rem; flex-shrink: 0; }
/* Beta-feedback prompt (only when MINDAMP_FEEDBACK_URL is set). Subtle, centred. */
.app2 .report-feedback { text-align: center; font-size: .85rem; color: var(--ink-soft); margin: 22px 0 0; }
.app2 .report-feedback a { color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }
.app2 .report-feedback a:hover { text-decoration: underline; }

/* ── Org dashboard ──────────────────────────────────────────────────────── */
.app2 .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.app2 .col-4 { grid-column: span 4; } .app2 .col-6 { grid-column: span 6; }
.app2 .col-8 { grid-column: span 8; } .app2 .col-12 { grid-column: span 12; }
@media (max-width: 900px) { .app2 .dash-grid > [class*="col-"] { grid-column: 1 / -1; } }
.app2 .privacy-note { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-soft); }
.app2 .privacy-note svg { width: 15px; height: 15px; color: var(--good); }
.app2 .filters { display: flex; flex-wrap: wrap; gap: 8px; }
.app2 .chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--border-c); background: var(--surface); font-size: .8125rem; color: var(--ink-soft); cursor: pointer; }
.app2 .chip.on { background: var(--brand-tint); border-color: transparent; color: var(--brand); font-weight: 500; }
.app2 .kpi { font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.app2 .kpi-sub { font-size: .8125rem; color: var(--ink-soft); margin-top: 6px; }
.app2 .driver { padding: 13px 0; border-top: 1px solid var(--border-c); }
.app2 .driver:first-child { border-top: 0; }
.app2 .driver-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.app2 .driver-h .nm { font-size: .875rem; font-weight: 500; }
.app2 .driver-h .vl { font-size: .8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.app2 .meter { height: 8px; border-radius: 999px; background: var(--ring-track); overflow: hidden; }
.app2 .meter > div { height: 100%; border-radius: 999px; }
.app2 .dist { display: flex; height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border-c); }
.app2 .dist > span { display: block; height: 100%; }
.app2 .legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .78rem; color: var(--ink-soft); }
.app2 .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.app2 .ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.app2 .ind { border: 1px solid var(--border-c); border-radius: var(--r-control); padding: 14px; }
.app2 .ind .iv { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.app2 .ind .il { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
.app2 .tag-measured, .app2 .tag-derived { font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.app2 .tag-measured { color: var(--brand); background: var(--brand-tint); }
.app2 .tag-derived, .app2 .tag-inferred { color: var(--ink-soft); background: var(--hover); }

/* Hero band — the three indices, heavier than the detail panels below */
.app2 .dash-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.app2 .hcard { background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); padding: 22px 24px; }
.app2 .hcard .hl { font-size: .8125rem; font-weight: 500; color: var(--ink-soft); }
.app2 .hcard .hv { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1; margin-top: 12px; }
.app2 .hcard .hd { margin-top: 12px; }
.app2 .delta { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.app2 .delta.up { color: var(--c-strong-ink); background: color-mix(in srgb, var(--good) 12%, transparent); }
.app2 .delta.down { color: var(--c-low-ink); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.app2 .delta.flat { color: var(--ink-soft); background: var(--hover); }
@media (max-width: 760px) { .app2 .dash-hero { grid-template-columns: 1fr; } }

/* Trend chart */
.app2 .trend { width: 100%; height: auto; display: block; overflow: visible; }
.app2 .trend .grid { stroke: var(--border-c); stroke-width: 1; }
.app2 .trend .axis { fill: var(--ink-soft); font-size: 11px; }
.app2 .trend .lineW { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.app2 .trend .lineP { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.app2 .trend .dotW { fill: var(--brand); } .app2 .trend .dotP { fill: var(--ink); }
.app2 .trend-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app2 .trend-legend { display: flex; gap: 16px; font-size: .8rem; color: var(--ink-soft); }
.app2 .trend-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.app2 .trend-cap { font-size: .8125rem; color: var(--ink-soft); margin-top: 10px; }

/* Privacy-guard state (narrow filter combos) */
.app2 .guard-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r-card); padding: 26px 28px; color: var(--ink-soft); }
.app2 .guard-card svg { width: 22px; height: 22px; color: var(--ink-soft); flex-shrink: 0; }
.app2 .guard-card strong { color: var(--ink); display: block; margin-bottom: 3px; }
.app2 details > summary::-webkit-details-marker { display: none; }
.app2 details[open] .card-h { border-bottom: 1px solid var(--border-c); }
/* Clear expand/collapse affordance on the dashboard deep-dives (the native marker is
   hidden): a chevron that rotates from ▸ to ▾ on open. */
.app2 .dd-summary { align-items: center; }
.app2 .dd-summary > div:first-child { flex: 1; }
.app2 .dd-chev { flex-shrink: 0; color: var(--ink-soft); transition: transform .2s ease; }
.app2 details[open] .dd-summary .dd-chev { transform: rotate(90deg); }

/* ── Content library ────────────────────────────────────────────────────── */
.app2 .lib-cat { display: flex; flex-direction: column; gap: 14px; }
.app2 .lib-cat-h { display: flex; align-items: baseline; gap: 10px; }
.app2 .lib-cat-h h2 { font-size: 1.0625rem; font-weight: 600; }
.app2 .lib-cat-h .ct { font-size: .78rem; color: var(--ink-soft); }
.app2 .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.app2 .lib-card { display: flex; flex-direction: column; text-align: left; background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); padding: 0; overflow: hidden; cursor: pointer; transition: border-color .12s; font: inherit; color: inherit; }
.app2 .lib-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
/* Card image — structured slot, empty placeholder for now (Figma assets later) */
.app2 .lib-card-img { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--hover); border-bottom: 1px solid var(--border-c); color: color-mix(in srgb, var(--ink) 20%, transparent); }
.app2 .lib-card-img svg { width: 26px; height: 26px; }
.app2 .lib-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* Branded placeholder (until a real image is dropped in) — intentional, not a missing-image icon */
.app2 .lib-card-img-ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, var(--brand) 4%, var(--surface))); color: color-mix(in srgb, var(--brand) 80%, var(--ink)); }
.app2 .lib-card-img-ph svg { width: 30px; height: 30px; opacity: .85; }
.app2 .lib-card-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; }
.app2 .lib-card:hover .lib-card-body { background: color-mix(in srgb, var(--brand) 3%, var(--surface)); }
.app2 .lib-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app2 .ctype { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }
.app2 .ctype svg { width: 15px; height: 15px; }
.app2 .lib-dur { font-size: .72rem; color: var(--ink-soft); }
.app2 .lib-card h3 { font-size: .95rem; font-weight: 600; line-height: 1.35; }
.app2 .lib-card p { font-size: .8125rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }
.app2 .lib-card .go { margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--brand); }

/* Library detail */
.app2 .lib-detail { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
/* Video poster: the card image fills the frame (or the placeholder on error), the play
   button sits centred over a subtle scrim. */
.app2 .lib-player { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border-c); display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface)), color-mix(in srgb, var(--ink) 8%, var(--surface))); }
.app2 .lib-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app2 .lib-player .lib-card-img-ph { position: absolute; inset: 0; }
.app2 .lib-player::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, color-mix(in srgb, var(--ink) 24%, transparent), transparent 60%); }
.app2 .lib-play { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-c); display: grid; place-items: center; box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 16%, transparent); }
.app2 .lib-play svg { width: 26px; height: 26px; color: var(--brand); margin-left: 3px; }
/* Audio cover art above the waveform player. */
.app2 .lib-cover { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border-c); margin-bottom: 14px; }
.app2 .lib-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app2 .lib-cover .lib-card-img-ph { position: absolute; inset: 0; }
.app2 .lib-audio { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); padding: 16px 18px; }
.app2 .lib-audio .pp { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.app2 .lib-audio .pp svg { width: 18px; height: 18px; margin-left: 2px; }
.app2 .lib-wave { flex: 1; height: 32px; display: flex; align-items: center; gap: 3px; }
.app2 .lib-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 38%, var(--border-c)); }
.app2 .lib-body { line-height: 1.7; }
.app2 .lib-body h3 { font-size: 1.05rem; font-weight: 600; margin: 22px 0 8px; }
.app2 .lib-body p { margin: 0 0 14px; }
.app2 .lib-try { background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: var(--r-card); padding: 16px 18px; font-size: .9rem; color: var(--ink); }
.app2 .lib-try .h { font-weight: 600; color: var(--brand); margin-bottom: 6px; }
.app2 .lib-tool { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-card); padding: 18px; }
.app2 .lib-tool .step { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; }
.app2 .lib-tool .step i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-size: .75rem; font-weight: 600; font-style: normal; }

/* ── Personal plan ──────────────────────────────────────────────────────── */
.app2 .plan-banner { display: flex; gap: 16px; align-items: flex-start; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: var(--r-card); padding: 20px 22px; }
.app2 .pb-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-control); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.app2 .pb-icon svg { width: 22px; height: 22px; }
.app2 .pb-h { font-size: 1rem; font-weight: 600; }
.app2 .pb-text p { font-size: .875rem; color: var(--ink); margin: 4px 0 12px; max-width: 70ch; }
.app2 .pb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.app2 .pb-chip { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-pill); padding: 5px 12px; }
.app2 .pb-chip b { font-weight: 600; }

.app2 .plan-sec { padding: 0; }
.app2 .plan-sec.is-primary { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.app2 .plan-sec-h { align-items: flex-start; cursor: pointer; list-style: none; gap: 14px; }
.app2 .plan-sec-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: 1; flex-wrap: wrap; }
.app2 .plan-sec-titles { min-width: 0; }
.app2 .plan-kind { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); background: var(--hover); border-radius: 4px; padding: 2px 7px; margin-bottom: 8px; }
.app2 .plan-kind.primary { color: var(--brand); background: var(--brand-tint); }
.app2 .plan-sec-h .t { font-size: 1.0625rem; font-weight: 600; }
.app2 .plan-sec-h .d { font-size: .8125rem; color: var(--ink-soft); margin-top: 3px; max-width: 64ch; }
.app2 .plan-mix { display: flex; gap: 10px; flex-shrink: 0; }
.app2 .mixchip { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.app2 .mixchip svg { width: 15px; height: 15px; }
.app2 .plan-sec-h .chev { color: var(--ink-soft); flex-shrink: 0; transition: transform .15s; margin-top: 2px; }
.app2 details[open] .plan-sec-h .chev { transform: rotate(180deg); }
.app2 .plan-items { display: flex; flex-direction: column; padding: 4px 8px 10px; }
.app2 .plan-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border-c); }
.app2 .plan-items .plan-item:first-child { border-top: 0; }
.app2 .pi-ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-control); background: var(--hover); color: var(--ink-soft); display: grid; place-items: center; }
.app2 .pi-ic svg { width: 16px; height: 16px; }
.app2 .pi-step { flex: 1; min-width: 0; font-size: .9rem; font-weight: 500; }
.app2 .pi-type { font-size: .75rem; color: var(--ink-soft); flex-shrink: 0; }
.app2 .pi-native { font-size: .75rem; color: var(--ink-soft); font-style: italic; flex-shrink: 0; padding-right: 4px; }
.app2 .plan-foot { font-size: .8125rem; color: var(--ink-soft); margin-top: 4px; }

/* ── Dev-only theme switcher (floating; gated; inert in prod) ───────────── */
/* Bottom-right, stacked above the settings gear (FAB is bottom:18/right:18, 48px)
   — clear of the sidebar sign-out and any interactive UI. */
.app2 .theme-switcher { position: fixed; right: 18px; bottom: 78px; z-index: 50; display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--border-c); border-radius: var(--r-pill); box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 14%, transparent); }
.app2 .ts-btn { border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .72rem; font-weight: 600; text-transform: capitalize; padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer; }
.app2 .ts-btn:hover { background: var(--hover); color: var(--ink); }
.app2 .ts-btn.on { background: var(--brand-tint); color: var(--brand); }

/* ── Theme: LAVENDER (agency scheme) — Tier-1 override only ─────────────────
   Bars use the existing score-band tokens with on-palette values (decision C);
   category colouring (Wellness vs Performance hue) is the post-demo follow-up.
   Neutrals (sidebar/hover/border/ring-track) are working values — PENDING the
   exact agency UI-kit. Everything else (brand-tint, --cta, score-*, aliases)
   derives automatically from these. */
.app2[data-theme="lavender"] {
  --brand:       #5C43DA;
  --brand-light: #7D69E1;
  --brand-cyan:  #9D8EE9;   /* tiny accent only */
  --ink:         #222222;
  --ink-soft:    #737373;
  --canvas:      #ffffff;
  --sidebar-bg:  #F6F4FC;   /* pending exact agency UI-kit */
  --surface:     #ffffff;
  --hover:       #F1EEFB;   /* pending exact agency UI-kit */
  --border-c:    #E6E3F0;   /* pending exact agency UI-kit */
  --good: #3D9E6F; --warn: #f59e0b; --bad: #dc2626;
  --ring-track:  #EAE7F5;   /* pending exact agency UI-kit */
  --c-strong-ink: #2E7D58;  /* readable green ink on white */
  --c-low-ink:    #b45309;  /* readable amber ink on white */
}

/* ── Theme: DARK — full Tier-1 set + lifted accents + explicit passes ───────
   Lifted hues (pure brand/green go muddy on dark); distinct CTA #6E57E6;
   full-dark surfaces (no light "paper" report). Bars use the score-band tokens
   (decision C). Targets WCAG AA on text + bars. */
.app2[data-theme="dark"] {
  --brand:       #8B79F0;
  --brand-light: #A99BF5;
  --brand-cyan:  #9D8EE9;
  --ink:         #ECEAF4;
  --ink-soft:    #9A93B0;
  --canvas:      #15131E;
  --sidebar-bg:  #1A1726;
  --surface:     #211D2E;
  --hover:       #2C2740;
  --border-c:    rgba(255, 255, 255, .08);
  --good: #4FBF8B; --warn: #F5B043; --bad: #F2685F;
  --on-brand: #ffffff;
  --cta: #6E57E6;            /* distinct CTA (overrides the default --cta=brand) */
  --brand-tint: color-mix(in srgb, var(--brand) 22%, transparent); /* lift so active/tinted UI reads on dark */
  --ring-track: #2C2740;
  --c-strong-ink: #6FD3A0;   /* lifted green ink */
  --c-low-ink:    #F6BE5E;   /* lifted amber ink */
  --bad-ink:      #FCA5A0;   /* lifted red ink (safety banner) */
}
/* Explicit pass: the radar fill is too faint on dark at 16% — lift it. */
.app2[data-theme="dark"] .radar-area { fill: color-mix(in srgb, var(--brand) 28%, transparent); }

/* ── Dev-only report comparison control (gated; inert in prod) ──────────── */
.app2 .dev-report-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--warn) 40%, transparent); border-radius: var(--r-control); padding: 10px 14px; font-size: .8125rem; }
.app2 .drc-tag { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-low-ink); background: color-mix(in srgb, var(--warn) 16%, transparent); padding: 2px 7px; border-radius: 4px; }
.app2 .drc-check { display: inline-flex; align-items: center; gap: 6px; }
.app2 .dev-report-controls select { height: 30px; border: 1px solid var(--border-c); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: .8125rem; padding: 0 8px; }
.app2 .dev-report-controls select:disabled { opacity: .5; }
.app2 .drc-now { margin-left: auto; color: var(--ink-soft); font-variant: small-caps; }

/* ════════════════════════════════════════════════════════════════════════
   Home — investor-demo one-screen rebuild (B3). Fills the .app2 sidebar shell;
   100dvh grid, no page scroll at 1440×810; graceful scroll below the floor.
   Tokens only — lavender (demo default) inherits via Tier-1; cyan/dark inherit
   the derived washes above. ════════════════════════════════════════════════ */
.app2 .home2 {
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(12px, 2vh, 20px);
  padding: clamp(16px, 2.4vh, 26px) clamp(24px, 3vw, 48px) clamp(12px, 2vh, 18px);
  max-width: 1560px; width: 100%; margin: 0 auto;
}
.app2 .home2 a { text-decoration: none; } /* colour/weight-only links — hover shifts colour, never underlines */
.app2 .home-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-light); }
.app2 .home-meta { font-size: .78rem; color: var(--ink-soft); }
.app2 .home-link { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 600; color: var(--brand); white-space: nowrap; }
.app2 .home-link:hover { color: var(--brand-press); }
.app2 .home-link svg { width: 14px; height: 14px; }

/* 1 · Hero band */
.app2 .home-hero {
  position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--border-c);
  padding: clamp(18px, 3vh, 30px) clamp(24px, 2.4vw, 38px);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--home-hero-bg);
}
.app2 .home-hero-mark { position: absolute; top: -34%; right: 176px; height: 175%; opacity: .16; pointer-events: none; }
.app2 .home-hero-lede { position: relative; min-width: 0; }
.app2 .home-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-light); }
.app2 .home-hi { margin: 10px 0 0; font-size: clamp(30px, 4.4vh, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.app2 .home-sub { margin: 9px 0 0; font-size: clamp(13.5px, 1.8vh, 16px); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.app2 .home-hero-cta { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.app2 .home-cta {
  display: inline-flex; align-items: center; gap: 10px; border: 0;
  background: var(--cta); color: var(--on-brand); font: inherit; font-size: clamp(15px, 2vh, 17px); font-weight: 600;
  padding: clamp(12px, 1.8vh, 16px) clamp(22px, 2vw, 32px); border-radius: 13px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 14%, transparent); transition: background .14s;
}
.app2 .home-cta:hover { background: var(--cta-press); }
.app2 .home-cta svg { width: 17px; height: 17px; }
.app2 .home-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border-c);
  border-radius: var(--r-pill); padding: 5px 12px 5px 9px; white-space: nowrap;
}
.app2 .home-chip svg { width: 13px; height: 13px; color: var(--brand-light); }

/* Payload row */
.app2 .home-payload { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 348px); gap: clamp(14px, 1.6vh, 20px); min-height: 0; }
.app2 .home-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(14px, 1.6vh, 20px); min-height: 0; }
.app2 .home-rail { display: flex; flex-direction: column; gap: clamp(14px, 1.6vh, 20px); min-height: 0; }
.app2 .home-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* 2+7 · Report card — fills its height, no internal void */
.app2 .home-report {
  background: var(--surface); border: 1px solid var(--border-c); border-radius: 16px;
  padding: clamp(15px, 2.1vh, 24px) clamp(20px, 1.8vw, 30px);
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.app2 .home-report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.app2 .home-report-title { margin: 6px 0 0; font-size: clamp(18px, 2.5vh, 23px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.app2 .home-report-date { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
/* The metrics block consumes the report card's full height: the radar is sized to
   the available mid height (square SVG → height-capped so it never overflows), the
   indices sit centred, and the six bar rows distribute across the full height —
   no dead band above or below. */
.app2 .home-report-mid { flex: 1; display: grid; grid-template-columns: 150px auto minmax(220px, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 28px); align-items: center; min-height: 0; padding: clamp(2px, 0.8vh, 10px) 0; }
.app2 .home-indices { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.6vh, 30px); }
.app2 .home-index-v { font-size: clamp(26px, 3.6vh, 34px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.app2 .home-index-l { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-top: 5px; }
.app2 .home-index-d { font-size: 11.5px; color: var(--ink-soft); text-wrap: balance; margin-top: 2px; }
.app2 .home-radar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; align-self: stretch; }
/* Radar is the centrepiece — it wants to be tall (big vh) so it fills the mid at
   every height, but `max-height` is bounded to the radar column (= the mid row,
   less the caption), so it can NEVER overflow the middle row — including the 810
   floor where the mid is shortest. Scales up with height instead of leaving slack. */
.app2 .home-radar .radar { height: clamp(160px, 40vh, 520px); max-height: calc(100% - 24px); width: auto; margin: 0; }
/* Bars: centred group with a clamped row gap — spacing grows a little with height
   but never balloons thin (no pure space-between stretching). */
.app2 .home-bars { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: clamp(14px, 3.5vh, 34px) 16px; border-left: 1px solid var(--ring-track); padding-left: clamp(14px, 1.4vw, 24px); min-width: 0; }
.app2 .home-bar { min-width: 0; }
.app2 .home-bar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.app2 .home-bar-name { font-weight: 600; color: var(--ink); }
.app2 .home-bar-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.app2 .home-bar-track { height: 6px; border-radius: 999px; background: var(--ring-track); margin-top: 7px; overflow: hidden; }
.app2 .home-bar-track > div { height: 100%; border-radius: 999px; }
.app2 .home-report-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--ring-track); padding-top: 11px; }
.app2 .home-report.is-empty { justify-content: center; align-items: flex-start; }
.app2 .home-report.is-empty .home-report-title { margin-top: 8px; }

/* 4 · New in the Library */
.app2 .home-libcard { background: var(--home-tint); border: 1px solid var(--border-c); border-radius: 16px; padding: clamp(11px, 1.4vh, 16px) clamp(20px, 1.8vw, 26px) clamp(12px, 1.5vh, 18px); }
.app2 .home-lib-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 10px; }
.app2 .home-lib-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--ring-track); border-radius: 12px; overflow: hidden; color: var(--ink); }
.app2 .home-lib-item:hover { border-color: var(--brand-cyan); color: var(--ink); }
.app2 .home-lib-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 13px 12px; }
.app2 .home-lib-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.app2 .home-thumb { width: 100%; height: clamp(52px, 7vh, 74px); object-fit: cover; display: block; }
.app2 .home-thumb-ph { width: 100%; height: clamp(52px, 7vh, 74px); display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.app2 .home-thumb-ph svg { width: 22px; height: 22px; }

/* 9 · My Plan */
/* Distribute in three groups (header+progress → up-next → Continue) with no empty
   stretch — per the B3 vertical-distribution criterion. */
/* Distribute in three groups (header+progress → up-next → Continue) with a clamped
   gap so a tall rail spaces them a little more but never balloons them apart. */
.app2 .home-plan { background: var(--home-tint); border: 1px solid var(--border-c); border-left: 3px solid var(--brand); border-radius: 16px; padding: clamp(14px, 1.9vh, 22px) 20px; flex: 1.15; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.4vh, 26px); min-height: 0; }
.app2 .home-plan-top { display: flex; flex-direction: column; gap: 10px; }
.app2 .home-plan-count { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.app2 .home-progress { height: 5px; border-radius: 999px; background: var(--ring-track); overflow: hidden; }
.app2 .home-progress > div { height: 100%; border-radius: 999px; background: var(--brand); }
.app2 .home-plan-next p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.app2 .home-plan-next .home-meta { margin-top: 2px; }

/* 11 · Today's Focus */
.app2 .home-focus { background: var(--sidebar-bg); border: 1px solid var(--border-c); border-radius: 16px; overflow: hidden; flex: 1.5; display: flex; flex-direction: column; min-height: 0; }
.app2 .home-focus > .home-thumb, .app2 .home-focus > .home-thumb-ph { height: clamp(60px, 10vh, 104px); flex-shrink: 1; min-height: 0; }
/* Today's Focus is a very wide, short band (~6.2:1 at the reference viewport), so
   `cover` shows only a thin horizontal strip. This bias pushes the crop toward the
   upper subject so a portrait shows eyes/face, not a mouth-only sliver.
   ⚠ Tuned for the CURRENT featured image (library-06). RE-CHECK this crop whenever
   the featured item or its image changes — a different subject position may need a
   different object-position (see the featured-item selection in Home.tsx). */
.app2 .home-focus > .home-thumb { object-position: center 30%; }
.app2 .home-focus-body { padding: clamp(11px, 1.5vh, 18px) 20px clamp(12px, 1.7vh, 18px); display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1; }
.app2 .home-focus-body h3 { margin: 3px 0 0; font-size: clamp(15px, 2vh, 17px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }

/* 6 · Past assessments */
.app2 .home-past { background: var(--surface); border: 1px solid var(--border-c); border-radius: 16px; padding: clamp(14px, 1.9vh, 22px) 20px; flex: 1.35; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.app2 .home-past-rows { display: flex; flex-direction: column; justify-content: center; gap: clamp(2px, 1.4vh, 14px); flex: 1; margin-top: clamp(4px, 1vh, 10px); }
.app2 .home-past-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(6px, 1vh, 11px) 2px; border-bottom: 1px solid var(--ring-track); color: var(--ink); }
.app2 .home-past-row:last-child { border-bottom: 0; }
.app2 .home-past-row:hover { color: var(--brand); }
.app2 .home-past-date { font-size: 12.5px; font-weight: 600; }
.app2 .home-past-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); }
.app2 .home-past-meta svg { width: 14px; height: 14px; }
.app2 .home-past-empty { padding: 8px 2px; }

/* 3 · Quote band */
.app2 .home-quote { border-top: 1px solid var(--ring-track); border-bottom: 1px solid var(--ring-track); padding: clamp(9px, 1.5vh, 15px) 8px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.app2 .home-quote-body { margin: 0; display: flex; align-items: baseline; gap: 14px; min-width: 0; animation: homeQuoteFade 480ms cubic-bezier(.4, 0, .2, 1); }
.app2 .home-quote-body p { margin: 0; font-size: clamp(14px, 2vh, 17px); font-style: italic; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app2 .home-quote-body footer { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-cyan); white-space: nowrap; }
.app2 .home-quote-dots { display: flex; gap: 7px; flex-shrink: 0; }
.app2 .home-dot { width: 6px; height: 6px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--home-dot); }
.app2 .home-dot.on { background: var(--brand); }
@keyframes homeQuoteFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app2 .home-quote-body { animation: none; } }

/* 5+10 · Footer */
.app2 .home-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 2px; }
.app2 .home-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.app2 .home-foot-links a { font-size: 12px; color: var(--ink-soft); }
.app2 .home-foot-links a:hover { color: var(--brand); }
.app2 .home-foot-privacy { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.app2 .home-foot-privacy svg { width: 13px; height: 13px; color: var(--brand-cyan); }

/* Graceful degrade below the demo floor — allow the page to scroll rather than
   crush/clip (desktop screen-share target is 1440×810). */
@media (max-width: 1280px), (max-height: 780px) {
  .app2 .home2 { height: auto; min-height: 100dvh; overflow: visible; }
}

/* ════════════════════════════════════════════════════════════════════════
   B9 — org-admin shell: persona avatar, Recommended-actions panel, and the two
   static credibility tabs (Reports & Exports, Data & Privacy). Dashboard visual
   language; tokens only. ═══════════════════════════════════════════════════ */
/* Persona headshot in the sidebar footer (falls back to the .av initials circle) */
.app2 .who .av-img { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-c); }

/* Recommended actions — three static recommendation cards on the Dashboard */
.app2 .rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.app2 .rec-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border-c); border-left: 3px solid var(--brand); border-radius: var(--r-card); padding: 16px 18px; }
.app2 .rec-driver { font-size: .8125rem; color: var(--ink-soft); line-height: 1.45; }
.app2 .rec-driver b { color: var(--ink); font-weight: 600; }
.app2 .rec-title { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; }
.app2 .rec-rationale { margin: 0; font-size: .8125rem; color: var(--ink-soft); line-height: 1.5; }
.app2 .rec-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border-c); }
.app2 .rec-audience { font-size: .8rem; font-weight: 500; color: var(--ink); }
.app2 .rec-close { font-size: .72rem; color: var(--ink-soft); }
@media (max-width: 900px) { .app2 .rec-grid { grid-template-columns: 1fr; } }

/* Reports & Exports */
.app2 .admin-generate { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.app2 .admin-generate-h { font-size: 1rem; font-weight: 600; }
.app2 .admin-notice { margin: 0 20px 18px; padding: 12px 14px; border-radius: var(--r-control); background: var(--brand-tint); color: var(--brand); font-size: .85rem; line-height: 1.5; }
.app2 .admin-rows { display: flex; flex-direction: column; }
.app2 .admin-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-c); }
.app2 .admin-row:first-child { border-top: 0; }
.app2 .admin-file { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--r-control); background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; }
.app2 .admin-file svg { width: 17px; height: 17px; }
.app2 .admin-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.app2 .admin-row-name { font-size: .875rem; font-weight: 500; }
.app2 .admin-row-meta { font-size: .78rem; color: var(--ink-soft); }
.app2 .admin-dl { color: var(--ink-soft); }
.app2 .admin-dl svg { width: 18px; height: 18px; }
.app2 .admin-next { font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }

/* Data & Privacy */
.app2 .admin-settings { display: flex; flex-direction: column; }
.app2 .admin-setting { padding: 16px 0; border-top: 1px solid var(--border-c); }
.app2 .admin-setting:first-child { border-top: 0; padding-top: 0; }
.app2 .admin-setting:last-child { padding-bottom: 0; }
.app2 .admin-setting-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.app2 .admin-setting-label { font-size: .9rem; font-weight: 600; }
.app2 .admin-setting-value { font-size: .85rem; font-weight: 600; color: var(--brand); white-space: nowrap; }
.app2 .admin-setting-note { margin: 6px 0 0; font-size: .8125rem; color: var(--ink-soft); line-height: 1.5; max-width: 72ch; }