/* ============================================================
   Compliance Benchmark - dark instrument panel
   Scoped to .csb-page so the shared light header/footer in
   public/base.html are untouched. New component classes are
   prefixed csb- to avoid collision with public.css (~48 classes).
   Reuses: var(--color-*) / var(--radius-*) tokens, the shared
   `shimmer` keyframe (defined in public.css), and `.container-custom`.
   ============================================================ */

/* ---- semantic surface palette (dark) ---- */
.csb-page {
    --csb-ink:        #e2e8f0;   /* slate-200 primary text */
    --csb-ink-strong: #f1f5f9;   /* slate-100 */
    --csb-ink-mute:   #94a3b8;   /* slate-400 */
    --csb-ink-faint:  #64748b;   /* slate-500 */
    --csb-surface:    #0b1120;   /* slate-950 hero */
    --csb-surface-2:  #0f172a;   /* slate-900 sections */
    --csb-surface-3:  #1e293b;   /* slate-800 cards */
    --csb-line:       #1e293b;   /* hairline rules */
    --csb-line-soft:  #182338;
    --csb-track:      #1e293b;   /* meter track */
    --csb-scroll:     #334155;   /* slate-700 - modal scrollbar thumb */

    /* status ramp (validated CVD-safe vs light surface): green/amber/red
       are reserved statuses, always shipped with icon+label, never color-alone.
       Neutral slate = non-statuses (not_checked / not_found / not_applicable). */
    --csb-good:    #10b981;
    --csb-warn:    #f59e0b;
    --csb-bad:     #ef4444;
    --csb-good-dim:  rgba(16, 185, 129, 0.55);
    --csb-bad-dim:   rgba(239, 68, 68, 0.55);
    --csb-neutral:  #64748b;
    --csb-good-ink:  #34d399;
    --csb-warn-ink:  #fbbf24;
    --csb-bad-ink:   #f87171;

    /* quiet accent for hero dials (blue-on-blue meter, status not asserted here) */
    --csb-accent:      #3b82f6;
    --csb-accent-dim:  rgba(59, 130, 246, 0.28);

    --csb-radius: 0.75rem;
    background: var(--csb-surface-2);
    color: var(--csb-ink);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
}
.csb-page * { box-sizing: border-box; }

/* ---- typography roles ---- */
.csb-page .csb-eyebrow {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--csb-accent);
    margin: 0 0 0.5rem;
}
.csb-page .csb-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.csb-page .csb-section-title,
.csb-page .csb-hero-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--csb-ink-strong);
    letter-spacing: -0.01em;
}
.csb-page .csb-hero-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; margin: 0 0 0.75rem; }
.csb-page .csb-hero-sub { color: var(--csb-ink-mute); margin: 0; max-width: 52ch; font-size: 1.02rem; }
.csb-page .csb-section-title { font-size: 1.5rem; font-weight: 600; margin: 0; }

/* ============================================================
   Filter bar
   ============================================================ */
.csb-filterbar { background: var(--csb-surface); border-bottom: 1px solid var(--csb-line); position: sticky; top: 80px; z-index: 20; backdrop-filter: blur(8px); }
.csb-filterbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; flex-wrap: wrap; }
.csb-filterbar-label { display: flex; align-items: center; gap: 0.75rem; }
.csb-filterbar-eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--csb-ink-faint); }
.csb-segmented { display: inline-flex; gap: 2px; padding: 2px; background: var(--csb-surface-3); border-radius: 999px; }
.csb-seg {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    color: var(--csb-ink-mute); font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500;
    padding: 0.4rem 0.85rem; border-radius: 999px; transition: color .15s, background .15s;
}
.csb-seg:hover { color: var(--csb-ink); }
.csb-seg.is-active { background: var(--csb-accent); color: #fff; }
.csb-seg:focus-visible { outline: 2px solid var(--csb-accent); outline-offset: 2px; }
.csb-refresh-meta { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--csb-ink-faint); font-size: 0.78rem; }
.csb-refresh-meta i { color: var(--csb-accent); }

/* ============================================================
   Hero
   ============================================================ */
