{e.kind}

{e.org}

{e.title}

{e.who}

{e.claim}

What it can show{e.shows}

What it cannot show{e.limits}

Your verdict

{VERDICTS.map((v) => ( ))}

setNote(e2.target.value)} />
      </div>
      <p className="srcline">
        <I.arrowUp style={{ width: 12, height: 12 }} />
        <a href={e.url} target="_blank" rel="noopener noreferrer">Read the source</a>
      </p>
    </article>
  );
}

function Evidence({ verdicts, setVerdicts, notes, setNotes, go }) {
  const answered = EVIDENCE.filter((e) => verdicts[e.id]).length;
  return (
    <div className="stack">
      <header>
        <p className="eyebrow">Step three</p>
        <h1 className="h-lg">The evidence desk</h1>
        <p className="lede" style={{ marginTop: 8, maxWidth: '62ch' }}>
          Six real sources on AI and work. They do not agree. That is not a flaw in the research —
          it is what an unsettled question looks like while it is still being settled. Read each one,
          note what it can and cannot show, and record a verdict.
        </p>
      </header>

<div className="notice">
        <b>Before you start.</b> Three things go wrong when people read this literature.
        <b> Exposure ≠ elimination</b> — a task score is not a job forecast.
        <b> Postings ≠ employment</b> — job-ad counts move for many reasons.
        <b> Correlation ≠ cause</b> — the same years contain interest-rate rises and a tech correction.
      </div>

<div className="progressline" aria-hidden="true"><i style={{ width: `${(answered / EVIDENCE.length) * 100}%` }} /></div>
      <p className="tiny">{answered} of {EVIDENCE.length} sources judged</p>

<div className="evgrid">
        {EVIDENCE.map((e) => (
          <EvidenceCard key={e.id} e={e}
            verdict={verdicts[e.id]}
            setVerdict={(v) => setVerdicts((s) => ({ ...s, [e.id]: v }))}
            note={notes[e.id]}
            setNote={(v) => setNotes((s) => ({ ...s, [e.id]: v }))}
          />
        ))}
      </div>

<section className="panel stack">
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <img src="assets/svg/props/balance-scale.svg" alt="" width="52" height="52" style={{ filter: 'invert(1) brightness(1.6)' }} />
          <div>
            <p className="eyebrow">Holding two things at once</p>
            <h3 className="h-md">The honest summary</h3>
          </div>
        </div>
        <p style={{ fontSize: '.95rem' }}>
          The best current reading is that there is <b>no economy-wide AI jobs collapse</b> in the national
          statistics, <b>and</b> there is a <b>real, measured, age-specific squeeze</b> at the entry level in the
          most automatable occupations. Both can be true, because national averages are made of millions of
          people and the effect is concentrated in a few hundred thousand of them — the ones just starting out.
        </p>
        <p style={{ fontSize: '.95rem' }}>
          Which matters more to you depends on where you are standing. If you are twenty-two and applying for
          your first job in an exposed occupation, the national average is not the number that describes your life.
        </p>
        <div><button className="btn" onClick={() => go('test')}>Now check it against the numbers <span className="knob"><I.arrow /></span></button></div>
      </section>
    </div>
  );
}

/* =====================================================================
   12b. SCREEN: PRESSURE TEST — claims vs the official numbers
   ===================================================================== */

function ClaimCard({ claim, children, verdict, setVerdict }) {
  return (
    <article className="evcard" style={{ borderLeft: `6px solid ${claim.tone}` }}>
      <div>
        <p className="kind">You have heard this · {claim.heard}</p>
        <h3 style={{ fontSize: '1.35rem', marginTop: 6, color: claim.tone }}>“{claim.claim}”</h3>
      </div>
      <p className="tiny"><b>What we can check:</b> {claim.check}</p>
      {children}
      <div className="stack" style={{ gap: 9 }}>
        <p className="eyebrow">Does the data support the claim?</p>
        <div className="chipset">
          {[['supports', 'Supports it'], ['partly', 'Partly'], ['against', 'Cuts against it'], ['cant', 'Cannot tell']].map(([k, l]) => (
            <button key={k} className={'chip' + (k === 'against' ? ' coral' : k === 'partly' ? ' mustard' : k === 'cant' ? ' violet' : '')}
              aria-pressed={verdict === k} onClick={() => setVerdict(verdict === k ? null : k)}>{l}</button>
          ))}
        </div>
      </div>
      <p className="srcline">Source: {claim.source}</p>
    </article>
  );
}

