/*!
 * Bhumi Calculator Articles — design tokens + public styles.
 * Source of truth: docs/bhumi-design-system.md, docs/phase-0-1-decision-freeze.md §5/§22,
 * docs/phase-0-1-layout-spec.md. Builds on Bootstrap 5.3 (self-hosted).
 * Rules: no random colours, radii or shadows — tokens only (UX rules 1–6).
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Brand (SOURCE-DERIVED) */
  --bc-saffron: #FF9933;
  --bc-green: #138808;
  --bc-green-strong: #0B5E08;
  --bc-navy: #000080;
  --bc-indigo: #1a1a4d;
  --bc-white: #FFFFFF;
  /* Accessible companions (D-02) */
  --bc-saffron-text: #A65300;
  --bc-navy-on-dark: #9FA8DA;
  --bc-green-on-dark: #66BB6A;
  /* Source tints .color-1…6 */
  --bc-tint-1: #FFF5E6; --bc-tint-2: #E6F3FF; --bc-tint-3: #E6FFE6;
  --bc-tint-4: #FFE6E6; --bc-tint-5: #F0E6FF; --bc-tint-6: #FFFAE6;
  /* Surfaces (light) */
  --bc-page-bg: #fafafa;
  --bc-surface: #ffffff;
  --bc-card: #ffffff;
  --bc-subtle: #f5f5f5;
  --bc-text: #212529;
  --bc-text-muted: #555555;
  --bc-title: #2c3e50;
  --bc-heading: var(--bc-navy);
  --bc-link: var(--bc-saffron-text);
  --bc-border: rgba(0, 0, 0, .08);
  --bc-border-strong: #dddddd;
  --bc-focus: var(--bc-navy);
  --bc-hero-bg: linear-gradient(135deg, #e3f2fd, #bbdefb);
  --bc-faq-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --bc-code-bg: #f5f5f5;
  /* Radius scale 2/6/8/12/16/20/pill */
  --bc-radius-xs: 2px; --bc-radius-sm: 6px; --bc-radius-md: 8px; --bc-radius: 12px;
  --bc-radius-lg: 16px; --bc-radius-xl: 20px; --bc-radius-pill: 50px;
  /* Shadows (SOURCE-DERIVED) */
  --bc-shadow: 0 6px 15px rgba(0, 0, 0, .1);
  --bc-shadow-hover: 0 12px 25px rgba(0, 0, 0, .15);
  --bc-shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);
  --bc-glow: 0 4px 15px rgba(255, 153, 51, .2);
  --bc-ring: 0 0 0 .25rem rgba(255, 153, 51, .25);
  /* Typography — font token (D-03 pending: value as in source) */
  --bc-font: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bc-header-h: 64px;

  /* Bootstrap mapping: primary = brand green (D-01) */
  --bs-body-font-family: var(--bc-font);
  --bs-body-bg: var(--bc-page-bg);
  --bs-body-color: var(--bc-text);
  --bs-link-color: var(--bc-link);
  --bs-link-color-rgb: 166, 83, 0;
  --bs-link-hover-color: #7a3d00;
  --bs-link-hover-color-rgb: 122, 61, 0;
  --bs-primary: #138808;
  --bs-primary-rgb: 19, 136, 8;
  --bs-border-color: var(--bc-border-strong);
  --bs-secondary-color: var(--bc-text-muted);
  --bs-emphasis-color: #000;
}