.csb-hero { background: var(--csb-surface); color: var(--csb-ink); border-bottom: 1px solid var(--csb-line); position: relative; overflow: hidden; }
.csb-hero::before { /* subtle instrument grid */
    content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
    background-image:
        linear-gradient(to right, var(--csb-line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--csb-line-soft) 1px, transparent 1px);
    background-size: 64px 64px; mask-image: radial-gradient(ellipse at top, #000 10%, transparent 70%);
}
.csb-hero-inner { position: relative; padding-top: 3rem; padding-bottom: 2.5rem; }
.csb-hero-head { margin-bottom: 2rem; }

.csb-hero-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
.csb-figure { display: flex; flex-direction: column; }
.csb-figure-val {
    font-family: 'Space Grotesk', 'Inter', sans-serif; /* proportional figures for hero numbers */
    color: var(--csb-ink-strong); font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 600;
    line-height: 1.05; letter-spacing: -0.02em;
    /* visible once populated; skeleton occupies the slot until then */
}
.csb-figure::after { /* the label under each hero number, set via JS attr */
    content: attr(data-label); display: block; margin-top: 0.4rem;
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600;
}
/* skeleton variants: dark shimmer reusing the shared `shimmer` keyframe */
.csb-page .csb-skel-hero-num { height: 2.6rem; width: 7rem; border-radius: 0.5rem; }
.csb-page .csb-skel-label { height: 0.9rem; margin-top: 0.5rem; width: 5rem; }
.csb-page .csb-skel-label.w1 { width: 4.5rem; } .csb-skel-label.w2 { width: 6.5rem; } .csb-skel-label.w3 { width: 5.5rem; }
/* recolor the shared .skeleton shimmer to the dark surface while loading */
.csb-page .skeleton {
    background: linear-gradient(90deg, #1e293b 0%, #334155 25%, #1e293b 50%, #1e293b 100%);
    background-size: 1000px 100%; border-radius: 0.5rem;
}

/* ---- Compliance Spectrum - signature ---- */
.csb-spectrum-wrap { margin-bottom: 2.5rem; }
.csb-spectrum-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.csb-spectrum-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--csb-ink); letter-spacing: 0.02em; }
.csb-spectrum-caption { color: var(--csb-ink-faint); font-size: 0.82rem; }
.csb-spectrum-bar {
    height: 2.1rem; border-radius: 0.4rem; position: relative; display: flex; overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--csb-line-soft);
}
.csb-spectrum.seg { height: 100%; position: relative; transition: filter .15s; }
.csb-spectrum.seg:hover, .csb-spectrum.seg:focus-visible { filter: brightness(1.15); outline: none; }
.csb-spectrum.seg:focus-visible { box-shadow: 0 0 0 2px var(--csb-ink-strong) inset; }
.csb-spectrum.spike { position: relative; box-shadow: 0 0 14px rgba(16,185,129,0.85); }
.csb-spectrum-legend { display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; margin-top: 0.65rem; }
.csb-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--csb-ink-mute); }
.csb-legend-swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; }

/* ---- hero dials (quiet blue accent) ---- */
.csb-dial-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.csb-dial { background: var(--csb-surface-3); border: 1px solid var(--csb-line); border-radius: var(--csb-radius); padding: 0.85rem 0.9rem; min-width: 0; }
.csb-dial-name { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; margin-bottom: 0.55rem; }
.csb-dial-track { height: 6px; border-radius: 999px; background: var(--csb-track); overflow: hidden; margin-bottom: 0.5rem; }
.csb-dial-fill { height: 100%; border-radius: 999px; background: var(--csb-accent); transition: width .5s ease; }
.csb-dial-read { display: flex; align-items: baseline; justify-content: space-between; }
.csb-dial-pct { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; color: var(--csb-ink-strong); }
.csb-dial-frac { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--csb-ink-faint); }
.csb-skel-dial { height: 92px; }

/* ============================================================
   Sections
   ============================================================ */
.csb-section { padding: 2.75rem 0; border-bottom: 1px solid var(--csb-line); }
.csb-section:last-of-type { border-bottom: 0; }
.csb-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.csb-page .csb-foot-note { color: var(--csb-ink-faint); font-size: 0.8rem; margin: 0.85rem 0 0; }

/* table-view twin toggle - tinted-blue secondary, fills solid when active.
   Shared by the score-distribution "Table view" toggle and each card's Table
   button; it sits next to the solid-accent Details button, so the filled
   (Details) vs outlined (Table) pair reads as primary vs secondary at rest. */
