/* Business Ideas Library — public pages on the studio "build" tokens.
   Grammar follows community.css: .bil-* blocks, raw theme tokens
   (--surface/--ink/--accent/...), color-mix for tints, .lw-btn reused for
   buttons. No Memphis.

   The design is a research tear sheet: the verdict leads, the evidence
   supports it, and the arithmetic behind the score is drawn rather than
   asserted. Three ideas do most of the work —

   1. .bil-comp  the composition bar. Segment WIDTH is the dimension's weight,
                 FILL HEIGHT is the share it earned, so the drawn area is the
                 points it contributed and the five areas sum to the headline.
   2. .bil-card  a mini tear sheet: score in a left figure column, verdict,
                 then the same composition strip, so a card previews a report.
   3. semantic   strong / fair / weak are colours, not decoration — and every
                 coloured mark is labelled, so nothing rests on colour alone.
*/

/* Status ramp for scores and dimensions. Validated for colour-vision
   deficiency against the studio paper surface (#fffef7): worst adjacent pair
   ΔE 9.9 protan / 22.8 normal, all three inside the lightness band and above
   the chroma floor. Do not re-pick these by eye. */
.bil-hero, .bil-card, .bil-comp, .bil-verdict-block, .bil-gate, .bil-panel,
.bil-paywall, .bil-empty, .bil-closer, .bil-gate-bar, .bil-related {
    --bil-good: #15803d;
    --bil-warn: #ca8a04;
    --bil-bad:  #9f1239;
}

/* ---------------------------------------------------------------- hero -- */
.bil-hero {
    display: grid; gap: 2rem; align-items: center;
    grid-template-columns: minmax(0, 1fr);
    padding: 2.75rem 0 1.5rem;
}
@media (min-width: 900px) {
    .bil-hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 3rem; }
}
.bil-hero--facet { padding-top: 1.2rem; }
.bil-hero--facet .bil-hero__copy { max-width: 52rem; }
.bil-hero__copy { min-width: 0; }
.bil-hero__kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
}
.bil-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    line-height: 1.06; letter-spacing: -.025em;
    color: var(--ink); margin: .55rem 0 1rem; text-wrap: balance;
}
.bil-hero__lede { color: var(--muted); max-width: 46rem; font-size: 1.06rem; line-height: 1.65; }

/* the hero's second column: what a score is made of */
.bil-hero__panel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: .85rem;
}
.bil-hero__panel-label {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.bil-hero__legend { display: flex; flex-direction: column; gap: .3rem; }
/* Flex, not grid: the row's three parts are a weight, a name and a plain-
   English gloss, and the gloss has to sit on the same baseline however long
   the name is. */
.bil-hero__legend-row {
    display: flex; align-items: baseline; gap: .5rem;
    font-size: .86rem; color: var(--ink); line-height: 1.4;
}
.bil-hero__legend-row b {
    flex: 0 0 2.3rem;
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: .78rem; color: var(--accent); font-weight: 700;
}
.bil-hero__legend-row > span { font-weight: 600; white-space: nowrap; }
.bil-hero__legend-row i {
    font-style: normal; color: var(--muted); font-size: .78rem;
    margin-left: auto; text-align: right;
}
.bil-hero__totals {
    display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
    padding-top: .85rem; border-top: 1px solid var(--line);
    font-size: .8rem; color: var(--muted);
}
.bil-hero__totals b {
    color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- filters -- */
.bil-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .9rem 0; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); margin-bottom: 1.4rem;
}
.bil-filters__search {
    flex: 1 1 14rem; max-width: 22rem;
    padding: .5rem .9rem; font-size: .92rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.bil-filters__search:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bil-filters__select {
    padding: .5rem 2rem .5rem .9rem; font-size: .92rem;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-pill);
}
.bil-filters__spacer { flex: 1 1 auto; }

