/* ============================================================
   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;
    --pui-focus-ring: 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 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);
}

.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;
}

.checklist-card__item input[type="checkbox"] {
    margin-top: .2rem;
    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);
    }
}