/* ============================================================
   chart.css — the /chart kana reference table (Hiragana +
   Katakana on one page, toggled). New-theme tokens, light+dark.
   ============================================================ */

.chart-page { width: 100%; }

.chart-hero { text-align: center; margin-bottom: 18px; }
.chart-hero .eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint, #7a6260);
}
.chart-hero h1 { font-size: 1.9rem; margin: .12em 0 .15em; color: var(--text, #1f1a1a); }
.chart-hero p { color: var(--text-muted, #54403a); font-size: .96rem; line-height: 1.5; margin: 0 auto; max-width: 640px; }

/* ── Kana toggle (segmented control) ─────────────────────── */
.kana-toggle {
  display: inline-flex; gap: 2px; padding: 3px; margin: 16px auto 4px;
  background: var(--bg-outer, #f4ede0); border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 12px;
}
.kana-toggle__btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .92rem; font-weight: 700; padding: 8px 22px; border-radius: 9px;
  background: transparent; color: var(--text-muted, #54403a); transition: background .15s, color .15s;
}
.kana-toggle__btn .jp { font-family: 'Noto Sans JP', sans-serif; opacity: .7; margin-left: 5px; font-weight: 500; }
.kana-toggle__btn.is-active { background: var(--accent, #b32a2a); color: #fff; }
.kana-toggle__btn.is-active .jp { opacity: .85; }

/* ── Toolbar ─────────────────────────────────────────────── */
.chart-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  width: 100%; margin: 14px 0 18px; padding: 8px 10px;
  background: var(--bg-outer, #f4ede0); border: 1.5px solid var(--container-border, #d9cdb4); border-radius: 12px;
}
.chart-toolbar .tb-left, .chart-toolbar .tb-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 8px;
  color: var(--text-muted, #54403a); background: transparent; border: 1px solid transparent;
}
@media (hover: hover) { .toolbar-btn:hover { color: var(--accent, #b32a2a); background: var(--accent-hover, rgba(179,42,42,.08)); } }
button.toolbar-btn { border-color: var(--container-border, #d9cdb4); }

/* Accent-outlined CTA — the persistent route to /character-decks now that
   it's leaving the header nav. Stands out from the ghost section buttons. */
.toolbar-btn--cta { color: var(--accent, #b32a2a); border-color: var(--accent, #b32a2a); }
@media (hover: hover) { .toolbar-btn--cta:hover { color: #fff; background: var(--accent, #b32a2a); } }

/* ── Chart sections + grids ──────────────────────────────── */
.chart-section { width: 100%; margin: 0 0 16px; }
.chart-section > h2 {
  font-size: 1.05rem; color: var(--text, #1f1a1a); margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.chart-card {
  background: var(--bg, #fbf6ea); border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 12px; padding: 10px; overflow-x: auto;
}
.chart-grid-header, .chart-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-width: 360px;
}
.chart-grid-header { margin-bottom: 5px; }
.col-header {
  text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-faint, #7a6260); text-transform: lowercase;
}

.chart-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 58px; padding: 5px 4px; text-decoration: none; border-radius: 9px;
  background: var(--bg-outer, #f4ede0); border: 1.5px solid var(--container-border, #d9cdb4);
  color: var(--text, #1f1a1a); transition: border-color .15s, transform .1s, background .15s;
}
a.chart-cell { cursor: pointer; }
@media (hover: hover) {
  a.chart-cell:hover { border-color: var(--accent, #b32a2a); background: var(--bg, #fbf6ea); transform: translateY(-1px); }
}
.chart-cell .char { font-family: 'Noto Sans JP', sans-serif; font-size: 1.5rem; line-height: 1; }
.chart-cell .romaji { font-size: .64rem; font-weight: 600; color: var(--text-muted, #54403a); letter-spacing: .02em; }
.chart-cell.empty { background: transparent; border: 1.5px dashed transparent; }
.chart-cell.noref { opacity: .72; }       /* archaic kana with no practice page */

/* Yōon is only 3 columns — without a cap its cells stretch to ~1/3 of the
   full card width and look stubby next to the compact height. Cap the card so
   each yōon cell renders at roughly the same width as the 5-column sections. */
#section-yoon .chart-card { max-width: 560px; }

/* Glyph show/hide driven by the toggle on #kana-chart. */
.kana-chart.show-katakana .glyph-h { display: none; }
.kana-chart.show-hiragana .glyph-k { display: none; }

/* ── SEO content + FAQ ───────────────────────────────────── */
.chart-seo { margin-top: 30px; color: var(--text-muted, #54403a); line-height: 1.6; }
.chart-seo h2 { font-size: 1.25rem; color: var(--text, #1f1a1a); margin: 0 0 8px; }
.chart-seo h3 { font-size: 1rem; color: var(--text, #1f1a1a); margin: 18px 0 4px; }
.chart-seo p { margin: 0 0 8px; }
.chart-seo a { color: var(--accent, #b32a2a); }
.chart-seo details {
  border-top: 1px solid var(--container-border, #d9cdb4); padding: 10px 0;
}
.chart-seo summary { cursor: pointer; font-weight: 600; color: var(--text, #1f1a1a); }
.chart-seo details p { margin: 8px 0 0; }

/* Ad slots use the shared .ad-slot--leader / .ad-slot__* styles from
   site.css (same placeholders as the kana character pages). */

@media (max-width: 520px) {
  .chart-cell .char { font-size: 1.32rem; }
  .chart-cell { min-height: 50px; }
  .chart-grid-header, .chart-grid { gap: 5px; }
}