// Elephants in the Room — the site's evidence centerpiece.
// Rebuilt 2026-08-02 (roundtable redesign) on top of the 2026-08-02 evidence
// pass. Nine resident concerns (was seven — Property Values and The Process
// are new). Shared anatomy per topic, in order: (a) the resident-voice
// question as the panel title — the SAME text used on the hero's question
// cards, so ELEPHANT_TOPICS is exported to window and hero.jsx reads it
// rather than duplicating copy; (b) a VALIDATE line — one concrete sentence
// on why the worry is reasonable, never skipped, always before any evidence;
// (c) a short, direct answer; (d) a badged "what this proposal would
// do" card; (f) an optional "what we don't know yet" line — naming a real
// gap builds trust, so it's used wherever there is a real gap, not invented
// to look humble; (g) dense single-row receipts with a "Checked Aug 2026"
// stamp (see shared.jsx SourceReceipt); (h) a jump link to the deeper site
// section, where one exists. Every topic concedes at least one real cost or
// documented incident — that concession is what makes the rest credible.
//
// Sourcing: docs/research/2026-08-02-elephants-evidence-briefs.md plus a
// second research pass for Property Values, The Process, and five additional
// concessions (Newton County GA wells, Consumer Reports' 78% bill-worry
// figure, Chandler AZ noise, Memphis xAI turbines, Good Jobs First's 2026
// abatement tracker). All seven of that second pass's URLs sit behind
// bot-blocking WAFs that also 403 curl/WebFetch on their own homepages —
// verified live via the Wayback Machine (each returns a real 200 snapshot)
// plus independent web-search corroboration of the underlying claims before
// being written into copy here.
//
// UX: one persistent answer browser pairs an indexed concern navigator with
// an editorial reading surface. The active concern never collapses, switching
// does not move the page, and the evidence is carried by copy and source
// receipts—not decorative diagrams. Deep-linkable via #answers-<topic>.

