/* =============================================================================
 * 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;
    background: var(--color-paper, #FAFAF7);
    border-radius: 8px;
    overflow: hidden;
    /* Cards rest, not float (design principle 5): a hairline + a soft seat. */
    box-shadow:
        0 0 0 1px rgba(44, 44, 44, 0.05),
        0 2px 8px -4px rgba(44, 44, 44, 0.10);
    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 {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(44, 44, 44, 0.07),
        0 6px 16px -8px rgba(44, 44, 44, 0.18);
}

.grid-card--kanji:focus-visible {
    outline: 2px solid var(--color-accent, #3D5A80);
    outline-offset: 3px;
}

.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); }

.kjt-art--empty {
    background:
        radial-gradient(120% 100% at 50% 0%,
            color-mix(in srgb, var(--color-accent, #3D5A80) 8%, #efece6) 0%,
            #e8e4dd 100%);
}

/* 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: #3D5A80; }
.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%, #57534e);
    margin-left: 2px;
}
.kjt-rdot { color: #b3aca3; margin: 0 1px; }

/* 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, #3D5A80) 70%, #57534e);
}

/* 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; }
}

/* =============================================================================
   BEAM STATE + KANJI FILTER PANEL (Words | Kanji toggle, Stage 1)
   ============================================================================= */

/* In Kanji mode the word-only beam chrome steps off (Browse/Study, status
   subrow, word quick-filters, Hide). The "+ Filter" button STAYS — it opens the
   same panel, now showing the kanji facets. */
body.kanji-path-active #queueSegment,
body.kanji-path-active #pathKindDivider,
body.kanji-path-active #browseSubrow,
body.kanji-path-active .tool-group-hide,
body.kanji-path-active #filterPillRow,
body.kanji-path-active .filter-strip { display: none !important; }

/* The two toggle tabs reuse .path-tab; keep the Kanji label in the UI face. */
.pathkind-tab[lang="ja"] { font-family: 'Inter', system-ui, sans-serif; }

/* 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; }
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; }