/* ============================================================
   platform-ui-content.css
   Platform.Ui.Components content rendering styles
   ============================================================ */

:root {
    --ls-text-primary: var(--pui-color-text-primary, #0F172A);
    --ls-text-secondary: var(--pui-color-text-secondary, #334155);
    --ls-text-muted: var(--pui-color-text-muted, #64748B);
    --ls-toc-text: var(--pui-color-text-secondary, #475569);
    --ls-bg-page: var(--pui-color-surface-page, #FFFFFF);
    --ls-bg-section: var(--pui-color-surface-muted, #F8FAFC);
    --ls-bg-component: var(--pui-color-surface-muted, #F1F5F9);
    --ls-border: var(--pui-color-border-default, #E2E8F0);
    --ls-accent: var(--pui-color-link, var(--pui-color-action-primary, #2563EB));
    --ls-accent-soft: var(--pui-color-accent-soft, #DBEAFE);
    --ls-selected-bg: var(--pui-color-surface-selected, var(--ls-accent-soft));
    --ls-selected-border: var(--pui-color-border-strong, var(--ls-accent));
    --ls-hover-bg: var(--pui-color-surface-hover, var(--ls-bg-component));
    --ls-space-1: var(--pui-space-1, 2px);
    --ls-space-2: var(--pui-space-2, 4px);
    --ls-space-3: var(--pui-space-3, 6px);
    --ls-space-4: var(--pui-space-4, 8px);
    --ls-space-5: var(--pui-space-5, 12px);
    --ls-space-6: var(--pui-space-6, 16px);
    --ls-space-7: var(--pui-space-7, 24px);
    --ls-space-8: var(--pui-space-8, 32px);
    --ls-font-stack: var(--pui-font-family-base, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

    /* Shared article section-header and accordion-trigger row heights.
       One source of truth so every section header and every accordion
       family (definitions, walkthrough, decision loop) shares the same
       vertically centred row-height system. The trigger value is taken
       from the walkthrough step header (28px number badge + 2 x 12px
       padding = 52px), which is the source-of-truth row in this corpus. */
    --pui-content-section-header-min-height: var(--pui-size-control-md, 40px);
    --pui-content-accordion-trigger-min-height: 52px;
}

.pui-page-template--article,
.pui-page-template--blog-post,
.pui-page-template--blog-listing {
    --ls-text-primary: #0F172A;
    --ls-text-secondary: #334155;
    --ls-text-muted: #64748B;
    --ls-toc-text: #475569;
    --ls-bg-page: #FFFFFF;
    --ls-bg-section: #F8FAFC;
    --ls-bg-component: #F1F5F9;
    --ls-border: #E2E8F0;
    --ls-accent: #2563EB;
    --ls-accent-soft: #DBEAFE;
    --ls-selected-bg: #DBEAFE;
    --ls-selected-border: #2563EB;
    --ls-hover-bg: #EFF6FF;
    --pui-color-text-primary: #0F172A;
    --pui-color-text-secondary: #334155;
    --pui-color-text-muted: #64748B;
    --pui-color-text-accent: #2563EB;
    --pui-color-link: #2563EB;
    --pui-color-link-hover: #1D4ED8;
    --pui-color-action-primary: #2563EB;
    --pui-color-action-primary-hover: #1D4ED8;
    --pui-color-surface-page: #FFFFFF;
    --pui-color-surface-card: #FFFFFF;
    --pui-color-surface-muted: #F8FAFC;
    --pui-color-surface-selected: #DBEAFE;
    --pui-color-surface-hover: #EFF6FF;
    --pui-color-surface-control: #FFFFFF;
    --pui-color-border-default: #E2E8F0;
    --pui-color-border-strong: #2563EB;
    --pui-color-border-focus: #2563EB;
    --pui-focus-color: #2563EB;
    --pui-focus-color-rgb: 37, 99, 235;
    /* Solid core plus halo, matching Platform.Ui.Core. The halo alone is below the 3:1 a focus
       indicator needs. */
    --pui-focus-ring:
        0 0 0 1px var(--pui-focus-color),
        0 0 0 var(--pui-focus-width, 3px) rgba(var(--pui-focus-color-rgb), 0.2);
}

.pui-page-template--article .pui-page-template__hero,
.pui-page-template--article .pui-page-template__sidepanel,
.pui-page-template--blog-post .pui-page-template__hero,
.pui-page-template--blog-post .pui-page-template__sidepanel,
.pui-page-template--blog-listing .pui-page-template__hero,
.pui-page-template--blog-listing .pui-page-template__filters,
.pui-page-template--blog-listing .pui-page-template__search,
.pui-page-template--blog-listing .pui-page-template__section,
.pui-page-template--blog-listing .pui-page-template__empty,
.pui-page-template--blog-listing .pui-page-template__card,
.pui-page-template--blog-listing .pui-page-template__sidepanel {
    --ls-text-primary: #111111;
    --ls-text-secondary: #333333;
    --ls-text-muted: #666666;
    --ls-toc-text: #4D4D4D;
    --ls-bg-page: #FFFFFF;
    --ls-bg-section: #F7F7F7;
    --ls-bg-component: #F0F0F0;
    --ls-border: #E0E0E0;
    --ls-accent: #333333;
    --ls-accent-soft: #EEEEEE;
    --ls-selected-bg: #EEEEEE;
    --ls-selected-border: #666666;
    --ls-hover-bg: #F5F5F5;
    --pui-color-text-primary: #111111;
    --pui-color-text-secondary: #333333;
    --pui-color-text-muted: #666666;
    --pui-color-text-accent: #333333;
    --pui-color-text-on-accent: #FFFFFF;
    --pui-color-link: #111111;
    --pui-color-link-hover: #333333;
    --pui-color-action-primary: #333333;
    --pui-color-action-primary-hover: #111111;
    --pui-color-text-on-action: #FFFFFF;
    --pui-color-surface-page: #FFFFFF;
    --pui-color-surface-card: #FFFFFF;
    --pui-color-surface-muted: #F5F5F5;
    --pui-color-surface-selected: #EEEEEE;
    --pui-color-surface-hover: #F7F7F7;
    --pui-color-surface-control: #FFFFFF;
    --pui-color-border-default: #E0E0E0;
    --pui-color-border-strong: #666666;
    --pui-color-border-focus: #333333;
    --pui-focus-color: #333333;
    --pui-focus-color-rgb: 51, 51, 51;
    --pui-focus-ring:
        0 0 0 1px var(--pui-focus-color),
        0 0 0 var(--pui-focus-width, 3px) rgba(var(--pui-focus-color-rgb), 0.18);
    color: var(--pui-color-text-primary);
}

/* ---- Scoped typography ---- */
.content-preview {
    font-family: var(--ls-font-stack);
    color: var(--ls-text-primary);
}

.content-preview a {
    color: var(--ls-accent);
    text-decoration: none;
    font-weight: 500;
}

.content-preview a:hover {
    text-decoration: underline;
}

.content-preview :focus-visible {
    outline: 2px solid var(--ls-accent);
    outline-offset: 2px;
}

.content-preview p,
.content-preview li,
.content-preview dd,
.content-preview dt {
    color: var(--pui-color-article-body, var(--ls-text-secondary));
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
}

.content-preview h1,
.content-preview h2,
.content-preview h3 {
    color: var(--ls-text-primary);
    line-height: 1.25;
}

/* ---- Shared body panel ---- */
.pui-content-body-panel {
    padding: var(--pui-space-6);
    border: 1px solid var(--pui-color-border-default);
    border-radius: var(--pui-radius-lg);
    background: var(--pui-color-surface-card);
    box-shadow: var(--pui-shadow-soft);
    color: var(--pui-color-text-primary);
}

.pui-content-body-panel__body {
    min-width: 0;
    line-height: var(--pui-line-height-body);
}

/* Embedded article images (resolved <<IMAGE:name>> placeholders) render at ~70% of
   the content column, centred, and never overflow their container on any screen size
   (desktop, small screens and mobile alike). Scoped to the shared section shell so the
   rule applies wherever the platform content components render — CMS preview, public
   readers and any future host — not to a single site's wrapper. */
.pui-section-shell img {
    display: block;
    max-width: 70%;
    height: auto;
    margin: var(--pui-space-4) auto;
    border-radius: var(--pui-radius-md);
    /* The affordance for the lightbox. zoom-in says what the click does; a plain pointer would
       suggest a link and leave a reader waiting for a page that never loads. */
    cursor: zoom-in;
}

/* The focus ring has to be visible on an image of any colour, so it sits outside the edge rather
   than on it. Keyboard reachability is set by the lightbox script, because the content sanitiser
   emits nothing but src and alt. */
.pui-section-shell img:focus-visible {
    outline: 2px solid var(--pui-color-focus, #1d4ed8);
    outline-offset: 3px;
}

/* The enlarged view is the platform modal shell in platform-ui-core.css -- the same popup the
   component map uses. Nothing about it is styled here, deliberately: a second set of rules for the
   same dialog is the drift this consolidation removed. */


.pui-content-body-panel__body > :first-child,
.pui-content-body-panel__body .content-preview > :first-child {
    margin-top: 0;
}

.pui-content-body-panel__body > :last-child,
.pui-content-body-panel__body .content-preview > :last-child {
    margin-bottom: 0;
}

.pui-content-body-panel__body p,
.pui-content-body-panel__body ul,
.pui-content-body-panel__body ol,
.pui-content-body-panel__body blockquote {
    margin-top: 0;
    margin-bottom: var(--pui-space-4);
}

.pui-content-body-panel__body h2,
.pui-content-body-panel__body h3 {
    margin-top: var(--pui-space-6);
    margin-bottom: var(--pui-space-3);
}

/* ---- Page templates ----
   The page-template family owns its own fluid type ramp so every shared
   surface (landing, article, blog, tool, decision report) scales identically.
   These clamp() values are the single authoritative declaration for that ramp,
   kept in the owning Components layer rather than scattered per page. */
.pui-page-template {
    --pui-pt-gutter: clamp(1.125rem, 0.5rem + 2vw, 2.25rem);
    --pui-pt-h1: clamp(2.15rem, 1.45rem + 2.7vw, 3.3rem);
    --pui-pt-h1-landing: clamp(1.95rem, 1.5rem + 1.85vw, 2.85rem);
    --pui-pt-summary: clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
    --pui-pt-section-h2: clamp(1.35rem, 1.12rem + 0.9vw, 1.75rem);
    --pui-pt-card-h3: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);

    display: grid;
    gap: var(--pui-space-8);
    width: min(var(--page-max-width, var(--pui-page-max-width, 1120px)), calc(100% - 2 * var(--pui-pt-gutter)));
    margin-inline: auto;
    padding-block: clamp(var(--pui-space-7), 2vw + 1rem, var(--pui-space-9)) var(--pui-space-9);
    color: var(--pui-color-text-primary, var(--ls-text-primary));
}

.pui-page-template__hero {
    display: grid;
    gap: var(--pui-space-5);
    max-width: var(--pui-measure-wide, 940px);
}

/* Optional hero aside (decision report locator map). Single column by
   default so the aside stacks beneath the hero text on narrow layouts; at the
   report column breakpoint it moves into the otherwise unused right-hand hero
   space. The aside spans a generous row range because the hero's text children
   vary per page; surplus implicit rows are empty and collapse to zero height. */
.pui-page-template__hero--with-aside .pui-page-template__hero-aside {
    min-width: 0;
}

@media (min-width: 960px) {
    .pui-page-template__hero--with-aside {
        max-width: none;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        column-gap: var(--pui-space-8);
        align-items: start;
    }

    .pui-page-template__hero--with-aside > :not(.pui-page-template__hero-aside) {
        grid-column: 1;
        max-width: var(--pui-measure-wide, 940px);
    }

    .pui-page-template__hero--with-aside > .pui-page-template__hero-aside {
        grid-column: 2;
        grid-row: 1 / span 7;
        align-self: start;
    }
}

.pui-page-template--landing .pui-page-template__hero {
    gap: var(--pui-space-6);
    max-width: none;
}

.pui-page-template--landing .pui-page-template__hero h1 {
    max-width: var(--pui-measure-wide, 940px);
}

.pui-page-template--blog-listing {
    padding-block-start: var(--pui-space-6);
}

.pui-page-template__eyebrow {
    margin: 0;
    color: var(--pui-color-text-accent, var(--ls-accent));
    font-size: var(--pui-font-size-sm, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.pui-page-template__hero h1 {
    margin: 0;
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    font-size: var(--pui-pt-h1);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.pui-page-template--landing .pui-page-template__hero h1 {
    font-size: var(--pui-pt-h1-landing);
    letter-spacing: -0.025em;
}

@media (prefers-reduced-motion: no-preference) {
    .pui-page-template__hero > * {
        animation: pui-pt-rise 560ms var(--pui-easing-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1)) both;
    }

    .pui-page-template__hero > :nth-child(2) { animation-delay: 60ms; }
    .pui-page-template__hero > :nth-child(3) { animation-delay: 120ms; }
    .pui-page-template__hero > :nth-child(4) { animation-delay: 180ms; }
}

@keyframes pui-pt-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pui-page-template__summary {
    max-width: var(--pui-measure-content, 720px);
    margin: 0;
    color: var(--pui-color-text-secondary, var(--ls-text-secondary));
    font-size: var(--pui-pt-summary);
    line-height: 1.6;
    text-wrap: pretty;
}

.pui-page-template__verdict {
    max-width: var(--pui-measure-content, 760px);
    margin: 0;
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    font-size: var(--pui-font-size-xl, 22px);
    font-weight: 700;
    line-height: 1.35;
}

.pui-page-template--landing .pui-page-template__summary {
    line-height: 1.6;
}

.pui-page-template__source-summary {
    max-width: var(--pui-measure-content, 760px);
    margin: 0;
    color: var(--pui-color-text-muted, var(--ls-text-muted));
    font-size: var(--pui-font-size-sm, 14px);
    line-height: 1.55;
}

.pui-page-template__breadcrumbs ol,
.pui-page-template__tags,
.pui-page-template__link-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pui-space-2) var(--pui-space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.pui-page-template__breadcrumbs {
    color: var(--pui-color-text-muted, var(--ls-text-muted));
    font-size: var(--pui-font-size-sm, 0.875rem);
    font-weight: 500;
}

.pui-page-template__breadcrumbs a {
    color: var(--pui-color-text-muted, var(--ls-text-muted));
    text-decoration: none;
    border-radius: var(--pui-radius-sm, 0.375rem);
    transition: color var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__breadcrumbs a:hover {
    color: var(--pui-color-link, var(--ls-accent));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pui-page-template__breadcrumbs a:focus-visible {
    outline: var(--pui-focus-width, 3px) solid var(--pui-focus-color, var(--ls-accent));
    outline-offset: 3px;
}

.pui-page-template__breadcrumbs [aria-current="page"] {
    color: var(--pui-color-text-secondary, var(--ls-text-secondary));
    font-weight: 600;
}

.pui-page-template__breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: var(--pui-space-3);
    color: var(--pui-color-border-hover, var(--ls-border));
}

.pui-page-template__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pui-space-3) var(--pui-space-5);
    margin: 0;
    color: var(--pui-color-text-muted, var(--ls-text-muted));
    font-size: var(--pui-font-size-sm, 0.875rem);
}

.pui-page-template__meta > div {
    display: inline-flex;
    align-items: baseline;
    gap: var(--pui-space-2);
}

.pui-page-template__meta dt {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: var(--pui-color-text-muted, var(--ls-text-muted));
}

.pui-page-template__meta dd {
    margin: 0;
    font-weight: 600;
    color: var(--pui-color-text-secondary, var(--ls-text-secondary));
}

/* Pill chips: tags, filters, back link */
.pui-page-template__tags a,
.pui-page-template__tags span,
.pui-page-template__filter,
.pui-page-template__back-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--pui-size-control-sm, 2rem);
    padding: 0 var(--pui-space-4);
    border: 1px solid var(--pui-color-border-default, var(--ls-border));
    border-radius: var(--pui-radius-full, 999px);
    background: var(--pui-color-surface-muted, var(--ls-bg-section));
    color: var(--pui-color-link, var(--ls-accent));
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--pui-motion-fast, 160ms ease),
                background var(--pui-motion-fast, 160ms ease),
                color var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__tags a:hover,
.pui-page-template__filter:hover,
.pui-page-template__back-link:hover {
    border-color: var(--pui-color-border-strong, var(--ls-accent));
    background: var(--pui-color-surface-hover, var(--ls-hover-bg));
    text-decoration: none;
}

.pui-page-template__tags a:focus-visible,
.pui-page-template__filter:focus-visible,
.pui-page-template__back-link:focus-visible,
.pui-page-template__actions a:focus-visible {
    outline: var(--pui-focus-width, 3px) solid var(--pui-focus-color, var(--ls-accent));
    outline-offset: 2px;
}

/* Hero call-to-action buttons */
.pui-page-template__actions a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: var(--pui-touch-target-min, 2.75rem);
    padding: 0 var(--pui-space-6);
    border: 1px solid var(--pui-color-border-default, var(--ls-border));
    border-radius: var(--pui-radius-full, 999px);
    background: var(--pui-color-surface-card, var(--ls-bg-page));
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--pui-shadow-subtle, none);
    transition: transform var(--pui-motion-fast, 160ms ease),
                box-shadow var(--pui-motion-fast, 160ms ease),
                border-color var(--pui-motion-fast, 160ms ease),
                background var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__actions a:hover {
    transform: translateY(-1px);
    border-color: var(--pui-color-border-hover, var(--ls-border));
    box-shadow: var(--pui-shadow-soft, none);
    text-decoration: none;
}

.pui-page-template__actions a:active {
    transform: translateY(0);
    box-shadow: none;
}

/* First action reads as the primary CTA */
.pui-page-template__actions a:first-child {
    border-color: transparent;
    background: var(--pui-color-action-primary, var(--ls-accent));
    color: var(--pui-color-text-on-action, #ffffff);
}

.pui-page-template__actions a:first-child:hover {
    background: var(--pui-color-action-primary-hover, var(--pui-color-link-hover, var(--ls-accent)));
    border-color: transparent;
}

.pui-page-template__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pui-space-7);
}

.pui-page-template__sidepanel {
    display: grid;
    align-content: start;
    gap: var(--pui-space-5);
}

/* After-content row (e.g. the community discussion): below the body, aligned to its column. */
.pui-page-template__after { min-width: 0; }

.pui-page-template__side-section,
.pui-page-template__section,
.pui-page-template__empty {
    display: grid;
    gap: var(--pui-space-4);
    padding: clamp(var(--pui-space-6), 1vw + 1rem, var(--pui-space-7));
    border: 1px solid var(--pui-color-border-default, var(--ls-border));
    border-radius: var(--pui-radius-lg, 1rem);
    background: var(--pui-color-surface-card, var(--ls-bg-page));
    box-shadow: var(--pui-shadow-soft, none);
}

.pui-page-template--blog-listing .pui-page-template__section,
.pui-page-template--blog-listing .pui-page-template__side-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pui-page-template__section h2,
.pui-page-template__side-section h2,
.pui-page-template__empty h2 {
    margin: 0;
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    font-size: var(--pui-pt-section-h2);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

.pui-page-template__side-section h2 {
    font-size: var(--pui-font-size-lg, 1.125rem);
}

.pui-page-template__card-grid,
.pui-page-template__card-list {
    display: grid;
    gap: var(--pui-space-5);
}

.pui-page-template__card-grid {
    grid-auto-rows: 1fr;
}

.pui-page-template__card {
    display: grid;
    gap: var(--pui-space-3);
    align-content: start;
    min-width: 0;
    padding: var(--pui-space-6);
    border: 1px solid var(--pui-color-border-default, var(--ls-border));
    border-radius: var(--pui-radius-lg, 1rem);
    background: var(--pui-color-surface-card, var(--ls-bg-page));
    box-shadow: var(--pui-shadow-subtle, none);
    transition: transform var(--pui-motion-fast, 160ms ease),
                box-shadow var(--pui-motion-fast, 160ms ease),
                border-color var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__card:hover,
.pui-page-template__card:focus-within {
    transform: translateY(-3px);
    border-color: var(--pui-color-border-hover, var(--ls-border));
    box-shadow: var(--pui-shadow-raised, var(--pui-shadow-soft, none));
}

.pui-page-template__card h3,
.pui-page-template__card p {
    margin: 0;
}

.pui-page-template__card h3 {
    font-size: var(--pui-pt-card-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.pui-page-template__card h3 a {
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    text-decoration: none;
    transition: color var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.pui-page-template__card:hover h3 a,
.pui-page-template__card h3 a:focus-visible {
    color: var(--pui-color-link, var(--ls-accent));
}

.pui-page-template__card h3 a:focus-visible {
    outline: var(--pui-focus-width, 3px) solid var(--pui-focus-color, var(--ls-accent));
    outline-offset: 3px;
    border-radius: var(--pui-radius-sm, 0.375rem);
}

.pui-page-template__card p {
    color: var(--pui-color-text-secondary, var(--ls-text-secondary));
    line-height: 1.6;
}

.pui-page-template__card--compact {
    padding: var(--pui-space-5);
}

/* Cards inside a side panel (related tools / related posts) must not stack a
   second surface on top of the panel. Render them as flat, divided list rows
   so there is a single background. */
.pui-page-template__card-list .pui-page-template__card {
    padding: var(--pui-space-4) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pui-page-template__card-list .pui-page-template__card + .pui-page-template__card {
    border-top: 1px solid var(--pui-color-border-default, var(--ls-border));
}

.pui-page-template__card-list .pui-page-template__card:hover,
.pui-page-template__card-list .pui-page-template__card:focus-within {
    transform: none;
    box-shadow: none;
}

/* The title link stretches over the whole card for a premium click target. */
.pui-page-template__card {
    position: relative;
}

.pui-page-template__card .pui-page-template__meta,
.pui-page-template__card .pui-page-template__tags {
    position: relative;
    z-index: 1;
}

.pui-page-template__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pui-space-3);
}

.pui-page-template__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--pui-space-4);
    max-width: 100%;
    margin-top: var(--pui-space-2);
    overflow-x: auto;
}

.pui-page-template__filter--active {
    border-color: var(--pui-color-border-strong, var(--ls-accent));
    background: var(--pui-color-surface-selected, var(--ls-selected-bg));
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    font-weight: 600;
}

.pui-page-template__search {
    display: grid;
    gap: var(--pui-space-3);
    max-width: var(--pui-measure-content, 760px);
}

.pui-page-template__search > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--pui-space-3);
}

.pui-page-template__search input,
.pui-page-template__search button {
    min-height: var(--pui-size-control-md, 40px);
    border: 1px solid var(--pui-color-border-default, var(--ls-border));
    border-radius: var(--pui-radius-md, 8px);
    font: inherit;
}

.pui-page-template__search input {
    min-width: 0;
    padding: 0 var(--pui-space-4);
    background: var(--pui-color-surface-control, var(--ls-bg-page));
    color: var(--pui-color-text-primary, var(--ls-text-primary));
    transition: border-color var(--pui-motion-fast, 160ms ease),
                box-shadow var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__search input:focus-visible {
    outline: none;
    border-color: var(--pui-color-border-focus, var(--ls-accent));
    box-shadow: var(--pui-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.2));
}

.pui-page-template__search button {
    padding: 0 var(--pui-space-6);
    background: var(--pui-color-action-primary, var(--ls-accent));
    color: var(--pui-color-text-on-action, #FFFFFF);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--pui-motion-fast, 160ms ease),
                transform var(--pui-motion-fast, 160ms ease);
}

.pui-page-template__search button:hover {
    background: var(--pui-color-action-primary-hover, var(--pui-color-link-hover, var(--ls-accent)));
}

.pui-page-template__search button:active {
    transform: translateY(1px);
}

.pui-page-template__search button:focus-visible {
    outline: var(--pui-focus-width, 3px) solid var(--pui-focus-color, var(--ls-accent));
    outline-offset: 2px;
}

@media (min-width: 960px) {
    .pui-page-template__layout {
        gap: var(--pui-space-8);
    }

    .pui-page-template__layout--article,
    .pui-page-template__layout--blog-post,
    .pui-page-template__layout--blog-listing,
    .pui-page-template__layout--tool,
    .pui-page-template__layout--decision-report.pui-page-template__layout--with-sidepanel {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        align-items: start;
    }

    /* Keep the after-content row under the body column, not spanning beneath the sidebar. */
    .pui-page-template__layout--article .pui-page-template__after,
    .pui-page-template__layout--blog-post .pui-page-template__after {
        grid-column: 1;
    }

    .pui-page-template__card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pui-page-template__search > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Article Header ---- */
.article-header {
    border-bottom: 1px solid var(--ls-border);
    padding-bottom: var(--ls-space-5);
    margin-bottom: var(--ls-space-1);
}

.article-header__title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 var(--ls-space-4);
    line-height: 1.25;
    color: var(--ls-text-primary);
}

.article-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-2) var(--ls-space-4);
    font-size: 14px;
    color: var(--ls-text-muted);
    line-height: 1.5;
}

.article-header__corrections { color: var(--ls-accent); }

/* ---- Content Audio ---- */
.pui-audio-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ls-space-4);
    margin-top: var(--ls-space-4);
    color: var(--ls-text-secondary);
}

.pui-audio-control__button,
.pui-audio-control__select {
    min-height: var(--pui-size-control-md, 40px);
    border: 1px solid var(--ls-border);
    border-radius: var(--pui-radius-md, 8px);
    background: var(--pui-color-surface-control, var(--ls-bg-section));
    color: var(--ls-text-primary);
    font: inherit;
}

.pui-audio-control__button {
    padding: 0 var(--ls-space-6);
    cursor: pointer;
}

.pui-audio-control__button:hover {
    border-color: var(--ls-accent);
    background: var(--ls-hover-bg);
}

.pui-audio-control__button--icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pui-size-control-md, 40px);
    padding: 0;
    aspect-ratio: 1;
}

.pui-audio-control__icon {
    width: 20px;
    height: 20px;
}

.pui-audio-control__button:disabled {
    cursor: not-allowed;
    opacity: var(--pui-opacity-disabled, 0.55);
}

.pui-audio-control__ready {
    display: grid;
    gap: var(--ls-space-3);
    width: min(100%, var(--pui-measure-content, 720px));
}

.pui-audio-control__player {
    width: 100%;
}

.pui-audio-control__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ls-space-4);
}

.pui-audio-control__speed {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-3);
    color: var(--ls-text-muted);
}

.pui-audio-control__select {
    padding: 0 var(--ls-space-4);
}

.pui-audio-control__status,
.pui-audio-control__preparing {
    color: var(--ls-text-muted);
    font-size: var(--pui-font-size-sm, 14px);
}

.definition-audio-control {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 var(--ls-space-4);
}

.definition-audio-control--inline {
    margin: 0;
    flex: 0 0 auto;
}

.definition-audio-control > .pui-audio-control {
    margin-top: 0;
}

.definition-detail-section + .definition-detail-section {
    margin-top: var(--ls-space-7);
}

.definition-detail-section__header {
    margin-bottom: var(--ls-space-4);
}

.definition-detail-section__body > :first-child {
    margin-top: 0;
}

.definition-detail-section__body > :last-child {
    margin-bottom: 0;
}

.pui-section-shell > .pui-audio-control {
    margin-bottom: var(--ls-space-4);
}

/* ---- Common article section ---- */
.article-section {
    margin: 0;
    padding: var(--ls-space-7) 0;
    scroll-margin-top: 92px;
}

.article-section + .article-section {
    border-top: 1px solid var(--ls-border);
}

.article-section--empty {
    padding-bottom: 0;
}

.article-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-5);
    min-height: var(--pui-content-section-header-min-height);
    margin: 0 0 var(--ls-space-5);
}

