/* ═══════════════════════════════════════════════════════════════════════════
   玄関 · home-hall.css — the desktop entrance hall (journey-gallery PR 2).
   Production port of design-mockups/desktop-home-genkan/home.css: ADDITIVE
   GLUE over the real design system. Everything structural on the wall
   (painting frame, placard, feature) resolves from tokens.css + grid-mode.css
   — the hall's wall carries the real .grid-cards / .grid-card-back-* classes.
   This file:
     (1) the hall OVERLAY — a level above the gallery; the room below stays
         mounted and untouched (body.home-hall gates it),
     (2) the BARE genkan beam (tokens only — deliberately not ink-wash-tabs'
         beam, which belongs to the gallery level),
     (3) journey hangings (nails, montage, hairline track, verb, ledger),
     (4) the 常設 doors — a deliberately DIFFERENT shape from journeys,
     (5) hall-only chrome the mockup lacked: the ⋯ manage popover and the
         道 journey-scope pill (which lives on the GALLERY beam).
   NO token/color redefinition — every value pulls from tokens.css.
   Desktop-gated by the <link media="(min-width: 769px)"> in index.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ THE OVERLAY — one opaque level above every room page overlay
   (word page 9000 / kanji sheet 9100 + drawer aside 9200 / 陽だまり room
   9050). The voice tutor sits at 5000 (chat-mode.css) — BELOW the hall — so
   the Practice door must always hide() before enterChatMode(), which it does;
   never show the hall over a live Sensei session. ═══ */
