/* ═══ KANJI PARTS — shared dress additions (js/kanji-parts.js) ═══════════
   The pill row itself wears the kanji page's own dress (css/kanji-page.css:
   .kjp-parts / .kjp-part / .kjp-snd / .kjp-mng — the canon the owner points
   at); this file adds only what the ONE-truth builder introduced: the TYPE
   TAG that every kanji wears, the role badges' glyphs, and the small
   adjustments the row needs when it stands outside the page shell (walk
   sheet / 字 panel / first meeting).
   (The 声/説 hover whisper lived here until 2026-08-03. It said the type
   name to whoever hovered the right 24px circle; the tag now says it out
   loud to everyone, so the whisper and its card are gone.)
   ══════════════════════════════════════════════════════════════════════ */

/* ── THE TYPE TAG — one quiet row, every kanji, every surface ──────────
   kind · plain gloss · the 六書 term + faint romaji. No box, no rule, no
   colour of its own: it CAPTIONS the print, so it must sit under the
   painting the way a gallery placard sits under a painting. The layout
   lives here (shared) and each host adds only its own margins. */
.kjp-type-tag {
    display: flex; align-items: baseline; justify-content: center;
    gap: 7px; flex-wrap: wrap; text-align: center;
    margin: 0;  /* it seats as a <p> outside the mount's <figure>; each host
                   sets its own margins, none inherits the UA paragraph gap */
}
.kjp-type-tag .nm {
    font: 600 11px var(--kjp-ui, 'Inter', 'Noto Sans JP', sans-serif);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--kjp-stone, #57534e);
}
/* the gloss is no longer printed (owner 2026-08-05) — the story narrates the
   mechanism and the pills wear 意/音 badges, so the definition rides only as
   the tag's hover whisper (title attribute). No .gl span renders. */