.article-section__header > .article-section__heading {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.article-section--empty > .article-section__header {
    margin-bottom: 0;
}

.article-section__header > .pui-audio-control--icon {
    flex: 0 0 auto;
    margin-top: 0;
}

.article-section__heading {
    --pui-article-section-heading-size: 28px;
    --pui-article-section-heading-line-height: 1.25;
    font-size: var(--pui-article-section-heading-size);
    font-weight: 600;
    line-height: var(--pui-article-section-heading-line-height);
    margin: 0 0 var(--ls-space-5);
    color: var(--ls-text-primary);
}

.article-subsection {
    margin-top: var(--ls-space-6);
    scroll-margin-top: 92px;
}

.article-subsection__heading {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 var(--ls-space-3);
    color: var(--ls-text-primary);
}

.article-section p,
.article-subsection p,
.worked-examples__intro {
    margin: 0 0 var(--ls-space-4);
}

.article-section ul,
.article-section ol {
    margin: 0 0 var(--ls-space-4);
    padding-left: 1.25rem;
}

/* ---- Definitions ---- */
.definitions-group {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-4);
    margin-top: var(--ls-space-5);
}

.def-card {
    border: 1px solid var(--ls-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--pui-color-card-background, var(--ls-bg-page));
    scroll-margin-top: 92px;
}

