/* Kai (楷体) brush font for specimen glyphs; falls back to local Kai, then sans */
:root {
  --kai: 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'AR PL UKai CN',
         'Noto Serif CJK SC', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', serif;
}

/* ── Intro / legend ────────────────────────────── */
.intro {
  font-size: calc(1rem * var(--scale)); line-height: 1.7;
  max-width: 60ch; margin-bottom: 1.5rem;
}
.legend {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  font-size: 0.82rem; color: var(--muted); margin-bottom: 2rem;
}
.legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.lg-cn { background: var(--red); }
.lg-jp { background: var(--navy); }
.lg-wk-m { background: rgba(44, 107, 62, 0.18); border: 1.5px solid var(--green); }
.lg-wk { background: repeating-linear-gradient(45deg, var(--red), var(--red) 3px, transparent 3px, transparent 6px); border: 1px dashed var(--red); }
.lg-note { font-weight: 600; }

/* ── Stroke card ───────────────────────────────── */
.scard {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.4rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.4rem; margin-bottom: 1rem;
  transition: box-shadow 0.18s;
}
.scard:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.07); }

/* glyph block — crisp font glyph + animated direction tracer */
.sc-glyph { text-align: center; }
.sc-hero {
  width: 112px; height: 112px; display: block; margin: 0 auto;
  background: var(--cream); border-radius: 10px;
}
.sc-hw {
  width: 112px; height: 112px; margin: 0 auto;
  background: var(--cream); border-radius: 10px;
}
.sc-hw svg { display: block; }
.sc-gtext {
  font-family: var(--kai);
  font-size: 66px; font-weight: 400; fill: var(--navy);
  text-anchor: middle; dominant-baseline: central;
}
.sc-tag { display: inline-block; margin-top: 0.55rem; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--muted); }
.sc-tag.tag-comp { color: var(--navy); font-weight: 600; }
.sc-tag.tag-char { color: var(--green); font-weight: 600; }