function PressureTest({ verdicts, setVerdicts, go }) {
  const data = useData();
  const wiki = useWiki();
  const E = data.extra || EXTRA_SNAPSHOT;
  const gpt = idxOfMonth(2022, 11);
  const set = (id, v) => setVerdicts((s) => ({ ...s, [id]: v }));

const young = E[CPS_YOUNG] || [], prime = E[CPS_PRIME] || [];
  const gapAt = (i) => (young[i] != null && prime[i] != null) ? young[i] - prime[i] : null;
  const gapNow = gapAt(young.length - 1), gapGpt = gapAt(gpt);
  const gapPre = gapAt(gpt - 36);
  const gapSeries = young.map((v, i) => gapAt(i));

const open = E[JOLTS_OPEN] || [], hire = E[JOLTS_HIRE] || [];
  const openPeak = Math.max(...open), openPeakAt = open.indexOf(openPeak);
  const openNow = open[open.length - 1];
  const total = data.ces.CES0000000001;

const prod = E[PROD_IDX] || [];
  const qIdx = (y, q) => (y - CES_MONTH0[0]) * 4 + (q - 1);
  const preA = prod[0], preB = prod[qIdx(2022, 4)];
  const postA = prod[qIdx(2022, 4)], postB = prod[prod.length - 1];
  const annual = (a, b, quarters) => (Math.pow(b / a, 4 / quarters) - 1) * 100;
  const preRate = annual(preA, preB, qIdx(2022, 4));
  const postRate = annual(postA, postB, prod.length - 1 - qIdx(2022, 4));

const views = wiki.views || WIKI_SNAPSHOT;
  const gptViews = views.ChatGPT || [];
  const vSeen = gptViews.filter((v) => v != null);
  const vPeak = vSeen.length ? Math.max(...vSeen) : 0;
  /* The live array is padded to a fixed length, so the last slot is usually
     empty — take the last month that actually reported. */
  const vLast = vSeen.length ? vSeen[vSeen.length - 1] : 0;
  const answered = CLAIMS.filter((c) => verdicts[c.id]).length;

return (
    <div className="stack">
      <header>
        <p className="eyebrow">Step four</p>
        <h1 className="h-lg">Pressure test</h1>
        <p className="lede" style={{ marginTop: 8, maxWidth: '64ch' }}>
          Four claims you have almost certainly heard about AI and work. Each one is checked
          here against a number the U.S. government publishes, pulled live. Some hold up.
          Some do not. Some cannot be settled this way at all — and noticing which is which
          is the whole skill.
        </p>
      </header>

<div className="progressline" aria-hidden="true"><i style={{ width: `${(answered / CLAIMS.length) * 100}%` }} /></div>
      <p className="tiny">{answered} of {CLAIMS.length} claims tested</p>

<div className="evgrid">
        {/* ---------- 1. young workers ---------- */}
        <ClaimCard claim={CLAIMS[0]} verdict={verdicts.young} setVerdict={(v) => set('young', v)}>
          <MultiSpark share lines={[
            { label: 'Aged 20–24', color: '#FF6658', data: young },
            { label: 'Aged 25 and over', color: '#BFD7CC', data: prime },
          ]} />
          <ChartLegend lines={[
            { label: 'Unemployment rate, 20–24', color: '#FF6658' },
            { label: 'Unemployment rate, 25+', color: '#BFD7CC' },
          ]} />
          <div className="statgrid">
            <div className="stat"><div className="k">Gap, 3 yrs before ChatGPT</div><div className="v">{gapPre != null ? gapPre.toFixed(1) + ' pts' : '—'}</div><div className="n">Nov 2019</div></div>
            <div className="stat"><div className="k">Gap at ChatGPT</div><div className="v">{gapGpt != null ? gapGpt.toFixed(1) + ' pts' : '—'}</div><div className="n">Nov 2022</div></div>
            <div className={'stat ' + (gapNow > gapGpt ? 'down' : 'up')}><div className="k">Gap now</div><div className="v">{gapNow != null ? gapNow.toFixed(1) + ' pts' : '—'}</div><div className="n">{monthLabel(young.length - 1)}</div></div>
          </div>
          <div className="twocol">
            <div className="showsbox yes"><b>What holds up</b>Young workers really are unemployed at roughly twice the rate of everyone else — and they always have been. The rate for 20–24s rose through 2024 and 2025.</div>
            <div className="showsbox no"><b>What does not</b>The gap has not opened dramatically since 2022; it was already this wide in 2019. This national average cannot isolate AI, which is precisely why the Stanford team went to payroll records for specific occupations instead.</div>
          </div>
        </ClaimCard>

{/* ---------- 2. openings ---------- */}
        <ClaimCard claim={CLAIMS[1]} verdict={verdicts.openings} setVerdict={(v) => set('openings', v)}>
          <MultiSpark lines={[
            { label: 'Job openings', color: '#FF6658', data: open },
            { label: 'Employment', color: '#BFD7CC', data: total, dash: '5 4', weight: 2 },
          ]} />
          <ChartLegend lines={[
            { label: 'Job openings', color: '#FF6658', scale: 'own scale' },
            { label: 'Total employment', color: '#BFD7CC', scale: 'own scale' },
          ]} note="Two different measures on one time axis, each on its own scale — the shapes are the point, not the heights." />
          <div className="statgrid">
            <div className="stat"><div className="k">Openings at peak</div><div className="v">{(openPeak / 1000).toFixed(1)}M</div><div className="n">{monthLabel(openPeakAt)}</div></div>
            <div className="stat down"><div className="k">Openings now</div><div className="v">{(openNow / 1000).toFixed(1)}M</div><div className="n">{pct(((openNow - openPeak) / openPeak) * 100, 0)} from peak</div></div>
            <div className="stat up"><div className="k">People employed</div><div className="v">{pct(((total[total.length - 1] - total[gpt]) / total[gpt]) * 100)}</div><div className="n">Since Nov 2022</div></div>
          </div>
          <div className="twocol">
            <div className="showsbox yes"><b>What holds up</b>Openings really did collapse — down roughly {Math.round(((openPeak - openNow) / openPeak) * 100)}% from the 2022 peak, and the hires rate fell with them. Getting hired is genuinely harder.</div>
            <div className="showsbox no"><b>What does not</b>Employment kept rising through the same period, so jobs did not disappear — advertised jobs did. And the fall began in <b>{monthLabel(openPeakAt)}</b>, before ChatGPT existed, when interest rates were climbing.</div>
          </div>
        </ClaimCard>

{/* ---------- 3. productivity ---------- */}
        <ClaimCard claim={CLAIMS[2]} verdict={verdicts.productivity} setVerdict={(v) => set('productivity', v)}>
          <MultiSpark quarterly lines={[{ label: 'Output per hour', color: '#F6C94C', data: prod }]} />
          <ChartLegend lines={[{ label: 'Output per hour, nonfarm business (2017 = 100)', color: '#F6C94C' }]} />
          <div className="statgrid">
            <div className="stat"><div className="k">Growth 2019 → 2022</div><div className="v">{preRate.toFixed(1)}%<span style={{ fontSize: '.8rem' }}>/yr</span></div><div className="n">Before ChatGPT</div></div>
            <div className="stat up"><div className="k">Growth since 2022</div><div className="v">{postRate.toFixed(1)}%<span style={{ fontSize: '.8rem' }}>/yr</span></div><div className="n">After ChatGPT</div></div>
            <div className="stat"><div className="k">Difference</div><div className="v">{(postRate - preRate >= 0 ? '+' : '') + (postRate - preRate).toFixed(1)}<span style={{ fontSize: '.8rem' }}> pts</span></div><div className="n">Annualised</div></div>
          </div>
          <div className="twocol">
            <div className="showsbox yes"><b>What holds up</b>Productivity growth has genuinely been faster since late 2022 than in the years before it. That acceleration is real and it is measured.</div>
            <div className="showsbox no"><b>What does not</b>“Boom” is doing a lot of work. A shift of about {Math.abs(postRate - preRate).toFixed(1)} points a year is modest next to the claims being made — and post-pandemic recovery, business investment and a changed workforce all sit in the same window.</div>
          </div>
        </ClaimCard>

{/* ---------- 4. attention ---------- */}
        <ClaimCard claim={CLAIMS[3]} verdict={verdicts.attention} setVerdict={(v) => set('attention', v)}>
          <MultiSpark lines={[
            { label: 'ChatGPT article views', color: '#8C86FF', data: gptViews },
            { label: 'Total US employment', color: '#BFD7CC', data: total, dash: '5 4', weight: 2 },
          ]} />
          <ChartLegend lines={[
            { label: 'Wikipedia views, “ChatGPT”', color: '#8C86FF', scale: 'own scale' },
            { label: 'Total US employment', color: '#BFD7CC', scale: 'own scale' },
          ]} note={`Wikipedia data ${wiki.status === 'live' ? 'fetched live' : 'from the bundled snapshot'} via the Wikimedia REST API.`} />
          <div className="statgrid">
            <div className="stat"><div className="k">Peak monthly views</div><div className="v">{(vPeak / 1e6).toFixed(1)}M</div><div className="n">One article, one month</div></div>
            <div className="stat"><div className="k">Employment change</div><div className="v">{pct(((total[total.length - 1] - total[gpt]) / total[gpt]) * 100)}</div><div className="n">Same period</div></div>
            <div className="stat"><div className="k">Views now vs peak</div><div className="v">{vPeak ? Math.round((vLast / vPeak) * 100) : '—'}%</div><div className="n">Attention decays</div></div>
          </div>
          <div className="twocol">
            <div className="showsbox yes"><b>What holds up</b>Public attention did change overnight. One Wikipedia article went from nothing to {(vPeak / 1e6).toFixed(1)} million views in a month — a genuinely unusual event.</div>
            <div className="showsbox no"><b>What does not</b>Attention is not employment. The green line barely registers the moment the purple one explodes. How much you have heard about something is a poor guide to how much it has changed — and it is the main input most people are working from.</div>
          </div>
        </ClaimCard>
      </div>

<section className="panel stack">
        <div>
          <p className="eyebrow">The habit worth keeping</p>
          <h3 className="h-md">Ask what would settle it</h3>
        </div>
        <p style={{ fontSize: '.95rem' }}>
          Each of these claims could in principle be true. What separates them is not how
          confident the person saying it sounds — it is whether the number they are pointing at
          can actually carry the weight. National averages hide subgroups. Job ads are not jobs.
          A window that contains a rate-rise cycle cannot tell you about AI on its own.
        </p>
        <p style={{ fontSize: '.95rem' }}>
          When you next read a headline about AI and work, the useful question is not
          “is this true?” but <b>“what measurement would show me if it were false?”</b>
        </p>
        <div><button className="btn" onClick={() => go('decide')}>Now make the decision yourself <span className="knob"><I.arrow /></span></button></div>
      </section>
    </div>
  );
}

