/* ────────────────────────────────────────── JAPANESE SURFACES
   Styles for vp__ (vocab page), kp__ (kanji page), sb__ (sentence breakdown).
   Reuses ink scale, accent, rules, type-chip, mastery-dot from styles.css. */

/* ───────── Common JP shell */
.vp, .kp, .sb {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  display: flex; flex-direction: column;
  min-height: 100%;
}
.vp__top, .kp__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 48px; min-height: 56px; gap: 24px;
}
.vp__top-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp__top-r { display: flex; align-items: center; gap: 14px; }
.vp__top-id { color: var(--ink-4); }
.vp__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 48px 24px; color: var(--ink-4); font-size: 11px;
}

/* ───────── VOCAB · hero */
.vp__hero {
  display: grid; grid-template-columns: 1fr 340px;
  gap: 56px; padding: 40px 48px 32px;
}
.vp__hero-main { min-width: 0; }
.vp__hero-side { display: flex; flex-direction: column; gap: 22px; }

.vp__head {
  display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.vp__kanji {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 132px; line-height: 1; font-weight: 500;
  ruby-position: over;
}
.vp__kanji rt, .vp__furi {
  font-family: var(--font-jp), var(--font-ui);
  font-size: 22px; font-weight: 500; color: var(--ink-3);
}
.vp__okuri {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 96px; line-height: 1; font-weight: 400; color: var(--ink-2);
  margin-left: -8px;
}
.vp__readings { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.vp__kana-row { display: inline-flex; align-items: flex-end; gap: 4px; }
.vp__mora {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 44px;
}
.vp__pitch { display: block; height: 16px; }
.vp__kana {
  font-family: var(--font-jp), var(--font-ui);
  font-size: 22px; font-weight: 500; color: var(--ink);
  line-height: 1.2;
}
.vp__roma {
  font-size: 10px; color: var(--ink-4); letter-spacing: 0.04em;
  text-transform: lowercase;
}
.vp__reading-meta { display: inline-flex; align-items: center; gap: 12px; }
.vp__reading-pat { color: var(--ink-3); font-size: 12px; }

.vp__pos-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3);
}
.vp__pos { font-weight: 500; }
.vp__pos--freq { color: var(--accent); }
.vp__pos-sep { color: var(--ink-5); }

.t-lead {
  font-family: var(--font-text);
  font-size: 19px; line-height: 1.55; color: var(--ink);
  max-width: 62ch; margin: 0;
}
.t-lead strong { font-weight: 600; }
.t-body { font-family: var(--font-ui); font-size: 14px; line-height: 1.55; color: var(--ink); }

.vp__senses {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 22px;
}
.vp__sense {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  padding-left: 0;
}
.vp__sense-n {
  color: var(--ink-4); font-size: 12px; padding-top: 4px;
  text-transform: lowercase;
}

/* Quick-reference / state cards */
.vp__qref {
  border: 1px solid var(--rule); padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper-2);
}
.vp__qref-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 4px 0;
  border-bottom: 1px solid var(--rule-3);
}
.vp__qref-row:last-child { border-bottom: 0; }

/* ───────── VOCAB · sections */
.vp__sect { padding: 36px 48px 28px; }
.vp__sect-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
}
.vp__sect-id { margin-left: auto; color: var(--ink-4); }
.vp__sect-lead { margin-bottom: 22px; max-width: 72ch; }

