/* =============================================================
   Fiscal Wizard — Bootstrap 5.3 brand bridge
   Maps Bootstrap CSS variables onto the Fiscal Wizard palette so
   every Bootstrap utility (.btn, .badge, .text-success, etc.)
   inherits the brand without overriding individual components.
   Loaded AFTER bootstrap.min.css and BEFORE app.css so app.css
   keeps the upper hand for legacy custom components, while
   Bootstrap utilities pick up the brand tokens defined here.
   ============================================================= */

:root,
[data-bs-theme="light"] {
    --bs-primary:           #4f46e5;
    --bs-primary-rgb:       79, 70, 229;
    --bs-primary-text-emphasis: #312e81;
    --bs-primary-bg-subtle: #ece9ff;
    --bs-primary-border-subtle: #c7c2f5;

    --bs-secondary:         #6c6c87;
    --bs-secondary-rgb:     108, 108, 135;

    --bs-success:           #0d9266;
    --bs-success-rgb:       13, 146, 102;
    --bs-success-text-emphasis: #065f3f;
    --bs-success-bg-subtle: #d6f3e6;
    --bs-success-border-subtle: #9adfc1;

    --bs-danger:            #be1547;
    --bs-danger-rgb:        190, 21, 71;
    --bs-danger-text-emphasis: #7a0d2d;
    --bs-danger-bg-subtle:  #ffd7e1;
    --bs-danger-border-subtle: #f5a3b6;

    --bs-warning:           #c2530b;
    --bs-warning-rgb:       194, 83, 11;
    --bs-warning-text-emphasis: #7a3306;
    --bs-warning-bg-subtle: #ffe5cf;
    --bs-warning-border-subtle: #f5b88e;

    --bs-info:              #2563eb;
    --bs-info-rgb:          37, 99, 235;
    --bs-info-text-emphasis: #15397b;
    --bs-info-bg-subtle:    #dde7ff;
    --bs-info-border-subtle: #aabfff;

    --bs-body-bg:           #f7f6fb;
    --bs-body-bg-rgb:       247, 246, 251;
    --bs-body-color:        #1a1730;
    --bs-body-color-rgb:    26, 23, 48;
    --bs-emphasis-color:    #0f0c20;
    --bs-secondary-color:   #5e5b78;
    --bs-tertiary-color:    #8e8ba9;
    --bs-tertiary-bg:       #f4f3fa;
    --bs-border-color:      #d8d4ea;
    --bs-border-color-translucent: rgba(20, 17, 60, 0.12);

    --bs-link-color:        #4f46e5;
    --bs-link-color-rgb:    79, 70, 229;
    --bs-link-hover-color:  #4338ca;
    --bs-link-hover-color-rgb: 67, 56, 202;

    --bs-body-font-family:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size:    1rem;
    --bs-body-font-weight:  400;
    --bs-body-line-height:  1.55;

    --bs-heading-color:     #0f0c20;
    --bs-code-color:        #4c1d95;
    --bs-highlight-bg:      #f3dd91;
}

/* Display headlines use the brand serif. */
h1.display-1, h1.display-2, h1.display-3, h1.display-4, h1.display-5, h1.display-6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.headline-serif {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Tone semantic helpers — let pages tag good/bad/warn/ok regardless of element. */
.tone-good  { color: var(--bs-success) !important; }
.tone-bad   { color: var(--bs-danger)  !important; }
.tone-warn  { color: var(--bs-warning) !important; }
.tone-ok    { color: var(--bs-info)    !important; }

.bg-tone-good { background-color: var(--bs-success-bg-subtle) !important; color: var(--bs-success-text-emphasis) !important; }
.bg-tone-bad  { background-color: var(--bs-danger-bg-subtle)  !important; color: var(--bs-danger-text-emphasis)  !important; }
.bg-tone-warn { background-color: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.bg-tone-ok   { background-color: var(--bs-info-bg-subtle)    !important; color: var(--bs-info-text-emphasis)    !important; }

/* Wizard mark in the navbar brand. */
.brand-mark {
    color: #c8a13a;
    font-size: 1.1em;
    margin-right: 0.35rem;
    line-height: 1;
}

/* Navbar tweak — active nav links get the brand indigo + weight. */
.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: var(--bs-primary) !important;
}
.navbar .nav-link.active {
    font-weight: 600;
}

/* Body needs a touch of vertical breathing so the navbar shadow shows. */
body {
    min-height: 100vh;
}
main {
    padding-bottom: 3rem;
}

/* ------------------------------------------------------------------
   Profile chip row (portal.php industry scan).
   The chips have JS hooks on the .chip / .is-active classes; we
   restyle them in-place so they look like a Bootstrap pill toggle
   without changing the markup the JS depends on.
   ------------------------------------------------------------------ */
.profile-chip-row .chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--bs-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.profile-chip-row .chip:hover,
.profile-chip-row .chip:focus-visible {
    background: var(--bs-primary-bg-subtle);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}
.profile-chip-row .chip.is-active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* ------------------------------------------------------------------
   Hero containers.
   The .page-hero rule in app.css owns the visual styling (rounded
   gradient card, shadow, padding); we just give it a top-level margin
   so it doesn't kiss the navbar and keep the Bootstrap container-xl
   inside the hero stacking-context aware.
   ------------------------------------------------------------------ */
.page-hero {
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
}
.page-hero .container-xl {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.page-hero .display-5,
.page-hero h1 {
    color: var(--bs-emphasis-color);
}

/* Range-slider polish for Bootstrap form-range - thumb in brand color. */
.form-range::-webkit-slider-thumb { background: var(--bs-primary); }
.form-range::-moz-range-thumb     { background: var(--bs-primary); }
.form-range::-ms-thumb            { background: var(--bs-primary); }

/* Cards (Bootstrap) - softer hover lift on the run-grid + weights cards. */
.card.shadow-sm {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.run-card.card.shadow-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(20, 17, 60, 0.10), 0 4px 8px rgba(20, 17, 60, 0.05) !important;
}

/* Buttons - the brand .btn-primary gets a soft gradient feel. */
.btn-primary {
    background: linear-gradient(180deg, var(--bs-primary) 0%, #4338ca 100%);
    border-color: #4338ca;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(180deg, #4338ca 0%, #3730a3 100%);
    border-color: #3730a3;
}

.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.btn-outline-primary:hover {
    background: var(--bs-primary);
    color: #fff;
}

/* Alerts - tighter rounded, subtle shadow. */
.alert {
    border-radius: 12px;
    border-width: 1px;
}

/* Focus ring uses the brand soft. */
.form-control:focus, .form-select:focus, .form-range:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

/* Tables - tighten the .table-light header so it has a little more
   contrast against the page background. */
.table-light, .table-light > th, .table-light > td {
    --bs-table-bg: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}
.table > :not(caption) > * > * {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Bigger, bolder gauge centre numerals - the inline 0-100 score is the
   page's headline figure; default 32px reads too quiet inside the 200px
   hero gauge. */
.gauge-text {
    font-size: 38px !important;
    font-weight: 800 !important;
}
.brief-hero .gauge-text {
    font-size: 52px !important;
}

/* ------------------------------------------------------------------
   Brief page — Bootstrap-native cards with tone-coloured top bands.
   The .tone-strip is a 4px coloured bar at the top of any card; the
   .tone-* utility (defined above) colours score-text and subscore
   numbers; the .subscore-bar / .subscore-bar-fill render an inline
   progress bar inside each subscore button.
   ------------------------------------------------------------------ */

/* Tone strip - top accent bar coloured by score band. */
.tone-strip {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--bs-secondary) 0%, var(--bs-secondary) 100%);
    flex-shrink: 0;
}
.tone-strip--good     { background: linear-gradient(90deg, var(--bs-success) 0%, #065f3f 100%); }
.tone-strip--ok       { background: linear-gradient(90deg, var(--bs-info)    0%, #7c3aed 100%); }
.tone-strip--warn     { background: linear-gradient(90deg, var(--bs-warning) 0%, #d35315 100%); }
.tone-strip--bad      { background: linear-gradient(90deg, var(--bs-danger)  0%, #221a4f 100%); }
.tone-strip--neutral  { background: linear-gradient(90deg, #6c6c87 0%, #8e8ba9 100%); opacity: 0.7; }

/* Brief hero - bigger gauge, premium feel via radial accents. */
.brief-hero {
    background:
        radial-gradient(at 0% 0%, color-mix(in srgb, var(--bs-primary) 14%, transparent) 0%, transparent 55%),
        radial-gradient(at 100% 100%, color-mix(in srgb, #c8a13a 22%, transparent) 0%, transparent 55%),
        var(--bs-body-bg);
}

/* Hero meta badges - lighter weight, more breathing room. */
.brief-hero .badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.7rem;
}

/* Report cards - tone-coloured eyebrow per kind (fundamentals = indigo,
   technicals = green) for an instant visual cue. !important so we beat
   the legacy app.css rule that targets .report--fundamentals descendants
   (different parent class - doesn't match anymore but kept for safety). */
.report-eyebrow--fundamentals { color: #312e81 !important; font-weight: 800; }
.report-eyebrow--technicals   { color: #065f3f !important; font-weight: 800; }

/* Brief detail-block category headings - in the master-detail right
   pane, the eyebrow + h2 title pair was reading too soft. Force the h2
   to body-emphasis dark and bump the eyebrow to a stronger weight. */
.detail-block h2 {
    color: var(--bs-emphasis-color) !important;
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
}
.detail-block .text-body-secondary[class*="text-uppercase"],
.detail-block header p.text-uppercase {
    color: var(--bs-secondary-color) !important;
    font-weight: 800 !important;
}

/* Report-card eyebrow gets bigger now that the rest of the card is just
   gauge + score + tone. */
.report-eyebrow {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    margin: 0;
}

/* Category nav - now embedded inside each report card instead of
   rendering as a standalone split rail. The shared wrapper classes
   keep the fundamentals/technicals pill groups aligned within the
   card body while still wrapping cleanly on small screens. */
.report-card.card {
    height: 100%;
}
.report-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.category-nav {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: auto;
    padding-top: 0.25rem;
}
.category-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}
.category-nav-eyebrow {
    display: block;
    margin: 0;
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}
.category-nav-pills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}
@media (min-width: 992px) {
    .report-card .card-body { gap: 1.25rem; }
    .category-nav { gap: 1rem; }
}

/* Category "pill" is a compact tile: tone bar on the left, label + count
   stacked, score on the right. Replaces the old wraparound rounded pills
   that read as bland because every tile looked identical regardless of
   where the score landed. */
.category-pill {
    display: grid;
    grid-template-columns: 6px 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem 0.55rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    overflow: hidden;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}
.category-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.category-pill-bar {
    align-self: stretch;
    width: 6px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
    position: relative;
    border-top-left-radius: 11px;
    border-bottom-left-radius: 11px;
    display: flex;
    align-items: flex-end;
}
.category-pill-bar-fill {
    width: 100%;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    transition: height 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.category-pill-meta {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.category-pill-label {
    font-weight: 700;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-pill-count {
    color: var(--bs-secondary-color);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.category-pill-score {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
}
.category-pill--good    { background: linear-gradient(90deg, rgba(214, 243, 230, 0.55) 0%, var(--bs-body-bg) 60%); border-color: rgba(13, 146, 102, 0.3); }
.category-pill--ok      { background: linear-gradient(90deg, rgba(221, 231, 255, 0.55) 0%, var(--bs-body-bg) 60%); border-color: rgba(37, 99, 235, 0.3); }
.category-pill--warn    { background: linear-gradient(90deg, rgba(255, 229, 207, 0.55) 0%, var(--bs-body-bg) 60%); border-color: rgba(194, 83, 11, 0.3); }
.category-pill--bad     { background: linear-gradient(90deg, rgba(255, 215, 225, 0.55) 0%, var(--bs-body-bg) 60%); border-color: rgba(190, 21, 71, 0.3); }
.category-pill--neutral { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
.category-pill.is-active {
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle), 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: var(--bs-primary);
    transform: translateY(-1px);
}

/* Generic subscore-btn fallback (now only used by .category-pill). */
.subscore-btn {
    cursor: pointer;
    color: var(--bs-body-color);
}

/* Info "i" button on metric cards - toggles a Bootstrap collapse panel
   that holds the education content (measure / formula / trigger rule /
   parameters). The live stats stay visible above; education is on
   demand. */
.info-icon-btn {
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-style: italic;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
    padding: 0;
}
.info-icon-btn:hover {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
    transform: scale(1.05);
}
.info-icon-btn[aria-expanded="true"] {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Metric cards inside the detail panel - distinct background + stronger
   shadow so they read as separate "wrapping" cards rather than blending
   into the parent .detail-panel card (which uses the same body-bg). */
.metric-card.card {
    background-color: var(--c-surface);
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.metric-card.card:hover {
    box-shadow: 0 8px 20px rgba(20, 17, 60, 0.08), 0 2px 4px rgba(20, 17, 60, 0.05) !important;
}

/* Detail-panel card uses the page bg so the inner metric cards pop. */
.detail-panel.card {
    background-color: var(--bs-tertiary-bg);
}

.metric-interp {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--bs-secondary);
    background: var(--bs-tertiary-bg);
}
.metric-interp p { line-height: 1.5; }
.metric-interp--good {
    background: var(--bs-success-bg-subtle);
    border-left-color: var(--bs-success);
    color: var(--bs-success-text-emphasis);
}
.metric-interp--ok {
    background: var(--bs-info-bg-subtle);
    border-left-color: var(--bs-info);
    color: var(--bs-info-text-emphasis);
}
.metric-interp--warn {
    background: var(--bs-warning-bg-subtle);
    border-left-color: var(--bs-warning);
    color: var(--bs-warning-text-emphasis);
}
.metric-interp--bad {
    background: var(--bs-danger-bg-subtle);
    border-left-color: var(--bs-danger);
    color: var(--bs-danger-text-emphasis);
}
.metric-interp--neutral {
    background: var(--bs-tertiary-bg);
    border-left-color: var(--bs-secondary);
    color: var(--bs-secondary-color);
}
.score-tone--good { background: var(--bs-success); }
.score-tone--ok   { background: var(--bs-info); }
.score-tone--warn { background: var(--bs-warning); }
.score-tone--bad  { background: var(--bs-danger); }
.score-tone--neutral { background: #6c6c87; }

/* Detail panel - prominent card under reports; the active block
   slides in via .show animation on the JS toggle. */
.detail-panel {
    margin-bottom: 2rem;
}
.detail-block {
    margin: 0;
}
.detail-empty {
    text-align: center;
    color: var(--bs-secondary-color);
}
.detail-empty h3 {
    color: var(--bs-emphasis-color);
}

/* Education panel — opens when the user clicks the (i) on a metric/signal
   card. Three icon-led rows (measures / formula / trigger rule / etc.)
   sit inside a soft tinted block so the content reads as a reference
   sidebar rather than a wall of small print. */
.metric-edu {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-shadow: none;
}
.metric-edu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.45rem;
}
.metric-edu-eyebrow {
    color: var(--bs-primary-text-emphasis);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.metric-edu-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
    text-decoration: none;
}
.metric-edu-link:hover { text-decoration: underline; }
.metric-edu-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.6rem;
    align-items: start;
}
.metric-edu-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
    font-family: "Fraunces", Georgia, serif;
}
.metric-edu-body { min-width: 0; }
.metric-edu-label {
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.metric-edu-text {
    margin: 0;
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    line-height: 1.5;
}
.metric-edu-code {
    display: block;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--bs-emphasis-color);
    word-break: break-word;
    overflow-x: auto;
}

/* Industry picker on scans.php — collapsible multi-select. */
.industry-picker {
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 0.85rem 0.95rem;
    background: var(--bs-tertiary-bg);
}
.industry-picker-list {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.85rem;
}
.industry-picker-options {
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-body-bg);
    padding: 0.25rem;
}
.industry-picker-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
}
.industry-picker-option:hover {
    background: var(--bs-primary-bg-subtle);
}
.industry-picker-option input[type="checkbox"]:checked + .industry-picker-option-label {
    font-weight: 600;
    color: var(--bs-primary-text-emphasis);
}
.industry-picker-option-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.industry-picker-option-count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--bs-tertiary-color);
}

/* Trigger history items inside metric cards. */
.trigger-item {
    padding: 0.25rem 0;
}
.trigger-item-arrow {
    font-weight: 700;
    width: 1em;
    text-align: center;
}
.trigger-item-arrow--bull { color: var(--bs-success); }
.trigger-item-arrow--bear { color: var(--bs-danger); }
.trigger-item-arrow--idle { color: var(--bs-tertiary-color); }

/* =============================================================
   Tearsheet aesthetic for brief.php (Phase D-B).

   Treats the individual report as a single dense research
   tearsheet: editorial typography (Fraunces for verdict prose,
   JetBrains Mono for numbers), hairline rule-lines instead of
   stacked rounded cards, score thermometers as the dominant
   visual element, and tight spacing throughout.

   Everything below is scoped under `.brief-tearsheet` so it
   only affects brief.php and doesn't bleed into other pages
   that still use the legacy .brief-hero / .report-card chrome.
   ============================================================= */

.brief-tearsheet {
    --ink:           #0f0c20;
    --ink-soft:      #2a2540;
    --ink-muted:     #5e5b78;
    --ink-faint:     #8e8ba9;
    --rule:          #d8d4ea;
    --rule-soft:     #e7e3f1;
    --brass:         #c8a13a;
    --indigo-deep:   #312e81;

    --tone-good:     var(--bs-success);
    --tone-ok:       var(--bs-info);
    --tone-warn:     var(--bs-warning);
    --tone-bad:      var(--bs-danger);
    --tone-neutral:  #8e8ba9;

    color: var(--ink);
    font-family: var(--bs-body-font-family);
    /* widen the canvas vs the default container-xl for denser layouts. */
    max-width: 1280px;
    margin: 1.5rem auto 3rem;
    padding: 0 1.25rem;
}

/* The page-level banner — slim editorial slab with a brass underline. */
.tearsheet-masthead {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 1.25rem;
    position: relative;
}
.tearsheet-masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--brass);
}
.tearsheet-masthead-title {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    margin: 0;
}
.tearsheet-masthead-meta {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    text-transform: uppercase;
}
.tearsheet-masthead-meta strong { color: var(--ink); font-weight: 600; }
.tearsheet-masthead-sep {
    color: var(--ink-faint);
    margin: 0 0.5rem;
}
.tearsheet-masthead-link {
    color: var(--av-ice);
    text-decoration: none;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}
.tearsheet-masthead-link:hover { color: var(--av-ice-deep); text-decoration: underline; }
.tearsheet-masthead-runid {
    margin-left: auto;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--ink-muted);
}

/* ---------- Hero slab: 3-band horizontal layout ---------- */
.tearsheet-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: stretch;
    padding: 1.25rem 0 1.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
    .tearsheet-hero { grid-template-columns: 1fr; gap: 1.25rem; }
}
.tearsheet-hero-id {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tearsheet-hero-ticker {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-weight: 700;
    font-size: clamp(3rem, 6vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
    font-variation-settings: "opsz" 144;
}
.tearsheet-hero-name {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--ink-soft);
    line-height: 1.25;
    margin: 0;
    max-width: 28ch;
}
.tearsheet-hero-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--c-fg-subtle, #7f8c8d);
    margin-top: 0.375rem;
    margin-bottom: 0;
}
.tearsheet-hero-industry {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}
.tearsheet-hero-industry:hover {
    background: var(--ink);
    color: #fff;
}
.tearsheet-hero-industry::after {
    content: "→";
    font-family: var(--bs-body-font-family);
    font-size: 0.85em;
    line-height: 1;
}

.tearsheet-hero-verdict {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--rule);
}
@media (max-width: 991.98px) {
    .tearsheet-hero-verdict { padding-left: 0; border-left: none; padding-top: 1rem; border-top: 1px solid var(--rule); }
}
.tearsheet-hero-eyebrow {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    margin: 0;
}
.tearsheet-hero-grade {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.tearsheet-hero-letter {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-variation-settings: "opsz" 144;
}
.tearsheet-hero-letter--good { color: var(--tone-good); }
.tearsheet-hero-letter--ok   { color: var(--tone-ok); }
.tearsheet-hero-letter--warn { color: var(--tone-warn); }
.tearsheet-hero-letter--bad  { color: var(--tone-bad); }
.tearsheet-hero-letter--neutral { color: var(--ink-faint); }
.tearsheet-hero-score {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.tearsheet-hero-score-num {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
}
.tearsheet-hero-score-denom {
    font-size: 1rem;
    color: var(--ink-faint);
}
/* ─── Hero stance pill + drivers row (Option C) ─── */
.tearsheet-hero-stance-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.tearsheet-hero-stance {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .025em;
    line-height: 1.3;
    white-space: nowrap;
    padding: .22rem .6rem;
    border-radius: 999px;
    border: 1.5px solid currentColor;
}
.tearsheet-hero-stance--good    { color: var(--tone-good); }
.tearsheet-hero-stance--ok      { color: var(--tone-ok); }
.tearsheet-hero-stance--warn    { color: var(--tone-warn); }
.tearsheet-hero-stance--bad     { color: var(--tone-bad); }
.tearsheet-hero-stance--neutral { color: var(--tone-neutral); }

.tearsheet-hero-stance-meta {
    font-size: .7rem;
    color: var(--bs-secondary-color);
}

.tearsheet-hero-drivers {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    list-style: none;
    padding: 0;
    margin: .2rem 0 0;
}

.tearsheet-hero-driver {
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.3;
    padding: .12rem .42rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    white-space: nowrap;
    cursor: default;
}
.tearsheet-hero-driver--bull { color: var(--tone-good); }
.tearsheet-hero-driver--bear { color: var(--tone-bad); }

/* --- Hero pick recommendation block --- */
.tearsheet-hero-pick {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    margin-top: .4rem;
    padding: .35rem .6rem .35rem .85rem;
    border-left: 3px solid var(--tone-neutral);
    font-size: .8rem;
    line-height: 1.4;
}
.tearsheet-hero-pick--bull  { border-left-color: var(--tone-good); }
.tearsheet-hero-pick--bear  { border-left-color: var(--tone-bad); }
.tearsheet-hero-pick--aside { border-left-color: var(--tone-neutral); opacity: .75; }

.tearsheet-hero-pick-label {
    font-weight: 600;
}
.tearsheet-hero-pick-detail {
    color: var(--ink-muted);
}
.tearsheet-hero-pick-note {
    flex-basis: 100%;
    font-size: .68rem;
    color: var(--ink-faint);
}

.tearsheet-hero-rank {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}
.tearsheet-hero-rank strong { color: var(--ink); font-weight: 600; }

.tearsheet-hero-fresh {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.4rem;
    text-align: right;
    padding-left: 1.25rem;
    border-left: 1px solid var(--rule);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
}
@media (max-width: 991.98px) {
    .tearsheet-hero-fresh { padding-left: 0; border-left: none; align-items: flex-start; text-align: left; padding-top: 1rem; border-top: 1px solid var(--rule); }
}
.tearsheet-hero-fresh-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    white-space: nowrap;
}
.tearsheet-hero-fresh-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
}
.tearsheet-hero-fresh-value {
    color: var(--ink);
    font-weight: 500;
}
.tearsheet-hero-fresh-value strong { font-weight: 600; }

/* ---------- Score thermometer (reusable) ---------- */
.thermo {
    position: relative;
    width: 100%;
    height: 22px;
    display: block;
}
.thermo--lg { height: 28px; }
.thermo--sm { height: 16px; }
.thermo-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--rule-soft);
    border-radius: 0;
}
.thermo--lg .thermo-track { height: 8px; }
.thermo--sm .thermo-track { height: 4px; }
.thermo-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--tone-neutral);
    border-radius: 0;
    transition: width 280ms ease-out;
}
.thermo--lg .thermo-fill { height: 8px; }
.thermo--sm .thermo-fill { height: 4px; }
.thermo-fill--good { background: var(--tone-good); }
.thermo-fill--ok   { background: var(--tone-ok); }
.thermo-fill--warn { background: var(--tone-warn); }
.thermo-fill--bad  { background: var(--tone-bad); }
.thermo-fill--neutral { background: var(--tone-neutral); }
.thermo-tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 12px;
    background: var(--ink);
    opacity: 0.35;
}
.thermo--lg .thermo-tick { height: 16px; }
.thermo--sm .thermo-tick { height: 8px; }
.thermo-tick--strong {
    background: var(--ink);
    opacity: 0.7;
    width: 2px;
}
.thermo-marker {
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
    padding: 0 0.2rem;
    line-height: 1;
}

/* ---------- Twin verdict panels (replaces report-card row) ---------- */
.tearsheet-verdicts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .tearsheet-verdicts { grid-template-columns: 1fr; }
    .tearsheet-verdict + .tearsheet-verdict { border-top: 1px solid var(--rule); border-left: none !important; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    .tearsheet-verdicts { grid-template-columns: 1fr; }
    .tearsheet-verdict + .tearsheet-verdict { border-top: 1px solid var(--rule); border-left: none !important; }
}
.tearsheet-verdict {
    position: relative;
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.tearsheet-verdict + .tearsheet-verdict {
    border-left: 1px solid var(--rule);
}
.tearsheet-verdict::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tone-neutral);
}
.tearsheet-verdict--good::before { background: var(--tone-good); }
.tearsheet-verdict--ok::before   { background: var(--tone-ok); }
.tearsheet-verdict--warn::before { background: var(--tone-warn); }
.tearsheet-verdict--bad::before  { background: var(--tone-bad); }
.tearsheet-verdict-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.tearsheet-verdict-eyebrow {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink-muted);
    letter-spacing: 0.01em;
}
.tearsheet-verdict-eyebrow strong {
    font-style: normal;
    color: var(--ink);
    font-weight: 700;
    font-size: 1.05rem;
    margin-right: 0.4rem;
}
.tearsheet-verdict-score-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.tearsheet-verdict-score-num {
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
}
.tearsheet-verdict-score-num--good { color: var(--tone-good); }
.tearsheet-verdict-score-num--ok   { color: var(--tone-ok); }
.tearsheet-verdict-score-num--warn { color: var(--tone-warn); }
.tearsheet-verdict-score-num--bad  { color: var(--tone-bad); }
.tearsheet-verdict-score-denom {
    font-size: 0.78rem;
    color: var(--ink-faint);
}
.tearsheet-verdict-line {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 0;
    max-width: 42ch;
}
.tearsheet-verdict-thermo { margin-top: 0.25rem; }
.tearsheet-verdict--gates {
    gap: 0.9rem;
}
.tearsheet-gate-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tearsheet-gate-count {
    border: 1px solid var(--rule);
    color: var(--ink-muted);
    padding: 0.12rem 0.38rem;
    line-height: 1;
}
.tearsheet-gate-count--bad { color: var(--tone-bad); border-color: color-mix(in srgb, var(--tone-bad) 45%, var(--rule)); }
.tearsheet-gate-count--warn { color: var(--tone-warn); border-color: color-mix(in srgb, var(--tone-warn) 45%, var(--rule)); }
.tearsheet-verdict-line--gate {
    font-style: normal;
    font-family: var(--font-body, system-ui, sans-serif);
}
/* Active-gate stub cards: gate name + what it being active MEANS (not a list
   of the signals it gated). */