/* =====================================================================
   12c. SCREEN: THE DECISION — a scenario with no free choices
   ===================================================================== */

return (
    <div className="stack">
      <section className="hero" style={{ paddingTop: 10 }}>
        <div className="stack">
          <div>
            <p className="eyebrow">Step five</p>
            <h1 className="h-lg">The decision</h1>
            <p className="lede" style={{ marginTop: 8 }}>
              Automation does not happen to a workplace. Somebody decides. For the next few
              minutes that somebody is you, and the workplace employs <b>{c.title.toLowerCase()}s</b>.
              Every option here is one a real organisation has chosen. None of them is free.
            </p>
          </div>
        </div>
        <div className="hero-art" style={{ maxWidth: 300 }}>
          <img src="assets/art/hero-plan.png" alt="A student and a robot working through a plan together." />
        </div>
      </section>

<div className="progressline" aria-hidden="true"><i style={{ width: `${(answered / ROUNDS.length) * 100}%` }} /></div>
      <p className="tiny">{answered} of {ROUNDS.length} decisions made</p>

{ROUNDS.map((r, i) => {
        const chosen = r.options.find((o) => o.k === picks[r.id]);
        const locked = i > 0 && !picks[ROUNDS[i - 1].id];
        return (
          <section key={r.id} className="panel stack" style={locked ? { opacity: .45 } : undefined}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span style={{
                width: 38, height: 38, borderRadius: '50%', flex: 'none', display: 'grid', placeItems: 'center',
                background: chosen ? 'var(--mint)' : 'var(--charcoal-3)', color: chosen ? 'var(--ink)' : 'var(--muted)',
                fontFamily: 'var(--head)', fontWeight: 900,
              }}>{i + 1}</span>
              <div>
                <p className="eyebrow">Round {i + 1}</p>
                <h3 className="h-md">{r.title}</h3>
              </div>
            </div>
            {locked ? (
              <p className="tiny">Make the previous decision first — the situation depends on it.</p>
            ) : (
              <>
                <p style={{ fontSize: '1rem' }}>{r.setup(c.title)}</p>
                <div className="stack" style={{ gap: 10 }}>
                  {r.options.map((o) => {
                    const on = picks[r.id] === o.k;
                    return (
                      <button key={o.k} onClick={() => pick(r.id, o.k)} aria-pressed={on}
                        style={{
                          textAlign: 'left', padding: '14px 16px', borderRadius: 'var(--r-md)',
                          border: on ? '2px solid var(--mustard)' : '2px solid rgba(255,247,231,.18)',
                          background: on ? 'rgba(246,201,76,.1)' : 'var(--charcoal-3)',
                          display: 'grid', gap: 8,
                        }}>
                        <b style={{ fontSize: '.98rem' }}>{o.label}</b>
                        {on && <span className="tiny" style={{ color: '#ded7c8' }}>{o.why}</span>}
                      </button>
                    );
                  })}
                </div>
                {chosen && (
                  <p className="tiny">
                    You can change your mind — nothing here is scored, and reconsidering is the point.
                  </p>
                )}
              </>
            )}
          </section>
        );
      })}

{done && (
        <section className="deltabox">
          <div>
            <p className="eyebrow">Debrief</p>
            <h3 className="h-md" style={{ marginTop: 4 }}>{head}</h3>
          </div>
          <p style={{ fontSize: '.98rem' }}>{body}</p>
          <div className="stack" style={{ gap: 16, marginTop: 6 }}>
            {METERS.map((m) => <Meter key={m.k} label={m.label} note={m.note} value={meters[m.k]} />)}
          </div>
          <p style={{ fontSize: '.95rem', borderTop: '1px solid rgba(255,247,231,.12)', paddingTop: 14 }}>
            <b style={{ color: 'var(--mustard)' }}>The point of the exercise:</b> the tool was the
            same in every path. The difference in outcome came entirely from decisions people
            made about who absorbs the change. When you read that “AI cut those jobs”,
            somebody made a choice like the ones you just made — and could have chosen otherwise.
          </p>
          <div><button className="btn" onClick={() => go('reflect')}>Write it up <span className="knob"><I.pencil /></span></button></div>
        </section>
      )}
    </div>
  );
}