.bil-active-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: -.4rem 0 1.4rem; font-size: .85rem;
}
.bil-active-filters__label {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.bil-active-filters__clear { color: var(--accent); text-decoration: none; font-weight: 600; }
.bil-active-filters__clear:hover { text-decoration: underline; }
.bil-active-filters__count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- chip -- */
.bil-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem; font-size: .85rem; font-weight: 600;
    color: color-mix(in srgb, var(--ink) 82%, var(--accent));
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    border-radius: var(--radius-pill); text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.bil-chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bil-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bil-chip--sm { font-size: .76rem; padding: .22rem .6rem; }
.bil-chip--topic { font-weight: 700; }
.bil-chip__count {
    font-family: var(--font-mono); font-size: .72em; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted); padding-left: .35rem;
    border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.bil-chip.is-active .bil-chip__count { color: rgba(255, 255, 255, .8); border-left-color: rgba(255, 255, 255, .35); }

/* --------------------------------------------------------- browse strips -- */
.bil-strip { margin: 1.2rem 0 1.6rem; }
.bil-strip--flush { margin: 1rem 0 0; }
.bil-strip--rail { margin: 0 0 1.5rem; }
.bil-strip--last { margin-bottom: 3rem; }
.bil-strip__label {
    font-family: var(--font-mono);
    font-size: .7rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--muted); margin-bottom: .6rem;
}
.bil-strip__row { display: flex; flex-wrap: wrap; gap: .45rem; }

/* ----------------------------------------------------------------- grid -- */
.bil-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(20.5rem, 1fr));
    margin-bottom: 2rem;
}

/* ------------------------------------------------------- card (tear sheet) -- */
.bil-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    text-decoration: none; position: relative; overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bil-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.bil-card__body {
    display: flex; gap: 1.05rem; align-items: flex-start;
    padding: 1.15rem 1.25rem 1rem; flex: 1 1 auto;
}
.bil-card__figure {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: flex-start; min-width: 3.4rem;
}
.bil-card__score {
    font-family: var(--font-display); font-size: 2.3rem; font-weight: 700;
    line-height: .92; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.bil-card__of {
    font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted); margin-top: .28rem;
}
.bil-card__main { min-width: 0; display: flex; flex-direction: column; gap: .42rem; flex: 1 1 auto; }
.bil-card__category {
    font-family: var(--font-mono);
    font-size: .66rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
}
.bil-card__title {
    font-family: var(--font-display); font-size: 1.08rem; line-height: 1.28;
    letter-spacing: -.012em; color: var(--ink); margin: 0;
}
.bil-card__verdict, .bil-card__excerpt {
    font-size: .865rem; color: var(--muted); line-height: 1.5; margin: 0;
}
.bil-card__verdict strong { color: var(--ink); font-weight: 700; }
.bil-card__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.bil-card__foot {
    display: flex; align-items: center; gap: .35rem .95rem; flex-wrap: wrap;
    padding: .6rem 1.25rem; background: var(--surface-2);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: .69rem; color: var(--muted);
}
.bil-card__foot b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.bil-card__fresh { margin-left: auto; }
.bil-card__lock {
    position: absolute; top: .8rem; right: .8rem;
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--radius-pill); padding: .15rem .5rem;
}