.tearsheet-gate-stubs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.65rem 0 0;
    border-top: 1px dashed var(--rule);
}
.tearsheet-gate-stub {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-faint);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.tearsheet-gate-stub--bad { border-left-color: var(--tone-bad); }
.tearsheet-gate-stub--warn { border-left-color: var(--tone-warn); }
.tearsheet-gate-stub--good { border-left-color: var(--tone-good, #0d9266); }
.tearsheet-gate-stub-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}
.tearsheet-gate-stub-name {
    color: var(--ink);
    font-weight: 700;
    font-size: 0.84rem;
}
.tearsheet-gate-stub-state {
    margin-left: auto;
    color: var(--ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.tearsheet-gate-stub-text {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.78rem;
    line-height: 1.42;
}

.tearsheet-gate-showcase {
    list-style: none;
    margin: 0;
    padding: 0.65rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px dashed var(--rule);
}
.tearsheet-gate-showcase-row {
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
    font-size: 0.84rem;
    line-height: 1.3;
}
.tearsheet-gate-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-faint);
    align-self: center;
}
.tearsheet-gate-showcase-row--bad .tearsheet-gate-dot { background: var(--tone-bad); }
.tearsheet-gate-showcase-row--warn .tearsheet-gate-dot { background: var(--tone-warn); }
.tearsheet-gate-showcase-name {
    color: var(--ink);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tearsheet-gate-showcase-tail {
    color: var(--ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    justify-self: end;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}
.tearsheet-gate-clear-note {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.88rem;
}
.tearsheet-gate-detail-btn {
    appearance: none;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.55rem 0.75rem;
    width: fit-content;
    cursor: pointer;
}
.tearsheet-gate-detail-btn:hover {
    background: var(--ink);
    color: #fff;
}

/* Movers scoreboard inside each verdict panel. */
.tearsheet-movers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.25rem;
    margin-top: 0.4rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--rule);
}
.tearsheet-mover-head {
    grid-column: span 1;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    margin-bottom: 0.15rem;
}
.tearsheet-mover-head--good { color: var(--tone-good); }
.tearsheet-mover-head--bad  { color: var(--tone-bad); }
.tearsheet-mover-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.86rem;
    line-height: 1.3;
}
.tearsheet-mover-name {
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tearsheet-mover-score {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--ink);
    text-align: right;
}
.tearsheet-mover-score--good { color: var(--tone-good); }
.tearsheet-mover-score--ok   { color: var(--tone-ok); }
.tearsheet-mover-score--warn { color: var(--tone-warn); }
.tearsheet-mover-score--bad  { color: var(--tone-bad); }

/* ---------- Shared category tab strip ---------- */
.tearsheet-cattab {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 1.5rem 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    position: relative;
}
.tearsheet-cattab::before {
    content: "Categories";
    position: absolute;
    left: 0;
    top: -0.7rem;
    background: var(--bs-body-bg);
    padding: 0 0.5rem 0 0;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}
.tearsheet-cattab-group {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.tearsheet-cattab-group + .tearsheet-cattab-group {
    border-left: 1px solid var(--rule);
}
.tearsheet-cattab-label {
    flex: 0 0 auto;
    padding: 0.75rem 0.85rem 0.6rem 0;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
    align-self: center;
}
.tearsheet-cattab-group:first-child .tearsheet-cattab-label {
    padding-left: 0;
}
.tearsheet-cattab-group:not(:first-child) .tearsheet-cattab-label {
    padding-left: 1rem;
}
.tearsheet-cat {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.7rem 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    cursor: pointer;
    text-align: left;
    border-right: 1px solid var(--rule);
    transition: background-color 120ms ease-out;
    min-width: 8.5rem;
}
.tearsheet-cat:hover {
    background: var(--bs-tertiary-bg);
}
.tearsheet-cat.is-active {
    background: var(--ink);
    color: #fff;
}
.tearsheet-cat-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
}
.tearsheet-cat.is-active .tearsheet-cat-name { color: #fff; }
.tearsheet-cat-meta {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--ink-muted);
}
.tearsheet-cat.is-active .tearsheet-cat-meta { color: rgba(255,255,255,0.78); }
.tearsheet-cat-score {
    font-weight: 600;
    color: var(--ink);
}
.tearsheet-cat.is-active .tearsheet-cat-score { color: #fff; }
.tearsheet-cat-score--good { color: var(--tone-good); }
.tearsheet-cat-score--ok   { color: var(--tone-ok); }
.tearsheet-cat-score--warn { color: var(--tone-warn); }
.tearsheet-cat-score--bad  { color: var(--tone-bad); }
.tearsheet-cat.is-active .tearsheet-cat-score--good,
.tearsheet-cat.is-active .tearsheet-cat-score--ok,
.tearsheet-cat.is-active .tearsheet-cat-score--warn,
.tearsheet-cat.is-active .tearsheet-cat-score--bad { color: #fff; }
.tearsheet-cat-count { color: var(--ink-faint); }
.tearsheet-cat.is-active .tearsheet-cat-count { color: rgba(255,255,255,0.6); }

/* ---------- Raw financials matrix table ---------- */
.tearsheet-rawfin {
    margin: 0 0 1.75rem;
    padding: 0;
}
.tearsheet-rawfin-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ink);
    position: relative;
}
.tearsheet-rawfin-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 4.5rem;
    height: 2px;
    background: var(--brass);
}
.tearsheet-rawfin-title {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.tearsheet-rawfin-title h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.45rem;
    margin: 0;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.tearsheet-rawfin-deck {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ink-muted);
    max-width: 56ch;
    margin: 0;
}
.tearsheet-rawfin-asof {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    flex-shrink: 0;
}
.tearsheet-rawfin-asof strong { color: var(--ink); font-weight: 600; }

.tearsheet-rawfin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
}
@media (max-width: 767.98px) {
    .tearsheet-rawfin-grid { grid-template-columns: 1fr; gap: 0; }
}
.tearsheet-rawfin-category {
    border-top: 1px solid var(--rule);
    padding-top: 0.85rem;
    margin-top: 0.5rem;
    position: relative;
}
.tearsheet-rawfin-category:first-child,
.tearsheet-rawfin-grid > :nth-child(2) {
    /* The first item in each column shouldn't have a top rule — the
       section's bottom rule already serves that purpose. */
    /* default border-top wins; override only on the very first row of each col */
}
.tearsheet-rawfin-cat-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-muted);
    margin: 0 0 0.45rem 0;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.tearsheet-rawfin-cat-label::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background: var(--brass);
    display: inline-block;
    flex-shrink: 0;
}
.tearsheet-rawfin-table {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.5rem minmax(6rem, 9rem) 2.6rem;
    column-gap: 0.85rem;
    row-gap: 0.05rem;
    align-items: center;
}
.tearsheet-rawfin-row {
    display: contents;
}
.tearsheet-rawfin-row > * {
    padding: 0.32rem 0;
    border-bottom: 1px dotted var(--rule-soft);
    line-height: 1.2;
}
.tearsheet-rawfin-row:hover > * {
    background: rgba(79, 70, 229, 0.04);
}
.tearsheet-rawfin-name {
    font-size: 0.86rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tearsheet-rawfin-value {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    color: var(--ink);
}
.tearsheet-rawfin-value--good { color: var(--tone-good); }
.tearsheet-rawfin-value--ok   { color: var(--tone-ok); }
.tearsheet-rawfin-value--warn { color: var(--tone-warn); }
.tearsheet-rawfin-value--bad  { color: var(--tone-bad); }
.tearsheet-rawfin-bar {
    min-width: 6rem;
}
.tearsheet-rawfin-score {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--ink-faint);
    text-align: right;
}

/* ---------- Detail panel polish (works with existing JS) ---------- */
.brief-tearsheet .detail-panel.card {
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
    overflow: visible;
}
.brief-tearsheet .detail-panel .tone-strip {
    display: none;
}
.brief-tearsheet .detail-empty {
    padding: 1.5rem 1.5rem 1.75rem !important;
    text-align: left;
    border-left: 3px solid var(--brass);
}
.brief-tearsheet .detail-empty h3 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    margin: 0 0 0.35rem;
}
.brief-tearsheet .detail-empty p {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    color: var(--ink-muted);
    margin: 0;
}
.brief-tearsheet .detail-block .card-body {
    padding: 1.25rem 1.5rem !important;
}
.brief-tearsheet .detail-block > div.card-body:first-of-type {
    border-bottom: 1px solid var(--rule) !important;
}
.brief-tearsheet .detail-block h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Slight tightening of metric-card padding so the detail-panel
   doesn't dwarf everything above it. */
.brief-tearsheet .metric-card.card .card-body {
    padding: 0.95rem 1rem !important;
}
.brief-tearsheet .metric-card.card {
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Hide the legacy in-card category-pill nav since we render a
   shared tab strip above the detail panel instead. */
.brief-tearsheet .category-nav-group {
    display: none;
}

/* Killer detail: number-display heading aligns mono-numerics
   along their baselines, not centred. */
.tearsheet-numhead {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* =============================================================
   Phase D-G — brief.php restructure:
     • Synopsis hidden behind a hero pill toggle.
     • Subcategory chips moved inside their parent verdict card.
     • Detail panel + raw financials unified under a tabbed
       Breakdown section so they no longer stack vertically.
     • Section dividers gain editorial labels.
   ============================================================= */

/* ---------- Hero chip cluster: industry pill + synopsis toggle ---------- */
.tearsheet-hero-chips {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.tearsheet-hero-chips .tearsheet-hero-industry {
    margin-top: 0;
}
.tearsheet-hero-about-btn {
    appearance: none;
    background: transparent;
    border: 1px dashed var(--ink-faint);
    color: var(--ink-muted);
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.78rem;
    padding: 0.22rem 0.6rem 0.22rem 0.45rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    transition: color 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out;
}
.tearsheet-hero-about-btn:hover,
.tearsheet-hero-about-btn:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
    background: rgba(200, 161, 58, 0.08);
    outline: none;
}
.tearsheet-hero-about-btn-glyph {
    font-family: "Fraunces", Georgia, serif;
    font-style: normal;
    font-weight: 600;
    color: var(--brass);
    font-size: 0.95rem;
    line-height: 1;
}
.tearsheet-hero-about-btn-caret {
    font-size: 0.65rem;
    color: var(--ink-faint);
    transition: transform 180ms ease-out;
    line-height: 1;
}
.tearsheet-hero-about-btn[aria-expanded="true"] .tearsheet-hero-about-btn-caret {
    transform: rotate(-180deg);
}
.tearsheet-hero-about-btn[aria-expanded="true"] {
    border-style: solid;
    color: var(--ink);
    border-color: var(--ink);
}

.tearsheet-synopsis-wrap {
    margin: 0 0 1.25rem;
}
.tearsheet-synopsis {
    position: relative;
    padding: 1rem 1.1rem 1rem 1.4rem;
    background: linear-gradient(
        180deg,
        rgba(200, 161, 58, 0.06) 0%,
        rgba(200, 161, 58, 0.0) 100%
    );
    border: 1px solid var(--rule);
    border-left: 3px solid var(--brass);
}
.tearsheet-synopsis-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    margin: 0 0 0.4rem;
}
.tearsheet-synopsis-text {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 78ch;
    margin: 0;
}

/* ---------- Editorial section dividers ---------- */
.tearsheet-section-rule {
    position: relative;
    height: 0;
    border-top: 1px solid var(--ink);
    margin: 1.5rem 0 1.4rem;
    overflow: visible;
}
.tearsheet-section-rule::after {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 4.5rem;
    height: 2px;
    background: var(--brass);
}
.tearsheet-section-rule-label {
    position: absolute;
    left: 5rem;
    top: -0.7rem;
    background: var(--bs-body-bg);
    padding: 0 0.55rem;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}

/* ---------- Subcategory chips embedded in each verdict card ---------- */
.tearsheet-verdicts {
    /* Slightly more breathing room — the cards are now self-contained
       reports rather than headers above a separate cattab strip. */
    margin-top: 0;
    margin-bottom: 0;
}
.tearsheet-verdict-cats {
    margin-top: 0.4rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--rule);
}
.tearsheet-verdict-cats-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    margin: 0 0 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.tearsheet-verdict-cats-eyebrow-mark {
    color: var(--brass);
    font-size: 0.85rem;
    line-height: 1;
}
.tearsheet-verdict-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.4rem;
}
.tearsheet-vcat {
    appearance: none;
    background: #fff;
    border: 1px solid var(--rule);
    padding: 0.45rem 0.55rem 0.45rem 0;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.55rem;
    transition: border-color 120ms ease-out, background-color 120ms ease-out, transform 120ms ease-out;
    position: relative;
}
.tearsheet-vcat:hover {
    border-color: var(--ink);
    background: #fafafa;
}
.tearsheet-vcat:active { transform: translateY(1px); }
.tearsheet-vcat:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: -2px;
}
.tearsheet-vcat.is-active {
    background: var(--ink);
    border-color: var(--ink);
}
.tearsheet-vcat.is-active .tearsheet-vcat-name { color: #fff; }
.tearsheet-vcat.is-active .tearsheet-vcat-count { color: rgba(255,255,255,0.65); }
.tearsheet-vcat.is-active .tearsheet-vcat-score { color: #fff !important; }
.tearsheet-vcat-bar {
    align-self: stretch;
    background: var(--tone-neutral);
}
.tearsheet-vcat--good .tearsheet-vcat-bar { background: var(--tone-good); }
.tearsheet-vcat--ok   .tearsheet-vcat-bar { background: var(--tone-ok); }
.tearsheet-vcat--warn .tearsheet-vcat-bar { background: var(--tone-warn); }
.tearsheet-vcat--bad  .tearsheet-vcat-bar { background: var(--tone-bad); }
.tearsheet-vcat-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}
.tearsheet-vcat-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tearsheet-vcat-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tearsheet-vcat-score {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    color: var(--ink);
}
.tearsheet-vcat-score--good { color: var(--tone-good); }
.tearsheet-vcat-score--ok   { color: var(--tone-ok); }
.tearsheet-vcat-score--warn { color: var(--tone-warn); }
.tearsheet-vcat-score--bad  { color: var(--tone-bad); }

/* ---------- Breakdown section + view toggle (Detail / Raw) ---------- */
.tearsheet-breakdown {
    margin: 2rem 0 0;
    padding-top: 0;
}
.tearsheet-breakdown-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.7rem;
    margin-bottom: 1.25rem;
    position: relative;
}
.tearsheet-breakdown-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 4.5rem;
    height: 2px;
    background: var(--brass);
}
.tearsheet-breakdown-headline { display: flex; flex-direction: column; gap: 0.15rem; }
.tearsheet-breakdown-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    margin: 0;
}
.tearsheet-breakdown-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.005em;
}

