/* 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: var(--color-stone);                       /* 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: var(--color-accent);                       /* indigo — keigo / formal register */
    background: rgba(61, 90, 128, 0.08);
    border-color: rgba(61, 90, 128, 0.16);
}

.register-chip[data-register="polite"] {
    color: #5f7a6e;                       /* muted sage — polite everyday default */
    background: rgba(95, 122, 110, 0.10);
    border-color: rgba(95, 122, 110, 0.20);
}

.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: var(--color-stone); }
.meta-register[data-register="honorific"],
.meta-register[data-register="humble"] { color: var(--color-accent); }
.meta-register[data-register="polite"] { color: #5f7a6e; }
.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 focus — pill in the top-right meta row ──────────────────────────
 * Desktop focus is single-face, so #register-chip-front rides the front face as
 * a third frosted pill in the POS · register · freq cluster. Geometry mirrors
 * #class-badge and .freq-tier (cream frosted pill, 36px), so the row reads as one
 * system; only the label keeps its per-register hue (slang ochre, keigo indigo…).
 * `right` is set by JS (FreqTier.positionTwinChip) so the pill seats between the
 * POS and freq pills regardless of their label widths. Sparse: only register-
 * marked words, answer-side only. Scoped to focus mode only — flashcard.js wires
 * the chip in desktop focus alone (video/revision are passive watch modes that
 * never call _setFocusRegisterChip), so it stays display:none there. */
body.focus-mode #register-chip-front {
    position: fixed;
    top: 20px;
    right: 140px;                /* placeholder — positionTwinChip() overrides */
    left: auto;
    bottom: auto;
    z-index: 2200;
    pointer-events: none;

    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-xl);
    background: rgba(250, 247, 242, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 1px 3px rgba(60, 52, 40, 0.08);

    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Label voice matches the freq pill's word tiers (EVERYDAY / OCCASIONAL …):
 * Inter, uppercase, tracked — so SLANG sits as a peer of OCCASIONAL. The hue
 * comes from .register-chip[data-register="…"] (lower specificity, not reset
 * here), keeping slang ochre / keigo indigo / rude terracotta on the cream pill. */
body.focus-mode #register-chip-front .label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Desktop sidebar "Politeness" filter section ─────────────────────────── */
/* 4px side padding keeps the POLITENESS header (and its rows) on the same left
   edge as the other sidebar sections (Frequency / Textbooks / Part of Speech). */
.register-section { padding: 4px 4px 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: var(--color-stone);
}
.register-row:hover { background: rgba(0, 0, 0, 0.03); }
.register-row.selected { background: rgba(61, 90, 128, 0.08); color: var(--color-accent); }
.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: var(--color-accent); }
.register-dot[data-register="polite"] { background: #5f7a6e; }
.register-dot[data-register="casual"] { background: #6b6256; }
.register-dot[data-register="slang"]  { background: var(--color-gold); }
.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: var(--color-accent); }
.chip-register-polite { color: #5f7a6e; }
.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);
    }
    .register-chip[data-register="polite"] {
        color: #9cc0b0;
        background: rgba(120, 170, 150, 0.14);
        border-color: rgba(120, 170, 150, 0.26);
    }
}