/* Conjugation paradigm grid */
.vp__paradigm {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.vp__para-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 2fr 1.2fr;
  align-items: baseline;
}
.vp__para-h, .vp__para-h--r {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 12px; border-bottom: 1px solid var(--rule-2);
}
.vp__para-h--r { text-align: right; }
.vp__para-cell {
  padding: 12px; border-bottom: 1px solid var(--rule-3);
  font-size: 13px; line-height: 1.4;
}
.vp__para-form {
  display: flex; align-items: baseline; gap: 10px; cursor: pointer;
  transition: background 100ms ease;
}
.vp__para-form:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); }
.vp__para-form.is-on { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.vp__para-form.is-on .vp__para-name { color: var(--accent); font-weight: 600; }
.vp__para-n { color: var(--ink-4); font-size: 11px; min-width: 22px; }
.vp__para-name { font-weight: 500; }
.vp__para-kanji {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 20px; font-weight: 500;
}
.vp__para-kana {
  font-family: var(--font-jp), var(--font-ui);
  font-size: 15px; color: var(--ink-2);
}
.vp__para-roma { color: var(--ink-3); font-size: 12px; }
.vp__para-gloss { color: var(--ink-2); }
.vp__para-meta { text-align: right; color: var(--ink-4); font-size: 11px; }

/* Practice slot */
.vp__practice {
  border: 1px solid var(--rule); background: var(--paper-2);
  padding: 18px;
}
.vp__practice-h { margin-bottom: 6px; }
.vp__practice-body {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px;
  align-items: center; padding-top: 14px;
}
.vp__practice-active {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 56px; font-weight: 500; line-height: 1;
  color: var(--ink); margin: 8px 0 4px;
}
.vp__practice-roma { color: var(--ink-3); font-size: 13px; }
.vp__practice-gloss { color: var(--ink-2); font-size: 13px; margin-top: 4px; }
.vp__practice-build {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 32px; font-weight: 500; margin: 12px 0 8px;
}
.vp__practice-stem { color: var(--ink); }
.vp__practice-plus, .vp__practice-eq { color: var(--ink-4); font-family: var(--font-mono); font-size: 22px; }
.vp__practice-suffix { color: var(--accent); font-weight: 600; }
.vp__practice-result { color: var(--ink); padding-left: 6px; border-left: 2px solid var(--accent); }
.vp__practice-hint { color: var(--ink-4); margin-top: 6px; }

/* Examples */
.vp__examples { display: flex; flex-direction: column; gap: 22px; }
.vp__example {
  display: grid; grid-template-columns: 80px 1fr; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-3);
}
.vp__ex-meta { display: flex; flex-direction: column; gap: 4px; color: var(--ink-4); }
.vp__ex-n { font-size: 13px; }
.vp__ex-jp {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  font-family: var(--font-jp-serif), var(--font-text);
  margin-bottom: 8px;
}
.vp__ex-tok {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 0 2px;
}
.vp__ex-jp-seg { font-size: 22px; font-weight: 500; line-height: 1.2; }
.vp__ex-kana { font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.vp__ex-pos { font-size: 9px; color: var(--ink-5); letter-spacing: 0.05em; }
.vp__ex-tok--focus .vp__ex-jp-seg { color: var(--accent); }
.vp__ex-tok--focus .vp__ex-pos { color: var(--accent); }
.vp__ex-gloss { font-family: var(--font-text); font-size: 16px; color: var(--ink-2); font-style: italic; }

/* Neighbors / containing-vocab grid */
.vp__neigh {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.vp__neigh-grid {
  display: grid;
  grid-template-columns: 0.6fr 1.2fr 1.4fr 2fr 1fr 0.8fr;
  align-items: baseline;
}
.kp__contain-grid {
  display: grid;
  grid-template-columns: 0.5fr 1.2fr 1.6fr 2fr 0.6fr 0.8fr;
  align-items: baseline;
}
.vp__neigh-h, .vp__neigh-h--r {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 12px; border-bottom: 1px solid var(--rule-2);
}
.vp__neigh-h--r { text-align: right; }
.vp__neigh-cell {
  padding: 10px 12px; border-bottom: 1px solid var(--rule-3);
  font-size: 13px;
}
.vp__neigh-jp {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 18px; font-weight: 500;
}
.vp__neigh-kana { font-family: var(--font-jp), var(--font-ui); color: var(--ink-2); }
.vp__neigh-d { color: var(--accent); font-weight: 500; }
.vp__neigh-freq { text-align: right; color: var(--ink-4); }
.vp__neigh-gloss { color: var(--ink); }
.vp__reg {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.05em;
  text-transform: uppercase; padding: 3px 6px;
  border: 1px solid var(--rule-2); color: var(--ink-3);
}
.vp__reg--neutral { color: var(--ink-3); }
.vp__reg--polite, .vp__reg--humble { color: var(--accent); border-color: var(--accent); }
.vp__reg--rough, .vp__reg--casual { color: var(--ink); border-color: var(--ink); }


/* ───────── KANJI page */
.kp__hero {
  display: grid; grid-template-columns: 360px 1fr;
  gap: 48px; padding: 40px 48px 32px;
  align-items: start;
}
.kp__glyph-block {
  display: flex; flex-direction: column; gap: 18px;
}
.kp__glyph {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 256px; line-height: 1; font-weight: 500;
  border: 1px solid var(--rule); padding: 20px 0;
  text-align: center; background: var(--paper-2);
}
.kp__glyph-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  font-size: 12px;
}
.kp__glyph-meta > div {
  display: flex; justify-content: space-between;
  padding: 4px 0; border-bottom: 1px solid var(--rule-3);
}

.kp__readings {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.kp__rd-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 2.4fr 0.8fr;
  align-items: baseline;
}
.kp__rd-h {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 12px; border-bottom: 1px solid var(--rule-2);
}
.kp__rd-cell {
  padding: 12px; border-bottom: 1px solid var(--rule-3);
  font-size: 13px; line-height: 1.4;
}
.kp__rd-type {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}
.kp__rd-reading {
  font-family: var(--font-jp), var(--font-ui);
  font-size: 18px; font-weight: 500;
}
.kp__rd-freq { text-align: right; color: var(--ink-4); }

.kp__split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border-top: 1px solid var(--rule);
}
.kp__decomp, .kp__practice { padding: 36px 48px 32px; }
.kp__decomp { border-right: 1px solid var(--rule); }

