// ─────────────────────────────────────────────────────────────────────────
// Variation 1 — "Letters to you"
// Editorial, written-to-you. Long-form reading rhythm, drop caps,
// teal sticky pull-quotes, generous gutters. The Health Story feels like
// something Jordan could read with a coffee, not a dashboard to operate.
// ─────────────────────────────────────────────────────────────────────────

const lettersStyles = `
.lt {
  width: 100%; height: 100%;
  background: #FAFAF7;
  color: #181816;
  font-family: var(--font-sans);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.lt-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 36px;
  border-bottom: 1px solid var(--bf-border);
  background: #FAFAF7;
  flex-shrink: 0;
}
.lt-bar .brand {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-sans);
}
.lt-bar .brand .mark {
  width: 14px; height: 14px;
  background: var(--c360-teal);
  display: inline-block;
  transform: rotate(45deg);
}
.lt-bar .brand .name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.lt-bar .brand .sub { font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted); }
.lt-bar .crumbs {
  display: flex; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted);
}
.lt-bar .crumbs .now { color: var(--bf-text); font-weight: 600; }
.lt-bar .who {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted);
}
.lt-bar .who .av {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--c360-teal); color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
}

.lt-page {
  flex: 1; min-height: 0;
  overflow: hidden;
  padding: 36px 88px 40px;
  display: flex; flex-direction: column;
  gap: 20px;
}

/* INTAKE */
.lt-intake-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--c360-teal); letter-spacing: 0.16em; text-transform: uppercase; }
.lt-intake h1 {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 10px;
  max-width: 720px;
}
.lt-intake h1 b { font-style: normal; font-family: var(--font-sans); font-weight: 700; color: var(--c360-teal); }
.lt-intake .opener {
  margin-top: 18px;
  font-size: 16px; line-height: 1.6; color: #2c2c2a; max-width: 660px;
}
.lt-intake .opener b { font-weight: 700; }
.lt-progress {
  margin-top: 14px;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted);
}
.lt-progress .bar { display: flex; gap: 3px; }
.lt-progress .bar i {
  display: block; width: 22px; height: 5px; background: var(--bf-surface); border-radius: 2px;
}
.lt-progress .bar i.on { background: var(--c360-teal); }
.lt-progress .bar i.now { background: var(--c360-teal); height: 8px; margin-top: -1.5px; }

.lt-cluster {
  margin-top: 20px;
  background: white;
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  padding: 26px 30px 24px;
  display: grid; gap: 14px;
}
.lt-cluster .q-lab { font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.lt-cluster .q-h { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.lt-cluster .q-sub { font-size: 13.5px; color: var(--bf-muted); line-height: 1.55; max-width: 640px; }
.lt-cluster .check-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  margin-top: 4px;
}
.lt-cluster .chk {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--bf-border);
  border-radius: 8px;
  background: #FAFAF7;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-brand), background 0.2s var(--ease-brand);
  font-size: 13.5px;
  line-height: 1.4;
}
.lt-cluster .chk.on { border-color: var(--c360-teal); background: var(--c360-teal-ghost); }
.lt-cluster .chk .box {
  flex-shrink: 0; margin-top: 2px;
  width: 14px; height: 14px; border-radius: 3px;
  border: 1.5px solid var(--bf-text); background: white;
  display: grid; place-items: center;
}
.lt-cluster .chk.on .box { background: var(--c360-teal); border-color: var(--c360-teal); color: white; font-size: 10px; font-weight: 700; }
.lt-cluster .scale {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 16px; margin-top: 4px;
  background: #FAFAF7; border: 1px solid var(--bf-border); border-radius: 8px;
}
.lt-cluster .scale .lab { font-size: 13px; font-weight: 600; }
.lt-cluster .scale .ticks { display: flex; gap: 6px; }
.lt-cluster .scale .ticks i {
  display: grid; place-items: center;
  width: 36px; height: 32px;
  border: 1px solid var(--bf-border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--bf-muted);
  background: white; cursor: pointer;
}
.lt-cluster .scale .ticks i.on { background: var(--c360-teal); color: white; border-color: var(--c360-teal); font-weight: 700; }
.lt-cluster .scale .legend { font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted); }

.lt-footer-row {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; border-top: 1px solid var(--bf-border);
  font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted);
}
.lt-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bf-text); color: var(--bf-button-text);
  border: 1px solid var(--bf-text);
  padding: 10px 18px; border-radius: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background 0.2s var(--ease-brand);
}
.lt-cta:hover { background: #333; }
.lt-cta .arr { font-family: var(--font-mono); font-size: 13px; }

/* HEALTH STORY */
.lt-story { display: grid; grid-template-columns: 1fr 240px; gap: 32px; align-items: start; flex: 1; min-height: 0; }
.lt-story-main { overflow: hidden; }
.lt-story h1 {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.lt-story h1 b { font-style: normal; font-family: var(--font-sans); font-weight: 900; color: var(--c360-teal); letter-spacing: -0.04em; }
.lt-story .dateline {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--bf-muted); letter-spacing: 0.06em;
  margin-top: 14px; margin-bottom: 22px;
  display: flex; gap: 14px; align-items: center;
}
.lt-story .dateline b { color: var(--bf-text); font-weight: 600; }
.lt-story .body {
  font-size: 15.5px; line-height: 1.7;
  max-width: 600px;
  color: #2c2c2a;
}
.lt-story .body p { margin-bottom: 14px; }
.lt-story .body p:first-child::first-letter {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 60px;
  float: left;
  line-height: 0.9;
  padding: 6px 12px 0 0;
  color: var(--c360-teal);
}
.lt-story .body em { font-family: var(--font-editorial); font-style: italic; color: var(--bf-text); }
.lt-story .body b { font-weight: 700; }
.lt-story .body .leads {
  display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0 4px;
}

.lt-rail {
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-mono); font-size: 11px;
  position: sticky; top: 0;
}
.lt-rail .lab { color: var(--bf-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.lt-rail .drv-card {
  background: white;
  border: 1px solid var(--bf-border);
  border-radius: 10px;
  padding: 12px 12px 10px;
  display: grid; gap: 6px;
}
.lt-rail .drv-card .row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px;
}
.lt-rail .drv-card .row .name { color: var(--bf-text); font-weight: 600; font-size: 11.5px; }
.lt-rail .drv-card .row .pct { color: var(--bf-muted); }
.lt-rail .drv-card .meter {
  height: 6px; background: var(--bf-surface); border-radius: 4px; overflow: hidden;
}
.lt-rail .drv-card .meter i { display: block; height: 100%; border-radius: 4px; }
.lt-rail .pull {
  background: var(--c360-teal); color: white;
  border: 3px solid var(--bf-text);
  box-shadow: var(--shadow-comic-sm);
  padding: 14px 14px 12px;
  transform: rotate(1.2deg);
  font-family: var(--font-sans);
}
.lt-rail .pull .eyebrow { color: rgba(255,255,255,0.7); margin-bottom: 6px; font-size: 9.5px; }
.lt-rail .pull .quote { font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; }

/* ACTION PLAN */
.lt-plan h1 {
  font-family: var(--font-editorial);
  font-style: italic; font-weight: 500;
  font-size: 44px; line-height: 1.05; letter-spacing: -0.025em;
}
.lt-plan h1 b { font-family: var(--font-sans); font-style: normal; font-weight: 900; color: var(--c360-teal); }
.lt-plan .opener { font-size: 15px; line-height: 1.6; color: #2c2c2a; max-width: 720px; margin-top: 14px; }
.lt-plan .opener em { font-family: var(--font-editorial); font-style: italic; }

.tier-stack { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.tier-block {
  background: white;
  border: 1px solid var(--bf-border);
  border-radius: 10px;
  padding: 18px 22px;
  display: grid; grid-template-columns: 160px 1fr; gap: 22px;
}
.tier-block .tlabel { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.tier-block .tlabel .badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  border-radius: 4px;
}
.tier-block.start .tlabel .badge { background: var(--c360-teal); color: white; }
.tier-block.build .tlabel .badge { background: var(--c360-teal-pale); color: var(--c360-teal); }
.tier-block.radar .tlabel .badge { background: var(--bf-surface); color: var(--bf-text); }
.tier-block .tlabel .pitch {
  font-family: var(--font-editorial);
  font-style: italic; font-size: 16px; line-height: 1.3; color: var(--bf-text);
}
.tier-block .tlevers { display: flex; flex-direction: column; gap: 12px; }
.lever-row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: start;
  padding-bottom: 12px; border-bottom: 1px dashed var(--bf-border);
}
.lever-row:last-child { border-bottom: none; padding-bottom: 0; }
.lever-row .ico {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--c360-teal-ghost);
  border: 1px solid var(--c360-teal);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--c360-teal);
  font-weight: 700;
}
.lever-row .title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.lever-row .copy { font-size: 13px; color: #4a4a48; line-height: 1.55; max-width: 540px; }
.lever-row .why {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--bf-muted);
  letter-spacing: 0.04em; white-space: nowrap; padding-top: 3px;
}

/* CARE TEAM COMPANION (Clinical) */
.lt-ctc-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  padding-bottom: 12px; border-bottom: 2px solid var(--bf-text);
}
.lt-ctc-head h1 { font-family: var(--font-sans); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.lt-ctc-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--bf-muted); text-align: right; line-height: 1.6; }
.lt-ctc-head .meta b { color: var(--bf-text); }
.lt-ctc-sub {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--c360-teal); letter-spacing: 0.04em;
}
.lt-ctc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 22px; flex: 1; min-height: 0; }
.lt-ctc-syn h3 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bf-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--bf-border); }
.lt-ctc-syn .summary { font-size: 14px; line-height: 1.6; color: #2c2c2a; margin-bottom: 18px; }
.lt-ctc-syn .summary em { font-family: var(--font-editorial); font-style: italic; }
.lt-ctc-syn .summary b { font-weight: 700; }
.drv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.drv-table th, .drv-table td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--bf-border); vertical-align: top;
}
.drv-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bf-muted); }
.drv-table tr:last-child td { border-bottom: none; }
.drv-table td.mech { color: #4a4a48; line-height: 1.55; font-size: 12.5px; }
.act-pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.act-pill.Activated   { background: #FEF2F2; color: #991B1B; border: 1px solid #DC2626; }
.act-pill.Vulnerable  { background: #FFFBEB; color: #78350F; border: 1px solid #F59E0B; }
.act-pill.Contributing{ background: #F0FDF4; color: #14532D; border: 1px solid #16A34A; }

.lt-ctc-side { display: flex; flex-direction: column; gap: 16px; }
.lt-ctc-side .panel {
  background: white;
  border: 1px solid var(--bf-border);
  border-radius: 10px; padding: 14px 16px;
}
.lt-ctc-side .panel h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bf-muted); font-weight: 700; margin-bottom: 10px; }
.lt-ctc-side .panel .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed var(--bf-border);
  font-size: 12.5px;
}
.lt-ctc-side .panel .row:last-child { border-bottom: none; }
.lt-ctc-side .panel .row .k { color: var(--bf-text); font-weight: 600; }
.lt-ctc-side .panel .row .v { font-family: var(--font-mono); font-size: 11.5px; color: var(--bf-muted); }
.lt-ctc-side .stick {
  background: var(--c360-teal); color: white;
  border: 3px solid var(--bf-text);
  box-shadow: var(--shadow-comic-sm);
  padding: 14px 16px; transform: rotate(-1.2deg);
}
.lt-ctc-side .stick .eyebrow { color: rgba(255,255,255,0.7); margin-bottom: 6px; font-size: 9.5px; }
.lt-ctc-side .stick .quote { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
`;