/* =====================================================================
   13. SCREEN: DECISION LAB
   ===================================================================== */

return (
    <div className="stack">
      <section className="hero" style={{ paddingTop: 10 }}>
        <div className="stack">
          <div>
            <p className="eyebrow">Step six · Reflect · Question · Decide</p>
            <h1 className="h-lg">Decision Lab</h1>
            <p className="lede" style={{ marginTop: 8 }}>
              You have real numbers, your own task sort, and six sources that argue with each other.
              Now say what you think about <b>{c.title}</b> — and say what would change your mind.
            </p>
          </div>
        </div>
        <div className="hero-art" style={{ maxWidth: 340 }}>
          <img src="assets/art/hero-reflect.png" alt="A student writing in a notebook titled My Career Reflections beside a robot." />
        </div>
      </section>

<section className="scenario">
        <p className="eyebrow" style={{ color: 'rgba(255,255,255,.75)' }}>Scenario</p>
        <p className="q">{SCENARIOS[scenIdx % SCENARIOS.length]}</p>
        <div className="chipset">
          <button className="btn dark" onClick={() => setScenIdx((i) => (i + 1) % SCENARIOS.length)}>
            Another scenario <span className="knob"><I.arrow /></span>
          </button>
        </div>
      </section>

<div className="progressline" aria-hidden="true"><i style={{ width: `${(written / REFLECT_Q.length) * 100}%` }} /></div>
      <p className="tiny">{written} of {REFLECT_Q.length} answered</p>

<section className="stack">
        {REFLECT_Q.map((q, i) => {
          const Icon = I[q.icon];
          return (
            <div className="qcard" key={q.id}>
              <div className="qhead">
                <span className="ico" style={{ background: q.tone }}><Icon /></span>
                <div>
                  <h3>{i + 1}. {q.q}</h3>
                </div>
              </div>
              <textarea rows="3" placeholder="Write your thoughts…"
                value={a[q.id] || ''} onChange={(e) => setA(q.id, e.target.value)} />
            </div>
          );
        })}
      </section>

<section className="confbox">
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 200 }}>
            <h3 className="h-md">How informed is your judgement?</h3>
            <p style={{ fontSize: '.88rem', marginTop: 6 }}>Slide to rate your own confidence — honestly.</p>
          </div>
          <div style={{ width: 170, flex: 'none' }}><Gauge score={(conf - 1) * 25} size={170} /></div>
        </div>
        <input type="range" min="1" max="5" step="1" value={conf}
          onChange={(e) => setConf(Number(e.target.value))} aria-label="Confidence, 1 to 5" />
        <div className="conflabels"><span>1 · Not informed</span><span>3 · Somewhat</span><span>5 · Very</span></div>
        <p style={{ fontFamily: 'var(--head)', fontWeight: 900, fontSize: '1.4rem' }}>{conf} — {CONF_LABELS[conf]}</p>
      </section>

