/*
 * Kanjitopia shared visual contract.
 *
 * "washitsu-tokonoma" combines two layers:
 * - painter layer from japanese-culture.html: paper, ink, warm wood, tatami,
 *   muted green, calm contrast, and textured room background.
 * - carpenter layer from the tokonoma cards: clean thin frames, square paper
 *   panels, and generous space. Page-local CSS may keep layout mechanics, but
 *   this file owns the final visual skin.
 */
:root {
    --kt-washitsu-ink:#1f2b34;
    --kt-washitsu-muted:#5f564b;
    --kt-washitsu-muted-light:#746a5d;
    --kt-washitsu-indigo:#214f70;
    --kt-washitsu-beni:#a73c49;
    --kt-washitsu-paper:#fffaf0;
    --kt-washitsu-paper-soft:#f7efdf;
    --kt-washitsu-wall:#d8ceb1;
    --kt-washitsu-tatami:#c8c49c;
    --kt-washitsu-wood:#7b4e2f;
    --kt-washitsu-line:#cfb88f;
    --kt-washitsu-shadow:rgba(74,55,35,.10);
    --kt-font-heading:"IBM Plex Sans","Noto Sans JP",sans-serif;
    --kt-font-body:"IBM Plex Sans","Noto Sans JP",sans-serif;
}

body[data-page-design="washitsu-tokonoma"],
body.kt-washitsu {
    color:var(--kt-washitsu-ink);
    font-family:var(--kt-font-body);
    background:
        linear-gradient(90deg,rgba(76,58,37,.028) 0 1px,transparent 1px 100%),
        linear-gradient(180deg,var(--kt-washitsu-paper-soft) 0%,#fbf7ed 42%,#e8dfc4 100%) !important;
    background-size:89px 89px,auto;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
    isolation:isolate;
}

body[data-page-design="washitsu-tokonoma"] .print-field,
body.kt-washitsu .print-field {
    display:none !important;
}

body[data-page-design="washitsu-tokonoma"]::before,
body.kt-washitsu::before {
    content:"";
    position:fixed;
    inset:70px 0 0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(180deg,rgba(255,250,239,.78),rgba(255,250,239,0) 36%),
        repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 72px,rgba(95,76,54,.08) 72px 75px,rgba(255,255,255,.2) 75px 146px),
        linear-gradient(90deg,rgba(123,78,47,.28) 0 14px,transparent 14px calc(100% - 14px),rgba(123,78,47,.25) calc(100% - 14px)),
        radial-gradient(circle at 86% 19%,rgba(104,139,106,.18),transparent 24%),
        linear-gradient(180deg,transparent 0 58%,rgba(200,196,156,.44) 58% 100%),
        repeating-linear-gradient(90deg,rgba(123,78,47,.16) 0 3px,transparent 3px 98px),
        repeating-linear-gradient(0deg,transparent 0 87px,rgba(91,70,44,.16) 87px 91px);
    opacity:.92;
}

body[data-page-design="washitsu-tokonoma"]::after,
body.kt-washitsu::after {
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:clamp(82px,14vh,150px);
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,transparent 0 10%,rgba(123,78,47,.18) 10% 10.6%,transparent 10.6% 44%,rgba(123,78,47,.16) 44% 44.6%,transparent 44.6% 76%,rgba(123,78,47,.16) 76% 76.6%,transparent 76.6%),
        linear-gradient(180deg,rgba(200,196,156,.18),rgba(185,178,131,.5));
    border-top:1px solid rgba(91,70,44,.16);
}

body[data-page-design="washitsu-tokonoma"] > header,
body[data-page-design="washitsu-tokonoma"] > main,
body[data-page-design="washitsu-tokonoma"] > footer,
body[data-page-design="washitsu-tokonoma"] > .view-panel,
body[data-page-design="washitsu-tokonoma"] > .home-container,
body.kt-washitsu > header,
body.kt-washitsu > main,
body.kt-washitsu > footer,
body.kt-washitsu > .view-panel,
body.kt-washitsu > .home-container {
    position:relative;
    z-index:1;
}

body[data-page-design="washitsu-tokonoma"] h1,
body[data-page-design="washitsu-tokonoma"] h2,
body[data-page-design="washitsu-tokonoma"] h3,
body[data-page-design="washitsu-tokonoma"] h4,
body.kt-washitsu h1,
body.kt-washitsu h2,
body.kt-washitsu h3,
body.kt-washitsu h4 {
    font-family:var(--kt-font-heading);
    font-weight:500;
    letter-spacing:.01em;
    color:#283b35;
    text-shadow:none;
}

