/*
 * Problem Board — CRW Phase 6 (2026-04-18)
 *
 * Styles the .pb-* class vocabulary emitted by
 * static/js/census/components/problem-board-card.js and problem-board.js.
 *
 * Uses the Dark Roast / terminal design tokens where available
 * (--term-*, --dr-*), falling back to neutral values for robustness.
 *
 * REF: docs/plans/2026-04-18-001-feat-clinical-reasoning-workspace-adoption-plan.md
 */

/* ---------- Panel + mount (reuses reasoning-tree-panel chrome) ---------- */

.reasoning-tree-panel.pb-panel {
    /* The panel frame is shared with the reasoning tree — this hook only
     * exists so future overrides can target the board exclusively. */
}

.pb-mount {
    padding: 1rem;
    min-height: 16rem;
    color: var(--term-text-primary, #E8E1D6);
}

.pb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0.7;
    padding: 3rem 1rem;
    text-align: center;
}

.pb-empty-state i {
    font-size: 2rem;
    color: var(--term-text-secondary, #8C857A);
}

.pb-unavailable {
    padding: 1rem;
    border-radius: 4px;
    background: rgba(200, 120, 0, 0.06);
    border: 1px solid rgba(200, 120, 0, 0.25);
    color: var(--term-text-secondary, #8C857A);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.85rem;
}

/* ---------- Card grid ---------- */

.pb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    padding: 0;
}

/* ---------- Individual card ---------- */

.pb-card {
    background: var(--term-bg-raised, rgba(28, 25, 20, 0.9));
    border: 1px solid var(--term-border-subtle, rgba(232, 225, 214, 0.12));
    border-radius: 6px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--term-text-primary, #E8E1D6);
}

.pb-card[data-status="confirmed"] {
    border-color: rgba(66, 180, 120, 0.35);
}

.pb-card[data-status="pruned"] {
    opacity: 0.6;
    border-style: dashed;
}

.pb-card[data-status="deferred"] {
    border-color: rgba(240, 180, 80, 0.4);
}

.pb-card[data-status="superseded"] {
    opacity: 0.7;
    font-style: italic;
}

/* ---------- Header ---------- */

.pb-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pb-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--term-text-primary, #E8E1D6);
    flex: 1;
    min-width: 0;
}

.pb-card-status {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(140, 133, 122, 0.18);
    color: var(--term-text-secondary, #8C857A);
    white-space: nowrap;
}

.pb-card-status[data-status="active"]    { color: #4ad1ff; background: rgba(74, 209, 255, 0.12); }
.pb-card-status[data-status="confirmed"] { color: #42b478; background: rgba(66, 180, 120, 0.15); }
.pb-card-status[data-status="pruned"]    { color: #c97b68; background: rgba(201, 123, 104, 0.15); }
.pb-card-status[data-status="deferred"]  { color: #f0b450; background: rgba(240, 180, 80, 0.15); }
.pb-card-status[data-status="superseded"]{ color: #a89fc2; background: rgba(168, 159, 194, 0.15); }

.pb-card-confidence {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--term-text-secondary, #8C857A);
    white-space: nowrap;
}

/* ---------- Ancestry / rationale / deferred ---------- */

.pb-card-ancestry {
    font-size: 0.7rem;
    color: var(--term-text-secondary, #8C857A);
    font-style: italic;
    letter-spacing: 0.02em;
}

.pb-card-rationale {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--term-text-primary, #E8E1D6);
    opacity: 0.92;
}

.pb-deferred {
    font-size: 0.75rem;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    background: rgba(240, 180, 80, 0.08);
    border-left: 2px solid #f0b450;
    color: #f0b450;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ---------- Evidence sections ---------- */

.pb-evidence-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pb-evidence-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--term-text-secondary, #8C857A);
}

.pb-evidence-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pb-evidence-item {
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    background: rgba(140, 133, 122, 0.05);
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    word-break: break-word;
}

.pb-evidence-item:hover,
.pb-evidence-item:focus-visible {
    background: rgba(74, 209, 255, 0.1);
    border-left-color: rgba(74, 209, 255, 0.6);
    outline: none;
}

.pb-evidence-item.pb-evidence-abnormal {
    color: #ff8f7d;
    font-weight: 600;
    border-left-color: rgba(255, 143, 125, 0.6);
}

.pb-evidence-item.pb-evidence-fragment {
    background: rgba(168, 159, 194, 0.1);
    border-left-color: rgba(168, 159, 194, 0.5);
    font-style: italic;
}

/* Bidirectional highlight — the ProvHighlightBus class is applied to every
 * [data-prov-id] element that shares the active prov. Make it unmissable. */
.prov-highlighted {
    outline: 2px solid #4ad1ff !important;
    outline-offset: 1px !important;
    background: rgba(74, 209, 255, 0.2) !important;
    transition: outline 60ms ease, background 60ms ease;
}

/* ---------- Disclosure (Available evidence) ---------- */

.pb-disclosure {
    margin-top: 0.2rem;
}

.pb-disclosure > summary {
    cursor: pointer;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--term-text-secondary, #8C857A);
    padding: 0.2rem 0;
    list-style: none;
}

.pb-disclosure > summary::-webkit-details-marker { display: none; }
.pb-disclosure > summary::marker { content: ''; }
.pb-disclosure > summary::before {
    content: '▸ ';
    display: inline-block;
    transition: transform 120ms ease;
}
.pb-disclosure[open] > summary::before { content: '▾ '; }

/* ---------- Lab SVG wrap ---------- */

.pb-lab-svg {
    background: rgba(232, 225, 214, 0.04);
    border-radius: 4px;
    padding: 0.4rem;
    overflow-x: auto;
}

.pb-lab-svg svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Re-theme the inline LabSkeletonRenderer text to match the dark surface. */
.pb-lab-svg svg .ls-title { fill: var(--term-text-secondary, #8C857A) !important; }
.pb-lab-svg svg .ls-name  { fill: var(--term-text-secondary, #8C857A) !important; }
.pb-lab-svg svg .ls-value { fill: var(--term-text-primary, #E8E1D6) !important; }
.pb-lab-svg svg .ls-abnormal { fill: #ff8f7d !important; }

/* ---------- Next steps ---------- */

.pb-next-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.pb-next-step {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    border-left: 2px solid transparent;
    background: rgba(140, 133, 122, 0.05);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    line-height: 1.4;
    word-break: break-word;
}

.pb-next-step-dx      { border-left-color: #4ad1ff; }
.pb-next-step-tx      { border-left-color: #42b478; }
.pb-next-step-caution { border-left-color: #f0b450; color: #f0b450; }

/* ---------- Unplaced-evidence inbox ---------- */

.pb-unplaced {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background: rgba(240, 180, 80, 0.05);
    border: 1px solid rgba(240, 180, 80, 0.2);
}

.pb-unplaced > summary {
    cursor: pointer;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    color: #f0b450;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.2rem 0;
}

.pb-unplaced > summary::-webkit-details-marker { display: none; }
.pb-unplaced > summary::before {
    content: '▸ ';
    transition: transform 120ms ease;
}
.pb-unplaced[open] > summary::before { content: '▾ '; }