.def-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    min-height: var(--pui-content-accordion-trigger-min-height);
    padding: var(--ls-space-3) var(--ls-space-4);
    background: var(--ls-bg-section);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.def-card__term    { font-size: 18px; line-height: 1.3; font-weight: 600; margin: 0; color: var(--ls-text-primary); }
/* The term is an <h3> used as a trigger label, so it must not inherit the prose
   heading margins from `.pui-content-body-panel__body h3`. Without this reset the
   trigger row grows past the shared accordion-trigger height. The extra class
   raises specificity above the body-panel prose rule. */
.def-card__header .def-card__term { margin: 0; }
.def-card__chevron { font-size: 12px; color: var(--ls-text-muted); }

.def-card__body {
    padding: var(--ls-space-4) var(--ls-space-4) var(--ls-space-5);
    border-top: 1px solid var(--ls-border);
}

.def-card__actions { display: flex; justify-content: flex-end; margin-top: var(--ls-space-3); }

/* ---- Walkthrough ---- */
.walkthrough-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-3);
    margin-top: var(--ls-space-5);
}

.timeline-step {
    border: 1px solid var(--ls-border);
    border-radius: 10px;
    background: var(--pui-color-card-background, var(--ls-bg-page));
    scroll-margin-top: 92px;
}

.timeline-step__header {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    min-height: var(--pui-content-accordion-trigger-min-height);
    padding: var(--ls-space-4);
    background: var(--ls-bg-section);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.timeline-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ls-accent);
    color: var(--pui-color-text-on-accent);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.timeline-step__title  { flex: 1; font-weight: 600; color: var(--ls-text-primary); }
