/* Dictionary — styles specific to dictionary.html.
   "Sumi & Terracotta" (now with a third ink): the page's original kango/wago split -- a kango
   (漢語) half in near-black sumi ink and a wago (和語) half in warm terracotta clay, on a pale
   neutral washi ground -- lives on unchanged as the secondary "漢語 ⇄ 和語" tab. The new primary
   "Монгол ⇄ 日本語" tab adds a third ink, --khukh (a deep cobalt blue evoking Munkh Khukh
   Tenger, the "eternal blue sky" of the Mongolian flag) for the Mongolian half, paired against
   the SAME sumi ink for Japanese -- the two tabs share sumi as their one constant, so the page
   still reads as one dictionary with two lenses rather than two unrelated tools glued together.
   Distinct from Word Match's dark violet/gold, Phonetics' jade/copper, the Reader's warm gold,
   and Grammar Connect's dark indigo/vermillion -- this is the only OTHER light page besides
   Phonetics/Reading/Portfolio, and the only one built around a strict two-column split-card
   list rather than a board, sidebar, or sentence-card layout. All tokens scoped to
   .dictionary-main, following the same page-scoped-token pattern as every other page's CSS. */

body:has(.dictionary-main) {
    background: #eee8da;
}

.dictionary-main {
    --bg-page: #eee8da;
    --card: #faf7ef;
    --card-edge: #e0d8c3;
    --sumi: #262421;
    --sumi-tint: #eae6de;
    --terracotta: #b5502e;
    --terracotta-tint: #f6e8de;
    --khukh: #2a4d73;
    --khukh-tint: #e4ebf1;
    --ink: #3a352c;
    --ink-soft: #7a7261;
    --ink-faint: #a89e88;
    --good: #4f7a5e;
    --good-tint: #e6efe6;

    --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    padding: 89px 40px 80px;
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--ink);
}

.dict-hud-row {
    max-width: 1100px;
    margin: 0 auto;
}

.dict-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    margin: 0 0 10px;
    color: var(--sumi);
}

.dict-title-sub {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--terracotta);
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.dict-subtitle {
    max-width: 68ch;
    color: var(--ink-soft);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

/* Segmented control, not pills -- reads as "one dictionary, two lenses" sharing a border,
   rather than two competing destinations. */
.dict-tabs {
    max-width: 1100px;
    margin: 26px auto 0;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--card-edge);
    width: fit-content;
}

.dict-tab {
    appearance: none;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    padding: 10px 20px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}

.dict-tab.active { background: var(--card); color: var(--sumi); }
#dict-tab-mnjp.active { color: var(--khukh); }
#dict-tab-wakan.active { color: var(--terracotta); }

.dict-panel.hidden { display: none; }

.dict-controls {
    max-width: 1100px;
    margin: 28px auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: center;
    justify-content: space-between;
}

.dict-search-wrap {
    position: relative;
    flex: 1;
    min-width: 260px;
}

.dict-search {
    width: 100%;
    box-sizing: border-box;
    background: var(--card);
    border: 1px solid var(--card-edge);
    padding: 13px 90px 13px 16px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ink);
}

.dict-search:focus {
    outline: none;
    border-color: var(--terracotta);
}

.dict-search-count {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--ink-faint);
    letter-spacing: 0.02em;
    pointer-events: none;
}