.tearsheet-viewtoggle {
    display: inline-flex;
    border: 1px solid var(--ink);
    background: #fff;
    padding: 0;
}
.tearsheet-viewtoggle-btn {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--rule);
    color: var(--ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: background-color 120ms ease-out, color 120ms ease-out;
    line-height: 1;
}
.tearsheet-viewtoggle-btn:last-child { border-right: 0; }
.tearsheet-viewtoggle-btn:hover {
    background: rgba(15, 12, 32, 0.04);
    color: var(--ink);
}
.tearsheet-viewtoggle-btn.is-active {
    background: var(--ink);
    color: #fff;
}
.tearsheet-viewtoggle-btn.is-active .tearsheet-viewtoggle-glyph {
    color: var(--brass);
}
.tearsheet-viewtoggle-glyph {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--ink-faint);
}

.tearsheet-viewpane[hidden] { display: none !important; }
.tearsheet-viewpane { animation: tearsheet-pane-fade 220ms ease-out both; }
@keyframes tearsheet-pane-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* When the Raw pane is shown inside Breakdown, drop the standalone
   bottom margin that the rawfin block used in the legacy stacked layout. */
.tearsheet-viewpane[data-view-pane="raw"] .tearsheet-rawfin {
    margin: 0;
}

.gates-panel {
    background: var(--surface, #fff);
}
.gates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem;
}
.gate-detail-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 1rem 1.1rem 1.1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.gate-detail-head {
    display: flex;
    /* wrap: a wide state badge ("BULLISH COUNTER-REGIME") drops below the
       title instead of squeezing it into a mid-word break ("MA Crossove/r") */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.35rem 0.85rem;
    align-items: flex-start;
    min-width: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.gate-detail-title {
    min-width: 0;
}
.gate-detail-head h3 {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--ink);
}
.gate-detail-head .tone-badge { white-space: nowrap; }

/* Quiet gates strip — clear / no-data gates collapse to labeled chip rows
   instead of full cards full of "No raw value". */
.gates-quiet {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--rule) 70%, transparent);
}
.gates-quiet-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    min-width: 0;
}
.gates-quiet-label {
    flex-shrink: 0;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint, #8a8f98);
}
.gate-detail-source,
.gate-detail-label {
    display: block;
    margin: 0 0 0.22rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    font-weight: 600;
}
.gate-detail-readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.85rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--rule) 8%, transparent);
}
.gate-detail-readout > div { min-width: 0; }
.gate-detail-readout dt.gate-detail-label { margin-bottom: 0.2rem; }
.gate-detail-readout dd {
    margin: 0;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    word-break: break-word;
}
.gate-detail-voids,
.gate-detail-passes {
    padding-top: 0.2rem;
    margin: 0;
}
.gate-detail-voids .gate-detail-label,
.gate-detail-passes .gate-detail-label { margin-bottom: 0.45rem; }
.gate-detail-foot {
    margin-top: 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.gate-detail-foot p,
.gate-detail-note {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.5;
}
.gate-detail-note--quiet { color: var(--ink-muted); font-style: italic; }
.gate-detail-chart {
    margin: 0;
}
.gate-detail-chart .fchart,
.gate-detail-chart .sparkline {
    width: 100%;
    height: auto;
    display: block;
}

/* Detail empty-state with new editorial eyebrow. */
.brief-tearsheet .detail-empty .detail-empty-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    margin: 0 0 0.35rem;
}

/* =============================================================
   Screener page (results.php / Phase D-C, D-D, D-E).
   Same tearsheet aesthetic as brief.php — editorial typography,
   hairline rules, mono-numeric, compact industry tags.
   ============================================================= */

.brief-tearsheet .screener-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: end;
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
    .brief-tearsheet .screener-hero { grid-template-columns: 1fr; gap: 1rem; }
}
.screener-hero-id { display: flex; flex-direction: column; gap: 0.3rem; }
.screener-hero-title {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ink);
    font-variation-settings: "opsz" 144;
}
.screener-hero-title-mono {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7em;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0;
}
.screener-hero-deck {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0.2rem 0 0;
}
.screener-hero-back {
    display: inline-flex;
    margin-top: 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-decoration: none;
    align-self: flex-start;
}
.screener-hero-back:hover { color: var(--ink); }
.screener-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.screener-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--rule);
}
.screener-stat-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.72rem;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.screener-stat-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.screener-stat-num {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
}
.screener-stat-num--good { color: var(--tone-good); }
.screener-stat-num--ok   { color: var(--tone-ok); }
.screener-stat-num--warn { color: var(--tone-warn); }
.screener-stat-num--bad  { color: var(--tone-bad); }
.screener-stat-bar { flex: 1 1 auto; }

/* ---- Controls bar ---- */
.screener-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem 0 0.9rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 0;
    position: relative;
}
.screener-controls::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 3rem;
    height: 2px;
    background: var(--brass);
}
.screener-controls-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.screener-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.screener-search-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}
.screener-search-input {
    appearance: none;
    border: 0;
    border-bottom: 1px solid var(--ink);
    background: transparent;
    padding: 0.25rem 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.92rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    min-width: 9rem;
    outline: none;
    transition: border-color 120ms ease-out;
}
.screener-search-input:focus { border-color: var(--brass); }
.screener-search-input::placeholder { color: var(--ink-faint); font-weight: 400; letter-spacing: 0.02em; }

.screener-sort {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.screener-sort-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-right: 0.25rem;
}
.screener-sort-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    transition: all 120ms ease-out;
}
.screener-sort-btn:hover { border-color: var(--ink); color: var(--ink); }
.screener-sort-btn.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.screener-status {
    margin-left: auto;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--ink-muted);
}
.screener-status #screener-count { color: var(--ink); font-weight: 600; }

/* ---- Column picker (Phase 1 of customizable ticker list) -------------- */
.screener-cols { position: relative; }
.screener-cols-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.32rem 0.6rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--ink-muted);
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.screener-cols-btn:hover { border-color: var(--ink); color: var(--ink); }
.screener-cols-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.screener-cols-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
    padding: 0.6rem 0.5rem;
    min-width: 200px;
    max-height: 360px;
    overflow-y: auto;
}
.screener-cols-eyebrow {
    margin: 0 0 0.45rem;
    padding: 0 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.screener-cols-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.45rem;
    border-radius: 3px;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
}
.screener-cols-row:hover { background: color-mix(in srgb, var(--ink, #000) 5%, transparent); }
.screener-cols-row.is-locked { cursor: default; color: var(--ink-muted); }
.screener-cols-row input[type="checkbox"] { accent-color: var(--ink); }
.screener-cols-lock { margin-left: auto; font-size: 0.7rem; opacity: 0.55; }

/* ---- Sortable header click affordance -------------------------------- */
.screener-th--sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.screener-th--sortable:hover { color: var(--ink); }
.screener-sort-arrow {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.62rem;
    color: var(--ink);
    min-width: 0.55rem;
}
.screener-th--sortable.is-sorted { color: var(--ink); font-weight: 650; }

/* Phase 2: extra metric/signal columns */
.screener-cols-eyebrow--ex,
.screener-cols-eyebrow--add { margin-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); padding-top: 0.5rem; }
.screener-cols-row--added {
    cursor: default;
    font-size: 0.78rem;
}
.screener-cols-added-type {
    display: inline-block;
    min-width: 1.1rem;
    text-align: center;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.05rem 0.25rem;
}
.screener-cols-remove,
.screener-col-remove {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 0.3rem;
    margin-left: auto;
    cursor: pointer;
    border-radius: 3px;
}
.screener-cols-remove:hover,
.screener-col-remove:hover { background: color-mix(in srgb, var(--c-bad, #d9534f) 15%, transparent); color: var(--c-bad, #d9534f); }
.screener-col-remove {
    margin-left: 0.4rem;
    font-size: 0.85rem;
    opacity: 0.4;
}
.screener-th--sortable:hover .screener-col-remove { opacity: 1; }
.screener-cols-add-select {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.78rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}
.screener-cols-add-select:hover { border-color: var(--ink); }
.screener-th-extra { white-space: nowrap; }
.screener-td-extra {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.82rem;
    text-align: right;
    color: var(--ink);
    white-space: nowrap;
}
.screener-extra-unit { color: var(--ink-muted); font-size: 0.72rem; margin-left: 0.15rem; }
.screener-extra-arrow { font-weight: 700; margin-left: 0.25rem; }
.screener-extra-arrow--good { color: var(--c-good, #46b57f); }
.screener-extra-arrow--bad { color: var(--c-bad, #d9534f); }

.screener-industry-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: nowrap;
}
.screener-industry-eyebrow {
    flex: 0 0 auto;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}
.screener-industry-chips {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.screener-chip {
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--bs-body-font-family);
    font-size: 0.74rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 120ms ease-out;
    max-width: 12rem;
}
.screener-chip:hover { border-color: var(--ink); color: var(--ink); }
.screener-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.screener-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 9rem;
}
.screener-chip-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--ink-faint);
    font-weight: 500;
}
.screener-chip.is-active .screener-chip-count { color: rgba(255,255,255,0.7); }

/* Overflow popover for industries past the visible cap. */
.screener-chip-more { position: relative; display: inline-block; }
.screener-chip--more {
    border-style: dashed;
    color: var(--ink-muted);
    font-style: italic;
    font-family: "Fraunces", Georgia, serif;
}
.screener-chip--more.is-active {
    background: var(--ink);
    color: #fff;
    border-style: solid;
}
.screener-chip-more-pop {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 22rem;
    max-height: 22rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ink);
    box-shadow: 0 10px 36px rgba(15, 12, 32, 0.18);
    z-index: 30;
    padding: 0.4rem 0;
}
.screener-chip-more-search {
    padding: 0.4rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--rule);
}
.screener-chip-more-search input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    padding: 0.2rem 0;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.85rem;
    outline: none;
}
.screener-chip-more-search input:focus { border-color: var(--brass); }
.screener-chip-more-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.screener-chip-more-item {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.screener-chip-more-item:hover { background: var(--bs-tertiary-bg); color: var(--ink); }
.screener-chip-more-item.is-active { background: var(--ink); color: #fff; }
.screener-chip-more-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--ink-faint);
}
.screener-chip-more-item.is-active .screener-chip-more-count { color: rgba(255,255,255,0.7); }

/* ---- Ticker table ---- */
.screener-tablewrap {
    margin-top: 0.9rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--rule);
}
.screener-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.screener-th {
    text-align: left;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--ink);
    white-space: nowrap;
    background: transparent;
}
.screener-th-rank   { width: 2.5rem; text-align: right; }
.screener-th-ticker { width: 6rem; }
.screener-th-industry { width: 14%; max-width: 14rem; }
.screener-th-grade  { width: 3.5rem; text-align: center; }
.screener-th-score  { width: 24%; }
.screener-th-sub    { width: 4.5rem; text-align: right; }
.screener-th-run    { width: 8rem; text-align: right; }

.screener-row {
    transition: background-color 100ms ease-out;
    cursor: pointer;
}
.screener-row:hover { background: rgba(79, 70, 229, 0.04); }
.screener-row:focus { outline: 2px solid var(--brass); outline-offset: -2px; }
.screener-row:nth-child(even) { background: rgba(15, 12, 32, 0.018); }
.screener-row:nth-child(even):hover { background: rgba(79, 70, 229, 0.05); }

.screener-td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px dotted var(--rule-soft);
    vertical-align: middle;
    line-height: 1.3;
}
.screener-td-rank {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--ink-faint);
    text-align: right;
    padding-right: 0.4rem;
}
.screener-td-ticker .screener-tickerlink {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-decoration: none;
}
.screener-td-ticker .screener-tickerlink:hover { color: var(--bs-primary); }
.screener-td-grade { text-align: center; }

.screener-td-industry {
    padding-right: 0.4rem;
    max-width: 14rem;
}
.screener-industry-tag {
    display: inline-block;
    max-width: 100%;
    padding: 0.06rem 0.4rem;
    background: transparent;
    border-left: 2px solid var(--rule);
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0;
    transition: border-color 120ms ease-out, color 120ms ease-out;
}
.screener-row:hover .screener-industry-tag {
    border-left-color: var(--ink);
    color: var(--ink-soft);
}

.screener-score-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.screener-score-num {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.95rem;
    font-weight: 600;
    flex: 0 0 2.6rem;
    text-align: right;
}
.screener-score-num--good { color: var(--tone-good); }
.screener-score-num--ok   { color: var(--tone-ok); }
.screener-score-num--warn { color: var(--tone-warn); }
.screener-score-num--bad  { color: var(--tone-bad); }
.screener-score-bar { flex: 1 1 auto; min-width: 5rem; }

.screener-td-sub {
    text-align: right;
}
.screener-sub-chip {
    display: inline-block;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.05rem 0.4rem;
    background: var(--bs-tertiary-bg);
    border-radius: 0;
}
.screener-sub-chip--good { color: var(--tone-good); background: rgba(13, 146, 102, 0.08); }
.screener-sub-chip--ok   { color: var(--tone-ok);   background: rgba(37, 99, 235, 0.07); }
.screener-sub-chip--warn { color: var(--tone-warn); background: rgba(194, 83, 11, 0.08); }
.screener-sub-chip--bad  { color: var(--tone-bad);  background: rgba(190, 21, 71, 0.07); }
.screener-sub-chip--neutral { color: var(--ink-faint); }

.screener-td-run {
    text-align: right;
}
.screener-run-meta {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* ---- Filter panel (Phase D-D) ---- */
.screener-filters {
    margin: 0 0 0.9rem;
}
.screener-filters-drawer {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: rgba(15, 12, 32, 0.012);
}
.screener-filters-drawer[open] {
    background: #fff;
    border-top-color: var(--ink);
}
.screener-filters-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: var(--ink);
    transition: background-color 100ms ease-out;
}
.screener-filters-summary::-webkit-details-marker { display: none; }
.screener-filters-summary:hover { background: rgba(15, 12, 32, 0.025); }
.screener-filters-summary-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink);
}
.screener-filters-summary-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--ink);
    color: #fff;
    padding: 0.12rem 0.4rem;
}
.screener-filters-summary-chev {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
    transition: transform 180ms ease-out;
}
.screener-filters-drawer[open] .screener-filters-summary-chev {
    transform: rotate(180deg);
}
.screener-filters-form {
    padding: 0.6rem 1rem 1.1rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.screener-filters-section { display: flex; flex-direction: column; gap: 0.4rem; }
.screener-filters-section-eyebrow {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin: 0;
    letter-spacing: 0.02em;
}
.screener-filters-section-deck {
    color: var(--ink-faint);
    font-size: 0.7rem;
}
.screener-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.6rem 1rem;
}
.screener-filters-cell { display: flex; flex-direction: column; gap: 0.2rem; }
.screener-filters-cell-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
}
.screener-filters-cell-unit {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.68rem;
    color: var(--ink-faint);
    font-weight: 500;
}
.screener-filters-range { display: flex; align-items: center; gap: 0.4rem; }
.screener-filters-range label { display: inline-flex; align-items: center; gap: 0.2rem; flex: 1 1 0; min-width: 0; }
.screener-filters-range-tag {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--ink-faint);
    flex: 0 0 auto;
}
.screener-filters-range input {
    appearance: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    padding: 0.2rem 0.3rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.82rem;
    color: var(--ink);
    width: 100%;
    min-width: 0;
    outline: none;
    transition: border-color 120ms ease-out;
}
.screener-filters-range input:focus { border-color: var(--brass); }
.screener-filters-range input::placeholder { color: var(--ink-faint); }
.screener-filters-sigs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem 1rem;
}
.screener-sig {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px dotted var(--rule-soft);
}
.screener-sig-name {
    font-size: 0.82rem;
    color: var(--ink-soft);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.screener-sig-triplet { display: inline-flex; gap: 0; }
.screener-sig-opt {
    appearance: none;
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--ink-soft);
    padding: 0.2rem 0.45rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: -1px;
}
.screener-sig-opt:first-child { margin-left: 0; }
.screener-sig-opt input { display: none; }
.screener-sig-opt:hover { border-color: var(--ink); color: var(--ink); position: relative; z-index: 1; }
.screener-sig-opt--bull.is-active { background: var(--tone-good); border-color: var(--tone-good); color: #fff; }
.screener-sig-opt--bear.is-active { background: var(--tone-bad);  border-color: var(--tone-bad);  color: #fff; }
.screener-sig-opt--any.is-active  { background: var(--ink);       border-color: var(--ink);       color: #fff; }
.screener-filters-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--rule);
}
.screener-filters-apply {
    appearance: none;
    background: var(--ink);
    color: #fff;
    border: 0;
    padding: 0.4rem 1rem;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}
.screener-filters-apply:hover { background: var(--indigo-deep); }
.screener-filters-reset {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    text-decoration: none;
}
.screener-filters-reset:hover { color: var(--tone-bad); }

/* Active-filter pill strip below the drawer. */
.screener-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0;
}
.screener-active-filters-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-right: 0.25rem;
}
.screener-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-decoration: none;
    background: transparent;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}