.kjp-type-tag .jp {
    font: 400 13px var(--kjp-jp, 'Klee One', 'Noto Sans JP', serif);
    color: var(--kjp-ink, #3A3633); letter-spacing: 0.03em;
}
/* ── THE TERM IS THE DOOR (owner 2026-08-07) ──────────────────────────
   The romaji stopped being PRINTED on this row. Romaji is a key to saying a
   word, and 形声 is a filing label nobody is ever asked to say — the role
   badges a few lines below this tag have always worn a bare Japanese mark
   (意 MEANING, 音 SOUND) and no learner has missed "i" and "on". So the
   romaji rests behind the term instead, with the plain gloss, reachable
   three ways because this row is read three ways: hover, keyboard focus,
   and TAP (iPad is a primary device — a hover-only note is a deleted note
   there). The tap is each HOST's already-wired handler, so the whisper
   wears the host's class vocabulary; what follows is the dress the shared
   tag owns on every surface it lands on. */
.kjp-type-tag .kjp-type-door {
    position: relative;
    display: inline-block;
    cursor: help;
}
/* the only chrome the note gets: a hairline saying something rests here. It
   rides the term itself, so it stops at the word and not at its gutter. */
.kjp-type-tag .kjp-type-door > .jp,
.kjp-type-tag .kjp-type-door > .nm {
    border-bottom: 1px dotted var(--kjp-ghost-soft, #b3aca3);
    padding-bottom: 1px;
}
/* the hit area a finger needs, without moving a pixel of the row */
.kjp-type-tag .kjp-type-door::after {
    content: ""; position: absolute; inset: -11px -7px -8px;
}
/* The term is ALWAYS the last thing on this row (kind · term), and the row is
   centred in its host — so the card hangs from the term's RIGHT edge and
   opens leftward, which is the one anchor that cannot overflow: the door's
   right edge IS the row's right edge, and the row already fits. The hosts'
   own tips are LEFT-anchored for rows that start at a margin; inherited here,
   a 238px card centred on a term sitting at the row's end hung 23px outside
   the walk sheet's slip (measured, 2026-08-07). Same reasoning and the same
   dress as .kw-readmark's whisper, which hangs right for being at row end.
   Two classes deep so it outranks .kw-tip / .kjr-tip whatever the sheet
   order — a bare .kjp-type-tip would be a coin flip. */
.kjp-type-tag .kjp-type-tip {
    left: auto; right: -6px; transform: none;
    width: min(238px, 72vw);
    text-align: left;
}
/* the romaji LEADS the whisper — the reader opened this because the term is
   unreadable, so how to say it comes first, upright and inked, and the gloss
   follows in the tip's own resting voice. */
.kjp-type-tag .kjp-type-tip .rom {
    font-style: normal; font-weight: 600;
    color: var(--kjp-ink, #3A3633);
}
.kjp-type-tag .kjp-type-tip .sep { color: var(--kjp-ghost-soft, #b3aca3); }
/* the printed romaji survives only in the no-tip-vocabulary fallback dress */
.kjp-type-tag > .rom {
    font: 400 10px var(--kjp-ui, 'Inter', 'Noto Sans JP', sans-serif);
    color: var(--kjp-ghost, #8c857b); letter-spacing: 0.04em; margin-left: -3px;
}
/* the separator is a neutral mote, not earned gold (gold = watch-out only) */
.kjp-type-tag .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--kjp-ghost-soft, #b3aca3); opacity: 0.8; align-self: center;
}
.kjp-type-tag.kjp-type--fused .nm { color: #7a6a52; }
/* the walk's housing: the sheet slips are narrow, so the tag rides tighter
   and lets its own row wrap rather than pushing the pills down */
.kw-ktype { margin: 0 0 10px; }

/* (the --kjp-* palette reaches these rows OUTSIDE the page shell because
   .kjp-parts and .kjp-type-tag are themselves palette hosts — see the host
   list at the top of css/kanji-page.css: one palette, more hosts, zero
   duplication) */

/* the role badges (owner contract B, 2026-08-03) — 意 meaning · 音 sound.
   The glyph is a JP-font companion at label size; the English word stays
   the payload, since it is the half a beginner can read. */
.kjp-snd .kj,
.kjp-mng .kj,
.kjp-unk .kj {
    font-family: var(--kjp-jp, 'Klee One', 'Noto Sans JP', serif);
    font-size: 10.5px; text-transform: none; letter-spacing: 0;
    margin-right: 3px; opacity: 0.9;
}

/* ── the other two of the FOUR dresses (the role scheme is total) ──────
   A STAND-IN is the sound slot wearing a redrawn glyph (練's 東 for 柬).
   Same terracotta family as a true sound part, but muted and dashed: the
   slot is right, the glyph is not, and the dashes say "not the real one"
   before the words do. */
.kjp-snd--standin {
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--color-kanji-on, #9E5E43) 45%, transparent);
    color: color-mix(in srgb, var(--color-kanji-on, #9E5E43) 78%, var(--kjp-stone, #57534e));
}
.kjp-snd--standin .sub {
    font-style: normal; text-transform: none; letter-spacing: 0.02em;
    opacity: 0.78; margin-left: 4px;
}
.kjp-snd--standin .sub::before { content: '\00B7'; margin-right: 4px; opacity: 0.7; }
.parts .door.kjp-part--standin { border-style: dashed; }
/* ROLE UNCLEAR — the honest fourth. Stone, not terracotta and not indigo:
   it claims neither job. It is a real answer ("nobody has settled this
   piece"), so it sits as calmly as the other three, never as an error. */
.kjp-unk {
    font: 700 9px var(--kjp-ui, 'Inter', 'Noto Sans JP', sans-serif);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--kjp-stone, #57534e); background: rgba(64, 53, 40, 0.05);
    border-radius: 4px; padding: 2px 5px; margin-left: 1px; opacity: 0.9;
}
.parts .door.kjp-part--unclear { border-color: rgba(64, 53, 40, 0.14); }

/* the walk's sheet-hop door is a SPAN (role=button, data-sheet-kanji) —
   dress it exactly like the page's button doors (quiet indigo edge at
   rest, gentle lift on hover), and stand down the walk's inline-text
   door dress (dotted underline) which was never meant for a pill */
.parts span.door.kw-kanji-door {
    cursor: pointer;
    border: 1px solid rgba(61, 90, 128, 0.22);
    background: rgba(61, 90, 128, 0.02);
}
.parts span.door.kw-kanji-door:hover,
.parts span.door.kw-kanji-door:focus-visible {
    border-color: rgba(61, 90, 128, 0.32);
    background: rgba(61, 90, 128, 0.025);
    color: inherit;
}