body[data-page-design="washitsu-tokonoma"] .zen-header,
body.kt-washitsu .zen-header {
    background:rgba(255,250,240,.94) !important;
    border-bottom:1px solid rgba(87,63,37,.2);
    box-shadow:0 5px 18px rgba(68,54,40,.045);
    z-index:40 !important;
}

body[data-page-design="washitsu-tokonoma"] .brand-logo,
body.kt-washitsu .brand-logo {
    color:var(--kt-washitsu-indigo);
    font-family:var(--kt-font-heading);
    font-weight:600;
    text-shadow:none;
}

body[data-page-design="washitsu-tokonoma"] .brand-logo span,
body.kt-washitsu .brand-logo span {
    color:var(--kt-washitsu-beni);
    font-weight:400;
}

body[data-page-design="washitsu-tokonoma"] .nav-item,
body[data-page-design="washitsu-tokonoma"] .nav-group-trigger,
body.kt-washitsu .nav-item,
body.kt-washitsu .nav-group-trigger {
    color:#655b50;
    font-weight:600;
}

body[data-page-design="washitsu-tokonoma"] .nav-group-menu,
body.kt-washitsu .nav-group-menu {
    border-color:rgba(72,54,39,.16);
    background:rgba(255,250,239,.97);
    box-shadow:0 16px 32px rgba(68,54,40,.14);
    z-index:45;
}

body[data-page-design="washitsu-tokonoma"] .nav-group-menu .nav-item:hover,
body[data-page-design="washitsu-tokonoma"] .nav-group-menu .nav-item.active,
body.kt-washitsu .nav-group-menu .nav-item:hover,
body.kt-washitsu .nav-group-menu .nav-item.active {
    color:#7d3040;
    background:#f4e3d3;
}

body[data-page-design="washitsu-tokonoma"] .nav-shop,
body.kt-washitsu .nav-shop {
    color:#fff8e9;
    background:var(--kt-washitsu-muted) !important;
}

body[data-page-design="washitsu-tokonoma"] main,
body.kt-washitsu main {
    font-family:var(--kt-font-body);
}

body[data-page-design="washitsu-tokonoma"] footer,
body.kt-washitsu footer {
    background:rgba(255,248,232,.68) !important;
    border-top:1px solid rgba(91,70,44,.18) !important;
    color:#6d6256 !important;
}

body[data-page-design="washitsu-tokonoma"] .washitsu-page,
body.kt-washitsu .washitsu-page {
    min-height:calc(100vh - 70px);
    padding-inline:clamp(14px,4vw,62px);
}

body[data-page-design="washitsu-tokonoma"] .view-panel,
body[data-page-design="washitsu-tokonoma"] main:not(.washitsu-page),
body[data-page-design="washitsu-tokonoma"] .home-container,
body[data-page-design="washitsu-tokonoma"] .dashboard-container,
body[data-page-design="washitsu-tokonoma"] .intro,
body[data-page-design="washitsu-tokonoma"] .path,
body.kt-washitsu .view-panel,
body.kt-washitsu main:not(.washitsu-page),
body.kt-washitsu .home-container,
body.kt-washitsu .dashboard-container,
body.kt-washitsu .intro,
body.kt-washitsu .path {
    position:relative;
}

body[data-page-design="washitsu-tokonoma"] .view-panel.active-view,
body[data-page-design="washitsu-tokonoma"] .home-hero,
body[data-page-design="washitsu-tokonoma"] main:not(.washitsu-page),
body.kt-washitsu .view-panel.active-view,
body.kt-washitsu .home-hero,
body.kt-washitsu main:not(.washitsu-page) {
    background:rgba(255,250,240,.72) !important;
    border-color:rgba(91,70,44,.14);
}