.timeline-step__chevron { font-size: 12px; color: var(--ls-text-muted); }

.timeline-step__body {
    padding: var(--ls-space-4) var(--ls-space-4) var(--ls-space-5);
    border-top: 1px solid var(--ls-border);
}

.walkthrough-controls {
    display: flex;
    gap: var(--ls-space-2);
    margin-top: var(--ls-space-4);
}

/* ---- Decision Loop ---- */
.decision-loop {
    margin-top: var(--ls-space-5);
    padding: 28px;
    border-radius: 12px;
    background: var(--ls-bg-component);
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    counter-reset: decision-step;
}

.dl-panel {
    border: 1px solid var(--ls-border);
    border-radius: 10px;
    background: var(--pui-color-card-background, var(--ls-bg-page));
    scroll-margin-top: 92px;
}

.dl-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    min-height: var(--pui-content-accordion-trigger-min-height);
    padding: var(--ls-space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.dl-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--ls-text-primary);
}

.dl-panel__title::before {
    counter-increment: decision-step;
    content: counter(decision-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ls-accent);
    color: var(--pui-color-text-on-accent);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.dl-panel__chevron { font-size: 12px; color: var(--ls-text-muted); }

.dl-panel__body {
    padding: var(--ls-space-4) var(--ls-space-4) var(--ls-space-5);
    border-top: 1px solid var(--ls-border);
}

.dl-actions { display: flex; justify-content: flex-start; margin-top: var(--ls-space-4); }

/* ---- Worked Examples ---- */
.worked-examples-group { display: flex; flex-direction: column; gap: var(--ls-space-4); margin-top: var(--ls-space-5); }

.example-card {
    border: 1px solid var(--ls-border);
    border-radius: 10px;
    background: var(--ls-bg-section);
    padding: var(--ls-space-5);
    margin: 0;
    scroll-margin-top: 92px;
}

.example-card__heading {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 var(--ls-space-3);
    color: var(--ls-text-primary);
}

.example-card__assumptions { margin-top: var(--ls-space-4); }
.example-card__assumptions-list { margin: var(--ls-space-3) 0 0 1rem; }

/* Collapsible example intro — the heading toggles the facts paragraph and the calculation
   walk-through, leaving the cost table as the always-visible presentation. */
.example-card__heading-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.example-card__heading-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--ls-text-muted);
}