.screener-pill:hover { background: var(--ink); color: #fff; }
.screener-pill-tag {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.74rem;
    color: var(--ink-muted);
    margin-right: 0.15rem;
}
.screener-pill:hover .screener-pill-tag { color: rgba(255,255,255,0.7); }
.screener-pill-x {
    color: var(--ink-faint);
    font-weight: 600;
    margin-left: 0.1rem;
}
.screener-pill:hover .screener-pill-x { color: #fff; }
.screener-pill--bull { border-color: var(--tone-good); color: var(--tone-good); }
.screener-pill--bull:hover { background: var(--tone-good); color: #fff; }
.screener-pill--bull .screener-pill-tag { color: var(--tone-good); }
.screener-pill--bear { border-color: var(--tone-bad); color: var(--tone-bad); }
.screener-pill--bear:hover { background: var(--tone-bad); color: #fff; }
.screener-pill--bear .screener-pill-tag { color: var(--tone-bad); }
.screener-pill--clear {
    border-style: dashed;
    color: var(--ink-muted);
    font-style: italic;
    font-family: "Fraunces", Georgia, serif;
}

/* =============================================================
   Knowledge base / education page (metrics.php / Phase D-F).
   Master-detail: editorial sidebar of metrics on the left, three-
   depth reading pane on the right. Tabs split Fundamentals from
   Technical signals so the sidebar stays a sensible length.
   ============================================================= */

.brief-tearsheet .kb-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
    gap: 2rem;
    align-items: end;
    padding: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .brief-tearsheet .kb-hero { grid-template-columns: 1fr; gap: 1rem; }
}
.kb-hero-title {
    font-family: "Fraunces", "Iowan Old Style", Palatino, Georgia, ui-serif, serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4vw, 3.1rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0;
    font-variation-settings: "opsz" 144;
}
.kb-hero-title em {
    font-style: italic;
    color: var(--indigo-deep);
    font-weight: 600;
}
.kb-hero-deck {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 56ch;
    line-height: 1.45;
    margin: 0.4rem 0 0;
}
.kb-hero-stats {
    display: flex;
    gap: 1.5rem;
    align-items: end;
    justify-content: flex-end;
}
.kb-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: flex-end;
    padding-left: 1rem;
    border-left: 1px solid var(--rule);
}
.kb-hero-stat-num {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
}
.kb-hero-stat-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ---- Tabs ---- */
.kb-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ink);
    margin: 1.25rem 0 0;
    overflow-x: auto;
}
.kb-tab {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.7rem 1.1rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    border-right: 1px solid var(--rule);
    cursor: pointer;
    color: var(--ink);
    transition: background-color 100ms ease-out;
    min-width: 12rem;
}
.kb-tab:hover { background: var(--bs-tertiary-bg); }
.kb-tab.is-active {
    background: var(--ink);
    color: #fff;
    border-right-color: var(--ink);
}
.kb-tab-eyebrow {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.7rem;
    color: var(--ink-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kb-tab.is-active .kb-tab-eyebrow { color: rgba(255,255,255,0.6); }
.kb-tab-name {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
}
.kb-tab-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    color: var(--ink-muted);
}
.kb-tab.is-active .kb-tab-count { color: rgba(255,255,255,0.65); }

/* ---- Master-detail shell ---- */
.kb-shell { margin-top: 0; }
.kb-pane {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--rule);
}
@media (max-width: 991.98px) {
    .kb-pane { grid-template-columns: 1fr; }
}

/* ---- Sidebar rail ---- */
.kb-sidebar {
    border-right: 1px solid var(--rule);
    padding: 0.75rem 0.75rem 1rem 0;
    max-height: 80vh;
    overflow-y: auto;
    position: sticky;
    top: 0;
}
@media (max-width: 991.98px) {
    .kb-sidebar { border-right: 0; border-bottom: 1px solid var(--rule); max-height: none; padding-right: 0; position: relative; }
}
.kb-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0;
}
.kb-search-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    flex: 0 0 auto;
}
.kb-search-input {
    appearance: none;
    border: 0;
    border-bottom: 1px solid var(--rule);
    background: transparent;
    padding: 0.2rem 0.3rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.82rem;
    color: var(--ink);
    width: 100%;
    outline: none;
    transition: border-color 120ms ease-out;
}
.kb-search-input:focus { border-color: var(--brass); }
.kb-search-input::placeholder { color: var(--ink-faint); }
.kb-cat { margin-bottom: 0.85rem; }
.kb-cat-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.2rem 0 0.25rem;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 0.3rem;
}
.kb-cat-name {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.kb-cat-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--ink-faint);
}
.kb-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.kb-side-item {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    padding: 0.28rem 0.45rem 0.28rem 0.55rem;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 0.86rem;
    line-height: 1.3;
    transition: background-color 100ms ease-out, color 100ms ease-out;
    position: relative;
}
.kb-side-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: transparent;
    transition: background-color 100ms ease-out;
}
.kb-side-item:hover { background: var(--bs-tertiary-bg); color: var(--ink); }
.kb-side-item:hover::before { background: var(--rule); }
.kb-side-item.is-active {
    background: var(--ink);
    color: #fff;
}
.kb-side-item.is-active::before { background: var(--brass); }
.kb-side-name { display: block; }

/* ---- Reading pane ---- */
.kb-detail {
    padding: 1rem 1.25rem 2.5rem 1.5rem;
    max-width: 64rem;
}
@media (max-width: 991.98px) {
    .kb-detail { padding: 1rem 0 2rem; }
}
.kb-entry { padding-bottom: 1rem; }
.kb-entry-head {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 1rem;
    position: relative;
}
.kb-entry-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 3.5rem;
    height: 2px;
    background: var(--brass);
}
.kb-entry-eyebrow {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    margin: 0;
}
.kb-entry-sep { color: var(--ink-faint); margin: 0 0.4rem; }
.kb-entry-title {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
    font-variation-settings: "opsz" 144;
}
.kb-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.4rem;
}
.kb-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
}
.kb-tag--good { color: var(--tone-good); border-color: var(--tone-good); }
.kb-tag--bad  { color: var(--tone-bad);  border-color: var(--tone-bad); }
.kb-tag--neutral { color: var(--ink-muted); }
.kb-tag-slug {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--ink-faint);
    background: transparent;
    padding: 0;
}
.kb-entry-lede {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0 1.25rem;
}
.kb-entry-tldr {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 0;
    max-width: 60ch;
}
.kb-entry-long {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.55;
    max-width: 64ch;
}

/* ---- Three-depth strip ---- */
.kb-depth-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
    .kb-depth-strip { grid-template-columns: 1fr; }
}
.kb-depth {
    padding: 0.9rem 1.1rem 1.2rem 1rem;
    border-right: 1px solid var(--rule);
    position: relative;
}
.kb-depth:last-child { border-right: 0; }
@media (max-width: 767.98px) {
    .kb-depth { border-right: 0; border-bottom: 1px solid var(--rule); }
    .kb-depth:last-child { border-bottom: 0; }
}
.kb-depth-label {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink);
    letter-spacing: 0.01em;
}
.kb-depth-num {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--ink);
    color: #fff;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.kb-depth--measure .kb-depth-num { background: var(--ink); }
.kb-depth--formula .kb-depth-num { background: var(--indigo-deep); }
.kb-depth--interp  .kb-depth-num { background: var(--brass); color: var(--ink); }
.kb-depth-body { display: flex; flex-direction: column; gap: 0.45rem; }
.kb-depth-text {
    font-size: 0.92rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}
.kb-depth-text--empty {
    font-style: italic;
    color: var(--ink-faint);
}
.kb-depth-code {
    display: block;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--bs-tertiary-bg);
    border-left: 2px solid var(--indigo-deep);
    padding: 0.5rem 0.7rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.kb-depth-code--params {
    border-left-color: var(--brass);
    font-size: 0.78rem;
}
.kb-depth-subline {
    font-size: 0.84rem;
    color: var(--ink-muted);
    margin: 0;
}
.kb-depth-subline-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    color: var(--ink-faint);
    margin-right: 0.3rem;
}

/* ---- Interpretation list inside depth iii ---- */
.kb-interp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.kb-interp-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--rule);
    background: var(--bs-tertiary-bg);
}
.kb-interp-row--good { border-left-color: var(--tone-good); }
.kb-interp-row--warn { border-left-color: var(--tone-warn); }
.kb-interp-row--bad  { border-left-color: var(--tone-bad); }
.kb-interp-label {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.74rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kb-interp-row--good .kb-interp-label { color: var(--tone-good); }
.kb-interp-row--warn .kb-interp-label { color: var(--tone-warn); }
.kb-interp-row--bad  .kb-interp-label { color: var(--tone-bad); }
.kb-interp-text {
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.45;
}

/* ---- Entry footer ---- */
.kb-entry-foot { padding-top: 0.4rem; }
.kb-entry-foot-eyebrow {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.3rem;
}
.kb-cites {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.kb-cites a {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--indigo-deep);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.kb-cites a:hover { text-decoration: underline; color: var(--ink); }

.kb-gates {
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
}
.kb-gate-list {
    display: grid;
    gap: 0.6rem;
}
.kb-gate-state {
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--surface) 92%, var(--brass) 8%);
    padding: 0.75rem 0.85rem;
}
.kb-gate-state-title {
    margin: 0 0 0.45rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.kb-gate-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.kb-gate-rule {
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
    line-height: 1.45;
}
.kb-gate-rule-target {
    display: block;
    font-weight: 700;
}
.kb-gate-rule-reason {
    display: block;
    color: var(--ink-muted);
}
.kb-gate-rule--context {
    color: var(--ink-muted);
}

/* =============================================================
   Phase D-H — AURORA VAULT
   ----------------------------------------------------------------
   Site-wide dark mode + sharper, high-tech palette. Applied at the
   very bottom so it cascades over every earlier rule (app.css and
   the original light tearsheet block). Pairs with header.php
   setting `data-bs-theme="dark"` so Bootstrap's dark variant
   harmonises with these tokens.

   Palette
     bg       #06090F   surface   #0E1320   surface-2 #161C2E
     rule     #1B2238   rule-soft #131A2A
     ink      #E8EFFB   soft #BFCAE0   muted #8B95B0   faint #6A7392
     ice      #7DD3FC   ice-deep  #38BDF8   (primary accent)
     saffron  #FBBF24   saff-deep #D9A41C   (secondary signal)
     good     #34D399   ok #60A5FA   warn #F59E0B   bad #F43F5E
   ============================================================= */
:root {
    /* Aurora Vault tokens — used directly and as a source for the
       app.css `--c-*` and tearsheet `--ink`/`--rule`/`--brass` overrides
       that follow. */
    --av-bg:           #06090F;
    --av-bg-deep:      #04060B;
    --av-surface:      #0E1320;
    --av-surface-2:    #161C2E;
    --av-surface-3:    #1F2640;
    --av-rule:         #1B2238;
    --av-rule-soft:    #131A2A;
    /* Tier the text whites: only true headlines reach the brightest
       value; body emphasis and inline <strong> sit a notch below so
       nothing reads as harsh on the deep-midnight ground. */
    --av-headline:     #EAF0FB;
    --av-ink:          #D6DEEE;
    --av-ink-soft:     #B6C0D6;
    --av-ink-muted:    #8B95B0;
    --av-ink-faint:    #6A7392;
    --av-ice:          #7DD3FC;
    --av-ice-deep:     #38BDF8;
    --av-ice-soft:     rgba(125, 211, 252, 0.12);
    --av-saffron:      #FBBF24;
    --av-saffron-deep: #D9A41C;
    --av-saffron-soft: rgba(251, 191, 36, 0.10);
    --av-good:         #34D399;
    --av-good-soft:    rgba(52, 211, 153, 0.14);
    --av-ok:           #60A5FA;
    --av-ok-soft:      rgba(96, 165, 250, 0.14);
    --av-warn:         #F59E0B;
    --av-warn-soft:    rgba(245, 158, 11, 0.14);
    --av-bad:          #F43F5E;
    --av-bad-soft:     rgba(244, 63, 94, 0.14);
    --av-neutral:      #6A7392;
    /* Frosted navbar fill — needs a per-theme value because alpha is
       baked into the colour. */
    --av-chrome:       rgba(6, 9, 15, 0.78);

    /* Override the design-system tokens defined in app.css so the
       legacy chrome (page-hero, .card, .alert, .badge, etc.) re-skins
       in lockstep without rewriting every consumer. */
    --c-bg:           var(--av-bg);
    --c-bg-2:         var(--av-bg-deep);
    --c-surface:      var(--av-surface);
    --c-surface-2:    var(--av-surface-2);
    --c-surface-3:    var(--av-surface-3);
    --c-border:       var(--av-rule);
    --c-border-2:     var(--av-rule);
    --c-fg:           var(--av-ink);
    --c-fg-strong:    var(--av-ink);
    --c-fg-muted:     var(--av-ink-muted);
    --c-fg-subtle:    var(--av-ink-faint);

    --c-accent:       var(--av-ice);
    --c-accent-hover: var(--av-ice-deep);
    --c-accent-soft:  var(--av-ice-soft);
    --c-accent-deep:  #0EA5E9;

    --c-ink:          var(--av-ink);
    --c-ink-soft:     var(--av-ink-soft);
    --c-gold:         var(--av-saffron);
    --c-gold-soft:    var(--av-saffron-soft);
    --c-gold-deep:    var(--av-saffron-deep);

    /* Manuscript leftovers from the parchment-era app.css palette.
       Several rules (kb-hero gradient, body backdrop, tone-frame
       gradients, ::selection, grade-pill gradients) still reach for
       these tokens; without an Aurora bridge they leak the original
       light hex (#ebd9af parchment, #7c3aed spell purple, etc.)
       through the cascade and render as bright/white smears. */
    --c-parchment:    var(--av-bg);
    --c-parchment-2:  var(--av-bg-deep);
    --c-spell:        var(--av-ice);
    --c-spell-soft:   rgba(125, 211, 252, 0.14);
    --c-spell-deep:   var(--av-ice-deep);
    --c-midnight:     var(--av-bg-deep);
    --c-ember:        var(--av-warn);

    /* Letter grade endpoint colours used inside the .grade-pill
       gradients. Re-tinted to match the Aurora --grade overrides
       further down the file. */
    --c-grade-a:      var(--av-good);
    --c-grade-b:      var(--av-ice);
    --c-grade-c:      var(--av-saffron-deep);
    --c-grade-d:      #EA580C;
    --c-grade-f:      var(--av-bad);

    --c-good:         var(--av-good);
    --c-good-soft:    var(--av-good-soft);
    --c-good-deep:    var(--av-good);
    --c-ok:           var(--av-ok);
    --c-ok-soft:      var(--av-ok-soft);
    --c-warn:         var(--av-warn);
    --c-warn-soft:    var(--av-warn-soft);
    --c-bad:          var(--av-bad);
    --c-bad-soft:     var(--av-bad-soft);
    --c-neutral:      var(--av-neutral);
    --c-neutral-soft: rgba(106, 115, 146, 0.14);

    /* Bootstrap dark-mode tweaks so component defaults match. The
       early `:root` block in this file hardcodes light-mode values
       for every --bs-* var; we have to redeclare each one we care
       about because that block sits earlier in source order but at
       the same specificity. Anything missed here renders against the
       light-mode default — usually as black text on the dark ground. */
    --bs-body-bg:        var(--av-bg);
    --bs-body-bg-rgb:    6, 9, 15;
    --bs-body-color:     var(--av-ink);
    --bs-body-color-rgb: 214, 222, 238;
    --bs-emphasis-color: var(--av-ink);
    --bs-emphasis-color-rgb: 214, 222, 238;
    --bs-heading-color:  var(--av-headline);
    --bs-secondary-color: var(--av-ink-muted);
    --bs-secondary-bg:   var(--av-surface-2);
    --bs-tertiary-color: var(--av-ink-faint);
    --bs-tertiary-bg:    var(--av-surface);
    --bs-border-color:   var(--av-rule);
    --bs-border-color-translucent: rgba(125, 211, 252, 0.10);

    --bs-link-color:        var(--av-ice);
    --bs-link-hover-color:  var(--av-ice-deep);
    --bs-link-color-rgb:    125, 211, 252;

    --bs-code-color:        var(--av-ice);
    --bs-highlight-bg:      rgba(251, 191, 36, 0.18);

    /* Bootstrap tone palette — feeds .text-success / .tone-good /
       .alert-* / .btn-success / etc. The emphasis + bg-subtle
       variants feed alert / badge text colours. Match all of them
       so dark-mode utility classes don't render in light-mode hex. */
    --bs-primary:               var(--av-ice);
    --bs-primary-rgb:           125, 211, 252;
    --bs-primary-text-emphasis: var(--av-ice);
    --bs-primary-bg-subtle:     rgba(125, 211, 252, 0.10);
    --bs-primary-border-subtle: rgba(125, 211, 252, 0.30);

    --bs-success:               var(--av-good);
    --bs-success-rgb:           52, 211, 153;
    --bs-success-text-emphasis: var(--av-good);
    --bs-success-bg-subtle:     rgba(52, 211, 153, 0.12);
    --bs-success-border-subtle: rgba(52, 211, 153, 0.30);

    --bs-info:                  var(--av-ok);
    --bs-info-rgb:              96, 165, 250;
    --bs-info-text-emphasis:    var(--av-ok);
    --bs-info-bg-subtle:        rgba(96, 165, 250, 0.12);
    --bs-info-border-subtle:    rgba(96, 165, 250, 0.30);

    --bs-warning:               var(--av-warn);
    --bs-warning-rgb:           245, 158, 11;
    --bs-warning-text-emphasis: var(--av-warn);
    --bs-warning-bg-subtle:     rgba(245, 158, 11, 0.12);
    --bs-warning-border-subtle: rgba(245, 158, 11, 0.30);

    --bs-danger:                var(--av-bad);
    --bs-danger-rgb:            244, 63, 94;
    --bs-danger-text-emphasis:  var(--av-bad);
    --bs-danger-bg-subtle:      rgba(244, 63, 94, 0.12);
    --bs-danger-border-subtle:  rgba(244, 63, 94, 0.30);

    --bs-secondary:             var(--av-ink-muted);
    --bs-secondary-rgb:         139, 149, 176;
}

/* ---------- DAYLIGHT VAULT — light variant of the Aurora tokens ----------
   The navbar theme toggle (footer.php) flips data-bs-theme between dark
   and light; everything below the Aurora block consumes --av-* tokens,
   so re-pointing them here re-skins the site in one pass. Accent hues
   move to their deep ends so they keep ≥4.5:1 contrast as text on the
   paper ground. Must sit AFTER the dark :root block to win the cascade
   when the attribute is present. */
html[data-bs-theme="light"] {
    --av-bg:           #F2F4FA;
    --av-bg-deep:      #E8ECF5;
    --av-surface:      #FFFFFF;
    --av-surface-2:    #F0F3F9;
    --av-surface-3:    #E4E9F3;
    --av-rule:         #D3DAE9;
    --av-rule-soft:    #E0E5F0;
    --av-headline:     #0B1326;
    --av-ink:          #1D2842;
    --av-ink-soft:     #3E4B6A;
    --av-ink-muted:    #5E6B8A;
    --av-ink-faint:    #8A94AE;
    --av-ice:          #0369A1;
    --av-ice-deep:     #075985;
    --av-ice-soft:     rgba(3, 105, 161, 0.10);
    --av-saffron:      #B45309;
    --av-saffron-deep: #92400E;
    --av-saffron-soft: rgba(180, 83, 9, 0.10);
    --av-good:         #047857;
    --av-good-soft:    rgba(4, 120, 87, 0.12);
    --av-ok:           #2563EB;
    --av-ok-soft:      rgba(37, 99, 235, 0.10);
    --av-warn:         #B45309;
    --av-warn-soft:    rgba(180, 83, 9, 0.12);
    --av-bad:          #BE123C;
    --av-bad-soft:     rgba(190, 18, 60, 0.10);
    --av-neutral:      #5E6B8A;
    --av-chrome:       rgba(255, 255, 255, 0.82);

    /* Bootstrap bridge values whose alpha/rgb parts are baked in above. */
    --bs-body-bg-rgb:    242, 244, 250;
    --bs-body-color-rgb: 29, 40, 66;
    --bs-emphasis-color-rgb: 29, 40, 66;
    --bs-border-color-translucent: rgba(11, 19, 38, 0.12);
    --bs-link-color-rgb: 3, 105, 161;
    --bs-highlight-bg:   rgba(180, 83, 9, 0.18);
    --bs-primary-rgb:    3, 105, 161;
    --bs-primary-bg-subtle:     rgba(3, 105, 161, 0.08);
    --bs-primary-border-subtle: rgba(3, 105, 161, 0.30);
    --bs-success-rgb:    4, 120, 87;
    --bs-success-bg-subtle:     rgba(4, 120, 87, 0.10);
    --bs-success-border-subtle: rgba(4, 120, 87, 0.30);
    --bs-info-rgb:       37, 99, 235;
    --bs-info-bg-subtle:        rgba(37, 99, 235, 0.08);
    --bs-info-border-subtle:    rgba(37, 99, 235, 0.30);
    --bs-warning-rgb:    180, 83, 9;
    --bs-warning-bg-subtle:     rgba(180, 83, 9, 0.10);
    --bs-warning-border-subtle: rgba(180, 83, 9, 0.30);
    --bs-danger-rgb:     190, 18, 60;
    --bs-danger-bg-subtle:      rgba(190, 18, 60, 0.08);
    --bs-danger-border-subtle:  rgba(190, 18, 60, 0.30);
    --bs-secondary-rgb:  94, 107, 138;
}

/* ---------- Global body: deep-field gradient + faint atmosphere ---------- */
body {
    background:
        radial-gradient(at 14% 6%,  rgba(125, 211, 252, 0.06) 0%, transparent 55%),
        radial-gradient(at 86% 12%, rgba(251, 191, 36, 0.045) 0%, transparent 60%),
        radial-gradient(at 50% 100%, rgba(96, 165, 250, 0.04) 0%, transparent 55%),
        linear-gradient(180deg, var(--av-bg) 0%, var(--av-bg-deep) 100%) !important;
    background-attachment: fixed !important;
    color: var(--av-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(125, 211, 252, 0.32); color: var(--av-ink); }

/* High-tech crosshair ribbon along the top edge of the viewport.
   Pure CSS — adds a one-pixel saffron line under the navbar so the
   page feels like an instrument, not a document. */
body::before {
    content: "";
    position: fixed;
    inset: 56px 0 auto 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(251, 191, 36, 0.0) 0%,
        rgba(251, 191, 36, 0.45) 18%,
        rgba(125, 211, 252, 0.55) 50%,
        rgba(251, 191, 36, 0.45) 82%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1030;
    opacity: 0.55;
}

/* ---------- Navbar ---------- */
.navbar.bg-body {
    background: var(--av-chrome) !important;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--av-rule) !important;
    box-shadow: 0 1px 0 rgba(125, 211, 252, 0.04), 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.navbar .navbar-brand {
    color: var(--av-ink) !important;
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar .navbar-brand .brand-mark {
    color: var(--av-saffron);
    font-size: 1.05em;
    line-height: 1;
    text-shadow: 0 0 14px rgba(251, 191, 36, 0.45);
}
.navbar .nav-link {
    color: var(--av-ink-muted) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.55rem 0.85rem !important;
    position: relative;
    transition: color 120ms ease-out;
}
.navbar .nav-link:hover { color: var(--av-ink) !important; }
.navbar .nav-link.active {
    color: var(--av-ink) !important;
}
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.85rem; right: 0.85rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--av-saffron);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.navbar .navbar-toggler {
    border-color: var(--av-rule);
    color: var(--av-ink);
}
.navbar .navbar-toggler-icon {
    filter: invert(1) hue-rotate(180deg) brightness(1.4);
}

/* Worker-status pill */
.fw-scan-idle, .fw-scan-active, .fw-scan-offline {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--av-rule);
    color: var(--av-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.fw-scan-idle    { color: var(--av-ink-muted); }
.fw-scan-idle    > span:first-child { color: var(--av-ink-faint); }
.fw-scan-active  { color: var(--av-good); border-color: rgba(52, 211, 153, 0.4); }
.fw-scan-active  > span:first-child { color: var(--av-good); animation: fw-pulse 1.4s ease-in-out infinite; }
.fw-scan-offline { color: var(--av-bad); border-color: rgba(244, 63, 94, 0.4); }
.fw-scan-offline > span:first-child { color: var(--av-bad); }
@keyframes fw-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.35; }
}

/* ---------- Bootstrap card / alert / table re-skin ---------- */
.card {
    background-color: var(--av-surface) !important;
    border: 1px solid var(--av-rule) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--av-ink);
}
.card .card-body { color: var(--av-ink-soft); }
.card.shadow-sm,
.card.shadow {
    box-shadow: 0 1px 0 var(--av-rule), 0 0 0 1px rgba(125, 211, 252, 0.02) !important;
}
.card .border-bottom { border-bottom-color: var(--av-rule) !important; }
.card .text-body-secondary,
.text-body-secondary { color: var(--av-ink-muted) !important; }
.card .text-body-tertiary,
.text-body-tertiary { color: var(--av-ink-faint) !important; }

