/* =============================================================================
   Feature badges — small inline pills marking a feature's status (e.g. "Beta").
   Generic + reusable across app-shell surfaces (settings, help, tokens).
   Loaded by base.html. Marketing pages use their own Tailwind pill — the two
   systems stay separate (see CLAUDE.md "Marketing site is out of scope").
============================================================================= */
/* ── The badge ─────────────────────────────────────────────────────────── */

/* A sentence-case pill for a state or a kind: Draft, Pro, Beta, Deep Dive,
   "birthday tomorrow". One recipe, three paints. Never uppercase (that is
   the eyebrow's job), never 700, never interactive — so it can never be
   mistaken for a filter pill, which is 44px and --accent-fill when active.
   `.feature-badge` and `.entry-card__badge` are it under older names.
   📐 docs/admin/design_system.md "The ladder". */
.badge,
.feature-badge,
.entry-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill, 100px);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    background: var(--accent-tint);
    color: var(--primary-dark);
}

.badge--terra {
    background: var(--terra-bg);
    color: var(--terra-text);
}

.badge--outline {
    background: transparent;
    border: var(--border-width, 1px) solid var(--border-color);
    color: var(--text-secondary);
}

/* Beta — on-brand sage pill. Signals "new, evolving" without alarm. */
.feature-badge--beta {
    background: var(--accent-light, #E8EDE6);
    color: var(--accent-dark, #5C6B59);
    border: var(--border-width, 1px) solid var(--accent, #9CA998);
}

/* Sits next to a heading without inheriting its size. */
h1 .feature-badge,
h2 .feature-badge,
h3 .feature-badge {
    margin-left: 8px;
    position: relative;
    top: -2px;
}

/* ── The emotion dot ───────────────────────────────────────────────────── */

/* ⛔ CLASSES, NOT INLINE STYLES. `/entries/` is capped at three inline `style=`
   attributes by tests/core/test_css_extraction.py, and 25 cards each carrying
   their own hex would need one apiece. `core/emotion_colors.py` decides WHICH
   colour applies — falling back through the emotion's family, because the map
   names 30 emotions and the taxonomy has 69 leaves — and this file holds the
   values.

   ⚠️ That splits one fact across two files, so tests/core/test_emotion_colors.py
   asserts every slug the module can emit has a rule here and that the hexes
   agree. Add an emotion there and that test names this file. */
.emotion-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    background: #64748b;   /* --unknown; overridden per slug below */
}

/* Emotions with a colour of their own */
.emotion-dot--joy { background: #22c55e; }
.emotion-dot--gratitude { background: #10b981; }
.emotion-dot--excitement { background: #f59e0b; }
.emotion-dot--love { background: #ec4899; }
.emotion-dot--hope { background: #06b6d4; }
.emotion-dot--pride { background: #8b5cf6; }
.emotion-dot--contentment { background: #34d399; }
.emotion-dot--amusement { background: #facc15; }
.emotion-dot--relief { background: #a3e635; }
.emotion-dot--serenity { background: #67e8f9; }
.emotion-dot--anxiety { background: #ef4444; }
.emotion-dot--sadness { background: #3b82f6; }
.emotion-dot--frustration { background: #f97316; }
.emotion-dot--anger { background: #dc2626; }
.emotion-dot--fear { background: #6366f1; }
.emotion-dot--guilt { background: #a855f7; }
.emotion-dot--shame { background: #9333ea; }
.emotion-dot--loneliness { background: #64748b; }
.emotion-dot--disappointment { background: #f43f5e; }
.emotion-dot--grief { background: #1e3a5f; }
.emotion-dot--nostalgia { background: #d97706; }
.emotion-dot--curiosity { background: #0ea5e9; }
.emotion-dot--confusion { background: #94a3b8; }
.emotion-dot--boredom { background: #78716c; }
.emotion-dot--surprise { background: #fbbf24; }
.emotion-dot--acceptance { background: #2dd4bf; }
.emotion-dot--determination { background: #e11d48; }
.emotion-dot--vulnerability { background: #c084fc; }
.emotion-dot--empathy { background: #fb923c; }
.emotion-dot--reflection { background: #818cf8; }

/* Families — the fallback for the other 39 leaves of the taxonomy. Each takes
   the hue of its most representative member above, so a family colour never
   introduces a hue the palette did not already contain. */
.emotion-dot--processing { background: #3b82f6; }
.emotion-dot--relationships { background: #ec4899; }
.emotion-dot--self_discovery { background: #818cf8; }
.emotion-dot--goals { background: #8b5cf6; }
.emotion-dot--stoic { background: #2dd4bf; }
.emotion-dot--creative { background: #0ea5e9; }
.emotion-dot--unknown { background: #64748b; }