/* ==========================================================================
   ADMISSIONS FISHBONE (ENABLE_AW_FISHBONE / window.__AW_FISHBONE, 2026-07-31)

   Styles for the phosphor fishbone (vendor: js/admissions/vendor/lab_skeleton.js)
   wired into the Admissions LABS card by js/admissions/lab-fishbone.js.

   Sections:
     1. Mount contract (INTEGRATION.md M1 — the vendor's mountFishbone emits
        .fb-layer.fb-values + .fb-layer.fb-legend inside a .fishbone-mount;
        these rules are the canonical CSS side of that contract)
     2. LABS-card container + toolbar (VALUES|TREND seg, LEGEND toggle)
     3. TREND strip — small multiples, one mini fishbone per parsed.series day
     4. Census-card thumbnail (INTEGRATION.md M2)
     5. Ledger provenance rows (INTEGRATION.md M3 — markup emitted by the
        right-rail ledger; classes contracted here)

   The VALUES|TREND seg control and LEGEND toggle deliberately REUSE the
   workspace's existing .awx-mode-toggle / .awx-mode-btn look (admissions.css)
   — only fishbone-specific layout and the aria-pressed state live here.
   Colours come from --term-* tokens only (terminal-tokens.css); the SVG's own
   palette is the vendor THEMES.dark, already tuned to this workspace.
   ========================================================================== */

/* ── 1. Mount contract (do not relax — mirrored by mountFishbone inline) ── */
.fishbone-mount { position: relative; }
.fb-layer { transition: opacity .5s; }
.fb-legend { position: absolute; inset: 0; pointer-events: none; }

.awf-host {
    min-width: 0;
    margin-top: var(--term-space-sm);
    border-top: 1px solid var(--term-border-subtle);
}

.awf-host svg { max-height: 18rem; }
.awm-row .awf-host { padding: var(--term-space-xs) var(--term-space-sm) 0; }

/* ── 2. LABS-card container + toolbar ───────────────────────────────────── */
.awf-card {
    display: flex;
    flex-direction: column;
    gap: var(--term-space-sm);
    padding: var(--term-space-sm) 0;
}

.awf-toolbar {
    display: flex;
    align-items: center;
    gap: var(--term-space-sm);
}

/* LEGEND sits at the trailing edge of the toolbar. */
.awf-legend-btn { margin-left: auto; }
.awf-legend-btn[aria-pressed="true"] {
    color: var(--term-accent);
    border-color: var(--term-accent-dim);
}

.awf-view[hidden] { display: none; }

/* ── 3. TREND strip — horizontal small multiples, per-day Σ ─────────────── */
.awf-view-trend {
    display: flex;
    gap: var(--term-space-md);
    overflow-x: auto;
    padding-bottom: var(--term-space-xs);
}

.awf-trend-day {
    flex: 0 0 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.awf-trend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
    color: var(--term-fg-muted);
}

.awf-trend-sigma { color: var(--term-gold); }

/* ── 4. Census-card thumbnail (squint-test glyph; no labels, no legend) ─── */
.awf-thumb {
    display: block;
    width: 132px;
    flex: 0 0 auto;
}

/* Σ readout + critical dot placed next to the thumbnail by the census card. */
.awf-sigma {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-gold);
}

.awf-crit-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--term-status-error);
    box-shadow: var(--term-glow-red);
}

/* ── 5. Ledger provenance rows — every pixel auditable back to source ──────
   Contract for the rail markup:
   <div class="awf-ledger-row [--annex]">
     <span class="awf-ledger-label">Na</span>
     <span class="awf-ledger-raw">129</span>
     <span class="awf-ledger-flag awf-ledger-flag--low">LOW</span>
	     <span class="awf-ledger-origin">source range · ref 135–145</span>
     <span class="awf-ledger-source">Na 129</span>
   </div>                                                                    */
.awf-ledger {
    display: flex;
    flex-direction: column;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
}

.awf-ledger-row {
    display: grid;
    grid-template-columns: minmax(2.5rem, 0.7fr) minmax(3.5rem, 0.8fr) auto;
    align-items: baseline;
    gap: var(--term-space-sm);
    padding: var(--term-space-xs) 0;
    border-bottom: 1px solid var(--term-border-subtle);
}

.awf-ledger-label { color: var(--term-fg-secondary); }
.awf-ledger-raw { color: var(--term-fg-primary); }
.awf-ledger-origin,
.awf-ledger-source {
    grid-column: 1 / -1;
    color: var(--term-fg-muted);
    overflow-wrap: anywhere;
}
.awf-ledger-source { opacity: 0.78; }
.awf-ledger-source::before { content: '“'; }
.awf-ledger-source::after { content: '”'; }

.awf-ledger-note {
    padding: var(--term-space-xs) 0 var(--term-space-sm);
    color: var(--term-fg-muted);
    font-family: var(--term-font-mono);
    font-size: 0.5625rem;
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
}

.awf-ledger-flag { color: var(--term-fg-muted); }
.awf-ledger-flag--low,
.awf-ledger-flag--high { color: var(--term-gold); }
.awf-ledger-flag--crit { color: var(--term-status-error); }

/* Annex entries (off-skeleton analytes) list under their own header. */
.awf-ledger-row--annex .awf-ledger-label { color: var(--term-gold); }
.awf-ledger-annex-head {
    padding: var(--term-space-sm) 0 2px;
    font-size: 0.5625rem;
    letter-spacing: var(--term-tracking-wider);
    text-transform: uppercase;
    color: var(--term-fg-muted);
}

/* ── 6. Sheet-top LABS instrument (2026-08-01) — the fishbone, promoted ──
   One mount ABOVE the note (document-host._syncLabsInstrument): visible in
   every mode without scrolling ten sections down to the LABS row. The head
   names the panel + its severity; SOURCE ↓ jumps to the row's source text
   (reuses the data-awm-jump delegation). The LABS row keeps prose only. */
.awm-instrument {
    margin: 0 0 var(--term-space-sm);
    border: 1px solid var(--term-border-subtle);
    border-radius: var(--term-radius-md, 6px);
    background: var(--term-bg-panel, transparent);
}

.awm-instrument-head {
    display: flex;
    align-items: baseline;
    gap: var(--term-space-sm);
    padding: var(--term-space-xs) var(--term-space-sm) 0;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
}

.awm-instrument-title { color: var(--term-fg-secondary); }
.awm-instrument-meta { color: var(--term-gold); }
.awm-instrument-crit { color: var(--term-status-error); }

.awm-instrument-jump {
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-transform: uppercase;
    color: var(--term-fg-muted);
    cursor: pointer;
}
.awm-instrument-jump:hover { color: var(--term-accent); }

.awm-instrument .awf-host {
    margin-top: 0;
    border-top: none;
    padding: 0 var(--term-space-sm) var(--term-space-xs);
}

@media (max-width: 720px) {
    .awf-toolbar { align-items: flex-start; }
    .awf-trend-day { flex-basis: 200px; }
    .awf-host svg { max-height: 14rem; }
}