.alert {
    border-radius: 0;
    border: 1px solid var(--av-rule);
    background: var(--av-surface-2);
    color: var(--av-ink);
}
.alert-info {
    border-left: 3px solid var(--av-ice);
    background: linear-gradient(90deg, rgba(125,211,252,0.08), rgba(125,211,252,0.0));
    color: var(--av-ink);
}
.alert-success {
    border-left: 3px solid var(--av-good);
    background: linear-gradient(90deg, rgba(52,211,153,0.08), rgba(52,211,153,0.0));
}
.alert-warning {
    border-left: 3px solid var(--av-warn);
    background: linear-gradient(90deg, rgba(245,158,11,0.08), rgba(245,158,11,0.0));
    color: var(--av-ink);
}
.alert-danger {
    border-left: 3px solid var(--av-bad);
    background: linear-gradient(90deg, rgba(244,63,94,0.08), rgba(244,63,94,0.0));
    color: var(--av-ink);
}

table { color: var(--av-ink-soft); }
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--av-ink-soft);
    --bs-table-border-color: var(--av-rule);
    --bs-table-striped-bg: rgba(125, 211, 252, 0.03);
    --bs-table-striped-color: var(--av-ink);
    --bs-table-hover-bg: rgba(125, 211, 252, 0.06);
    --bs-table-hover-color: var(--av-ink);
}
.table th { color: var(--av-ink); border-color: var(--av-rule); }
.table td { border-color: var(--av-rule-soft); }

/* ---------- Buttons / forms ---------- */
.btn-primary {
    --bs-btn-bg: var(--av-ice);
    --bs-btn-border-color: var(--av-ice);
    --bs-btn-color: #06090F;
    --bs-btn-hover-bg: var(--av-ice-deep);
    --bs-btn-hover-border-color: var(--av-ice-deep);
    --bs-btn-hover-color: #06090F;
    --bs-btn-active-bg: var(--av-ice-deep);
    --bs-btn-active-border-color: var(--av-ice-deep);
    border-radius: 2px;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.84rem;
    font-weight: 600;
    box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.0);
    transition: box-shadow 160ms ease-out, transform 100ms ease-out;
}
.btn-primary:hover { box-shadow: 0 0 24px -4px rgba(125, 211, 252, 0.55); }
.btn-primary:active { transform: translateY(1px); }

.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--av-ink);
    --bs-btn-border-color: var(--av-rule);
    --bs-btn-hover-bg: var(--av-surface-2);
    --bs-btn-hover-border-color: var(--av-ice);
    --bs-btn-hover-color: var(--av-ink);
    border-radius: 2px;
}
.btn-secondary,
.btn-light,
.btn-dark {
    border-radius: 2px;
}

.form-control,
.form-select {
    background-color: var(--av-surface) !important;
    border-color: var(--av-rule) !important;
    color: var(--av-ink) !important;
    border-radius: 2px;
}
.form-control::placeholder { color: var(--av-ink-faint); }
.form-control:focus,
.form-select:focus {
    border-color: var(--av-ice) !important;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.15) !important;
}
.form-range::-webkit-slider-thumb { background: var(--av-ice); }
.form-range::-moz-range-thumb     { background: var(--av-ice); }
.form-range::-webkit-slider-runnable-track { background: var(--av-rule); }
.form-range::-moz-range-track     { background: var(--av-rule); }
.form-text { color: var(--av-ink-muted) !important; }
.form-label { color: var(--av-ink); }

/* ---------- Badges ---------- */
.badge.text-bg-primary {
    background: var(--av-ice) !important;
    color: #06090F !important;
}
.badge.text-bg-secondary,
.badge.text-bg-light {
    background: var(--av-surface-2) !important;
    color: var(--av-ink) !important;
    border: 1px solid var(--av-rule);
}

/* ---------- Page hero (legacy chrome on index/portal/etc.) ---------- */
.page-hero,
.hero-banner {
    background: linear-gradient(180deg, var(--av-surface) 0%, var(--av-bg) 100%) !important;
    border: 1px solid var(--av-rule);
    border-radius: 4px;
    padding: 2rem 1.5rem !important;
    color: var(--av-ink);
    position: relative;
    overflow: hidden;
}
.page-hero::after,
.hero-banner::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--av-saffron) 30%, var(--av-ice) 70%, transparent);
    opacity: 0.55;
}
.page-hero h1, .hero-banner h1,
.page-hero .display-5, .page-hero .display-6 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 700;
    color: var(--av-ink);
    letter-spacing: -0.015em;
}
.page-hero .lead, .hero-banner .lead {
    color: var(--av-ink-soft);
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
}

/* Headlines on bare pages */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    color: var(--av-ink);
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.015em;
}
h1, h2, h3, h4, h5, h6 { color: var(--av-ink); }

/* ---------- Tearsheet variable swap (consumes Aurora Vault) ---------- */
.brief-tearsheet {
    --ink:           var(--av-ink);
    --ink-soft:      var(--av-ink-soft);
    --ink-muted:     var(--av-ink-muted);
    --ink-faint:     var(--av-ink-faint);
    --rule:          var(--av-rule);
    --rule-soft:     var(--av-rule-soft);
    --brass:         var(--av-saffron);
    --indigo-deep:   var(--av-ice);

    --tone-good:     var(--av-good);
    --tone-ok:       var(--av-ok);
    --tone-warn:     var(--av-warn);
    --tone-bad:      var(--av-bad);
    --tone-neutral:  var(--av-neutral);
}

/* Surfaces inside the tearsheet that previously assumed white. */
.brief-tearsheet .detail-panel.card,
.brief-tearsheet .metric-card.card {
    background: var(--av-surface) !important;
    border-color: var(--av-rule) !important;
}
.brief-tearsheet .metric-card.card { border-radius: 2px !important; }
.brief-tearsheet .detail-panel.card { border-radius: 2px !important; }
.brief-tearsheet .detail-empty { border-left-color: var(--av-saffron); }

/* Hairline section header underline now reads on dark. */
.tearsheet-masthead { border-bottom-color: var(--av-ink) !important; }
.tearsheet-masthead::after { background: var(--av-saffron) !important; }
.tearsheet-rawfin-head { border-bottom-color: var(--av-ink) !important; }
.tearsheet-rawfin-head::after { background: var(--av-saffron) !important; }
.tearsheet-section-rule { border-top-color: var(--av-ink) !important; }
.tearsheet-section-rule::after { background: var(--av-saffron) !important; }
.tearsheet-section-rule-label { background: var(--av-bg) !important; }
.tearsheet-cattab::before { background: var(--av-bg) !important; }

/* Hero ticker glow — make the headline ticker feel like an LCD. */
.tearsheet-hero-ticker {
    color: var(--av-ink);
    text-shadow: 0 0 18px rgba(125, 211, 252, 0.18);
}
.tearsheet-hero-industry {
    border-color: var(--av-ink);
    color: var(--av-ink);
    background: rgba(125, 211, 252, 0.04);
}
.tearsheet-hero-industry:hover {
    background: var(--av-ice);
    color: #06090F;
}

/* About-toggle pill (synopsis) */
.tearsheet-hero-about-btn {
    border-color: var(--av-ink-faint);
    color: var(--av-ink-muted);
    background: rgba(251, 191, 36, 0.04);
}
.tearsheet-hero-about-btn:hover,
.tearsheet-hero-about-btn:focus-visible {
    color: var(--av-ink);
    border-color: var(--av-saffron);
    background: rgba(251, 191, 36, 0.10);
}
.tearsheet-hero-about-btn[aria-expanded="true"] {
    border-color: var(--av-saffron);
    color: var(--av-ink);
    background: rgba(251, 191, 36, 0.10);
}
.tearsheet-hero-about-btn-glyph { color: var(--av-saffron); }

/* Synopsis card — saffron rule + ice halo */
.tearsheet-synopsis {
    background: linear-gradient(
        180deg,
        rgba(251, 191, 36, 0.07) 0%,
        rgba(125, 211, 252, 0.02) 100%
    );
    border-color: var(--av-rule);
    border-left-color: var(--av-saffron);
}

