/* Topbar Score — chip + Clear/Copy inside the rail topbar (≥900px)
   Activated by TopbarScore.init() on score modules (GCAPS, SLEDAI, AxSpA,
   BVAS, DAS28-CRP). Mobile score strip is untouched. */

@media (min-width: 900px) {

    /* ========== Chip slot ========== */

    .topbar-score {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        gap: 0.5rem;
        grid-column: 2;
    }
    .topbar-score[hidden] { display: none; }

    .topbar-score-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: 28px;
        padding: 0 0.75rem;
        border-radius: 999px;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        font-size: var(--text-xs);
        color: var(--text-secondary);
        white-space: nowrap;
        min-width: 0;
    }

    .topbar-score-value {
        font-weight: var(--font-bold);
        font-size: var(--text-sm);
        color: var(--theme-primary);
    }

    /* State-colour overrides match the existing calc-combined-score colouring
       so each module paints its chip value without new tokens. */
    .topbar-score-value[data-state="none"]         { color: var(--text-muted); }
    .topbar-score-value[data-state="low"]          { color: var(--risk-low-text); }
    .topbar-score-value[data-state="med"],
    .topbar-score-value[data-state="intermediate"] { color: var(--risk-med-text); }
    .topbar-score-value[data-state="high"]         { color: var(--risk-high-text); }

    .topbar-score-label {
        color: var(--text-muted);
        font-size: var(--text-xs);
    }

    .topbar-score-sep {
        color: var(--border-color);
        padding: 0 0.125rem;
    }

    /* Pulse dot — colour is driven by the chip's data-state so GCAPS/SLEDAI dots
       pick up green/amber/red like the mobile strip did. currentColor fallback
       keeps the pulse ring matching the dot fill. */
    .topbar-score-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--text-muted);
        color: var(--text-muted);
        animation: topbar-score-pulse 2s infinite;
        flex-shrink: 0;
    }

    .topbar-score-chip[data-state="low"] .topbar-score-dot {
        background: var(--risk-low-text);
        color: var(--risk-low-text);
    }
    .topbar-score-chip[data-state="med"] .topbar-score-dot,
    .topbar-score-chip[data-state="intermediate"] .topbar-score-dot {
        background: var(--risk-med-text);
        color: var(--risk-med-text);
    }
    .topbar-score-chip[data-state="high"] .topbar-score-dot {
        background: var(--risk-high-text);
        color: var(--risk-high-text);
    }

    @keyframes topbar-score-pulse {
        0%   { box-shadow: 0 0 0 0 currentColor; opacity: 0.9; }
        70%  { box-shadow: 0 0 0 6px transparent; opacity: 1; }
        100% { box-shadow: 0 0 0 0 transparent; opacity: 0.9; }
    }

    @media (prefers-reduced-motion: reduce) {
        .topbar-score-dot { animation: none; }
    }

    /* ========== Actions slot ========== */

    .topbar-score-actions {
        display: inline-flex;
        gap: 0.375rem;
        align-items: center;
        flex-shrink: 0;
    }
    .topbar-score-actions[hidden] { display: none; }

    .topbar-score-clear,
    .topbar-score-copy {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 32px;
        padding: 0 0.75rem;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: 0.8125rem;
        font-weight: var(--font-semibold);
        line-height: 1;
        cursor: pointer;
        transition: background var(--transition-fast),
                    border-color var(--transition-fast),
                    color var(--transition-fast),
                    filter var(--transition-fast);
    }

    .topbar-score-clear svg,
    .topbar-score-copy svg {
        width: 14px;
        height: 14px;
    }

    /* Clear — outlined, matches calc-header-clear DNA.
       Light mode uses a white chip fill + darker edge so the button lifts
       off the #F0F2F5 topbar bg (same treatment as .topbar-action-btn);
       dark mode reverts to transparent via the override below. */
    .topbar-score-clear {
        background: var(--bg-secondary);
        border: 1px solid #D1D5DB;
        color: var(--text-primary);
    }

    [data-theme="dark"] .topbar-score-clear {
        background: transparent;
        border-color: var(--border-color);
    }

    @media (hover: hover) {
        .topbar-score-clear:hover {
            border-color: var(--theme-primary);
            color: var(--theme-primary);
            background: var(--bg-surface, var(--bg-primary));
        }
    }
    .hover-capable .topbar-score-clear:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary);
        background: var(--bg-surface, var(--bg-primary));
    }

    /* Eraser shake — animateClearButton() adds/removes the .clear-active class,
       reusing the same hook the old .calc-header-clear used. Declare the keyframes
       locally so deletion of calculator-shared.css rules doesn't break the animation. */
    .topbar-score-clear.clear-active {
        animation: topbar-score-clear-shake 0.4s ease-in-out;
    }

    @keyframes topbar-score-clear-shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-2px) rotate(-3deg); }
        75% { transform: translateX(2px) rotate(3deg); }
    }

    @media (prefers-reduced-motion: reduce) {
        .topbar-score-clear.clear-active { animation: none; }
    }

    /* Copy — solid primary block with white icon + label (matches calc-header-copy DNA) */
    .topbar-score-copy {
        background: var(--theme-primary);
        border: 1px solid var(--theme-primary);
        color: var(--text-on-theme);
    }

    @media (hover: hover) {
        .topbar-score-copy:hover {
            background: var(--theme-dark);
            border-color: var(--theme-dark);
        }
    }
    .hover-capable .topbar-score-copy:hover {
        background: var(--theme-dark);
        border-color: var(--theme-dark);
    }

    /* ========== DAS28-CRP chip (value + mini scale bar + category) ==========
       Custom chip shape — wider than the generic pill because it carries a
       live 0–7.5 gauge. Mutated in place by updateScoreDisplay() so the
       scaleX transition persists across score updates. */

    .topbar-das28-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        height: 28px;
        padding: 0 0.75rem;
        border-radius: 999px;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        font-size: var(--text-xs);
        color: var(--text-secondary);
        white-space: nowrap;
        min-width: 0;
    }

    .topbar-das28-value {
        font-weight: var(--font-bold);
        font-size: var(--text-sm);
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
        min-width: 2.25rem;
        text-align: right;
        transition: color var(--transition-base);
    }

    .topbar-das28-bar {
        position: relative;
        width: 120px;
        flex-shrink: 0;
    }

    .topbar-das28-bar-track {
        display: block;
        height: 6px;
        background: var(--border-color);
        border-radius: 3px;
        overflow: hidden;
        position: relative;
    }

    .topbar-das28-bar-fill {
        display: block;
        height: 100%;
        width: 100%;
        background: var(--theme-primary);
        border-radius: 3px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--duration-bounce) var(--ease-out-expo),
                    background var(--transition-base);
    }

    .topbar-das28-category {
        color: var(--text-muted);
        font-weight: var(--font-semibold);
        font-size: var(--text-xs);
        transition: color var(--transition-base);
    }

    /* Empty state — show only the centered "Enter CRP and VAS" prompt; reserve
       the filled width via min-width so the chip doesn't reflow when data lands. */
    .topbar-das28-chip[data-category=""] {
        min-width: 280px;
        justify-content: center;
    }
    .topbar-das28-chip[data-category=""] .topbar-das28-value,
    .topbar-das28-chip[data-category=""] .topbar-das28-bar {
        display: none;
    }

    /* Category-driven colours — match .score-panel palette */
    .topbar-das28-chip[data-category="remission"] .topbar-das28-value,
    .topbar-das28-chip[data-category="remission"] .topbar-das28-category {
        color: var(--risk-remission-text);
    }
    .topbar-das28-chip[data-category="remission"] .topbar-das28-bar-fill {
        background: var(--risk-remission-text);
    }

    .topbar-das28-chip[data-category="low"] .topbar-das28-value,
    .topbar-das28-chip[data-category="low"] .topbar-das28-category {
        color: var(--risk-low-text);
    }
    .topbar-das28-chip[data-category="low"] .topbar-das28-bar-fill {
        background: var(--risk-low-text);
    }

    .topbar-das28-chip[data-category="moderate"] .topbar-das28-value,
    .topbar-das28-chip[data-category="moderate"] .topbar-das28-category {
        color: var(--risk-med-text);
    }
    .topbar-das28-chip[data-category="moderate"] .topbar-das28-bar-fill {
        background: var(--risk-med-text);
    }

    .topbar-das28-chip[data-category="high"] .topbar-das28-value,
    .topbar-das28-chip[data-category="high"] .topbar-das28-category {
        color: var(--risk-high-text);
    }
    .topbar-das28-chip[data-category="high"] .topbar-das28-bar-fill {
        background: var(--risk-high-text);
    }
}