.csb-twin-toggle {
    appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
    background: rgba(59, 130, 246, 0.16); color: var(--csb-accent); border: 1px solid var(--csb-accent-dim);
    padding: 0.4rem 0.75rem; border-radius: 0.45rem; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; transition: color .15s, border-color .15s, background .15s;
}
.csb-twin-toggle:hover { color: var(--csb-ink-strong); border-color: var(--csb-accent); background: rgba(59, 130, 246, 0.24); }
.csb-twin-toggle[aria-pressed="true"] { color: #fff; border-color: var(--csb-accent); background: var(--csb-accent); }
.csb-twin-toggle:focus-visible { outline: 2px solid var(--csb-ink-strong); outline-offset: 2px; }

/* cards */
.csb-card { background: var(--csb-surface-3); border: 1px solid var(--csb-line); border-radius: var(--csb-radius); padding: 1.4rem; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.csb-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }

.csb-skel-card { padding: 1.4rem; border-radius: var(--csb-radius); }
.csb-skel-card-title { height: 1rem; width: 40%; margin-bottom: 1.2rem; }
.csb-skel-donut { height: 7.5rem; width: 7.5rem; border-radius: 50%; margin: 0 auto 1rem; }
.csb-skel-line { height: 0.7rem; margin-bottom: 0.6rem; } .csb-skel-line.w2 { width: 70%; } .csb-skel-line.w3 { width: 50%; }
.csb-skel-chart { height: 12rem; }
.csb-skel-dial { border-radius: var(--csb-radius); }

/* standard card internals */
.csb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.csb-card-titles { flex: 1 1 14rem; min-width: 0; }
.csb-card-actions { flex: 0 0 auto; display: flex; gap: 0.45rem; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.csb-card-chart { flex: 1 1 auto; min-width: 0; }
.csb-card-table { min-width: 0; }
.csb-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--csb-ink-strong); margin: 0; }
.csb-card-cap { font-size: 0.74rem; color: var(--csb-ink-faint); margin: 0.15rem 0 0; line-height: 1.4; }
/* Details - solid accent primary (matches the retry CTA), so it reads as the
   card's main action against the dark surface and against the outlined Table
   button beside it. */
.csb-card-expand { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--csb-accent); border: 1px solid var(--csb-accent); color: #fff; border-radius: 0.45rem; padding: 0.4rem 0.75rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: filter .15s, box-shadow .15s; }
.csb-card-expand:hover { filter: brightness(1.08); }
.csb-card-expand:focus-visible { outline: 2px solid var(--csb-ink-strong); outline-offset: 2px; }
.csb-card-expand i { transition: transform .2s; }
.csb-card[data-open="true"] .csb-card-expand i { transform: rotate(180deg); }
.csb-card[data-open="true"] { border-color: var(--csb-accent); box-shadow: 0 0 0 1px var(--csb-accent-dim); }

/* per-standard detail modal (native <dialog>) - the cards' drill markup,
   now hosted in a centered top-layer panel instead of an inline strip.
   The modal head reuses the eyebrow/title/cap classes below. */
.csb-modal { background: transparent; border: 0; padding: 0; margin: auto; max-width: none; max-height: none; color: var(--csb-ink); }
.csb-modal::backdrop { background: rgba(2, 6, 23, 0.72); backdrop-filter: blur(2px); }
/* backdrop click hits the dialog; clicks inside the panel are caught by
   .csb-modal-panel, not the dialog, so they don't close */
.csb-modal-panel { background: var(--csb-surface-3); border: 1px solid var(--csb-accent); border-radius: var(--csb-radius); box-shadow: 0 0 0 1px var(--csb-accent-dim), 0 24px 64px rgba(0, 0, 0, 0.55); width: min(46rem, 92vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.csb-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.35rem 1.5rem 1.1rem; border-bottom: 1px solid var(--csb-line); }
.csb-modal-titles { min-width: 0; }
.csb-modal-close { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; background: transparent; border: 1px solid var(--csb-line); color: var(--csb-ink-mute); border-radius: 0.45rem; font-size: 0.9rem; transition: color .15s, border-color .15s, background .15s; }
.csb-modal-close:hover { color: var(--csb-ink-strong); border-color: var(--csb-ink-faint); background: rgba(148, 163, 184, 0.14); }
.csb-modal-close:focus-visible { outline: 2px solid var(--csb-accent); outline-offset: 2px; }
.csb-modal-body { padding: 1.5rem; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--csb-scroll) transparent; }
/* slim custom scrollbar - same scroll container hosts every standard's drill,
   most visible on the tall Web Security content. Inset rounded thumb, accent on
   hover, quiet track so it reads against the dark panel instead of the OS default. */
.csb-modal-body::-webkit-scrollbar { width: 12px; }
.csb-modal-body::-webkit-scrollbar-track { background: transparent; }
.csb-modal-body::-webkit-scrollbar-thumb { background: var(--csb-scroll); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; transition: background .15s; }
.csb-modal-body::-webkit-scrollbar-thumb:hover { background: var(--csb-accent); }
.csb-modal[open] { animation: csb-modal-in .18s ease-out; }
@keyframes csb-modal-in { from { opacity: 0; } to { opacity: 1; } }