<div className="chipset">
        <button className="btn" onClick={() => go('card')}>Build my card <span className="knob"><I.arrow /></span></button>
      </div>
    </div>
  );
}

/* =====================================================================
   14. EXPORT CARD
   ===================================================================== */

function buildCardHTML(ctx) {
  const { c, o, data, sort, score, mix, conf, answers, verdicts, notes, name, when,
    guess, claimVerdicts, picks } = ctx;
  const level = levelOf(score);
  const series = data.ces[c.ind];
  const gpt = idxOfMonth(2022, 11);
  const sinceGpt = series && series[gpt] ? ((series[series.length - 1] - series[gpt]) / series[gpt]) * 100 : null;
  const lastM = monthLabel((series ? series.length : 1) - 1);
  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (m) => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[m]));

const gaugeAngle = ((score ?? 0) / 100) * 180 - 180;
  const nx = 256 + Math.cos(gaugeAngle * Math.PI / 180) * 132;
  const ny = 347 + Math.sin(gaugeAngle * Math.PI / 180) * 132;

const bucket = (k) => c.tasks.filter((_, i) => sort[i] === k);

const verdictRows = EVIDENCE.filter((e) => verdicts[e.id] || (notes[e.id] || '').trim())
    .map((e) => `<tr><td><b>${esc(e.org)}</b><br><span class="s">${esc(e.title)}</span></td>
      <td class="v">${esc((VERDICTS.find((v) => v.k === verdicts[e.id]) || {}).label || '—')}</td>
      <td>${esc(notes[e.id] || '')}</td></tr>`).join('');

const CLAIM_LABELS = { supports: 'Supports it', partly: 'Partly', against: 'Cuts against it', cant: 'Cannot tell' };
  const claimRows = CLAIMS.filter((cl) => claimVerdicts[cl.id])
    .map((cl) => `<tr><td>“${esc(cl.claim)}”<br><span class="s">${esc(cl.source)}</span></td>
      <td class="v">${esc(CLAIM_LABELS[claimVerdicts[cl.id]])}</td></tr>`).join('');

const gInfo = guess ? GUESSES.find((g) => g.k === guess) : null;
  const indSeries = data.ces[c.ind];
  const actualChg = indSeries && indSeries[gpt] ? ((indSeries[indSeries.length - 1] - indSeries[gpt]) / indSeries[gpt]) * 100 : null;
  const gTruth = actualChg == null ? null : guessOf(actualChg);