body[data-page-design="washitsu-tokonoma"] .card,
body[data-page-design="washitsu-tokonoma"] .home-tool-card,
body[data-page-design="washitsu-tokonoma"] .learning-path-card,
body[data-page-design="washitsu-tokonoma"] .showcase-card,
body[data-page-design="washitsu-tokonoma"] .tool-card,
body[data-page-design="washitsu-tokonoma"] .tutorial-card,
body[data-page-design="washitsu-tokonoma"] .stage-card,
body[data-page-design="washitsu-tokonoma"] .player-stage,
body[data-page-design="washitsu-tokonoma"] .kotowaza-card,
body[data-page-design="washitsu-tokonoma"] .kana-section,
body[data-page-design="washitsu-tokonoma"] .paper-stage,
body[data-page-design="washitsu-tokonoma"] .story-panel,
body[data-page-design="washitsu-tokonoma"] .story-bridge,
body[data-page-design="washitsu-tokonoma"] .sound-stage,
body[data-page-design="washitsu-tokonoma"] .copy,
body[data-page-design="washitsu-tokonoma"] .section,
body[data-page-design="washitsu-tokonoma"] .next-card,
body[data-page-design="washitsu-tokonoma"] .hero-copy,
body[data-page-design="washitsu-tokonoma"] .culture-panel,
body[data-page-design="washitsu-tokonoma"] .cta,
body.kt-washitsu .card,
body.kt-washitsu .home-tool-card,
body.kt-washitsu .learning-path-card,
body.kt-washitsu .showcase-card,
body.kt-washitsu .tool-card,
body.kt-washitsu .tutorial-card,
body.kt-washitsu .stage-card,
body.kt-washitsu .player-stage,
body.kt-washitsu .kotowaza-card,
body.kt-washitsu .kana-section,
body.kt-washitsu .paper-stage,
body.kt-washitsu .story-panel,
body.kt-washitsu .story-bridge,
body.kt-washitsu .sound-stage,
body.kt-washitsu .copy,
body.kt-washitsu .section,
body.kt-washitsu .next-card,
body.kt-washitsu .hero-copy,
body.kt-washitsu .culture-panel,
body.kt-washitsu .cta {
    border-color:rgba(91,70,44,.2) !important;
    background:rgba(255,250,240,.9) !important;
    box-shadow:0 13px 34px var(--kt-washitsu-shadow) !important;
}

body[data-page-design="washitsu-tokonoma"] .hero-copy,
body[data-page-design="washitsu-tokonoma"] .culture-panel,
body[data-page-design="washitsu-tokonoma"] .cta,
body.kt-washitsu .hero-copy,
body.kt-washitsu .culture-panel,
body.kt-washitsu .cta {
    border-left:1px solid rgba(91,70,44,.2) !important;
    border-radius:8px !important;
}

body[data-page-design="washitsu-tokonoma"] .culture-panel:nth-child(even),
body.kt-washitsu .culture-panel:nth-child(even) {
    border-left-color:rgba(91,70,44,.2) !important;
}

body[data-page-design="washitsu-tokonoma"] .home-pathway,
body[data-page-design="washitsu-tokonoma"] .home-alcove,
body[data-page-design="washitsu-tokonoma"] .home-garden,
body[data-page-design="washitsu-tokonoma"] .home-showcase,
body[data-page-design="washitsu-tokonoma"] .culture-pillar,
body[data-page-design="washitsu-tokonoma"] .badge-tool,
body[data-page-design="washitsu-tokonoma"] .category-badge,
body[data-page-design="washitsu-tokonoma"] .tab-btn,
body[data-page-design="washitsu-tokonoma"] .filter-btn,
body[data-page-design="washitsu-tokonoma"] .type-btn,
body[data-page-design="washitsu-tokonoma"] .tutorial-play,
body[data-page-design="washitsu-tokonoma"] .open-tool,
body[data-page-design="washitsu-tokonoma"] .open-button,
body[data-page-design="washitsu-tokonoma"] .next-button,
body.kt-washitsu .home-pathway,
body.kt-washitsu .home-alcove,
body.kt-washitsu .home-garden,
body.kt-washitsu .home-showcase,
body.kt-washitsu .culture-pillar,
body.kt-washitsu .badge-tool,
body.kt-washitsu .category-badge,
body.kt-washitsu .tab-btn,
body.kt-washitsu .filter-btn,
body.kt-washitsu .type-btn,
body.kt-washitsu .tutorial-play,
body.kt-washitsu .open-tool,
body.kt-washitsu .open-button,
body.kt-washitsu .next-button {
    border-color:rgba(91,70,44,.2) !important;
    box-shadow:none;
}