.csb-strip-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--csb-accent); margin: 0 0 0.35rem; }
.csb-strip-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--csb-ink-strong); margin: 0; }
.csb-strip-cap { font-size: 0.78rem; color: var(--csb-ink-faint); margin: 0.2rem 0 0; }

/* donut */
.csb-donut-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0.85rem; }
.csb-donut { width: 7.5rem; height: 7.5rem; border-radius: 50%; flex-shrink: 0; align-self: center; position: relative; }
.csb-donut-hole { position: absolute; inset: 0.85rem; border-radius: 50%; background: var(--csb-surface-3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.csb-donut-pct { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 600; color: var(--csb-ink-strong); line-height: 1; }
.csb-donut-label { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csb-ink-faint); margin-top: 0.2rem; }
.csb-ring-legend { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 10rem; min-width: 0; }
.csb-ring-row { display: grid; grid-template-columns: 0.85rem 1fr auto; gap: 0.45rem; align-items: center; font-size: 0.78rem; color: var(--csb-ink-mute); }
.csb-ring-row b { color: var(--csb-ink); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.csb-ring-swatch { width: 0.65rem; height: 0.65rem; border-radius: 2px; }

/* status icons (status never color-alone) */
.csb-ic { width: 1rem; height: 1rem; flex-shrink: 0; display: inline-block; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.csb-ic-check   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z' clip-rule='evenodd'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' fill-rule='evenodd' d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z' clip-rule='evenodd'/></svg>"); }
.csb-ic-warn    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' fill-rule='evenodd' d='M8.3 2.7a1.7 1.7 0 013.4 0l5.5 10.2a1.7 1.7 0 01-1.5 2.5H4.3A1.7 1.7 0 012.8 13zM10 8v3M10 14.5h.01' stroke='black' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' fill-rule='evenodd' d='M8.3 2.7a1.7 1.7 0 013.4 0l5.5 10.2a1.7 1.7 0 01-1.5 2.5H4.3A1.7 1.7 0 012.8 13zM10 8v3M10 14.5h.01' stroke='black' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.csb-ic-cross   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' stroke='black' stroke-width='2' stroke-linecap='round' d='M5 5l10 10M15 5L5 15'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' stroke='black' stroke-width='2' stroke-linecap='round' d='M5 5l10 10M15 5L5 15'/></svg>"); }
.csb-ic-dash    { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' stroke='black' stroke-width='2' stroke-linecap='round' d='M5 10h10'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' stroke='black' stroke-width='2' stroke-linecap='round' d='M5 10h10'/></svg>"); }

/* drill-down region - now rendered in the shared full-width strip, so it
   lays out at natural size (no card-scoped 0fr→1fr collapse). */
.csb-drill { display: block; }
.csb-drill > div { overflow: hidden; }
.csb-drill-inner { padding-top: 0.5rem; }

/* component stacked bars */
.csb-comp-list { display: flex; flex-direction: column; gap: 0.9rem; }
.csb-comp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.csb-comp-name { font-size: 0.78rem; color: var(--csb-ink-mute); font-weight: 500; }
.csb-comp-tot { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--csb-ink-faint); }
.csb-stack { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--csb-track); gap: 2px; }
.csb-stack .seg { height: 100%; cursor: default; }
.csb-stack .seg:hover, .csb-stack .seg:focus-visible { filter: brightness(1.2); }
.csb-stack .seg:focus-visible { outline: 2px solid var(--csb-ink-strong); outline-offset: 1px; }
.csb-comp-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.85rem; }
.csb-comp-legend .csb-ring-row { grid-template-columns: 0.65rem 1fr auto; }
/* card donut renders as a centered column (donut over its legend). The modal
   still uses the base legend with its bar→legend spacing, so these are
   card-scoped: drop the row-layout top margin (the column gap now spaces it)
   and center the legend rows + the not-checked note under the donut. */
.csb-card-chart .csb-comp-legend { justify-content: center; margin-top: 0; }
.csb-card-chart .csb-card-cap { text-align: center; }

/* score histogram (detail) - area blocks on a shared linear 0-100 axis */
.csb-dist-card .csb-chart { position: relative; }
.csb-dist-cap { color: var(--csb-ink-mute); font-size: 0.82rem; margin: 0 0 1rem; line-height: 1.4; }
.csb-dist-cap .csb-mono { color: var(--csb-ink-strong); }
.csb-hist { position: relative; display: flex; flex-direction: column; }
.csb-hist-plot { position: relative; height: 12rem; border-bottom: 1px solid var(--csb-line); }
.csb-hist-blk { position: absolute; bottom: 0; border-radius: 4px 4px 0 0; transition: height .45s ease; will-change: height; }
.csb-hist-blk:hover, .csb-hist-blk:focus-visible { filter: brightness(1.12); outline: none; }
.csb-hist-blk:focus-visible { box-shadow: 0 0 0 2px var(--csb-ink-strong) inset; }
.csb-hist-count { position: absolute; bottom: calc(100% + 0.2rem); left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 0.68rem; color: var(--csb-ink-strong); white-space: nowrap; pointer-events: none; }
.csb-hist-count.is-end { left: auto; right: 0; transform: none; text-align: right; }

/* reference hairlines: avg / median (solid, not dashed). Neutral, two rows at the top. */
.csb-hist-ref { position: absolute; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: rgba(241,245,249,0.5); z-index: 3; pointer-events: none; }
.csb-hist-ref-tab { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 0.62rem; color: var(--csb-ink); white-space: nowrap; padding: 0.08rem 0.35rem; border-radius: 3px; background: rgba(15,23,42,0.85); border: 1px solid var(--csb-line); }
.csb-hist-ref.is-upper .csb-hist-ref-tab { top: 0.2rem; }
.csb-hist-ref.is-lower .csb-hist-ref-tab { top: 1.15rem; }
.csb-hist-ref.is-near-right .csb-hist-ref-tab { transform: translateX(-100%); }
.csb-hist-ref.is-near-left .csb-hist-ref-tab { transform: translateX(0); }
.csb-hist-ref-mark { position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; background: rgba(241,245,249,0.5); transform: translateX(-50%) rotate(45deg); }

/* axis band: per-band ticks (swatch + label) sitting under the plot */
.csb-hist-axis { position: relative; height: 1.5rem; margin-top: 0.15rem; }
.csb-hist-tick { position: absolute; top: 0; display: flex; align-items: center; gap: 0.35rem; justify-content: center; height: 100%; overflow: visible; }
.csb-hist-tick-swatch { width: 0.6rem; height: 0.6rem; border-radius: 2px; flex: 0 0 auto; }
.csb-hist-tick-label { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 0.66rem; color: var(--csb-ink-mute); white-space: nowrap; }

/* web deep-dive */
/* add a small top gap so policy blocks don't butt directly against preceding headings */
.csb-web-block { margin: 0.8rem 0 1.3rem; }
.csb-web-block:last-child { margin-bottom: 0; }
.csb-web-sub { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; margin: 0 0 0.6rem; }
/* Email policy small cards (keeps changes scoped to Email Security drill only) */
.csb-email-policies { display: flex; gap: 1rem; align-items: stretch; }
.csb-email-policies .csb-web-block { flex: 1 1 0; padding: 0.7rem; background: var(--csb-surface); border: 1px solid var(--csb-line); border-radius: 0.5rem; display: flex; flex-direction: column; }
/* ensure the header and the list rows inside each policy card are spaced and the rows show separators */
.csb-email-policies .csb-web-sub { margin-bottom: 0.5rem; }
.csb-email-policies .csb-head-list { display: flex; flex-direction: column; gap: 0; }
.csb-email-policies .csb-head-row { padding: 0.5rem 0; border-bottom: 1px solid var(--csb-line-soft); }
.csb-email-policies .csb-head-row:last-child { border-bottom: 0; }
/* make short lists visually balanced by giving cards a modest min-height */
.csb-email-policies .csb-web-block { min-height: 8.5rem; }
/* TLS support + header-adoption live side-by-side in the full-width strip */
.csb-web-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; margin-bottom: 1.3rem; }
.csb-tls-list { display: flex; flex-direction: column; gap: 0.7rem; }
.csb-tls-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.7rem; align-items: center; }
.csb-tls-ver { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--csb-ink); font-variant-numeric: tabular-nums; }
.csb-tls-bar { height: 10px; border-radius: 3px; background: var(--csb-track); overflow: hidden; display: flex; gap: 2px; }
.csb-tls-pct { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--csb-ink-mute); font-variant-numeric: tabular-nums; text-align: right; min-width: 3.5rem; }