/* Dark theme: data-bs-theme on <html> (D-15) — SOURCE-DERIVED surfaces */
[data-bs-theme="dark"] {
  --bc-page-bg: #121212;
  --bc-surface: #1e1e1e;
  --bc-card: #2d2d2d;
  --bc-subtle: #1e1e1e;
  --bc-text: #f5f5f5;
  --bc-text-muted: #b0b0b0;
  --bc-title: #f5f5f5;
  --bc-heading: var(--bc-navy-on-dark);
  --bc-link: var(--bc-green-on-dark);
  --bc-border: #333333;
  --bc-border-strong: #444444;
  --bc-focus: var(--bc-navy-on-dark);
  --bc-hero-bg: #1e1e1e;
  --bc-faq-bg: #1e1e1e;
  --bc-code-bg: #1e1e1e;
  --bc-tint-1: rgba(255, 153, 51, .10); --bc-tint-2: rgba(33, 150, 243, .12); --bc-tint-3: rgba(102, 187, 106, .12);
  --bc-tint-4: rgba(255, 87, 34, .12); --bc-tint-5: rgba(156, 39, 176, .14); --bc-tint-6: rgba(255, 215, 0, .10);
  --bc-shadow: 0 6px 15px rgba(0, 0, 0, .4);
  --bc-shadow-hover: 0 12px 25px rgba(0, 0, 0, .5);
  --bs-body-bg: var(--bc-page-bg);
  --bs-body-color: var(--bc-text);
  --bs-link-color: var(--bc-link);
  --bs-link-color-rgb: 102, 187, 106;
  --bs-link-hover-color: #8fd18f;
  --bs-link-hover-color-rgb: 143, 209, 143;
  --bs-border-color: var(--bc-border-strong);
  --bs-secondary-color: var(--bc-text-muted);
  --bs-emphasis-color: #fff;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
html { scroll-padding-top: calc(var(--bc-header-h) + 16px); }
body { font-family: var(--bc-font); background: var(--bc-page-bg); color: var(--bc-text); overflow-wrap: break-word; }
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
h1, h2, h3, .h1, .h2, .h3 { color: var(--bc-heading); font-weight: 700; }
h4, h5, h6 { color: var(--bc-title); font-weight: 700; }
a { text-underline-offset: .15em; }

/* Visible focus: saffron glow + 2px solid outline (decision-freeze §23) */
:focus-visible { outline: 2px solid var(--bc-focus); outline-offset: 2px; box-shadow: var(--bc-ring); }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .page-link:focus-visible {
  outline: 2px solid var(--bc-focus); outline-offset: 2px; box-shadow: var(--bc-ring);
}
.form-control:focus, .form-select:focus { border-color: var(--bc-saffron); box-shadow: var(--bc-glow); }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--bc-navy); color: #fff; padding: .75rem 1rem; border-radius: var(--bc-radius-md); text-decoration: none; }
.skip-link:focus { top: 1rem; color: #fff; }

/* Mobile gutters 16px (D-05, layout-spec §2) */
@media (max-width: 575.98px) {
  .container, .container-fluid { --bs-gutter-x: 2rem; }
}

/* ---------------------------------------------------------------- buttons */
.btn { --bs-btn-font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--bc-green); --bs-btn-border-color: var(--bc-green); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--bc-green-strong); --bs-btn-hover-border-color: var(--bc-green-strong); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--bc-green-strong); --bs-btn-active-border-color: var(--bc-green-strong); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--bc-green); --bs-btn-disabled-border-color: var(--bc-green);
  --bs-btn-focus-shadow-rgb: 19, 136, 8;
}
.btn-outline-primary {
  /* Text uses the strong green: #138808 on #fafafa is 4.41:1 (< AA); #0B5E08 is 8:1. */
  --bs-btn-color: var(--bc-green-strong); --bs-btn-border-color: var(--bc-green);
  --bs-btn-hover-bg: var(--bc-green); --bs-btn-hover-border-color: var(--bc-green); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--bc-green-strong); --bs-btn-active-border-color: var(--bc-green-strong); --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 19, 136, 8;
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bc-green-on-dark); --bs-btn-border-color: var(--bc-green-on-dark); }
.btn-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* ---------------------------------------------------------------- navbar */
.bc-navbar { background: var(--bc-surface); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); min-height: var(--bc-header-h); }
.bc-wordmark { font-weight: 700; font-size: 1.5rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; line-height: 1.2; }
.bc-wordmark .bc-w-icon { color: var(--bc-saffron); }
.bc-wordmark .bc-w-bhumi { color: var(--bc-navy); }
.bc-wordmark .bc-w-calc { color: var(--bc-green); }
.bc-wordmark .bc-w-com { color: var(--bc-saffron-text); }
[data-bs-theme="dark"] .bc-wordmark .bc-w-bhumi { color: var(--bc-navy-on-dark); }
[data-bs-theme="dark"] .bc-wordmark .bc-w-calc { color: var(--bc-green-on-dark); }
[data-bs-theme="dark"] .bc-wordmark .bc-w-com { color: var(--bc-saffron); }
/* Small phones: the header must fit 320px (LS §10): smaller wordmark, ".com" hidden <400px, search moves into the menu. */
@media (max-width: 575.98px) { .bc-wordmark { font-size: 1.2rem; gap: .4rem; } }
@media (max-width: 399.98px) {
  .bc-wordmark { font-size: 1.05rem; gap: .3rem; }
  .bc-wordmark .bc-w-com, .bc-wordmark-label { display: none; }
  .bc-search-icon { display: none !important; }
}
.bc-wordmark-label { font-size: .875rem; font-weight: 600; color: var(--bc-text-muted); border-left: 1px solid var(--bc-border-strong); padding-left: .5rem; }
.bc-navbar .nav-link { color: var(--bc-text); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.bc-navbar .nav-link:hover, .bc-navbar .nav-link[aria-current="page"] { color: var(--bc-link); }
.bc-navbar .dropdown-menu { max-height: 400px; overflow-y: auto; border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); }
.bc-navbar .navbar-toggler { border: none; width: 44px; height: 44px; padding: 0; font-size: 1.5rem; color: var(--bc-text); }
@media (max-width: 991.98px) {
  .bc-navbar .navbar-collapse { padding-bottom: 1rem; }
  .bc-mobile-cats { columns: 2; column-gap: 1rem; }
  .bc-mobile-cats a { display: block; padding: .5rem .625rem; border-radius: var(--bc-radius-sm); text-decoration: none; color: var(--bc-text); min-height: 44px; break-inside: avoid; }
  .bc-mobile-cats a:hover { background: var(--bc-border); }
}
.bc-search-inline { max-width: 600px; }

