/*
 * blog-components.css — styles for the six interactive blog block types.
 *
 * CANONICAL SOURCE: BPG-Platform, src/BPG.Pages.Api/Html/Assets/blog-components.css.
 * BetterRoofingPro and BetterGather each carry a verbatim copy at wwwroot/css/blog-components.css
 * (ADR-027 decision point 6: self-hosted per product). Edit the platform copy first, then
 * re-copy. @version 1.1.0
 *
 * Every class HtmlBlockRenderer.Interactive.cs emits, and every class blog-components.ts
 * adds, is defined here — the platform test suite asserts the renderer half of that, and
 * BetterGather's check-css-contracts.cjs rule A asserts the script half. Colours come from
 * the article stylesheet's custom properties where a product defines them, with a neutral
 * fallback, so a theme change in one product does not need a copy edit here.
 *
 * Touch targets are 44px minimum (#359: "44px touch targets, no hover-only affordance").
 *
 * ── Specificity: every <p>/list/table/heading rule is scoped ─────────────────
 * The component markup lands inside the product's <main class="article-body">, whose
 * stylesheet carries `.article-body p`, `.article-body ul, .article-body ol`,
 * `.article-body li`, `.article-body h2` and `.article-body h3` — all 0,1,1. A bare
 * single-class rule here is 0,1,0 and LOSES: measured in Chromium against BetterGather's
 * blog-article.css, `.bp-stat-value` rendered at 16.32px in body grey instead of 36px,
 * `.bp-source` lost its citation size and colour, and `.bp-chart-legend` kept a 24px list
 * indent. So any rule whose subject is one of those elements is written under its component
 * root (`.bp-stat .bp-stat-value`), which is 0,2,0 and wins. Adding a rule for a `<p>`,
 * list, list item, table or heading without the root prefix reintroduces the bug silently.
 *
 * `.bp-placeholder` is the one element that cannot be scoped this way: the renderer emits
 * it INSTEAD of a component root, so it has no `[data-bp]` ancestor.
 *
 * ── Control font size ────────────────────────────────────────────────────────
 * Every focusable control is 1rem (16px). iOS Safari zooms the page when a control under
 * 16px takes focus, and the containers here are 0.95rem, so `font: inherit` computed to
 * 15.2px and the explicit 0.875rem ones to 14px. tests/BPG.Web.Tests'
 * check-css-mobile-rules.ts small-control-font rule is the static guard.
 *
 * ── Changelog ────────────────────────────────────────────────────────────────
 * 1.1.0  Controls raised to 1rem; every <p>/list/table/heading rule scoped under its
 *        component root; `--bp-focus` fallback darkened from #93c5fd (1.82:1 on white) to
 *        #1d4ed8 (6.6:1); chart-point focus moved to :focus-visible with a white stroke
 *        instead of `outline: none`; compare switch is a radiogroup (`aria-checked`, not
 *        `aria-pressed`); `.is-invalid` treatment for an out-of-range calculator input;
 *        `@media print` block that unfolds the tabs and the chart's data table.
 * 1.0.0  First release (#359, ADR-027 Amendment 2).
 */

/* ─── shared ─────────────────────────────────────────────────────────── */