const ELEPHANT_TOPICS = [
  {
    id: 'water',
    label: 'Water',
    proposalStatus: 'illustrative',
    question: 'Will my well still work?',
    validate: "That's not an abstract question out here — it's your well, in a dry August, with cattle and a family table depending on it. And it has happened elsewhere: wells near a Meta data center in Newton County, Georgia started running dry in 2023.",
    answer: "Data-center water use isn't one number — real facilities range from near-zero to millions of gallons a day, depending entirely on the cooling design. This proposal specifies air cooling, not the evaporative cooling towers linked to the Newton County case.",
    proposal: "Air-cooled design — water for cleaning, makeup, and employee facilities, not a cooling loop. Roughly 18 million gallons a year, a demonstration figure for this template. Quarterly water-use reports filed with the county as public record.",
    dontKnow: "The well-monitoring radius and response time described here are illustrative. A real deployment should publish the actual monitoring plan and a named contact before breaking ground.",
    receipts: [
      { title: "Inside Microsoft's two-decade push to cut water intensity while scaling for growth", body: 'Fleet-wide water-use effectiveness fell from 2.3 to 0.27 L/kWh since the early 2000s.', issuer: 'Microsoft', date: 'Jun 2026', url: 'https://blogs.microsoft.com/blog/2026/06/24/inside-microsofts-two-decade-push-to-cut-water-intensity-while-scaling-for-growth/' },
      { title: 'Data Center Boom Reaches West Georgia, Raising Questions Amid Mounting Opposition', body: 'Documents wells running dry near a Meta data center in Newton County, GA, starting in 2023.', issuer: 'Inside Climate News', date: 'Apr 2026', url: 'https://insideclimatenews.org/news/13042026/georgia-data-center-boom/' },
      { title: 'Google 2024 Environmental Report', body: 'Individual Google sites ranged from under 500,000 to nearly 3 million gallons/day by climate and design.', issuer: 'Google', date: '2025', url: 'https://blog.google/' },
    ],
    deepLink: { id: 'water', label: 'water' },
  },
  {
    id: 'power',
    label: 'Electricity',
    proposalStatus: 'sourced',
    question: 'Is my bill going up to pay for this?',
    validate: "That worry tracks a real, national pattern, not a fringe concern — a November 2025 Consumer Reports survey found 78% of Americans are concerned that data centers will raise their own electricity bills.",
    answer: "Oklahoma's 2026 law requires a project this size to sign a dedicated tariff covering the infrastructure its own load creates — including protection if it later leaves. That keeps this project's costs with this project, though it doesn't block a separate, unrelated rate case.",
    proposal: "Signs Oklahoma's dedicated large-load tariff under HB 2992 — new lines and a substation built and paid for by this project, with stranded-cost protection if it downsizes or leaves early.",
    dontKnow: "No specific cost-split percentage has been published for this project. That number belongs in the filed tariff docket, not on this page — ask for the docket number.",
    receipts: [
      { title: 'Data Center Consumer Ratepayer Protection Act of 2026 — official summary', body: 'Requires 75 MW+ loads to sign a dedicated tariff with stranded-cost protection.', issuer: 'Oklahoma Corporation Commission', date: 'signed May 2026', url: 'https://oklahoma.gov/occ.html' },
      { title: 'With electricity bills rising, some states consider new data center laws', body: 'Cites the Consumer Reports survey: 78% of Americans worry data centers will raise their bills.', issuer: 'Stateline', date: 'Feb 2026', url: 'https://www.stateline.org/2026/02/05/with-electricity-bills-rising-some-states-consider-new-data-center-laws/' },
      { title: 'After more than a decade of little change, U.S. electricity consumption is rising again', body: 'National demand rose for four straight years — the strongest streak since 2000.', issuer: 'U.S. Energy Information Administration', date: '2026', url: 'https://www.eia.gov/todayinenergy/detail.php?id=65264' },
    ],
    deepLink: { id: 'power', label: 'power' },
  },
  {
    id: 'noise',
    label: 'Noise',
    proposalStatus: 'illustrative',
    question: 'Will I hear it from my porch?',
    validate: "That's a documented pattern, not paranoia. A CyrusOne data center in Chandler, Arizona drew years of resident hum complaints starting in 2019 — loud enough that the city later restricted where new data centers could be built.",
    answer: "A data center's constant hum and its generator tests are two different noise problems. This proposal's fix is a modeled property-line limit, independent monitoring after construction, and a public complaint log — not just a number on a page.",
    proposal: "A 55 dBA modeled limit at 150 feet, independent noise monitoring before and after construction, and a public complaint log with response times.",
    dontKnow: "Whether the modeled 55 dBA figure holds up in practice is only provable after construction — that's exactly why post-construction monitoring, not just a pre-construction model, matters.",
    receipts: [
      { title: 'CyrusOne forced to take action following noise complaints in Chandler, Arizona', body: 'Years of documented resident hum complaints starting in 2019; the city later restricted new sites.', issuer: 'Data Center Dynamics', date: '2026', url: 'https://www.datacenterdynamics.com/en/news/cyrusone-forced-to-take-action-following-noise-complaints-in-chandler-arizona/' },
      { title: 'Information on Levels of Environmental Noise Requisite to Protect Public Health and Welfare', body: '55 dB day-night average is the federal health benchmark still cited today.', issuer: 'U.S. EPA', date: 'Mar 1974', url: 'https://www.epa.gov/' },
      { title: 'Understand Noise Exposure', body: 'General acoustic reference points used for the comparison scale below.', issuer: 'CDC / NIOSH', date: null, url: 'https://www.cdc.gov/niosh/noise/prevent/understand.html' },
    ],
    deepLink: { id: 'noise', label: 'the full sound comparison' },
  },
  {
    id: 'lights',
    label: 'Lights',
    proposalStatus: 'commitment',
    question: 'Will I still see the stars?',
    validate: "That's a real, well-established concern for anyone who chose a rural sky, not nostalgia — large-facility lighting has genuinely washed out night skies elsewhere, which is exactly why fixture standards exist.",
    answer: "Full-cutoff fixtures aimed only downward, capped at 3000K, no upward-aimed light — the same spec DarkSky-certified fixtures meet. The fair question is whether the actual fixtures meet that spec, not whether the phrase “dark-sky compliant” gets used.",
    proposal: "Full-cutoff fixtures, 3000K or below, no upward-aimed lighting — the DarkSky Approved luminaire spec. A real deployment should name the certification it's actually pursuing, if any.",
    dontKnow: "This template doesn't commit to a named third-party certification yet — that's the one open question worth asking directly.",
    receipts: [
      { title: 'DarkSky Approved Luminaires guidelines', body: 'Defines full-cutoff (0 light above 80° from straight down) and ≤ 3000K color temperature.', issuer: 'DarkSky International', date: null, url: 'https://darksky.org/what-we-do/darksky-approved/darksky-approved-luminaires-program/darksky-approved-luminaires-guidelines/' },
      { title: 'Apply for Dark Sky Place certification', body: "The place-level certification track and its phased compliance requirements.", issuer: 'DarkSky International', date: null, url: 'https://darksky.org/what-we-do/international-dark-sky-places/apply/' },
    ],
    deepLink: { id: 'daynight', label: 'the night sky' },
  },
  {
    id: 'generators',
    label: 'Generators',
    proposalStatus: 'illustrative',
    question: 'What comes out of those stacks?',
    validate: "Diesel exhaust and unpredictable testing are a fair worry, especially if “emergency” turns out to mean something broader than an actual outage. The real cautionary case is Memphis: xAI ran dozens of always-on gas turbines without the federal air permits required, in neighborhoods already carrying heavy pollution — a different design (continuous gas turbines, not capped backup diesel) than what this proposal uses, but it's exactly why the distinction matters.",
    answer: "Backup generators can run as long as needed during a genuine grid emergency. Federal rules cap everything else — testing, maintenance — at 100 hours a year combined. That's a specific, checkable number, not a vague promise.",
    proposal: "Diesel generators certified to federal emissions tiers, tested on a limited daytime schedule, staying within the 100-hour non-emergency cap. The facility's actual air permit — which can be stricter — is the document to check.",
    dontKnow: "This template doesn't name a specific EPA tier or local air-district rule. A real deployment's actual permit should specify both.",
    receipts: [
      { title: '40 CFR Part 60, Subpart IIII — Stationary Compression Ignition Internal Combustion Engines', body: 'Caps non-emergency generator operation at 100 hours/year; unlimited during a real emergency.', issuer: 'U.S. EPA, via eCFR', date: 'current', url: 'https://www.ecfr.gov/' },
      { title: "In South Memphis, Elon Musk's Colossus Operated Gas Turbines Without Appropriate Permits", body: 'xAI ran dozens of always-on gas turbines without federal air permits near Memphis.', issuer: 'Inside Climate News', date: 'Jul 2025', url: 'https://insideclimatenews.org/news/17072025/elon-musk-xai-data-center-gas-turbines-memphis/' },
    ],
    deepLink: null,
  },
  {
    id: 'taxes',
    label: 'Jobs & Taxes',
    proposalStatus: 'illustrative',
    question: 'Are the jobs real — and who pays for the tax breaks?',
    validate: "That skepticism is earned, not cynical. Plenty of developments have promised “jobs and tax revenue” and delivered a large tax break plus a handful of permanent positions.",
    answer: "The honest number, unprompted: 390 permanent positions in this template's own figures. Construction adds far more, temporarily — real comparable projects show thousands of construction jobs shrinking to a few hundred permanent ones once the campus is running.",
    proposal: "390 permanent positions at roughly 2× local average wages, plus a phased, multi-year construction workforce. Tax abatements for data centers are real and large nationally — a national tracker puts annual losses in the billions — which is exactly why net revenue after any abatement, not the gross headline number, is what to ask for.",
    dontKnow: "This template doesn't publish a specific abatement percentage or term length. A real deployment should put both in writing, with the net-revenue math shown.",
    receipts: [
      { title: 'Data Centers in Loudoun County', body: 'The most data-center-dense U.S. county gets roughly a third of local tax revenue from data centers.', issuer: 'Loudoun County, VA (official)', date: '2025–2026', url: 'https://www.loudoun.gov/' },
      { title: 'Even Cloudier with a Greater Loss of Spending Control', body: 'National tracker: state/local revenue losses from data-center tax abatements are large and rising.', issuer: 'Good Jobs First', date: '2026', url: 'https://goodjobsfirst.org/even-cloudier-with-a-greater-loss-of-spending-control-how-data-center-tax-abatements-undermine-public-budgets/' },
      { title: 'The Rise of Data Centers', body: "IMPLAN's own guidance: state-level job multipliers usually run 2–3×, well below higher figures sometimes advertised.", issuer: 'IMPLAN Support', date: null, url: 'https://support.implan.com/' },
    ],
    deepLink: { id: 'dividend', label: 'where the tax base flows' },
  },
  {
    id: 'traffic',
    label: 'Traffic',
    proposalStatus: 'illustrative',
    question: 'What about the trucks?',
    validate: "That's a fair worry on both counts — rural roads carrying construction-truck volume they were never built for, and, once the campus is running, daily commuter traffic. Construction traffic is real, and by the best available source on this exact question, it's consistently the bigger of the two, not the smaller.",
    answer: "The heaviest traffic from a project like this comes during construction, not from the small permanent staff running the finished building. This proposal commits to designated haul routes, construction-hour limits, and a road-repair bond — not just a promise that it'll be fine.",
    proposal: "Designated truck routes away from school zones, construction-hour limits, and a bond covering road repair after the build. No operations-phase trips-per-day figure is published here — see why below.",
    dontKnow: "No source reviewed for this template could confidently support a trips-per-day figure for data-center operations — even the standard national planning manual lacks strong dedicated data for this land use. Ask for a project-specific traffic study, not a generic estimate.",
    receipts: [
      { title: "Why Data Centers Don't Fit Standard Traffic Assumptions—and How to Plan for Their Transportation Impacts", body: 'Construction, not operations, is consistently the larger traffic impact for this land use.', issuer: 'Kittelson & Associates', date: '2025–2026', url: 'https://www.kittelson.com/' },
    ],
    deepLink: { id: 'landuse', label: 'land use' },
  },
  {
    id: 'property',
    label: 'Property Values',
    proposalStatus: 'sourced',
    question: 'What happens to what my home is worth?',
    validate: "Your home is likely the biggest asset you own, and you don't get a vote on what gets built next to it — that's a completely fair thing to want a straight answer on.",
    answer: "Independent research is mixed, not a clean “no effect.” A Northern Virginia study found no measurable decline near data centers; a four-county Indiana study found homes near data centers underperformed the local market in three of four counties.",
    proposal: "No project-specific property-value study has been commissioned for this site. The most direct thing a resident can do is check county assessor records over time, not wait for a study that mostly can't be about this exact property anyway.",
    dontKnow: "Whether findings from Virginia or Indiana would hold here, in this specific market, is genuinely unknown — that's not spin, that's the real limit of what these studies can tell you.",
    receipts: [
      { title: 'Will data centers impact property values? Depends on who you ask', body: 'Northern Virginia: no measurable decline. Indiana, 4 counties: mixed, below-market in 3 of 4.', issuer: 'Iowa Public Media (IPM)', date: 'Apr 2026', url: 'https://www.ipm.org/news/2026-04-13/will-data-centers-impact-property-values-depends-on-who-you-ask' },
    ],
    deepLink: { id: 'viewpoint', label: 'what it would actually look like' },
  },
  {
    id: 'process',
    label: 'The Process',
    proposalStatus: 'commitment',
    question: 'Was this already decided without us?',
    validate: "That's the fear underneath most of the others on this page, and it's not paranoid — it's the multiplier on every other worry here, and it deserves its own straight answer. The pattern is real: an NBC News review of more than 30 data-center proposals across 14 states found that in a majority of cases, local officials signed NDAs and dealt with shell companies before residents knew a project existed.",
    answer: "This template's commitment: publish what's already decided, what's still open, and what public input can actually change — before the vote, not after.",
    proposal: "Site selection and the initial application are shown as decided. Water source, generator count, and abatement terms are shown as open. The public-comment period and county-commission vote are shown as where resident input still changes the outcome.",
    dontKnow: "This template doesn't show a specific disclosure history — when officials knew what, and when residents were told. A real deployment should publish that timeline, not just the current status.",
    receipts: [
      { title: 'How Big Tech uses NDAs to hide AI data center details from Americans', body: 'Review of 30+ proposals across 14 states found NDAs and shell companies in a majority of cases.', issuer: 'NBC News', date: '2026', url: 'https://www.nbcnews.com/tech/tech-news/data-center-ai-google-amazon-nda-non-disclosure-agreement-colossus-rcna236423' },
    ],
    deepLink: { id: 'regulations', label: 'the full commitments list' },
  },
];
window.ELEPHANT_TOPICS = ELEPHANT_TOPICS;