/* --------------------------------------------------------------- panels */
.bc-hero { background: var(--bc-hero-bg); border-radius: var(--bc-radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 576px) { .bc-hero { padding: 2rem; } }
@media (min-width: 768px) { .bc-hero { padding: 3rem; } }
[data-bs-theme="dark"] .bc-hero { border-left: 4px solid var(--bc-saffron); }
.bc-hero .lead { color: var(--bc-text-muted); max-width: 700px; }
.bc-panel { background: var(--bc-surface); border-radius: var(--bc-radius-lg); padding: 1.5rem; box-shadow: var(--bc-shadow); border: 1px solid var(--bc-border); }
@media (min-width: 576px) { .bc-panel { padding: 2rem; } }

/* Heading underline bar motif (source .faq-title::after / .region-heading::after) */
.bc-bar { position: relative; padding-bottom: .75rem; margin-bottom: 1.5rem; }
.bc-bar::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; border-radius: var(--bc-radius-xs); background: linear-gradient(90deg, var(--bc-saffron), var(--bc-green)); }
.text-center .bc-bar::after, .bc-bar.text-center::after { left: 50%; transform: translateX(-50%); }

/* Icon tile (source .state-icon + .icon-1…6) */
.bc-icon-tile { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bc-radius); color: #fff; font-size: 1.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.bc-grad-1 { background: linear-gradient(135deg, #FF9933, #FF6600); color: #1a1a1a; }
.bc-grad-2 { background: linear-gradient(135deg, #138808, #0B5E08); }
.bc-grad-3 { background: linear-gradient(135deg, #000080, #1A237E); }
.bc-grad-4 { background: linear-gradient(135deg, #FF5722, #E64A19); color: #1a1a1a; }
.bc-grad-5 { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }
.bc-grad-6 { background: linear-gradient(135deg, #2196F3, #1976D2); color: #0b1a2b; }

/* ----------------------------------------------------------- badges/pills */
.bc-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .375rem 1rem; min-height: 32px; background: var(--bc-surface); border: 2px solid #e0e0e0; border-radius: var(--bc-radius-pill); color: var(--bc-text); font-weight: 500; font-size: .875rem; text-decoration: none; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
a.bc-pill:hover { border-color: var(--bc-saffron); box-shadow: var(--bc-glow); color: var(--bc-text); }
[data-bs-theme="dark"] .bc-pill { border-color: var(--bc-border-strong); }
.bc-chip { display: inline-block; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: var(--bc-radius-md); background: var(--bc-surface); color: var(--bc-text); border: 1px solid var(--bc-border); box-shadow: var(--bc-shadow-sm); text-decoration: none; }
a.bc-chip:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, .1); color: var(--bc-text); }
.bc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------------------ cards */
/* Article cards — ONE uniform structure for every grid (Latest, Related, sections, listings):
   fixed slots (category row, 2-line title, 3-line excerpt, one-line meta, CTA) + full-height
   cards in each row, so every card in a row has identical dimensions without large blank areas. */
.bc-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bc-card); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); border: 1px solid var(--bc-border); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.bc-card:hover { transform: translateY(-4px); box-shadow: var(--bc-shadow-hover); }
.bc-card--featured::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 2; background: linear-gradient(90deg, var(--bc-saffron), var(--bc-white), var(--bc-green)); }
.bc-card__media { aspect-ratio: 16 / 9; flex: none; background: var(--bc-subtle); overflow: hidden; }
.bc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-card__media--placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--bc-saffron); }
.bc-card__body { --bc-card-lh: 1.35; padding: 1.25rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.bc-card__cat-row { min-height: 32px; display: flex; align-items: center; min-width: 0; }
.bc-card__cat { position: relative; z-index: 2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 1.25; }
.bc-card__title { font-size: 1.125rem; font-weight: 700; color: var(--bc-title); margin: 0; position: relative; padding-bottom: .5rem; line-height: var(--bc-card-lh); min-height: calc(2 * var(--bc-card-lh) * 1em + .5rem); }
.bc-card__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--bc-saffron); transition: width .3s ease; }
.bc-card:hover .bc-card__title::after { width: 80px; }
.bc-card__title a { color: inherit; text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.bc-card__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }   /* stretched link: one tab stop per card */
.bc-card__excerpt { color: var(--bc-text-muted); font-size: .9375rem; line-height: 1.5; margin: 0; min-height: calc(3 * 1.5em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.bc-card__meta { font-size: .8125rem; color: var(--bc-text-muted); margin-top: auto; padding-top: .25rem; display: flex; flex-wrap: nowrap; gap: .75rem; white-space: nowrap; overflow: hidden; min-width: 0; }
.bc-card__meta > span { flex: none; }
.bc-card__meta > .bc-card__author { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bc-card__cta { font-size: .875rem; font-weight: 600; color: var(--bc-green-strong); display: inline-flex; align-items: center; gap: .35rem; }
[data-bs-theme="dark"] .bc-card__cta { color: var(--bc-green-on-dark); }
.bc-card:hover .bc-card__cta .bi { transform: translateX(3px); transition: transform .2s ease; }
/* Featured hero (homepage): larger type, 3-line title and excerpt. */
.bc-card--lg .bc-card__title { font-size: 1.5rem; min-height: 0; }
.bc-card--lg .bc-card__title a { -webkit-line-clamp: 3; line-clamp: 3; }
.bc-card--lg .bc-card__excerpt { font-size: 1rem; min-height: 0; }
@media (min-width: 992px) { .bc-card--lg .bc-card__body { padding: 1.5rem 2rem; } .bc-card--lg .bc-card__title { font-size: 1.75rem; } }
/* Homepage side panel: Popular | Recent. */
.bc-side-panel { height: 100%; background: var(--bc-card); border: 1px solid var(--bc-border); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); padding: 1rem 1.25rem; display: flex; flex-direction: column; }
.bc-side-panel__title { font-size: 1.125rem; margin: .25rem 0 .5rem; }
.bc-side-panel__more { margin-top: auto; padding-top: .75rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: .35rem; }
.bc-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--bc-border); margin-bottom: .5rem; }
.bc-tab { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: .5rem .75rem; min-height: 44px; font-weight: 600; color: var(--bc-text-muted); }
.bc-tab[aria-selected="true"] { color: var(--bc-heading); border-bottom-color: var(--bc-saffron); }
.bc-tab:focus-visible { outline: 3px solid var(--bc-focus, #0d6efd); outline-offset: 2px; }
.bc-rank { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.bc-rank__item { display: flex; gap: .75rem; align-items: center; padding: .625rem 0; border-bottom: 1px solid var(--bc-border); position: relative; counter-increment: rank; }
.bc-rank__item:last-child { border-bottom: 0; }
.bc-rank--numbered .bc-rank__item::before { content: counter(rank); flex: none; width: 1.5rem; font-weight: 700; font-size: 1.25rem; color: var(--bc-saffron-text); text-align: center; }
[data-bs-theme="dark"] .bc-rank--numbered .bc-rank__item::before { color: var(--bc-saffron); }
.bc-rank__thumb { flex: none; width: 88px; aspect-ratio: 4 / 3; border-radius: var(--bc-radius-md); overflow: hidden; background: var(--bc-subtle); display: flex; align-items: center; justify-content: center; color: var(--bc-saffron); }
.bc-rank__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-rank__body { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.bc-rank__title { font-weight: 600; color: var(--bc-title); text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bc-rank__title::before { content: ""; position: absolute; inset: 0; }
.bc-rank__title:hover { text-decoration: underline; }
.bc-rank__meta { font-size: .8125rem; color: var(--bc-text-muted); }
@media (max-width: 399.98px) { .bc-rank__thumb { width: 64px; } }
.bc-list-card { display: flex; gap: 1rem; padding: 1rem; position: relative; background: var(--bc-card); border-radius: var(--bc-radius); border: 1px solid var(--bc-border); box-shadow: var(--bc-shadow-sm); }
.bc-list-card__thumb { flex: 0 0 96px; aspect-ratio: 1; border-radius: var(--bc-radius-md); overflow: hidden; background: var(--bc-subtle); }
.bc-list-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .bc-list-card__thumb { flex-basis: 120px; aspect-ratio: 4/3; } }
@media (min-width: 992px) { .bc-list-card__thumb { flex-basis: 160px; } }
@media (max-width: 399.98px) { .bc-list-card__thumb { display: none; } }
.bc-list-card h2, .bc-list-card h3 { font-size: 1.125rem; margin: 0 0 .25rem; }
.bc-list-card h2 a, .bc-list-card h3 a { color: var(--bc-title); text-decoration: none; }
.bc-list-card h2 a::before, .bc-list-card h3 a::before { content: ""; position: absolute; inset: 0; }
.bc-list-card:hover { box-shadow: var(--bc-shadow); }
.bc-popular { counter-reset: pop; list-style: none; padding: 0; margin: 0; }
.bc-popular li { counter-increment: pop; display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--bc-border); }
.bc-popular li::before { content: counter(pop); font-weight: 700; font-size: 1.5rem; color: var(--bc-saffron-text); min-width: 1.75rem; }
[data-bs-theme="dark"] .bc-popular li::before { color: var(--bc-saffron); }

/* -------------------------------------------------------------- breadcrumb */
.bc-breadcrumb { --bs-breadcrumb-divider: '›'; font-size: .875rem; margin-bottom: 1rem; }
.bc-breadcrumb .breadcrumb-item a { color: var(--bc-link); }
.bc-breadcrumb .breadcrumb-item.active { color: var(--bc-text-muted); }

/* ------------------------------------------------------------- pagination */
.bc-pagination .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--bc-text); border-color: var(--bc-border-strong); }
.bc-pagination .page-item.active .page-link { background: var(--bc-green); border-color: var(--bc-green); color: #fff; }

/* -------------------------------------------------- article layout (LS §3–8) */
.bc-article-layout { display: block; }
.bc-article-main { min-width: 0; }
.bc-rail-left, .bc-rail-right { display: none; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .bc-article-main { max-width: 760px; margin-inline: auto; }          /* T+: centred 760 */
}
@media (min-width: 1200px) {                                           /* D: 792 + 24 + 300 = 1116 */
  .bc-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; align-items: stretch; }
  .bc-rail-right { display: block; min-width: 0; }
}
@media (min-width: 1400px) {                                           /* D+: 240 + 32 + 692 + 32 + 300 = 1296 */
  .bc-article-layout { grid-template-columns: 240px minmax(0, 1fr) 300px; column-gap: 32px; }
  .bc-rail-left { display: block; min-width: 0; }
  .bc-toc-inline--rail-ok { display: none; }
}
.bc-sticky { position: sticky; top: calc(var(--bc-header-h) + 16px); }
.bc-rail-left .bc-sticky { max-height: calc(100vh - var(--bc-header-h) - 32px); overflow-y: auto; }

/* Prose (D-04): 17px <768, 18px ≥768; ≤70ch */
.bc-prose { font-size: 1.0625rem; line-height: 1.7; max-width: min(100%, 70ch); }
@media (min-width: 768px) { .bc-prose { font-size: 1.125rem; } }
.bc-prose > * + * { margin-top: 0; }
.bc-prose p, .bc-prose ul, .bc-prose ol, .bc-prose dl { margin-bottom: 1.25rem; }
.bc-prose li { margin-bottom: .5rem; }
.bc-prose li::marker { color: var(--bc-saffron); }
.bc-prose h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; position: relative; padding-bottom: .75rem; }
.bc-prose h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; border-radius: var(--bc-radius-xs); background: var(--bc-saffron); }
@media (min-width: 768px) { .bc-prose h2 { font-size: 1.75rem; } }
.bc-prose h3 { font-size: 1.375rem; margin: 2rem 0 .75rem; }
.bc-prose h4 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.bc-prose h5, .bc-prose h6 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.bc-prose h6 { text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; }
.bc-prose a { color: var(--bc-link); text-decoration: underline; text-decoration-thickness: 1px; }
.bc-prose a:hover { text-decoration-thickness: 2px; }
.bc-prose a.btn { text-decoration: none; color: var(--bs-btn-color); }
.bc-prose a.btn:hover { color: var(--bs-btn-hover-color); }
.bc-prose a[href^="http"]:not(.btn)::after { content: "\F1C5"; font-family: "bootstrap-icons"; font-size: .7em; margin-left: .2em; vertical-align: super; text-decoration: none; display: inline-block; }
.bc-prose a[href^="http"][data-track="internal_article_click"]::after { content: none; }
.bc-prose img { border-radius: var(--bc-radius); height: auto; }
.bc-prose figure { margin: 1.5rem 0; }
.bc-prose figcaption { font-size: .875rem; color: var(--bc-text-muted); text-align: center; margin-top: .5rem; }
.bc-prose blockquote { border-left: 4px solid var(--bc-saffron); padding: .25rem 0 .25rem 1.25rem; margin: 1.5rem 0; font-style: italic; color: var(--bc-text-muted); }
.bc-prose code { font-family: var(--bc-mono); background: var(--bc-code-bg); padding: .1em .35em; border-radius: var(--bc-radius-sm); font-size: .9em; color: inherit; }
.bc-prose pre { background: var(--bc-code-bg); padding: 1rem; border-radius: var(--bc-radius); overflow-x: auto; border: 1px solid var(--bc-border); }
.bc-prose pre code { background: none; padding: 0; }
.bc-prose hr { margin: 2rem 0; border-color: var(--bc-border-strong); }
.bc-prose mark { background: rgba(255, 153, 51, .25); color: inherit; padding: 0 .15em; }
.bc-prose .bc-wide, .bc-prose .bc-table, .bc-prose figure, .bc-prose .bc-embed, .bc-prose .bc-callout, .bc-prose .bc-block { max-width: none; }