body[data-page-design="washitsu-tokonoma"] .home-alcove,
body[data-page-design="washitsu-tokonoma"] .home-garden,
body[data-page-design="washitsu-tokonoma"] .home-pathway,
body[data-page-design="washitsu-tokonoma"] .home-showcase,
body[data-page-design="washitsu-tokonoma"] .culture-pillar,
body.kt-washitsu .home-alcove,
body.kt-washitsu .home-garden,
body.kt-washitsu .home-pathway,
body.kt-washitsu .home-showcase,
body.kt-washitsu .culture-pillar {
    border:1px solid rgba(91,70,44,.2) !important;
    border-left:1px solid rgba(91,70,44,.2) !important;
    border-top:1px solid rgba(91,70,44,.2) !important;
    border-radius:8px !important;
    background:rgba(255,250,240,.86) !important;
    box-shadow:0 13px 34px var(--kt-washitsu-shadow) !important;
}

body[data-page-design="washitsu-tokonoma"] .filter-btn.active,
body[data-page-design="washitsu-tokonoma"] .tab-btn.active,
body[data-page-design="washitsu-tokonoma"] .type-btn.active,
body[data-page-design="washitsu-tokonoma"] .btn,
body[data-page-design="washitsu-tokonoma"] .home-action.primary,
body[data-page-design="washitsu-tokonoma"] .open-button,
body[data-page-design="washitsu-tokonoma"] .next-button,
body[data-page-design="washitsu-tokonoma"] .cta a,
body.kt-washitsu .filter-btn.active,
body.kt-washitsu .tab-btn.active,
body.kt-washitsu .type-btn.active,
body.kt-washitsu .btn,
body.kt-washitsu .home-action.primary,
body.kt-washitsu .open-button,
body.kt-washitsu .next-button,
body.kt-washitsu .cta a {
    background:var(--kt-washitsu-muted) !important;
    border-color:var(--kt-washitsu-muted) !important;
    color:#fff8e9 !important;
}

/* Exception: Kanji-Navi's left kanji-index rows reuse .btn for click/focus
   behaviour, but they're a dense scrollable list, not a CTA — the dark
   primary-action fill above made them too dark and washed out the 音/訓
   reading text. .btn-quick is the only thing combining .btn with this class,
   so this is safe to scope narrowly. Only the selected row (.active) gets
   the wall-tone highlight; every other row stays on the plain sidebar
   background, same as the "N matches found" text above the list. */
body[data-page-design="washitsu-tokonoma"] .btn-quick,
body.kt-washitsu .btn-quick {
    background:transparent !important;
    color:var(--kt-washitsu-ink) !important;
    border-color:transparent !important;
    box-shadow:none !important;
}
body[data-page-design="washitsu-tokonoma"] .btn-quick:hover,
body.kt-washitsu .btn-quick:hover {
    background:var(--kt-washitsu-paper-soft) !important;
}
body[data-page-design="washitsu-tokonoma"] .btn-quick.active,
body.kt-washitsu .btn-quick.active {
    background:var(--kt-washitsu-wall) !important;
    border-color:var(--kt-washitsu-wall) !important;
}
body[data-page-design="washitsu-tokonoma"] .btn-quick .menu-readings,
body.kt-washitsu .btn-quick .menu-readings {
    color:var(--kt-washitsu-muted);
}

body[data-page-design="washitsu-tokonoma"] .home-action,
body[data-page-design="washitsu-tokonoma"] .cta-actions a.secondary,
body.kt-washitsu .home-action,
body.kt-washitsu .cta-actions a.secondary {
    background:#fff8e9 !important;
    border:1px solid rgba(91,70,44,.22) !important;
    color:#283b35 !important;
}

body[data-page-design="washitsu-tokonoma"] #view-home,
body[data-page-design="washitsu-tokonoma"] #view-kanji-wave,
body[data-page-design="washitsu-tokonoma"] #view-kanji-animator,
body[data-page-design="washitsu-tokonoma"] #view-kana-drama,
body[data-page-design="washitsu-tokonoma"] #view-gakufu-drama,
body[data-page-design="washitsu-tokonoma"] #view-kanji-drama,
body[data-page-design="washitsu-tokonoma"] #view-kanji-improv,
body[data-page-design="washitsu-tokonoma"] #view-kanji-props,
body.kt-washitsu #view-home,
body.kt-washitsu #view-kanji-wave,
body.kt-washitsu #view-kanji-animator,
body.kt-washitsu #view-kana-drama,
body.kt-washitsu #view-gakufu-drama,
body.kt-washitsu #view-kanji-drama,
body.kt-washitsu #view-kanji-improv,
body.kt-washitsu #view-kanji-props {
    background:rgba(255,250,240,.58) !important;
}