/* Verdict cards – darker surface, ice/saffron edge tone strip */
.tearsheet-verdict { background: var(--av-surface); }
.tearsheet-verdicts {
    border-top-color: var(--av-rule) !important;
    border-bottom-color: var(--av-rule) !important;
}
.tearsheet-verdict + .tearsheet-verdict { border-left-color: var(--av-rule) !important; }
.tearsheet-verdict::before { background: var(--av-neutral); }
.tearsheet-verdict--good::before { background: var(--av-good); box-shadow: 0 0 12px rgba(52, 211, 153, 0.4); }
.tearsheet-verdict--ok::before   { background: var(--av-ok);   box-shadow: 0 0 12px rgba(96, 165, 250, 0.4); }
.tearsheet-verdict--warn::before { background: var(--av-warn); box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
.tearsheet-verdict--bad::before  { background: var(--av-bad);  box-shadow: 0 0 12px rgba(244, 63, 94, 0.4); }
.brief-tearsheet .tearsheet-gate-count { border-color: var(--av-rule); color: var(--av-ink-muted); }
.brief-tearsheet .tearsheet-gate-count--bad { color: var(--av-bad); border-color: rgba(244, 63, 94, 0.45); }
.brief-tearsheet .tearsheet-gate-count--warn { color: var(--av-warn); border-color: rgba(245, 158, 11, 0.45); }
.brief-tearsheet .tearsheet-hero-stance-meta { color: var(--av-neutral); }
.brief-tearsheet .tearsheet-gate-detail-btn {
    border-color: var(--av-rule);
    color: var(--av-ink);
}
.brief-tearsheet .tearsheet-gate-detail-btn:hover {
    background: var(--av-ice);
    border-color: var(--av-ice);
    color: #06090F;
}
.brief-tearsheet .gate-detail-card,
.brief-tearsheet .gates-panel {
    background: var(--av-surface);
    border-color: var(--av-rule);
}
.brief-tearsheet .gate-detail-readout {
    background: var(--av-surface-2);
    border-color: var(--av-rule);
}
.brief-tearsheet .gate-detail-head h3,
.brief-tearsheet .gate-detail-readout dd,
.brief-tearsheet .tearsheet-gate-showcase-name {
    color: var(--av-ink);
}
.brief-tearsheet .regime-chip--voided {
    background: rgba(244, 63, 94, 0.10);
    color: var(--av-bad);
    border-color: rgba(244, 63, 94, 0.32);
}
.brief-tearsheet .regime-chip--voided .regime-chip-mark { color: var(--av-bad); }
.brief-tearsheet .regime-chip--amplified {
    background: rgba(52, 211, 153, 0.12);
    color: var(--av-good);
    border-color: rgba(52, 211, 153, 0.30);
}
.brief-tearsheet .regime-chip--amplified .regime-chip-mark { color: var(--av-good); }
.brief-tearsheet .regime-chip--dampened {
    background: rgba(251, 191, 36, 0.10);
    color: var(--av-saffron);
    border-color: rgba(251, 191, 36, 0.32);
}
.brief-tearsheet .regime-chip--dampened .regime-chip-mark { color: var(--av-saffron); }
.brief-tearsheet .gate-detail-foot p,
.brief-tearsheet .gate-detail-note,
.brief-tearsheet .gate-detail-source,
.brief-tearsheet .gate-detail-label,
.brief-tearsheet .tearsheet-gate-showcase-tail,
.brief-tearsheet .tearsheet-gate-clear-note {
    color: var(--av-ink-muted);
}
.brief-tearsheet .gate-detail-note--quiet { color: var(--av-ink-faint, var(--av-ink-muted)); }
.brief-tearsheet .gate-detail-voids,
.brief-tearsheet .gate-detail-foot,
.brief-tearsheet .gate-detail-chart,
.brief-tearsheet .tearsheet-gate-showcase {
    border-color: var(--av-rule);
}
.brief-tearsheet .tearsheet-gate-dot { background: var(--av-ink-muted); }
.brief-tearsheet .tearsheet-gate-showcase-row--bad .tearsheet-gate-dot { background: var(--av-bad); }
.brief-tearsheet .tearsheet-gate-showcase-row--warn .tearsheet-gate-dot { background: var(--av-warn); }

/* Per-card category chips — sharper, darker */
.tearsheet-vcat {
    background: var(--av-surface-2);
    border-color: var(--av-rule);
}
.tearsheet-vcat:hover {
    background: var(--av-surface-3);
    border-color: var(--av-ice);
}
.tearsheet-vcat.is-active {
    background: var(--av-ice);
    border-color: var(--av-ice);
    color: #06090F;
}
.tearsheet-vcat.is-active .tearsheet-vcat-name,
.tearsheet-vcat.is-active .tearsheet-vcat-score { color: #06090F !important; }
.tearsheet-vcat.is-active .tearsheet-vcat-count { color: rgba(6, 9, 15, 0.6); }

/* Breakdown view-toggle — segmented control, ice highlight */
.tearsheet-viewtoggle {
    border-color: var(--av-rule);
    background: var(--av-surface);
}
.tearsheet-viewtoggle-btn { border-right-color: var(--av-rule); color: var(--av-ink-muted); }
.tearsheet-viewtoggle-btn:hover { background: rgba(125, 211, 252, 0.06); color: var(--av-ink); }
.tearsheet-viewtoggle-btn.is-active {
    background: var(--av-ice);
    color: #06090F;
}
.tearsheet-viewtoggle-btn.is-active .tearsheet-viewtoggle-glyph { color: #06090F; }

.tearsheet-breakdown-head { border-bottom-color: var(--av-ink) !important; }
.tearsheet-breakdown-head::after { background: var(--av-saffron) !important; }

/* Raw-financials grid — hairline rules already work, just tune row hover */
.tearsheet-rawfin-row:hover > * {
    background: rgba(125, 211, 252, 0.05);
}
.tearsheet-rawfin-category { border-top-color: var(--av-rule); }
.tearsheet-rawfin-cat-label::before { background: var(--av-saffron); }

/* Metric-card interior backgrounds (industry strip, edu collapse) */
.brief-tearsheet .metric-interp { color: var(--av-ink-soft); }
.brief-tearsheet .metric-edu {
    background: var(--av-surface-2);
    border-color: var(--av-rule);
}
.brief-tearsheet .metric-edu-code {
    background: var(--av-bg-deep);
    color: var(--av-ice);
    border: 1px solid var(--av-rule);
}

/* Score chips & tone badges — re-skin to consume the dark tones */
.score-chip { border-radius: 2px; }
.score-chip--good { background: var(--av-good-soft); color: var(--av-good); border-color: rgba(52,211,153,0.25); }
.score-chip--ok   { background: var(--av-ok-soft);   color: var(--av-ok);   border-color: rgba(96,165,250,0.25); }
.score-chip--warn { background: var(--av-warn-soft); color: var(--av-warn); border-color: rgba(245,158,11,0.25); }
.score-chip--bad  { background: var(--av-bad-soft);  color: var(--av-bad);  border-color: rgba(244,63,94,0.25); }
.score-chip--neutral { background: rgba(106,115,146,0.12); color: var(--av-ink-muted); }

.tone-badge { border-radius: 2px; border-width: 1px; }
.tone-badge--good { background: var(--av-good-soft); color: var(--av-good); border-color: rgba(52,211,153,0.3); }
.tone-badge--ok   { background: var(--av-ok-soft);   color: var(--av-ok);   border-color: rgba(96,165,250,0.3); }
.tone-badge--warn { background: var(--av-warn-soft); color: var(--av-warn); border-color: rgba(245,158,11,0.3); }
.tone-badge--bad  { background: var(--av-bad-soft);  color: var(--av-bad);  border-color: rgba(244,63,94,0.3); }
.tone-badge--neutral { background: rgba(106,115,146,0.12); color: var(--av-ink-muted); border-color: var(--av-rule); }

/* Letter grade pill — keep gradients but re-tint to dark-mode equivalents */
.grade-pill {
    border-radius: 4px;
    color: #06090F;
    text-shadow: 0 1px 0 rgba(255,255,255,0.12);
}
.grade-pill--A { background: linear-gradient(135deg, var(--av-good) 0%, #10B981 100%); color: #04130C; }
.grade-pill--B { background: linear-gradient(135deg, var(--av-ice) 0%, var(--av-ice-deep) 100%); color: #04101A; }
.grade-pill--C { background: linear-gradient(135deg, var(--av-saffron) 0%, var(--av-saffron-deep) 100%); color: #1A1106; }
.grade-pill--D { background: linear-gradient(135deg, #FB923C 0%, #EA580C 100%); color: #1A0B04; }
.grade-pill--F { background: linear-gradient(135deg, var(--av-bad) 0%, #BE123C 100%); color: #1A0410; }

/* Signal sparklines — re-tint variables consumed by the SVG renderer */
.brief-tearsheet,
.signal-chart,
.spark-track,
.spark-band {
    --c-good: var(--av-good);
    --c-bad:  var(--av-bad);
    --c-warn: var(--av-warn);
    --c-accent: var(--av-ice);
    --c-fg-subtle: var(--av-ink-faint);
    --c-fg: var(--av-ink);
}

/* ---------- Screener page (results.php) — surface + accents ---------- */
.brief-tearsheet .screener-hero { border-bottom-color: var(--av-rule); }
.brief-tearsheet .screener-table,
.brief-tearsheet .screener-card {
    background: var(--av-surface);
    border: 1px solid var(--av-rule);
}
.brief-tearsheet .screener-row:hover { background: rgba(125, 211, 252, 0.04); }

/* Industry/scope chips, the "+N more" popover, and the sticky table header —
   app.css's parchment-era `.chip` base (background: var(--c-surface)) and
   `.screener-table thead th` win the cascade by load order and resolve to
   WHITE on the dark ground (same token leak as the weights sliders), while
   the popover hardcodes #fff under Aurora-pale text. Re-assert Aurora
   values at higher specificity; all token-driven, so Daylight Vault flips
   them correctly in light mode. */
.brief-tearsheet .screener-chip {
    background: var(--av-surface);
    border-color: var(--av-rule);
    color: var(--av-ink-soft);
}
.brief-tearsheet .screener-chip:hover {
    background: var(--av-surface-2);
    border-color: var(--av-ice);
    color: var(--av-ink);
}
.brief-tearsheet .screener-chip.is-active {
    background: var(--av-ice);
    border-color: var(--av-ice);
    color: var(--av-bg);
}
.brief-tearsheet .screener-chip .chip-count {
    background: rgba(125, 211, 252, 0.08);
    color: var(--av-ink-faint);
}
.brief-tearsheet .screener-chip.is-active .chip-count {
    background: rgba(4, 6, 11, 0.18);
    color: rgba(4, 6, 11, 0.75);
}
.brief-tearsheet .screener-chip-more-pop {
    background: var(--av-surface-2);
    border-color: var(--av-rule);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.5);
}
.brief-tearsheet .screener-chip-more-search { border-bottom-color: var(--av-rule); }
.brief-tearsheet .screener-chip-more-search input {
    color: var(--av-ink);
    border-bottom-color: var(--av-rule);
}
.brief-tearsheet .screener-chip-more-search input:focus { border-color: var(--av-saffron); }
.brief-tearsheet .screener-chip-more-item { color: var(--av-ink-soft); }
.brief-tearsheet .screener-chip-more-item:hover { background: var(--av-surface-3); color: var(--av-ink); }
.brief-tearsheet .screener-chip-more-item.is-active { background: var(--av-ice); color: var(--av-bg); }
.brief-tearsheet .screener-chip-more-count { color: var(--av-ink-faint); }
.brief-tearsheet .screener-chip-more-item.is-active .screener-chip-more-count { color: rgba(4, 6, 11, 0.7); }
.brief-tearsheet .screener-table thead th {
    background: var(--av-surface);
    color: var(--av-ink-muted);
    border-bottom-color: var(--av-rule);
}
.brief-tearsheet .screener-pill-tag,
.brief-tearsheet .screener-filters-range-tag { color: var(--av-ink); }

/* ---------- Knowledge / metrics catalogue ---------- */
.brief-tearsheet .kb-card,
.brief-tearsheet .metric-card,
.brief-tearsheet .signal-card {
    background: var(--av-surface);
    border-color: var(--av-rule);
}

/* ---------- Catch-alls for legacy chrome on portal / scans / weights ---------- */
.bg-body, .bg-body-tertiary, .bg-light, .bg-white {
    background-color: var(--av-surface) !important;
    color: var(--av-ink);
}
hr { border-color: var(--av-rule); opacity: 0.6; }
code, kbd {
    background: var(--av-bg-deep);
    color: var(--av-ice);
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    padding: 0.06rem 0.32rem;
}
a { color: var(--av-ice); }
a:hover { color: var(--av-ice-deep); }

/* The brand-mark in the footer / nav — saffron with halo */
.brand-mark { color: var(--av-saffron); }

/* Legacy report-eyebrow accents (results.php / index.php). The
   pre-D-H values were #312e81 / #065f3f — both nearly invisible on
   the dark ground. Re-tint to ice / saffron so they sit in palette. */
.report-eyebrow--fundamentals { color: var(--av-ice) !important; }
.report-eyebrow--technicals   { color: var(--av-saffron) !important; }

/* Screener filters drawer (results.php). The collapsed-state
   background was rgba(15,12,32,0.012) — invisible on the dark ground —
   and the open-state was hardcoded #fff (a stark white slab). Re-skin
   so the closed accordion is unmistakably a clickable filter row,
   the open pane reads as a recessed dark surface, and every "active"
   chip / button uses ice or saffron instead of var(--av-ink) (which
   flipped to a light text colour under Aurora). */
.brief-tearsheet .screener-filters-drawer {
    border: 1px solid var(--av-rule) !important;
    border-left: 3px solid var(--av-saffron) !important;
    background: var(--av-surface) !important;
    border-radius: 2px;
}
.brief-tearsheet .screener-filters-drawer[open] {
    background: var(--av-surface) !important;
    border-color: var(--av-ice) !important;
    border-left-color: var(--av-saffron) !important;
}
.brief-tearsheet .screener-filters-summary {
    color: var(--av-ink) !important;
    padding: 0.7rem 0.9rem !important;
    transition: background-color 120ms ease-out;
}
.brief-tearsheet .screener-filters-summary:hover {
    background: rgba(125, 211, 252, 0.06) !important;
}
.brief-tearsheet .screener-filters-summary-label {
    color: var(--av-saffron) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-style: normal;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
}
.brief-tearsheet .screener-filters-summary-label::before {
    content: "▸ ";
    color: var(--av-ink-faint);
    font-size: 0.85em;
    margin-right: 0.25rem;
}
.brief-tearsheet .screener-filters-drawer[open] .screener-filters-summary-label::before {
    content: "▾ ";
    color: var(--av-saffron);
}
.brief-tearsheet .screener-filters-summary-count {
    background: var(--av-saffron) !important;
    color: var(--av-bg) !important;
    border-radius: 2px;
}
.brief-tearsheet .screener-filters-summary-chev {
    color: var(--av-saffron) !important;
}
.brief-tearsheet .screener-filters-form {
    border-top-color: var(--av-rule) !important;
    background: var(--av-bg-deep);
}
.brief-tearsheet .screener-filters-section-eyebrow {
    color: var(--av-saffron) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
}
.brief-tearsheet .screener-filters-section-deck { color: var(--av-ink-faint) !important; }
.brief-tearsheet .screener-filters-cell-label { color: var(--av-ink) !important; }
.brief-tearsheet .screener-filters-cell-unit { color: var(--av-ink-faint) !important; }
.brief-tearsheet .screener-filters-range input {
    border-bottom: 1px solid var(--av-rule) !important;
    color: var(--av-ink) !important;
}
.brief-tearsheet .screener-filters-range input:focus {
    border-bottom-color: var(--av-ice) !important;
}
.brief-tearsheet .screener-filters-range input::placeholder { color: var(--av-ink-faint) !important; }
.brief-tearsheet .screener-filters-range-tag { color: var(--av-ink-muted) !important; }
.brief-tearsheet .screener-sig {
    border-bottom-color: var(--av-rule-soft) !important;
}
.brief-tearsheet .screener-sig-name { color: var(--av-ink-soft) !important; }
.brief-tearsheet .screener-sig-opt {
    border-color: var(--av-rule) !important;
    background: var(--av-surface) !important;
    color: var(--av-ink-muted) !important;
}
.brief-tearsheet .screener-sig-opt:hover {
    border-color: var(--av-ice) !important;
    color: var(--av-ink) !important;
}
.brief-tearsheet .screener-sig-opt--bull.is-active {
    background: rgba(52, 211, 153, 0.18) !important;
    border-color: var(--av-good) !important;
    color: var(--av-good) !important;
}
.brief-tearsheet .screener-sig-opt--bear.is-active {
    background: rgba(244, 63, 94, 0.18) !important;
    border-color: var(--av-bad) !important;
    color: var(--av-bad) !important;
}
.brief-tearsheet .screener-filters-actions { border-top-color: var(--av-rule) !important; }
.brief-tearsheet .screener-filters-apply {
    background: var(--av-saffron) !important;
    color: var(--av-bg) !important;
    border-radius: 2px;
    font-style: normal;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.82rem;
}
.brief-tearsheet .screener-filters-apply:hover {
    background: var(--av-saffron-deep) !important;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.3);
}
.brief-tearsheet .screener-filters-reset { color: var(--av-ink-muted) !important; }
.brief-tearsheet .screener-filters-reset:hover { color: var(--av-bad) !important; }

/* Tearsheet emphasis: the panel eyebrow's <strong> previously
   inherited a near-pure-white --ink and read as harsh against the
   midnight ground. Drop one notch to --ink-soft so "Fundamentals" /
   "Technicals" still sits ahead of the tone label without screaming. */
.tearsheet-verdict-eyebrow strong,
.tearsheet-masthead-meta strong,
.tearsheet-hero-rank strong,
.tearsheet-hero-fresh-value strong,
.tearsheet-rawfin-asof strong { color: var(--av-ink-soft) !important; }

/* Tone helpers: .tone-good etc. were already routed through
   --bs-success / --bs-danger / etc. which we now own — but the
   default --bs-* values were too saturated for large display
   numbers (e.g. the detail-block score in `display-5 fw-bold`).
   Override directly so the figures sit in palette regardless of
   Bootstrap's emphasis variant. */
.tone-good  { color: var(--av-good)  !important; }
.tone-bad   { color: var(--av-bad)   !important; }
.tone-warn  { color: var(--av-warn)  !important; }
.tone-ok    { color: var(--av-ok)    !important; }

/* Catch any remaining body text that leaked the early :root values:
   Bootstrap's `.text-body-emphasis` and `.text-emphasis-color`
   utilities resolve to --bs-emphasis-color, which we already own,
   but the inline `color: var(--bs-heading-color)` fallback that
   Bootstrap occasionally hard-codes inside reboot.css needs an
   explicit override here too. */
.text-body, .text-body-emphasis { color: var(--av-ink) !important; }
.text-secondary { color: var(--av-ink-muted) !important; }
.text-muted     { color: var(--av-ink-muted) !important; }

/* =============================================================
   Phase D-H2 — Aurora Vault for sub-reports
   Re-skin the metric/signal cards that sit inside the detail panel:
   the tone strip, the metric-interp callout, the (i) info button,
   the score chips / tone badges / signal badges, the education
   collapse, the chart's date-range button group, and the inspect
   table. Every rule here is scoped to .brief-tearsheet so other
   pages keep their existing chrome unless they opt in.
   ============================================================= */

/* Tone strip — flat saturated colors (no leftover light-mode
   gradient endpoints) with a faint glow at full strength. */
.brief-tearsheet .tone-strip { height: 3px; }
.brief-tearsheet .tone-strip--good {
    background: var(--av-good);
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.45);
}
.brief-tearsheet .tone-strip--ok {
    background: var(--av-ok);
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.45);
}
.brief-tearsheet .tone-strip--warn {
    background: var(--av-warn);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}
.brief-tearsheet .tone-strip--bad {
    background: var(--av-bad);
    box-shadow: 0 0 16px rgba(244, 63, 94, 0.45);
}
.brief-tearsheet .tone-strip--neutral {
    background: var(--av-neutral);
    opacity: 0.6;
    box-shadow: none;
}

/* Metric card — flat surface, hairline border, no rounded shadow.
   The tone-strip on top still carries the colour. */
.brief-tearsheet .metric-card.card {
    background: var(--av-surface) !important;
    border: 1px solid var(--av-rule) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    transition: border-color 140ms ease-out, transform 140ms ease-out;
}
.brief-tearsheet .metric-card.card:hover {
    border-color: var(--av-ink-faint) !important;
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.08) !important;
    transform: none;
}
.brief-tearsheet .metric-card.card .card-body {
    color: var(--av-ink-soft);
}
.brief-tearsheet .metric-card.card h3 {
    color: var(--av-ink);
    font-family: "Fraunces", Georgia, serif;
    letter-spacing: -0.005em;
}

/* Detail panel container card — same dark surface, no Bootstrap chrome. */
.brief-tearsheet .detail-panel.card {
    background: var(--av-bg) !important;
    border: 1px solid var(--av-rule) !important;
    border-radius: 2px !important;
}
.brief-tearsheet .detail-panel .border-bottom { border-bottom-color: var(--av-rule) !important; }
.brief-tearsheet .detail-block .card-body { color: var(--av-ink-soft); }
.brief-tearsheet .detail-block h2 {
    color: var(--av-headline);
    font-family: "Fraunces", Georgia, serif;
}

/* Direction arrow (↑/↓) — small monospace glyph in the metric heading. */
.brief-tearsheet .dir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    line-height: 1;
}
.brief-tearsheet .dir--higher  { color: var(--av-good); border-color: rgba(52, 211, 153, 0.4); }
.brief-tearsheet .dir--lower   { color: var(--av-warn); border-color: rgba(245, 158, 11, 0.4); }
.brief-tearsheet .dir--target  { color: var(--av-ok);   border-color: rgba(96, 165, 250, 0.4); }
.brief-tearsheet .dir--stepped { color: var(--av-ink-soft); border-color: var(--av-rule); }

/* Info button — square, ghosted, saffron when active. */
.brief-tearsheet .info-icon-btn {
    width: 24px; height: 24px;
    border-radius: 2px;
    border: 1px solid var(--av-rule);
    background: var(--av-surface-2);
    color: var(--av-ink-muted);
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 600;
    transition: color 120ms, border-color 120ms, background-color 120ms;
}
.brief-tearsheet .info-icon-btn:hover {
    color: var(--av-saffron);
    border-color: var(--av-saffron);
    background: rgba(251, 191, 36, 0.08);
    transform: none;
}
.brief-tearsheet .info-icon-btn[aria-expanded="true"] {
    color: var(--av-bg);
    border-color: var(--av-saffron);
    background: var(--av-saffron);
}

/* Metric interp callout — flat tinted slab with side-rule. */
.brief-tearsheet .metric-interp {
    border-radius: 2px;
    border-left-width: 3px;
    border: 1px solid var(--av-rule);
    background: var(--av-surface-2);
    color: var(--av-ink-soft);
    padding: 0.6rem 0.85rem;
}
.brief-tearsheet .metric-interp--good {
    background: rgba(52, 211, 153, 0.08);
    border-left: 3px solid var(--av-good);
    color: var(--av-ink);
}
.brief-tearsheet .metric-interp--ok {
    background: rgba(96, 165, 250, 0.08);
    border-left: 3px solid var(--av-ok);
    color: var(--av-ink);
}
.brief-tearsheet .metric-interp--warn {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid var(--av-warn);
    color: var(--av-ink);
}
.brief-tearsheet .metric-interp--bad {
    background: rgba(244, 63, 94, 0.08);
    border-left: 3px solid var(--av-bad);
    color: var(--av-ink);
}
.brief-tearsheet .metric-interp--neutral {
    background: var(--av-surface-2);
    border-left: 3px solid var(--av-rule);
    color: var(--av-ink-muted);
}

/* Score chip + tone badge + signal badge — all upgraded to a
   tighter monospace, 2px corners, sharper tone tints. */
.brief-tearsheet .score-chip,
.brief-tearsheet .tone-badge,
.brief-tearsheet .signal-badge {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    border-radius: 2px;
    border: 1px solid transparent;
    padding: 0.18rem 0.42rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.brief-tearsheet .score-chip--good,
.brief-tearsheet .tone-badge--good,
.brief-tearsheet .signal-badge--bull {
    background: rgba(52, 211, 153, 0.12); color: var(--av-good); border-color: rgba(52, 211, 153, 0.35);
}
.brief-tearsheet .score-chip--ok,
.brief-tearsheet .tone-badge--ok {
    background: rgba(96, 165, 250, 0.12); color: var(--av-ok); border-color: rgba(96, 165, 250, 0.35);
}
.brief-tearsheet .score-chip--warn,
.brief-tearsheet .tone-badge--warn {
    background: rgba(245, 158, 11, 0.12); color: var(--av-warn); border-color: rgba(245, 158, 11, 0.35);
}
.brief-tearsheet .score-chip--bad,
.brief-tearsheet .tone-badge--bad,
.brief-tearsheet .signal-badge--bear {
    background: rgba(244, 63, 94, 0.12); color: var(--av-bad); border-color: rgba(244, 63, 94, 0.35);
}
.brief-tearsheet .score-chip--neutral,
.brief-tearsheet .tone-badge--neutral,
.brief-tearsheet .signal-badge--idle {
    background: rgba(106, 115, 146, 0.14); color: var(--av-ink-muted); border-color: var(--av-rule);
}

/* Letter grade pill — same Aurora gradients but ensure the chip
   inside the metric heading still reads tight. */
.brief-tearsheet .grade-pill {
    border-radius: 3px;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 700;
}

/* Education panel — flat dark surface, saffron accent, no white inset. */
.brief-tearsheet .metric-edu {
    background: var(--av-surface-2) !important;
    border: 1px solid var(--av-rule) !important;
    border-left: 3px solid var(--av-saffron) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    padding: 0.85rem 1rem;
}
.brief-tearsheet .metric-edu-header {
    border-bottom: 1px solid var(--av-rule);
    padding-bottom: 0.5rem;
}
.brief-tearsheet .metric-edu-eyebrow {
    color: var(--av-saffron);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    letter-spacing: 0.12em;
}
.brief-tearsheet .metric-edu-link {
    color: var(--av-ice);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
}
.brief-tearsheet .metric-edu-link:hover { color: var(--av-ice-deep); }
.brief-tearsheet .metric-edu-icon {
    background: var(--av-bg-deep);
    border: 1px solid var(--av-rule);
    color: var(--av-saffron);
    border-radius: 2px;
    width: 28px; height: 28px;
    font-size: 0.85rem;
}
.brief-tearsheet .metric-edu-label {
    color: var(--av-ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    letter-spacing: 0.1em;
}
.brief-tearsheet .metric-edu-text { color: var(--av-ink); }
.brief-tearsheet .metric-edu-code {
    background: var(--av-bg-deep);
    border: 1px solid var(--av-rule);
    color: var(--av-ice);
    border-radius: 2px;
}

/* Signal-chart date range buttons (btn-outline-secondary group) —
   make them feel like a HUD segmented control rather than a
   Bootstrap pill row. */
.brief-tearsheet .signal-range-group .btn,
.brief-tearsheet .signal-range-btn {
    border-radius: 0 !important;
    border-color: var(--av-rule) !important;
    background: var(--av-surface) !important;
    color: var(--av-ink-muted) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.6rem !important;
    line-height: 1.1;
}
.brief-tearsheet .signal-range-btn:hover {
    background: var(--av-surface-2) !important;
    color: var(--av-ink) !important;
    border-color: var(--av-ice) !important;
    z-index: 2;
}
.brief-tearsheet .signal-range-btn.active,
.brief-tearsheet .signal-range-btn:active {
    background: var(--av-ice) !important;
    color: var(--av-bg) !important;
    border-color: var(--av-ice) !important;
}
.brief-tearsheet .signal-range-group .btn:first-child { border-top-left-radius: 2px !important; border-bottom-left-radius: 2px !important; }
.brief-tearsheet .signal-range-group .btn:last-child  { border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important; }

/* Signal chart canvas surround — give it breathing room and a top
   rule for the indicator label. */
.brief-tearsheet .signal-chart {
    border-top-color: var(--av-rule) !important;
}
.brief-tearsheet .signal-chart-canvas {
    background: var(--av-bg-deep);
    border: 1px solid var(--av-rule);
    padding: 0.4rem 0.25rem 0.25rem;
    border-radius: 2px;
}

/* "Show numbers »" inspect collapse — link + table in palette. */
.brief-tearsheet .detail-block .card-body a[data-bs-toggle="collapse"] {
    color: var(--av-ice) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.brief-tearsheet .detail-block .card-body a[data-bs-toggle="collapse"]:hover { color: var(--av-ice-deep) !important; }
.brief-tearsheet .detail-block table th { color: var(--av-ink-muted); border-color: var(--av-rule); }
.brief-tearsheet .detail-block table td { color: var(--av-ink); border-color: var(--av-rule-soft); }

/* Industry context strip / range bar — text in muted, marker in ice. */
.brief-tearsheet .industry-context,
.brief-tearsheet .industry-strip,
.brief-tearsheet .industry-strip-source {
    color: var(--av-ink-muted) !important;
}
.brief-tearsheet .industry-range-bar { color: var(--av-ice); }
/* The range-bar SVG uses a hardcoded white stroke on the marker;
   re-tint via a child-selector override using the dark bg as the
   stroke so the dot reads as carved out of the surface. */
.brief-tearsheet .industry-range-bar circle { stroke: var(--av-bg) !important; }

/* Sparkline base styles — bridge the inline SVG vars to Aurora and
   then override every track / band / threshold rule for readability
   on the deep ground. The inline <style> blocks emitted by
   build_signal_*chart use stroke-width 1 / 1.5 and fill-opacity 0.18,
   which read as ghosts on the dark canvas — boost those here. */
.brief-tearsheet .sparkline,
.brief-tearsheet .sparkline--indicator,
.brief-tearsheet .signal-chart svg {
    /* Hard-pin transparent so the canvas surface (.signal-chart-canvas)
       shows through cleanly. The legacy app.css .sparkline rule
       baked a top-to-bottom var(--c-surface-2) → var(--c-surface)
       gradient onto the SVG itself; on dark mode that read as a
       light-on-dark wash. Killed at the source above; re-pinned
       here so nothing in the cascade can sneak it back. */
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    --c-good: var(--av-good);
    --c-bad:  var(--av-bad);
    --c-warn: var(--av-warn);
    --c-accent: var(--av-ice);
    --c-fg-subtle: var(--av-ink-faint);
    --c-fg: var(--av-ink);
    --c-good-soft: rgba(52, 211, 153, 0.30);
    --c-bad-soft:  rgba(244, 63, 94, 0.30);
    --c-surface-2: rgba(106, 115, 146, 0.18);
}

/* Chart canvas — flat dark surface, no gradient. The polyline +
   tick markers carry all the contrast. */
.brief-tearsheet .signal-chart-canvas {
    background: var(--av-surface) !important;
    border: 1px solid var(--av-rule);
    padding: 0.45rem 0.3rem 0.3rem;
    border-radius: 2px;
}

/* Track polylines — the indicator's main line. Stroke-width tuned
   thin in Phase D-N so the trace reads as a hairline reference,
   not a bold dominant element. The hit ticks (3px solid) carry
   the visual weight. */
.brief-tearsheet .sparkline polyline.spark-line,
.brief-tearsheet .sparkline polyline.spark-track--primary,
.brief-tearsheet .sparkline polyline.spark-track {
    stroke: var(--av-ice) !important;
    stroke-width: 1.25 !important;
    fill: none;
    vector-effect: non-scaling-stroke;
    filter: none;
}
.brief-tearsheet .sparkline polyline.spark-track--secondary {
    stroke: var(--av-ink-muted) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 2,2;
    filter: none;
}
.brief-tearsheet .sparkline polyline.spark-track--good {
    stroke: var(--av-good) !important;
    stroke-width: 1.25 !important;
    filter: none;
}
.brief-tearsheet .sparkline polyline.spark-track--bad {
    stroke: var(--av-bad) !important;
    stroke-width: 1.25 !important;
    filter: none;
}
.brief-tearsheet .sparkline polyline.spark-track--warn {
    stroke: var(--av-warn) !important;
    stroke-width: 1.5 !important;
}
.brief-tearsheet .sparkline polyline.spark-track--mid {
    stroke: var(--av-ink-faint) !important;
    stroke-width: 1 !important;
    stroke-dasharray: 1,2;
}

/* Threshold horizontals — solid stroke at decent opacity instead of
   the default opacity:0.85 dashed-on-dim. */
.brief-tearsheet .sparkline polyline.spark-track--dotted {
    stroke-dasharray: 3,3 !important;
}
.brief-tearsheet .sparkline line.spark-line-band {
    stroke-width: 1.25 !important;
    opacity: 1 !important;
    stroke-dasharray: 4,4 !important;
    vector-effect: non-scaling-stroke;
}
.brief-tearsheet .sparkline line.spark-line-band--good { stroke: var(--av-good) !important; opacity: 0.9 !important; }
.brief-tearsheet .sparkline line.spark-line-band--bad  { stroke: var(--av-bad)  !important; opacity: 0.9 !important; }
.brief-tearsheet .sparkline line.spark-line-band--bull { stroke: var(--av-good) !important; opacity: 0.9 !important; }
.brief-tearsheet .sparkline line.spark-line-band--bear { stroke: var(--av-bad)  !important; opacity: 0.9 !important; }
.brief-tearsheet .sparkline line.spark-line-band--mid  { stroke: var(--av-ink-muted) !important; opacity: 0.7 !important; }
.brief-tearsheet .sparkline line.spark-line-band--warn { stroke: var(--av-warn) !important; opacity: 0.9 !important; }

/* Trigger overlay markers — sharp 3px solid vertical ticks at each
   event date (rendered as <line> elements by the PHP + JS renderers).
   The renderer centers each tick on the plotted value instead of drawing
   a full-height chart stripe, so the mark stays attached to the point
   without shouting over the trace. */
.brief-tearsheet .sparkline line.spark-band,
.brief-tearsheet .sparkline .spark-band {
    fill: none !important;
    stroke-width: 3 !important;
    vector-effect: non-scaling-stroke;
    /* Square caps keep the compact tick crisp at narrow widths. */
    stroke-linecap: butt;
}
.brief-tearsheet .sparkline line.spark-band--bull,
.brief-tearsheet .sparkline .spark-band--bull {
    stroke: var(--av-good) !important;
}
.brief-tearsheet .sparkline line.spark-band--bear,
.brief-tearsheet .sparkline .spark-band--bear {
    stroke: var(--av-bad) !important;
}
.brief-tearsheet .sparkline line.spark-band--idle,
.brief-tearsheet .sparkline .spark-band--idle {
    stroke: var(--av-ink-faint) !important;
    stroke-dasharray: 2,2;
}

/* Last-bar anchor — make it bright ice so the right edge is obvious. */
.brief-tearsheet .sparkline line.spark-last {
    stroke: var(--av-saffron) !important;
    stroke-width: 1.25 !important;
    opacity: 0.7 !important;
    stroke-dasharray: 3,3 !important;
}

/* Hover overlay — keep nearly transparent but tint to ice so it
   reads against the deep canvas. */
.brief-tearsheet .sparkline rect.spark-hover:hover {
    fill: var(--av-ice) !important;
    fill-opacity: 0.08 !important;
}

/* =============================================================
   Phase D-H3 — scans.php (history) + shared chip / picker chrome
   Reskin the profile chips, industry picker, history table, and
   the loose Bootstrap badges scattered through the page so the
   scans surface matches Aurora Vault. Rules are global (not scoped
   under .brief-tearsheet) because scans.php doesn't use that
   wrapper. The same .profile-chip-row + .industry-picker also
   appear on portal.php and inherit the new look.
   ============================================================= */

/* Profile chip row — was rounded ice-blue pills; now becomes a
   monospace HUD button row with 2px corners and a saffron-glow
   active state. */
.profile-chip-row {
    gap: 0.4rem !important;
}
.profile-chip-row .chip {
    appearance: none;
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    background: var(--av-surface);
    color: var(--av-ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    line-height: 1;
    transition: color 120ms, border-color 120ms, background-color 120ms;
    box-shadow: none;
}
.profile-chip-row .chip:hover,
.profile-chip-row .chip:focus-visible {
    background: var(--av-surface-2);
    color: var(--av-ink);
    border-color: var(--av-ice);
    outline: none;
    box-shadow: none;
}
.profile-chip-row .chip.is-active {
    background: var(--av-bg);
    color: var(--av-saffron);
    border-color: var(--av-saffron);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

/* Industry picker — sharper corners, dark surface, ice accents. */
.industry-picker {
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    padding: 0.85rem 0.95rem;
    background: var(--av-surface);
}
.industry-picker-list {
    border-top: 1px dashed var(--av-rule);
}
.industry-picker-options {
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    background: var(--av-bg);
}
.industry-picker-option {
    color: var(--av-ink);
    border-radius: 0;
}
.industry-picker-option:hover {
    background: rgba(125, 211, 252, 0.06);
}
.industry-picker-option input[type="checkbox"]:checked + .industry-picker-option-label {
    color: var(--av-ice);
}
.industry-picker-option-count {
    color: var(--av-ink-faint);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* Cap-bucket / mode toggle radios — Bootstrap's btn-check group reads
   too soft on dark; pin border + active state to Aurora. */
.btn-check + .btn,
.btn-check + .btn-outline-secondary {
    border-radius: 2px !important;
    border-color: var(--av-rule) !important;
    background: var(--av-surface) !important;
    color: var(--av-ink-muted) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.btn-check:checked + .btn,
.btn-check:checked + .btn-outline-secondary {
    background: var(--av-ice) !important;
    color: var(--av-bg) !important;
    border-color: var(--av-ice) !important;
    box-shadow: 0 0 12px rgba(125, 211, 252, 0.25);
}

/* History / recent-scans table — sharper rows, mono columns, no
   rounded badge pills. */
#fwScanHistoryTable {
    margin-top: 0.5rem;
}
#fwScanHistoryTable thead th {
    color: var(--av-ink-muted) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    border-bottom: 1px solid var(--av-rule) !important;
    padding-bottom: 0.5rem;
    background: transparent !important;
}
#fwScanHistoryTable tbody td {
    color: var(--av-ink) !important;
    border-bottom: 1px solid var(--av-rule-soft) !important;
    background: transparent !important;
    padding: 0.55rem 0.5rem;
}
#fwScanHistoryTable tbody tr:hover td {
    background: rgba(125, 211, 252, 0.04) !important;
}
#fwScanHistoryTable .mono { color: var(--av-ink-soft); font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); }
#fwScanHistoryTable a {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    color: var(--av-ice) !important;
}

/* Reskin every Bootstrap "tinted badge" variant used on scans.php so
   they read as terminal tags rather than soft pastel pills. */
.badge.text-bg-info-subtle,
.badge.text-bg-success-subtle,
.badge.text-bg-warning-subtle,
.badge.text-bg-danger-subtle,
.badge.text-bg-primary-subtle,
.badge.text-bg-secondary-subtle {
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.66rem;
    padding: 0.22rem 0.42rem;
    border: 1px solid transparent !important;
}
.badge.text-bg-info-subtle    { background: rgba(96, 165, 250, 0.15) !important; color: var(--av-ok)   !important; border-color: rgba(96, 165, 250, 0.35) !important; }
.badge.text-bg-success-subtle { background: rgba(52, 211, 153, 0.15) !important; color: var(--av-good) !important; border-color: rgba(52, 211, 153, 0.35) !important; }
.badge.text-bg-warning-subtle { background: rgba(245, 158, 11, 0.15) !important; color: var(--av-warn) !important; border-color: rgba(245, 158, 11, 0.35) !important; }
.badge.text-bg-danger-subtle  { background: rgba(244, 63, 94, 0.15) !important; color: var(--av-bad)  !important; border-color: rgba(244, 63, 94, 0.35) !important; }
.badge.text-bg-primary-subtle { background: rgba(125, 211, 252, 0.15) !important; color: var(--av-ice) !important; border-color: rgba(125, 211, 252, 0.35) !important; }
.badge.text-bg-secondary-subtle { background: rgba(106, 115, 146, 0.15) !important; color: var(--av-ink-muted) !important; border-color: var(--av-rule) !important; }
.badge.text-bg-light,
.badge.text-bg-secondary {
    border-radius: 2px !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.66rem;
    padding: 0.22rem 0.42rem;
    background: var(--av-surface-2) !important;
    color: var(--av-ink) !important;
    border: 1px solid var(--av-rule) !important;
}

/* Cards on scans.php (Queue / Worker / Recent scans) get a saffron
   eyebrow+rule treatment so each one reads as a discrete instrument. */
.card-title {
    color: var(--av-headline);
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.card .text-uppercase.small.fw-semibold {
    color: var(--av-saffron) !important;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* Toast / inline-error alert that scans.php shows on POST failures. */
.alert-danger { color: var(--av-ink); }

/* =============================================================
   Phase D-H4 — Knowledge page reskin + Weights page sectioning
   ----------------------------------------------------------------
   The pre-Aurora knowledge / weights / screener chrome used
   `background: var(--ink)` + `color: #fff` to render an "active"
   highlight. With --ink now flipped to a light text colour
   (#D6DEEE), every active state renders as a near-white block on
   the dark ground. Re-target each of those active states to use
   ice or saffron tints with dark text instead.
   ============================================================= */

/* ---- Knowledge page (metrics.php) tabs + sidebar + depth strip ---- */
/* The duplicate .kb-hero rule in app.css carries a parchment+spell
   linear-gradient that bled through the cascade — flatten it out
   here so the hero reads as a tearsheet section rule, not a card. */
.brief-tearsheet .kb-hero {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--av-rule) !important;
    border-radius: 0 !important;
    padding: 1rem 0 1.25rem !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}
.brief-tearsheet .kb-hero-title em { color: var(--av-ice); font-style: italic; }
.brief-tearsheet .kb-hero-stat { border-left-color: var(--av-rule); }

/* The duplicate .kb-entry rule in app.css renders each reading-pane
   article as a rounded surface card with shadow — too "card-like"
   for the editorial Aurora aesthetic. Flatten to a transparent
   editorial column so the depth strip + headline carry the chrome. */
.brief-tearsheet .kb-entry {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
    box-shadow: none !important;
}
.brief-tearsheet .kb-entry:hover {
    transform: none !important;
    box-shadow: none !important;
}
.brief-tearsheet .kb-entry:target {
    box-shadow: none !important;
    border: 0 !important;
}

.brief-tearsheet .kb-tabs { border-bottom-color: var(--av-ink); }
.brief-tearsheet .kb-tab { color: var(--av-ink-muted); border-right-color: var(--av-rule); }
.brief-tearsheet .kb-tab:hover { background: var(--av-surface-2); color: var(--av-ink); }
.brief-tearsheet .kb-tab.is-active {
    background: var(--av-bg);
    color: var(--av-saffron);
    border-right-color: var(--av-rule);
    position: relative;
}
.brief-tearsheet .kb-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--av-saffron);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.brief-tearsheet .kb-tab.is-active .kb-tab-eyebrow { color: var(--av-saffron); opacity: 0.7; }
.brief-tearsheet .kb-tab.is-active .kb-tab-name { color: var(--av-ink); }
.brief-tearsheet .kb-tab.is-active .kb-tab-count { color: var(--av-ink-muted); }
.brief-tearsheet .kb-pane { border-bottom-color: var(--av-rule); }

.brief-tearsheet .kb-sidebar { border-right-color: var(--av-rule); }
.brief-tearsheet .kb-search-input {
    border-bottom-color: var(--av-rule);
    color: var(--av-ink);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.brief-tearsheet .kb-search-input:focus { border-bottom-color: var(--av-saffron); }
.brief-tearsheet .kb-search-input::placeholder { color: var(--av-ink-faint); }

/* Sidebar category heading turns into a clickable collapse toggle.
   The button-based heading has a caret on the right that flips when
   open. We default `aria-expanded="false"` server-side; JS auto-opens
   the category that contains the active item. */
.brief-tearsheet .kb-cat { margin-bottom: 0.4rem; }
.brief-tearsheet .kb-cat-heading {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--av-rule);
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: 0.85rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.45rem;
    padding: 0.35rem 0.25rem 0.3rem 0;
    margin: 0 0 0.2rem;
    cursor: pointer;
    color: var(--av-ink-muted);
    transition: color 120ms ease-out, border-color 120ms ease-out;
}
.brief-tearsheet .kb-cat-heading:hover { color: var(--av-ink); border-bottom-color: var(--av-saffron); }
.brief-tearsheet .kb-cat-caret {
    width: 0.7rem; height: 0.7rem;
    color: var(--av-ink-faint);
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 160ms ease-out, color 120ms ease-out;
    text-align: center;
}
.brief-tearsheet .kb-cat-heading[aria-expanded="true"] .kb-cat-caret {
    color: var(--av-saffron);
    transform: rotate(90deg);
}
.brief-tearsheet .kb-cat-name {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.84rem;
    color: var(--av-ink);
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.brief-tearsheet .kb-cat-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    color: var(--av-ink-faint);
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    line-height: 1;
}
.brief-tearsheet .kb-cat-list[hidden] { display: none; }
.brief-tearsheet .kb-cat-list {
    list-style: none;
    padding: 0.15rem 0 0.4rem;
    margin: 0;
}
.brief-tearsheet .kb-side-item {
    color: var(--av-ink-soft);
    border-radius: 0;
}
.brief-tearsheet .kb-side-item:hover {
    background: rgba(125, 211, 252, 0.06);
    color: var(--av-ink);
}
.brief-tearsheet .kb-side-item:hover::before { background: var(--av-rule); }
.brief-tearsheet .kb-side-item.is-active {
    background: rgba(251, 191, 36, 0.10);
    color: var(--av-ink);
}
.brief-tearsheet .kb-side-item.is-active::before { background: var(--av-saffron); }

/* Reading pane chrome */
.brief-tearsheet .kb-entry-head { border-bottom-color: var(--av-ink); }
.brief-tearsheet .kb-entry-head::after { background: var(--av-saffron); }
.brief-tearsheet .kb-entry-eyebrow { color: var(--av-ink-muted); }
.brief-tearsheet .kb-entry-sep { color: var(--av-ink-faint); }
.brief-tearsheet .kb-entry-title { color: var(--av-headline); }
.brief-tearsheet .kb-tag {
    border-color: var(--av-rule);
    color: var(--av-ink-soft);
    background: var(--av-surface-2);
    border-radius: 2px;
}
.brief-tearsheet .kb-tag--good { color: var(--av-good); border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.10); }
.brief-tearsheet .kb-tag--bad  { color: var(--av-bad);  border-color: rgba(244, 63, 94, 0.45);  background: rgba(244, 63, 94, 0.10); }
.brief-tearsheet .kb-tag--neutral { color: var(--av-ink-muted); }
.brief-tearsheet .kb-tag-slug { color: var(--av-ink-faint); }
.brief-tearsheet .kb-entry-tldr { color: var(--av-ink); }
.brief-tearsheet .kb-entry-long { color: var(--av-ink-soft); }

/* Depth strip */
.brief-tearsheet .kb-depth-strip {
    border-top-color: var(--av-rule);
    border-bottom-color: var(--av-rule);
}
.brief-tearsheet .kb-depth { border-right-color: var(--av-rule); }
.brief-tearsheet .kb-depth-label { color: var(--av-ink); }
/* Depth-num badges — re-tinted away from "background: var(--ink)" so
   they don't render as bright pseudo-white blocks. */
.brief-tearsheet .kb-depth-num {
    background: var(--av-surface-3);
    color: var(--av-ink);
    border: 1px solid var(--av-rule);
    border-radius: 2px;
}
.brief-tearsheet .kb-depth--measure .kb-depth-num { color: var(--av-ice);   border-color: rgba(125, 211, 252, 0.4); }
.brief-tearsheet .kb-depth--formula .kb-depth-num { color: var(--av-saffron); border-color: rgba(251, 191, 36, 0.4); }
.brief-tearsheet .kb-depth--interp  .kb-depth-num { color: var(--av-good); border-color: rgba(52, 211, 153, 0.4); }
.brief-tearsheet .kb-depth-text { color: var(--av-ink-soft); }
.brief-tearsheet .kb-depth-text--empty { color: var(--av-ink-faint); }
.brief-tearsheet .kb-depth-code {
    background: var(--av-bg-deep) !important;
    border-left: 2px solid var(--av-ice);
    color: var(--av-ice);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}
.brief-tearsheet .kb-depth-code--params { border-left-color: var(--av-saffron); color: var(--av-saffron); }
.brief-tearsheet .kb-depth-subline { color: var(--av-ink-muted); }
.brief-tearsheet .kb-depth-subline-label { color: var(--av-ink-faint); }

/* Per-formula variable glossary — sits under the formula in the
   knowledge-base depth strip. Stacked layout: identifier (mono, ice)
   on its own line, plain-English description on the next. */
.brief-tearsheet .kb-depth-vars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0.6rem 0 0;
    padding: 0.65rem 0.8rem;
    background: var(--av-surface-2);
    border: 1px solid var(--av-rule);
    border-left: 2px solid var(--av-ink-faint);
    border-radius: 2px;
}
.brief-tearsheet .kb-depth-var {
    display: block;
    margin: 0;
    min-width: 0;
}
.brief-tearsheet .kb-depth-var-name {
    display: block;
    margin: 0 0 0.15rem;
    line-height: 1.2;
    color: var(--av-ice);
}
.brief-tearsheet .kb-depth-var-name code {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    word-break: break-all;
}
.brief-tearsheet .kb-depth-var-desc {
    display: block;
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--av-ink-soft);
}
.brief-tearsheet .kb-depth-var-kind {
    display: inline-block;
    margin: 0 0.4rem 0.15rem 0;
    padding: 0.1rem 0.32rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.68rem;
    line-height: 1;
    color: var(--av-ink-faint);
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    text-transform: uppercase;
}
.brief-tearsheet .kb-depth-var-unit {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--av-ink-faint);
    margin-left: 0.4rem;
    padding: 0 0.32rem;
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    line-height: 1;
}
.brief-tearsheet .kb-depth-source {
    margin-top: 0.7rem;
    padding: 0.65rem 0.75rem;
    background: color-mix(in srgb, var(--av-bg-deep) 72%, transparent);
    border: 1px solid var(--av-rule);
    border-left: 2px solid var(--av-ice);
    border-radius: 2px;
}
.brief-tearsheet .kb-depth-source-eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--av-ink-faint);
}
.brief-tearsheet .kb-depth-source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}
.brief-tearsheet .kb-depth-source-tag {
    padding: 0.16rem 0.42rem;
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    color: var(--av-ink-soft);
    font-size: 0.72rem;
    line-height: 1.2;
}
.brief-tearsheet .kb-depth-source-list,
.brief-tearsheet .kb-depth-source-notes {
    margin: 0.35rem 0 0;
    padding-left: 1rem;
    color: var(--av-ink-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}
.brief-tearsheet .kb-depth-source-list a {
    color: var(--av-ice);
    text-decoration: none;
}
.brief-tearsheet .kb-depth-source-list a:hover {
    text-decoration: underline;
}
.brief-tearsheet .kb-depth-source-notes {
    color: var(--av-ink-soft);
}


/* Per-signal preset attribution — sits below the parameters block in
   the knowledge-base depth strip. Shows the active preset's source
   (Wilder / Connors / fiscal-wizard tuning), citation, rationale,
   and a collapsible list of alternative tunings the registry knows
   about. Read-only display — the preset selector itself is backend-
   only per Phase D-O scope. */
.brief-tearsheet .kb-depth-preset {
    margin-top: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: var(--av-surface-2);
    border: 1px solid var(--av-rule);
    border-left: 2px solid var(--av-saffron);
    border-radius: 2px;
}
.brief-tearsheet .kb-depth-preset-eyebrow {
    margin: 0 0 0.3rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--av-saffron);
}
.brief-tearsheet .kb-depth-preset-source {
    margin: 0 0 0.25rem;
    font-size: 0.86rem;
    color: var(--av-ink);
}
.brief-tearsheet .kb-depth-preset-source strong { color: var(--av-ink); font-weight: 600; }
.brief-tearsheet .kb-depth-preset-tag {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.06rem 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.66rem;
    color: var(--av-ice);
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.brief-tearsheet .kb-depth-preset-cite {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    color: var(--av-ink-muted);
    font-style: italic;
}
.brief-tearsheet .kb-depth-preset-rationale {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--av-ink-soft);
}
.brief-tearsheet .kb-depth-preset-alts {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--av-rule);
    padding-top: 0.45rem;
}
.brief-tearsheet .kb-depth-preset-alts-summary {
    cursor: pointer;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--av-ink-muted);
    list-style: none;
    user-select: none;
}
.brief-tearsheet .kb-depth-preset-alts-summary::-webkit-details-marker { display: none; }
.brief-tearsheet .kb-depth-preset-alts-summary::before {
    content: "▸ ";
    color: var(--av-ink-faint);
    font-size: 0.85em;
}
.brief-tearsheet .kb-depth-preset-alts[open] .kb-depth-preset-alts-summary::before { content: "▾ "; color: var(--av-saffron); }
.brief-tearsheet .kb-depth-preset-alts-summary:hover { color: var(--av-ink); }
.brief-tearsheet .kb-depth-preset-alts-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.brief-tearsheet .kb-depth-preset-alt { padding-left: 0; }
.brief-tearsheet .kb-depth-preset-alt-label {
    color: var(--av-ink);
    font-weight: 600;
    font-size: 0.82rem;
}
.brief-tearsheet .kb-depth-preset-alt-source {
    margin-left: 0.5rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--av-ink-faint);
}
.brief-tearsheet .kb-depth-preset-alt-rationale {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--av-ink-muted);
}

