/* 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-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; }

/* a group's word strip (add-on decks: the level's vocab under its glyph cards) */
.sc-words { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 1rem; }
.sc-word {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.35rem 0.7rem;
}
.sc-word-s { font-family: var(--kai); font-size: 1.25rem; }
.sc-word-g { color: var(--muted); font-size: 0.8rem; }
.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; }

/* the views row: 中文 · 日本語 (+ any add-on columns) */
.sc-views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.sc-views.sc-n3 { grid-template-columns: repeat(3, 1fr); }  /* + one add-on column */
.sc-views.sc-n4 { grid-template-columns: repeat(4, 1fr); }
.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); }
.sc-vlabel { font-size: 0.58rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.4rem; }
.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); }

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

/* ── 义 bay: the concrete-referent anchor (shared by /graph/ and /glyph/) ──
   One block per SENSE — referent image + label + the sound(s) that sense takes per
   language (中文 red, 日本語 navy). Polysemy stacks the blocks (① life ② raw);
   polyphony sits across a block's readings (せい vs なま). Image is the glyph's own
   art for now (referent-media deferred), so polysemous senses share it. */
.ref-bay {
  border: 1.5px dashed var(--gold); border-radius: 12px; background: var(--cream);
  padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.ref-head { display: flex; align-items: baseline; gap: 0.5rem; }
.ref-mark { font-family: "LXGW WenKai", serif; font-size: 1.5rem; line-height: 1; color: var(--gold); }
.ref-cap { font-size: 0.66rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.ref-sense { display: flex; align-items: center; gap: 0.85rem; }
.ref-poly .ref-sense + .ref-sense { border-top: 1px dashed var(--border); padding-top: 0.65rem; }
.ref-num {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper, #fff); border: 1px solid var(--gold);
  font-size: 0.72rem; font-weight: 700; color: var(--muted);
}
.ref-img { flex: 0 0 auto; width: 3rem; height: 3rem; object-fit: cover; border-radius: 8px; display: block; }
.ref-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* the referent label is the headline — it carries the intention (life / raw) */
.ref-label { font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ref-rds { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.ref-lang { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.ref-tag { font-size: 0.62rem; letter-spacing: 0.08em; color: var(--muted); align-self: center; }
.ref-rd { font-weight: 500; font-size: 0.88rem; }
.ref-cn .ref-rd { color: var(--red); }
.ref-jp .ref-rd { color: var(--navy2); }

/* ── 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, .sc-views.sc-n3, .sc-views.sc-n4 { 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; }
}