.bp-calc, .bp-compare, .bp-tabs, .bp-stepper, .bp-stat, .bp-chart {
    margin: 1.75rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
/* A <p>. Scoped on [data-bp] rather than on one root: every component can carry a source
   line, and [data-bp] is the attribute all six roots are found by. */
[data-bp] .bp-source {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--bp-muted, #6b7280);
}
.bp-source-link { color: var(--bp-accent, #2563eb); text-decoration: underline; }
.bp-source-text { color: inherit; }
/* Not scopable: emitted in place of a component root, so there is no [data-bp] parent. */
.bp-placeholder {
    padding: 0.75rem 1rem;
    border: 1px dashed var(--bp-border, #d1d5db);
    border-radius: 6px;
    color: var(--bp-muted, #6b7280);
    font-size: 0.85rem;
    text-align: center;
}
.bp-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ─── calculator ─────────────────────────────────────────────────────── */

.bp-calc {
    padding: 1.25rem;
    border: 1px solid var(--bp-border, #e5e7eb);
    border-radius: 10px;
    background: var(--bp-panel, #f9fafb);
}
.bp-calc .bp-calc-title { margin: 0 0 0.75rem; font-weight: 700; font-size: 1.05rem; }
.bp-calc .bp-calc-inputs { width: 100%; border-collapse: collapse; }
.bp-calc-inputs th, .bp-calc-inputs td {
    padding: 0.5rem 0.5rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--bp-border, #e5e7eb);
}
.bp-calc-inputs thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bp-muted, #6b7280); }
.bp-calc-label { font-weight: 600; }
.bp-calc-basis { font-size: 0.8rem; color: var(--bp-muted, #6b7280); }
.bp-calc-row.is-assumption .bp-calc-value { color: var(--bp-muted, #4b5563); }
.bp-calc-field { display: inline-flex; align-items: center; gap: 0.4rem; }
.bp-calc-input {
    width: 7rem;
    min-height: 44px;
    padding: 0 0.6rem;
    font: inherit;
    /* After `font: inherit`, which would otherwise pull 0.95rem down from .bp-calc. */
    font-size: 1rem;
    border: 1px solid var(--bp-border-strong, #9ca3af);
    border-radius: 6px;
    background: var(--bp-input-bg, #fff);
    color: inherit;
}
.bp-calc-input:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: 1px; }
/* Out of range, or a value the browser could not parse: the script says so instead of
   clamping. Colour is not the only signal — the result line carries the message, and the
   input is aria-invalid. */
.bp-calc-input.is-invalid {
    border-color: var(--bp-danger, #b91c1c);
    border-width: 2px;
    background: var(--bp-danger-bg, #fef2f2);
}
.bp-calc-unit { font-size: 0.85rem; color: var(--bp-muted, #6b7280); }
.bp-calc .bp-calc-result {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    margin: 1rem 0 0;
    font-size: 1.05rem;
}
.bp-calc-result-label { font-weight: 600; }
.bp-calc-result-value { font-weight: 800; font-size: 1.4rem; color: var(--bp-accent, #2563eb); }
.bp-calc.is-not-computable .bp-calc-result-value { font-size: 1rem; font-weight: 600; color: var(--bp-muted, #6b7280); }
.bp-calc .bp-calc-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--bp-muted, #6b7280); }

/* ─── compare ────────────────────────────────────────────────────────── */

.bp-compare .bp-compare-title { margin: 0 0 0.75rem; font-weight: 700; font-size: 1.05rem; }
.bp-compare-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* both axes: a lone overflow-x computes overflow-y to auto (tests/BPG.Web.Tests lint) */
.bp-compare .bp-compare-table { width: 100%; border-collapse: collapse; min-width: 28rem; }
.bp-compare-table th, .bp-compare-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bp-border, #e5e7eb);
}
.bp-compare-subject { font-weight: 700; background: var(--bp-panel, #f9fafb); }
.bp-compare-corner { background: var(--bp-panel, #f9fafb); }
.bp-compare-label { font-weight: 600; width: 30%; }
.bp-compare-cell { vertical-align: top; }
.bp-compare .bp-compare-note { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--bp-muted, #6b7280); }
.bp-compare-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.bp-compare-switch-btn {
    min-height: 44px;
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--bp-border-strong, #9ca3af);
    border-radius: 999px;
    background: var(--bp-input-bg, #fff);
    color: inherit;
    cursor: pointer;
}
/* role="radio", so the selected column is aria-checked rather than aria-pressed. */
.bp-compare-switch-btn[aria-checked="true"] { background: var(--bp-accent, #2563eb); border-color: var(--bp-accent, #2563eb); color: #fff; }
.bp-compare-switch-btn:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: 2px; }
/* When one column is chosen, the switch itself is the only place the others live. */
.bp-compare.is-enhanced.bp-compare-show-1 .bp-compare-table { min-width: 0; }
.bp-compare.bp-compare-show-1 [data-bp-col]:not([data-bp-col="1"]),
.bp-compare.bp-compare-show-2 [data-bp-col]:not([data-bp-col="2"]),
.bp-compare.bp-compare-show-3 [data-bp-col]:not([data-bp-col="3"]),
.bp-compare.bp-compare-show-4 [data-bp-col]:not([data-bp-col="4"]) { display: none; }
.bp-compare.is-enhanced.bp-compare-show-2 .bp-compare-table,
.bp-compare.is-enhanced.bp-compare-show-3 .bp-compare-table,
.bp-compare.is-enhanced.bp-compare-show-4 .bp-compare-table { min-width: 0; }

/* ─── tabs ───────────────────────────────────────────────────────────── */

.bp-tab-panel { margin: 0 0 1.25rem; }
/* A heading (h2…h6, per HtmlRenderOptions.BaseHeadingLevel), so it needs the root. */
.bp-tabs .bp-tab-heading { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 700; }
.bp-tab-body { margin: 0; }
.bp-tabs .bp-tab-text { margin: 0; }
.bp-tab-list { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 2px solid var(--bp-border, #e5e7eb); }
.bp-tab {
    min-height: 44px;
    padding: 0 1rem;
    margin-bottom: -2px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bp-muted, #6b7280);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.bp-tab.is-active { color: var(--bp-accent, #2563eb); border-bottom-color: var(--bp-accent, #2563eb); }
.bp-tab:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: -3px; border-radius: 4px; }
.bp-tabs.is-enhanced .bp-tab-panel { margin: 0; }
.bp-tabs.is-enhanced .bp-tab-heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bp-tabs.is-enhanced .bp-tab-panel:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: 4px; border-radius: 4px; }

/* ─── stepper ────────────────────────────────────────────────────────── */

.bp-stepper {
    padding: 1.25rem;
    border: 1px solid var(--bp-border, #e5e7eb);
    border-radius: 10px;
}
.bp-stepper .bp-stepper-title { margin: 0 0 0.75rem; font-weight: 700; font-size: 1.05rem; }
.bp-stepper .bp-stepper-steps { margin: 0; padding-left: 1.5rem; }
/* An <li>: .article-body li otherwise adds its own bottom margin and 1.02rem. */
.bp-stepper .bp-step { min-height: 44px; margin-bottom: 0; padding: 0.4rem 0; font-size: inherit; }
.bp-step-label { font-weight: 600; }
.bp-step-detail { display: block; font-size: 0.875rem; color: var(--bp-muted, #6b7280); }
.bp-stepper.is-enhanced .bp-stepper-steps { list-style: none; padding-left: 0; }
.bp-step-check { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; cursor: pointer; }
.bp-step-box { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; flex: 0 0 auto; font-size: 1rem; accent-color: var(--bp-accent, #2563eb); }
.bp-step-box:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: 2px; }
.bp-step.is-done .bp-step-label { text-decoration: line-through; color: var(--bp-muted, #6b7280); }
.bp-stepper-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--bp-border, #e5e7eb); }
.bp-stepper .bp-stepper-progress { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--bp-muted, #6b7280); }
.bp-stepper.is-complete .bp-stepper-progress { color: var(--bp-success, #059669); }
.bp-stepper-reset {
    min-height: 44px;
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;
    border: 1px solid var(--bp-border-strong, #9ca3af);
    border-radius: 6px;
    background: var(--bp-input-bg, #fff);
    color: inherit;
    cursor: pointer;
}
.bp-stepper-reset:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: 2px; }

/* ─── stat ───────────────────────────────────────────────────────────── */

.bp-stat {
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--bp-accent, #2563eb);
    border-radius: 6px;
    background: var(--bp-panel, #f9fafb);
}
.bp-stat .bp-stat-value { margin: 0; font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: inherit; }
.bp-stat .bp-stat-label { margin: 0.35rem 0 0; font-weight: 600; font-size: inherit; }
.bp-stat .bp-stat-detail { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--bp-muted, #6b7280); }

/* ─── chart ──────────────────────────────────────────────────────────── */

.bp-chart { margin-left: 0; margin-right: 0; }
.bp-chart-bar, .bp-chart-line { display: block; }
.bp-chart-axis text { fill: var(--bp-muted, #6b7280); }
.bp-chart-title { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.05rem; }
.bp-chart-svg { display: block; width: 100%; height: auto; max-height: 24rem; overflow: visible; }
.bp-chart-grid line { stroke: var(--bp-border, #e5e7eb); stroke-width: 1; }
.bp-chart-tick { font-size: 12px; fill: var(--bp-muted, #6b7280); }
.bp-chart-series-1 rect, .bp-chart-series-1 circle, .bp-chart-series-1 .bp-chart-swatch { fill: var(--bp-series-1, #2563eb); background: var(--bp-series-1, #2563eb); }
.bp-chart-series-2 rect, .bp-chart-series-2 circle, .bp-chart-series-2 .bp-chart-swatch { fill: var(--bp-series-2, #059669); background: var(--bp-series-2, #059669); }
.bp-chart-series-3 rect, .bp-chart-series-3 circle, .bp-chart-series-3 .bp-chart-swatch { fill: var(--bp-series-3, #d97706); background: var(--bp-series-3, #d97706); }
.bp-chart-series-4 rect, .bp-chart-series-4 circle, .bp-chart-series-4 .bp-chart-swatch { fill: var(--bp-series-4, #7c3aed); background: var(--bp-series-4, #7c3aed); }
.bp-chart-series-1 polyline { stroke: var(--bp-series-1, #2563eb); }
.bp-chart-series-2 polyline { stroke: var(--bp-series-2, #059669); }
.bp-chart-series-3 polyline { stroke: var(--bp-series-3, #d97706); }
.bp-chart-series-4 polyline { stroke: var(--bp-series-4, #7c3aed); }
.bp-chart-series polyline { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.bp-chart-point { cursor: default; }
/* Hover only. A focus affordance must not dim the fill: at 0.8 over white, #d97706 drops
   to 2.5:1 against a white stroke, which is the ring's own contrast gone. */
.bp-chart-point:hover { opacity: 0.8; }
/* A white stroke, not `outline: none`. Measured against the four series fills — #2563eb
   5.9:1, #7c3aed 6.0:1, #059669 3.8:1, #d97706 3.4:1 — so it clears 3:1 on every one, and
   the browser's own focus ring is left in place rather than suppressed. */
.bp-chart-point:focus-visible { stroke: #fff; stroke-width: 3; }
/* A <ul> and its <li>: .article-body ul/li otherwise restore a 24px indent and 1.02rem. */
.bp-chart .bp-chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; }
.bp-chart .bp-chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0; font-size: inherit; }
.bp-chart-swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; }
.bp-chart.has-tip .bp-chart-tip { visibility: visible; }
.bp-chart .bp-chart-tip { visibility: hidden; min-height: 1.5rem; margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--bp-accent, #2563eb); }
.bp-chart-toggle {
    min-height: 44px;
    margin: 0.5rem 0;
    padding: 0 1rem;
    font: inherit;
    font-size: 1rem;
    border: 1px solid var(--bp-border-strong, #9ca3af);
    border-radius: 6px;
    background: var(--bp-input-bg, #fff);
    color: inherit;
    cursor: pointer;
}
.bp-chart-toggle:focus-visible { outline: 3px solid var(--bp-focus, #1d4ed8); outline-offset: 2px; }
.bp-chart .bp-chart-data { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.875rem; }
.bp-chart-data th, .bp-chart-data td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--bp-border, #e5e7eb); }
.bp-chart-data td { text-align: right; font-variant-numeric: tabular-nums; }
.bp-chart-data thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bp-muted, #6b7280); }
/* Collapsed = visually hidden, still in the accessibility tree. Off-screen rather than the
   1px clip pattern because a <table> cannot shrink below its content, so the clip box would
   still paint; off-screen keeps the table's semantics intact for a screen reader. */
.bp-chart { position: relative; }
.bp-chart.is-collapsed .bp-chart-data { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .bp-chart-point { transition: opacity 120ms ease; }
}

/* ─── print ──────────────────────────────────────────────────────────── */
/*
 * On paper there is no interaction: a tab strip is three quarters of the content hidden, a
 * collapsed data table is the chart's figures gone, and the switch/toggle/reset buttons are
 * furniture nobody can press. Everything the script folded away comes back, and the
 * controls it added go.
 */
@media print {
    .bp-tab-list, .bp-compare-switch, .bp-chart-toggle, .bp-stepper-reset { display: none; }
    /* The UA sheet's `[hidden] { display: none }` is what hides an inactive panel. */
    .bp-tabs.is-enhanced .bp-tab-panel[hidden] { display: block !important; }
    .bp-tabs.is-enhanced .bp-tab-panel { margin: 0 0 1.25rem; }
    .bp-tabs.is-enhanced .bp-tab-heading {
        position: static;
        width: auto; height: auto;
        margin: 0 0 0.5rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    .bp-chart.is-collapsed .bp-chart-data {
        position: static;
        left: auto; top: auto;
        width: 100%; height: auto;
        overflow: visible;
    }
    /* Focus/hover only, and it duplicates the <title> the data table already prints. */
    .bp-chart .bp-chart-tip { display: none; }
}