/* ==========================================================================
   guides.css — shared styling for the IGA reference guides.

   Loaded AFTER css/sectors.css, which supplies the design tokens (--navy-*,
   --teal, --text-*) and the site navbar and footer. This file styles the guide
   *content* only.

   WHY THIS FILE EXISTS
   Each guide previously carried 7–13 KB of its own inline CSS: a light theme
   with purple gradient cards, different typography and no site chrome. Twelve
   guides, 193 distinct class names, no shared design system between them.

   Rewriting 193 bespoke classes by hand was not realistic, so this file works
   two ways at once:

     1. Attribute selectors on class SUFFIX. The bespoke names are inconsistent
        but their endings are not — 29 end in -card, 23 in -grid, 16 in -box,
        16 in -section. One rule per suffix covers 84 of the 193.
     2. Semantic families for the rest — conversation transcripts, process
        flows, stat callouts, generated-document samples.

   Anything still uncovered falls back to the base element styles below, which
   are on-palette. A guide can look plain, but it cannot look like a different
   website.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Undo the parts of sectors.css that are wrong for a long-form document.
   sectors.css styles <section> as a full-width page band: 96px vertical
   padding, and every even one tinted navy-mid. The guides use <section> for
   every subsection of an article, so inherited that produces enormous gaps and
   arbitrary stripes.
   -------------------------------------------------------------------------- */
.guide-page section,
.guide-page .section {
    padding: 0;
    background: none;
    margin: 0 0 2.75rem;
}
.guide-page section:nth-child(even) { background: none; }

/* --------------------------------------------------------------------------
   2. Page frame
   -------------------------------------------------------------------------- */
body.guide-page {
    background: var(--navy-deepest);
    color: var(--text-body);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* The guides' own wrapper. Narrower than the marketing container — long-form
   prose is unreadable at full page width. */
/* padding-top clears the fixed navbar. Without it the back-link — the first
   thing in the container — sits underneath the navbar and is unclickable. */
.guide-page > .container {
    max-width: 940px;
    margin: 0 auto;
    padding: 6.5rem 1.5rem 5rem;
}

/* The guide's <header> is its hero. */
.guide-page > .container > header {
    padding: .5rem 0 2.75rem;
    position: relative;
}
.guide-page > .container > header::before {
    content: '';
    position: absolute;
    /* This used to bleed -50vw past each edge to reach the viewport from
       inside a centered container. That widened the initial containing block —
       567px at a 390px viewport — and the fixed .navbar sizes to the ICB, not
       the viewport, so the mobile nav row rendered 532px wide with 142px of
       menu items clipped off and nowhere to scroll. body{overflow-x:hidden}
       hid the sideways drag but not the inflation. The glow is a soft radial
       that fades to transparent well before its own edge, so ending it at the
       container costs nothing visible and removes the cause. */
    inset: -2rem 0 0;
    background: radial-gradient(ellipse 60% 70% at 40% 30%, rgba(0, 198, 167, .10) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.guide-page > .container > header h1 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.12;
    color: var(--text-heading);
    margin: 0 0 .9rem;
    font-weight: 400;
}
.guide-page > .container > header > p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 62ch;
    margin: 0;
}

.guide-page .content { padding-top: 1rem; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.guide-page h2 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    line-height: 1.25;
    color: var(--text-heading);
    margin: 2.75rem 0 1.1rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--navy-border);
}
/* sectors.css sets `h1, h2, h3, h4 { font-family: var(--font-serif) }` for the
   marketing pages. A serif reads well at section-heading size but poorly on a
   card title, so h3/h4 are returned to the sans stack here. h2 keeps the serif. */
.guide-page h3 {
    font-family: 'Outfit', -apple-system, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-heading);
    margin: 2rem 0 .7rem;
}
.guide-page h4 {
    font-family: 'Outfit', -apple-system, system-ui, sans-serif;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--teal);
    margin: 1.5rem 0 .55rem;
}
.guide-page p {
    font-size: 1rem;
    line-height: 1.78;
    color: var(--text-body);
    margin: 0 0 1.1rem;
}
.guide-page strong { color: var(--text-heading); font-weight: 600; }
.guide-page em { color: var(--text-body); }
.guide-page a { color: var(--teal); }

.guide-page ul,
.guide-page ol { margin: 0 0 1.25rem 1.3rem; padding: 0; }
.guide-page li {
    font-size: .98rem;
    line-height: 1.75;
    color: var(--text-body);
    margin-bottom: .5rem;
}
.guide-page li::marker { color: var(--teal); }

/* --------------------------------------------------------------------------
   4. Suffix patterns — the bulk of the 193 bespoke classes
   -------------------------------------------------------------------------- */