function LtBar({ crumbs, current, persona }) {
  const initial = persona.name[0];
  return (
    <div className="lt-bar">
      <div className="brand">
        <span className="mark"></span>
        <span className="name">Clarity360</span>
        <span className="sub">· by WellSelf 360</span>
      </div>
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            <span className={i === current ? "now" : ""}>{c}</span>
            {i < crumbs.length - 1 && <span>›</span>}
          </React.Fragment>
        ))}
      </div>
      <div className="who">
        <span className="av">{initial}</span>
        <span>{persona.name.toLowerCase()} · session 1</span>
      </div>
    </div>
  );
}

// SCREEN 1 — Intake
function LtIntake({ persona, density }) {
  const isJ = persona.id === "jordan";
  const items = isJ
    ? [
        { label: "I wake up tired even after a full night's sleep", on: true },
        { label: "My energy crashes hard in the afternoon", on: true },
        { label: "I push through but pay for it the next day", on: true },
        { label: "Mornings are the hardest part of the day", on: false },
        { label: "Caffeine doesn't help the way it used to", on: true },
        { label: "Rest doesn't seem to recharge me", on: false },
      ]
    : [
        { label: "Standing up makes the room tilt or fade", on: true },
        { label: "My heart races when I haven't moved", on: true },
        { label: "I'm wiped out for days after a good day", on: true },
        { label: "I feel best lying down", on: true },
        { label: "Heat makes everything worse", on: true },
        { label: "I get adrenaline spikes for no reason", on: false },
      ];

  return (
    <div className="lt" data-density={density}>
      <LtBar crumbs={["Intake", "How your body feels", "Symptoms", "Care + history", "What you're hoping for"]} current={1} persona={persona} />
      <div className="lt-page lt-intake">
        <div className="lt-intake-eyebrow">Section 3 · how your body feels and what it can do</div>
        <h1>We won't ask you to <b>name</b> what's wrong.<br/>Just tell us how it <span style={{color:'var(--c360-teal)'}}>feels</span>.</h1>
        <p className="opener">
          The next few sections are mostly checklists — <b>tick what fits, skip what doesn't.</b> Nothing here is a test. We're looking for the patterns under your day, in the words you already use to describe it.
        </p>

        <div className="lt-progress">
          <span>Section 3 of 12</span>
          <div className="bar">
            <i className="on"/><i className="on"/><i className="now"/><i/><i/><i/><i/><i/><i/><i/><i/><i/>
          </div>
          <span>· about 4 minutes left in this stretch</span>
        </div>

        <div className="lt-cluster">
          <div className="q-lab">Energy, stamina, and recovery</div>
          <div className="q-h">Which of these sound like your last two weeks?</div>
          <div className="q-sub">Tick as many as fit. There's no right number. If none of them quite land, leave them blank — the next section will catch what this one misses.</div>
          <div className="check-grid">
            {items.map((it, i) => (
              <div key={i} className={"chk" + (it.on ? " on" : "")}>
                <span className="box">{it.on ? "✓" : ""}</span>
                <span>{it.label}</span>
              </div>
            ))}
          </div>
          <div className="scale">
            <span className="lab">How much does this get in the way of your day?</span>
            <span className="ticks">
              {[1,2,3,4,5].map(n => (
                <i key={n} className={n === (isJ ? 4 : 5) ? "on" : ""}>{n}</i>
              ))}
            </span>
            <span className="legend">1 not at all → 5 most of the day</span>
          </div>
        </div>

        <div className="lt-footer-row">
          <span>auto-saved · 12:42 pm</span>
          <button className="lt-cta">Continue to symptoms across body systems <span className="arr">→</span></button>
        </div>
      </div>
    </div>
  );
}