/* confidence pill */
.bil-conf {
    font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    margin-top: .5rem; padding: .12rem .38rem; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted);
    white-space: nowrap;
}
.bil-conf--high { background: color-mix(in srgb, #15803d 13%, transparent); color: #15803d; }
.bil-conf--medium { background: color-mix(in srgb, #ca8a04 16%, transparent); color: #8a5d00; }

.bil-conf-text--high { color: var(--bil-good); }
.bil-conf-text--medium { color: var(--bil-warn); }
.bil-conf-text--low { color: var(--muted); }
.bil-conf-text { text-transform: capitalize; }

/* score tones — the headline figure */
.bil-score--high { color: var(--bil-good); }
.bil-score--mid { color: var(--bil-warn); }
.bil-score--low { color: var(--muted); }

.bil-trend { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.bil-trend--rising { color: var(--bil-good, #15803d); }
.bil-trend--declining { color: var(--bil-bad, #9f1239); }
.bil-trend--stable { color: var(--muted); }

/* ------------------------------------------------ the composition bar -- */
.bil-comp { display: flex; flex-direction: column; gap: .4rem; }
.bil-comp__track {
    display: flex; height: 1.7rem; border-radius: var(--radius-sm);
    overflow: hidden; background: color-mix(in srgb, var(--ink) 5%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.bil-comp--mini .bil-comp__track { height: .95rem; border-radius: 5px; }
/* A 2px surface gap between segments, so adjacent fills never read as one
   mark (dataviz: spacers between stacked segments). */
.bil-comp__seg {
    display: flex; align-items: flex-end; min-width: 0;
    border-right: 2px solid var(--surface);
}
.bil-comp__seg:last-child { border-right: 0; }
.bil-comp__fill { width: 100%; background: var(--muted); }
.bil-comp__seg[data-tone="good"] .bil-comp__fill { background: var(--bil-good); }
.bil-comp__seg[data-tone="warn"] .bil-comp__fill { background: var(--bil-warn); }
.bil-comp__seg[data-tone="bad"] .bil-comp__fill { background: var(--bil-bad); }

.bil-comp__keys { display: flex; gap: 0; }
.bil-comp__key {
    min-width: 0; padding-right: .5rem; line-height: 1.3;
    display: flex; flex-direction: column;
}
.bil-comp__key b {
    font-family: var(--font-mono); font-size: .82rem; font-weight: 700;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.bil-comp__keyname {
    font-size: .68rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bil-comp__keyweight {
    font-family: var(--font-mono); font-size: .62rem; color: var(--muted);
    opacity: .75;
}

/* ----------------------------------------------------------------- gate -- */
.bil-gate {
    position: relative; margin: 0 0 2.5rem;
    display: grid; gap: 1.5rem; align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
    .bil-gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2.5rem; }
}
/* Real rows — title + score, blurred. Something to want, rather than the
   empty rectangles this used to render. */
.bil-gate__stack { display: flex; flex-direction: column; gap: .5rem; user-select: none; }
.bil-gate__row {
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem .9rem; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--line);
    /* Enough blur to withhold the title, little enough that it reads as a
       real row rather than a rendering fault. */
    filter: blur(1.7px); opacity: .82;
}
.bil-gate__row:nth-child(n+4) { opacity: .55; }
.bil-gate__row:nth-child(n+6) { opacity: .32; }
.bil-gate__row-score {
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
    font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.bil-gate__row-title {
    font-size: .9rem; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto;
}
.bil-gate__row-lock { color: var(--muted); flex: 0 0 auto; }

.bil-upgrade {
    padding: 1.9rem 2rem;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.bil-upgrade--inline { margin-top: 1.6rem; box-shadow: none; }
.bil-upgrade__eyebrow {
    display: block; font-family: var(--font-mono);
    font-size: .68rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--accent); margin-bottom: .5rem;
}
.bil-upgrade__title {
    font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2;
    letter-spacing: -.02em; color: var(--ink); margin-bottom: .6rem;
}
.bil-upgrade__copy { font-size: .93rem; color: var(--muted); margin-bottom: 1.2rem; line-height: 1.6; }
.bil-upgrade__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.bil-upgrade__hint { margin-top: .9rem; font-size: .78rem; color: var(--muted); }

/* the "nothing is hidden here" variant — most facet hubs */
.bil-gate-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 0 0 2.5rem; padding: 1rem 1.3rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    font-size: .92rem; color: var(--muted);
}
.bil-gate-bar__copy strong { color: var(--ink); display: block; }

/* ----------------------------------------------------------- pagination -- */
.bil-pagination {
    display: flex; align-items: center; justify-content: center;
    gap: .4rem; margin: 1rem 0 2.5rem; flex-wrap: wrap;
}
.bil-pagination__link {
    min-width: 2.3rem; padding: .45rem .7rem; text-align: center;
    font-size: .9rem; font-weight: 600; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-sm); text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.bil-pagination__link:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.bil-pagination__link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.bil-pagination__gap { color: var(--muted); padding: 0 .2rem; }

/* --------------------------------------------------------------- detail -- */
.bil-breadcrumb {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--muted); padding: 1.4rem 0 0;
}
.bil-breadcrumb a { color: var(--muted); text-decoration: none; }
.bil-breadcrumb a:hover { color: var(--accent); }

.bil-preview-note {
    margin: 1rem 0 0; font-family: var(--font-mono);
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent);
}

.bil-detail-head { padding: 1rem 0 1.5rem; }
.bil-detail-head__chips {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    margin-bottom: .85rem;
}
.bil-detail-head__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.6vw, 2.55rem); line-height: 1.1;
    letter-spacing: -.028em; color: var(--ink); margin-bottom: .5rem;
    text-wrap: balance;
}
.bil-detail-head__niche {
    font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .8rem;
}
.bil-detail-head__desc {
    color: var(--muted); font-size: 1.03rem; line-height: 1.68; max-width: 46rem;
}

/* ------------------------------------------------------- verdict block -- */
/* Full width and FIRST in source order. This used to be the sidebar, which put
   the score and the CTA below the whole report on anything under 1024px. */
.bil-verdict-block {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.6rem 1.75rem; margin-bottom: 1.6rem;
    display: flex; flex-direction: column; gap: 1.25rem;
}
.bil-verdict-block__head {
    display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap;
}
.bil-verdict-block__figure {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start;
}
.bil-verdict-block__score {
    font-family: var(--font-display); font-size: 3.4rem; font-weight: 700;
    line-height: .88; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.bil-verdict-block__of {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-top: .45rem;
}
.bil-verdict-block__read { flex: 1 1 18rem; min-width: 0; }
.bil-verdict-block__headline {
    font-family: var(--font-display); font-size: 1.28rem; line-height: 1.25;
    letter-spacing: -.02em; color: var(--ink); margin-bottom: .4rem;
}
.bil-verdict-block__sentence { font-size: .95rem; color: var(--muted); line-height: 1.6; }
.bil-verdict-block__stance {
    display: inline-block; margin-top: .7rem;
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent);
    border-radius: var(--radius-pill); padding: .25rem .7rem;
}
.bil-verdict-block__cta {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.bil-verdict-block__ctanote { font-size: .82rem; color: var(--muted); }

/* fact row */
.bil-facts {
    display: grid; gap: .6rem 1.4rem; margin: 0;
    /* 7rem so all five facts fit one row inside the paywall's 48rem column;
       at 8.5rem the fifth orphaned onto its own line. */
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.bil-facts__item { display: flex; flex-direction: column; gap: .1rem; }
.bil-facts__item dt {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.bil-facts__item dd {
    margin: 0; font-family: var(--font-display); font-size: 1.15rem;
    font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- layout + toc rail -- */
.bil-layout {
    display: grid; gap: 1.6rem; align-items: start;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 3rem;
}
@media (min-width: 1024px) {
    .bil-layout { grid-template-columns: minmax(0, 1fr) 14.5rem; }
    .bil-sidebar { position: sticky; top: 5.5rem; }
}
.bil-exhibits { min-width: 0; }
/* The rail is a convenience on a long desktop page; on mobile the verdict
   already leads and the closer carries the CTA, so it would only be clutter. */
@media (max-width: 1023px) { .bil-sidebar { display: none; } }

.bil-toc { display: flex; flex-direction: column; gap: .1rem; }
.bil-toc__label {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .5rem;
}
.bil-toc a {
    font-size: .86rem; color: var(--muted); text-decoration: none;
    padding: .35rem 0 .35rem .7rem;
    border-left: 2px solid var(--line);
}
.bil-toc a:hover { color: var(--accent); border-left-color: var(--accent); }
.bil-toc__cta { margin-top: 1.1rem; width: 100%; }

/* ---------------------------------------------------------------- panel -- */
.bil-panel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.5rem; margin-bottom: 1.4rem;
}
.bil-panel__head { margin-bottom: 1.15rem; }
.bil-panel__eyebrow {
    display: block; font-family: var(--font-mono);
    font-size: .66rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent); margin-bottom: .3rem;
}
.bil-panel__title {
    font-family: var(--font-display); font-size: 1.28rem; line-height: 1.22;
    letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.bil-panel__note { font-size: .8rem; color: var(--muted); margin-top: .9rem; line-height: 1.6; }
.bil-panel__note strong { color: var(--ink); }

/* ---------------------------------------------------------- dimensions -- */
.bil-dims { display: flex; flex-direction: column; gap: 1.35rem; }
.bil-dim { display: flex; flex-direction: column; gap: .4rem; }
.bil-dim__head {
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
}
.bil-dim__label { font-weight: 700; color: var(--ink); font-size: .95rem; }
.bil-dim__means { font-size: .78rem; color: var(--muted); font-style: italic; }
.bil-dim__value { margin-left: auto; display: flex; align-items: baseline; gap: .3rem; }
.bil-dim__value b {
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.bil-dim__ceiling { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.bil-dim__track {
    height: .5rem; border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, var(--surface));
    overflow: hidden;
}
.bil-dim__fill { height: 100%; border-radius: 999px; background: var(--muted); }
.bil-dim[data-tone="good"] .bil-dim__fill { background: var(--bil-good); }
.bil-dim[data-tone="warn"] .bil-dim__fill { background: var(--bil-warn); }
.bil-dim[data-tone="bad"] .bil-dim__fill { background: var(--bil-bad); }
.bil-dim__reasoning { font-size: .9rem; color: var(--muted); line-height: 1.62; margin-top: .2rem; }

.bil-cites { margin-top: .15rem; }
.bil-cites summary {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .05em; color: var(--accent); cursor: pointer;
    list-style: none; padding: .2rem 0;
}
.bil-cites summary::-webkit-details-marker { display: none; }
.bil-cites summary::before { content: '▸ '; }
.bil-cites[open] summary::before { content: '▾ '; }
.bil-cites__list { display: flex; flex-direction: column; gap: .3rem; margin-top: .4rem; }
.bil-cites__item {
    font-family: var(--font-mono); font-size: .74rem; line-height: 1.5;
    color: var(--muted); background: var(--surface-2);
    border-radius: var(--radius-sm); padding: .35rem .6rem;
}

/* ---------------------------------------------------------------- chart -- */
.bil-chart { margin: 0 0 1.4rem; }
.bil-chart__cap {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .5rem;
}
.bil-chart__svg { width: 100%; height: auto; display: block; overflow: visible; }
.bil-chart__grid { stroke: color-mix(in srgb, var(--ink) 11%, transparent); stroke-width: 1; }
.bil-chart__gridlabel,
.bil-chart__xlabel {
    font-family: var(--font-mono); font-size: 10px; fill: var(--muted);
}
.bil-chart__xlabel { text-anchor: middle; }
.bil-chart__area { fill: color-mix(in srgb, var(--accent) 13%, transparent); }
.bil-chart__line {
    fill: none; stroke: var(--accent); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.bil-chart__end { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.bil-chart__hit { fill: transparent; }
.bil-chart__hit:hover { fill: color-mix(in srgb, var(--accent) 12%, transparent); }

/* tiny per-keyword sparkline */
.bil-spark { width: 4.5rem; height: 1.25rem; display: block; }
.bil-spark polyline {
    fill: none; stroke: color-mix(in srgb, var(--accent) 70%, var(--muted));
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------- tables -- */
.bil-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 34rem; }
.bil-table th {
    text-align: left; font-family: var(--font-mono);
    font-size: .66rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.bil-table td {
    padding: .5rem .6rem; color: var(--ink);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.bil-table th.is-num, .bil-table td.is-num {
    text-align: right; font-variant-numeric: tabular-nums;
}
.bil-table td.is-num { color: var(--muted); }
.bil-table__spark { width: 5rem; }
.bil-table-scroll { overflow-x: auto; }

/* ------------------------------------------------------------- rivals -- */
.bil-rivals { display: flex; flex-direction: column; gap: .2rem; }
.bil-rival { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.bil-rival:last-child { border-bottom: 0; padding-bottom: 0; }
.bil-rival__head {
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .3rem;
}
.bil-rival__name { font-weight: 700; color: var(--ink); font-size: .98rem; }
.bil-rival__grade {
    font-family: var(--font-mono); font-size: .64rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); background: var(--surface-2);
    border-radius: var(--radius-sm); padding: .15rem .45rem;
}
.bil-rival__domain { font-size: .8rem; color: var(--accent); text-decoration: none; margin-left: auto; }
.bil-rival__domain:hover { text-decoration: underline; }
.bil-rival__desc { font-size: .89rem; color: var(--muted); line-height: 1.55; }
.bil-rival__stats {
    display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .4rem;
    font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
}
.bil-rival__stats b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- tech stack -- */
.bil-stack__summary { font-size: .93rem; color: var(--muted); line-height: 1.62; margin-bottom: 1rem; }
.bil-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.bil-stack__item {
    display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap;
    padding: .55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.bil-stack__item:last-child { border-bottom: 0; }
.bil-stack__name {
    flex: 0 0 9rem; font-weight: 700; color: var(--ink); font-size: .89rem;
}
/* The purpose used to live in a title= tooltip, which is invisible on touch. */
.bil-stack__purpose { flex: 1 1 12rem; font-size: .87rem; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------- closer -- */
.bil-closer {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: var(--radius); padding: 1.75rem 1.9rem; margin-bottom: 1.4rem;
}
.bil-closer__title {
    font-family: var(--font-display); font-size: 1.3rem; line-height: 1.22;
    letter-spacing: -.02em; color: var(--ink); margin-bottom: .55rem; text-wrap: balance;
}
.bil-closer__copy { font-size: .93rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.1rem; }

/* -------------------------------------------------------------- related -- */
.bil-related { padding: 1rem 0 3rem; }
.bil-related__title {
    font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em;
    color: var(--ink); margin-bottom: 1rem;
}

/* -------------------------------------------------------------- paywall -- */
.bil-paywall {
    max-width: 48rem; margin: 1.5rem auto 2.5rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 1.75rem 1.9rem;
    display: flex; flex-direction: column; gap: 1.3rem;
}
.bil-paywall__head { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.bil-paywall__figure { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.bil-paywall__score {
    font-family: var(--font-display); font-size: 3rem; font-weight: 700;
    line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.bil-paywall__of {
    font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .4rem;
}
.bil-paywall__copy { flex: 1 1 18rem; min-width: 0; }
.bil-paywall__title {
    font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.95rem);
    line-height: 1.15; letter-spacing: -.025em; color: var(--ink); margin: .3rem 0 .55rem;
}
.bil-paywall__verdict { font-size: .95rem; color: var(--muted); line-height: 1.6; }
.bil-paywall__verdict strong { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------------- empty -- */
.bil-empty {
    background: var(--surface); border: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: var(--radius); padding: 2.25rem 2rem; margin-bottom: 2rem;
    display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.bil-empty__title {
    font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink);
}
.bil-empty__copy { color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 42rem; }
.bil-empty__row { margin-bottom: .3rem; }

/* --------------------------------------------------------- mobile tuning -- */
@media (max-width: 560px) {
    .bil-card__body { gap: .8rem; padding: 1rem 1rem .9rem; }
    .bil-card__score { font-size: 1.95rem; }
    .bil-card__figure { min-width: 2.8rem; }
    .bil-card__foot { padding: .55rem 1rem; font-size: .66rem; gap: .3rem .7rem; }
    .bil-card__fresh { margin-left: 0; }
    .bil-verdict-block { padding: 1.25rem 1.15rem; }
    .bil-verdict-block__head { gap: 1rem; }
    .bil-verdict-block__score { font-size: 2.9rem; }
    .bil-panel { padding: 1.15rem 1.1rem; }
    .bil-paywall { padding: 1.25rem 1.15rem; }
    .bil-upgrade { padding: 1.4rem 1.25rem; }
    /* Five stacked labels under a 100%-wide bar collide below ~34rem; the
       segments keep their native tooltips and the bars below repeat the same
       numbers, so the strip stays readable without them. */
    .bil-comp__keys { display: none; }
    .bil-stack__name { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bil-card { transition: none; }
    .bil-card:hover { transform: none; }
}

/* ------------------------------------------------- member validator (P6) -- */
.bil-val-intro { padding: 3rem 0 1.4rem; max-width: 46rem; }

.bil-val-note {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 1.2rem 0; padding: .85rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
    border-radius: .7rem; background: var(--surface);
    color: var(--muted); font-size: .92rem;
}
.bil-val-note--warn {
    border-color: color-mix(in srgb, #d97706 45%, transparent);
    background: color-mix(in srgb, #d97706 8%, var(--surface));
    color: var(--ink);
}
.bil-val-note--private {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

/* submission form */
.bil-val-form { margin-bottom: 4rem; }
.bil-val-field { margin-bottom: 1.3rem; }
.bil-val-label {
    display: block; margin-bottom: .45rem;
    font-size: .9rem; font-weight: 600; color: var(--ink);
}
.bil-val-input {
    width: 100%; padding: .7rem .9rem;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: .6rem; background: var(--surface);
    color: var(--ink); font-size: .96rem; font-family: inherit;
}
.bil-val-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bil-val-input--area { resize: vertical; min-height: 8rem; line-height: 1.55; }
.bil-val-error { margin-top: .35rem; font-size: .85rem; color: #dc2626; }
.bil-val-form__actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem;
}
.bil-val-form__hint { font-size: .82rem; color: var(--muted); }

/* live run */
.bil-val-run { max-width: 44rem; margin: 0 auto; padding: 2rem 0 4rem; }
.bil-val-head { margin-bottom: 2rem; }
.bil-val-head__title {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    line-height: 1.2; color: var(--ink); margin: .5rem 0 .7rem;
}
.bil-val-head__msg { color: var(--muted); }

.bil-val-steps { list-style: none; margin: 0; padding: 0; }
.bil-val-step {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: .85rem 0 .85rem .15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.bil-val-step:last-child { border-bottom: 0; }

/* marker: a dot that fills on done, pulses while running */
.bil-val-step__marker {
    flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .18rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
    background: transparent; position: relative;
}
.bil-val-step.is-done .bil-val-step__marker {
    border-color: var(--accent); background: var(--accent);
}
.bil-val-step.is-done .bil-val-step__marker::after {
    content: ''; position: absolute; left: .27rem; top: .1rem;
    width: .22rem; height: .45rem;
    border: solid var(--surface); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bil-val-step.is-active .bil-val-step__marker {
    border-color: var(--accent);
    animation: bil-val-pulse 1.4s ease-in-out infinite;
}
.bil-val-step.is-failed .bil-val-step__marker { border-color: #dc2626; background: #dc2626; }
.bil-val-step.is-held .bil-val-step__marker { border-color: #d97706; background: #d97706; }

@keyframes bil-val-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
    50% { box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .bil-val-step.is-active .bil-val-step__marker { animation: none; }
}

.bil-val-step__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; }
.bil-val-step__label { font-weight: 600; color: var(--ink); font-size: .95rem; }
.bil-val-step__hint { font-size: .84rem; color: var(--muted); }
.bil-val-step__state {
    flex: 0 0 auto; font-size: .78rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.bil-val-step.is-done .bil-val-step__state { color: var(--accent); }
.bil-val-step.is-failed .bil-val-step__state { color: #dc2626; }
.bil-val-step.is-held .bil-val-step__state { color: #d97706; }
.bil-val-step.is-pending .bil-val-step__label,
.bil-val-step.is-pending .bil-val-step__hint { opacity: .55; }

.bil-val-outcome {
    display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem;
}

/* hub → validator entry point */
.bil-val-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-top: 1.8rem; padding: .9rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.bil-val-cta__copy { color: var(--muted); font-size: .93rem; }
.bil-val-cta__copy strong { color: var(--ink); }

/* coming-soon (validator ships dark until the engine is proven in prod) */
.bil-val-cta__soon {
    flex: 0 0 auto; padding: .3rem .7rem; border-radius: 999px;
    border: 1px dashed color-mix(in srgb, var(--ink) 28%, transparent);
    font-size: .74rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.bil-soon { max-width: 44rem; margin: 0 auto; padding: 3.5rem 0 4.5rem; text-align: center; }
.bil-soon__badge {
    display: inline-block; padding: .3rem .8rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent);
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.bil-soon__title {
    font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    color: var(--ink); margin: 1rem 0 .9rem; line-height: 1.15;
}
.bil-soon__lede { color: var(--muted); font-size: 1.02rem; margin-bottom: 1rem; }
.bil-soon__note {
    color: var(--muted); font-size: .92rem; margin: 0 auto 1.8rem; max-width: 38rem;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.bil-soon__actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }

/* form-page preview of the run (rendered from progress.STEPS) */
.bil-val-preview { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bil-val-preview__item {
    display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
.bil-val-preview__item:last-child { border-bottom: 0; }
.bil-val-preview__num {
    flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin-top: .1rem;
    display: grid; place-items: center; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); font-size: .72rem; font-weight: 700;
}
.bil-val-preview__label {
    display: block; font-size: .88rem; font-weight: 600; color: var(--ink);
}
.bil-val-preview__hint {
    display: block; font-size: .78rem; color: var(--muted); line-height: 1.4;
}