/* ── Section groups ────────────────────────────── */
.sc-group { margin-bottom: 1.5rem; }
.sc-grouphead { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin: 2rem 0 0.9rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--border); }
.sc-group:first-child .sc-grouphead { margin-top: 0; }
.sc-gtitle { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.sc-gsub { font-size: 0.8rem; color: var(--muted); }
.sc-img { display: block; width: 100%; margin-top: 0.6rem; border-radius: 6px; }
.sc-img[src=""] { display: none; }

/* three columns */
.sc-views { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.sc-view {
  padding: 0.75rem 0.85rem; border-radius: 8px;
  background: var(--cream); border-left: 3px solid var(--border);
}
.v-cn { border-left-color: var(--red); }
.v-jp { border-left-color: var(--navy); }
/* Program columns (Wanikani = JP-side, Pandanese = CN-side) share coding:
   shape-mnemonic (red, caution) vs real-meaning (green, transfers) */
.wk-mnemonic, .pd-mnemonic {
  border: 1.5px dashed var(--red);
  background: rgba(196, 30, 58, 0.05);
}
.wk-meaning, .pd-meaning {
  border: 1.5px solid var(--green);
  background: rgba(44, 107, 62, 0.06);
}
.v-wk.empty, .v-pd.empty { border: 1.5px dashed var(--border); }

/* stacked column: radical item + single-glyph item (WK kanji / PD character),
   each self-coloured. Same layout both sides — WK on jp, Pandanese on cn. */
.v-wk-stack, .v-pd-stack { border-left-color: var(--border); display: flex; flex-direction: column; gap: 0.5rem; }
.sc-wk-item, .sc-pd-item { border-radius: 6px; padding: 0.45rem 0.55rem; }
.sc-wk-item.wk-mnemonic, .sc-pd-item.pd-mnemonic { border: 1.5px dashed var(--red); background: rgba(196, 30, 58, 0.05); }
.sc-wk-item.wk-meaning, .sc-pd-item.pd-meaning { border: 1.5px solid var(--green); background: rgba(44, 107, 62, 0.06); }
.sc-wk-item .sc-mnemonic, .sc-pd-item .sc-mnemonic { width: 30px; height: 30px; margin: 0.1rem 0 0.3rem; }
.sc-wk-item .sc-only, .sc-pd-item .sc-only { margin-top: 0.25rem; }
.sc-wk-head { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.sc-wk-tag { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.sc-wk-item.wk-meaning .sc-lvl, .sc-pd-item.pd-meaning .sc-lvl { color: var(--green); }
.sc-wk-item.wk-mnemonic .sc-lvl, .sc-pd-item.pd-mnemonic .sc-lvl { color: var(--red); }
.sc-wk-item .sc-lvl, .sc-pd-item .sc-lvl { margin-left: auto; font-weight: 700; font-size: 0.7rem; }
.sc-wk-item .sc-reading { color: var(--navy2); }

.sc-vlabel { font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.4rem; }
.wk-mnemonic .sc-lvl, .pd-mnemonic .sc-lvl { color: var(--red); font-weight: 700; }
.wk-meaning .sc-lvl, .pd-meaning .sc-lvl { color: var(--green); font-weight: 700; }

.sc-mnemonic { width: 48px; height: 48px; display: block; margin: 0.1rem 0 0.45rem; }
.sc-mnemonic path, .sc-mnemonic circle, .sc-mnemonic ellipse { fill: none; stroke: #b0535d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-check { font-size: 1.9rem; line-height: 1; color: var(--green); margin: 0.1rem 0 0.35rem; }
.sc-only { margin-top: 0.4rem; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--red); font-weight: 600; opacity: 0.85; }
.sc-only.sc-true { color: var(--green); }

.sc-nameline { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.sc-name { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.sc-altglyph { font-family: var(--kai); font-size: 1.3rem; color: var(--navy); }
.sc-reading { color: var(--red); font-weight: 500; font-size: 0.9em; }
.v-jp .sc-reading { color: var(--navy2); }

.sc-gloss { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.sc-extra { font-size: 0.74rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.5; }

.sc-ex { margin-top: 0.5rem; font-size: 0.86rem; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.sc-exlabel { color: var(--muted); font-size: 0.7rem; }
.sc-exchar { font-family: var(--kai); font-size: 1.3rem; font-weight: 400; color: var(--navy); }

.sc-empty { color: var(--muted); font-size: 0.9rem; }

/* compact play button */
.sc-play { margin-top: 0; padding: 0.05rem 0.5rem; font-size: 0.7rem; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 760px) {
  .scard { grid-template-columns: 1fr; }
  .sc-glyph { display: flex; align-items: center; gap: 1rem; text-align: left; }
  .sc-hero, .sc-hw { margin: 0; flex: 0 0 auto; }
  .sc-views { grid-template-columns: 1fr; }
}

/* ── Kangxi number badge (on real cards + stubs) ── */
.sc-glyph { position: relative; }
.sc-kx {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  font-size: 0.66rem; font-weight: 700; color: var(--muted);
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 5px; padding: 0 0.32rem; line-height: 1.4;
}

/* ── script chip: the Han form(s) the card glyph is NOT (简/繁) ── */
.sc-trad {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  /* Stack segments vertically so a double 简+繁 chip (shinjitai: 円, 広) stays a
     narrow corner tile instead of a wide bar cutting across the glyph. A single
     segment (the common 个→個 case) is unchanged — one right-aligned row. */
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.1rem;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 5px; padding: 0.08rem 0.32rem; line-height: 1.35;
}
.sc-trad-seg { display: inline-flex; align-items: center; gap: 0.22rem; }
.sc-trad-lbl { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.sc-trad-g {
  font-size: 0.86rem; font-weight: 600; color: var(--navy);
  font-family: var(--serif, Georgia, "Songti SC", serif);
}
.sc-trad-g[title] { cursor: help; border-bottom: 1px dotted var(--border); }
.sc-trad-same { color: var(--muted); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.65; }

/* ── Kangxi stub tile — a radical not yet built into a full card ── */
.scard-stub {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; vertical-align: top; width: 92px; gap: 0.15rem;
  padding: 0.6rem 0.4rem 0.5rem; margin: 0 0.5rem 0.5rem 0;
  background: var(--white); border: 1px dashed var(--border);
  border-radius: 10px; opacity: 0.66; transition: opacity 0.15s, box-shadow 0.15s;
}
.scard-stub:hover { opacity: 1; box-shadow: 0 3px 12px rgba(0,0,0,0.06); }
.scard-stub .sc-kx { top: 3px; left: 3px; font-size: 0.58rem; }
.sc-stub-glyph {
  width: 58px; height: 58px; background: transparent; border-radius: 8px;
}
.scard-stub .sc-gtext { font-size: 46px; fill: var(--muted); }
.sc-stub-meaning { font-size: 0.72rem; color: var(--ink); text-align: center; line-height: 1.2; }
.sc-stub-py { font-size: 0.62rem; color: var(--muted); }

/* ── Radical deck (/kangxi/): a tile grid — schematic hero + glyph + readings ── */
/* The 214-spine reads as one visual ladder; each tile leads with its referent
   image (the anchor), the animated glyph and toggle-readings sit beneath. */
/* The card region breaks out of the 860px prose column (.wrap) to a wider gallery
   width, centred on the viewport — text stays readable, tiles get room. */
.rk-host {
  position: relative; left: 50%; transform: translateX(-50%);
  width: min(1100px, calc(100vw - 3rem));
}
.rk-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}
.rk-card {
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1rem; margin-bottom: 0;
  /* skip layout/paint for offscreen tiles; pairs with the viewport-gated glyph
     animation (initHanzi) so a 214-tile deck stays smooth to scroll. */
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
/* hero: a count-aware collage of the tile's referents (the anchor). The badge
   floats over it; cells fill a 16:10 band. */
.rk-herowrap { position: relative; }
.rk-hero {
  display: grid; gap: 6px; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 10px; overflow: hidden;
}
.rk-hero-n1 { grid-template-columns: 1fr; }
.rk-hero-n2 { grid-template-columns: 1fr 1fr; }
.rk-hero-n3, .rk-hero-n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.rk-hero-n3 > :first-child { grid-column: 1 / -1; }
.rk-cell { width: 100%; height: 100%; min-height: 0; display: block; }
.rk-cell-svg { object-fit: contain; background: var(--cream); }
.rk-cell-photo { object-fit: cover; }
/* glyph-forward hero (no referent yet): the animated glyph centred on a light bed */
.rk-hero-glyph { background: var(--cream); display: flex; align-items: center; justify-content: center; }
.rk-heroglyph .sc-hw { width: 200px; height: 200px; }
.rk-heroglyph .sc-hw svg, .rk-heroglyph .sc-hero { width: 200px; height: 200px; }
.rk-heroglyph .sc-hero { background: transparent; }
/* caption: animated glyph (shrunk from the 112px comparison size) + readings */
.rk-cap { display: flex; align-items: center; gap: 0.6rem; }
.rk-capglyph { flex: 0 0 auto; }
.rk-capglyph .sc-hw { width: 104px; height: 104px; }
.rk-capglyph .sc-hw svg, .rk-capglyph .sc-hero { width: 104px; height: 104px; }
.rk-readings { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.rk-nameline { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.rk-nameline .sc-name { font-size: 1.25rem; }
.rk-gloss { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }
/* CN shown by default; page-level toggle (toggleLang) flips to JP */
.rk-jp { display: none; }
body.show-jp .rk-cn { display: none; }
body.show-jp .rk-jp { display: block; }
/* full referent gallery — hidden until the Phase-2 expand reveals rk-detail */
.rk-gallery {
  display: flex; gap: 0.7rem; align-items: center; width: 100%;
  min-height: 132px; padding: 0.25rem; overflow-x: auto;
}
.rk-ref { height: 132px; width: auto; flex: 0 0 auto; border-radius: 8px; object-fit: cover; }

@media (max-width: 760px) {
  .rk-grid { grid-template-columns: 1fr; }
}