/*
  Predictable Innovation, v2 site extension (ours, not part of the home package).
  Loaded on every page other than "/", after styles.css (the package file, byte for byte, never edited).
  It adds only the components the approved home has no markup for, built from the home's look.

  Rules for this file (docs/rebrand/v2/V2_GAP_PLAN.md 2.9 and 2.11; src/rebrand/v2/__tests__/page.test.ts checks them):
    - Only the :root tokens of styles.css: no color literal, no new font family, breakpoint or easing, no custom property.
    - Never a selector styles.css defines: extend the home's components, never restyle them.
    - The home's type roles: Anton var(--display) is the stage voice (titles, numbers, step names); Fraunces 300
      var(--serif) is the human voice (deks, questions, quotes); Inter Tight var(--sans) is body, labels and tables.
    - Dark surfaces only: ink, ink-2, panel, panel-2. No cream or light surface.
    - Never the class dd on a details element: main.js takes the first details.dd as the menu dropdown.
    - Guides add their long-form extras (table of contents, author box, guide card) in their own file.

  Contrast rules (WCAG AA, measured on the tokens):
    - red on ink is 4.41:1 (4.12:1 on panel): red text only at headline size, 24 px and up, for the turn of a headline.
    - muted-2 is 4.64:1 on ink but 4.34:1 on panel and 3.94:1 on panel-2: small text on panels uses muted
      (9.59:1 on ink, 8.96:1 on panel, 8.15:1 on panel-2). muted-2 is for rules, bullets and the copyright line.
    - pink is 6.16:1 on ink (5.75:1 on panel): text links inside body copy are pink and underlined.
    - lemon is 17.55:1 on ink: eyebrows, badges, wins and hover. Ink on lemon is 17.55:1.
    - white on btn-red is 5.78:1 (6.78:1 on hover): the Apply button.
    - paper on ink is 18.03:1: body text.
*/

/* ---------- page head: the title area of a page without a photo hero ----------
   <section class="page-head" aria-labelledby="page-title"><div class="wrap">
     <nav class="crumbs" aria-label="Breadcrumb">...</nav>  or  <span class="eyebrow">...</span>
     <h1 id="page-title" class="display h2">...</h1>         (the home's section scale; h-article for guide titles)
     <p class="dek serif">...</p>                             (optional; em is the lemon turn)
     <p class="page-meta">...</p>                             (optional)
   </div></section>
   Add the class ruled for a line under it when no .section follows. */
.page-head{position:relative;background:var(--ink)}
.page-head .wrap{padding-top:calc(88px + clamp(48px,5vw,72px))}
.page-head .wrap > :first-child{margin-top:0}
.page-head.ruled{border-bottom:1px solid var(--line)}
.page-head h1{max-width:1100px;overflow-wrap:break-word}
.h-article{margin-top:20px;font-size:clamp(40px,1rem + 3vw,72px);line-height:1.04}
.dek{margin-top:24px;max-width:820px;font-size:clamp(22px,1rem + .8vw,28px);line-height:1.3}
.dek em{font-style:italic;color:var(--lemon)}
.page-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;line-height:1.5;color:var(--muted)}
.page-head .btn-row{margin-top:32px}

/* Links inside a line of copy on the pages without site-pages.css (/apply, the 404): pink and underlined, as in the
   home's text links and on the coaching pages. */
.program-line a,.page-head .hero-intro a,.section .fit-col a{color:var(--pink);text-decoration:underline;text-underline-offset:.2em}
.program-line a:hover,.page-head .hero-intro a:hover,.section .fit-col a:hover{color:var(--lemon)}

/* ---------- breadcrumbs (the .label style) ----------
   <nav class="crumbs" aria-label="Breadcrumb"><ol>
     <li><a href="/">Home</a></li><li><a href="/methods">Guides</a></li><li aria-current="page">Title</li>
   </ol></nav> */
.crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:6px}
.crumbs li{min-width:0;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.crumbs li + li::before{content:"/";content:"/" / "";margin:0 10px;color:var(--muted-2)}
.crumbs a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.35em}
.crumbs a:hover{color:var(--lemon);text-decoration-color:var(--lemon)}

/* ---------- FAQ: native details and summary, works without JavaScript ----------
   <div class="faq">
     <details><summary><span>Question?</span><svg width="20" height="20" ...the dropdown's chevron...></svg></summary>
       <div class="faq-a"><p>Answer.</p></div></details>
   </div> */
.faq{margin-top:36px;border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;list-style:none;cursor:pointer;font-family:var(--serif);font-weight:300;font-size:clamp(22px,1rem + .9vw,30px);line-height:1.2;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--lemon)}
.faq summary svg{flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq-a{max-width:760px;padding:0 0 28px;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.6;color:var(--muted)}
.faq-a a{color:var(--pink);text-decoration:underline;text-underline-offset:.2em}
.faq-a a:hover{color:var(--lemon)}
.faq-a strong{font-weight:700;color:var(--paper)}
.faq-a ul,.faq-a ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}