.example-card__heading-toggle[aria-expanded="true"] .example-card__heading-chevron { transform: rotate(180deg); }

.example-card__intro { display: none; }
.example-card__intro--open { display: block; }
.example-card__intro > p:first-child { margin-top: 0; }

/* Structured worked-example cost table (editor-manifest 1.1.0 items) */
.example-table-wrap { margin-top: var(--ls-space-4); overflow-x: auto; }

.example-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.example-table caption {
    /* Accessible name for the table; visually hidden — the card heading already titles it. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.example-table th,
.example-table td {
    padding: var(--ls-space-4) var(--ls-space-4);
    text-align: left;
    vertical-align: top;
}

.example-table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ls-text-muted);
    border-bottom: 1px solid var(--ls-border);
}

/* Alternate row surfaces carry the row separation; no inner rules needed, which keeps the
   table calm while making long rows easy to track across. The stripe derives from the border
   token so it reads clearly on both the muted card and a white page, in any host theme. */
.example-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ls-border) 42%, transparent); }

.example-table__label { font-weight: 600; color: var(--ls-text-primary); }
.example-table tbody td { color: var(--ls-text-secondary); }

.example-table__cell--right {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ls-text-primary);
    font-variant-numeric: tabular-nums; /* digits align down the money column */
}

.example-table tfoot .example-table__total th,
.example-table tfoot .example-table__total td {
    border-top: 1px solid var(--ls-border);
    padding-top: var(--ls-space-4);
    font-weight: 700;
    color: var(--ls-text-primary);
}

