/* ============================================================================
   Pearl shared chip system — date + priority chips
   Used by: action-queue.html, dashboard.html, pearl-task-detail.html
   Shipped 2026-05-21, extracted to shared file 2026-05-22.
   ============================================================================ */

/* .pearl-time-chip — relative timestamps like "21h ago", "Yesterday", "3w ago".
   Subtle muted pill. Variants for overdue + imminent state. */
.pearl-time-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(45,36,56,0.05);
    color: #7A7085;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
}
.pearl-time-chip--overdue {
    background: rgba(184,80,96,0.08);
    color: #B85060;
    font-weight: 600;
}
.pearl-time-chip--imminent {
    background: rgba(216,152,70,0.10);
    color: #C4950A;
    font-weight: 600;
}

/* .pearl-priority-chip — critical/urgent/high/medium/low. */
.pearl-priority-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pearl-priority-chip--critical {
    background: #B85060;
    color: #fff;
    border-color: #B85060;
}
.pearl-priority-chip--urgent {
    background: rgba(184,80,96,0.12);
    color: #B85060;
    border-color: rgba(184,80,96,0.30);
}
.pearl-priority-chip--high {
    background: rgba(216,152,70,0.12);
    color: #C4950A;
    border-color: rgba(216,152,70,0.30);
}
.pearl-priority-chip--medium {
    background: rgba(138,122,187,0.10);
    color: #8A7ABB;
    border-color: rgba(138,122,187,0.22);
}
.pearl-priority-chip--low {
    background: rgba(184,169,201,0.10);
    color: #7A6FA8;
    border-color: rgba(184,169,201,0.22);
}

/* .pearl-stalled-chip — for "stalled" / "0D" / "Nd" dashboard signals.
   Muted-graphite tone with subtle border. Reads as informational caution. */
.pearl-stalled-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(122,112,133,0.10);
    color: #4D4258;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(122,112,133,0.18);
}
.pearl-stalled-chip--severe {
    background: rgba(184,80,96,0.08);
    color: #B85060;
    border-color: rgba(184,80,96,0.20);
}