/* ==========================================================================
   PROBLEM CARD EVOLUTION — Phase 3 Fragment Responsiveness

   ARCHITECTURE: Additive layer on top of problem-card.css. When fragments
     route to a problem, the card glows, shows a fragment count badge,
     displays key lab/vital values, and signals freshness.
   WHY: Highest UX-impact remaining incremental workspace phase with zero
     LLM cost — cards come alive as the doctor feeds in fragments.
   TRADEOFF: Extra CSS layer vs. static cards that ignore fragment state.

   DARK ROAST BEACHHEAD: First component authored with --dr-* tokens.
   The :root block below provides fallback definitions so these styles
   work WITHOUT data-theme="dark-roast" being set globally.

   ORGANIC MIGRATION (2026-02-25): Dark Roast does not replace the terminal
   theme wholesale. The terminal theme (--term-*) remains the production
   baseline — reference it for enhancements to existing high-traffic surfaces.
   --dr-* tokens are adopted organically as new components ship or existing
   surfaces receive meaningful UX reworks. When this component's parent
   surface migrates, delete the :root block — tokens will come from
   dark-roast-tokens.css instead.
   ========================================================================== */


/* ==========================================================================
   DARK ROAST BEACHHEAD — Token Fallbacks (ORGANIC MIGRATION)
   Delete this block when parent surface migrates to data-theme="dark-roast".
   Terminal theme (--term-*) remains active — these coexist, not replace.
   ========================================================================== */
:root {
    /* Action colors */
    --dr-amber:         #E69A4C;
    --dr-amber-subtle:  rgba(230, 154, 76, 0.10);
    --dr-amber-dim:     rgba(230, 154, 76, 0.40);
    --dr-teal:          #4CC4B4;
    --dr-teal-subtle:   rgba(76, 196, 180, 0.10);
    --dr-gold:          #DAA520;
    --dr-scarlet:       #C44C4C;
    --dr-mocha:         #8B7355;
    --dr-crema:         #FFF7EE;
    --dr-grain:         #2A1C13;
    --dr-crater:        #3C2A21;

    /* Typography */
    --dr-font-mono:     'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
    --dr-text-xs:       0.6875rem;  /* 11px */

    /* Motion */
    --dr-duration-fast: 150ms;
    --dr-duration-normal: 300ms;
    --dr-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   FRAGMENT GLOW — Transient 2s animation on fragment:routed
   Uses box-shadow inset (NOT border-left) to avoid conflicting with
   existing trajectory borders (.problem-card--worsening etc).
   ========================================================================== */

.problem-card--fragment-routed {
    animation: dr-fragment-glow 2s var(--dr-easing-smooth) forwards;
}

@keyframes dr-fragment-glow {
    0% {
        box-shadow: inset 3px 0 0 var(--dr-amber), 0 0 12px var(--dr-amber-dim);
    }
    60% {
        box-shadow: inset 3px 0 0 var(--dr-amber-dim), 0 0 4px var(--dr-amber-subtle);
    }
    100% {
        box-shadow: inset 3px 0 0 var(--dr-amber-subtle), 0 0 0 transparent;
    }
}


/* ==========================================================================
   HAS-FRAGMENTS — Persistent subtle left inset shadow
   Applied when card has 1+ routed fragments (stays after glow fades).
   ========================================================================== */

.problem-card--has-fragments {
    box-shadow: inset 3px 0 0 var(--dr-amber-subtle);
}


/* ==========================================================================
   FRAGMENT COUNT BADGE — Inline in .problem-card__title
   ========================================================================== */

.problem-card__fragment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-family: var(--dr-font-mono);
    font-size: var(--dr-text-xs);
    font-weight: 600;
    line-height: 1;
    color: var(--dr-amber);
    background: var(--dr-amber-subtle);
    border-radius: 10px;
    vertical-align: middle;
}


/* ==========================================================================
   FRAGMENT FRESHNESS DOT — 6px indicator next to count badge
   teal = fresh (< 2h), mocha = stale (> 2h)
   ========================================================================== */

.problem-card__fragment-fresh {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    background: var(--dr-teal);
    animation: dr-freshness-pulse 2s ease-in-out infinite;
}

.problem-card__fragment-fresh--stale {
    background: var(--dr-mocha);
    animation: none;
}

@keyframes dr-freshness-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


/* ==========================================================================
   FRAGMENT VALUES STRIP — Key lab/vital values between header and body
   Max 4 items, mono font, direction coloring.
   ========================================================================== */

.problem-card__fragment-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 4px 8px 4px 36px;  /* Left indent aligns with card title */
    font-family: var(--dr-font-mono);
    font-size: var(--dr-text-xs);
    line-height: 1.4;
    color: var(--dr-crema);
    border-top: 1px solid var(--dr-crater);
    opacity: 0.85;
}

.problem-card__fragment-value {
    white-space: nowrap;
}

.problem-card__fragment-value-label {
    color: var(--dr-mocha);
    margin-right: 2px;
}

/* Direction coloring: scarlet = up-bad, teal = down-good */
.problem-card__fragment-value--up-bad {
    color: var(--dr-scarlet);
}

.problem-card__fragment-value--down-good {
    color: var(--dr-teal);
}

.problem-card__fragment-value--neutral {
    color: var(--dr-gold);
}


/* ==========================================================================
   ACCESSIBILITY: Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .problem-card--fragment-routed {
        animation: none;
        box-shadow: inset 3px 0 0 var(--dr-amber-subtle);
    }

    .problem-card__fragment-fresh {
        animation: none;
    }
}