/* Politeness / register chip — shared visual for window.RegisterChip.
 *
 * 和の感性: understated pill, no gradients, warm tokens. Sparse by design — only
 * the few register-marked words show it, so it earns a quiet touch of colour.
 * Keigo (honorific + humble) reads indigo (formal family); casual stays neutral
 * warm-stone; slang a warm ochre; rude a muted terracotta caution.
 */
.register-chip {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.45;
    white-space: nowrap;
    color: #57534e;                       /* warm stone (fallback) */
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: middle;
}

.register-chip[data-register="honorific"],
.register-chip[data-register="humble"] {
    color: #3D5A80;                       /* indigo — keigo / formal register */
    background: rgba(61, 90, 128, 0.08);
    border-color: rgba(61, 90, 128, 0.16);
}

.register-chip[data-register="casual"] {
    color: #6b6256;                       /* warm stone — informal everyday */
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.07);
}

.register-chip[data-register="slang"] {
    color: #9c6b3f;                       /* warm ochre — trendy / very informal */
    background: rgba(201, 169, 110, 0.12);
    border-color: rgba(201, 169, 110, 0.24);
}

.register-chip[data-register="rude"] {
    color: #9c4f3f;                       /* muted terracotta — caution */
    background: rgba(156, 79, 63, 0.10);
    border-color: rgba(156, 79, 63, 0.2);
}

/* Plain inline variant for dense meta strips (desktop grid hover "POS · Freq"
 * line) — no pill, just the register colour so it sits as a peer of meta-pos. */
.meta-register { font-weight: 600; color: #57534e; }
.meta-register[data-register="honorific"],
.meta-register[data-register="humble"] { color: #3D5A80; }
.meta-register[data-register="slang"] { color: #9c6b3f; }
.meta-register[data-register="rude"] { color: #9c4f3f; }

/* Surface tweaks: centre the chip under the learn-mode hero gloss. */
.hero-register { margin-top: 10px; text-align: center; }

/* ── Desktop sidebar "Politeness" filter section ─────────────────────────── */
.register-section { padding: 4px 14px 8px; }
.register-section-title {
    font: 600 0.7rem/1.4 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a8178;
    margin: 8px 0 4px;
}
.register-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 8px;
    font: 500 0.82rem/1.3 'Inter', sans-serif;
    color: #57534e;
}
.register-row:hover { background: rgba(0, 0, 0, 0.03); }
.register-row.selected { background: rgba(61, 90, 128, 0.08); color: #3D5A80; }
.register-count { margin-left: auto; font-size: 0.72rem; color: #9b9389; }
.register-dot {
    width: 8px; height: 8px; border-radius: 50%;
    display: inline-block; flex: 0 0 auto;
    background: #b8b0a4;
}
.register-dot[data-register="honorific"],
.register-dot[data-register="humble"] { background: #3D5A80; }
.register-dot[data-register="casual"] { background: #6b6256; }
.register-dot[data-register="slang"]  { background: #C9A96E; }
.register-dot[data-register="rude"]   { background: #9c4f3f; }

/* Active-filter chip accents (base chip layout comes from the chips stylesheet) */
.chip-register-honorific, .chip-register-humble { color: #3D5A80; }
.chip-register-casual { color: #6b6256; }
.chip-register-slang  { color: #9c6b3f; }
.chip-register-rude   { color: #9c4f3f; }

@media (prefers-color-scheme: dark) {
    .register-chip {
        color: #cfcac2;
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.10);
    }
    .register-chip[data-register="honorific"],
    .register-chip[data-register="humble"] {
        color: #9db4d6;
        background: rgba(120, 150, 190, 0.14);
        border-color: rgba(120, 150, 190, 0.26);
    }
}