return `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Career Futures — ${esc(c.title)} — ${esc(name || 'Student')}</title>
<style>
  :root{--coral:#FF6658;--violet:#6E69F8;--mustard:#F6C94C;--mint:#BFD7CC;--cream:#FFF7E7;--ink:#161616;--char:#1F1F1F;--char2:#2A2A2A;--muted:#90A89E}
  *{box-sizing:border-box}
  body{margin:0;background:#C7D7CF;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
       color:var(--cream);padding:28px 16px;line-height:1.55}
  .card{max-width:760px;margin:0 auto;background:var(--char);border-radius:32px;overflow:hidden;
        box-shadow:0 24px 70px rgba(20,30,26,.3)}
  h1,h2,h3{font-family:"Arial Narrow","Roboto Condensed",Impact,sans-serif;font-weight:900;
           text-transform:uppercase;letter-spacing:.015em;margin:0;line-height:.98}
  .hd{padding:30px 30px 26px;background:linear-gradient(150deg,#2A2A2A,#1B1B1B)}
  .eyebrow{font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;font-weight:800;color:var(--mint);margin:0 0 8px}
  .hd h1{font-size:2.5rem}
  .hd .sub{color:#c3bdb0;font-size:.9rem;margin-top:8px}
  .who{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;font-size:.74rem}
  .who span{background:rgba(255,247,231,.09);border:1px solid rgba(255,247,231,.16);border-radius:99px;padding:5px 13px}
  .sec{padding:24px 30px;border-top:1px solid rgba(255,247,231,.09)}
  .sec h2{font-size:1.15rem;color:var(--mustard);margin-bottom:14px}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .stat{background:var(--char2);border:1px solid rgba(255,247,231,.09);border-radius:18px;padding:13px 15px}
  .stat .k{font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:800}
  .stat .v{font-family:"Arial Narrow",Impact,sans-serif;font-weight:900;font-size:1.6rem;margin-top:4px;line-height:1}
  .stat .n{font-size:.66rem;color:var(--muted);margin-top:4px}
  .score{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:${level === 'low' ? '#BFD7CC' : level === 'moderate' ? '#F6C94C' : '#FF6658'};
         color:var(--ink);border-radius:26px;padding:22px}
  .score h2{color:var(--ink);margin:0}
  .score .big{font-family:"Arial Narrow",Impact,sans-serif;font-weight:900;font-size:3.6rem;line-height:.9}
  .score svg{width:190px;height:auto}
  .bar{display:flex;height:16px;border-radius:99px;overflow:hidden;margin-top:12px}
  .key{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem;margin-top:9px;color:#c9c3b6}
  .key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
  .col{background:var(--char2);border-radius:18px;padding:14px;border-top:4px solid}
  .col h3{font-size:.76rem;letter-spacing:.12em;margin-bottom:9px}
  .col ul{margin:0;padding-left:17px;font-size:.8rem;color:#cbc5b8;display:grid;gap:6px}
  .band{position:relative;height:30px;border-radius:99px;margin-top:8px;
        background:linear-gradient(90deg,#BFD7CC 0 33%,#F6C94C 33% 66%,#FF6658 66% 100%)}
  .band .r{position:absolute;top:0;bottom:0;background:rgba(22,22,22,.5);border:2px solid var(--violet);border-radius:8px}
  .band .m{position:absolute;top:-4px;bottom:-4px;width:4px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--cream)}
  .q{background:var(--char2);border-radius:18px;padding:15px;margin-bottom:10px;border-left:4px solid var(--violet)}
  .ql{font-size:.74rem;color:var(--mint);font-weight:700;margin:0 0 6px;text-transform:uppercase;letter-spacing:.08em}
  .qa{margin:0;font-size:.92rem;white-space:pre-wrap}
  table{width:100%;border-collapse:collapse;font-size:.8rem}
  td{padding:9px 8px;border-bottom:1px solid rgba(255,247,231,.09);vertical-align:top}
  td.v{font-weight:800;color:var(--mustard);white-space:nowrap}
  .s{color:var(--muted);font-size:.72rem}
  .conf{background:var(--violet);border-radius:26px;padding:20px;color:#fff}
  .conf .big{font-family:"Arial Narrow",Impact,sans-serif;font-weight:900;font-size:2rem}
  .pred{background:var(--char2);border-radius:18px;padding:15px;border-left:4px solid var(--mustard);font-size:.88rem}
  .mrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:9px;font-size:.82rem}
  .ml{font-weight:700;min-width:104px}
  .mt{position:relative;height:12px;border-radius:99px;background:#1b1b1b;display:block}
  .mt i{position:absolute;top:0;bottom:0;border-radius:99px}
  .mv{font-family:"Arial Narrow",Impact,sans-serif;font-weight:900;font-size:1rem;min-width:26px;text-align:right}
  .ft{padding:24px 30px;background:var(--ink);font-size:.72rem;color:#9a948a;line-height:1.6}
  .ft b{color:var(--mint)}
  .ft a{color:var(--mustard)}
  @media print{body{background:#fff;padding:0}.card{box-shadow:none;border-radius:0;max-width:none}}
</style></head><body>
<div class="card">
  <div class="hd">
    <p class="eyebrow">Career Futures · Exposure Lab</p>
    <h1>${esc(c.title)}</h1>
    <p class="sub">${esc(c.full)} · SOC ${c.soc.slice(0, 2)}-${c.soc.slice(2)} · ${esc(c.cluster)}</p>
    <div class="who">
      <span><b>${esc(name || 'Student')}</b></span>
      <span>${esc(when)}</span>
      <span>Data: ${data.status === 'live' ? 'live BLS API' : 'bundled BLS snapshot'}</span>
    </div>
  </div>

<div class="sec">
    <h2>What the Bureau of Labor Statistics says</h2>
    <div class="grid">
      <div class="stat"><div class="k">Employed</div><div class="v">${fmtInt(o.emp)}</div><div class="n">OEWS ${OEWS_PERIOD}</div></div>
      <div class="stat"><div class="k">Median pay</div><div class="v">${fmtUSD(o.med)}</div><div class="n">Annual, national</div></div>
      <div class="stat"><div class="k">${esc(c.indName)}</div><div class="v">${sinceGpt == null ? '—' : pct(sinceGpt)}</div><div class="n">Since Nov 2022 · to ${esc(lastM)}</div></div>
    </div>
    ${gInfo && gTruth ? `<div class="pred" style="margin-top:12px">
      <b>Before I looked</b>, I predicted employment in this industry had
      <b>${esc(gInfo.label.toLowerCase())}</b> since ChatGPT launched. It actually
      <b>${esc(gTruth.label.toLowerCase())}</b> — ${pct(actualChg)}.
      ${gInfo.k === gTruth.k ? 'I was right.' : 'I was wrong.'}</div>` : ''}
  </div>

<div class="sec">
    <h2>My exposure estimate</h2>
    <div class="score">
      <div style="flex:1;min-width:180px">
        <h2>${esc(LEVEL_TEXT[level] || 'Not scored')}</h2>
        <p class="big">${score == null ? '—' : score}<span style="font-size:1.1rem"> / 100</span></p>
        <p style="font-size:.8rem;margin-top:6px">Automated = 1 · AI-assisted = ½ · Human-led = 0</p>
      </div>
      <svg viewBox="0 0 512 380" aria-hidden="true">
        <g fill="none" stroke-linecap="round" stroke="#FFF7E7" stroke-width="66">
          <path d="M90 347A166 166 0 0 1 173 203"/>
          <path d="M173 203A166 166 0 0 1 339 203"/>
          <path d="M339 203A166 166 0 0 1 422 347"/>
        </g>
        <g fill="none" stroke-linecap="round" stroke-width="52">
          <path d="M90 347A166 166 0 0 1 173 203" stroke="#BFD7CC"/>
          <path d="M173 203A166 166 0 0 1 339 203" stroke="#F6C94C"/>
          <path d="M339 203A166 166 0 0 1 422 347" stroke="#FF6658"/>
        </g>
        ${score == null ? '' : `<g stroke="#161616" stroke-width="10" stroke-linecap="round">
          <path d="M256 347L${nx.toFixed(1)} ${ny.toFixed(1)}"/>
          <circle cx="256" cy="347" r="20" fill="#161616"/>
          <circle cx="256" cy="347" r="7" fill="#FFF7E7" stroke="none"/></g>`}
      </svg>
    </div>
    <div class="bar">
      <span style="width:${mix.automated}%;background:#FF6658"></span>
      <span style="width:${mix.aiAssisted}%;background:#F6C94C"></span>
      <span style="width:${mix.humanLed}%;background:#BFD7CC"></span>
    </div>
    <div class="key">
      <span><i style="background:#FF6658"></i>Automated ${mix.automated}%</span>
      <span><i style="background:#F6C94C"></i>AI-assisted ${mix.aiAssisted}%</span>
      <span><i style="background:#BFD7CC"></i>Human-led ${mix.humanLed}%</span>
    </div>
    <p style="font-size:.78rem;color:var(--muted);margin-top:12px">Compared with this lab's research band of
      <b style="color:var(--cream)">${c.band[0]}–${c.band[1]}</b> (${esc(c.bandLabel.toLowerCase())} exposure).</p>
    <div class="band">
      <div class="r" style="left:${c.band[0]}%;width:${c.band[1] - c.band[0]}%"></div>
      ${score == null ? '' : `<div class="m" style="left:calc(${clamp(score, 1, 99)}% - 2px)"></div>`}
    </div>
  </div>

<div class="sec">
    <h2>How I sorted the tasks</h2>
    <div class="cols">
      <div class="col" style="border-color:#FF6658"><h3 style="color:#FF6658">Automated</h3>
        <ul>${bucket('automated').map((t) => `<li>${esc(t)}</li>`).join('') || '<li>—</li>'}</ul></div>
      <div class="col" style="border-color:#F6C94C"><h3 style="color:#F6C94C">AI-assisted</h3>
        <ul>${bucket('aiAssisted').map((t) => `<li>${esc(t)}</li>`).join('') || '<li>—</li>'}</ul></div>
      <div class="col" style="border-color:#BFD7CC"><h3 style="color:#BFD7CC">Human-led</h3>
        <ul>${bucket('humanLed').map((t) => `<li>${esc(t)}</li>`).join('') || '<li>—</li>'}</ul></div>
    </div>
  </div>

${verdictRows ? `<div class="sec"><h2>How I judged the evidence</h2><table>${verdictRows}</table></div>` : ''}

${claimRows ? `<div class="sec"><h2>Claims I pressure-tested</h2><table>${claimRows}</table></div>` : ''}

${decisionRows ? `<div class="sec">
    <h2>The decision I made</h2>
    <p style="font-size:.84rem;color:var(--muted);margin:0 0 12px">Running a workplace that employs ${esc(c.title.toLowerCase())}s.</p>
    <table>${decisionRows}</table>
    ${allDecided ? `<div style="margin-top:16px">${meterBars}
      <p style="font-size:.8rem;color:var(--muted);margin-top:10px"><b style="color:var(--mint)">${esc(DECISION_VERDICT(meters)[0])}</b>
      ${esc(DECISION_VERDICT(meters)[1])}</p></div>` : ''}
  </div>` : ''}

${answerBlocks ? `<div class="sec"><h2>My reflections</h2>${answerBlocks}</div>` : ''}

<div class="sec">
    <div class="conf">
      <p class="eyebrow" style="color:rgba(255,255,255,.75)">How informed is my judgement?</p>
      <p class="big">${conf} of 5 — ${esc(CONF_LABELS[conf])}</p>
    </div>
  </div>

<div class="ft">
    <p><b>Sources.</b> Employment and wage figures: U.S. Bureau of Labor Statistics, Occupational Employment
    and Wage Statistics, ${OEWS_PERIOD}, national, series prefix OEU. Industry employment trend: BLS Current
    Employment Statistics, series ${esc(c.ind)}, seasonally adjusted, through ${esc(lastM)}.
    Retrieved via the BLS Public Data API${data.status === 'live' ? '' : ` (bundled snapshot taken ${SNAPSHOT_TAKEN})`}.
    BLS does not endorse this work.</p>
    <p style="margin-top:9px"><b>What is not a BLS statistic.</b> The exposure score on this card was produced by a
    student sorting a task list written for this lab. The comparison band is this lab's reading of published
    task-exposure research (Felten et al.; Eloundou et al.; Stanford Digital Economy Lab). Neither is an official
    figure, and exposure is not a prediction that any job will disappear.</p>
    <p style="margin-top:9px"><b>Evidence consulted:</b> Stanford Digital Economy Lab, <i>Canaries in the Coal Mine?</i>;
    The Budget Lab at Yale, <i>Evaluating the Impact of AI on the Labor Market</i>; Anthropic Economic Index;
    BLS Employment Projections; Goldman Sachs Research; contemporary business-press coverage.</p>
    <p style="margin-top:9px">Career Futures — Exposure Lab. Built with Claude (Anthropic) for classroom use.
    Student work on this card was written by the student named above.</p>
  </div>
</div></body></html>`;
}