.kp__decomp-tree {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin: 14px 0 18px;
  padding: 18px; border: 1px solid var(--rule); background: var(--paper-2);
}
.kp__decomp-root, .kp__decomp-child {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.kp__decomp-glyph {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 56px; font-weight: 500; line-height: 1;
}
.kp__decomp-arrow { color: var(--ink-4); font-family: var(--font-mono); font-size: 14px; }
.kp__decomp-children {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%;
}
.kp__decomp-child {
  padding: 12px; border: 1px solid var(--rule-3); background: var(--paper);
}
.kp__decomp-child--phon { border-color: var(--ink); }
.kp__decomp-child--sem { border-color: var(--accent); }
.kp__decomp-roma { color: var(--ink-2); font-size: 11px; }
.kp__decomp-strokes { color: var(--ink-4); font-size: 10px; }
.kp__decomp-lead { margin-top: 14px; max-width: 56ch; }

.kp__lineage { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; }
.kp__lineage-row {
  display: grid; grid-template-columns: 70px 60px 1fr;
  align-items: center; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--rule-3);
}
.kp__lineage-form {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4);
}
.kp__lineage-glyph {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 32px; line-height: 1; font-weight: 500;
}

.kp__practice-modes {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 14px;
}
.kp__mode {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; padding: 7px 10px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-3);
  cursor: pointer;
}
.kp__mode.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kp__practice-step { margin-left: auto; color: var(--ink-4); }
.kp__canvas {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start;
}
.kp__svg {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--paper); border: 1px solid var(--rule);
}
.kp__feedback {
  border: 1px solid var(--rule); padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper-2);
}
.kp__feedback-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 12px; border-bottom: 1px solid var(--rule-3);
}
.kp__feedback-row:last-child { border: 0; }
.kp__feedback-ok { color: var(--ink); }
.kp__feedback-warn { color: var(--accent); }

.kp__stroke-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 4px; margin-top: 16px;
}
.kp__stroke-pill {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 6px 8px; border: 1px solid var(--rule);
  background: var(--paper); cursor: pointer;
  font-size: 10px; text-align: left;
}
.kp__stroke-pill.is-done { border-color: var(--rule); color: var(--ink-3); }
.kp__stroke-pill.is-done .t-mono { color: var(--ink); }
.kp__stroke-pill.is-active {
  border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--paper));
  color: var(--accent); border-width: 1.5px;
}
.kp__stroke-pill.is-future { color: var(--ink-4); }


/* ───────── SENTENCE BREAKDOWN */
.sb__hero { padding: 36px 48px 28px; display: flex; flex-direction: column; gap: 14px; }
.sb__sent {
  display: flex; flex-wrap: wrap; gap: 10px 6px; align-items: flex-end;
  font-family: var(--font-jp-serif), var(--font-text);
  padding: 8px 0;
}
.sb__tok {
  display: inline-block; padding: 4px 6px; cursor: pointer;
  font-size: 38px; font-weight: 500; line-height: 1.2;
  border-bottom: 2px solid transparent;
  transition: background 100ms ease, border-color 100ms ease;
}
.sb__tok ruby { display: inline; }
.sb__tok rt, .sb__furi {
  font-family: var(--font-jp), var(--font-ui);
  font-size: 11px; font-weight: 500; color: var(--ink-3);
}
.sb__tok:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.sb__tok.is-sel {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-bottom-color: var(--accent);
}
.sb__tok--has-kanji { color: var(--ink); }
.sb__gloss { display: flex; align-items: baseline; gap: 14px; }