/* ---------- who it is for, and who it is not for: two .ticks lists ----------
   <div class="fit">
     <div class="fit-col"><span class="label">Best for</span><ul class="ticks">...</ul></div>
     <div class="fit-col fit-not"><span class="label">Not a fit</span><ul class="ticks">...</ul></div>
   </div> */
.fit{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:32px 56px}
.fit-col{padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.fit-not .ticks li::before{background:var(--muted-2)}

/* ---------- photo with a caption ----------
   <figure class="figure"><picture>...<img ...></picture><figcaption>Caption</figcaption></figure>
   Add the class framed for an image with a white background, so it reads as a figure on ink. */
.figure{margin-top:36px;display:flex;flex-direction:column;gap:12px}
.figure img{width:100%;height:auto;border-radius:8px}
.figure.framed img{padding:clamp(12px,2vw,24px);border:1px solid var(--line);background:var(--panel)}
.figure figcaption{font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- tables: they scroll inside their frame on phones, never the page ----------
   <div class="table-wrap" tabindex="0" role="region" aria-label="..."><table>...</table></div> */
.table-wrap{margin-top:32px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:8px}
.table-wrap:focus-visible{outline-offset:2px}
.table-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
.table-wrap caption{padding:16px 18px 4px;text-align:left;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.table-wrap th,.table-wrap td{padding:14px 18px;text-align:left;vertical-align:top}
.table-wrap tr + tr > *,.table-wrap thead + tbody tr:first-child > *{border-top:1px solid var(--line)}
.table-wrap thead th{background:var(--panel);font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.table-wrap tbody td{color:var(--muted)}
.table-wrap tbody th,.table-wrap tbody td:first-child{font-weight:700;color:var(--paper)}

/* ---------- embeds: a 16:9 video, or the booking calendar at its own height ----------
   <figure class="embed"><div class="embed-box embed-video"><iframe ...></iframe></div>
     <figcaption><b>Name</b><span>Detail</span></figcaption></figure>
   <div class="embed"><div class="embed-box embed-calendar">...the calendar...</div></div> */
.embed{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.embed-box{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.embed-video{aspect-ratio:16/9}
.embed-video iframe,.embed-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed-calendar{min-height:520px}
.embed-calendar iframe{display:block;width:100%;border:0}
.embed figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.embed figcaption b{font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.embed figcaption span{font-size:15px;color:var(--muted)}

/* ---------- long-form text: paper on ink, 18 px, 1.7, a 68ch measure ----------
   <div class="prose">...headings, paragraphs, lists, quotes, figures, code...</div>
   Every rule is inside .prose, so nothing leaks into the home's components. */
.prose{max-width:68ch;font-size:18px;line-height:1.7;color:var(--paper);overflow-wrap:break-word}
.prose > * + *{margin-top:1.15em}
.prose > :first-child{margin-top:0}
/* Inter Tight ships no italic: an emphasis is the human voice's italic (Fraunces), never a synthesized slant. */
.prose em{font-family:var(--serif);font-style:italic}
.prose h2{margin-top:2em;font-family:var(--display);font-weight:400;font-size:clamp(32px,1rem + 1.8vw,48px);line-height:1.05;letter-spacing:-.005em;text-transform:uppercase}
.prose h3{margin-top:1.8em;font-size:22px;font-weight:700;line-height:1.3}
.prose h4,.prose h5,.prose h6{margin-top:1.8em;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prose h2 + *,.prose h3 + *,.prose h4 + *,.prose h5 + *,.prose h6 + *{margin-top:.7em}
.prose a{color:var(--pink);text-decoration:underline;text-underline-offset:.2em}
.prose a:hover{color:var(--lemon)}
.prose strong,.prose b{font-weight:700;color:var(--paper)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li + li,.prose li > ul,.prose li > ol{margin-top:.45em}
.prose ul > li::marker{color:var(--lemon)}
.prose ol > li::marker{font-weight:700;color:var(--muted)}
.prose blockquote{padding-top:24px;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,1rem + .8vw,29px);line-height:1.28;letter-spacing:-.01em}
.prose blockquote > * + *{margin-top:.6em}
.prose img{height:auto;border-radius:8px}
.prose figcaption{margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted)}
.prose hr{height:0;margin:2.4em 0;border:0;border-top:1px solid var(--line)}
.prose code{padding:.1em .35em;border-radius:4px;background:var(--panel);font-size:.88em}
.prose pre{padding:18px 20px;overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:15px;line-height:1.55}
.prose pre code{padding:0;background:transparent;font-size:inherit}
.prose iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .faq summary svg{transition:none}
}

/* The ladder's rung titles are h3 under a page's h2 (heading order): the home's .week h4 look (moved here from site-pages.css so /apply has it too). */
.week h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,1rem + 1vw,34px);line-height:1;text-transform:uppercase}