/* ================================================================
   page-methods.css  –  Compliance Checker
   Per-page styles for the methodology page (/methods).

   Each section carries one of five colour themes via
   .methods-theme--<key>, which exposes:
     --m-main    strong colour (header bg, table head, link)
     --m-accent  accent colour (eyebar, sidebar dot, table button)
     --m-tint    light tint (striped rows, table bar bg)

   Layout collapses to a single column under 1024px; the sticky
   sidebar TOC swaps out for the inline "You're in" jump pill.
   ================================================================ */


/* === Page-scoped surface tone ================================== */
/* Used by sidebar/table borders and the alt-band background.
   Scoped here so it doesn't pollute global token space. */
.page-methods { --m-surface: #f6f8fb; }


/* === Theme tokens ============================================== */
.methods-theme--deepwater { --m-main: var(--ae-darkblue);    --m-accent: var(--ae-lightgreen); --m-tint: var(--ae-aqua-lite); }
.methods-theme--jungle    { --m-main: var(--ae-jungle-dark); --m-accent: var(--ae-lightgreen); --m-tint: var(--ae-jungle-light); }
.methods-theme--aqua      { --m-main: var(--ae-aqua-dark);   --m-accent: var(--ae-lightblue);  --m-tint: var(--ae-aqua-lite); }
.methods-theme--land      { --m-main: var(--ae-land-dark);   --m-accent: var(--ae-green);      --m-tint: var(--ae-land-lite); }
.methods-theme--sun       { --m-main: var(--ae-orange);      --m-accent: var(--ae-yellow);     --m-tint: var(--ae-sun-lite); }


/* === Layout ==================================================== */
/* Outer cap is min(95%, 2260px) — at 2560px (QHD) viewport that's
   2260px content + 150px gutters per side. On smaller screens 95%
   wins, so we still leave a small breathing margin from the
   viewport edge. */
.methods-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
    max-width: min(95%, 2260px);
    margin: 0 auto;
    padding: 0 var(--space-md);
}
/* Prevent CSS Grid blowout — without min-width:0 on the grid item,
   a child with wider min-content (long URL, image, table) forces
   the 1fr track past its share. That ends up making the whole body
   wider than viewport on phones (visible as horizontal scroll in
   the nav + a white strip beside the footer). */
.methods-layout > main { min-width: 0; }
.methods-head {
    max-width: min(95%, 2260px);
    margin: 0 auto;
    padding: 0 var(--space-md);
}
.methods-meta {
    margin-bottom: var(--space-md);
    color: var(--color-muted);
}

/* Anchor offset so scroll-spy targets settle below the sticky nav. */
section[id] { scroll-margin-top: 112px; }


/* === Sticky sidebar TOC (desktop) ============================== */
.methods-toc {
    position: sticky;
    top: 16px;
    align-self: start;
    background: var(--white);
    border: 1px solid var(--m-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 12px;
    height: max-content;
}
.methods-toc__title {
    font-weight: 700;
    color: var(--ae-black);
    margin: 6px 8px 10px;
}
.methods-toc__list { list-style: none; margin: 0; padding: 0 6px 6px; }
.methods-toc__item { margin: 0; padding: 0; }
.methods-toc__link {
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px;
    text-decoration: none;
    color: var(--ae-black);
    border-radius: var(--radius-sm);
    transition: background var(--transition-base), color var(--transition-base);
}
.methods-toc__link:hover {
    background: var(--m-surface);
    color: var(--ae-darkblue);
}
.methods-toc__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--m-main, var(--ae-lightblue));
}
.methods-toc__link.is-active {
    background: color-mix(in srgb, var(--m-accent, var(--ae-lightgreen)) 24%, white);
    outline: 2px solid var(--m-accent, var(--ae-lightgreen));
    color: var(--m-main, var(--ae-darkblue));
    font-weight: 650;
}


/* === Mobile jump button (replaces sidebar under 1024px) ========
   Hamburger + fixed "Jump to section" label. Native <select> is
   absolutely-positioned on top of the pill at zero opacity, so a
   tap on the pill opens the OS picker without the visible chrome
   resizing to the selected chapter's title. */
.methods-jump {
    display: none;             /* shown at ≤ 1023px via media query */
    position: relative;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--m-surface);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
    margin-top: var(--space-sm);
    width: fit-content;
    max-width: 100%;
    box-shadow: var(--shadow);
    color: var(--ae-darkblue);
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
}
.methods-jump__icon {
    font-size: 14px;
    color: var(--ae-darkblue);
    flex-shrink: 0;
}
.methods-jump__label { cursor: pointer; }
.methods-jump__select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    appearance: none;
    opacity: 0;
    cursor: pointer;
    /* Setting font-size: 16px stops iOS Safari auto-zooming when
       the select gains focus. */
    font-size: 16px;
}


