/* Guides — long-form, printable walkthroughs under /guides/.
 *
 * One file serves two media. On screen a guide is an article page with
 * checklists you can tick and a worksheet you can type into. In print it is
 * the downloadable PDF: scripts/gen_guide_pdf.py prints the page itself, so
 * the @media print block below IS the PDF's layout (cover, page breaks,
 * running footer). Edit the page, re-run the script, commit both.
 *
 * html[data-edition] is set only by the PDF script. It swaps the cover and
 * footer branding for the Plurality Media edition served from bluelist.ai;
 * the web page never carries it.
 */

.guide { padding-top: 3rem; }
.guide .article-head { max-width: 820px; }
.guide .article-head h1 { font-size: var(--step-4); margin: 1rem 0; }
.guide-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }
.guide-updated { font-family: var(--mono); font-weight: 500; font-size: var(--step--1); color: var(--muted); margin-top: 1rem; }

.guide .prose { max-width: 780px; }
.guide .prose h2 { scroll-margin-top: 6rem; }
.guide .prose h2[data-num]::before { content: attr(data-num); font-family: var(--mono); font-size: var(--step--1); font-weight: 700; color: var(--electric-dk); letter-spacing: .1em; display: block; margin-bottom: .35rem; text-transform: uppercase; }
.guide .prose li > p { margin-bottom: .4rem; }
.guide .prose code, .guide .path { font-family: var(--mono); font-weight: 500; font-size: .86em; background: var(--paper-warm); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .4rem; color: var(--ink); white-space: nowrap; }
.guide .path { white-space: normal; }

/* ---------- Contents ---------- */
.guide-toc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 2rem 0; font-size: var(--step-0); }
.guide-toc .lbl { font-family: var(--mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--electric-dk); font-weight: 700; }
.guide-toc ol { margin: .8rem 0 0 1.3rem; columns: 2; column-gap: 2.4rem; display: block; }
.guide-toc li { margin-bottom: .35rem; break-inside: avoid; }
@media (max-width: 640px) { .guide-toc ol { columns: 1; } }

/* ---------- The chain: person → page → disclaimer → ad account → ads ---------- */
.chain { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: 1.6rem 0 2rem !important; padding: 0; counter-reset: chain; }
.chain li { position: relative; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--electric); border-radius: 12px; padding: .9rem .8rem; font-size: var(--step--1); line-height: 1.45; counter-increment: chain; }
.chain li::before { content: counter(chain); font-family: var(--mono); font-weight: 700; font-size: .72rem; color: var(--electric-dk); display: block; margin-bottom: .2rem; }
.chain li strong { display: block; font-family: var(--display); font-size: var(--step-0); font-weight: 600; margin-bottom: .25rem; }
.chain li.stop { border-top-color: var(--amber); }
@media (max-width: 760px) { .chain { grid-template-columns: 1fr; } }

/* ---------- Callouts ---------- */
.guide .callout { font-size: var(--step-0); line-height: 1.6; }
.guide .callout p { margin-bottom: .6rem; }
.guide .callout p:last-child, .guide .callout ul:last-child { margin-bottom: 0; }
.callout--warn { border-left-color: var(--amber); }
.callout--warn .lbl { color: var(--amber-text); }
.callout--story { border-left-color: var(--slate); background: #fff; }
.callout--story .lbl { color: var(--slate); }
.guide .callout p.first { margin-top: .5rem; }
.guide .callout ul.tight { margin: .6rem 0 0 1.1rem; gap: .5rem; }
.guide .prose p.note { font-size: var(--step--1); color: var(--muted); margin-top: -1rem; }

/* ---------- Route cards ---------- */
.routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.6rem 0 2rem; }
.route { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; font-size: var(--step--1); line-height: 1.55; color: var(--slate); }
.route h3 { font-size: var(--step-1) !important; margin: .5rem 0 .6rem !important; }
.route .pill { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; padding: .22rem .6rem; border-radius: 100px; border: 1px solid var(--line); color: var(--slate); }
.route.best { border: 2px solid var(--electric-dk); }
.route.best .pill { background: var(--electric-dk); border-color: var(--electric-dk); color: #fff; }
.route.last .pill { background: var(--paper-warm); color: var(--amber-text); border-color: var(--amber); }
.route.last { border-color: var(--amber); }
.route.wide { grid-column: 1 / -1; }
.route dl { margin: 0; display: grid; gap: .45rem; }
.route dt { font-weight: 700; color: var(--ink); }
.route dd { margin: 0; }
@media (max-width: 700px) { .routes { grid-template-columns: 1fr; } }

/* ---------- Checklists ---------- */
.checklist { list-style: none; margin: 1.2rem 0 2rem !important; padding: 0; display: grid; gap: 0 !important; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.checklist li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .2rem .7rem; align-items: start; padding: .8rem 1.1rem; border-top: 1px solid var(--line); font-size: var(--step--1); line-height: 1.5; }
.checklist li:first-child { border-top: none; }
.checklist li.phase { display: block; background: var(--paper-warm); font-family: var(--mono); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--electric-dk); padding: .6rem 1.1rem; }
.checklist input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--electric-dk); }
.checklist label { color: var(--slate); }
.checklist label strong { color: var(--ink); display: block; font-size: var(--step-0); }
.checklist .who { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--muted); text-align: right; white-space: nowrap; padding-top: .2rem; }
@media (max-width: 640px) { .checklist li { grid-template-columns: 1.6rem 1fr; } .checklist .who { grid-column: 2; text-align: left; } }