/* Interp list inside depth iii */
.brief-tearsheet .kb-interp-row {
    background: var(--av-surface-2);
    border-left: 3px solid var(--av-rule);
}
.brief-tearsheet .kb-interp-row--good { border-left-color: var(--av-good); }
.brief-tearsheet .kb-interp-row--warn { border-left-color: var(--av-warn); }
.brief-tearsheet .kb-interp-row--bad  { border-left-color: var(--av-bad); }
.brief-tearsheet .kb-interp-label { color: var(--av-ink-muted); }
.brief-tearsheet .kb-interp-row--good .kb-interp-label { color: var(--av-good); }
.brief-tearsheet .kb-interp-row--warn .kb-interp-label { color: var(--av-warn); }
.brief-tearsheet .kb-interp-row--bad  .kb-interp-label { color: var(--av-bad); }
.brief-tearsheet .kb-interp-text { color: var(--av-ink); }

.brief-tearsheet .kb-entry-foot-eyebrow { color: var(--av-ink-muted); }
.brief-tearsheet .kb-cites a { color: var(--av-ice); }
.brief-tearsheet .kb-cites a:hover { color: var(--av-ice-deep); }
.brief-tearsheet .kb-gates { border-top-color: var(--av-rule); }
.brief-tearsheet .kb-gate-state {
    background: var(--av-surface-2);
    border-color: var(--av-rule);
}
.brief-tearsheet .kb-gate-state-title { color: var(--av-saffron); }
.brief-tearsheet .kb-gate-rule { color: var(--av-ink); }
.brief-tearsheet .kb-gate-rule-reason,
.brief-tearsheet .kb-gate-rule--context { color: var(--av-ink-muted); }

