/* Twin-page kit — shared components for Peak News Network interactive articles that pair with APEX EXPLAINED videos.
   Builds on ../styles.css (Manrope + Source Serif 4, --ink/--forest/...). Each page may override --tw-accent/--tw-accent-2. */
:root { --tw-accent: var(--forest); --tw-accent-2: var(--gold); --tw-hl: #ffd84d; --tw-radius: 18px; }

.tw-wide { width: min(100%, 1040px); margin: 56px auto; }
.tw-narrow { width: min(100%, 680px); margin: 46px auto; }
.tw-section-head { margin-bottom: 22px; }
.tw-section-head h2 { font-family: "Source Serif 4", Georgia, serif; font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height: 1.12; margin: 0; }
.tw-section-head p { color: var(--muted); max-width: 680px; margin: 10px 0 0; line-height: 1.6; }

/* hero photo */
.tw-hero { position: relative; margin: 34px 0 0; border-radius: var(--tw-radius); overflow: hidden; background: #111; aspect-ratio: 21/9; }
.tw-hero img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.tw-hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 22px 14px; color: #fff; font-size: .82rem;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); }
@media (max-width: 720px) { .tw-hero { aspect-ratio: 4/3; } }

/* key facts strip */
.tw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tw-fact { background: var(--paper); border: 1px solid var(--line); border-radius: var(--tw-radius); padding: 20px 22px; }
.tw-fact b { display: block; font-family: "Source Serif 4", Georgia, serif; font-size: 2.6rem; line-height: 1; color: var(--tw-accent); }
.tw-fact span { display: block; margin-top: 8px; color: var(--muted); font-size: .92rem; line-height: 1.45; }

/* receipts: screenshot of the primary source, highlighted, click to enlarge */
.tw-receipt { margin: 26px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(23,33,29,.08); }
.tw-receipt button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.tw-receipt button::after { content: "⤢  Enlarge"; position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(23,33,29,.72); color: #fff; font: 700 .72rem "Manrope", sans-serif; opacity: .85; }
.tw-receipt img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; object-position: top; }
.tw-receipt figcaption { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); font-family: "Manrope", sans-serif; font-size: .84rem; color: var(--muted); }
.tw-receipt figcaption b { color: var(--ink); font-weight: 700; }
.tw-receipt figcaption a { color: var(--forest-dark); font-weight: 700; white-space: nowrap; }
.tw-receipt .tw-tag { display: inline-block; background: var(--tw-hl); color: #3b2f00; font-weight: 800; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.tw-receipts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.tw-receipts-row .tw-receipt { margin: 0; }
.tw-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10,14,12,.86); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.tw-lightbox.open { display: grid; }
.tw-lightbox img { max-width: min(1400px, 100%); max-height: 92vh; border-radius: 8px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); }

/* segmented toggle + panels */
.tw-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #e6ece8; border-radius: 999px; margin-bottom: 18px; flex-wrap: wrap; }
.tw-toggle button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font: 700 .9rem "Manrope", sans-serif; color: var(--muted); cursor: pointer; }
.tw-toggle button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
[data-tw-panel][hidden] { display: none !important; }

/* stepper: numbered steps that reveal as you scroll */
.tw-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.tw-steps::before { content: ""; position: absolute; left: 23px; top: 8px; bottom: 8px; width: 3px; background: var(--line); border-radius: 3px; }
.tw-step { position: relative; padding: 0 0 34px 72px; opacity: .25; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.tw-step.in { opacity: 1; transform: none; }
.tw-step .tw-dot { position: absolute; left: 0; top: 0; width: 49px; height: 49px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); border: 3px solid var(--tw-accent); color: var(--tw-accent); font: 800 .95rem "Manrope", sans-serif; }
.tw-step.terry .tw-dot { background: var(--tw-accent); color: #fff; }
.tw-step .tw-when { font: 800 .78rem "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--tw-accent); }
.tw-step h3 { font-family: "Source Serif 4", Georgia, serif; font-size: 1.5rem; margin: 4px 0 8px; line-height: 1.2; }
.tw-step p { font-family: "Source Serif 4", Georgia, serif; font-size: 1.08rem; line-height: 1.7; margin: 0 0 10px; }
.tw-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e9f3ee; color: var(--forest-dark); font: 700 .78rem "Manrope", sans-serif; margin: 0 6px 6px 0; }
.tw-chip.vote { background: var(--tw-accent); color: #fff; }

/* animated horizontal bars */
.tw-bars { display: grid; gap: 12px; }
.tw-bar { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 14px; align-items: center; font-size: .95rem; }
.tw-bar .tw-track { position: relative; height: 34px; background: #e8eeea; border-radius: 8px; overflow: hidden; }
.tw-bar .tw-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--tw-accent); border-radius: 8px; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.tw-bar.alt .tw-fill { background: var(--tw-accent-2); }
.tw-bar.muted .tw-fill { background: #b9c6bf; }
.tw-bar .tw-val { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--ink); }
@media (max-width: 720px) { .tw-bar { grid-template-columns: 1fr; gap: 6px; } }

/* calculator */
.tw-calc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--tw-radius); padding: 24px; display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
.tw-calc label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.tw-calc input[type=range] { width: 100%; accent-color: var(--tw-accent); }
.tw-calc output { font-family: "Source Serif 4", Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--tw-accent); }
.tw-calc .tw-out { background: var(--ground); border-radius: 14px; padding: 18px; }
.tw-calc .tw-note { color: var(--muted); font-size: .82rem; line-height: 1.5; grid-column: 1 / -1; }
@media (max-width: 720px) { .tw-calc { grid-template-columns: 1fr; } }