/* ---------- Worksheet ---------- */
.worksheet-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; margin: 1.2rem 0 2rem; }
.worksheet { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.45; }
.worksheet caption { text-align: left; }
.worksheet th, .worksheet td { padding: .7rem 1rem; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.worksheet thead th { border-top: none; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.worksheet tbody th { color: var(--ink); font-weight: 700; width: 34%; }
.worksheet tbody th span { display: block; font-weight: 500; color: var(--muted); margin-top: .2rem; }
.worksheet tr.group th { background: var(--paper-warm); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--electric-dk); padding: .55rem 1rem; }
.worksheet input[type="text"] { width: 100%; font: inherit; color: var(--ink); background: transparent; border: none; border-bottom: 1.5px solid var(--line); padding: .35rem 0; }
.worksheet input[type="text"]:focus { outline: none; border-bottom-color: var(--electric-dk); }
@media (max-width: 640px) { .worksheet tbody th { width: auto; } .worksheet thead { display: none; } .worksheet tr { display: grid; } .worksheet td { border-top: none; padding-top: 0; } }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 1.2rem 0 2rem !important; padding: 0; counter-reset: step; display: grid; gap: 1rem !important; }
.steps > li { counter-increment: step; position: relative; padding: 1.1rem 1.3rem 1.1rem 4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--step-0); line-height: 1.6; }
.steps > li::before { content: counter(step); position: absolute; left: 1.2rem; top: 1.05rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--mono); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.steps > li > strong:first-child { display: block; color: var(--ink); font-size: var(--step-1); font-family: var(--display); font-weight: 600; margin-bottom: .35rem; }
.steps .where { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--step--1); color: var(--electric-dk); margin: .1rem 0 .5rem; }
.steps ul { margin: .5rem 0 .2rem 1.1rem !important; gap: .3rem !important; }
.steps p { margin-bottom: .5rem !important; }