/* ---- Other left-over `background: var(--ink)` active states ---- */
.brief-tearsheet .screener-chip.is-active {
    background: var(--av-ice) !important;
    color: var(--av-bg) !important;
    border-color: var(--av-ice) !important;
}
.brief-tearsheet .screener-chip-more-item.is-active {
    background: var(--av-ice) !important;
    color: var(--av-bg) !important;
}
.brief-tearsheet .screener-pill:hover {
    background: var(--av-ice) !important;
    color: var(--av-bg) !important;
}
.brief-tearsheet .screener-sig-opt--any.is-active {
    background: var(--av-ice) !important;
    border-color: var(--av-ice) !important;
    color: var(--av-bg) !important;
}

/* =============================================================
   Phase D-H4 — Weights page (index.php) tabbed sectioning
   The page is wrapped in .brief-tearsheet so it inherits Aurora
   chrome; the new tab strip + content panes are styled here.
   ============================================================= */
.weights-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--av-ink);
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
}
.weights-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--av-rule);
    padding: 0.7rem 1.1rem 0.6rem;
    cursor: pointer;
    color: var(--av-ink-muted);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 11rem;
    transition: background-color 100ms ease-out, color 100ms ease-out;
    position: relative;
}
.weights-tab:hover { background: var(--av-surface-2); color: var(--av-ink); }
.weights-tab.is-active {
    background: var(--av-bg);
    color: var(--av-ink);
}
.weights-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--av-saffron);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.weights-tab-eyebrow {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-size: 0.7rem;
    color: var(--av-ink-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.weights-tab.is-active .weights-tab-eyebrow { color: var(--av-saffron); }
.weights-tab-name {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: inherit;
    letter-spacing: -0.005em;
}
.weights-tab-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--av-ink-faint);
}

.weights-pane[hidden] { display: none !important; }
.weights-pane { animation: tearsheet-pane-fade 220ms ease-out both; }

/* Anchor strip inside Fundamentals/Technicals tabs — quick jump
   between categories. */
.weights-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.25rem 0 1.25rem;
}
.weights-anchor {
    appearance: none;
    text-decoration: none;
    border: 1px solid var(--av-rule);
    background: var(--av-surface);
    color: var(--av-ink-muted);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.32rem 0.6rem;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 120ms ease-out, color 120ms ease-out, background-color 120ms ease-out;
    line-height: 1;
}
.weights-anchor:hover {
    color: var(--av-ink);
    border-color: var(--av-ice);
    background: var(--av-surface-2);
}

/* Per-category section inside a weights pane */
.weights-section {
    margin-bottom: 1.5rem;
    padding: 1rem 1.1rem 1.2rem;
    background: var(--av-surface);
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    scroll-margin-top: 4.5rem;
}
.weights-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    border-bottom: 1px solid var(--av-rule);
    padding-bottom: 0.55rem;
    margin-bottom: 0.85rem;
}
.weights-section-head h4 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--av-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.weights-section-count {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    color: var(--av-ink-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Composite mix card / Top 10 card stay self-contained sections. */
.weights-card {
    background: var(--av-surface);
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    padding: 1.25rem 1.5rem;
}
.weights-card-head {
    border-bottom: 1px solid var(--av-rule);
    padding-bottom: 0.7rem;
    margin-bottom: 1rem;
}
.weights-card-head h3 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--av-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.weights-card-head .form-text { color: var(--av-ink-muted); margin-top: 0.2rem; }

/* Variant for the flush (p-0) table card — carries its own padding and
   hosts the "All results →" link on the right. */
.weights-card-head--table {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem 0.8rem;
    margin-bottom: 0;
}
.weights-card-head--table .form-text { margin-bottom: 0; }
.weights-results-link {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--av-ice);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 0.15rem;
}
.weights-results-link:hover { color: var(--av-ice-deep); text-decoration: underline; }

/* Missing per-leg grade in the latest-run table — visibly de-emphasized. */
#weightsTopTable td.grade-missing { color: var(--av-ink-faint); cursor: help; }

/* Sticky save bar at the bottom of weight panes */
.weights-savebar {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--av-bg) 35%);
    padding: 0.85rem 0 0.5rem;
    margin-top: 1.25rem;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Small screens: the tab strip otherwise stacks into a full screen of
   ledger cards before any content. Compact 2×2 grid instead, and give
   the sticky savebar a solid footing so it stops half-veiling the
   slider row beneath it. */
@media (max-width: 767.98px) {
    .weights-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        border-bottom: 0;
        overflow-x: visible;
    }
    .weights-tab {
        min-width: 0;
        border: 1px solid var(--av-rule);
        border-radius: 2px;
        padding: 0.55rem 0.75rem 0.5rem;
    }
    .weights-tab.is-active { border-color: var(--av-saffron); }
    .weights-tab.is-active::after { display: none; }
    .weights-savebar {
        background: var(--av-bg);
        border-top: 1px solid var(--av-rule);
        padding-top: 0.65rem;
    }
}

/* Slider rows on weights — use mono numerics, ice slider thumb.
   app.css loads after this file, so its parchment-era `--c-*` tokens win
   the :root cascade and leak light values into `.slider-row` (white hover
   bar, black-on-white output chips). Re-assert the Aurora values here with
   higher selector specificity than app.css's `.slider-row …` rules. */
.brief-tearsheet .slider-row .col-form-label {
    color: var(--av-ink);
    font-weight: 500;
}
.brief-tearsheet .slider-row:hover { background: var(--av-surface-2); }
.brief-tearsheet .slider-row + .slider-row { border-top-color: var(--av-rule); }
.brief-tearsheet .slider-row .weight-output {
    color: var(--av-saffron);
    background: var(--av-surface-3);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* Live composite mix bar — fundamentals (ice) vs technicals (saffron)
   share of the headline grade, re-balanced live by the two sliders. */
.mix-viz { margin: 1.15rem 0 0.35rem; }
.mix-viz-track {
    display: flex;
    height: 24px;
    border: 1px solid var(--av-rule);
    border-radius: 2px;
    overflow: hidden;
    background: var(--av-bg-deep);
}
.mix-viz-fund,
.mix-viz-tech {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    transition: width 160ms ease-out;
}
.mix-viz-fund {
    justify-content: flex-end;
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.92), rgba(56, 189, 248, 0.72));
}
.mix-viz-tech {
    justify-content: flex-start;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.88), rgba(217, 164, 28, 0.68));
}
.mix-viz-pct {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.7rem;
    font-weight: 600;
    color: #04060B;
    padding: 0 0.5rem;
    white-space: nowrap;
}
.mix-viz-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem;
}
.mix-viz-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--av-ink-muted);
}
.mix-viz-key::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.mix-viz-key--fund::before { background: var(--av-ice); }
.mix-viz-key--tech::before { background: var(--av-saffron); }
.mix-viz-zero {
    color: var(--av-warn);
    font-size: 0.8rem;
    margin: 0.5rem 0 0;
}

/* Scrollbar polish (Webkit only, harmless elsewhere) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--av-bg-deep); }
::-webkit-scrollbar-thumb {
    background: var(--av-surface-3);
    border: 3px solid var(--av-bg-deep);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--av-ice); }

/* =============================================================
   Command palette (Cmd/Ctrl+K)
   ============================================================= */
.fw-cmd-dialog {
    max-width: 540px;
    margin-top: 10vh;
}
.fw-cmd-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.fw-cmd-icon {
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.fw-cmd-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--bs-body-color);
}
.fw-cmd-input::placeholder {
    color: var(--bs-tertiary-color);
}
.fw-cmd-esc-hint {
    flex-shrink: 0;
    font-size: 0.75rem;
}
.fw-cmd-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    max-height: 360px;
    overflow-y: auto;
}
.fw-cmd-list-header {
    padding: 0.25rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bs-tertiary-color);
    cursor: default;
}
.fw-cmd-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9375rem;
    border-radius: 0;
    color: var(--bs-body-color);
    transition: background-color 0.08s;
}
.fw-cmd-item:hover,
.fw-cmd-item[aria-selected="true"] {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.fw-cmd-item-icon {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--bs-secondary-color);
}
.fw-cmd-item-label { flex: 1; }
.fw-cmd-item-sub {
    font-size: 0.78rem;
    color: var(--bs-tertiary-color);
}
@media (prefers-reduced-motion: reduce) {
    .fw-cmd-item { transition: none; }
}