/* Grids: 23 classes end in -grid */
.guide-page [class$="-grid"],
.guide-page [class$="-levels"],
.guide-page [class$="-steps"],
.guide-page [class$="-types"],
.guide-page [class$="-points"],
.guide-page [class$="-badges"],
.guide-page [class$="-standards"],
.guide-page [class$="-factors"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.1rem;
    margin: 1.5rem 0 1.75rem;
}

/* Cards: 29 classes end in -card */
.guide-page [class$="-card"],
.guide-page .card,
.guide-page [class$="-level"],
.guide-page [class$="-type"] {
    background: var(--navy-card);
    border: 1px solid var(--navy-border);
    border-radius: 12px;
    padding: 1.4rem;
}
.guide-page [class$="-card"] h3,
.guide-page [class$="-card"] h4,
.guide-page .card h3,
.guide-page .card h4 {
    margin-top: 0;
    font-size: 1rem;
    color: var(--text-heading);
}
.guide-page [class$="-card"] p:last-child,
.guide-page .card p:last-child { margin-bottom: 0; }

/* Callout boxes: 16 classes end in -box, plus the named callouts */
.guide-page [class$="-box"],
.guide-page div.highlight,
.guide-page .overview,
.guide-page .bottom-line,
.guide-page .critical-connection,
.guide-page .best-practices,
.guide-page .finding,
.guide-page .result,
.guide-page .sod-policy,
.guide-page .use-case,
.guide-page .healthcare-scenario {
    background: var(--navy-card);
    border: 1px solid var(--navy-border);
    border-left: 3px solid var(--teal);
    border-radius: 0 10px 10px 0;
    padding: 1.3rem 1.5rem;
    margin: 1.5rem 0;
}
.guide-page [class$="-box"] > :last-child,
.guide-page .overview > :last-child,
.guide-page div.highlight > :last-child { margin-bottom: 0; }

/* .highlight is used BOTH as a block callout (8 times) and as an inline
   emphasis span inside a paragraph (7 times). Styling both as a block callout
   painted a padded, bordered box on top of the surrounding sentence. Qualified
   by element so each form gets the treatment it needs. */
.guide-page span.highlight {
    display: inline;
    color: var(--teal);
    background: rgba(0, 198, 167, .09);
    border: none;
    border-radius: 4px;
    padding: .1em .35em;
    margin: 0;
    font-weight: 600;
}
.guide-page .overview h2 { margin-top: 0; border-bottom: none; padding-bottom: 0; }

/* Small inline labels: badges, tags, pills */
.guide-page [class$="-badge"],
.guide-page .badge,
.guide-page .tag,
.guide-page [class$="-label"],
.guide-page .example-label {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal);
    background: rgba(0, 198, 167, .08);
    border: 1px solid rgba(0, 198, 167, .25);
    border-radius: 999px;
    padding: .28rem .7rem;
    margin: 0 .3rem .4rem 0;
}

/* --------------------------------------------------------------------------
   5. Semantic families
   -------------------------------------------------------------------------- */

/* Numbered steps in a process or lifecycle */
.guide-page [class$="-number"],
.guide-page .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--navy-mid);
    border: 1px solid rgba(0, 198, 167, .4);
    color: var(--teal);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: .6rem;
}
.guide-page [class$="-step"] {
    background: var(--navy-card);
    border: 1px solid var(--navy-border);
    border-radius: 10px;
    padding: 1.25rem;
}
.guide-page .flow-arrow {
    color: var(--teal);
    font-size: 1.3rem;
    text-align: center;
    padding: .3rem 0;
}

/* Stat callouts */
.guide-page .stats-bar,
.guide-page .hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.75rem 0;
}
.guide-page .stat,
.guide-page .stats-highlight,
.guide-page .savings-highlight {
    background: var(--navy-mid);
    border: 1px solid var(--navy-border);
    border-radius: 10px;
    padding: 1.2rem 1rem;
    text-align: center;
}
.guide-page .stat-number,
.guide-page .savings-amount {
    display: block;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--teal);
    margin-bottom: .3rem;
}
.guide-page .stat-label,
.guide-page .savings-label {
    display: block;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    background: none;
    border: none;
    padding: 0;
}

/* Conversation transcripts — stakeholder vs the ICA assistant */
.guide-page [class$="-conversation"],
.guide-page .conversation-example {
    background: var(--navy-deep);
    border: 1px solid var(--navy-border);
    border-radius: 12px;
    padding: 1.35rem;
    margin: 1.5rem 0;
}
.guide-page .user-msg,
.guide-page .stakeholder-msg,
.guide-page .stakeholder-line,
.guide-page .ica-msg,
.guide-page .ica-line,
.guide-page .conversation-line {
    font-size: .94rem;
    line-height: 1.7;
    padding: .75rem 1rem;
    border-radius: 10px;
    margin-bottom: .65rem;
}
.guide-page .user-msg,
.guide-page .stakeholder-msg,
.guide-page .stakeholder-line {
    background: var(--navy-card);
    color: var(--text-body);
    border: 1px solid var(--navy-border);
}
.guide-page .ica-msg,
.guide-page .ica-line {
    background: rgba(0, 198, 167, .07);
    border: 1px solid rgba(0, 198, 167, .22);
    color: var(--text-heading);
}
.guide-page .ica-label,
.guide-page .stakeholder-label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: .3rem;
    background: none;
    border: none;
    padding: 0;
}