/* ---------- Tables ---------- */
.gt-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin: 1.2rem 0 2rem; }
.gt { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.5; }
.gt th, .gt td { padding: .7rem 1rem; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.gt thead th { border-top: none; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.gt tbody th { color: var(--ink); font-weight: 700; }
.gt td { color: var(--slate); }

.guide .post-disclaimer { max-width: 780px; margin-inline: auto; }
.guide-sources { font-size: var(--step--1) !important; }
.guide-sources li { word-break: break-word; }

/* ---------- Print-only pieces (hidden on screen) ---------- */
.print-cover, .print-only, .print-only-inline, .ed-plurality { display: none; }

/* =====================================================================
 * PRINT — this block is the PDF layout.
 * ===================================================================== */
@page {
  size: Letter;
  margin: .65in .7in .75in;
  @bottom-left { content: "Electbase · Getting verified to run political ads on Meta"; font: 500 7.5pt Montserrat, sans-serif; color: #616a80; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 500 7.5pt Montserrat, sans-serif; color: #616a80; }
}
@page plurality {
  @bottom-left { content: "Plurality Media, a BlueList company · Getting verified to run political ads on Meta"; font: 500 7.5pt Montserrat, sans-serif; color: #616a80; }
}
@page cover {
  margin: 0;
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

@media print {
  html { font-size: 10.5pt; }
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html[data-edition="plurality"] body { page: plurality; }
  .skip-link, header.nav, footer.footer, .eb-cookie-wrap, #eb-cookie-banner, .guide-actions, .no-print, .guide-toc { display: none !important; }
  main, .guide, .wrap { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .guide .prose, .guide .article-head, .guide .post-disclaimer { max-width: none !important; margin: 0 !important; }
  .guide .article-head { display: none; }
  .prose { font-size: 10.5pt !important; line-height: 1.55 !important; color: #3a4256; }
  .prose p { margin-bottom: .75rem !important; }
  .prose ul, .prose ol { gap: .3rem !important; }
  .prose h2 { font-size: 20pt !important; margin: 0 0 .8rem !important; break-after: avoid; }
  .prose h3 { font-size: 13pt !important; margin: 1.2rem 0 .5rem !important; break-after: avoid; }
  .prose h2.break { break-before: page; }
  .prose a { color: #2247c8; text-decoration: none; }

  .print-only { display: block; }
  .print-only-inline { display: inline; }
  .print-cover { display: flex; page: cover; break-after: page; flex-direction: column; justify-content: space-between; height: 11in; width: 8.5in; padding: .9in .85in .75in; box-sizing: border-box; background: #f6f6f2; border-top: 16pt solid #0a1020; }
  .print-cover .kicker { font-family: var(--mono); font-weight: 700; font-size: 9pt; text-transform: uppercase; letter-spacing: .16em; color: #2247c8; }
  .print-cover .cover-title { font-family: var(--display); font-weight: 600; font-size: 38pt; line-height: 1.02; letter-spacing: -.02em; color: #0a1020; margin: .9rem 0 1rem; }
  .print-cover .sub { font-size: 13pt; line-height: 1.45; color: #3a4256; max-width: 6in; font-weight: 500; }
  .print-cover .rule { width: 1.2in; height: 5pt; background: #f59e0b; margin: 1.4rem 0; }
  .print-cover .inside { font-size: 10pt; color: #3a4256; line-height: 1.6; columns: 2; column-gap: .4in; margin: 0; padding-left: 1.1rem; }
  .print-cover .inside li { break-inside: avoid; margin-bottom: .2rem; }
  .print-cover .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: .5in; border-top: 1px solid #d9d8cf; padding-top: .25in; font-size: 8.5pt; color: #616a80; line-height: 1.5; }
  .print-cover .cover-meta { text-align: right; }
  .print-cover .brand.logo { font-size: 26pt; color: #0a1020; }
  .print-cover .brand-plurality { display: none; }
  .print-cover .brand-plurality img { width: 2.4in; height: auto; display: block; }
  html[data-edition="plurality"] .print-cover .brand-electbase { display: none; }
  html[data-edition="plurality"] .print-cover .brand-plurality { display: block; }
  html[data-edition="plurality"] .ed-electbase { display: none !important; }
  .ed-plurality { display: none; }
  html[data-edition="plurality"] .ed-plurality { display: inline; }

  .callout, .route, .steps > li, .chain li, .checklist li, .worksheet tr, .gt tr, figure { break-inside: avoid; }
  .callout { margin: 1rem 0 !important; padding: .8rem 1rem !important; font-size: 10pt !important; }
  .routes { gap: .6rem; margin: 1rem 0; }
  .prose p.note { margin-top: -.4rem !important; font-size: 9pt; }
  .route { padding: .8rem .9rem; font-size: 9pt; }
  .chain { gap: .35rem; margin: 1rem 0 1.2rem !important; }
  .chain li { padding: .6rem .55rem; font-size: 8.5pt; }
  .checklist, .worksheet-wrap, .gt-wrap { overflow: visible; border-radius: 8px; margin: .8rem 0 1.2rem !important; }
  .prose .checklist, .prose .steps, .prose .chain { display: block !important; }
  .prose .steps > li, .prose .chain li { margin-bottom: .5rem; }
  .checklist li { padding: .5rem .8rem; font-size: 9.5pt; }
  .checklist li.phase, .worksheet tr.group { break-after: avoid; }
  .prose h3 { break-after: avoid; }
  .checklist label strong { font-size: 10pt; }
  /* A printed checkbox is an empty square to tick with a pen. */
  .checklist input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 11pt; height: 11pt; border: 1.3pt solid #0a1020; border-radius: 2pt; background: #fff; margin-top: 2pt; }
  .checklist input[type="checkbox"]:checked { background: #0a1020; }
  .worksheet { font-size: 9pt; }
  .worksheet th, .worksheet td { padding: .45rem .7rem; }
  .worksheet input[type="text"] { border-bottom: 1pt solid #9aa0ad; min-height: 1.3rem; padding: .15rem 0; }
  .steps { gap: .55rem !important; }
  .steps > li { padding: .7rem .9rem .7rem 3rem; font-size: 10pt; }
  .steps > li::before { left: .8rem; top: .7rem; width: 1.5rem; height: 1.5rem; font-size: 8pt; }
  .steps > li > strong:first-child { font-size: 12pt; }
  .gt { font-size: 9pt; }
  .gt-wrap.keep { break-inside: avoid; }
  .gt th, .gt td { padding: .32rem .6rem; }
  .post-disclaimer { margin-top: 1.2rem !important; }
}