/* callout + pull quote */
.tw-callout { border-left: 6px solid var(--tw-accent); background: var(--paper); border-radius: 0 var(--tw-radius) var(--tw-radius) 0; padding: 20px 24px; }
.tw-callout p { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.12rem; line-height: 1.7; }
.tw-quote { margin: 30px 0; padding: 0 0 0 26px; border-left: 4px solid var(--tw-accent-2); font-family: "Source Serif 4", Georgia, serif; font-size: 1.45rem; line-height: 1.45; }
.tw-quote cite { display: block; margin-top: 10px; font: 600 .86rem "Manrope", sans-serif; color: var(--muted); font-style: normal; }

/* sources */
.tw-sources ol { padding-left: 22px; margin: 0; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.tw-sources li { margin-bottom: 8px; }
.tw-sources a { color: var(--forest-dark); }
.tw-asof { margin-top: 18px; font-size: .85rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .tw-step { opacity: 1; transform: none; transition: none; } .tw-bar .tw-fill { transition: none; } }

/* YouTube embed (Terry, 2026-10-06: embed meeting video instead of only linking out).
   <figure class="tw-yt" data-yt="VIDEO_ID" data-start="1588" data-end="1650" data-title="…"><figcaption>…</figcaption></figure>
   twin.js shows the thumbnail + play button and swaps in a youtube-nocookie player (at the timestamp) on click. */
.tw-yt { margin: 26px 0; background: #0d0f0e; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(23,33,29,.12); }
.tw-yt .tw-yt-frame { position: relative; aspect-ratio: 16/9; background: #000; }
.tw-yt .tw-yt-frame iframe, .tw-yt .tw-yt-frame button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tw-yt button { padding: 0; cursor: pointer; background: #000 center / cover no-repeat; }
.tw-yt button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.tw-yt button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; border-radius: 14px;
  background: rgba(200,20,20,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 34px no-repeat;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: transform .15s; }
.tw-yt button:hover::after, .tw-yt button:focus-visible::after { transform: scale(1.08); }
.tw-yt .tw-yt-label { position: absolute; left: 16px; right: 16px; bottom: 12px; color: #fff; font: 700 .9rem "Manrope", sans-serif; text-align: left; text-shadow: 0 1px 4px rgba(0,0,0,.7); z-index: 1; }
.tw-yt figcaption { padding: 11px 16px; font-family: "Manrope", sans-serif; font-size: .84rem; color: #c9d1cc; background: #151917; }
.tw-yt figcaption a { color: #9fe0bd; font-weight: 700; }

/* front page -> backpage link (Terry, 2026-10-06: the front page stays reader-facing; the full record lives on the backpage) */
.tw-details-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 46px auto; width: min(100%, 1040px);
  padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--tw-radius); background: var(--paper); color: var(--ink); text-decoration: none;
  box-shadow: 0 10px 30px rgba(23,33,29,.06); transition: box-shadow .15s, transform .15s; }
.tw-details-link:hover { box-shadow: 0 14px 34px rgba(23,33,29,.12); transform: translateY(-1px); }
.tw-details-link b { display: block; color: var(--ink); font-family: "Source Serif 4", Georgia, serif; font-size: 1.3rem; }
.tw-details-link span { display: block; color: var(--muted); font-size: .92rem; margin-top: 4px; }
.tw-details-link i { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tw-accent); color: #fff; font-style: normal; font-weight: 800; }

/* backpage ("Sources & details"): the raw record — every fact with its source, document excerpts, data, one-pagers */
.tw-back-hero { margin-top: 18px; padding: 18px 22px; border-radius: 14px; background: #eef3f0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.tw-back-hero a { color: var(--forest-dark); font-weight: 700; }
.tw-factlist { width: 100%; border-collapse: collapse; font-size: .94rem; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tw-factlist th, .tw-factlist td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.tw-factlist th { font: 800 .74rem "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: #f3f6f4; }
.tw-factlist td:last-child { width: 34%; color: var(--muted); }
.tw-factlist a { color: var(--forest-dark); font-weight: 700; }
@media (max-width: 720px) { .tw-factlist, .tw-factlist tbody, .tw-factlist tr, .tw-factlist td { display: block; width: 100% !important; }
  .tw-factlist thead { display: none; } .tw-factlist td { border-bottom: 0; padding: 4px 14px; } .tw-factlist tr { padding: 10px 0; border-bottom: 1px solid var(--line); } }
.tw-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; align-items: start; }
.tw-docs .tw-receipt { margin: 0; }
.tw-videolist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tw-videolist li { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font-size: .94rem; line-height: 1.5; }
.tw-videolist a { color: var(--forest-dark); font-weight: 700; }
.tw-onepager { background: var(--paper); border: 1px solid var(--line); border-radius: var(--tw-radius); padding: 18px; }
.tw-onepager img, .tw-onepager iframe { display: block; width: 100%; border: 0; border-radius: 8px; background: #fff; }
.tw-onepager iframe { aspect-ratio: 8.5/11; }
.tw-onepager p { margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
/* small inline source line under a step/paragraph (front pages link sources this way; the excerpts live on the backpage) */
.tw-src { margin: 6px 0 12px; font: 600 .84rem "Manrope", sans-serif; color: var(--muted); }
.tw-src a { color: var(--forest-dark); font-weight: 700; }