const picks = decisions[c.id] || {};
  const html = useMemo(() => buildCardHTML({
    c, o, data, sort,
    score: scoreOf(sort, c.tasks),
    mix: mixOf(sort, c.tasks),
    conf, answers: answers[c.id] || {}, verdicts, notes, name, when,
    guess: guesses[c.id], claimVerdicts, picks,
  }), [c, o, data, sort, conf, answers, verdicts, notes, name, when, guesses, claimVerdicts, picks]);

const flash = (m) => { setToast(m); setTimeout(() => setToast(null), 2200); };

return (
    <div className="stack">
      <header>
        <p className="eyebrow">Step seven</p>
        <h1 className="h-lg">Your card</h1>
        <p className="lede" style={{ marginTop: 8 }}>
          Everything you did in this lab, on one page, with its sources attached.
        </p>
      </header>

<div className="panel stack">
        <label className="eyebrow" htmlFor="nm">Name on the card</label>
        <input id="nm" className="txtin" value={name} onChange={(e) => setName(e.target.value)}
          placeholder="Your name" maxLength="60" />
        <div className="chipset">
          <button className="btn" onClick={download}>Download HTML <span className="knob"><I.arrowUp /></span></button>
          <button className="btn dark" onClick={printPdf}>Print / save PDF <span className="knob"><I.notebook /></span></button>
          <button className="btn ghost" onClick={copy}>Copy</button>
        </div>
        <p className="tiny">
          Everything stays on this device. Nothing you write is uploaded anywhere — the only network
          request this page makes is to the public BLS API for employment figures.
        </p>
      </div>

<div className="exportwrap">
        <iframe title="Card preview" srcDoc={html} className="cardframe"
          onLoad={(e) => {
            const d = e.currentTarget.contentDocument;
            if (d) e.currentTarget.style.height = (d.documentElement.scrollHeight + 24) + 'px';
          }}
          style={{ width: '100%', height: 900, border: 0, background: '#C7D7CF', borderRadius: 20 }} />
      </div>

{toast && <div className="toast">{toast}</div>}
    </div>
  );
}