.csb-head-list { display: flex; flex-direction: column; gap: 0.55rem; }
.csb-head-row { display: flex; gap: 0.7rem; align-items: center; }
.csb-head-name { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--csb-ink-mute); flex: 0 1 11rem; min-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csb-head-mini { display: flex; height: 8px; flex: 1 1 6rem; min-width: 4rem; border-radius: 3px; overflow: hidden; gap: 2px; background: var(--csb-track); }
.csb-mini-counts { display: inline-flex; gap: 0.8rem; flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.csb-mini-counts .ok { color: var(--csb-good-ink); } .csb-mini-counts .no { color: var(--csb-ink-faint); }

.csb-count-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.csb-count { display: flex; flex-direction: column; }
.csb-count b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 600; color: var(--csb-ink-strong); }
.csb-count span { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csb-ink-faint); }

/* common-issues table */
.csb-issues-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.csb-issues-table th, .csb-issues-table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--csb-line-soft); }
.csb-issues-table th { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; }
.csb-issues-table td.num, .csb-issues-table th.num { text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.csb-issue-bar-cell { width: clamp(7rem, 28%, 16rem); }
.csb-issue-bar { height: 6px; border-radius: 3px; background: var(--csb-bad-dim); }

/* trend line/area chart (SVG) */
.csb-trend-svg { width: 100%; height: 12rem; overflow: visible; display: block; }
.csb-trend-area { fill: var(--csb-accent); opacity: 0.12; }
.csb-trend-line { fill: none; stroke: var(--csb-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.csb-trend-dot { fill: var(--csb-accent); stroke: var(--csb-surface-3); stroke-width: 2; cursor: default; }
.csb-trend-dot:hover, .csb-trend-dot:focus-visible { fill: var(--csb-ink-strong); outline: none; }
.csb-trend-axis-label { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; fill: var(--csb-ink-faint); }
.csb-trend-end-label { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 0.62rem; font-weight: 600; fill: var(--csb-ink-strong); }

/* per-standard mini trend sparklines (small multiples) */
.csb-spark-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.9rem; }
.csb-spark-card { background: var(--csb-surface-3); border: 1px solid var(--csb-line); border-radius: var(--csb-radius); padding: 0.85rem 0.9rem; }
.csb-spark-name { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; margin-bottom: 0.5rem; }
.csb-spark-svg { width: 100%; height: 2.4rem; overflow: visible; display: block; }
.csb-spark-line { fill: none; stroke: var(--csb-good); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.csb-spark-dot { fill: var(--csb-good); }
.csb-spark-read { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.45rem; }
.csb-spark-pct { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 600; color: var(--csb-ink-strong); }
.csb-spark-delta { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }
.csb-spark-delta.up { color: var(--csb-good-ink); }
.csb-spark-delta.down { color: var(--csb-bad-ink); }
.csb-spark-delta.flat { color: var(--csb-ink-faint); }
.csb-skel-spark { height: 6.2rem; border-radius: var(--csb-radius); }

/* generic magnitude bar-in-table (not a status/issue signal, so accent not bad-red) */
.csb-issue-bar.is-accent { background: rgba(59, 130, 246, 0.55); }

/* table twin (generic) */
.csb-twin-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.csb-twin-table th, .csb-twin-table td { text-align: left; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--csb-line-soft); }
.csb-twin-table th { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; }
.csb-twin-table td.num, .csb-twin-table th.num { text-align: right; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; color: var(--csb-ink); }
.csb-twin-table tr:last-child td { border-bottom: 0; }
.csb-twin-swatch { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; vertical-align: middle; margin-right: 0.4rem; }

/* tooltip - node is appended to <body> (outside .csb-page); re-declares the
   tokens it reads so var(--csb-*) resolves instead of inheriting body's text color */
.csb-tooltip { position: fixed; z-index: 60; pointer-events: none; --csb-ink-strong:#f1f5f9; --csb-ink:#e2e8f0; --csb-ink-mute:#94a3b8; --csb-line:#1e293b; background: #020617; color: var(--csb-ink-strong); border: 1px solid var(--csb-line); border-radius: 0.4rem; padding: 0.5rem 0.65rem; font-size: 0.74rem; box-shadow: 0 8px 24px rgba(0,0,0,0.5); max-width: 16rem; opacity: 0; transform: translateY(2px); transition: opacity .12s, transform .12s; }
.csb-tooltip.is-open { opacity: 1; transform: translateY(0); }
.csb-tooltip b { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
.csb-tooltip .csb-tt-label { color: var(--csb-ink); font-weight: 600; margin-bottom: 0.15rem; }
.csb-tooltip .csb-tt-row { color: var(--csb-ink-mute); display: flex; justify-content: space-between; gap: 0.6rem; }

/* states */
.csb-state { background: var(--csb-surface-2); padding: 4rem 1rem; text-align: center; }
.csb-state-card { max-width: 30rem; margin: 0 auto; }
.csb-state-icon { font-size: 2.5rem; color: var(--csb-ink-faint); margin-bottom: 1rem; }
.csb-state-icon.csb-err { color: var(--csb-bad-ink); }
.csb-state-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--csb-ink-strong); margin: 0 0 0.5rem; }
.csb-state-msg { color: var(--csb-ink-mute); margin: 0 0 1.5rem; }
.csb-retry { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--csb-accent); color: #fff; border: 0; border-radius: 0.5rem; padding: 0.6rem 1.1rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer; text-decoration: none; }
.csb-retry:hover { filter: brightness(1.1); }
.csb-retry:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* privacy footer note */
.csb-privacy-note { display: flex; align-items: flex-start; gap: 0.65rem; padding: 2rem 0 2.5rem; color: var(--csb-ink-faint); font-size: 0.78rem; line-height: 1.5; }
.csb-privacy-note i { color: var(--csb-accent); margin-top: 0.15rem; }

/* responsive */

/* Prevent horizontal overflow caused by inflexible flex/grid children
   on small viewports. Many flex/grid children need an explicit min-width:0
   so they can shrink below their content's intrinsic width. This fixes the
   observed wider-than-page appearance for the filterbar and hero strips. */
.csb-filterbar-inner > * { min-width: 0; }
.csb-hero-inner > * { min-width: 0; }
.csb-hero-figures .csb-figure, .csb-dial-row .csb-dial { min-width: 0; }
.csb-figure-val { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Ensure the full-width strips don't create viewport-level horizontal scroll
   while preserving their visual layout. Overflow hidden is applied to the
   strip containers (not the page) so charts can still overflow internally if needed. */
.csb-filterbar, .csb-hero { width: 100%; left: 0; right: 0; overflow-x: hidden; }

/* Keep container padding, but prevent inner elements from exceeding it. */
.csb-filterbar .container-custom, .csb-hero .container-custom { box-sizing: border-box; }

@media (max-width: 880px) {
    .csb-hero-figures { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .csb-dial-row { grid-template-columns: repeat(2, 1fr); }
    .csb-web-pair { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 560px) {
    .csb-hero-figures { grid-template-columns: repeat(2, 1fr); }
    .csb-dial-row { grid-template-columns: 1fr 1fr; }
    .csb-tls-row { grid-template-columns: 4.5rem 1fr auto; }
    .csb-head-name { flex-basis: 9rem; min-width: 5.5rem; }
    .csb-card { padding: 1.1rem; }
    .csb-modal-panel { width: 94vw; max-height: 88vh; }
    .csb-modal-head { padding: 1.1rem 1.1rem 0.95rem; }
    .csb-modal-body { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .csb-page .skeleton, .csb-page .csb-spectrum-bar,
    .csb-page .csb-hist-bar, .csb-page .csb-dial-fill { animation: none !important; transition: none !important; }
    .csb-page .csb-modal[open] { animation: none !important; }
    .csb-page .csb-rem-bar { transition: none !important; }
}

/* ============================================================
   PHASE-11 - findings-engine benchmark sections
   ============================================================ */

/* legend shared by the new charts (swatch + label) */
.csb-page .csb-fbar-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-bottom: 1.1rem; }
.csb-page .csb-fbar-legend .csb-legend-item { color: var(--csb-ink-mute); }

/* horizontal per-check / per-control prevalence rows */
.csb-fbar-list { display: flex; flex-direction: column; gap: 0.7rem; }
.csb-fbar-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 3.4rem; gap: 0.85rem; align-items: center; }
.csb-fbar-label { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.csb-fbar-id { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: var(--csb-ink); min-width: 0; }
.csb-fbar-track { min-width: 0; }
.csb-fbar-val { font-size: 0.78rem; font-weight: 600; color: var(--csb-ink-strong); text-align: right; font-variant-numeric: tabular-nums; }

/* severity chip - icon + text, chip border quietly picks up the ramp */
.csb-sev-chip { display: inline-flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--csb-ink-mute); padding: 0.12rem 0.4rem; border: 1px solid var(--csb-line); border-radius: 999px; white-space: nowrap; }
.csb-sev-chip i { font-size: 0.7rem; }

/* compact non-zero status counts for a twin-table cell */
.csb-sc { display: inline-flex; align-items: center; gap: 0.25rem; margin-right: 0.75rem; white-space: nowrap; font-size: 0.74rem; color: var(--csb-ink-mute); }
.csb-sc i { font-size: 0.7rem; }
.csb-sc b { color: var(--csb-ink); }

/* wide twin tables scroll inside their own container, never the page */
.csb-twin-scroll { overflow-x: auto; }

/* severity mix - paired segmented bars */
.csb-sev-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.5rem; }
.csb-sev-block { min-width: 0; }

/* risk deciles strip under the histogram axis */
.csb-decile-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--csb-line); }
.csb-decile-cap { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; margin-right: 0.25rem; }
.csb-decile-pt { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.csb-decile-k { font-size: 0.58rem; color: var(--csb-ink-faint); font-family: 'JetBrains Mono', monospace; }
.csb-decile-v { font-size: 0.72rem; color: var(--csb-ink); }

/* remediation impact ranking */
.csb-rem-list { display: flex; flex-direction: column; gap: 0.7rem; }
.csb-rem-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 3rem; gap: 0.85rem; align-items: center; }
.csb-rem-label { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.csb-rem-track { position: relative; min-width: 0; height: 1.4rem; display: flex; align-items: center; gap: 0.6rem; }
.csb-rem-bar { height: 0.65rem; border-radius: 3px; min-width: 2px; transition: width .45s ease; }
.csb-rem-meta { font-size: 0.72rem; color: var(--csb-ink-mute); white-space: nowrap; }
.csb-rem-val { font-size: 0.82rem; font-weight: 600; color: var(--csb-ink-strong); text-align: right; font-variant-numeric: tabular-nums; }
.csb-rem-row:hover .csb-fbar-id, .csb-rem-row:focus-visible { outline: none; }
.csb-rem-row:focus-visible { outline: 2px solid var(--csb-ink-strong); outline-offset: 3px; border-radius: 4px; }

/* measurement quality - two labelled shares per check */
.csb-mq-list { display: flex; flex-direction: column; gap: 0.85rem; }
.csb-mq-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 0.85rem; align-items: center; }
.csb-mq-bars { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.csb-mq-line { display: flex; align-items: center; gap: 0.6rem; }
.csb-mq-tag { flex: 0 0 auto; width: 5.5rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; color: var(--csb-ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.csb-mq-tag i { font-size: 0.66rem; }
.csb-mq-track { flex: 1 1 auto; min-width: 0; height: 0.5rem; border-radius: 3px; background: var(--csb-track); overflow: hidden; }
.csb-mq-fill { height: 100%; border-radius: 3px; }
.csb-mq-val { flex: 0 0 auto; width: 2.6rem; text-align: right; font-size: 0.72rem; color: var(--csb-ink-mute); font-variant-numeric: tabular-nums; }
.csb-mq-key { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.csb-mq-key i { color: var(--csb-ink-mute); }

/* percentile curve */
.csb-perc-svg { width: 100%; height: 14rem; overflow: visible; display: block; }
.csb-perc-line { fill: none; stroke: var(--csb-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.csb-perc-dot { fill: var(--csb-accent); stroke: var(--csb-surface-3); stroke-width: 2; cursor: default; }
.csb-perc-dot.is-tail { fill: var(--csb-good-ink); }
.csb-perc-dot:hover, .csb-perc-dot:focus-visible { fill: var(--csb-ink-strong); outline: none; }
.csb-perc-pt-label { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; fill: var(--csb-ink-mute); }
.csb-perc-pt-label.is-tail { fill: var(--csb-good-ink); }
.csb-perc-axis-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--csb-ink-faint); }

/* about this sample */
.csb-sample-figs { display: flex; flex-wrap: wrap; gap: 1rem; }
.csb-fig-tile { flex: 1 1 10rem; min-width: 0; background: var(--csb-surface-3); border: 1px solid var(--csb-line); border-radius: var(--csb-radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.csb-fig-num { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 600; color: var(--csb-ink-strong); line-height: 1.05; letter-spacing: -0.01em; }
.csb-fig-lbl { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; }
.csb-pill-truncated { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--csb-warn-ink); background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 999px; padding: 0.2rem 0.6rem; }

.csb-deflist { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.csb-def { display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 0.5rem 1.5rem; align-items: baseline; }
.csb-def dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--csb-ink-faint); font-weight: 600; }
.csb-def dd { margin: 0; font-size: 0.85rem; color: var(--csb-ink); line-height: 1.5; }
.csb-def dd .csb-mono { color: var(--csb-ink-strong); }

@media (max-width: 880px) {
    .csb-sev-pair { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
    .csb-fbar-row, .csb-rem-row { grid-template-columns: 1fr; gap: 0.4rem; }
    .csb-fbar-row .csb-fbar-val, .csb-rem-row .csb-rem-val { text-align: left; }
    .csb-mq-row { grid-template-columns: 1fr; gap: 0.4rem; }
    .csb-def { grid-template-columns: 1fr; gap: 0.15rem; }
}