/* ==========================================================================
   STYLE GUIDE — the living component library   (Style Guide layout only)
   ==========================================================================
   Scoped to .sg-* / .proj-* so it never leaks into real pages. Every SPECIMEN
   is a heading + a live demo (rendered with the real classes) + the exact
   back-end recipe as a code block, generated from the same spec that renders
   the demo — so the guide can't drift. Built by engine/starter (specs/sg-*.php,
   helpers in specs/_starter.php). The Style Guide layout loads every component
   stylesheet so the demos render for real.

   Structure (from TPA Stack): a hero intro per guide page, then a sub menu
   (custom navigation, the layout's "subnav" section) that sticks under the
   header, then sections of specimens. Open Items / Finished Items (the
   project's to-do and done lists) sit in the same menu after a divider.
   ========================================================================== */

/* ---- Guide sub menu ------------------------------------------------------
   The "Style Guide Nav" module (custom navigation) in the layout's "subnav"
   section, straight under the hero. #subnav is a child of #wrapper, so position: sticky holds
   it under the fixed header for the whole page. */
#subnav {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 40;
    background: var(--white);
    border-block: 1px solid var(--stroke);
}
#subnav > .inside {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}
.style_nav ul.level_1 {
    display: flex;
    gap: 0 clamp(20px, 2.4vw, 36px);
    margin: 0;
    padding: 0;
    overflow-x: auto;   /* phones: the menu scrolls sideways, the page doesn't */
    list-style: none;
    scrollbar-width: none;
}
.style_nav li { flex: none; margin: 0; }
.style_nav :is(a, strong) {
    display: block;
    padding: 18px 0 15px;
    border-bottom: 3px solid transparent;
    color: var(--heading);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}
.style_nav a:hover { color: var(--second); }
.style_nav .active { border-bottom-color: var(--second); color: var(--second); }   /* the page itself, not its parent (the overview) */
/* The project pages (open / finished items) sit after a divider */
.style_nav li:has(> :is(a, strong).page-open-items) {
    margin-left: clamp(4px, 1vw, 12px);
    padding-left: clamp(20px, 2.4vw, 36px);
    border-left: 1px solid var(--stroke);
}
/* an in-page anchor lands below the header and the sub menu */
html:has(#subnav) { scroll-padding-top: calc(var(--header-h, 0px) + 60px); }

/* ---- Page hero + section rhythm ----------------------------------------- */
.sg-hero {
    background: var(--surface-soft);
    padding-block: clamp(40px, 6vw, 80px);
}
.sg-hero .eyebrow { color: var(--second); }
.sg-intro { max-width: 60ch; color: var(--text-muted); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }

.sg-section { padding-block: var(--space-section); }
.sg-section > .sg-lead { margin-bottom: var(--space-40); }
.sg-section .sg-lead h2 { margin-bottom: 0.3em; }

/* Intro callout on the first page. */
.sg-callout {
    padding: clamp(24px, 3vw, 40px);
    background: var(--surface-soft);
    color: var(--heading);
}
.sg-callout h3 { color: var(--heading); }
.sg-callout ul { margin: 0; }
.sg-callout li { margin-bottom: 0.6em; }

/* ---- Specimen : head (full width) + demo | code ------------------------- */
.sg-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 clamp(20px, 3vw, 40px);
    margin-bottom: var(--space-40);
    padding-top: var(--space-24);
    border-top: 1px solid var(--stroke);
}
.sg-item > .sg-head { grid-column: 1 / -1; margin-bottom: var(--space-16); }
.sg-head h3, .sg-head h4 { margin-bottom: 0.15em; color: var(--heading); }
.sg-head p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; }
.sg-head code, .sg-note code, .sg-intro code, .sg-callout code { font-size: 0.85em; }

.sg-demo {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2.5vw, 32px);
    background: var(--white);
    border: 1px solid var(--stroke);
}
.sg-demo--dark { background: var(--prime-deep); border-color: transparent; color: var(--text-on-dark); }
.sg-demo--dark p { color: var(--text-on-dark-dim); }

