/* Viewer benchmark pages (VBP-02). Loaded after category-page.css on the warm
   content theme. Colour comes only from --content-* tokens and tints of
   --content-primary. Band widths arrive as --vb-share, the one value the
   template sets inline. */


/* The answer. One sentence an assistant can lift whole. Sits directly under
   the H1, before any prose, styled as the page's single loudest element. */
.vb-answer { font-family: 'Merriweather', serif; font-size: 1.35rem; line-height: 1.55; color: var(--content-text-primary); background-color: var(--content-bg-warm); border: 1px solid var(--content-border); border-left: 4px solid var(--content-primary); border-radius: 6px; padding: 1.1rem 1.35rem; margin: 1rem 0 0.75rem; }
.vb-answer strong { color: var(--content-primary-dark); }

/* Stat block. Same visual language as .cat-stats / .csr-headline, built as the
   shared partial MIL-00 §13 asks for (components/benchmark_stats.html). */
.vb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.25rem; margin: 0 0 2rem; padding: 1.5rem; background-color: var(--content-bg-warm); border: 1px solid var(--content-border); border-radius: 8px; }
.vb-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.vb-stat-value { font-family: 'Merriweather', serif; font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--content-primary-dark); font-variant-numeric: tabular-nums; }
.vb-stat-label { font-size: 0.9rem; line-height: 1.45; color: var(--content-text-secondary); }

/* Distribution strip. Where live channels sit, as bands. Band widths are the
   share of channels, so the picture IS the reframe: the left third is one
   viewer. The reader's band is the only saturated one; there is no target
   marker, no "goal" band, nothing to aim at (VBP-00 §3). */
.vb-dist { margin: 1.5rem 0 2rem; }
.vb-dist-caption { font-size: 0.9rem; font-weight: 600; color: var(--content-text-primary); margin-bottom: 2.1rem; }
.vb-dist-bar { position: relative; display: flex; height: 2.75rem; border-radius: 8px; overflow: visible; }
.vb-band { position: relative; height: 100%; background-color: rgba(230, 126, 34, 0.14); border-right: 2px solid var(--content-card-bg); }
.vb-band:first-child { border-radius: 8px 0 0 8px; }
.vb-band:last-child { border-radius: 0 8px 8px 0; border-right: none; }
.vb-band:nth-child(even) { background-color: rgba(230, 126, 34, 0.22); }
.vb-dist-bar .vb-band--you { background-color: var(--content-primary); }
.vb-band-pin { position: absolute; bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.78rem; font-weight: 700; color: #ffffff; background-color: var(--content-primary-dark); border-radius: 4px; padding: 0.15rem 0.45rem; }
.vb-band-pin::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--content-primary-dark); }
.vb-dist-labels { display: flex; margin-top: 0.5rem; }
.vb-dist-label { font-size: 0.78rem; line-height: 1.3; color: var(--content-text-muted); text-align: center; overflow: hidden; }
.vb-dist-label b { display: block; font-weight: 600; color: var(--content-text-secondary); font-variant-numeric: tabular-nums; }
.vb-dist-label--you b { color: var(--content-primary-dark); }
.vb-dist-note { font-size: 0.85rem; color: var(--content-text-muted); margin-top: 0.6rem; }

/* Neighbouring values */
.vb-neighbours { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; }
.vb-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: 0.35rem 0.7rem; font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--content-text-primary); background-color: var(--content-card-bg); border: 1px solid var(--content-border); border-radius: 50px; text-decoration: none; }
.vb-chip--current { color: #ffffff; background-color: var(--content-primary); border-color: var(--content-primary); }
.vb-chip-all { margin-left: 0.5rem; font-size: 0.95rem; }

/* Visible Q&A. FAQPage JSON-LD must mirror text that is on the page. */
.vb-faq { margin: 0; }
.vb-faq dt { font-family: 'Merriweather', serif; font-size: 1.1rem; font-weight: 700; color: var(--content-text-primary); margin: 1.25rem 0 0.4rem; }
.vb-faq dt:first-child { margin-top: 0; }
.vb-faq dd { font-size: 1.05rem; color: var(--content-text-secondary); margin: 0; line-height: 1.65; }

/* Index grid */
.vb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 1rem 0 1.5rem; }
.vb-tile { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem; background-color: var(--content-card-bg); border: 1px solid var(--content-border); border-radius: 10px; text-decoration: none; box-shadow: 0 1px 3px var(--content-shadow); }
.blog-content .vb-chip, .blog-content .vb-tile { text-decoration: none; }
.blog-content .vb-chip { color: var(--content-text-primary); }
.blog-content .vb-chip--current { color: #ffffff; }
.blog-content .vb-dist-note { font-size: 0.85rem; color: var(--content-text-muted); margin: 0.6rem 0 0; }
.blog-content .vb-grid-label { font-size: 0.8rem; margin-bottom: 0; }
.vb-method-link { color: var(--content-primary); }
.vb-tile-n { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.15rem; color: var(--content-text-primary); font-variant-numeric: tabular-nums; }
.vb-tile-meta { font-size: 0.82rem; color: var(--content-text-muted); }
.vb-grid-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--content-text-muted); margin: 1.5rem 0 0; }

.vb-band,
.vb-dist-label { width: var(--vb-share); }

.vb-index-link { font-size: 0.95rem; margin: 1rem 0 0; }

@media (max-width: 600px) {
    .vb-dist-label { font-size: 0.7rem; }
    .vb-dist-label--narrow { visibility: hidden; }
}