.dict-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dict-filter {
    background: var(--card);
    border: 1px solid var(--card-edge);
    color: var(--ink-soft);
    padding: 9px 16px;
    font-size: 0.84rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.dict-filter:hover { border-color: var(--terracotta); }

.dict-filter.active {
    background: var(--sumi);
    border-color: var(--sumi);
    color: #f2ede0;
}

.dict-list {
    max-width: 1100px;
    margin: 26px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dict-empty {
    max-width: 1100px;
    margin: 40px auto;
    text-align: center;
    color: var(--ink-faint);
}

/* ---------------------------------------------------------------------
   Монгол ⇄ 日本語 tab -- click-to-expand cards (mnjp-data.js via dictionary.js)
   --------------------------------------------------------------------- */
.mnjp-entry {
    background: var(--card);
    border: 1px solid var(--card-edge);
}

.mnjp-entry-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    width: 100%;
    padding: 16px 22px;
    background: none;
    border: none;
    font-family: inherit;
    text-align: inherit;
    cursor: pointer;
    gap: 10px;
}

.mnjp-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mnjp-side.jp { text-align: right; }

.mnjp-side .label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.mnjp-side.mn .label { color: var(--khukh); }
.mnjp-side.jp .label { color: var(--sumi); }

.mnjp-side .term {
    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
}

.mnjp-side.mn .term { color: var(--khukh); }
.mnjp-side.jp .term { color: var(--ink); font-family: var(--font-jp); }
.mnjp-side .term rt { font-size: 0.5rem; color: var(--ink-soft); font-family: 'IBM Plex Sans', sans-serif; }

.mnjp-bridge { color: var(--ink-faint); font-size: 1.1rem; }

.mnjp-expand-hint {
    color: var(--ink-faint);
    font-size: 0.8rem;
    transition: transform 0.15s var(--ease-out);
}

.mnjp-entry.open .mnjp-expand-hint { transform: rotate(180deg); }

.mnjp-detail { display: none; padding: 0 22px 18px; }
.mnjp-entry.open .mnjp-detail { display: block; }

.mnjp-source-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.mnjp-source-tag {
    font-size: 0.68rem;
    padding: 3px 9px;
    background: var(--sumi-tint);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mnjp-source-tag.confirmed { background: var(--good-tint); color: var(--good); }

.mnjp-glosses { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.5; }

.mnjp-example {
    background: var(--sumi-tint);
    padding: 12px 14px;
    font-size: 0.9rem;
}

.mnjp-example .ex-jp { color: var(--sumi); font-family: var(--font-jp); margin: 0 0 6px; line-height: 1.6; }
.mnjp-example .ex-jp rt { font-size: 0.55em; color: var(--ink-faint); font-family: 'IBM Plex Sans', sans-serif; }
.mnjp-example .ex-mn { color: var(--khukh); margin: 0; font-weight: 500; }

.mnjp-kango-link { margin: 10px 0 0; font-size: 0.82rem; color: var(--terracotta); }

/* Phonetic family cross-links -- shared between both tabs (see dictionary.js's
   phoneticChipsHtml): one chip per kanji in the entry that Phonetics Family covers, linking to
   that kanji's family on phonetics.html. */
.phonetic-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.phonetic-chip-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.phonetic-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: var(--sumi-tint);
    color: var(--ink);
    padding: 4px 10px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.phonetic-chip .kanji { font-family: var(--font-jp); font-size: 0.95rem; }
.phonetic-chip .reading { font-size: 0.72rem; color: var(--ink-soft); }
.phonetic-chip:hover { background: var(--terracotta-tint); color: var(--terracotta); }
.phonetic-chip:hover .reading { color: var(--terracotta); }

/* Inside a Kango/Wago card, match the sibling rows' own border/padding treatment (the mnjp tab's
   .mnjp-detail already supplies that padding on its parent, so this override only applies here). */
.dict-entry .phonetic-chip-row { margin-top: 0; padding: 12px 22px 16px; border-top: 1px solid var(--card-edge); }

@media (max-width: 640px) {
    .mnjp-entry-main { grid-template-columns: 1fr auto 1fr; }
    .mnjp-expand-hint { grid-column: 1 / -1; text-align: center; }
    .mnjp-side.jp { text-align: left; }
}

/* ---------------------------------------------------------------------
   漢語 ⇄ 和語 tab (dictionary-data.js) -- unchanged from the original page
   --------------------------------------------------------------------- */
.dict-entry {
    background: var(--card);
    border: 1px solid var(--card-edge);
}

.dict-entry-main {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.dict-side {
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dict-side.kango { background: var(--sumi-tint); }
.dict-side.wago { background: var(--terracotta-tint); text-align: right; }

.dict-side .term {
    font-family: var(--font-jp);
    font-size: 1.2rem;
    color: var(--ink);
}

.dict-side .term rt {
    font-size: 0.5rem;
    color: var(--ink-soft);
    font-family: 'IBM Plex Sans', sans-serif;
}

.dict-side.kango .label { color: var(--sumi); }
.dict-side.wago .label { color: var(--terracotta); }

.dict-side .label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.dict-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: var(--ink-faint);
    font-size: 1.1rem;
}

.dict-meaning-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px;
    border-top: 1px solid var(--card-edge);
    font-size: 0.86rem;
}

.dict-meaning {
    color: var(--ink-soft);
}

.dict-pos {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    white-space: nowrap;
}

.dict-honorifics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 22px;
    border-top: 1px solid var(--card-edge);
    background: #f4f0e5;
}

.dict-hon-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.9rem;
}

.dict-hon-chip .hon-badge {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    letter-spacing: 0.03em;
}

.dict-hon-chip.sonkeigo .hon-badge {
    background: var(--sumi-tint);
    color: var(--sumi);
}

.dict-hon-chip.kenjougo .hon-badge {
    background: var(--terracotta-tint);
    color: var(--terracotta);
}

.dict-hon-chip .term {
    font-family: var(--font-jp);
    color: var(--ink);
}

.dict-hon-chip .term rt {
    font-size: 0.48rem;
    color: var(--ink-soft);
    font-family: 'IBM Plex Sans', sans-serif;
}

@media (max-width: 640px) {
    .dictionary-main { padding: 89px 18px 60px; }
    .dict-entry-main { grid-template-columns: 1fr; }
    .dict-bridge { flex-direction: row; padding: 6px 0; }
    .dict-side.wago { text-align: left; }
}