function ElephantPanelBody({ topic, headingRef }) {
  return (
    <>
      <header className="el-panel-intro">
        <div className="el-panel-title">
          <span className="tag-mono el-panel-eyebrow">{topic.label}</span>
          <h3 id={`answers-${topic.id}`} ref={headingRef} tabIndex={-1} className="el-panel-heading font-display">
            {topic.question}
          </h3>
        </div>
        <div className="el-validation">
          <span className="tag-mono el-beat-k">Why that's a fair question</span>
          <p className="el-beat-v el-beat-validate">{topic.validate}</p>
        </div>
      </header>

      <div className="el-answer-grid">
        <section className="el-answer-block el-answer-block--primary">
          <span className="tag-mono el-beat-k">The straight answer</span>
          <p className="el-beat-v el-beat-answer">{topic.answer}</p>
        </section>

        <section className="el-answer-block el-answer-block--proposal">
          <div className="el-beat-k-row">
            <span className="tag-mono el-beat-k">What this proposal would do</span>
            <StatusBadge status={topic.proposalStatus} />
          </div>
          <p className="el-beat-v">{topic.proposal}</p>
        </section>
      </div>

      {topic.dontKnow && (
        <aside className="el-unknown">
          <span className="tag-mono el-beat-k">What we don't know yet</span>
          <p className="el-beat-v">{topic.dontKnow}</p>
        </aside>
      )}

      <section className="el-check">
        <div className="el-check-head">
          <span className="tag-mono el-beat-k">How you check</span>
          <span className="el-check-note">Open the original sources. We show who published each one and when it was checked.</span>
        </div>
        <div className="el-receipts">
          {topic.receipts.map((r, i) => <SourceReceipt key={i} {...r} />)}
        </div>
        <div className="el-panel-actions">
          <a href="#contact" className="el-ask-link">Ask us for a source <ArrowRight size={12} /></a>
          {topic.deepLink && (
            <button type="button" className="el-deep-link" onClick={() => jumpToSection(topic.deepLink.id)}>
              See {topic.deepLink.label} <ArrowRight size={13} />
            </button>
          )}
        </div>
      </section>
    </>
  );
}