// SCREEN 2 — Health Story
function LtStory({ persona, density, depth }) {
  const isJ = persona.id === "jordan";
  const leads = persona.drivers.filter(d => d.lead);
  const drvMap = window.DRIVERS;
  const date = isJ ? "May 21, 2026 · v1.0" : "May 18, 2026 · v1.0";

  return (
    <div className="lt" data-density={density}>
      <LtBar crumbs={["Intake", "Synthesis", "My Health Story", "My Action Plan", "Care team"]} current={2} persona={persona} />
      <div className="lt-page">
        <div className="lt-story">
          <div className="lt-story-main">
            <h1>What we found,<br/><b>{persona.name}</b>.</h1>
            <div className="dateline">
              <span><b>For {persona.name}</b> ({persona.age}, {persona.pronouns})</span>
              <span>·</span>
              <span>{date}</span>
              <span>·</span>
              <span>reviewed by <b>L. Maren</b>, NBC-HWC</span>
            </div>
            <div className="body">
              {isJ ? (
                <>
                  <p>You came in with three diagnoses and a question nobody had answered: <em>why does it all feel connected when nobody is treating it that way?</em> The short version is — your instinct is right. Your conditions share more upstream physiology than they share clinical specialties, and that's the gap we can close.</p>
                  <p>Two drivers are doing most of the work in your body right now: <span className="leads"><span className="dchip inf"><span className="ddot"/>INF · Inflammation</span><span className="dchip cep"><span className="ddot"/>CEP · Cellular Energy</span></span>. The autoimmune burden of Hashimoto's and the inflammatory signature of MDD and fibromyalgia all pour into the same cytokine pool — IL-6, TNF-α — and that pool is what's affecting how your mitochondria produce energy. <b>This is why the fatigue persists even though your TSH reads in range.</b></p>
                  {depth !== "plain" && (
                    <p>Your thyroid hormones also regulate serotonin availability directly, which is part of the mood picture your psychiatrist is treating from a different angle. None of this means the psychiatric piece is "really thyroid" — it means there's a biological pathway your three specialists each see one slice of. We can work with that.</p>
                  )}
                  <p>What we'd like you to take from this: <em>the tiredness is real, the pain is real, the fog is real — and they're not three separate stories.</em> The next page is what to do with that.</p>
                </>
              ) : (
                <>
                  <p>You came to us with three names you've been told <em>might</em> be the answer and one diagnosis that doesn't explain the rest. Here's what your intake says, taken as a single picture instead of three separate consultations: <b>your providers are each looking at one expression of a shared upstream pattern.</b></p>
                  <p>The through-line is two drivers: <span className="leads"><span className="dchip inf"><span className="ddot"/>INF · Inflammation</span><span className="dchip csr"><span className="ddot"/>CSR · Chemical Signaling</span></span>. Mast cell mediators are driving the flushing, the food-triggered cascades, and the GI reactivity. Autonomic dysregulation is driving the standing-up dizziness and the heart-rate jumps — and a lot of what's being called anxiety. <b>These aren't separate problems lined up next to each other. They're one problem with several outlets.</b></p>
                  {depth !== "plain" && (
                    <p>The EDS / POTS / MCAS cluster is a documented shared-biology pattern — about 61% of people with hEDS develop POTS, 30–40% develop MCAS, and the anxiety signature in this cluster has a measurable autonomic basis. We're not diagnosing you here. We're telling you that the picture you've been sensing is real, and the path forward is to work upstream of the symptoms, not chase each one through a separate specialty.</p>
                  )}
                  <p>What we'd like you to take from this: <em>you've been carrying the integrator's job for four years. From here, we'll carry some of it with you.</em></p>
                </>
              )}
            </div>
          </div>

          <div className="lt-rail">
            <div className="lab">Driver picture</div>
            <div className="drv-card">
              {persona.drivers.map(d => (
                <div key={d.code} style={{display:'grid', gap:4}}>
                  <div className="row">
                    <span className="name">
                      <span className={"dchip " + drvMap[d.code].cls} style={{padding:'2px 6px', fontSize:'10px'}}>
                        <span className="ddot"/>{d.code}
                      </span>
                    </span>
                    <span className="pct">{Math.round(d.weight*100)}%</span>
                  </div>
                  <div className="meter"><i style={{width: `${d.weight*100}%`, background: `var(--drv-${drvMap[d.code].cls})`}}/></div>
                </div>
              ))}
            </div>
            <div className="pull">
              <div className="eyebrow">The headline</div>
              <div className="quote">{persona.lead}</div>
            </div>
            <div className="lab" style={{marginTop:4}}>Take this with you</div>
            <div style={{display:'flex', gap:6}}>
              <button className="lt-cta" style={{flex:1, fontSize:11, padding:'8px 10px', justifyContent:'center'}}>Download PDF</button>
              <button className="lt-cta" style={{flex:1, background:'white', color:'var(--bf-text)', fontSize:11, padding:'8px 10px', justifyContent:'center'}}>Share link</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// SCREEN 3 — Action Plan
function LtPlan({ persona, density }) {
  const tiers = {
    start: { badge: "Start here", pitch: "Two things, doable this week. Pick the one that feels easier first." },
    build: { badge: "Build toward", pitch: "When the foundation is steady — usually 4–6 weeks in — these are next." },
    radar: { badge: "Keep on the radar", pitch: "Worth knowing about. We'll come back to these when the time is right." },
  };
  const groups = ["start", "build", "radar"];
  const ldata = window.LEVERS;

  return (
    <div className="lt" data-density={density}>
      <LtBar crumbs={["Intake", "Synthesis", "My Health Story", "My Action Plan", "Care team"]} current={3} persona={persona} />
      <div className="lt-page lt-plan">
        <h1>Six places<br/>to <b>start</b>, gently.</h1>
        <p className="opener">
          This isn't a wellness prescription. It's <em>your</em> physiology, met where it is, in the order that gives you the biggest return for the least amount of pushing. <b>Two things to start.</b> Four to keep in view. The full reasoning is one click away — but you don't need it to begin.
        </p>

        <div className="tier-stack">
          {groups.map(g => {
            const items = persona.levers.filter(l => l.tier === g);
            if (!items.length) return null;
            return (
              <div key={g} className={"tier-block " + g}>
                <div className="tlabel">
                  <span className="badge">{tiers[g].badge}</span>
                  <div className="pitch">{tiers[g].pitch}</div>
                </div>
                <div className="tlevers">
                  {items.map(l => (
                    <div key={l.key} className="lever-row">
                      <div className="ico">{ldata[l.key].name[0]}</div>
                      <div>
                        <div className="title">{l.title}</div>
                        <div className="copy">{l.copy}</div>
                      </div>
                      <div className="why">{l.why}</div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// SCREEN 4 — Care Team Companion (Clinical)
function LtCtc({ persona, density }) {
  const drvMap = window.DRIVERS;
  return (
    <div className="lt" data-density={density}>
      <LtBar crumbs={["Intake", "Synthesis", "My Health Story", "My Action Plan", "Care team companion"]} current={4} persona={persona} />
      <div className="lt-page">
        <div className="lt-ctc-head">
          <div>
            <h1>Care Team Companion · Clinical Edition</h1>
            <div className="lt-ctc-sub">{persona.name}, {persona.age} · {persona.conditions.join(" · ")}</div>
          </div>
          <div className="meta">
            v1.0 · {persona.id === "jordan" ? "May 21, 2026" : "May 18, 2026"}<br/>
            Evidence tiers shown · all T1/T2 unless flagged<br/>
            <b>Reviewed by L. Maren, NBC-HWC</b>
          </div>
        </div>

        <div className="lt-ctc-grid">
          <div className="lt-ctc-syn">
            <h3>Cross-condition synthesis</h3>
            <div className="summary">
              {persona.id === "jordan" ? (
                <>The driver picture is dominated by <b>DRV-INF</b> and <b>DRV-CEP</b>, with secondary <b>DRV-CSR</b> activation explaining the affective component. Persistent mitochondrial dysfunction independent of TSH normalization (<em>cf. 2025 euthyroid Hashimoto's metabolic trial</em>) is the most likely mechanism for the patient's primary complaint of refractory fatigue.</>
              ) : (
                <>Pattern is consistent with the documented <b>EDS / POTS / MCAS</b> comorbidity cluster (Bonamichi-Santos et al., 2018). Mast cell mediators (<b>DRV-INF</b>) and autonomic dysregulation (<b>DRV-CSR</b>) are the lead drivers; mitochondrial impairment is downstream. Anxiety component has measurable autonomic basis and may respond disproportionately to vagal-tone and volume interventions.</>
              )}
            </div>

            <h3>Driver activation</h3>
            <table className="drv-table">
              <thead>
                <tr><th>Driver</th><th>State</th><th>Mechanism</th></tr>
              </thead>
              <tbody>
                {persona.drivers.map(d => (
                  <tr key={d.code}>
                    <td>
                      <span className={"dchip " + drvMap[d.code].cls}>
                        <span className="ddot"/>{d.code}
                      </span>
                      {d.hub && <div style={{fontFamily:'var(--font-mono)', fontSize:'9.5px', color:'var(--bf-muted)', marginTop:4}}>HUB</div>}
                    </td>
                    <td><span className={"act-pill " + d.state}>{d.state}</span></td>
                    <td className="mech">{d.why}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="lt-ctc-side">
            <div className="panel">
              <h4>Current care</h4>
              {persona.care.map((c,i) => (
                <div className="row" key={i}><span className="k">{c.split(' (')[0]}</span><span className="v">{c.includes('(') ? c.split('(')[1].replace(')','') : 'active'}</span></div>
              ))}
            </div>
            <div className="panel">
              <h4>Medications</h4>
              <div style={{fontSize:'12.5px', color:'#4a4a48', lineHeight:1.55}}>{persona.meds}</div>
            </div>
            <div className="panel">
              <h4>Lead leverage points</h4>
              {persona.levers.filter(l=>l.tier==='start').map(l => (
                <div className="row" key={l.key}>
                  <span className="k">{l.title}</span>
                  <span className="v">{l.why}</span>
                </div>
              ))}
            </div>
            <div className="stick">
              <div className="eyebrow">Patient's own words</div>
              <div className="quote">"{persona.hopes}"</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Style injection (once)
function injectLettersStyles() {
  if (document.getElementById("letters-styles")) return;
  const el = document.createElement("style");
  el.id = "letters-styles";
  el.textContent = lettersStyles;
  document.head.appendChild(el);
}
injectLettersStyles();

Object.assign(window, { LtIntake, LtStory, LtPlan, LtCtc });