/* =====================================================================
   15. APP SHELL
   ===================================================================== */

const TABS = [
  { id: 'home', label: 'Home', icon: 'home' },
  { id: 'career', label: 'Career', icon: 'careers' },
  { id: 'compare', label: 'Compare', icon: 'compare' },
  { id: 'evidence', label: 'Evidence', icon: 'resources' },
  { id: 'test', label: 'Test', icon: 'eye' },
  { id: 'decide', label: 'Decide', icon: 'scales' },
  { id: 'reflect', label: 'Reflect', icon: 'pencil' },
  { id: 'card', label: 'Card', icon: 'saved' },
];

useEffect(() => { document.getElementById('boot')?.setAttribute('hidden', ''); }, []);
  useEffect(() => { window.scrollTo({ top: 0, behavior: 'auto' }); }, [tab]);

const go = (t) => setTab(t);
  const c = byId(selected);
  const sorted = mixOf(sorts[c.id] || {}, c.tasks).done;

return (
    <DataCtx.Provider value={data}>
      <header className="topbar">
        <img className="mark" src="assets/svg/brand/app-mark.svg" alt="" />
        <div className="wm"><b>Career Futures</b><span>Exposure Lab</span></div>
        <div className="spacer" />
        <DataChip />
      </header>

<nav className="nav" aria-label="Sections">
        {TABS.map((t) => {
          const Icon = I[t.icon];
          return (
            <button key={t.id} aria-current={tab === t.id} onClick={() => go(t.id)}>
              <Icon /><span>{t.label}</span>
            </button>
          );
        })}
      </nav>

<main className="shell">
        {tab === 'home' && <Home selected={selected} setSelected={setSelected} go={go} />}
        {tab === 'career' && <CareerScreen selected={selected} setSelected={setSelected} sorts={sorts} setSorts={setSorts}
          guesses={guesses} setGuesses={setGuesses} go={go} />}
        {tab === 'compare' && <Compare sorts={sorts} cmp={cmp} setCmp={setCmp} />}
        {tab === 'evidence' && <Evidence verdicts={verdicts} setVerdicts={setVerdicts} notes={notes} setNotes={setNotes} go={go} />}
        {tab === 'test' && <PressureTest verdicts={claimVerdicts} setVerdicts={setClaimVerdicts} go={go} />}
        {tab === 'decide' && <Decide selected={selected} decisions={decisions} setDecisions={setDecisions} go={go} />}
        {tab === 'reflect' && <Reflect selected={selected} answers={answers} setAnswers={setAnswers}
          conf={conf} setConf={setConf} scenIdx={scenIdx} setScenIdx={setScenIdx} go={go} />}
        {tab === 'card' && <CardScreen selected={selected} sorts={sorts} answers={answers}
          verdicts={verdicts} notes={notes} conf={conf} name={name} setName={setName}
          guesses={guesses} claimVerdicts={claimVerdicts} decisions={decisions} />}

<footer style={{ marginTop: 46, paddingTop: 22, borderTop: '1px solid rgba(255,247,231,.09)' }}>
          <p className="tiny" style={{ maxWidth: '72ch' }}>
            <b style={{ color: 'var(--mint)' }}>Career Futures — Exposure Lab.</b> Employment and wage data:
            U.S. Bureau of Labor Statistics Public Data API (OEWS {OEWS_PERIOD}; CES monthly).
            The BLS does not endorse this lab. Exposure scores are student judgements, not official statistics,
            and exposure to automation is not a prediction that a job will disappear.
            Design system from the Career Futures site asset package. Interface and text built with Claude
            (Anthropic); all student writing stays on the student's own device.
            {!sorted && <> · <button style={{ color: 'var(--mustard)', textDecoration: 'underline' }} onClick={() => go('career')}>You have not finished sorting {c.title} tasks.</button></>}
          </p>
        </footer>
      </main>
    </DataCtx.Provider>
  );
}

createRoot(document.getElementById('root')).render(<App />);

Career
Futures

Pick a career

{c.title}

Seven steps

Make a prediction

{career.indName}

{c.title}

Sort the tasks

{LEVEL_TEXT[level]}

How you split the work

Now compare it

You vs. the research

What is hard to hand over

What to build next

{c.title}

Compare careers

What actually separates them

{e.title}