function Elephants() {
  const [openId, setOpenId] = useState('water');
  const headingRef = useRef(null);
  const tabRefs = useRef([]);

  // Deep-linkable: #answers-water etc. Opens the matching panel on mount
  // (hard reload) and whenever the hash changes (FAQ links, browser back).
  useEffect(() => {
    const applyHash = () => {
      const h = window.location.hash.replace(/^#/, '');
      const m = /^answers-(.+)$/.exec(h);
      if (m && ELEPHANT_TOPICS.some(t => t.id === m[1])) {
        setOpenId(m[1]);
        window.requestAnimationFrame(() => {
          window.requestAnimationFrame(() => {
            document.getElementById('answers')?.scrollIntoView({ block: 'start' });
          });
        });
      }
    };
    applyHash();
    window.addEventListener('hashchange', applyHash);
    return () => window.removeEventListener('hashchange', applyHash);
  }, []);

  const openTopic = useCallback((id, focusHeading = false) => {
    if (!ELEPHANT_TOPICS.some(t => t.id === id)) return;
    setOpenId(id);
    if (window.history && window.history.replaceState) {
      window.history.replaceState(null, '', `#answers-${id}`);
    }
    if (focusHeading) {
      window.requestAnimationFrame(() => headingRef.current?.focus({ preventScroll: true }));
    }
  }, []);
  useEffect(() => {
    const openFromElsewhere = (id) => openTopic(id, true);
    window.__openElephant = openFromElsewhere;
    return () => { if (window.__openElephant === openFromElsewhere) delete window.__openElephant; };
  }, [openTopic]);

  const moveTab = (event, index) => {
    const keys = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];
    if (!keys.includes(event.key)) return;
    event.preventDefault();
    let next = index;
    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') next = (index + 1) % ELEPHANT_TOPICS.length;
    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') next = (index - 1 + ELEPHANT_TOPICS.length) % ELEPHANT_TOPICS.length;
    if (event.key === 'Home') next = 0;
    if (event.key === 'End') next = ELEPHANT_TOPICS.length - 1;
    tabRefs.current[next]?.focus();
    openTopic(ELEPHANT_TOPICS[next].id);
  };

  const topic = ELEPHANT_TOPICS.find(t => t.id === openId) || ELEPHANT_TOPICS[0];
  const activeIndex = ELEPHANT_TOPICS.findIndex(t => t.id === topic.id);

  useEffect(() => {
    const tab = tabRefs.current[activeIndex];
    const nav = tab?.parentElement;
    if (!tab || !nav || nav.scrollWidth <= nav.clientWidth) return;
    const left = Math.max(0, tab.offsetLeft - (nav.clientWidth - tab.offsetWidth) / 2);
    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
    nav.scrollTo({ left, behavior: reducedMotion ? 'auto' : 'smooth' });
  }, [activeIndex]);

  return (
    <section id="answers" className="el-section">
      <div className="container-x">
        <div className="el-head">
          <div className="el-head-primary">
            <div className="eyebrow"><span className="kicker-num">02</span><span className="dot" /> Straight answers</div>
            <h2 className="h2 el-h2">
              Let's address the <span className="civic-emphasis">elephants in the room.</span>
            </h2>
          </div>
          <div className="el-head-aside">
            <span className="tag-mono">Start with your question</span>
            <p className="el-standfirst">
              Choose the concern closest to yours. Each answer separates what’s known, what’s proposed, and what still needs an answer—with the original sources attached.
            </p>
          </div>
        </div>

        <div className="el-browser">
          <div className="el-topic-nav" role="tablist" aria-label="Choose a concern">
            {ELEPHANT_TOPICS.map((t, index) => {
              const isOpen = topic.id === t.id;
              return (
                <button
                  key={t.id}
                  ref={(el) => { tabRefs.current[index] = el; }}
                  id={`el-tab-${t.id}`}
                  type="button"
                  role="tab"
                  tabIndex={isOpen ? 0 : -1}
                  aria-selected={isOpen}
                  aria-controls="el-panel"
                  className={`el-topic ${isOpen ? 'el-topic--active' : ''}`}
                  onClick={() => openTopic(t.id)}
                  onKeyDown={(event) => moveTab(event, index)}
                >
                  <span className="tag-mono el-topic-num">{String(index + 1).padStart(2, '0')}</span>
                  <span className="el-topic-copy">
                    <span className="el-topic-label">{t.label}</span>
                    <span className="el-topic-question">{t.question}</span>
                  </span>
                  <span className="el-topic-arrow" aria-hidden><ArrowRight size={14} /></span>
                </button>
              );
            })}
          </div>

          <div
            id="el-panel"
            role="tabpanel"
            aria-labelledby={`el-tab-${topic.id}`}
            className="el-panel"
          >
            <div key={topic.id} className="el-panel-anim">
              <ElephantPanelBody topic={topic} headingRef={headingRef} />
            </div>
            <div className="el-progress" aria-hidden>{String(activeIndex + 1).padStart(2, '0')} / {String(ELEPHANT_TOPICS.length).padStart(2, '0')}</div>
          </div>
        </div>
      </div>

      <style>{`
        /* One composed answer browser: the navigation and reading surface are
           parts of the same object, not a row of pills floating above a card. */
        #answers.el-section {
          padding: 112px 0 136px;
          background: var(--paper-warm);
          border-top: 1px solid var(--paper-warm-line);
          color: var(--ink);
        }
        #answers .el-head {
          display: grid;
          grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
          gap: clamp(48px, 8vw, 112px);
          align-items: end;
          margin-bottom: 48px;
        }
        #answers .el-h2 { margin: 14px 0 0; max-width: 820px; }
        #answers .el-head-aside {
          padding: 0 0 5px 22px;
          border-left: 1px solid rgba(20,32,27,.18);
        }
        #answers .el-head-aside > .tag-mono { color: var(--slate-500); letter-spacing: .14em; }
        #answers .el-standfirst {
          color: var(--slate-700);
          font-size: 16px;
          line-height: 1.65;
          margin: 13px 0 0;
          max-width: 440px;
        }

        #answers .el-browser {
          display: grid;
          grid-template-columns: 320px minmax(0, 1fr);
          overflow: hidden;
          border: 1px solid rgba(20,32,27,.16);
          border-radius: var(--r-lg);
          background: var(--white);
          box-shadow: 0 18px 54px rgba(26,35,30,.08);
        }
        #answers .el-topic-nav {
          display: flex;
          flex-direction: column;
          padding: 18px 0;
          background: var(--forest-900);
          color: var(--cream-50);
        }
        #answers .el-topic {
          position: relative;
          display: grid;
          grid-template-columns: 30px minmax(0, 1fr) 18px;
          gap: 13px;
          align-items: center;
          width: 100%;
          padding: 17px 20px;
          border: 0;
          border-bottom: 1px solid rgba(255,255,255,.09);
          background: transparent;
          color: rgba(255,255,255,.72);
          cursor: pointer;
          text-align: left;
          transition: background .2s ease, color .2s ease;
          min-height: 74px;
        }
        #answers .el-topic:last-child { border-bottom: 0; }
        #answers .el-topic:hover { background: rgba(255,255,255,.055); color: var(--white); }
        #answers .el-topic:focus-visible { outline: 2px solid var(--wheat-500); outline-offset: -4px; }
        #answers .el-topic--active {
          background: rgba(255,255,255,.1);
          color: var(--cream-50);
          box-shadow: inset 3px 0 0 var(--wheat-500);
        }
        #answers .el-topic-num { color: rgba(255,255,255,.4); letter-spacing: .08em; }
        #answers .el-topic--active .el-topic-num { color: var(--wheat-400); }
        #answers .el-topic-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        #answers .el-topic-label { font-size: 13.5px; font-weight: 700; color: inherit; }
        #answers .el-topic-question { font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.48); }
        #answers .el-topic--active .el-topic-question { color: rgba(255,255,255,.72); }
        #answers .el-topic-arrow { opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
        #answers .el-topic--active .el-topic-arrow { opacity: 1; transform: none; }

        #answers .el-panel {
          position: relative;
          background: var(--white);
          min-width: 0;
        }
        #answers .el-panel-anim {
          padding: clamp(38px, 5vw, 68px) clamp(28px, 5.4vw, 76px) 56px;
          animation: el-panel-in 260ms ease-out both;
        }
        #answers .el-progress {
          position: absolute;
          top: 24px;
          right: 28px;
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: .12em;
          color: var(--slate-400);
        }
        @keyframes el-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) {
          #answers .el-panel-anim { animation: none; }
        }

        #answers .el-panel-intro {
          display: grid;
          grid-template-columns: minmax(220px, .78fr) minmax(300px, 1.22fr);
          gap: clamp(36px, 5vw, 72px);
          align-items: start;
          padding-bottom: 42px;
          border-bottom: 1px solid rgba(20,32,27,.12);
        }
        #answers .el-panel-eyebrow {
          color: var(--accent-deep);
          letter-spacing: .18em;
          display: block;
          margin-bottom: 14px;
        }
        #answers .el-panel-heading {
          font-size: clamp(30px, 3.4vw, 48px);
          font-weight: 700;
          letter-spacing: -.025em;
          line-height: 1.04;
          margin: 0;
          color: var(--ink);
        }
        #answers .el-validation { padding-top: 3px; }
        #answers .el-beat-k { color: var(--slate-500); letter-spacing: .16em; display: block; margin-bottom: 10px; }
        #answers .el-beat-k-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
        #answers .el-beat-k-row .el-beat-k { margin-bottom: 0; }
        #answers .el-beat-v { margin: 0; color: var(--slate-700); font-size: 15px; line-height: 1.7; }
        #answers .el-beat-validate { color: var(--ink); font-size: 15.5px; font-weight: 500; }

        #answers .el-answer-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 0;
          margin-top: 0;
        }
        #answers .el-answer-block { padding: 38px 34px 40px 0; }
        #answers .el-answer-block + .el-answer-block {
          padding-left: 34px;
          padding-right: 0;
          border-left: 1px solid rgba(20,32,27,.12);
        }
        #answers .el-beat-answer { color: var(--ink); font-size: 18px; line-height: 1.62; font-weight: 600; }

        #answers .el-unknown {
          padding: 24px 28px;
          background: var(--paper-warm);
          border-top: 1px solid var(--paper-warm-line);
          border-bottom: 1px solid var(--paper-warm-line);
        }
        #answers .el-unknown .el-beat-v { color: var(--slate-600); font-size: 14px; }

        #answers .el-check { padding-top: 38px; }
        #answers .el-check-head {
          display: grid;
          grid-template-columns: 150px minmax(0, 1fr);
          gap: 28px;
          align-items: start;
          margin-bottom: 18px;
        }
        #answers .el-check-head .el-beat-k { margin: 2px 0 0; }
        #answers .el-check-note { color: var(--slate-500); font-size: 12.5px; line-height: 1.55; max-width: 470px; }

        #answers .el-receipts {
          display: flex; flex-direction: column; gap: 8px;
          margin-top: 4px;
        }
        #answers .el-panel-actions {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
          margin-top: 22px;
        }
        #answers .el-ask-link {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--font-body); font-size: 13px; font-weight: 600;
          color: var(--accent-deep);
        }

        #answers .el-deep-link {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 11px 16px; border-radius: 999px;
          border: 1px solid rgba(20,32,27,.16);
          background: transparent;
          font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
          color: var(--ink); cursor: pointer;
          transition: border-color .2s ease, background .2s ease;
          min-height: 44px;
        }
        #answers .el-deep-link:hover { border-color: var(--accent); background: var(--slate-100); }


        @media (max-width: 1060px) {
          #answers .el-browser { grid-template-columns: 280px minmax(0, 1fr); }
          #answers .el-panel-intro { grid-template-columns: 1fr; gap: 26px; }
        }

        @media (max-width: 840px) {
          #answers .el-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 38px; }
          #answers .el-head-aside { padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(20,32,27,.18); max-width: 650px; }
          #answers .el-browser { grid-template-columns: 1fr; }
          #answers .el-topic-nav {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(205px, 34vw);
            overflow-x: auto;
            padding: 0;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
          }
          #answers .el-topic {
            min-height: 88px;
            border-right: 1px solid rgba(255,255,255,.09);
            border-bottom: 0;
          }
          #answers .el-topic--active { box-shadow: inset 0 -3px 0 var(--wheat-500); }
          #answers .el-answer-grid { grid-template-columns: 1fr; }
          #answers .el-answer-block { padding: 32px 0; }
          #answers .el-answer-block + .el-answer-block { padding: 32px 0; border-left: 0; border-top: 1px solid rgba(20,32,27,.12); }
        }

        @media (max-width: 620px) {
          #answers.el-section { padding: 72px 0 96px; }
          #answers .el-head { margin-bottom: 30px; }
          #answers .el-topic-nav { grid-auto-columns: minmax(180px, 76vw); }
          #answers .el-topic { padding: 15px 16px; grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 10px; }
          #answers .el-panel-anim { padding: 34px 20px 36px; }
          #answers .el-progress { display: none; }
          #answers .el-panel-intro { padding-bottom: 32px; }
          #answers .el-panel-heading { font-size: clamp(30px, 9vw, 38px); }
          #answers .el-beat-answer { font-size: 17px; }
          #answers .el-unknown { margin: 0 -20px; padding: 22px 20px; }
          #answers .el-check-head { grid-template-columns: 1fr; gap: 7px; }
          #answers .el-panel-actions { align-items: flex-start; flex-direction: column; }
        }
      `}</style>
    </section>
  );
}
window.Elephants = Elephants;