.home-hall-root {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--color-paper, #F0EDE8);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.home-hall-root[hidden] { display: none; }

/* The hall's wall shares the gallery container's metrics (grid-mode.css
   .grid-container) so paintings hang at the same scale on both levels. */
.hall-scroll {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 12px 40px 40px;
    box-sizing: border-box;
}
@media (min-width: 769px) and (max-width: 1440px) {
    .hall-scroll { padding-left: 24px; padding-right: 24px; }
}

/* ═══ REGION 1 · THE GENKAN BEAM ═══
   The gallery lintel's wood — floating washi panel — with almost nothing on
   it. Hierarchy by absence: brand, the collection search, the date. */
.genkan-beam {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 24px;
    pointer-events: none;
}
.gb-inner {
    max-width: 1800px;
    margin: 12px auto 0;
    height: 56px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
    background: var(--color-card, #FAFAF7);
    /* Washi grain — byte-matched to the gallery lintel's quieted texture */
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.012'/%3E%3C/svg%3E");
    border-radius: 12px;
    border-bottom: 1px solid rgba(44, 44, 44, 0.02);
    box-shadow: 0 1px 4px rgba(44,44,44,0.025), 0 0 1px rgba(44,44,44,0.03);
}
.gb-left { display: flex; align-items: center; gap: 14px; }
.gb-right { display: flex; align-items: center; gap: 12px; }

/* Brand — matches the gallery beam's logotype (tracked-caps Inter 12/500 @
   0.22em) so the two levels read as one building. Not a button: this IS home. */
.gb-brand { display: flex; align-items: center; gap: 10px; user-select: none; }
.gb-logo {
    width: 34px; height: 34px;
    display: block;
    border-radius: 50%;      /* the hanko seal is ROUND, as on the gallery beam */
    object-fit: cover;
}
.gb-wordmark {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-ink, #2C2C2C);
}

/* Search — the gallery's quiet resting field: leading glyph inside, ink
   hairline, focus widens + turns the hairline indigo. It names its
   destination — Enter jumps INTO the collection. */
.gb-search { position: relative; display: flex; align-items: center; }
.gb-search-glyph {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary, #8C8578);
    pointer-events: none;
    z-index: 1;
}
.gb-search-glyph svg { width: 15px; height: 15px; }
.gb-search-field {
    width: 230px;
    height: 34px;
    border: none;
    border-bottom: 1px solid rgba(44, 44, 44, 0.12);
    border-radius: 0;
    padding: 0 10px 0 38px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-ink, #2C2C2C);
    outline: none;
    transition: width 250ms var(--ink-ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
                border-color 250ms ease;
}
.gb-search-field:focus {
    width: 260px;
    border-bottom-color: rgba(61, 90, 128, 0.5);
}
.gb-search-field::placeholder { color: var(--text-tertiary, #8C8578); }

.gb-date {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text-tertiary, #8C8578);
}
.gb-date [lang="ja"] {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-stone, #57534e);
}
/* the beam's 今日 carries its romaji, same as every JP label in the house */
.gb-date .gb-date-r {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-style: italic; font-weight: 400;
    letter-spacing: 0.04em; text-transform: none;
    color: var(--color-amber-deep, #8A6E35);
    margin: 0 2px 0 -2px;
}

/* Sign in — the beam's one account affordance, shown only while signed OUT
   (the sync payoff needs a door at home); once signed in the hall goes bare
   again and account state lives in the rooms. Ghost voice, never a pill. */
.gb-signin {
    appearance: none;
    border: 1px solid rgba(44, 44, 44, 0.14);
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    padding: 6px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--color-stone, #57534e);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.gb-signin:hover { color: var(--color-ink, #2C2C2C); border-color: rgba(44, 44, 44, 0.28); transform: none; box-shadow: none; }
.gb-signin:focus-visible { outline: 2px solid var(--color-accent, #3D5A80); outline-offset: 2px; }
.gb-signin[hidden] { display: none; }

/* ── The hero at HOME spans the full row, capped for readability but
   LEFT-ANCHORED to the wall's own edge (one continuous wall — the hero shares
   the wall's left line with every section below it). ── */
.home-hall-root .grid-feature {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 1220px;
    margin: 8px 0 0;
    gap: 44px;
}
.home-hall-root .gf-art { flex: 0 0 54%; }
/* grid-mode.css removes the REAL wall's feature below 1280px (word cards flow
   beside it there and the two-column frame starves). The hall's hero has the
   whole row to itself at every desktop width — re-assert it, or the most-due
   journey vanishes from home on half-screen laptops. */
@media (min-width: 769px) and (max-width: 1279px) {
    .home-hall-root .grid-feature { display: flex; }
}

/* ── The hero's STANDING block — after the honest sentence, the placard
   states where you stand exactly the way every hung journey does (hairline
   track + verb line), scaled up for the feature. ── */
.gf-meta {
    display: flex;
    flex-direction: column;
    gap: 9px;              /* track + verb read as ONE standing unit… */
    margin-top: 8px;       /* …set apart from the sentence above */
    max-width: 420px;      /* a hairline gesture, not a dashboard bar */
}
.home-hall-root .grid-feature .jhang-verb { font-size: 11px; }
.home-hall-root .grid-feature .jhang-verb [lang="ja"] { font-size: 13px; }
.home-hall-root .grid-feature .jhang-verb .jhang-frac { font-size: 13px; }
.home-hall-root .grid-feature .jhang-verb.is-revisit .jhang-dot { width: 6px; height: 6px; }

/* romaji beside the eyebrow's JP (beginner-romaji rule) — italic, lowercase,
   in the pronunciation layer's amber */
.gf-eyebrow .gf-eyebrow-romaji {
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-amber-deep, #8A6E35);
}
/* A user-composed journey may carry a Latin name — Klee sets Latin poorly. */
.home-hall-root .gf-jp.hall-title-latin {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ═══ A HUNG JOURNEY PIECE ═══ (byte-identical to a resting word painting:
   reuses .grid-card-back-image + the .grid-card-back-* placard classes; the
   wrapper gives it the wall height and stacks the placard beneath). */
.jhang {
    height: var(--wall-card-h, 480px);
    display: flex;
    flex-direction: column;
    padding: 0 var(--wall-pad, 8px);
    box-sizing: border-box;
    cursor: pointer;
    animation: cardEntrance 0.7s var(--ease-out-expo, cubic-bezier(0.19,1,0.22,1)) backwards;
    animation-delay: calc((var(--card-i, 0) + 1) * 0.05s);
}
/* Cards REST — no lift/scale on the box; only the MAIN painting breathes
   (in a montage the two small pieces stay still: one living print per frame). */
.jhang:hover .grid-card-back-image > img,
.jhang:hover .jh-main img { transform: scale(1.035); }
.jhang .grid-card-back-image { flex: 0 0 auto; background-size: cover; background-position: center; }
.jhang .grid-card-back-header { padding-right: 40px; position: relative; }

/* ── THE MONTAGE COVER — a journey is a SET of paintings, and its cover says
   so: one main piece + two smaller, mounted with 2px seams that read as the
   mat between prints (seam color = the frame's own tone wash). ── */
.jh-cover.jh-montage {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
}
.jh-montage figure { margin: 0; position: relative; overflow: hidden; }
.jh-montage .jh-main { flex: 1 1 auto; min-width: 0; height: 100%; }
.jh-montage .jh-side {
    flex: 0 0 31%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.jh-montage .jh-piece { flex: 1 1 50%; min-height: 0; }
.jh-montage figure img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* A user-named journey may carry a Latin name — Inter at a matched size. */
.jhang .grid-card-back-japanese.jh-title-latin {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── THE JOURNEY SUBTITLE — descriptive wall text, its own species (the word
   card's English is the flashcard ANSWER; a journey's gloss only describes,
   so it steps back: smaller, stone, two lines then ellipsis). ── */
.jh-gloss {
    flex: 0 0 auto;
    margin-top: 3px;
    padding: 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-stone, #57534e);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The four corner-dot "nails" — the hung signal. Warm sumi-brown, never gold. */
.jhang-nail,
.gf-art .jhang-nail {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(74, 58, 42, 0.55);
    z-index: 4;
    pointer-events: none;
}
.jhang-nail.n-tl { top: 4px; left: 4px; }
.jhang-nail.n-tr { top: 4px; right: 4px; }
.jhang-nail.n-bl { bottom: 4px; left: 4px; }
.jhang-nail.n-br { bottom: 4px; right: 4px; }

/* Slim journey meta: 1px progress hairline (learned=moss, saved=sumi — never
   gold) + verb + honest ledger, pinned to the placard's foot. */
.jhang-meta {
    margin-top: auto;
    padding: 8px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jhang-track {
    position: relative;
    height: 1px; width: 100%;
    background: rgba(44, 44, 44, 0.10);
    border-radius: 1px;
    overflow: hidden;
}
.jhang-fill-learned {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--color-moss, #6B7F5C);   /* full moss — a 1px line needs its pigment */
}
.jhang-fill-saved {
    position: absolute; top: 0; bottom: 0;
    background: rgba(44, 44, 44, 0.38);
}
/* On the hero the same track scales up a step — 2px so it reads as standing. */
.home-hall-root .grid-feature .jhang-track { height: 2px; border-radius: 2px; }

/* THE ACTION VERB — one unambiguous word per hung piece.
   START (new) · CONTINUE n/m (in progress) · TO REVISIT n (review debt). */
.jhang-verb {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-ink, #2C2C2C);
}
.jhang-verb [lang="ja"] {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
}
.jhang-verb .jhang-frac { font-size: 12px; letter-spacing: 0; }
.jhang-verb .jhang-slash { color: var(--text-tertiary, #8C8578); margin: 0 1px; }
.jhang-verb.is-new { color: var(--text-tertiary, #8C8578); font-weight: 500; }
.jhang-verb.is-new [lang="ja"] { color: var(--text-tertiary, #8C8578); }
.jhang-verb.is-progress .jhang-frac { color: var(--color-ink, #2C2C2C); }
.jhang-verb.is-revisit { color: var(--color-accent, #3D5A80); }
.jhang-verb.is-revisit [lang="ja"] { color: var(--color-accent, #3D5A80); }
.jhang-verb.is-revisit .jhang-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-accent, #3D5A80);
    align-self: center;
    flex: none;
}

/* THE HONEST LEDGER — where a beginner actually stands. */
.jhang-ledger {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary, #8C8578);
}
.jhang-ledger b { font-weight: 700; color: var(--color-stone, #57534e); }

/* Components.css dresses EVERY bare <button> as a raised white pill
   (background:white, 9×18 padding, drop shadow, hover translateY lift).
   The hall's controls are quiet ghost utilities — re-assert flat here, or
   the ⋯ renders as an empty lozenge (the 18px side padding leaves a 30px
   border-box button zero content width, collapsing the svg to 0). */
.jh-manage, .journey-scope-pill .jsp-clear, .hall-pop .hp-row, .hall-pop .hp-btn {
    padding: 0;
    box-shadow: none;
}
.jh-manage:hover, .journey-scope-pill .jsp-clear:hover,
.hall-pop .hp-row:hover, .hall-pop .hp-btn:hover,
.jh-manage:active, .journey-scope-pill .jsp-clear:active,
.hall-pop .hp-row:active, .hall-pop .hp-btn:active {
    transform: none;
    box-shadow: none;
}

/* ── the ⋯ manage handle — the placard's quiet corner utility (ghost wash,
   wakes on hover; sits in the header's cleared right column). ── */
.jh-manage {
    appearance: none;
    background: transparent;
    border: none;
    border-radius: 8px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-tertiary, #8C8578);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.jh-manage svg { width: 15px; height: 15px; flex: none; display: block; }
.jhang .jh-manage { position: absolute; right: 0; top: 12px; }
.gf-eyebrow .jh-manage { margin-left: auto; align-self: center; }
.jhang:hover .jh-manage, .grid-feature:hover .jh-manage { opacity: 1; }
.jh-manage:hover { background: rgba(140, 133, 120, 0.10); color: var(--color-stone, #57534e); }
.jh-manage:focus-visible { opacity: 1; outline: 2px solid rgba(61, 90, 128, 0.55); outline-offset: 2px; }

/* ── the manage POPOVER — a small washi panel (What's in this · Rename ·
   Reset progress · Remove; Edit scope arrives with the PR-5 bench). ── */
.hall-pop {
    position: absolute;
    z-index: 300;
    width: 280px;
    background: var(--color-card, #FAFAF7);
    border: 1px solid rgba(44, 44, 44, 0.08);
    border-radius: 10px;
    box-shadow: 0 6px 24px -8px rgba(44, 44, 44, 0.18), 0 2px 6px rgba(44, 44, 44, 0.06);
    padding: 10px;
    box-sizing: border-box;
}
.hp-head {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-ink, #2C2C2C);
    padding: 4px 6px 10px;
    line-height: 1.4;
}
.hp-row {
    appearance: none; background: none; border: none;
    display: block; width: 100%; text-align: left;
    padding: 8px 6px;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.hp-row b { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-ink, #2C2C2C); }
.hp-row span { display: block; font-size: 11px; color: var(--text-tertiary, #8C8578); margin-top: 1px; }
.hp-row:hover { background: rgba(140, 133, 120, 0.08); }
.hp-row:focus-visible { outline: 2px solid rgba(61, 90, 128, 0.55); outline-offset: -2px; }
.hp-row.hp-danger b { color: var(--color-terracotta, #A35A4A); }   /* mobile's Remove row wears the same token */
.hp-note {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-stone, #57534e);
    padding: 0 6px 10px;
}
.hp-input {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    margin: 0 0 10px;
    padding: 0 10px;
    border: none;
    border-bottom: 1px solid rgba(44, 44, 44, 0.16);
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--color-ink, #2C2C2C);
    outline: none;
}
.hp-input:focus { border-bottom-color: rgba(61, 90, 128, 0.5); }
.hp-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 2px 2px 0; }
.hp-btn {
    appearance: none; border: none; cursor: pointer;
    background: transparent;
    border-radius: 7px;
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-stone, #57534e);
}
.hp-btn:hover { background: rgba(140, 133, 120, 0.08); }
.hp-btn.hp-primary { background: var(--color-accent, #3D5A80); color: var(--color-card, #FAFAF7); }
.hp-btn.hp-primary:hover { background: color-mix(in srgb, var(--color-accent, #3D5A80) 88%, #000); }
.hp-btn.hp-danger-btn { color: var(--color-terracotta, #A35A4A); }
.hp-btn.hp-danger-btn:hover { background: rgba(163, 90, 74, 0.08); }
.hp-btn:focus-visible, .hp-input:focus-visible { outline: 2px solid rgba(61, 90, 128, 0.55); outline-offset: 1px; }
.hp-sgrp { padding: 2px 6px 8px; }
.hp-slabel {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-tertiary, #8C8578);
    margin-bottom: 3px;
}
.hp-srow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--color-ink, #2C2C2C);
    line-height: 1.5;
}
.hp-srow [lang="ja"] { font-family: 'Klee One', 'Noto Sans JP', sans-serif; }
.hp-srow i { font-style: normal; color: var(--text-tertiary, #8C8578); margin-left: 6px; font-size: 11px; }
.hp-foot {
    font-family: 'Inter', sans-serif;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-tertiary, #8C8578);
    padding: 4px 6px 2px;
}

/* ── A SOFT IN-WALL SECTION LABEL — the wall's own typographic voice: Klee
   ink JP, italic amber romaji, whisper caps, a hairline fading rightward.
   Margins rebalance the wall's 52px row-gap: generous above, negative below
   (a label belongs to what it names). ── */
.wall-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 44px var(--wall-pad, 8px) -22px;
    animation: cardEntrance 0.6s var(--ease-out-expo, cubic-bezier(0.19,1,0.22,1)) backwards;
    animation-delay: calc((var(--card-i, 0) + 1) * 0.05s);
}
.wall-section .ws-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-ink, #2C2C2C);
    letter-spacing: 0.1em;
    font-feature-settings: 'palt' 1;
    line-height: 1;
}
.wall-section .ws-romaji {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--color-amber-deep, #8A6E35);
}
.wall-section .ws-en {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary, #8C8578);
}
.wall-section .ws-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(44, 44, 44, 0.10) 0%,
        rgba(44, 44, 44, 0.07) 55%,
        transparent 96%);
    align-self: center;
    margin-left: 10px;
}

/* Zero-journey hall (pre-PR-3, the shelves add the desktop add-path) */
.hall-empty-note {
    grid-column: 1 / -1;
    padding: 34px var(--wall-pad, 8px) 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-stone, #57534e);
    max-width: 560px;
}

/* ═══ 常設 · THE PERMANENT ROOMS — doors, not journeys ═══
   Wide and horizontal where journeys are tall; no nails, no progress
   hairline; ENTER/BROWSE/PRACTICE verbs. A door shows a glimpse of its room. */
.genkan-doors {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    margin: 0 var(--wall-pad, 8px) 72px;
    animation: cardEntrance 0.7s var(--ease-out-expo, cubic-bezier(0.19,1,0.22,1)) backwards;
    animation-delay: calc((var(--card-i, 0) + 1) * 0.05s);
}
.gdoor {
    display: flex;
    align-items: stretch;
    min-height: 150px;
    background: var(--color-card, #FAFAF7);
    border: 1px solid rgba(44, 44, 44, 0.07);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(44, 44, 44, 0.04);   /* warm sumi, never cold black */
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.gdoor:hover {
    border-color: rgba(44, 44, 44, 0.16);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(44, 44, 44, 0.06);
}

/* The glimpse through the door; the inset shadow along the right edge is the
   wall's thickness — the depth cue that makes a panel read as an OPENING.
   On hover the window widens a crack — the shared threshold gesture. */
.gdoor-art {
    flex: 0 0 134px;
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-paper, #F0EDE8) 94%, var(--color-ink, #2C2C2C));
    border-right: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: inset -5px 0 6px -6px rgba(44, 44, 44, 0.14);
    transition: flex-basis 0.45s var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1));
}
.gdoor:hover .gdoor-art { flex-basis: 148px; }

/* Collection — a sliver of the real wall: two stacked thumbnails drifting
   one after the other (60ms apart), a wall passing behind a doorway. */
.gdoor-art-thumbs { display: flex; flex-direction: column; height: 100%; }
.gdoor-art-thumbs img {
    flex: 1 1 50%;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-out-expo, cubic-bezier(0.19,1,0.22,1));
}
.gdoor-art-thumbs img + img { transition-delay: 60ms; }
.gdoor:hover .gdoor-art-thumbs img { transform: scale(1.05); }

/* Kanji wing — ONE standing ink form, whole and unhurried; an echo behind. */
.gdoor-art-ink { position: relative; height: 100%; }
.gdoor-art-ink .gk-hero {
    position: absolute;
    right: 14px;
    bottom: 16px;
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-ink, #2C2C2C);
    opacity: 0.8;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.gdoor-art-ink .gk-echo {
    position: absolute;
    top: 12px;
    left: 14px;
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    line-height: 1;
    color: var(--color-ink, #2C2C2C);
    opacity: 0.26;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.gdoor:hover .gk-hero { opacity: 0.92; }
.gdoor:hover .gk-echo { opacity: 0.4; }

/* Practice hall — the tutor's resting orb: one quiet breathing circle with a
   soft outer halo. Hover wakes it a shade. */
.gdoor-art-orb { height: 100%; display: flex; align-items: center; justify-content: center; }
.gdoor-art-orb i {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%,
        color-mix(in srgb, var(--color-accent, #3D5A80) 38%, var(--color-paper, #F0EDE8)),
        color-mix(in srgb, var(--color-accent, #3D5A80) 14%, var(--color-paper, #F0EDE8)) 72%);
    border: 1px solid color-mix(in srgb, var(--color-accent, #3D5A80) 34%, transparent);
    animation: gdoorBreathe 5.5s ease-in-out infinite;
    transition: border-color 0.35s ease, filter 0.35s ease;
}
.gdoor-art-orb i::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--color-accent, #3D5A80) 14%, transparent);
    transition: inset 0.35s ease, border-color 0.35s ease;
}
.gdoor:hover .gdoor-art-orb i {
    border-color: color-mix(in srgb, var(--color-accent, #3D5A80) 50%, transparent);
    filter: saturate(1.15);
}
.gdoor:hover .gdoor-art-orb i::after {
    inset: -12px;
    border-color: color-mix(in srgb, var(--color-accent, #3D5A80) 22%, transparent);
}
@keyframes gdoorBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

.gdoor-body {
    flex: 1;
    min-width: 0;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gdoor-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-ink, #2C2C2C);
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.gdoor-romaji {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-style: italic;
    color: var(--color-amber-deep, #8A6E35);
}
.gdoor-en {
    margin-top: 3px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--color-stone, #57534e);
}
.gdoor-ledger {
    margin-top: auto;
    padding-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary, #8C8578);
}
.gdoor-ledger b { font-weight: 700; color: var(--color-stone, #57534e); }
.gdoor-ledger span { white-space: nowrap; }   /* wrap between segments, never inside one */
.gdoor-verb {
    margin-top: 5px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-ink, #2C2C2C);
    transition: color 0.2s ease;
}
.gdoor-verb [lang="ja"] {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
}
.gdoor-verb .gdoor-arrow {
    font-family: 'Inter', sans-serif;
    transition: transform 0.3s var(--ease-out-expo, cubic-bezier(0.19,1,0.22,1));
    display: inline-block;
}
.gdoor:hover .gdoor-verb { color: var(--color-accent, #3D5A80); }
.gdoor:hover .gdoor-verb .gdoor-arrow { transform: translateX(3px); }

/* ── the hall's quiet toast (grade-echo voice) ── */
.hall-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    background: var(--color-ink, #2C2C2C);
    color: var(--color-card, #FAFAF7);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    padding: 9px 18px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(44, 44, 44, 0.14);
    z-index: 9600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.hall-toast.show { opacity: 0.94; }
.hall-toast[hidden] { display: none; }

/* ═══ THE 道 SCOPE PILL — lives on the GALLERY beam while a journey's wall is
   open. Same voice as the beam's quiet chips: JP token, amber romaji, name,
   and one ✕ back to every word. ═══ */
.journey-scope-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    height: 28px;
    padding: 0 4px 0 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-accent, #3D5A80) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent, #3D5A80) 22%, transparent);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}
.journey-scope-pill .jsp-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: var(--color-accent, #3D5A80);
    line-height: 1;
}
.journey-scope-pill .jsp-romaji {
    font-size: 10px;
    font-style: italic;
    color: var(--color-amber-deep, #8A6E35);
}
.journey-scope-pill .jsp-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink, #2C2C2C);
    overflow: hidden;
    text-overflow: ellipsis;
}
.journey-scope-pill .jsp-clear {
    appearance: none; border: none; cursor: pointer;
    background: transparent;
    width: 22px; height: 22px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    color: var(--color-stone, #57534e);
}
.journey-scope-pill .jsp-clear:hover { background: rgba(140, 133, 120, 0.12); }
.journey-scope-pill .jsp-clear:focus-visible { outline: 2px solid rgba(61, 90, 128, 0.55); outline-offset: 1px; }
/* The scope is a WORD-wall lens; the kanji wing ignores it (kanji journeys
   arrive in PR 4). Hide the pill there rather than let it claim a wall it
   doesn't narrow — it returns the moment the Words path is back. */
body.kanji-path-active .journey-scope-pill { display: none; }

/* ═══ KEYBOARD — every walkable piece answers focus with the gallery's own
   quiet ring. ═══ */
.jhang:focus-visible {
    outline: 1.5px solid rgba(61, 90, 128, 0.45);
    outline-offset: 4px;
    border-radius: 6px;
}
.gdoor:focus-visible {
    outline: 1.5px solid rgba(61, 90, 128, 0.45);
    outline-offset: 3px;
}

/* Honor reduced motion: no entrance stagger, no breathing, doors stay still. */
@media (prefers-reduced-motion: reduce) {
    .jhang, .wall-section, .genkan-doors { animation: none; }
    .jhang:hover .grid-card-back-image img,
    .home-hall-root .grid-feature:hover .gf-art img,
    .gdoor:hover .gdoor-art-thumbs img { transform: none; }
    .gdoor-art { transition: none; }
    .gdoor:hover .gdoor-art { flex-basis: 134px; }
    .gdoor-art-thumbs img { transition: none; }
    .gdoor-art-orb i { animation: none; transition: none; }
    .gdoor-verb .gdoor-arrow { transition: none; }
}