.sb__stack { display: flex; flex-direction: column; }
.sb__layer {
  padding: 22px 48px; border-bottom: 1px solid var(--rule-2);
  transition: opacity 120ms ease;
}
.sb__layer.is-collapsed { opacity: 0.45; padding: 14px 48px; }
.sb__layer.is-collapsed > :not(.sb__layer-head) { display: none; }
.sb__layer-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
}
.sb__layer-meta { margin-left: auto; color: var(--ink-4); }

/* bunsetsu layer */
.sb__bunsetsu { display: flex; flex-direction: column; gap: 10px; }
.sb__bun {
  display: grid; grid-template-columns: 1.4fr 30px 1fr 1.6fr;
  gap: 14px; align-items: center; padding: 8px 0;
  border-bottom: 1px solid var(--rule-3);
}
.sb__bun-tokens {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 22px; font-weight: 500;
  display: flex; gap: 4px;
}
.sb__bun-bracket { color: var(--ink-4); font-family: var(--font-mono); }
.sb__bun-meta { display: flex; flex-direction: column; gap: 2px; }
.sb__bun-role { color: var(--accent); font-size: 11px; }
.sb__bun-gloss { font-family: var(--font-text); font-style: italic; color: var(--ink-2); font-size: 14px; }

/* morph layer */
.sb__morph-grid {
  display: grid;
  grid-template-columns: 0.4fr 1.2fr 1fr 1fr 1.4fr 1.6fr 0.7fr 0.5fr;
  align-items: baseline;
  border-top: 1px solid var(--ink);
}
.sb__mh {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4);
  padding: 10px 10px; border-bottom: 1px solid var(--rule-2);
}
.sb__mc {
  padding: 10px; border-bottom: 1px solid var(--rule-3);
  font-size: 13px; cursor: default;
}
.sb__mc.is-sel { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.sb__mc-jp {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 17px; font-weight: 500; cursor: pointer;
}
.sb__mc-pos { color: var(--ink-3); font-size: 11px; }

/* kanji layer */
.sb__kanji-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sb__kanji-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 18px; border: 1px solid var(--rule); background: var(--paper-2);
  min-width: 96px;
}
.sb__kanji-glyph {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 44px; font-weight: 500; line-height: 1;
}
.sb__kanji-r { color: var(--ink-2); font-size: 11px; }
.sb__kanji-meta { color: var(--ink-4); font-size: 10px; }

/* split detail / path */
.sb__split {
  display: grid; grid-template-columns: 1.2fr 1fr;
  border-top: 1px solid var(--rule);
}
.sb__detail, .sb__path { padding: 28px 48px; }
.sb__detail { border-right: 1px solid var(--rule); }
.sb__detail-head {
  display: flex; align-items: baseline; gap: 16px; margin: 14px 0 18px;
}
.sb__detail-jp {
  font-family: var(--font-jp-serif), var(--font-text);
  font-size: 56px; font-weight: 500; line-height: 1;
}
.sb__detail-kana {
  font-family: var(--font-jp), var(--font-ui);
  font-size: 22px; font-weight: 500; color: var(--ink-2);
}
.sb__detail-roma { color: var(--ink-4); font-size: 14px; }
.sb__detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.sb__detail-grid > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--rule-3); font-size: 12px;
}
.sb__particle { padding-top: 8px; }
.sb__particle-body { font-family: var(--font-text); font-size: 16px; line-height: 1.6; max-width: 56ch; }

.sb__path-list {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-direction: column;
}
.sb__path-item {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--rule-3);
  font-size: 13px;
}
.sb__path-item.is-frontier { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.sb__path-item.is-frontier .t-ui { color: var(--accent); font-weight: 500; }
.sb__path-d { color: var(--ink-4); font-size: 11px; }
.sb__path-foot { padding-top: 14px; color: var(--ink-4); }


/* ───────── Mastery dots — ensure all states render */
.mastery-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--ink);
  vertical-align: middle;
}
.mastery-dot--mastered { background: var(--ink); border-color: var(--ink); }
.mastery-dot--learning { background: var(--paper); border-color: var(--ink); }
.mastery-dot--review   { background: var(--accent); border-color: var(--accent); }
.mastery-dot--locked   { background: var(--paper); border-color: var(--ink-5); border-style: dashed; }