/* Generated-document and code samples */
.guide-page .code-block,
.guide-page .doc-output,
.guide-page .ica-output,
.guide-page [class$="-doc"] {
    background: var(--navy-deepest);
    border: 1px solid var(--navy-border);
    border-radius: 10px;
    padding: 1.15rem 1.3rem;
    margin: 1.35rem 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--text-body);
    overflow-x: auto;
}
.guide-page code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .88em;
    color: var(--teal);
    background: rgba(0, 198, 167, .07);
    padding: .12em .4em;
    border-radius: 4px;
}
.guide-page pre { overflow-x: auto; }
.guide-page pre code { background: none; padding: 0; }

/* --------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */
.guide-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    margin: 1.5rem 0;
}
.guide-page th,
.guide-page td {
    padding: .8rem .9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--navy-border);
}
.guide-page thead th {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
    background: none;
}
.guide-page td { color: var(--text-body); line-height: 1.65; }
.guide-page tbody tr:hover td { background: rgba(255, 255, 255, .015); }
/* Wide tables must scroll inside their own box, not push the page sideways. */
.guide-page .table-wrap { overflow-x: auto; }

/* --------------------------------------------------------------------------
   7. Back-to-guides link and CTA
   -------------------------------------------------------------------------- */
.guide-back {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color .2s;
}
.guide-back:hover { color: var(--teal); }

.guide-page .cta-button {
    display: inline-block;
    background: var(--teal);
    color: var(--navy-deepest);
    font-weight: 600;
    font-size: .92rem;
    padding: .8rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    border: none;
}

/* --------------------------------------------------------------------------
   8. The guides index — a listing page, its own small vocabulary
   -------------------------------------------------------------------------- */
.guide-page .guides-container {
    max-width: 940px;
    margin: 0 auto;
    padding: 6.5rem 1.5rem 5rem;
}
.guide-page .guides-header { padding: .5rem 0 2.5rem; }
.guide-page .guides-header h1 {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 400;
    color: var(--text-heading);
    margin: 0 0 .9rem;
}
.guide-page .guides-header p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-body);
    max-width: 62ch;
    margin: 0;
}
.guide-page .back-link {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 1.5rem;
}
.guide-page .back-link:hover { color: var(--teal); }

.guide-page .guides-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}
.guide-page .guide-card {
    background: var(--navy-card);
    border: 1px solid var(--navy-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.guide-page .guide-card:hover {
    border-color: rgba(0, 198, 167, .45);
    transform: translateY(-2px);
    box-shadow: none;
}
.guide-page .guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    flex-wrap: wrap;
}
.guide-page .guide-title-section { flex: 1 1 320px; }
.guide-page .guide-title {
    font-family: 'Outfit', -apple-system, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 .5rem;
}
/* The markup nests these: <div class="guide-category"><span
   class="category-badge">. Styling both as pills draws two concentric borders,
   so the wrapper stays a plain container and only the badge is a pill. */
.guide-page .guide-category {
    background: none;
    border: none;
    padding: 0;
}
.guide-page .category-badge {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
    background: rgba(0, 198, 167, .08);
    border: 1px solid rgba(0, 198, 167, .25);
    border-radius: 999px;
    padding: .26rem .68rem;
}
.guide-page .guide-actions { display: flex; align-items: center; gap: .75rem; }
.guide-page .guide-link {
    display: inline-block;
    background: var(--teal);
    color: var(--navy-deepest);
    font-weight: 600;
    font-size: .86rem;
    padding: .6rem 1.15rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.guide-page .guide-link:hover { opacity: .9; }
.guide-page .expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--navy-mid);
    border: 1px solid var(--navy-border);
    color: var(--teal);
    cursor: pointer;
}
/* Collapsed: no border. A border-top on a zero-height element still paints,
   which drew a stray rule across the bottom of every card. */
.guide-page .guide-description {
    border-top: 0 solid var(--navy-border);
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
}
.guide-page .guide-description.open,
.guide-page .guide-card.expanded .guide-description {
    border-top-width: 1px;
    max-height: 60rem;
    padding: 1.25rem 1.5rem;
}
.guide-page .guide-description-content,
.guide-page .guide-description p {
    font-size: .94rem;
    line-height: 1.75;
    color: var(--text-body);
}

/* --------------------------------------------------------------------------
   9. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .guide-page > .container { padding: 0 1.1rem 3.5rem; }
    .guide-page > .container > header { padding-top: 5.5rem; }
    .guide-page [class$="-grid"] { grid-template-columns: 1fr; }
}