/* =============================================================================
 * kanji-grid.css — the Kanji-path browse TILE (Stage 1)
 * -----------------------------------------------------------------------------
 * A sibling of the gallery-wall word card: an etymology-painting band on top,
 * a placard below. The one honest departure from a word card is that the
 * placard LEADS with the character itself (large Klee glyph), because a kanji's
 * identity is its glyph, not a scene. No flip, no status buttons, no mastery
 * dot (progress is a later stage). Reuses the shared `.grid-card` outer for
 * grid flow + entrance animation; everything inside is self-contained here.
 * Design tokens: warm paper #FAFAF7 · sumi #2C2C2C · stone #57534e ·
 * kun indigo #3D5A80 · on terracotta #9E5E43 · kintsugi gold #C9A96E.
 * ============================================================================= */

.grid-card--kanji {
    cursor: pointer;
    display: block;
    /* The card's paper is the light paper, --color-card #FAFAF7: lighter than
       the room's ground at every hour (#EDEBE8 at night to #F4F1EC by day).
       It read var(--color-paper), which is the STONE #F0EDE8 (tokens.css), so
       the card sat a shade off the ground rather than on paper (desktop
       polish round 3, finding 12). */
    background: var(--color-card, #FAFAF7);
    border-radius: 8px;
    overflow: hidden;
    /* Cards rest, not float (design principle 5): a hairline + a soft seat,
       every layer inside the law's 3 to 6 per cent (they stood at 10 at rest
       and 18 under the pointer; round 3, finding 12). One seat, three
       states: the hover deepens it a step and the keyboard ring sits on
       whichever seat is showing, never a halo (finding 10). */
    --kjt-seat:
        0 0 0 1px rgba(44, 44, 44, 0.05),
        0 2px 8px -4px rgba(44, 44, 44, 0.06);
    box-shadow: var(--kjt-seat);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Neutralise any word-card 3D context — this tile has no flip faces. */
    perspective: none;
    transform-style: flat;
}

.grid-card--kanji:hover {
    --kjt-seat:
        0 0 0 1px rgba(44, 44, 44, 0.06),
        0 6px 16px -8px rgba(44, 44, 44, 0.06);
}

/* ONE RING (round 3, finding 10): the wall's one focus ring, 2px indigo 2px
   off the edge, over the card's own seat. base.css:309-318 paints a 4px halo
   under every focused .grid-card (0,2,0); the extra ancestor outranks it. */
.grid-cards .grid-card--kanji:focus-visible {
    outline: 2px solid var(--color-accent, #3D5A80);
    outline-offset: 2px;
    box-shadow: var(--kjt-seat);
}

.kjt-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Painting band — the kanji's own etymology art (owner: "serve kanji images"). */
.kjt-art {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #efece6;
    flex: 0 0 auto;
}
.kjt-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.grid-card--kanji:hover .kjt-art img { transform: scale(1.03); }

/* Flat tone wash, matching the word wall's imageless placeholder (no gradients) */
.kjt-art--empty {
    background: color-mix(in srgb, var(--color-accent, #3D5A80) 6%, #ece8e1);
}

/* Placard */
.kjt-body {
    padding: 13px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 auto;
}

.kjt-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

/* The lead: the character itself. */
.kjt-glyph {
    font: 400 clamp(44px, 4.4vw, 58px) 'Klee One', 'Noto Sans JP', serif;
    line-height: 0.95;
    color: var(--color-ink, #2C2C2C);
    flex: 0 0 auto;
}

.kjt-kw {
    font: 500 14.5px 'Inter', system-ui, sans-serif;
    color: var(--color-ink, #2C2C2C);
    line-height: 1.3;
    /* wrap gracefully next to the glyph */
    min-width: 0;
    align-self: center;
}

/* Readings at a glance — kun indigo, on terracotta (matches the detail card). */
.kjt-readings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: baseline;
}
.kjt-rgrp { display: inline-flex; align-items: baseline; gap: 4px; }
.kjt-rgrp--kun { --rd: var(--color-accent); }
.kjt-rgrp--on  { --rd: #9E5E43; }
.kjt-r {
    font: 600 14px 'Klee One', 'Noto Sans JP', sans-serif;
    color: var(--rd);
}
.kjt-ro {
    font: 400 11.5px 'Inter', system-ui, sans-serif;
    color: color-mix(in srgb, var(--rd) 62%, var(--color-stone));
    margin-left: 2px;
}
.kjt-rdot { color: #b3aca3; margin: 0 1px; }

/* A witnessed-only reading (wordless rooms — K6): the kana wears quiet stone,
   never the kun indigo / on terracotta of a citation claim, and the one word
   that proves it rides beside it ("きゃく as in 売却"). --rd MUST be set
   here: .kjt-r paints color: var(--rd), and an unset token is no ink at all. */
.kjt-rgrp--wit { --rd: var(--color-stone, #57534e); }
.kjt-rwit {
    font: 400 10.5px 'Inter', system-ui, sans-serif;
    color: #8a8378;
    letter-spacing: 0.02em;
}
.kjt-rwit [lang="ja"] {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #6e675c;
}

/* Meta — grade + strokes, quiet stone. */
.kjt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 1px;
    font: 500 11.5px 'Inter', system-ui, sans-serif;
    color: var(--color-stone, #57534e);
    letter-spacing: 0.01em;
}
.kjt-grade {
    color: color-mix(in srgb, var(--color-accent) 70%, var(--color-stone));
}

/* Denser at narrower widths (the grid can drop toward 2-up). */
@media (max-width: 560px) {
    .kjt-glyph { font-size: clamp(40px, 12vw, 52px); }
    .kjt-body { padding: 11px 13px 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .grid-card--kanji,
    .grid-card--kanji:hover .kjt-art img { transition: none; }
    .grid-card--kanji:hover { transform: none; }
}
/* The word-language Hide toggle means nothing on the kanji wall — it and its
   hairline step off with the path (grid-mode.js appends them unconditionally;
   this rule is what hides them here — restored after #748 deleted it along
   with the retired filter-strip selectors it shared a block with). */
body.kanji-path-active .tool-group-hide,
body.kanji-path-active .kamoi-div-tools { display: none !important; }

/* (The rule that hid the WORD status subtabs here is retired 2026-08-16 with
   the decks themselves — there is nothing left to exempt. The INTENT it
   encoded still holds and is now the whole app's law, not a kanji-wall
   exemption: browsing is looking, and word status means nothing on this
   wall. The room's name-board — the 蔵/道 line that shared row 2 with the
   subtabs — survives the retirement and rides the beam's left cluster; the
   rule that keeps a WORD scope's board off this wall lives beside the board
   in home-hall.css.) */

/* kun/on micro-tags on the browse tile's readings glance — the tag is what
   makes the row a DIFFERENT fact from the word-reading above it (the
   kanji's own readings, by family), not an echo. Same two inks as the
   kanji page's families: kun indigo, on terracotta. */
.kjt-rtag {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 1.5px 4px;
    border-radius: 3px;
    margin-right: 3px;
    align-self: center;
}
.kjt-rtag--kun { color: var(--color-accent); background: rgba(61, 90, 128, 0.09); }
.kjt-rtag--on  { color: #9E5E43; background: rgba(158, 94, 67, 0.10); }
/* The two toggle tabs reuse .path-tab; keep the Kanji label in the UI face. */

/* Filter panel: word sections hide in Kanji mode, kanji sections show. */
.kanji-sb-section { display: none; }
body.kanji-path-active .kanji-sb-section { display: block; }
/* 状 word status hides here too (2026-08-16): the kanji wall has run without
   a status term since #647 — step order, no deck buttons — and a word's
   New/Learning/Coming back/Resting says nothing about a kanji tile, which
   carries its own KanjiMastery record. The kanji sections above replace it. */
body.kanji-path-active #sidebarStatus,
body.kanji-path-active #sidebarFreq,
body.kanji-path-active #sidebarRegister,
body.kanji-path-active #sidebarLessons,
body.kanji-path-active #sidebarPOS,
body.kanji-path-active #sidebarCategories { display: none; }
/* ── 陽 room seal — the kanji tile's door to the character's sunlit room ────
   (陽, the first character of 陽だまり, on every door since desktop polish
   round 4, 14 October 2026; the tile wore 間 before.)
   The word card's seal (css/grid-mode.css .grid-card-room-seal) supplies the
   whole voice — paper disc, hover reveal on the card's wake beat. The kanji
   card has no audio button in its corner, so the door takes the corner itself
   (.kjt-inner is the tile's positioning context). */
.grid-card--kanji .kjt-inner { position: relative; }
.grid-card--kanji .kjt-room-seal { top: 10px; right: 10px; }