/* Band-like components fill the demo box edge-to-edge but keep inner padding. */
.sg-demo .band,
.sg-demo .cta-band { padding-inline: clamp(18px, 2.5vw, 28px); margin: 0; }
.sg-demo .cta-band a.btn { margin-top: 0.5rem; }

.sg-code { align-self: start; }
.sg-code pre { margin: 0; height: 100%; }
.sg-code pre > code { height: 100%; }

.sg-note { grid-column: 1 / -1; margin-top: var(--space-16); }
.sg-note p { margin: 0; color: var(--text-muted); font-size: 0.875rem; font-style: italic; }

/* Wide components need the full width to show their real layout: demo on
   top, markup underneath */
.sg-item:has(.def-list, .cta-band, .step--row, .content-swiper, .content-accordion, .row,
               .hero, .timeline, .split-band, .media-split, .org-compare, .bar-compare, .bar-stack, .bar-col, .trust-bar, .quote) {
    grid-template-columns: minmax(0, 1fr);   /* not 1fr: a long code line would widen the column past the screen */
    > .sg-demo { margin-bottom: 14px; }
}

@media only screen and (max-width: 820px) {
    .sg-item { grid-template-columns: 1fr; }
    .sg-item > .sg-demo { margin-bottom: 14px; }
}

/* ---- Swatches ----------------------------------------------------------- */
.sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    margin-bottom: var(--space-24);
}
.sg-swatch { display: flex; flex-direction: column; gap: 4px; }
.sg-swatch__chip {
    display: block;
    height: 72px;
    border: 1px solid var(--stroke);
}
.sg-swatches--tall .sg-swatch__chip { height: 120px; }
.sg-swatch__name { margin-top: 6px; color: var(--heading); font-weight: 600; font-size: 0.9375rem; }
.sg-swatch code {
    padding: 2px 6px;
    background: var(--surface-soft);
    color: var(--text-body);
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    align-self: start;
}

/* the framework's swatch: one text element per swatch in a `row` of col-1-4 */
.row > .sg-swatch { border: 1px solid var(--stroke); }
.row > .sg-swatch .rte { display: flex; flex-direction: column; gap: 2px; }
.row > .sg-swatch .sg-swatch__name,
.row > .sg-swatch code { margin-inline: 12px; }
.row > .sg-swatch code:last-child { margin-bottom: 10px; }
.sg-gridcell { padding: var(--space-16); background: var(--surface-soft); text-align: center; font-size: 0.8rem; }
.sg-tobuild { display: inline-block; margin: 0.3em 0 1em; padding: 4px 12px; border: 1px dashed var(--stroke); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Spec table --------------------------------------------------------- */
.sg-spectable { overflow-x: auto; }
.sg-spec { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.sg-spec th, .sg-spec td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--stroke);
}
.sg-spec th { color: var(--heading); font-weight: 700; }
.sg-spec td code { font-size: 0.85em; word-break: break-word; }

/* ---- Notch demo tiles --------------------------------------------------- */
.sg-notchgrid { display: flex; flex-wrap: wrap; gap: 16px; }
.sg-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    min-height: 96px;
    padding: 16px;
    background: var(--prime-deep);
    color: var(--white);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
}

/* ---- Generic demo rows / placeholders ----------------------------------- */
.sg-row { display: flex; flex-wrap: wrap; gap: 16px; }
.sg-row > * { flex: 1 1 180px; }
.sg-row--split { align-items: center; }
.sg-imgph {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    background: var(--surface-soft);
    color: var(--heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}

/* ---- Icon set ----------------------------------------------------------- */
.sg-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: clamp(12px, 2vw, 20px);
}
.sg-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    background: var(--white);
    border: 1px solid var(--stroke);
    text-align: center;
}
.sg-icon i { font-size: 30px; color: var(--heading); line-height: 1; }
.sg-icon code { font-size: 0.72rem; color: var(--text-body); word-break: break-word; }

/* ---- Themes list -------------------------------------------------------- */
.sg-themes .def-list dt { white-space: nowrap; }
.sg-themes code { font-size: 0.85em; }