/* Tables: only the wrapper scrolls (LS §8.3) */
.bc-table { border-radius: var(--bc-radius); border: 1px solid var(--bc-border); margin: 1.5rem 0; background: var(--bc-surface); }
.bc-table .table { margin: 0; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(0, 0, 0, .03); font-size: .9375rem; }
.bc-table thead th, .bc-table tr:first-child th { color: var(--bc-heading); background: #f8f9fa; white-space: nowrap; }
[data-bs-theme="dark"] .bc-table .table { --bs-table-striped-bg: rgba(255, 255, 255, .04); --bs-table-color: var(--bc-text); --bs-table-border-color: #333; }
[data-bs-theme="dark"] .bc-table thead th, [data-bs-theme="dark"] .bc-table tr:first-child th { background: #1e1e1e; }
.bc-table td, .bc-table th { padding: .625rem .875rem; }

/* Callouts (source tints) */
.bc-callout { border-radius: var(--bc-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; border-left: 4px solid; }
.bc-callout > :last-child { margin-bottom: 0; }
.bc-callout__title { font-weight: 700; margin-bottom: .25rem; display: flex; align-items: center; gap: .5rem; }
.bc-callout--info { background: var(--bc-tint-2); border-color: #1976D2; }
.bc-callout--tip { background: var(--bc-tint-3); border-color: var(--bc-green); }
.bc-callout--warning { background: var(--bc-tint-1); border-color: var(--bc-saffron); }
.bc-callout--danger { background: var(--bc-tint-4); border-color: #c62828; }
.bc-callout--info .bc-callout__title::before { content: "\F431"; font-family: "bootstrap-icons"; }
.bc-callout--tip .bc-callout__title::before { content: "\F46E"; font-family: "bootstrap-icons"; }
.bc-callout--warning .bc-callout__title::before { content: "\F33A"; font-family: "bootstrap-icons"; }
.bc-callout--danger .bc-callout__title::before { content: "\F623"; font-family: "bootstrap-icons"; }

/* Accordion (<details>) styled like the source FAQ accordion */
.bc-accordion, .bc-faq details { border: 1px solid var(--bc-border-strong); border-radius: var(--bc-radius-sm); background: var(--bc-surface); margin: 0 0 .5rem; }
.bc-accordion > summary, .bc-faq summary { cursor: pointer; padding: .875rem 1.25rem; font-weight: 600; color: var(--bc-heading); list-style: none; display: flex; justify-content: space-between; gap: 1rem; min-height: 44px; align-items: center; }
.bc-accordion > summary::-webkit-details-marker, .bc-faq summary::-webkit-details-marker { display: none; }
.bc-accordion > summary::after, .bc-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; transition: transform .2s ease; flex: 0 0 auto; }
.bc-accordion[open] > summary, .bc-faq details[open] summary { background: rgba(19, 136, 8, .1); }
.bc-accordion[open] > summary::after, .bc-faq details[open] summary::after { transform: rotate(180deg); }
.bc-accordion > :not(summary), .bc-faq details > div { padding: .75rem 1.25rem 1rem; }
.bc-faq { background: var(--bc-faq-bg); border-radius: var(--bc-radius-xl); padding: 1.5rem; margin: 3rem 0; }
@media (min-width: 768px) { .bc-faq { padding: 3rem 2rem; } }
[data-bs-theme="dark"] .bc-faq { border-left: 4px solid var(--bc-green-on-dark); }

/* Embeds */
.bc-embed { margin: 1.5rem 0; border-radius: var(--bc-radius); overflow: hidden; background: #000; }
.bc-embed iframe, .bc-embed video { border: 0; width: 100%; height: 100%; display: block; }
.bc-embed--fixed { background: transparent; }
.bc-embed figcaption { background: var(--bc-surface); }

/* Article header */
.bc-article-title { font-size: calc(1.375rem + 1.5vw); line-height: 1.2; margin: .75rem 0 1rem; }
@media (min-width: 1200px) { .bc-article-title { font-size: 2.5rem; } }
.bc-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; color: var(--bc-text-muted); font-size: .875rem; margin-bottom: 1.5rem; }
.bc-meta-row a { color: var(--bc-text); font-weight: 600; text-decoration: none; }
.bc-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--bc-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--bc-text-muted); }
.bc-avatar--lg { width: 64px; height: 64px; font-size: 1.75rem; }
.bc-avatar--xl { width: 96px; height: 96px; font-size: 2.5rem; }
.bc-featured { margin: 0 0 1.5rem; }
.bc-featured img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bc-radius); display: block; }
.bc-lead { font-size: 1.25rem; color: var(--bc-text-muted); line-height: 1.6; }
.bc-takeaways { background: rgba(19, 136, 8, .08); border-left: 4px solid var(--bc-green); border-radius: var(--bc-radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.bc-takeaways h2 { font-size: 1.125rem; margin: 0 0 .75rem; color: var(--bc-heading); }
.bc-takeaways ul { margin: 0; padding-left: 1.25rem; }
.bc-toc { background: var(--bc-surface); border: 1px solid var(--bc-border); border-radius: var(--bc-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .9375rem; }
.bc-toc summary { font-weight: 700; color: var(--bc-heading); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.bc-toc ol { list-style: none; padding: 0; margin: .5rem 0 0; }
.bc-toc li { margin: 0; }
.bc-toc li.bc-toc-h3 { padding-left: 1rem; font-size: .875rem; }
.bc-toc a { display: block; padding: .375rem .5rem; color: var(--bc-text); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 var(--bc-radius-xs) var(--bc-radius-xs) 0; }
.bc-toc a:hover, .bc-toc a.is-active { border-left-color: var(--bc-saffron); color: var(--bc-link); background: rgba(255, 153, 51, .08); }
.bc-rail-left .bc-toc { margin-top: 0; }
.bc-author-box { display: flex; gap: 1rem; align-items: flex-start; }
@media (max-width: 575.98px) { .bc-author-box { flex-direction: column; align-items: center; text-align: center; } }

/* Calculator CTA (hero family) */
.bc-cta { background: var(--bc-hero-bg); border-radius: var(--bc-radius-lg); padding: 1.5rem; margin: 2rem 0; }
@media (min-width: 768px) { .bc-cta--banner { padding: 2rem 2.5rem; } }
.bc-cta h2, .bc-cta .h4 { margin: 0 0 .5rem; color: var(--bc-heading); font-size: 1.375rem; }
.bc-cta p { color: var(--bc-text-muted); margin-bottom: 1rem; }
[data-bs-theme="dark"] .bc-cta { border-left: 4px solid var(--bc-green-on-dark); }
.bc-cta--inline { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; padding: 1.25rem 1.5rem; }
.bc-cta--inline p { margin: 0; }
.bc-related-inline { display: flex; gap: 1rem; align-items: center; position: relative; padding: 1rem; border: 1px solid var(--bc-border); border-radius: var(--bc-radius); background: var(--bc-card); margin: 1.5rem 0; }
.bc-related-inline img, .bc-related-inline .bc-related-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: var(--bc-radius-md); flex: 0 0 96px; background: var(--bc-subtle); }
.bc-related-inline a { text-decoration: none; color: var(--bc-title); font-weight: 700; }
.bc-related-inline a::before { content: ""; position: absolute; inset: 0; }
.bc-affiliate { border: 1px solid var(--bc-border-strong); border-radius: var(--bc-radius); padding: 1.25rem; margin: 1.5rem 0; background: var(--bc-card); display: flex; gap: 1rem; flex-wrap: wrap; }
.bc-affiliate img { width: 120px; height: 120px; object-fit: contain; border-radius: var(--bc-radius-md); background: #fff; }
.bc-affiliate__disclosure { font-size: .8125rem; color: var(--bc-text-muted); margin: .5rem 0 0; }

/* Ad slots: reserved height, labelled, never wider than their column (LS §11) */
.bc-ad { margin: 1.5rem auto; text-align: center; background: var(--bc-subtle); border-radius: var(--bc-radius-md); padding: .25rem 0 .5rem; max-width: 100%; overflow: hidden; contain: layout; clear: both; }
.bc-ad__label { font-size: .75rem; color: var(--bc-text-muted); margin: 0 0 .25rem; letter-spacing: .02em; }
.bc-ad ins.adsbygoogle { display: block; margin: 0 auto; }
.bc-ad-h50 { min-height: 50px; } .bc-ad-h90 { min-height: 90px; } .bc-ad-h100 { min-height: 100px; }
.bc-ad-h250 { min-height: 250px; } .bc-ad-h280 { min-height: 280px; } .bc-ad-h600 { min-height: 600px; }
.bc-ad-size-300x250 ins, .bc-ad-size-300x250 iframe { width: 300px; height: 250px; }
.bc-ad-size-300x600 ins, .bc-ad-size-300x600 iframe { width: 300px; height: 600px; }
.bc-ad-size-160x600 ins, .bc-ad-size-160x600 iframe { width: 160px; height: 600px; }
.bc-ad-size-336x280 ins, .bc-ad-size-336x280 iframe { width: 336px; height: 280px; }
.bc-ad-size-320x100 ins, .bc-ad-size-320x100 iframe { width: 320px; height: 100px; }
.bc-ad-size-320x50 ins, .bc-ad-size-320x50 iframe { width: 320px; height: 50px; }
.bc-ad-size-728x90 ins, .bc-ad-size-728x90 iframe { width: 728px; height: 90px; }
.bc-ad-size-970x250 ins, .bc-ad-size-970x250 iframe { width: 970px; height: 250px; }
.bc-ad iframe { border: 0; max-width: 100%; }
.bc-rail-right .bc-ad { margin-top: 0; }
@media (max-width: 767.98px) {                                   /* LS §10: full-bleed mobile slots */
  .bc-prose .bc-ad, .bc-ad--bleed { margin-inline: calc(var(--bs-gutter-x, 2rem) * -.5); width: calc(100% + var(--bs-gutter-x, 2rem)); max-width: none; border-radius: 0; }
}
.bc-cta + .bc-ad, .bc-ad + .bc-cta { margin-top: 1.5rem; }

/* Push opt-in card (soft prompt) */
/* Push notification CTA: inline (strip after the intro, card after the article), never a modal. */
.bc-push { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon text" "actions actions" "status status"; gap: .5rem 1rem; align-items: center; border: 1px solid var(--bc-border); border-left: 4px solid var(--bc-green); border-radius: var(--bc-radius); background: var(--bc-card); padding: 1rem 1.25rem; margin: 1.5rem 0; box-shadow: var(--bc-shadow-sm); }
.bc-push[hidden] { display: none; }
.bc-push__icon { grid-area: icon; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bc-subtle); color: var(--bc-green-strong); font-size: 1.25rem; }
.bc-push__text { grid-area: text; min-width: 0; }
.bc-push__title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--bc-heading); }
.bc-push__desc { margin: .125rem 0 0; font-size: .9375rem; color: var(--bc-text-muted); }
.bc-push__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bc-push__actions .btn { min-height: 44px; }
.bc-push__dismiss { margin-left: auto; color: var(--bc-text-muted); min-width: 44px; }
.bc-push__status { grid-area: status; color: var(--bc-text-muted); }
.bc-push__status:empty { display: none; }
.bc-push--strip { padding: .75rem 1rem; }
.bc-push--strip .bc-push__desc { display: none; }
@media (min-width: 768px) {
  .bc-push { grid-template-columns: auto 1fr auto; grid-template-areas: "icon text actions" "status status status"; }
  .bc-push__dismiss { margin-left: 0; }
}
.bc-push[data-state="denied"] { border-left-color: var(--bc-saffron); }

/* Consent banner (first-party) */
.bc-consent { position: fixed; inset: auto 1rem 1rem 1rem; z-index: 1080; max-width: 640px; margin: 0 auto; background: var(--bc-surface); color: var(--bc-text); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow-hover); border: 1px solid var(--bc-border); padding: 1rem 1.25rem; }

/* ------------------------------------------------------------------ footer */
.bc-footer { background: linear-gradient(135deg, var(--bc-navy), var(--bc-indigo)); color: #fff; padding: 3rem 0 2rem; margin-top: 3rem; }
.bc-footer h2 { font-size: 1.4rem; color: #fff; margin-bottom: 1.5rem; position: relative; padding-bottom: .625rem; }
.bc-footer h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 3px; background: var(--bc-saffron); }
.bc-footer ul { list-style: none; padding: 0; margin: 0; }
.bc-footer li { margin-bottom: .75rem; }
.bc-footer a { color: #ddd; text-decoration: none; transition: color .3s ease, padding-left .3s ease; }
.bc-footer a:hover, .bc-footer a:focus-visible { color: #fff; padding-left: 5px; text-decoration: underline; }
.bc-footer p { color: #ddd; }
.bc-social { display: flex; gap: 1rem; margin-top: 1.25rem; }
.bc-social a { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.2rem; padding: 0; transition: background .3s ease, color .3s ease, transform .3s ease; }
.bc-social a:hover, .bc-social a:focus-visible { background: #fff; color: var(--bc-navy); box-shadow: 0 0 0 3px var(--bc-saffron); transform: translateY(-5px); padding-left: 0; text-decoration: none; }
.bc-copyright { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2rem; padding-top: 1.5rem; text-align: center; color: #aaa; }
.bc-copyright p { color: #aaa; margin-bottom: .25rem; }
.bc-copyright a { color: #ddd; text-decoration: underline; }

/* ----------------------------------------------------------- misc / states */
.bc-empty { text-align: center; padding: 3rem 1rem; }
.bc-section { margin: 3rem 0; }
.bc-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.bc-section-head h2 { margin: 0; }
.bc-theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .bc-theme-toggle .bi-sun-fill { display: inline-block; }
[data-bs-theme="dark"] .bc-theme-toggle .bi-moon-fill { display: none; }
.bc-search-pill { position: relative; max-width: 600px; }
.bc-search-pill .bi-search { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--bc-text-muted); pointer-events: none; }
.bc-search-pill .form-control { height: 50px; border-radius: var(--bc-radius-pill); padding-left: 48px; padding-right: 7.5rem; border: 1px solid var(--bc-border-strong); box-shadow: 0 4px 10px rgba(0, 0, 0, .05); }
.bc-search-pill .btn { position: absolute; right: 4px; top: 4px; bottom: 4px; border-radius: var(--bc-radius-pill); padding-inline: 1.25rem; }
[data-bs-theme="dark"] .bc-search-pill .form-control { background: #333; border-color: #444; color: #f5f5f5; }
.min-w-0 { min-width: 0; }
.bc-noscript-menu { display: block !important; }
.bc-preview-banner { position: sticky; top: 0; z-index: 1100; background: var(--bc-saffron); color: #1a1a1a; text-align: center; padding: .5rem; font-weight: 600; }
.bc-admin-bar { background: var(--bc-indigo); color: #fff; font-size: .8125rem; padding: .375rem 0; }
.bc-admin-bar a { color: #fff; }

/* Reduced motion (WCAG 2.3.3 / decision-freeze §23) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .bc-card:hover, .bc-social a:hover, a.bc-pill:hover { transform: none; }
}
@media print {
  .bc-navbar, .bc-footer, .bc-ad, .bc-rail-left, .bc-rail-right, .bc-push, .bc-consent { display: none !important; }
}
/* Dark theme: Bootstrap outline-secondary text (#6c757d) is below 4.5:1 on dark surfaces. */
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #ced4da; --bs-btn-border-color: #6c757d; }