.example-card__callout {
    margin-top: var(--ls-space-4);
    padding: var(--ls-space-4) var(--ls-space-5);
    border-radius: 10px;
    background: var(--ls-bg-page);
    border: 1px solid var(--ls-border);
}

.example-card__callout-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ls-text-muted);
    margin-bottom: var(--ls-space-2);
}

.example-card__callout-text { margin: 0; color: var(--ls-text-secondary); }

/* ---- Checklists ---- */
.checklists-group {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-6);
    margin-top: var(--ls-space-5);
}

.checklist-card {
    border: 1px solid var(--ls-border);
    border-radius: 8px;
    padding: 20px;
    background: var(--ls-bg-section);
    scroll-margin-top: 92px;
    overflow: hidden;
}

.checklist-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ls-space-3);
    margin-bottom: var(--ls-space-4);
}

.checklist-card__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--ls-text-primary);
}

.checklist-card__groups {
    display: flex;
    flex-direction: column;
}

.checklist-group + .checklist-group {
    margin-top: var(--ls-space-3);
}

.checklist-group__title {
    margin: var(--ls-space-3) 0 var(--ls-space-2);
    font-size: 16px;
    font-weight: 600;
    color: var(--ls-text-primary);
}

.checklist-group:first-child .checklist-group__title {
    margin-top: 0;
}

.checklist-card__items {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--ls-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-2);
}

