/* Kanji Chart (/kanji) — the kanji counterpart to css/chart.css.
   Deliberately mirrors chart.css's card/cell/grid treatment so the two
   charts read as one system; the only real differences are a 6-column grid
   (lessons hold 6 kanji) and taller cells, since each cell carries an
   English meaning under the glyph.

   Variable names match chart.css on purpose — site.css defines that family,
   and --accent is redefined blue by the later :root, so these resolve to the
   site's blue accent rather than the warm literals kept as fallbacks. */

.kchart-page { width: 100%; }

/* ── Child-page cards (Library / Recall sets) ─────────────── */
.kchart-children {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  /* No bottom margin — the next group title's top margin supplies the gap,
     so both labels are spaced identically from whatever precedes them. */
  margin: 0;
}
.kchart-child {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 12px; text-decoration: none;
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
  transition: border-color .15s, transform .1s;
}
@media (hover: hover) {
  .kchart-child:hover { border-color: var(--accent, #20507e); transform: translateY(-1px); }
}
.kchart-child-title { font-weight: 700; color: var(--text, #1f1a1a); font-size: .98rem; }
.kchart-child-sub { font-size: .8rem; color: var(--text-muted, #54403a); line-height: 1.4; }

/* Group label. Deliberately identical to .grammar-idx__section-title in
   site.css (the "BASIC GRAMMAR" kicker on /grammar) so the two index pages
   share one visual language.

   The 22px top margin is what separates it from the block above (the hero
   card, then the child cards) — /grammar gets the same breathing room from
   .grammar-idx__section{margin-top:18px}, which the title rule alone doesn't
   carry. Spacing above each group lives here and nowhere else, so the two
   labels sit at identical distances. */
.kchart-group-title {
  margin: 22px 0 12px; font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: .10em; color: var(--accent-light); text-transform: uppercase;
}

/* ── Jump strip ──────────────────────────────────────────────
   45 sections is a long scroll; this keeps every lesson one tap away. */
.kchart-jump {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 10px 12px; margin: 0 0 18px; border-radius: 12px;
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
}
.kchart-jump-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint, #7a6260);
  margin-right: 4px;
}
.kchart-jump a {
  min-width: 26px; padding: 3px 6px; border-radius: 7px;
  text-align: center; text-decoration: none; font-size: .78rem; font-weight: 600;
  color: var(--text-muted, #54403a);
  background: var(--bg-outer, #f4ede0);
  border: 1px solid var(--container-border, #d9cdb4);
}
@media (hover: hover) {
  .kchart-jump a:hover { border-color: var(--accent, #20507e); color: var(--accent, #20507e); }
}

/* ── Lesson sections ─────────────────────────────────────── */
.kchart-section { width: 100%; margin: 0 0 16px; scroll-margin-top: 70px; }
.kchart-section > h2 {
  font-size: 1.05rem; color: var(--text, #1f1a1a); margin: 0 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.kchart-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: #fff; background: var(--accent, #20507e);
}
.kchart-title { font-weight: 700; }
.kchart-count {
  font-size: .72rem; font-weight: 600; color: var(--text-faint, #7a6260);
  margin-left: auto;
}

/* Recall button — magenta, matching the site-wide Recall signal colour
   (--recall-accent) so this reads as the same mode as every other Recall
   entry point rather than a generic link. */
.kchart-recall {
  flex-shrink: 0;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: var(--recall-accent, #d01b83);
  background: var(--recall-accent-bg, rgba(208, 27, 131, 0.08));
  border: 1.5px solid var(--recall-accent-line, rgba(208, 27, 131, 0.28));
  transition: background .15s, border-color .15s;
}
@media (hover: hover) {
  .kchart-recall:hover {
    background: var(--recall-accent, #d01b83);
    border-color: var(--recall-accent, #d01b83);
    color: #fff;
  }
}

.kchart-card {
  background: var(--bg, #fbf6ea);
  border: 1.5px solid var(--container-border, #d9cdb4);
  border-radius: 12px; padding: 10px; overflow-x: auto;
}
.kchart-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; min-width: 420px;
}

.kchart-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 74px; padding: 7px 5px;
  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;
}
@media (hover: hover) {
  a.kchart-cell:hover {
    border-color: var(--accent, #20507e);
    background: var(--bg, #fbf6ea);
    transform: translateY(-1px);
  }
}
.kchart-cell .kchar {
  font-family: 'Noto Sans JP', sans-serif; font-size: 1.9rem; line-height: 1;
}
.kchart-cell .kmeaning {
  font-size: .62rem; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--text-muted, #54403a);
  /* Meanings vary from "one" to "to be convenient"; clamp to two lines so a
     long gloss can't stretch one cell taller than its row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The promo now lives in the shared .layout-with-rail rail (site.css), which
   is already sticky and already collapses when there's nothing to show. On a
   narrow column the six-up grid just gets tighter cells (~115px), still well
   above the 75px they get on a phone, so the grid rules need no change. */
.kchart-page .layout-with-rail { margin-top: 0; }

@media (max-width: 720px) {
  .kchart-children { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  /* Four columns on a phone — six 60px cells would force the card to scroll
     horizontally on every lesson. Lesson rows wrap instead. */
  .kchart-grid { grid-template-columns: repeat(4, 1fr); min-width: 0; gap: 5px; }
  .kchart-cell { min-height: 66px; }
  .kchart-cell .kchar { font-size: 1.65rem; }
}