body[data-page-design="washitsu-tokonoma"] #view-kanji-drama,
body[data-page-design="washitsu-tokonoma"] #view-kanji-animator,
body[data-page-design="washitsu-tokonoma"] #view-kanji-props,
body[data-page-design="washitsu-tokonoma"] #view-kana-drama,
body[data-page-design="washitsu-tokonoma"] #view-gakufu-drama,
body.kt-washitsu #view-kanji-drama,
body.kt-washitsu #view-kanji-animator,
body.kt-washitsu #view-kanji-props,
body.kt-washitsu #view-kana-drama,
body.kt-washitsu #view-gakufu-drama {
    background:rgba(255,250,240,.58) !important;
}

body[data-page-design="washitsu-tokonoma"] #view-gallery,
body[data-page-design="washitsu-tokonoma"] #view-gifts,
body.kt-washitsu #view-gallery,
body.kt-washitsu #view-gifts {
    background:rgba(255,250,240,.72) !important;
    border:1px solid rgba(91,70,44,.14);
    box-shadow:none !important;
}

body[data-page-design="washitsu-tokonoma"] .dashboard,
body[data-page-design="washitsu-tokonoma"] .sidebar,
body[data-page-design="washitsu-tokonoma"] .main-content,
body[data-page-design="washitsu-tokonoma"] .reading-box,
body[data-page-design="washitsu-tokonoma"] .level-tabs,
body[data-page-design="washitsu-tokonoma"] .anim-canvas-wrapper,
body[data-page-design="washitsu-tokonoma"] .drama-stage-box,
body[data-page-design="washitsu-tokonoma"] .drama-media-controls,
body[data-page-design="washitsu-tokonoma"] .drama-search-container,
body[data-page-design="washitsu-tokonoma"] .improv-prompt-card,
body[data-page-design="washitsu-tokonoma"] .props-master,
body[data-page-design="washitsu-tokonoma"] .wave-motion-pane,
body[data-page-design="washitsu-tokonoma"] .wave-motion-info,
body[data-page-design="washitsu-tokonoma"] .gift-panel,
body[data-page-design="washitsu-tokonoma"] .gift-card,
body[data-page-design="washitsu-tokonoma"] .gift-cart,
body[data-page-design="washitsu-tokonoma"] .shop-admin-shell,
body.kt-washitsu .dashboard,
body.kt-washitsu .sidebar,
body.kt-washitsu .main-content,
body.kt-washitsu .reading-box,
body.kt-washitsu .level-tabs,
body.kt-washitsu .anim-canvas-wrapper,
body.kt-washitsu .drama-stage-box,
body.kt-washitsu .drama-media-controls,
body.kt-washitsu .drama-search-container,
body.kt-washitsu .improv-prompt-card,
body.kt-washitsu .props-master,
body.kt-washitsu .wave-motion-pane,
body.kt-washitsu .wave-motion-info,
body.kt-washitsu .gift-panel,
body.kt-washitsu .gift-card,
body.kt-washitsu .gift-cart,
body.kt-washitsu .shop-admin-shell {
    background:rgba(255,250,240,.9) !important;
    border-color:rgba(91,70,44,.2) !important;
    box-shadow:0 13px 34px var(--kt-washitsu-shadow) !important;
    border-radius:8px !important;
}

body[data-page-design="washitsu-tokonoma"] .dashboard::before,
body.kt-washitsu .dashboard::before {
    display:none !important;
}

body[data-page-design="washitsu-tokonoma"] .left-half,
body.kt-washitsu .left-half {
    border-right-color:rgba(91,70,44,.18) !important;
}

body[data-page-design="washitsu-tokonoma"] .part-2,
body[data-page-design="washitsu-tokonoma"] .second-half,
body[data-page-design="washitsu-tokonoma"] .chain-panel,
body[data-page-design="washitsu-tokonoma"] .record-panel,
body.kt-washitsu .part-2,
body.kt-washitsu .second-half,
body.kt-washitsu .chain-panel,
body.kt-washitsu .record-panel {
    background:rgba(255,253,247,.76) !important;
    border-color:rgba(91,70,44,.18) !important;
    border-radius:8px !important;
}