.checklist-group__items {
    margin-bottom: 0;
}

.checklist-card__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}

/* The box is centred on the FIRST LINE of its label, not on the top of the line box.
   It was a fixed `margin-top: .2rem`, which is a guess that is only right at one type size:
   measured against the first line's centre it sat 2.8px high at 16px/1.6 and 7.1px high at
   20px/1.7, and every article that sets its own type size drifted further.

   (1lh - 1em) / 2 is the same sum done by the browser at whatever size the text is: half the
   difference between the line box and the box itself. Sizing the checkbox in `em` is what makes
   the arithmetic exact, and gives a slightly larger target than the 13px default.

   The plain margin above it is the fallback: an engine without `lh` drops the calc and keeps a
   reasonable fixed offset rather than losing the rule entirely. */
.checklist-card__item input[type="checkbox"] {
    /* WITHOUT THIS THE SUM BELOW IS MEANINGLESS. A form control does not inherit font metrics: this
       checkbox reported font-size 13.33px and line-height `normal` regardless of the article's
       type, so `1em` and `1lh` measured the checkbox rather than the text beside it and the offset
       came out at 1.08px instead of 4.8px. */
    font: inherit;
    width: 1em;
    height: 1em;
    margin: 0;
    /* Fallback first: an engine without `lh` keeps a reasonable fixed offset rather than losing
       the rule. */
    margin-block-start: 0.25rem;
    margin-block-start: calc((1lh - 1em) / 2);
    accent-color: var(--ls-accent);
}

.checklist-card__item label {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.checklist-card__item-label {
    grid-column: 1 / -1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Guardrail: prevent inherited writing-mode / text-orientation from ancestors */
.article-section--checklists,
.article-section--checklists * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.checklist-card__footer {
    margin-top: var(--ls-space-4);
    padding-top: var(--ls-space-3);
    border-top: 1px solid var(--ls-border);
    font-size: 14px;
    color: var(--ls-text-muted);
}

/* ---- Glossary ---- */
.glossary__search {
    width: 100%;
    padding: var(--ls-space-2) var(--ls-space-3);
    border: 1px solid var(--ls-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ls-text-primary);
    background: var(--ls-bg-page);
    margin-bottom: var(--ls-space-5);
}

.glossary-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-5);
}

.glossary-entry { scroll-margin-top: 92px; }

.glossary-entry__term {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 var(--ls-space-2);
    color: var(--ls-text-primary);
}

.glossary-entry__def {
    margin: 0;
    display: flex;
    gap: var(--ls-space-3);
    align-items: flex-start;
    flex-wrap: wrap;
}

.glossary__empty {
    color: var(--ls-text-muted);
    margin: 0;
}

/* ---- Verified Callouts ---- */
.verified-callouts-group {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-6);
    margin-top: 0;
}

.verified-callout {
    border: 1px solid var(--ls-border);
    border-left: 4px solid var(--ls-accent);
    border-radius: 8px;
    padding: 20px;
    background: var(--ls-bg-component);
    scroll-margin-top: 92px;
}

.verified-callout__header {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    margin-bottom: var(--ls-space-2);
}

.verified-callout__badge {
    font-size: 14px;
    font-weight: 600;
    color: var(--ls-accent);
    background: var(--ls-accent-soft);
    padding: var(--ls-space-1) var(--ls-space-2);
    border-radius: 999px;
}

.verified-callout__date { font-size: 14px; color: var(--ls-text-muted); }

.verified-callout__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 var(--ls-space-2);
    color: var(--ls-text-primary);
}

.verified-callout__text { margin: 0 0 var(--ls-space-3); }

.verified-callout__footer {
    display: flex;
    gap: var(--ls-space-3);
    align-items: center;
    font-size: 14px;
}

.verified-callout__sources-link { color: var(--ls-accent); }

/* ---- Internal Links ---- */
.internal-links__group-heading {
    font-size: 14px;
    font-weight: 600;
    color: var(--ls-text-secondary);
    margin: 0 0 var(--ls-space-2);
}

.internal-links__list {
    list-style: none;
    margin: 0 0 var(--ls-space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-1);
}

.internal-links__link { color: var(--ls-accent); font-size: 16px; }

/* ---- Section Nav Rail ---- */
.section-nav-rail { display: flex; flex-direction: column; gap: var(--ls-space-3); }

.section-nav-rail__heading {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ls-text-primary);
}

.section-nav-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-1);
}

.section-nav-rail__link {
    background: none;
    border: none;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--ls-space-1) var(--ls-space-2);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ls-toc-text);
}

.section-nav-rail__link:hover {
    background: var(--ls-bg-component);
    color: var(--ls-text-primary);
}

.section-nav-rail__item--active .section-nav-rail__link,
.section-nav-rail__link[aria-current="location"] {
    color: var(--ls-accent);
    font-weight: 600;
}

.section-nav-rail__item--level-2 .section-nav-rail__link { padding-left: var(--ls-space-5); }

.section-nav-rail__item--backtop {
    margin-top: var(--ls-space-3);
    padding-top: var(--ls-space-3);
    border-top: 1px solid var(--ls-border);
}

.section-nav-rail__link--backtop {
    font-size: 13px;
    color: var(--ls-text-muted);
}