/* === Content bands ============================================= */
.methods-band { padding: var(--space-xl) 0; }
.methods-band--alt { background: var(--white); }


/* === Section card (themed) ===================================== */
.methods-section {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.methods-section__head {
    background: var(--m-main, var(--ae-darkblue));
    color: var(--white);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.methods-section__eyebar {
    width: 6px; height: 26px;
    border-radius: var(--radius-sm);
    background: var(--m-accent, var(--ae-lightgreen));
    flex: 0 0 auto;
}
.methods-section__title {
    margin: 0;
    font-size: var(--fs-h4);
    line-height: 1.2;
    font-weight: 650;
}
.methods-section__body { padding: 8px 18px 18px; }


/* === Prose wrapper + themed inline links ======================= */
/* Single-column at every tier below "large monitor" — the multi-
   column layout only kicks in inside the 2xl media query below.
   Link look mirrors typography.css' canonical `p a` (weight 600,
   2px underline offset, lightgreen hover); colour swaps to the
   section's --m-main so each chapter reads in its own palette. */
.methods-prose {
    white-space: pre-wrap;
    /* `overflow-wrap: anywhere` lets the browser break inside long
       URLs / non-spaced strings; `word-wrap: break-word` alone
       isn't strong enough and lets long hrefs overflow the card. */
    overflow-wrap: anywhere;
    min-width: 0;
    font-family: var(--font-body);
    line-height: 1.7;
    font-size: var(--fs-md);
    color: var(--ae-black);
}
/* Defensive content caps — JSON content can ship raw <img> /
   <table> elements that would otherwise force the prose wider
   than the card on narrow viewports. */
.methods-prose img {
    max-width: 100%;
    height: auto;
}
.methods-prose .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}
.methods-prose a {
    color: var(--m-main, var(--ae-darkblue));
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.methods-prose a:hover { color: var(--ae-lightgreen); }

/* Restore paragraph spacing — reset.css zeros p margins site-wide,
   and the JSON ships <p>...</p><p>...</p> with no whitespace between
   blocks, so without this rule the <p>-wrapped sections run together. */
.methods-prose :is(p, ul, ol):not(:last-child) { margin-bottom: 1em; }

/* Block elements that span every column (so an image / figure /
   table / "Show table" wrapper never sits in a single narrow
   column). They drop to full body width and the prose continues
   below in columns.
     • .table-responsive — JSON wraps every <table> in this div, so
       it's the actual direct child of the multi-column container.
       column-span: all only lifts a *direct* child out of the
       columns, so the wrapper has to carry it, not the inner table.
     • .methods-table — the JS-built collapsible "Show table" chrome
       (sits inside .table-responsive but listed for safety in case
       the JSON ever stops wrapping). */
.methods-prose :is(img, figure, table, .methods-table, .table-responsive) {
    column-span: all;
    break-inside: avoid;
}

/* Keep paragraphs and list items from splitting awkwardly across
   a column boundary. */
.methods-prose :is(p, li) { break-inside: avoid; }


/* === Tables inside prose ======================================= */
.methods-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 0;
    background: var(--white);
    border: 1px solid var(--m-surface);
}
.methods-prose caption {
    text-align: left;
    color: var(--m-main);
    font-weight: 600;
    margin-bottom: 8px;
}
.methods-prose thead th {
    background: var(--m-main);
    color: var(--white);
    font-weight: 600;
    text-align: left;
}
.methods-prose th,
.methods-prose td {
    padding: 10px 12px;
    border: 1px solid var(--m-surface);
    vertical-align: top;
}
.methods-prose tbody tr:nth-child(even) {
    background: var(--m-tint, var(--m-surface));
}


/* === Figures =================================================== */
.methods-fig {
    margin: 24px auto;
    max-width: 720px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.methods-fig img { display: block; width: 100%; height: auto; }
.methods-fig figcaption { padding: 10px 14px; font-size: var(--fs-sm); }
.methods-fig__credit { color: var(--color-muted); }

.methods-fig-grid {
    display: grid;
    grid-template-columns: repeat(var(--fig-cols, 2), minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}
.methods-fig-grid img {
    width: 100%; height: auto;
    border-radius: var(--radius-sm);
    display: block;
}


/* === Collapsible table block (built by JS) ===================== */
.methods-table {
    border: 1px solid var(--m-surface);
    border-radius: var(--radius-dropdown);
    overflow: hidden;
    margin-top: 16px;
}
.methods-table__bar {
    background: var(--m-tint, var(--m-surface));
    color: var(--ae-black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--m-surface);
}
.methods-table__title {
    margin: 0;
    font-weight: 600;
    font-size: var(--fs-md);
}
.methods-table__btn {
    appearance: none;
    border: 1px solid var(--m-accent, var(--ae-lightgreen));
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--m-main, var(--ae-darkblue));
    font-weight: 700;
    padding: 6px 10px;
    cursor: pointer;
}
.methods-table__btn[aria-expanded="true"] {
    background: var(--m-accent, var(--ae-lightgreen));
    color: var(--ae-black);
    border-color: transparent;
}
.methods-table__inner {
    overflow: hidden;
    transition: max-height var(--transition-base);
    max-height: none;
}
.methods-table__inner.is-collapsed { max-height: 0; overflow: hidden; }


/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
   Every tier from the ladder is accounted for. Typography +
   spacing already auto-scale via the --fs-* / --space-* clamp
   tokens, so blocks here only override fixed-pixel values that
   wouldn't otherwise change.

     3xl  ≥ 2200px   QHD / 4K          densest chrome scaling
     2xl  ≥ 1536px   large monitors    ultrawide chrome scaling
     xl   ≥ 1280px   standard desktops (default — no override)
     lg   ≥ 1024px   small laptops     (default — sidebar visible)
     md   ≤ 1023px   tablets           sidebar → inline jump pill
     sm   ≤ 767px    phones            tighten section padding
   ================================================================ */


/* === 3xl  (≥ 2200px, QHD / 4K) ================================= */
/* Push the 2xl clamps past their max caps for densest displays. */
@media (min-width: 2200px) {
    .methods-layout {
        grid-template-columns: 400px 1fr;
        gap: 48px;
    }
    .methods-toc { padding: 22px; }
    .methods-toc__link { padding: 14px; font-size: 19px; }
    .methods-toc__dot { width: 14px; height: 14px; }

    .methods-section__head { padding: 26px 40px; gap: 20px; }
    .methods-section__title { font-size: 2rem; }
    .methods-section__body { padding: 10px 40px 40px; }

    .methods-band { padding: 72px 0; }

    .methods-prose {
        column-count: 2;
        column-gap: var(--space-xl);
        column-fill: balance;
    }
}


/* === 2xl  (≥ 1536px, large monitors) =========================== */
/* Sidebar widens, section chrome paddings grow proportionally so
   content fills the wider canvas instead of floating in oversized
   cards. Prose columns adjust automatically via `column-width:
   50ch` — no override needed. */
@media (min-width: 1536px) {
    .methods-layout {
        grid-template-columns: clamp(280px, 16vw, 360px) 1fr;
        gap: clamp(24px, 1.6vw, 40px);
    }

    .methods-toc { padding: clamp(12px, 0.9vw, 18px); }
    .methods-toc__link {
        padding: clamp(8px, 0.65vw, 12px);
        font-size: clamp(14px, 0.95vw, 17px);
    }
    .methods-toc__dot {
        width: clamp(8px, 0.7vw, 12px);
        height: clamp(8px, 0.7vw, 12px);
    }

    .methods-section__head {
        padding: clamp(14px, 1vw, 22px) clamp(18px, 1.4vw, 32px);
        gap: clamp(12px, 0.9vw, 18px);
    }
    .methods-section__title { font-size: clamp(1.25rem, 1.4vw, 1.75rem); }
    .methods-section__body { padding: 8px clamp(18px, 1.4vw, 32px) clamp(18px, 1.4vw, 32px); }

    .methods-band { padding: clamp(24px, 2.2vw, 56px) 0; }


}


/* === xl & lg  (1024–1535px) ==================================== */
/* Standard desktop range. Base styles are calibrated for this
   default tier — sidebar visible at 280px, section padding 18px,
   prose in 1–2 columns depending on card width. No overrides. */


/* === md  (≤ 1023px, tablets) =================================== */
/* Single-column layout: sidebar TOC collapses to the inline
   "You're in" jump pill above the chapters. */
@media (max-width: 1023px) {
    .methods-layout { grid-template-columns: 1fr; }
    .methods-toc { display: none; }
    .methods-jump { display: inline-flex; }
}


/* === sm  (≤ 767px, phones) ===================================== */
/* Tighten section chrome and band padding so cards don't lose
   most of their width to inner padding on narrow viewports.
   Anchor-scroll offset shrinks with the slimmer mobile nav. */
@media (max-width: 767px) {
    .methods-section__head { padding: 12px 14px; gap: 10px; }
    .methods-section__title { font-size: 1.0625rem; }
    .methods-section__body { padding: 6px 14px 14px; }
    .methods-band { padding: var(--space-md) 0; }
    section[id] { scroll-margin-top: 80px; }
}