body[data-page-design="washitsu-tokonoma"] #view-kanji-animator h2,
body[data-page-design="washitsu-tokonoma"] #view-kanji-drama h2,
body[data-page-design="washitsu-tokonoma"] #view-kanji-props h2,
body[data-page-design="washitsu-tokonoma"] #view-kana-drama h2,
body[data-page-design="washitsu-tokonoma"] #view-gakufu-drama h2,
body[data-page-design="washitsu-tokonoma"] #view-gallery h2,
body[data-page-design="washitsu-tokonoma"] #view-gifts h2,
body.kt-washitsu #view-kanji-animator h2,
body.kt-washitsu #view-kanji-drama h2,
body.kt-washitsu #view-kanji-props h2,
body.kt-washitsu #view-kana-drama h2,
body.kt-washitsu #view-gakufu-drama h2,
body.kt-washitsu #view-gallery h2,
body.kt-washitsu #view-gifts h2 {
    color:#283b35 !important;
    text-shadow:none !important;
}

body[data-page-design="washitsu-tokonoma"] .drama-stage-box,
body[data-page-design="washitsu-tokonoma"] .anim-canvas-wrapper,
body[data-page-design="washitsu-tokonoma"] .wave-motion-pane,
body[data-page-design="washitsu-tokonoma"] #view-kanji-drama .drama-stage-box,
body[data-page-design="washitsu-tokonoma"] #view-kanji-props .drama-stage-box,
body[data-page-design="washitsu-tokonoma"] #view-kana-drama .drama-stage-box,
body[data-page-design="washitsu-tokonoma"] #view-gakufu-drama .drama-stage-box,
body[data-page-design="washitsu-tokonoma"] #view-kanji-animator .anim-canvas-wrapper,
body.kt-washitsu .drama-stage-box,
body.kt-washitsu .anim-canvas-wrapper,
body.kt-washitsu .wave-motion-pane,
body.kt-washitsu #view-kanji-drama .drama-stage-box,
body.kt-washitsu #view-kanji-props .drama-stage-box,
body.kt-washitsu #view-kana-drama .drama-stage-box,
body.kt-washitsu #view-gakufu-drama .drama-stage-box,
body.kt-washitsu #view-kanji-animator .anim-canvas-wrapper {
    border-width:1px !important;
    border-color:rgba(91,70,44,.2) !important;
    box-shadow:0 13px 34px var(--kt-washitsu-shadow) !important;
}

body[data-page-design="washitsu-tokonoma"] input,
body[data-page-design="washitsu-tokonoma"] select,
body[data-page-design="washitsu-tokonoma"] textarea,
body.kt-washitsu input,
body.kt-washitsu select,
body.kt-washitsu textarea {
    background:#fffdf7 !important;
    border-color:rgba(91,70,44,.24) !important;
    color:#283b35;
}

body[data-page-design="washitsu-tokonoma"] .btn-shatter-action,
body[data-page-design="washitsu-tokonoma"] .btn-reset-stage,
body[data-page-design="washitsu-tokonoma"] .improv-make-btn,
body[data-page-design="washitsu-tokonoma"] .wave-replay-btn,
body[data-page-design="washitsu-tokonoma"] .gift-add,
body[data-page-design="washitsu-tokonoma"] .gift-checkout,
body[data-page-design="washitsu-tokonoma"] .preview-celebration-btn,
body.kt-washitsu .btn-shatter-action,
body.kt-washitsu .btn-reset-stage,
body.kt-washitsu .improv-make-btn,
body.kt-washitsu .wave-replay-btn,
body.kt-washitsu .gift-add,
body.kt-washitsu .gift-checkout,
body.kt-washitsu .preview-celebration-btn {
    background:var(--kt-washitsu-muted) !important;
    color:#fff8e9 !important;
    border-color:var(--kt-washitsu-muted) !important;
    box-shadow:none !important;
}

body[data-page-design="washitsu-tokonoma"] .btn-shatter-action:hover,
body[data-page-design="washitsu-tokonoma"] .btn-reset-stage:hover,
body[data-page-design="washitsu-tokonoma"] .improv-make-btn:hover,
body[data-page-design="washitsu-tokonoma"] .wave-replay-btn:hover,
body[data-page-design="washitsu-tokonoma"] .gift-add:hover,
body[data-page-design="washitsu-tokonoma"] .gift-checkout:hover,
body.kt-washitsu .btn-shatter-action:hover,
body.kt-washitsu .btn-reset-stage:hover,
body.kt-washitsu .improv-make-btn:hover,
body.kt-washitsu .wave-replay-btn:hover,
body.kt-washitsu .gift-add:hover,
body.kt-washitsu .gift-checkout:hover {
    background:var(--kt-washitsu-muted-light) !important;
    border-color:var(--kt-washitsu-muted-light) !important;
}

