/* components-surfaces.css — section title, pills/badges, word rows, clickable words, IPA, empty state. */

.section-title {
    font-family: var(--font-ui);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Count pills (dashboard deck tiles): soft state background + state foreground, text always visible (AA both themes). */
.stat-pill.new { background: var(--state-new-soft); color: var(--state-new); }
.stat-pill.learning { background: var(--state-learning-soft); color: var(--state-learning); }
.stat-pill.review { background: var(--state-review-soft); color: var(--state-review); }

/* Scope / ownership badges (manage + catalog, spec §3.6). The .badge base (size, border) lives in view-browse-import.css.
   Pairs are the same fg/soft tokens as the contrast table in spec §1.4 (all >= 4.5:1 in Light and Dark). */
.badge-public { background: var(--info-soft); color: var(--info); }
.badge-private { background: var(--state-suspended-soft); color: var(--state-suspended); }
.badge-owned { background: var(--success-soft); color: var(--success); }
.badge-system { background: var(--brand-soft); color: var(--text-brand); }

/* Clickable Word & Linking Symbol Styles for Pronunciation */
.clickable-word {
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
    display: inline-block;
    padding: 0 2px;
    border-radius: 4px;
}

.clickable-word:hover {
    color: var(--text-brand);
    background: rgba(192, 132, 252, 0.1);
    text-decoration: underline;
}

.linking-symbol {
    color: var(--state-young);
    font-weight: bold;
    font-size: 1.25em;
    margin: 0 -4px;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 0 2px rgba(45, 212, 191, 0.4));
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(45, 212, 191, 0.4)); }
    50% { filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.8)); }
}

/* IPA on the card: dedicated IPA font (the UI font lacks some symbols), full-strength colour (>= 4.5:1 light and dark). */
.word-ipa {
    font-size: var(--fs-xl);
    color: var(--state-young);
    font-family: var(--font-ipa);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-4);
    text-align: center;
}