/* ---- The Framework Reference page, in this guide's colours ---------------
   framework_reference.css reads these --fw-* tokens where it has them; a site
   sets its own here. */
.fw-ref {
  --fw-accent: var(--heading);
  --fw-col: var(--surface-soft);
  --fw-col-alt: color-mix(in srgb, var(--prime) 10%, white);
  --fw-col-border: var(--stroke);
  --fw-rule: var(--stroke);
  --fw-reveal-a: color-mix(in srgb, var(--accent) 45%, white);
  --fw-reveal-b: var(--accent);
  --fw-note: var(--surface-soft);
  --fw-code-bg: var(--surface-soft);
  --fw-code-border: var(--stroke);
  --fw-h1-size: clamp(2.5rem, 4.4vw, 3.25rem);
  --fw-h2-size: clamp(1.75rem, 2.6vw, 2.25rem);
  --fw-h2-pad: 0;
  --fw-h2-rule: 0;
  --fw-sticky-top: calc(var(--header-h, 88px) + 58px + 24px);   /* the header, then the guide sub menu */
}

/* ---- Project pages: Open Items / Finished Items (starter specs/_starter.php)
   Each item is a text element (H3 + copy); who it waits on / its status is
   the modifier class, drawn as a tag. Open items are numbered down the page. */
body.page-open-items #main { counter-reset: proj; }
.proj-counts-band { padding-block: 0 !important; }
.proj-counts ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: var(--space-40) 0 0;
    padding: 0;
    list-style: none;
}
.proj-counts li {
    --notch: 14px;
    min-width: 170px;
    margin: 0;
    padding: 14px 22px 14px 20px;
    background: var(--accent);
    color: var(--heading);
    font-size: 0.875rem;
    font-weight: 600;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.proj-counts strong { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; }

.proj-list { display: grid; gap: 10px; }
:is(.proj-item, .proj-done) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 18px 22px;
    background: var(--white);
    border: 1px solid var(--stroke);

    > .rte { display: contents; }
    h3 { grid-column: 1; margin: 0 0 0.3em; color: var(--heading); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
    p, ul { grid-column: 1 / -1; margin: 0; font-size: 0.9375rem; }
    p + p { margin-top: 0.6em; }
    code { font-size: 0.85em; }
    /* the tag: who it waits on / its status */
    &::after {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        padding: 3px 10px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
}
.proj-item {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    counter-increment: proj;
    &::before {
        content: counter(proj, decimal-leading-zero);
        grid-column: 1;
        grid-row: 1 / span 2;
        color: var(--second);
        font-weight: 700;
        line-height: 1.6;
    }
    h3 { grid-column: 2; }
    p, ul { grid-column: 2 / -1; }
    &::after { grid-column: 3; }
}
/* the studio's tag reads --proj-you (e.g. `body { --proj-you: "John"; }` in a site's CSS) */
.proj-item--client::after { content: "Client"; background: #fff1d6; color: #8a5200; }
.proj-item--you::after    { content: var(--proj-you, "Studio"); background: var(--surface-soft); color: var(--heading); }
.proj-done--live::after    { content: "Done";    background: #e2f3ea; color: #1d6b43; }
.proj-done--built::after   { content: "Built";   background: #e2f3ea; color: #1d6b43; }
.proj-done--decided::after { content: "Decided"; background: var(--surface-soft); color: var(--text-muted); }

@media (max-width: 600px) {
    :is(.proj-item, .proj-done) { grid-template-columns: minmax(0, 1fr); }
    .proj-item { grid-template-columns: 30px minmax(0, 1fr); }
    :is(.proj-item, .proj-done)::after { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 10px; }
    .proj-item::after { grid-column: 2; }
}

/* Phones and tablets: a specimen stacks (demo, then its markup), and a demo or
   code block wider than the screen scrolls inside its own box */
@media (max-width: 900px) {
    .sg-item { grid-template-columns: minmax(0, 1fr); }
    .sg-item > .sg-demo { margin-bottom: 14px; }
    .sg-demo, .sg-code pre { min-width: 0; overflow-x: auto; }
}