body[data-page-design="washitsu-tokonoma"] #view-kanji-improv .dashboard,
body[data-page-design="washitsu-tokonoma"] #view-kanji-drama .dashboard,
body[data-page-design="washitsu-tokonoma"] #view-kanji-animator .dashboard,
body[data-page-design="washitsu-tokonoma"] #view-kanji-props .dashboard,
body.kt-washitsu #view-kanji-improv .dashboard,
body.kt-washitsu #view-kanji-drama .dashboard,
body.kt-washitsu #view-kanji-animator .dashboard,
body.kt-washitsu #view-kanji-props .dashboard {
    margin-left:auto;
    margin-right:auto;
}

/*
 * Shared grouped-action picker. A native <select>'s open dropdown is
 * rendered by the OS's own popup menu on Chrome/Safari, which ignores page
 * CSS entirely for <optgroup> label colour — there is no selector that
 * reaches it. This is a real DOM/CSS replacement so any tool that lets a
 * visitor choose one action from several classifications (Kanji-Anime's
 * Chain Actions today; Kanji-Drama or others can adopt the same markup
 * later) gets a legible, on-brand category header instead. The JS that
 * builds this markup lives page-side (see _populateChainSelects in
 * index.html for the current Kanji-Anime usage); this file only owns the
 * skin, consistent with the rest of this stylesheet.
 */
.kt-action-combobox { position:relative; flex:1; min-width:0; }
.kt-action-combobox-trigger {
    width:100%; min-height:44px; box-sizing:border-box;
    padding:7px 24px 7px 8px; font:inherit; font-size:12px; text-align:left;
    border:1px solid var(--kt-washitsu-line); border-radius:4px;
    background:#fffdf7; color:var(--kt-washitsu-ink); cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    position:relative;
}
.kt-action-combobox-trigger::after {
    content:'▾'; position:absolute; right:8px; top:50%;
    transform:translateY(-50%); color:var(--kt-washitsu-muted); pointer-events:none;
}
.kt-action-combobox-trigger:focus-visible { outline:2px solid var(--kt-washitsu-beni); outline-offset:1px; }
.kt-action-combobox-panel {
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
    max-height:320px; overflow-y:auto;
    background:#fffdf7; border:1px solid var(--kt-washitsu-line); border-radius:6px;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.kt-action-combobox-group-label {
    padding:6px 10px; font-size:11px; font-weight:700;
    color:var(--kt-washitsu-ink); background-color:var(--kt-washitsu-tatami);
    position:sticky; top:0;
}
.kt-action-combobox-option {
    display:block; width:100%; box-sizing:border-box;
    padding:8px 10px; min-height:36px; font:inherit; font-size:13px; text-align:left;
    border:none; background:transparent; color:var(--kt-washitsu-ink); cursor:pointer;
}
.kt-action-combobox-option:hover, .kt-action-combobox-option:focus-visible {
    background:var(--kt-washitsu-paper-soft);
}
.kt-action-combobox-option[aria-selected="true"] { font-weight:700; }
.kt-action-combobox-option.kt-action-combobox-placeholder { color:var(--kt-washitsu-muted); }

@media (max-width:650px) {
    .kt-action-combobox-trigger { width:100%; font-size:13px; }

    body[data-page-design="washitsu-tokonoma"]::before,
    body.kt-washitsu::before {
        top:62px;
        background-size:auto;
    }

    body[data-page-design="washitsu-tokonoma"] main:not(.washitsu-page),
    body.kt-washitsu main:not(.washitsu-page) {
        background:rgba(255,250,240,.78);
    }

    body[data-page-design="washitsu-tokonoma"] #view-kanji-improv .dashboard,
    body[data-page-design="washitsu-tokonoma"] #view-kanji-drama .dashboard,
    body[data-page-design="washitsu-tokonoma"] #view-kanji-animator .dashboard,
    body[data-page-design="washitsu-tokonoma"] #view-kanji-props .dashboard,
    body.kt-washitsu #view-kanji-improv .dashboard,
    body.kt-washitsu #view-kanji-drama .dashboard,
    body.kt-washitsu #view-kanji-animator .dashboard,
    body.kt-washitsu #view-kanji-props .dashboard {
        max-width:100%;
    }
}