/* ==========================================================================
   Word Panel — ことばの間 (.wpn-*) the word as a supporting glance
   The mirror of the kanji drawer (css/kanji-page.css .kjp-*): a right-anchored
   washi sheet soaked 7% in the word's own pigment, sliding in as a fusuma
   over the kanji page, carrying the word page condensed to 図録 catalog form
   (owner pick 2026-07-03) at the kanji drawer's width.
   Palette = 和の感性 tokens: washi #FAF7EF · warm sumi ink · stone · indigo
   var(--color-accent) · gold var(--color-gold) (earned only).
   ========================================================================== */

.wpn-overlay {
    position: fixed;
    inset: 0;
    z-index: 9300; /* above the kanji page (9100) + its family aside (9200) */
    display: none;
    opacity: 0;
    transition: opacity 0.32s ease;

    --wpn-ink: #3A3633;           /* warm structural sumi — never cold #000 */
    --wpn-ink-wet: #2f2b28;
    --wpn-prose: #44403c;
    --wpn-stone: var(--color-stone, #57534e);
    /* ⛔ THE TWO QUIET INKS, and the line between them. A sweep on 2026-08-07
       measured thirteen sub-14px slots on this sheet failing AA. Most were the
       DECORATION token doing a TEXT job: the counter grid's 1-10 numerals, the
       fold's form count, a character's other senses, the frequency band word.
       A mark a learner READS takes --wpn-quiet and earns its quiet from size
       and tracking; only things that carry no meaning if unread — the eyebrow's
       middots, a gold arrow, the colophon's dim tail — may take --wpn-ghost.
       (The kanji drawer wrote the same finding down at css/kanji-page.css:1276
       when its own rank chip failed: "#6b6358 clears AA".) */
    --wpn-ghost: #8c857b;        /* DECORATION only — 3.4:1, fails AA as text */
    --wpn-quiet: #6b6358;        /* the readable quiet ink — ~5.5:1 on the washi */
    --wpn-rule: rgba(64, 53, 40, 0.11);
    --wpn-indigo: var(--color-accent, #3D5A80);
    --wpn-gold: var(--color-gold, #C9A96E);
    --wpn-seal: #9e3b2c;          /* hanko red — the 対 opposite mark only */
    --wpn-paper: #FAF7EF;
    --wpn-sheetbg: color-mix(in srgb, #FAF7EF 93%, var(--wpn-tone, #b0a090) 7%);
    --wpn-jp: 'Klee One', 'Noto Sans JP', serif;
    --wpn-ui: 'Inter', 'Noto Sans JP', system-ui, sans-serif;

    /* ── 紙 THE PAPER RECIPE ────────────────────────────────────────────────
       ⭐ Measured against the kanji drawer (2026-08-07): of its eight shadowed
       elements, EVERY ONE is inset — it never lifts anything, it presses things
       into the sheet. The panel had two outer drop shadows and zero gradient
       surfaces against the drawer's three, which is most of what read as "less
       premium": a flat fill with a drop shadow is a web card; paper has a lit
       edge, a warm inner rim, and a contact shadow it cannot be lifted off.
       The drawer's own four-layer recipe (css/kanji-page.css:551, the mounted
       print), factored so this sheet spends it consistently.
       ⛔ ONE LIGHT, from the top-left — every gradient here starts near 150deg
       or 28%/22%, the drawer's own angles. Two light sources on one sheet is
       the thing that reads as "assembled from parts". */
    --wpn-lit: rgba(255, 251, 243, 0.85);      /* the edge the light lands on */
    --wpn-lit-soft: rgba(255, 251, 243, 0.55);
    --wpn-rim: rgba(120, 90, 60, 0.10);        /* a warm rim INSIDE the edge */
    --wpn-rim-deep: rgba(58, 40, 20, 0.10);
    /* contact + ambient, warm sumi — never a cold neutral drop */
    --wpn-cast: 0 1px 2px rgba(58, 40, 20, 0.04), 0 6px 18px rgba(58, 40, 20, 0.05);
    --wpn-cast-near: 0 1px 2px rgba(58, 40, 20, 0.05);
}
body.wpn-open .wpn-overlay { display: block; }
body.wpn-open { overflow: hidden; }
.wpn-overlay.wpn-in { opacity: 1; }
/* keep painted through the slide-out (kanji page beneath is live meanwhile) */
.wpn-overlay.wpn-out { display: block; pointer-events: none; }

/* the pill/lift trap (components.css bare <button>) dies at the door —
   every button in this room RESTS; each class restates its own look */
.wpn-overlay button {
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.wpn-overlay button:hover,
.wpn-overlay button:active {
    transform: none;
    box-shadow: none;
}
.wpn-overlay :focus-visible {
    outline: 2px solid var(--wpn-indigo);
    outline-offset: 2px;
    border-radius: 2px;
}

/* translucent scrim — the kanji page stays visible beside the glance */
.wpn-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, rgba(44, 44, 44, 0.42) 88%, var(--wpn-tone, #b0a090) 12%);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.wpn-overlay.wpn-in .wpn-scrim { opacity: 1; }

/* the fusuma sheet — exact house motion (mirror .kjp-sheet) */
.wpn-sheet {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: min(760px, 64vw);
    display: flex;
    flex-direction: column;
    background: var(--wpn-sheetbg);
    border-left: 1px solid var(--wpn-rule);
    box-shadow: -14px 0 40px rgba(15, 11, 7, 0.25);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.33, 0, 0.2, 1);
}
.wpn-overlay.wpn-in .wpn-sheet { opacity: 1; transform: translateX(0); }
.wpn-sheet:focus, .wpn-sheet:focus-visible { outline: none; }

/* 和紙 grain — the app's shared paper, content rides above it */
.wpn-sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
.wpn-bar, .wpn-body { position: relative; z-index: 1; }

/* ── bar: a single quiet chevron ─────────────────────────────────────────── */

/* THE BAR RESERVES NO ROW (the kanji drawer's owner ruling 2026-07-30, ported
   2026-08-07). It used to sit in the sheet's column flex and eat 48px before
   the body began — and that reserved strip read as a pale band across the top
   of the painting, exactly the failure the drawer already fixed. Pinned, the
   sheet is ONE uninterrupted surface: the print now runs to the top edge and
   the chevron floats on it. */
.wpn-bar {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: 0;
}
.wpn-overlay .wpn-back {
    width: 44px;   /* the primary exit clears the 44px touch minimum */
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-ink);
    transition: background-color 0.18s ease;
}
.wpn-overlay .wpn-back:hover { background: rgba(58, 54, 51, 0.05); }
/* over a painting the chevron carries the print's ink regime + a soft corner
   veil, the same pairing the word page gives its own back control — a dark
   glyph on a dark canvas is not a control, it is a smudge */
.wpn-overlay.wpn-onart .wpn-back { color: var(--wpn-hink, #F6F1E7); text-shadow: 0 1px 12px rgba(14, 10, 6, 0.55); }
.wpn-overlay.wpn-onart .wpn-back:hover { background: rgba(250, 247, 239, 0.14); }
.wpn-overlay.wpn-onart-light .wpn-back { color: var(--wpn-ink-wet); text-shadow: 0 1px 12px rgba(250, 247, 239, 0.7); }
.wpn-topveil {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 168px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(140% 130% at 0% 0%,
        rgba(18, 14, 10, 0.62) 0%, rgba(18, 14, 10, 0.32) 45%, transparent 75%);
}
.wpn-overlay.wpn-onart .wpn-topveil { opacity: 1; }
.wpn-overlay.wpn-onart-light .wpn-topveil {
    opacity: 1;
    background: radial-gradient(140% 130% at 0% 0%,
        rgba(250, 247, 239, 0.66) 0%, rgba(250, 247, 239, 0.34) 45%, transparent 75%);
}
.wpn-overlay .wpn-back svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── scrolling body ──────────────────────────────────────────────────────── */

.wpn-body {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 28px 64px;
    color: var(--wpn-ink);
    font-family: var(--wpn-ui);
}
/* A TONE WASH bridges the painting into the paper below it, so the sheet
   reads as one continuously-toned washi surface instead of a photo with a
   white column under it. The kanji drawer's own trick (css/kanji-page.css:236)
   and the reason it never looks like a web page: the top of the scroll is
   tinted by the subject's own pigment. */
/* ⛔ the tone wash moved to .wpn-band::after — see 滲み THE BLEED. It was
   anchored here, which was right while the head sat on the painting and wrong
   the moment it came down onto paper. */
.wpn-entry { position: relative; }
.wpn-entry > * { position: relative; z-index: 1; }

/* ── 組版 THE SETTING ─────────────────────────────────────────────────────
   ⭐ Measured 2026-08-07: the kanji drawer spends `text-wrap: pretty` in five
   places, tabular numerals in two, `hyphens: none`, and oldstyle figures in
   its scholar prose. The word page spends pretty once and tabular once. This
   sheet spent NONE of them — and that is a real part of what "less premium"
   means, because it is the difference between text that was set and text that
   was merely rendered: a widow on the last line, a numeric column that shifts
   by a digit's width, an English word broken across a Japanese lesson.
   ⛔ THE STORY STAYS IN INTER. I tested Klee One for it (the drawer's own
   choice) and it fails here for a teaching reason, not a taste one: the
   drawer's prose is ABOUT one character and carries almost no inline Japanese,
   while this story is English sentences with Japanese words set INSIDE them.
   The two-face barbell is what makes 歩く read as Japanese mid-sentence; put
   the English in Klee too and the illumination law below has nothing left to
   illuminate. */
.wpn-story-body,
.wpn-gloss,
.wpn-comp,
.wpn-comp-note,
.wpn-reg-anchor,
.wpn-ex-foot .en,
.wpn-overlay .wpn-anat .astory,
.wpn-overlay .wpn-jihead .astory {
    text-wrap: pretty;
    hyphens: none;
    -webkit-hyphens: none;
}
/* the meaning is a headline of two or four words — balance it rather than
   letting one word fall alone onto a second line */
.wpn-gloss { text-wrap: balance; }
/* every numeral that sits in a COLUMN lines up: the counting list's 1-10, the
   fold's form count, the colophon's catalogue number */
.wpn-cnt-n,
.wpn-overlay .wpn-fold .lb,
.wpn-colo {
    font-variant-numeric: tabular-nums lining-nums;
}

/* inline-JP illumination (the word page's law, panel copy) */
.wpn-jp {
    font-family: var(--wpn-jp);
    font-size: 1.22em;
    color: var(--wpn-ink);
}
/* ⛔ AND IT NEVER GOES PAST 600. Inside a <b> the inline Japanese was
   inheriting 700, which on Klee One is past the point where the face keeps any
   stroke contrast at all. The drawer caps the identical job at 600
   (css/kanji-page.css:906).
   ⛔ …AND IT STOPS AT THE PANEL'S OWN PROSE. `.wpn-overlay b .wp-jp` (0,3,0)
   also reached INSIDE the embedded kanji spine, where it outranked the kanji
   page's own `.kjp-reg-prose .wp-jp` (0,2,0) and printed the 由来 note's
   bolded Japanese a weight heavier than the drawer prints the same sentence.
   The embed is the drawer's body; it keeps the drawer's type. */
b .wpn-jp, strong .wpn-jp,
.wpn-overlay b :is(.wp-jp, .wp-kt):not(.wpn-kbody *) { font-weight: 600; }

/* gated kanji doors minted by tapKanji (.wp-kt) — word-page.css scopes its
   rules to .wp-root, so the panel dresses its own: quiet at rest, indigo
   awake under a pointer (the same "characters are doors" affordance) */
.wpn-overlay .wp-kt { cursor: pointer; transition: color 0.16s ease; }
@media (hover: hover) and (pointer: fine) {
    .wpn-overlay .wp-kt:hover { color: var(--wpn-indigo); }
}

/* (.wpn-via RETIRED 2026-08-07 — the provenance whisper '縁 — <word> より' printed
   at the top of the body while the chevron floated over it: two controls in one
   44px bar, both calling the same back(). The destination now rides the chevron's
   own title + aria name; see backLabel() in js/word-panel.js.) */

/* ── the head (shared by both takes) ─────────────────────────────────────── */

/* THE HEAD SITS ON PAPER, always (owner pick D, 2026-08-07) — the sheet's own
   ink, no scrim, no regime, no halo, and never a guess about how bright this
   particular painting happens to be. 66px on an imageless word, where the head
   is the first thing in the sheet and has to clear the floating chevron; 30px
   under a band, which has already given the eye its rest. */
.wpn-head { padding: 66px 0 0; }
.wpn-band + .wpn-head--paper { padding: 30px 0 0; }
.wpn-eyebrow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 12px;
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-eyebrow .pj { font: 500 13px var(--wpn-jp); letter-spacing: 0; text-transform: none; margin-right: 2px; }
.wpn-eyebrow .sep { color: var(--wpn-ghost-soft, #b3aca3); }
.wpn-eyebrow .wpn-regtag { color: var(--wpn-gold-deep, #8a6e35); }
/* 頻 THE POPULARITY BADGE IS THE HERO'S (owner, round 1 of the desktop polish,
   2026-10-12): window.FreqTier.html(W), "CORE 1K" where the hero says CORE 1K,
   worn as one more word of this row: the stone ink and 0.2em tracking of
   VERB beside it, no tier hue, no fade, no numeral of its own, the page's own
   flattening (css/word-page.css:495) at this eyebrow's 11px.
   ⚠ freq-tier.css loads AFTER this file and its card rules (the absolute
   top-right seat, the tier hue, the .pre/.num/.unit flourish) tie a plain
   `.wpn-eyebrow …` selector on source order, so every rule here carries
   .wpn-overlay to out-specify them. pointer-events comes back so the rank
   tooltip surfaces on hover, as it does on the hero. */
.wpn-overlay .wpn-eyebrow .freq-tier,
.wpn-overlay .wpn-eyebrow .freq-tier[data-freq-tier] {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    pointer-events: auto;
    color: var(--wpn-stone);
    opacity: 1;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    text-shadow: none;
}
.wpn-overlay .wpn-eyebrow .freq-tier[data-freq-tier] .pre,
.wpn-overlay .wpn-eyebrow .freq-tier[data-freq-tier] .num,
.wpn-overlay .wpn-eyebrow .freq-tier[data-freq-tier] .unit,
.wpn-overlay .wpn-eyebrow .freq-tier[data-freq-tier] .label {
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    margin: 0;
    vertical-align: baseline;
    text-transform: uppercase;
}
.wpn-overlay .wpn-eyebrow .freq-tier[data-freq-tier] .pre { margin-right: 0.2em; }

/* THE STANDING — the learner's own fact, leading the meta row (owner 2026-08-06).
   One voice with the wall placard's statusline: a 6px dot and the state's hue
   mixed into the row's ink at the placard's own 62%/70% (css/grid-mode.css:2072).
   New wears the 字 panel's shipped hollow ring (css/study-walk.css:3999) rather
   than a filled dot — the empty state is drawn as an empty ring, and this is the
   ONE surface where it speaks at all (see standingHTML in js/word-panel.js). */
.wpn-state { display: inline-flex; align-items: center; gap: 6px; }
.wpn-state .d { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.wpn-state.state-saved .d { background: var(--color-amber, #A07850); }
.wpn-state.state-known .d { background: var(--color-moss, #6B7F5C); }
.wpn-state.state-comeback .d { background: var(--color-moss-bright, #5B8C5A); }
.wpn-state.state-new .d {
    background: transparent;
    border: 1.2px solid var(--wpn-ghost-soft, #b3aca3);
    box-sizing: border-box;
}
.wpn-state.state-saved { color: color-mix(in srgb, var(--color-amber, #A07850) 44%, var(--wpn-ink)); }
.wpn-state.state-known { color: color-mix(in srgb, var(--color-moss, #6B7F5C) 44%, var(--wpn-ink)); }
.wpn-state.state-comeback { color: color-mix(in srgb, var(--color-moss-bright, #5B8C5A) 48%, var(--wpn-ink)); }
.wpn-state.state-new { color: var(--wpn-ghost-soft, #b3aca3); }

/* THE PLACARD'S OWN SCALE. Measured against the word page's hero placard, the
   panel's head was the smallest version of every slot on it: headword 42 vs
   the page's 104px art glyph, gloss 16.5 vs the placard's 29px/500, romaji
   13.5 vs 14.5. The panel's placard carries the headword the page's does not
   (the page hangs it on the art), so it cannot take the page's numbers whole —
   but it can stop being three-quarter-scale at the one place a reader lands
   first. */
/* ⭐⭐ THE HEADWORD IS SET AT 400, AND THAT IS THE WHOLE ANSWER TO "the kanji
   panel's font feels more elegant" (owner, 2026-08-07; measured, then rendered
   at 400/500/600 side by side and picked by eye).
   Klee One's entire personality is stroke MODULATION — thin horizontals against
   thick diagonals, strokes that taper the way a brush lifts. At 600 that
   contrast flattens into an even slab and the face stops being Klee; the drawer
   sets its 192px hero glyph at 400 (css/kanji-page.css:390) and its 27px word
   rows at 500, and that is where the difference the owner could feel but not
   name was living. A hair of tracking lets the two glyphs stand apart instead
   of colliding, which weight had been doing the job of.
   ⛔ NOT a global "lighten the Japanese": the panel already runs LIGHTER than
   the drawer overall (35% of its JP at 500+ against the drawer's 48%). Weight
   is right on a 15px section label, which has to hold at small size. It was
   wrong on the one slot set at display scale. */
.wpn-word {
    margin: 0;
    font: 400 clamp(34px, 5.2vw, 52px)/1.3 var(--wpn-jp);
    letter-spacing: 0.04em;
    color: var(--wpn-ink-wet);
}
.wpn-word.long { font-size: clamp(28px, 4.2vw, 40px); }
.wpn-word.verylong { font-size: clamp(23px, 3.3vw, 31px); }
.wpn-word rt {
    font-size: 13px;
    font-weight: 400;
    color: var(--wpn-stone);
    letter-spacing: 0.06em;
}
.wpn-say {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}
/* romaji is ITALIC on every surface in this app (the locked inline
   convention #313: amber = sound, indigo = interactive, italic = romaji).
   Four romaji slots in this file were upright while the file spent italic on
   two things that are not romaji — the convention inverted where a beginner
   most needs it. */
.wpn-say .ro {
    font: 500 14.5px var(--wpn-ui);
    font-style: italic;
    letter-spacing: 0.05em;
    color: var(--wpn-stone);
}
/* the 音 chip + the 陽 room hanko wear the brand seal's clothes, the word
   page's dress verbatim (owner 2026-06-11: a plain white circle read as an
   off-brand logo): washi disc, brushed sumi ring, the logo's small gold dot
   under the glyph. They are the panel's only round controls, and they only
   ever appear side by side. */
.wpn-overlay .wpn-oto,
.wpn-overlay .wpn-crest {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    /* a washi disc lit from the top-left, not a flat swatch — the same one
       light the whole sheet is under */
    background: radial-gradient(120% 120% at 28% 22%,
        #FDFAF2 0%, #F7F2E6 58%,
        color-mix(in srgb, #F7F2E6 92%, var(--wpn-tone, #b0a090) 8%) 100%);
    border: 1.6px solid rgba(44, 44, 44, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3A3633;
    /* a pressed seal, not a floating pill: a lit inner top edge + a contact
       shadow tight enough that it cannot be read as hovering */
    box-shadow: inset 0 1px 0 var(--wpn-lit-soft), var(--wpn-cast-near);
}
/* the gold dot the two chips share with the brand seal */
.wpn-overlay .wpn-oto::after,
.wpn-overlay .wpn-crest::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--wpn-gold);
}
/* the wake is the glyph warming, not a lift — cards rest, they don't float.
   (Restating the shadow is load-bearing: the .wpn-overlay button reset kills
   shadows on hover and this rule has to out-specify it.) */
/* the wake is the seal pressing a little deeper into the paper — the shadow
   tightens rather than growing, so the disc never reads as lifting off */
.wpn-overlay .wpn-oto:hover,
.wpn-overlay .wpn-oto:focus-visible,
.wpn-overlay .wpn-crest:hover,
.wpn-overlay .wpn-crest:focus-visible {
    box-shadow:
        inset 0 1px 0 var(--wpn-lit),
        inset 0 -1px 0 var(--wpn-rim),
        0 1px 3px rgba(58, 40, 20, 0.10);
}
.wpn-overlay .wpn-oto svg { width: 18px; height: 18px; }
.wpn-overlay .wpn-oto.playing { color: var(--wpn-indigo); }
.wpn-overlay .wpn-oto:focus-visible,
.wpn-overlay .wpn-crest:focus-visible { border-radius: 50%; }
/* 陽 — the door into this word's sunlit room. The mark is 陽 (yō, "sun"), the
   first character of the room's name, 陽だまり, on every door into the room,
   word or kanji (desktop polish round 4, 14 October 2026); the word doors
   wore 間 from 2026-08-07 until then, so one room had two marks. */
.wpn-overlay .wpn-crest-sun {
    font: 600 17px/1 var(--wpn-jp);
    color: #6F5524;
    transition: filter 0.35s ease;
}
.wpn-overlay .wpn-crest:hover .wpn-crest-sun,
.wpn-overlay .wpn-crest:focus-visible .wpn-crest-sun { filter: brightness(1.07) saturate(1.18); }
@media (max-width: 768px) { .wpn-overlay .wpn-crest { display: none; } }
/* "sometimes written 良い" — the kana word's living kanji spelling, with the
   reading above the gloss (orthography belongs to the word's form, not its
   meaning — the word page's wp-altw line in panel dress). The qualifier leads
   inside the caption, the hero's own sentence (owner, round 1 of the desktop
   polish, 2026-10-12), so the trailing "· sometimes" whisper and its rule
   are gone. Gated kanji are .wpn-altk doors into the in-panel glance;
   uncovered kanji stay plain ink. */
.wpn-altw {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 9px;
}
.wpn-altw .cap {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-altw .jp {
    font: 400 16px var(--wpn-jp);
    color: var(--wpn-ink);
}
.wpn-overlay .wpn-altk {
    padding: 0 1px;
    font: inherit;
    color: var(--wpn-indigo);
    transition: color 0.16s ease;
}
@media (hover: hover) and (pointer: fine) {
    .wpn-overlay .wpn-altk:hover { color: var(--wpn-ink-wet); }
}

/* the meaning is the headline answer, and the page's placard says it at
   29px/500 — this one whispered it at 16.5/400, quieter than the story below */
.wpn-gloss {
    margin: 14px 0 0;
    font: 500 24px/1.4 var(--wpn-ui);
    color: var(--wpn-prose);
    max-width: 34ch;
}
/* ── THE HAND: two groups, not four buttons ──────────────────────────────
   The word page's own row (.wp-acts): the round TOOLS travel as a pair — hear
   it 音, open its room 陽 — held closer to each other than to the framed grade
   verbs, so the eye reads two decisions and two instruments. The panel used to
   float the 音 chip up on the romaji line and hang the room door off the foot
   of the 縁 section 1,200px below; both are back where the hand is. */
.wpn-acts {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    row-gap: 12px;
    margin-top: 20px;
}
.wpn-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;   /* two 44px discs; the row's give comes from elsewhere */
}
.wpn-verbs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wpn-overlay .wpn-verb {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 18px 10px;
    border: 1.5px solid color-mix(in srgb, var(--vac, var(--wpn-ink)) 55%, transparent);
    border-radius: 3px;
    color: var(--wpn-ink);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.wpn-overlay .wpn-save { --vac: color-mix(in srgb, var(--color-amber, #A07850) 55%, var(--wpn-ink) 45%); }
.wpn-overlay .wpn-skip { --vac: color-mix(in srgb, var(--color-moss, #6B7F5C) 55%, var(--wpn-ink) 45%); }
.wpn-overlay .wpn-verb:hover {
    border-color: var(--vac, var(--wpn-ink));
    background: color-mix(in srgb, var(--vac, var(--wpn-ink)) 10%, transparent);
}
.wpn-overlay .wpn-verb.active {
    border-color: var(--vac, var(--wpn-ink));
    background: color-mix(in srgb, var(--vac, var(--wpn-ink)) 20%, transparent);
}
.wpn-overlay .wpn-verb .cap { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.wpn-overlay .wpn-verb .jp { font: 400 14px var(--wpn-jp); color: var(--wpn-stone); }

/* 息 — a same-state claim answers with one quiet breath on the lit verb
   (nothing changed, nothing written; claims law, owner 2026-07-14) */
.wpn-overlay .wpn-verb.verb-affirm { animation: wpn-affirm-breath 0.55s ease-out; }
@keyframes wpn-affirm-breath {
    0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    40%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vac, var(--wpn-ink)) 25%, transparent); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .wpn-overlay .wpn-verb.verb-affirm { animation: none; }
}

/* ── 一瞥 GLANCE: the mounted print ──────────────────────────────────────── */

.wpn-mount {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    padding: 20px;
    border-radius: 4px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--wpn-paper) 96%, #fff) 0%,
        var(--wpn-paper) 42%,
        color-mix(in srgb, var(--wpn-paper) 92%, var(--wpn-tone, #b0a090) 8%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 251, 243, 0.85),
        inset 0 0 0 1px rgba(120, 90, 60, 0.10),
        0 1px 2px rgba(58, 40, 20, 0.04),
        0 6px 18px rgba(58, 40, 20, 0.05);
}
.wpn-plate {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--wpn-tone, #b0a090) 11%, var(--wpn-paper));
    box-shadow:
        inset 1px 1px 0 rgba(255, 251, 243, 0.55),
        inset -1px -1px 0 rgba(58, 40, 20, 0.10),
        inset 0 2px 10px rgba(58, 40, 20, 0.10);
}
.wpn-plate .art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.wpn-plate .art.loaded { opacity: 1; }
.wpn-plate .bevel {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        inset 1px 1px 0 rgba(255, 251, 243, 0.40),
        inset -1px -1px 0 rgba(58, 40, 20, 0.18),
        inset 0 0 0 1px rgba(120, 90, 60, 0.14);
}

/* ── the kanji GLANCE (in-panel view, both takes) ────────────────────────
   Tapping a kanji inside the panel swaps to this compact "what is this
   character?" view — the base kanji page never moves. kun indigo / on
   terracotta follow the kanji page's own reading hues. */
.wpn-kglyph {
    font: 400 84px/1.15 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-kreads {
    display: flex;
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 6px;
    margin-top: 10px;
}
.wpn-kreads .kr {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font: 500 15.5px var(--wpn-jp);
}
.wpn-kreads .kr .tag {
    font: 600 9.5px var(--wpn-ui);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-kreads .kun [lang="ja"] { color: var(--wpn-indigo); }
.wpn-kreads .on [lang="ja"] { color: #9E5E43; }
/* ─── the FULL kanji glance (universal tap 2b): the kanji page's own content
   spine embedded via KanjiPage.embedBody. Its content classes are global in
   kanji-page.css and its palette is re-hosted on .wpn-kbody there; what must
   live HERE is the context the drawer's own root normally provides: the body
   type + the components.css pill-reset (the kjp reset is scoped to
   .kjp-overlay, which the embed never sits inside). */
.wpn-kbody {
    color: var(--kjp-ink, #3A3633);
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    /* the 陽 room seal pins itself to this body's top-right corner, exactly as
       it does in the drawer's own .kjp-body (kanji-page.css) */
    position: relative;
}
/* (0,1,1) EXACTLY like .kjp-overlay button — the content rules in
   kanji-page.css re-state their look at (0,2,0)+ and must keep winning the
   cascade here just as they do in the drawer. A more specific reset would
   flatten them (the pill-reset trap, self-inflicted). */
.wpn-kbody button {
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.wpn-kbody button:hover,
.wpn-kbody button:active {
    transform: none;
    box-shadow: none;
}
/* (the embedded .hero takes NO housing of its own — it opens the glance on the
   drawer's own 16px, and the exit chevron floats clear of the centred glyph
   exactly as the drawer's does. The old `margin-top: 10px` seam belonged to
   the retired panel-owned painting above it; measured 2026-08-07, both bodies
   now start at y 0 and both glyphs at y 16.) */

.wpn-kstory {
    margin: 26px 0 0;
    font: 400 14.5px/1.75 var(--wpn-ui);
    color: var(--wpn-prose);
    max-width: 56ch;
}

/* ── 図録 CATALOG: the painting, whole ────────────────────────────────────
   ⭐ THE PAINTING IS A PAINTING (owner pick D, 2026-08-07). The band used to
   carry the whole placard, over a scrim, in one of two ink regimes chosen from
   the picture's own bottom-left brightness. Three species of failure, one per
   kind of painting: a BUSY one (a lit burger counter) is warm mid-tones edge to
   edge and gives the scrim no quiet corner to work with; a PALE one lost the
   bottom third of the picture to the light scrim AND wore a dark 14px halo
   built for white-on-dark, which on light art is just a smudge; only a DARK
   one worked. So the band now holds nothing but the print, and the head sits on
   washi below it — see headHTML in js/word-panel.js.
   ⛔ DELETED with the placard, and not to be reinstated piecemeal: .wpn-bscrim,
   --wpn-scrimC/B, the .wpn-rg-dark/.wpn-rg-light regimes, and every
   `.wpn-band .wpn-*` ink override (~50 lines). A dead rule that survives inside
   a green gate is how a surface accumulates rules nobody can see. */

.wpn-band {
    position: relative;
    /* full-bleed across the sheet AND up to its top edge: the 14px margin sat
       under a 48px reserved chevron strip, so 62px of the sheet's most valuable
       real estate was a pale band above the art. The chevron floats on the
       print now (.wpn-bar), the way the word page's own back control does. */
    margin: 0 -28px 0;
    /* carrying no text, the band can simply be the picture's own shape — the
       card art is painted 3:2 (CLAUDE.md), so this crops nothing. The clamp is
       the floor and ceiling for a very short or very tall window. */
    aspect-ratio: 3 / 2;
    min-height: 300px;
    max-height: 52vh;
    /* ⛔ NO overflow:hidden — the bleed below (::after, top:100%) has to escape
       the band. Nothing else here can overflow: the print is inset:0 with
       object-fit:cover, so it is already sized to this box. */
}
.wpn-paint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.wpn-paint.loaded { opacity: 1; }
/* 縁 THE PRINT'S EDGE — the drawer frames its artwork (mount · plate · bevel);
   this one is full-bleed by design, so it earns its edge the cheapest honest
   way: a warm rim inside the picture and a lit line where it meets the paper.
   Without it the print stops mid-air and the sheet reads as a web banner.
   (css/kanji-page.css:604, .story .plate .bevel — the same three insets,
   spent once instead of on a frame.) */
.wpn-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px var(--wpn-rim),
        inset 0 -1px 0 var(--wpn-lit-soft),
        inset 0 -14px 22px -14px rgba(58, 40, 20, 0.16);
}
/* 滲み THE BLEED — the painting's own pigment carries down into the paper
   under it. This used to live on .wpn-entry, which was correct until the head
   moved off the art (owner pick D): the head then sat in a 274px band of
   untinted paper between the picture and the page, and the sheet stopped
   reading as one continuously-toned surface. It belongs to the BAND, which is
   where the pigment comes from. */
.wpn-band::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 640px;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            color-mix(in srgb, var(--wpn-tone, #b0a090) 16%, transparent) 0%,
            color-mix(in srgb, var(--wpn-tone, #b0a090) 7%, transparent) 30%,
            transparent 78%),
        radial-gradient(88% 42% at 50% 6%,
            color-mix(in srgb, var(--wpn-tone, #b0a090) 9%, transparent) 0%,
            transparent 70%);
}
/* …and everything after the band paints above the bleed */
.wpn-head--paper { position: relative; z-index: 1; }

.wpn-entry { padding-top: 4px; }

/* ── sections (shared grammar) ───────────────────────────────────────────── */

/* THE RHYTHM. Round 1 ran 36px, then 58px — half the word page's step, and
   running the same document at half-scale was most of what read as cramped.
   Measured at 1440px, both sheets 759px wide: the panel packed 69 text lines
   per 1000px against the page's 65 and the drawer's 63, at an average line box
   of 22.0px against 28.3 and 27.2.
   The page's own step is 88px; taking it whole (2026-08-07) overshot BOTH
   references — the owner's read was "slightly reduced". 72px is the step this
   housing wants: the page's rhythm minus the 29px of column the panel does not
   have, and still a full quarter more air than round 1 gave it. */
.wpn-sec { position: relative; margin-top: 72px; }
/* the first section opens under the painting, not under another section — the
   band's own bottom edge is already a rest, so it takes the shorter step */
.wpn-entry > .wpn-sec:first-child { margin-top: 48px; }
.wpn-entry > .wpn-sec:first-child::before { display: none; }

/* 霞 THE KASUMI BAND — the word page's act divider, verbatim in panel dress
   (css/word-page.css:1256: "section heads: ink kanji + placard caps. The
   hairline rules are gone — sections now close with a kasumi (霞) mist band of
   the painting's own tone, the emaki scene-break").
   Round 1 gave this sheet a hairline under every head AND a 使い方 threshold
   borrowed from the drawer — two dividers, neither of them the page's, and the
   hairline was the exact pattern the page had already retired. Owner ruling
   2026-08-07 (R1 + R4): the page's own answer, and only the page's.
   Full-bleed is -28px here (the body's gutter) where the page uses -14% of a
   centred sheet — same intent, this housing's measure. */
.wpn-sec::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -28px;
    right: -28px;
    height: 46px;
    pointer-events: none;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--wpn-tone, #b0a090) 5%, transparent) 30%,
        color-mix(in srgb, var(--wpn-tone, #b0a090) 8%, transparent) 52%,
        color-mix(in srgb, var(--wpn-tone, #b0a090) 4%, transparent) 74%,
        transparent 100%);
    -webkit-mask-image: radial-gradient(120% 300% at 30% 46%, #000 22%, transparent 70%);
    mask-image: radial-gradient(120% 300% at 30% 46%, #000 22%, transparent 70%);
}
/* every band a differently-shaped cloud — mist, not a printed rule */
.wpn-sec:nth-of-type(even)::before {
    -webkit-mask-image: radial-gradient(130% 260% at 64% 54%, #000 26%, transparent 74%);
    mask-image: radial-gradient(130% 260% at 64% 54%, #000 26%, transparent 74%);
    height: 40px;
}
.wpn-sec:nth-of-type(3n)::before {
    -webkit-mask-image: radial-gradient(110% 320% at 44% 40%, #000 20%, transparent 68%);
    mask-image: radial-gradient(110% 320% at 44% 40%, #000 20%, transparent 68%);
}

/* THE HEAD IS THE PAGE'S HEAD (css/word-page.css:1289) — ink kanji + placard
   caps on one baseline, nothing else. Round 1 added romaji and a rule; both
   were inventions, and the owner has ruled them out. A reader who knows the
   word page must recognise 字 BUILT FROM here without being told. */
.wpn-sechead {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin-bottom: 15px;
}
.wpn-ink {
    font: 600 15px var(--wpn-jp);
    color: var(--wpn-ink);
}
.wpn-seclabel {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
/* the 例 block's invitation — the same italic whisper the word page uses, and
   deliberately NOT the label voice beside it: a label names the section, this
   one asks for a gesture, and it retires on the first tap */
.wpn-ex-tap {
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--wpn-stone);
}

/* the fold control rides its own section head, flush right */
.wpn-overlay .wpn-fold {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 2px 3px 10px;
    font: 500 12px var(--wpn-ui);
    letter-spacing: 0.02em;
    color: var(--wpn-quiet);
    transition: color 0.18s ease;
}
.wpn-overlay .wpn-fold:hover { color: var(--wpn-ink); }
.wpn-fold-caret {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}
/* an open fold points its caret back up — the line now offers the way closed */
.wpn-overlay .wpn-fold.is-open .wpn-fold-caret { transform: rotate(180deg); }
/* THE [hidden] RESET — an author display beats the attribute
   (tests/css/hidden_reset_test.js) */
.wpn-conj[hidden] { display: none; }

/* 活用 FOLDED GIVES UP ITS OWN ROOM (owner, round 1 of the desktop polish,
   2026-10-12). Closed, the section is one line that says "7 forms", and it
   spent a whole room saying it: its own 霞 band and the full 72px step, about
   200px of paper for a line that says "closed". Folded, it draws no band and
   sits 36px under the examples, so it reads as their foot; the 縁 section
   after it keeps its band, which closes the pair. Opened, the class leaves
   (js/word-panel.js onClick) and the band and the 72px step come back with
   the table. The page does the same at its own 44px. The fold itself stays
   (owner, 1 August), and the panel still never writes kotoba_wpConj. */
.wpn-sec-conj.is-folded { margin-top: 36px; }
.wpn-sec-conj.is-folded::before { display: none; }

/* ⛔ THE 使い方 THRESHOLD IS GONE (owner ruling R4, 2026-08-07). It was the
   kanji drawer's 間 band borrowed onto a surface whose reference is the WORD
   PAGE, and the page already has its own answer for how one act ends and the
   next begins: the 霞 kasumi mist band above every section (.wpn-sec::before).
   Two divider species on one sheet is what a reader feels as clutter. */

/* 字組み — the whole-word answer, closing its own breakdown: the rows explain
   the characters, then this line explains the word (owner, round 1 of the
   desktop polish, 2026-10-12; it stood above the rows, as a 14px standfirst
   capped at 56ch, until then). The page's dress for the same seat
   (css/word-page.css .wp-comp): the rows' own story voice, 15px/1.65 in the
   prose ink, across the section's full measure from the sheet's left edge,
   never indented under one character's text column, because it speaks for
   the whole word. The page parts it from the rows with the hairline its rows
   already use; this sheet parts its rows by AIR (see .wpn-anats), so the line
   sits one row-gap under the last row (16px row padding + 18px) and no fence
   is drawn. Where a note waits behind it the line becomes the door, and the
   note unfolds INLINE beneath it (the page's hover popover would clip
   against this sheet). */
.wpn-comp,
.wpn-overlay .wpn-comp {
    display: block;
    width: 100%;
    margin: 18px 0 0;
    font: 400 15px/1.65 var(--wpn-ui);
    color: var(--wpn-prose);
    text-align: left;
}
/* a word that IS its kanji: the line follows its folded 字 line in that
   line's voice and measure (13.5px, 56ch), as the page's head sets it */
.wpn-jifold .wpn-comp,
.wpn-overlay .wpn-jifold .wpn-comp {
    margin-top: 10px;
    font-size: 13.5px;
    max-width: 56ch;
}
.wpn-overlay .wpn-comp.more { cursor: pointer; }
/* the 字 rows' own gold arrow, reused: on this surface it already means
   "the story continues", which is exactly what resting here delivers */
.wpn-overlay .wpn-comp .ago {
    margin-left: 6px;
    font-size: 10px;
    color: var(--wpn-gold);
    opacity: 0.6;
    transition: opacity 0.18s ease;
}
.wpn-overlay .wpn-comp.more:hover .ago,
.wpn-overlay .wpn-comp.more:focus-visible .ago,
.wpn-overlay .wpn-comp.more[aria-expanded="true"] .ago { opacity: 1; }
.wpn-comp-note {
    margin: 12px 0 0;
    padding: 15px 17px;
    border-left: 2px solid color-mix(in srgb, var(--wpn-gold) 55%, transparent);
    border-radius: 0 3px 3px 0;
    background: color-mix(in srgb, var(--wpn-paper) 88%, var(--wpn-tone, #b0a090) 12%);
    font: 400 13.5px/1.7 var(--wpn-ui);
    color: var(--wpn-prose);
    max-width: 60ch;
}
/* THE [hidden] RESET — an author display beats the attribute
   (tests/css/hidden_reset_test.js) */
.wpn-comp-note[hidden] { display: none; }

/* 字 built from — THE PAGE'S MONUMENT, in this housing's measure.
   The markup is already the page's (.ak / .atx / .akw / .ard / .astory), but
   round 1 dressed it as a wrapping baseline row, which folded the page's three
   stacked facts — the sense, the reading it takes HERE, the shape story — onto
   one line at three different sizes. The reading is the one thing a beginner
   came for; it was reading as a trailing whisper. The page stacks them
   (css/word-page.css:1149) and so does this now, at 88px/1fr where the page
   uses 96px (this column is 29px narrower). */
.wpn-anats { display: flex; flex-direction: column; }
.wpn-overlay .wpn-anat {
    display: grid;
    /* two columns since the arrow moved inline into the story teaser (round 1,
       2026-10-12; it held a third, flush right) */
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    width: 100%;
    padding: 16px 8px;
    border-radius: 3px;
    text-align: left;
    transition: background-color 0.18s ease;
}
/* rows are parted by AIR, not fences — the page draws one hairline between
   anatomy rows (css/word-page.css:1158); at two or three rows on this narrower
   sheet the row's own 32px of padding already says where one ends */
.wpn-anats { row-gap: 2px; }
.wpn-overlay button.wpn-anat:hover { background: rgba(58, 54, 51, 0.045); }
.wpn-overlay .wpn-anat .ak {
    font: 400 64px/1.05 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-overlay .wpn-anat.still .ak { color: var(--wpn-stone); }
.wpn-overlay .wpn-anat .atx {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 6px;
}
/* the page's placard caps — the sense a character lends is a NAME, and the
   page says it in tracked uppercase (css/word-page.css:1176) */
.wpn-overlay .wpn-anat .akw {
    font: 600 13px var(--wpn-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
/* 字組み: a character carrying no meaning here keeps its keyword and wears it
   struck, with the job it IS doing named underneath. Same law as the word
   page's 字 monument, so the two panels never say different things. */
.wpn-overlay .wpn-anat .akw.snd {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--wpn-stone) 65%, transparent);
    opacity: 0.62;
}
.wpn-overlay .wpn-anat .akwjob {
    font: 400 12.5px var(--wpn-ui);
    color: rgba(87, 83, 78, 0.9);
}
.wpn-overlay .wpn-anat .akwrest {
    font: 400 12px var(--wpn-ui);
    letter-spacing: 0.04em;
    color: var(--wpn-quiet);
}
/* "HERE READ ある" — the page's own label + reading pair (word-page.css:1202),
   the answer to the question a beginner actually brought to this row */
.wpn-overlay .wpn-anat .ard {
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-overlay .wpn-anat .ard b {
    font-family: var(--wpn-jp);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--wpn-ink);
    margin-left: 7px;
    vertical-align: -0.12em;
}
.wpn-overlay .wpn-anat .astory {
    font: 400 15px/1.65 var(--wpn-ui);
    color: #44403c;
    margin-top: 2px;
}
/* the SINGLE-KANJI word's folded 字 row — no header, no repeated glyph: the
   character's origin hangs off the entry as one quiet door (word page parity).
   Its composition line follows it inside one fold (round 1, 2026-10-12): the
   fold takes the 44px, so the line alone, with no story to follow, sits where
   the door would have. */
.wpn-jifold { margin-top: 44px; }
.wpn-jifold > .wpn-comp:first-child,
.wpn-jifold > .wpn-compwrap:first-child > .wpn-comp { margin-top: 0; }
/* a line whose characters carry no keyword yet follows the head directly */
.wpn-sechead + .wpn-comp,
.wpn-sechead + .wpn-compwrap > .wpn-comp { margin-top: 0; }
.wpn-overlay .wpn-jihead {
    display: block;
    width: 100%;
    margin-top: 44px;
    padding: 2px 2px 2px 0;
    text-align: left;
}
.wpn-overlay .wpn-jifold > .wpn-jihead { margin-top: 0; }
.wpn-overlay .wpn-jihead .astory {
    font: 400 13.5px/1.65 var(--wpn-ui);
    color: var(--wpn-prose);
}
.wpn-overlay .wpn-jihead .ago {
    margin-left: 7px;
    font-size: 11px;
    color: var(--wpn-gold);
    opacity: 0.6;
    transition: opacity 0.18s ease;
}
.wpn-overlay .wpn-jihead:hover .ago,
.wpn-overlay .wpn-jihead:focus-visible .ago { opacity: 1; }
.wpn-overlay .wpn-anat .asim {
    font: 400 12.5px var(--wpn-ui);
    color: rgba(87, 83, 78, 0.85);
}
.wpn-overlay .wpn-anat .asim .sj { font-family: var(--wpn-jp); margin-right: 7px; color: var(--wpn-seal); }
.wpn-overlay .wpn-anat .asim b { font-family: var(--wpn-jp); font-weight: 600; }
/* → THE ARROW FOLLOWS THE TEASER, INLINE (owner, round 1 of the desktop
   polish, 2026-10-12): the word page's seat ("…in the bowl … →"). It sat at
   the row's far right edge, 400px from the words it continues. Same glyph,
   ink and size as it wore there (16px, the ghost ink, indigo awake); only the
   seat changed. INLINE, never inline-block, and glued to the last character
   by a word joiner in the markup, so it can never wrap alone onto a line of
   its own; line-height 1 keeps the 16px glyph from opening the 15px line box.
   ⛔ The wake changes INK, never geometry: the old 2px nudge is gone. */
.wpn-overlay .wpn-anat .astory .ago {
    display: inline;
    margin-left: 9px;
    font-size: 16px;
    line-height: 1;
    color: var(--wpn-ghost);
    transition: color 0.18s ease;
}
.wpn-overlay button.wpn-anat:hover .astory .ago,
.wpn-overlay button.wpn-anat:focus-visible .astory .ago { color: var(--wpn-indigo); }

/* 例 examples */
/* 例 rows in the drawer's own dress. A flat 20px gap and nothing else stacked
   three sentences into one grey block — and once the 訳 offer joined each row,
   the sentence, its offer and the NEXT sentence all sat the same distance
   apart, so nothing said where one example ended. Row air plus one hairline;
   the same fix css/kanji-page.css:744 wrote out for .kje-ex. */
.wpn-exs { display: flex; flex-direction: column; }
.wpn-ex { padding: 18px 2px; }
.wpn-ex:first-child { padding-top: 4px; }
.wpn-ex + .wpn-ex { border-top: 1px solid var(--wpn-rule); }
/* READING SCALE. 19px was 0.73× the word page's 26px sentence in a column only
   4% narrower, and its 9.5px furigana was the smallest reading aid anywhere in
   the app — on the surface a beginner most often meets a sentence. 23px keeps
   the page's voice while a 15-character sentence still sets on one line here;
   the ruby rides at the page's own half-em. */
.wpn-ex-jp {
    font: 400 23px/2 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-ex-jp rt { font-size: 11.5px; color: var(--wpn-stone); }
.wpn-ex-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
/* THE [hidden] RESET (tests/css/hidden_reset_test.js). The `display: flex` above
   is author origin and beats the UA's `[hidden] { display: none }` outright — the
   one line that decides whether the 訳 ask below actually hides anything. Without
   it the foot stays painted and the ask is decoration over an answer already on
   show. Seventh strike on this law; the guard names the fix. */
.wpn-ex-foot[hidden] { display: none; }
/* 訳 — the reader ASKS for the romaji + meaning (owner 2026-08-05). Behaviour
   ported from the word page; dress is the panel's own — the same ghost ink and
   quiet weight the drawer uses everywhere else, scoped under .wpn-overlay so it
   out-specifies the `.wpn-overlay button` reset (which would otherwise leave it
   as plain inherited body text). */
.wpn-overlay button.wpn-ex-ask {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    padding: 4px 8px 4px 2px;
    border-radius: 6px;
    font: 500 12px var(--wpn-ui);
    color: var(--wpn-ghost);
    transition: color 0.18s ease;
}
.wpn-overlay button.wpn-ex-ask[hidden] { display: none; }
.wpn-overlay button.wpn-ex-ask:hover { color: var(--wpn-ink); }
.wpn-ex-ask-ink {
    font-family: var(--wpn-jp);
    font-size: 14px;
    color: var(--wpn-indigo);
}
/* this line CARRIES the whole pronunciation, so it has to clear AA */
.wpn-ex-foot .ro {
    font: 400 12.5px var(--wpn-ui);
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--wpn-quiet);
}
.wpn-ex-foot .en {
    font: 400 14px/1.5 var(--wpn-ui);
    color: var(--wpn-prose);
}

/* 話 story (catalog) — the page's reading scale (css/word-page.css:1316).
   At 14.5px in this 695px column the story ran ~96 characters to the line;
   the page's 16.5px brings it to ~84, which is the page's own measure. The
   longest prose on the sheet was also its smallest — that alone is most of
   what "cluttered" meant. */
.wpn-paper { display: flex; flex-direction: column; gap: 21px; }
.wpn-story-sec { display: flex; gap: 16px; }
.wpn-story-mark {
    flex: 0 0 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.wpn-story-mark .sub {
    font: 600 9.5px var(--wpn-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-story-body {
    flex: 1;
    min-width: 0;
    font: 400 16.5px/1.85 var(--wpn-ui);
    color: var(--wpn-prose);
}

/* 活用 conjugation (catalog) */
.wpn-conj { display: flex; flex-direction: column; }
.wpn-conj-row {
    display: grid;
    grid-template-columns: 120px 1fr 34px;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
}
.wpn-conj-row + .wpn-conj-row { border-top: 1px solid var(--wpn-rule); }
.wpn-conj-form { display: flex; flex-direction: column; gap: 1px; }
.wpn-conj-form .jp { font: 500 13.5px var(--wpn-jp); color: var(--wpn-ink); }
.wpn-conj-form .en {
    font: 600 9.5px var(--wpn-ui);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-conj-kana { font: 500 16px var(--wpn-jp); color: var(--wpn-ink-wet); }
.wpn-conj-kana .ro {
    font: 400 12px var(--wpn-ui);
    font-style: italic;
    color: var(--wpn-quiet);
    margin-left: 10px;
}
.wpn-overlay .wpn-conj-on {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-stone);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.wpn-overlay .wpn-conj-on:hover { background: rgba(58, 54, 51, 0.07); color: var(--wpn-ink); }
.wpn-overlay .wpn-conj-on svg { width: 15px; height: 15px; }
.wpn-overlay .wpn-conj-on.playing { color: var(--wpn-indigo); }

/* 数 counting — THE PAGE'S LIST (owner, round 1 of the desktop polish,
   2026-10-12). The page sets the ten forms as a two-column numbered list
   (css/word-page.css .wp-cnt); this sheet set them as a grid of ten framed
   tiles, the same content in a second design. Now the page's geometry,
   copied: two columns 44px apart, each row number · kanji form · kana · 音 at
   22px / 64px / the rest / auto with 12px gaps, and a faint hairline over
   every row after the first pair. The 703px column carries it whole (the
   page's is 730px), so nothing is scaled.
   Two deliberate departures, both this sheet's own laws:
   · THE NUMERAL takes --wpn-quiet, not the page's 45% stone: a 10.5px figure
     a learner reads must clear AA (the 2026-08-07 sweep named exactly these
     1-10 numerals; see the two quiet inks at the top of this file).
   · THE 音 CHIP is the panel's own paradigm chip (.wpn-conj-on, the 活用
     table's), so one sheet keeps one dress for one control; the rows run at
     8px padding so its 28px disc keeps the page's ~43px row pitch. */
.wpn-cnt {
    padding: 0 2px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
}
.wpn-cnt-cell {
    display: grid;
    grid-template-columns: 22px 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.wpn-cnt-cell:nth-child(n+3) { border-top: 1px solid rgba(44, 44, 44, 0.05); }
.wpn-cnt-n {
    font: 600 10.5px var(--wpn-ui);
    letter-spacing: 0.08em;
    color: var(--wpn-quiet);
}
.wpn-cnt-kanji { font: 600 16px var(--wpn-jp); color: var(--wpn-ink); }
.wpn-cnt-kana { font: 400 14px var(--wpn-jp); color: var(--wpn-stone); }

/* ── 礼 politeness — THE ONE RAISED SURFACE ───────────────────────────────
   The drawer keeps exactly one raised species and spends it on the block that
   is a SPECIMEN rather than prose (its look-alike tray). On a word the
   specimen is this: the same meaning laid out across politeness levels, side
   by side, to be compared. It is also rare (~130 of 1,400 words carry a
   register family), so raising it stays an EARNED exception and never becomes
   furniture on every card. Everything else on this sheet is ink on paper. */
.wpn-reg-card {
    padding: 20px 22px 14px;
    border-radius: 3px;
    /* the paper recipe: a face that catches the light across it, a lit top
       edge, a warm rim inside that edge, then contact + ambient. The border is
       gone — the rim IS the edge, drawn inside where paper's own edge lives */
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--wpn-paper) 96%, #fff) 0%,
        var(--wpn-paper) 42%,
        color-mix(in srgb, var(--wpn-paper) 92%, var(--wpn-tone, #b0a090) 8%) 100%);
    box-shadow:
        inset 0 1px 0 var(--wpn-lit),
        inset 0 0 0 1px var(--wpn-rim),
        var(--wpn-cast);
}
.wpn-reg-anchor {
    margin: 0 0 14px;
    font: 400 13px var(--wpn-ui);
    color: var(--wpn-stone);
}
.wpn-reg-ladder { display: flex; flex-direction: column; }
.wpn-reg-rung {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 3px;
}
/* THE BRUSHED DIVIDER between rungs — a tapered sumi stroke that fades out at
   both ends, not a ruled line across a table (css/kanji-page.css:1481, where
   the scholar's registers are parted the same way). A flat hairline fences;
   a brush stroke says "and then". */
.wpn-reg-rung { position: relative; }
.wpn-reg-rung + .wpn-reg-rung::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8px;
    width: 96px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--wpn-ink) 26%, transparent),
        color-mix(in srgb, var(--wpn-ink) 12%, transparent) 68%, transparent);
}
.wpn-reg-rung.wpn-rel { cursor: pointer; transition: background-color 0.18s ease; }
.wpn-reg-rung.wpn-rel:hover { background: rgba(58, 54, 51, 0.045); }
/* YOU ARE HERE — a warm tone wash and a spine on the left edge, not a cold
   indigo fill. 7% indigo over warm washi reads grey, which is the one thing
   the palette's own note forbids ("warm sumi… never the cold neutral that read
   as plastic beside the word page", css/kanji-page.css:25). */
.wpn-reg-rung.is-current {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--wpn-tone, #b0a090) 22%, transparent),
        color-mix(in srgb, var(--wpn-tone, #b0a090) 7%, transparent) 62%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--wpn-indigo) 42%, transparent);
}
.wpn-reg-role { display: flex; flex-direction: column; gap: 1px; }
.wpn-reg-role .tag {
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpn-ink);
}
.wpn-reg-role .who { font: 400 11.5px var(--wpn-ui); color: var(--wpn-stone); }
.wpn-reg-word .jp { font: 500 17px var(--wpn-jp); color: var(--wpn-ink-wet); }
.wpn-reg-word .jp rt { font-size: 9px; color: var(--wpn-stone); }
.wpn-reg-word .ro {
    font: 400 12px var(--wpn-ui);
    font-style: italic;
    color: var(--wpn-quiet);
    margin-left: 10px;
}

/* ── 縁 related — THE PAGE'S LEGEND, RAIL AND ALL ─────────────────────────
   The page seats 類 SIMILAR / 縁 NEARBY in a right-aligned rail against a
   quiet spine (css/word-page.css:1671), so a reader scanning the words never
   has a group name interrupting the column. Round 1 stacked the group names
   INLINE above their rows instead — five extra objects in the reading path,
   and the one section where the two surfaces looked least alike. Same 68px
   rail and 18px gutter as the page; this column is 29px narrower and carries
   it. */
.wpn-dict { position: relative; }
.wpn-dict::before {
    content: '';
    position: absolute;
    left: 68px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--wpn-rule);
}
.wpn-rel-grp {
    position: relative;
    display: grid;
    grid-template-columns: 68px 1fr;
    column-gap: 18px;
    padding: 18px 0;
    /* the legend centres against its group — a top-pinned label floats above
       the words once the plates make the rows tall (the page's own round-1
       finding, 2026-06-12) */
    align-items: center;
}
.wpn-rel-grp:first-child { padding-top: 4px; }
/* the page's dissolving sub-divider: a rule that fades out at both ends into
   the washi, inset from the spine — a breath between groups, never a table
   line ruled across them (css/word-page.css:1696) */
.wpn-rel-grp:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 88px;
    right: 26px;
    height: 1px;
    background: linear-gradient(to right, transparent 0%,
        rgba(60, 53, 40, 0.15) 24%, rgba(60, 53, 40, 0.15) 76%, transparent 100%);
}
.wpn-rel-m {
    text-align: right;
    padding-right: 14px;
}
.wpn-rel-m .g {
    display: block;
    font: 600 15px var(--wpn-jp);
    color: var(--wpn-ink);
}
.wpn-rel-m .g.tai { color: var(--wpn-seal); }
.wpn-rel-m .c {
    display: block;
    margin-top: 3px;
    font: 600 10.5px/1.35 var(--wpn-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-rels { display: flex; flex-direction: column; }
.wpn-rel {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 50px;
    padding: 8px;
    border-radius: 3px;
    text-align: left;
}
/* air, not fences (see the divider law at .wpn-sechead) */
.wpn-rels { row-gap: 3px; }
.wpn-rel[role="button"] { cursor: pointer; transition: background-color 0.18s ease; }
.wpn-rel[role="button"]:hover { background: rgba(58, 54, 51, 0.045); }
.wpn-rel-g {
    flex: 0 0 auto;
    font: 600 14px var(--wpn-jp);
    color: var(--wpn-stone);
}
.wpn-rel-g.tai { color: var(--wpn-seal); }
.wpn-rel-tx { flex: 1 1 auto; min-width: 0; }
.wpn-rel-tx .l1 { display: flex; align-items: center; gap: 9px; }
/* 500, the drawer's own weight for the same job (its 27px word rows) — same
   reason as the headword: at 22px Klee still has modulation to lose, and a
   list of five lemmas set at 600 reads as five headlines competing */
.wpn-rel-tx .lw {
    font: 500 22px var(--wpn-jp);
    letter-spacing: 0.015em;
    color: var(--wpn-ink-wet);
}
.wpn-rel.is-frame .lw { font-weight: 400; color: var(--wpn-ink); }
/* a meet-later row shows NO plate (css/word-page.css:1807, the page's own
   answer). Round 1 gave it a primed blank board and argued that honest — true
   at 66×47, false at the page's 96×64, where an empty rectangle is the
   loudest thing in the column. The frame row is text alone; that is what
   "no painting yet" looks like. */
.wpn-rel-chip.is-frame { display: none; }
.wpn-rel-tx .lr { font: 400 13px var(--wpn-jp); color: var(--wpn-stone); }
.wpn-rel-tx .l2 {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 2px;
    font: 400 13px/1.45 var(--wpn-ui);
    color: var(--wpn-stone);
    overflow: hidden;
    white-space: nowrap;
}
.wpn-rel-tx .l2 .gl {
    color: var(--wpn-prose);
    overflow: hidden;
    text-overflow: ellipsis;
}
.wpn-rel-tx .l2 .dash { color: var(--wpn-ghost); }
.wpn-overlay .wpn-rel-on {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-stone);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.wpn-overlay .wpn-rel-on:hover { background: rgba(58, 54, 51, 0.07); color: var(--wpn-ink); }
.wpn-overlay .wpn-rel-on svg { width: 14px; height: 14px; }
.wpn-overlay .wpn-rel-on.playing { color: var(--wpn-indigo); }
/* THE PLATE. A row can never show a hole, because the PLATE is the fallback:
   a toned, grained, softly-lit little board that a painting is laid onto when
   there is one (the kanji drawer's .kjw-tile trick, css/kanji-page.css:1124).
   The old dress was a flat 54×40 chip with a diagonal HATCH for the imageless
   "meet later" rows — and three hatched squares in a column read as three
   broken images, which is the opposite of the honest "no painting yet" the
   hatch was reaching for. Primed, blank and calm says it truthfully. */
.wpn-rel-chip {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    width: 96px;   /* the page's own chip (--wp-relchip-w), not a shrunk copy */
    height: 64px;
    border-radius: 3px;
    overflow: hidden;
    /* the drawer's own two-corner tone well, so an imageless plate is a primed
       board and not a grey rectangle (css/kanji-page.css:566) */
    background:
        radial-gradient(120% 90% at 28% 22%,
            color-mix(in srgb, var(--wpn-tone, #b0a090) 22%, var(--wpn-paper)) 0%, transparent 56%),
        radial-gradient(110% 100% at 78% 84%,
            color-mix(in srgb, var(--wpn-tone, #b0a090) 15%, var(--wpn-paper)) 0%, transparent 60%),
        color-mix(in srgb, var(--wpn-tone, #b0a090) 11%, var(--wpn-paper));
    /* the plate is set INTO the sheet — a tight contact shadow only. The BEVEL
       is drawn by ::after, because an inset shadow paints under the child <img>
       and would vanish the moment a painting loaded (the drawer hit this and
       gave the job to a dedicated .bevel element, css/kanji-page.css:604). */
    box-shadow: var(--wpn-cast-near);
}
/* 和紙 grain, over the painting (z 3 beats the img's z 2 — it used to sit
   under it, so the grain was only ever visible on the imageless rows) */
.wpn-rel-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.06;
    mix-blend-mode: multiply;
}
/* THE BEVEL, the topmost layer (z 4, above the grain and the painting) — lit
   top-left, shaded bottom-right, one warm rim. ⛔ it cannot live on the plate's
   own box-shadow (an inset paints UNDER the child <img> and vanishes the moment
   a painting loads) and it cannot share the grain's layer (mix-blend-mode:
   multiply erases a white highlight). The drawer learned both and gave the job
   a dedicated element, css/kanji-page.css:604. The old top-left light wash that
   sat here is gone — the plate's own two-corner gradient does that now, and
   under the picture where it belongs. */
.wpn-rel-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 1px 1px 0 var(--wpn-lit-soft),
        inset -1px -1px 0 var(--wpn-rim-deep),
        inset 0 0 0 1px var(--wpn-rim);
}
.wpn-rel-chip img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.wpn-rel-chip img.loaded { opacity: 1; }
/* the frequency chip SPEAKS THE LADDER, never a raw integer. The page's own
   law (js/grid-mode.js:1272): "the chip speaks the app's own tier language
   (Core/Everyday/Occasional/Rare — rank_bands, the ONE ladder), never a raw
   '#5785': an unlabelled integer helps no one decide". The panel was printing
   #4124 beside every neighbour — the exact thing the page had retired. */
/* ⛔ THE BAND WORD IS TEXT, SO IT CLEARS AA. Copying the word page's own
   #a49c94 put a 10.5px label at 2.44:1 on this washi — measured, not guessed.
   The kanji drawer had already hit this and written the answer down
   (css/kanji-page.css:1276): "#6b6358 clears AA (the ghost token did not at
   this size)". A word earns its quiet from SIZE and TRACKING; only decoration
   is allowed to earn it from fading. */
.wpn-rank {
    flex: 0 0 auto;
    font: 600 10.5px var(--wpn-ui);
    letter-spacing: 0.04em;
    color: var(--wpn-quiet);
}
/* the rank rail — only in a related ROW. (The head's eyebrow no longer
   carries this chip: since round 1 of the desktop polish, 2026-10-12, it
   prints the hero's own FreqTier badge in the eyebrow's own voice.) */
.wpn-rel > .wpn-rank {
    align-self: center;
    min-width: 46px;
    text-align: right;
}
.wpn-rank b { font-weight: 600; color: var(--wpn-stone); }
/* ⚠ italic is the ROMAJI mark on this surface — a rarity band is not romaji.
   It earns its difference the way every other quiet fact here does: the
   page's own wider tracking, not a second convention. */
.wpn-rank.is-rare {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wpn-quiet);   /* same reason as .wpn-rank — #8a827b was 2.9:1 */
}

/* ── foot: the colophon ──────────────────────────────────────────────────
   ⛔ THE WORD'S 図録 DOOR IS GONE (owner ruling R3, 2026-08-07): "jump to word
   page we need remove cause user will not get anything more". The panel now
   carries the entry whole, so a line offering to open it again was offering
   nothing. Its own-page twin (.wpn-wfold, "you are on its page — close the
   panel") went with it: that arm existed only to stop the travel door
   travelling to itself, and a guard outlives nothing.
   ⚠️ .wpn-fullpage STAYS — the kanji glance's foot (js/word-panel.js:967-970,
   .wpn-kfull / .wpn-kfold) is the same markup and has no other dress. */

.wpn-foot { margin-top: 40px; }
.wpn-overlay .wpn-fullpage {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--wpn-rule);
    border-radius: 3px;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.wpn-overlay .wpn-fullpage:hover {
    border-color: color-mix(in srgb, var(--wpn-ink) 30%, transparent);
    background: rgba(58, 54, 51, 0.03);
}
.wpn-overlay .wpn-fullpage .jp { font: 500 14px var(--wpn-jp); color: var(--wpn-ink); }
.wpn-overlay .wpn-fullpage .tx {
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-overlay .wpn-fullpage .go {
    margin-left: auto;
    color: var(--wpn-ghost);
    transition: color 0.18s ease, transform 0.18s ease;
}
.wpn-overlay .wpn-fullpage:hover .go { color: var(--wpn-indigo); transform: translateX(2px); }
.wpn-colo {
    margin-top: 12px;
    font: 500 10.5px var(--wpn-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-colo .dim { color: var(--wpn-ghost); }

/* ── homecoming glow on the kanji page's reading row ─────────────────────── */

#kanjiPage .kjw-row.wpn-home {
    animation: wpnHome 1.1s ease-out;
}
@keyframes wpnHome {
    0% { background-color: color-mix(in srgb, var(--kjp-indigo, #3D5A80) 16%, transparent); }
    100% { background-color: transparent; }
}

/* ── responsive + reduced motion ─────────────────────────────────────────── */

@media (max-width: 768px) {
    /* a full-width sheet has no offscreen edge for a shadow to fall on, and
       the drawer's own breakpoint drops it for exactly that reason */
    .wpn-sheet { width: 100vw; border-left: none; border-right: 0; box-shadow: none; }
    .wpn-body { padding: 0 16px 56px; }
    .wpn-band { margin: 0 -16px 0; max-height: 44vh; }
    /* the kasumi band is full-bleed to the sheet edge, and the gutter is 16 here */
    .wpn-sec::before { left: -16px; right: -16px; }
    .wpn-sec { margin-top: 56px; }
    .wpn-entry > .wpn-sec:first-child { margin-top: 40px; }
    .wpn-overlay .wpn-anat { grid-template-columns: 62px minmax(0, 1fr); column-gap: 14px; }
    .wpn-overlay .wpn-anat .ak { font-size: 48px; }
    .wpn-ex-jp { font-size: 21px; }
    .wpn-story-body { font-size: 15.5px; }
}
@media (max-width: 560px) {
    /* the row retunes rather than crushing: a smaller plate, a smaller
       headword, and the rank column steps out (the drawer's own ≤560 rules) */
    .wpn-rel { gap: 11px; }
    .wpn-rel-chip { width: 66px; height: 47px; }
    .wpn-rel-tx .lw { font-size: 19px; }
    .wpn-rank { display: none; }
    /* the legend rail folds back over its rows — 68px of rail plus a 66px
       plate leaves the words nothing on a phone */
    .wpn-dict::before { display: none; }
    .wpn-rel-grp { grid-template-columns: 1fr; column-gap: 0; padding: 14px 0; }
    .wpn-rel-grp:not(:first-child)::before { left: 0; right: 0; }
    .wpn-rel-m { text-align: left; padding-right: 0; margin-bottom: 6px; }
    .wpn-rel-m .g, .wpn-rel-m .c { display: inline; }
    .wpn-rel-m .c { margin-left: 8px; }
    .wpn-reg-rung { grid-template-columns: 1fr; gap: 3px; }
    .wpn-reg-card { padding: 16px 16px 12px; }
}

/* A SCOPED BLANKET, not an allow-list. The enumerated version below had
   drifted exactly the way the kanji drawer's did before it gave up on the
   idea (css/kanji-page.css:1640): four hover translates, the affirm breath
   and the fold caret all still moved. Everything still LANDS on its end
   state — a near-zero duration, never `animation: none` over `opacity: 0`. */
@media (prefers-reduced-motion: reduce) {
    .wpn-overlay *,
    .wpn-overlay *::before,
    .wpn-overlay *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .wpn-sheet { transform: none; }
    .wpn-plate .art,
    .wpn-paint,
    .wpn-rel-chip img { opacity: 1; }
    #kanjiPage .kjw-row.wpn-home { animation: none; }
}