.section-nav-rail--scrollable .section-nav-rail__list {
    overflow-y: auto;
    max-height: 80vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.section-nav-rail--scrollable .section-nav-rail__list::-webkit-scrollbar {
    display: none;
}

/* ---- Sources accordion (blog content type) ---- */
.sources-accordion {
    border: 1px solid var(--ls-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: var(--ls-space-5);
}

.article-section--empty + .sources-accordion {
    margin-top: var(--ls-space-5);
}

.sources-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    padding: var(--ls-space-4);
    background: var(--ls-bg-section);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: var(--ls-text-primary);
}

.sources-accordion__chevron {
    transition: transform 0.2s ease;
    color: var(--ls-text-muted);
}

.sources-accordion--open .sources-accordion__chevron {
    transform: rotate(180deg);
}

.sources-accordion__panel {
    display: none;
    border-top: 1px solid var(--ls-border);
}

.sources-accordion--open .sources-accordion__panel {
    display: block;
}

.sources-accordion__inner {
    padding: var(--ls-space-4);
}

.sources-accordion__scroll {
    max-height: 400px;
    overflow-y: auto;
}

/* ---- Small utility buttons ---- */
.btn-icon,
.btn-ghost {
    border: 1px solid var(--ls-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ls-text-secondary);
    background: var(--ls-bg-page);
}

.btn-icon {
    font-size: 14px;
    padding: var(--ls-space-1) var(--ls-space-3);
}

.btn-ghost {
    padding: var(--ls-space-2) var(--ls-space-4);
    font-size: 14px;
}

.btn-icon:hover,
.btn-ghost:hover {
    background: var(--ls-bg-component);
}

.btn-sm {
    font-size: 14px;
    padding: var(--ls-space-1) var(--ls-space-3);
}

/* ---- Focus-visible styles for interactive controls ---- */
.timeline-step__header:focus-visible,
.dl-panel__header:focus-visible,
.section-nav-rail__link:focus-visible,
.walkthrough-controls .btn-ghost:focus-visible,
.dl-actions .btn-ghost:focus-visible,
.example-card .btn-ghost:focus-visible,
.btn-icon:focus-visible,
.btn-ghost:focus-visible {
    border-radius: 6px;
}

/* ---- Generic section ---- */
.article-section--generic ul { padding-left: 1.25rem; }

/* ---- Breakpoints for section content ---- */
@media (max-width: 768px) {
    .content-preview .article-header__title { font-size: 32px; }
    .content-preview .article-section__heading { --pui-article-section-heading-size: 26px; }
    .content-preview .article-subsection__heading,
    .content-preview .example-card__heading,
    .content-preview .checklist-card__title,
    .content-preview .verified-callout__title,
    .content-preview .glossary-entry__term,
    .content-preview .def-card__term { font-size: 22px; }

    .decision-loop { padding: var(--ls-space-5); }
}

/* ── Community comment composer (host slot contract) ─────────────────────────
   The shared ContentCommunitySection owns the section chrome (pui-community__*).
   Hosts own the comment-form slot markup, and every host slot uses this same
   content-community__* vocabulary — one owner here, no per-host copies. */
.content-community__composer {
    display: flex;
    flex-direction: column;
    gap: var(--pui-space-3);
}

.content-community__label {
    font-size: var(--pui-font-size-body-sm);
    font-weight: var(--pui-font-weight-medium);
    color: var(--pui-color-text-secondary);
}

.content-community__textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: var(--pui-space-4);
    border: 1px solid var(--pui-color-border-default);
    border-radius: var(--pui-radius-sm);
    background: var(--pui-color-surface-control);
    color: var(--pui-color-text-primary);
    font-family: inherit;
    font-size: var(--pui-font-size-body-md);
    line-height: var(--pui-line-height-body);
}

.content-community__textarea:focus-visible {
    outline: var(--pui-focus-width) solid var(--pui-focus-outline-color);
    outline-offset: 2px;
    border-color: var(--pui-color-border-focus);
}

.content-community__textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.content-community__composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pui-space-4);
    flex-wrap: wrap;
}

.content-community__count {
    font-size: var(--pui-font-size-caption);
    color: var(--pui-color-text-muted);
    font-variant-numeric: tabular-nums;
}

.content-community__submit {
    min-height: 44px;
    padding: var(--pui-space-3) var(--pui-space-6);
    border: 1px solid transparent;
    border-radius: var(--pui-radius-sm);
    background: var(--pui-color-action-primary);
    color: var(--pui-color-text-on-accent);
    font-size: var(--pui-font-size-body-sm);
    font-weight: var(--pui-font-weight-medium);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.content-community__submit:hover:not(:disabled) {
    background: var(--pui-color-action-primary-hover);
}

.content-community__submit:focus-visible {
    outline: var(--pui-focus-width) solid var(--pui-focus-outline-color);
    outline-offset: 2px;
}

.content-community__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.content-community__confirm {
    margin: 0;
    font-size: var(--pui-font-size-body-sm);
    line-height: var(--pui-line-height-body);
    color: var(--pui-color-text-secondary);
}

.content-community__error {
    margin: 0;
    font-size: var(--pui-font-size-caption);
    color: var(--pui-color-danger-strong);
}

@media (prefers-reduced-motion: reduce) {
    .content-community__submit {
        transition: none;
    }
}

.content-community__input {
    width: 100%;
    max-width: 22rem;
    box-sizing: border-box;
    padding: var(--pui-space-3) var(--pui-space-4);
    border: 1px solid var(--pui-color-border-default);
    border-radius: var(--pui-radius-sm);
    background: var(--pui-color-surface-control);
    color: var(--pui-color-text-primary);
    font-family: inherit;
    font-size: var(--pui-font-size-body-md);
    min-height: 44px;
}

.content-community__input:focus-visible {
    outline: var(--pui-focus-width) solid var(--pui-focus-outline-color);
    outline-offset: 2px;
    border-color: var(--pui-color-border-focus);
}

.content-community__required {
    font-weight: var(--pui-font-weight-regular);
    color: var(--pui-color-text-muted);
}

/*
    Honeypot. Removed from the layout and from the accessibility tree rather than hidden with
    display:none, which some form fillers detect and skip. Real users can neither see nor tab to it.
*/
.content-community__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Contribution type picker ───────────────────────────────────────────── */

.content-community__kinds {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pui-space-4);
    align-items: center;
}

.content-community__kinds legend {
    padding: 0;
    margin-bottom: var(--pui-space-3);
}

.content-community__kind-option {
    display: inline-flex;
    align-items: center;
    gap: var(--pui-space-3);
    min-height: 44px;
    font-size: var(--pui-font-size-body-sm);
    color: var(--pui-color-text-secondary);
    cursor: pointer;
}

.content-community__kind-option input:focus-visible {
    outline: var(--pui-focus-width) solid var(--pui-focus-outline-color);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    /* Stack the choices on narrow screens rather than letting them wrap unevenly. */
    .content-community__kinds {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pui-space-2);
    }
}