/* ═══════════════════════════════════════════════════════════════════
   Sound Shift Decoder (SSD) v5 — Component CSS
   - Layer 1: Word columns (bars / IPA-Resp / kinetic chars)
   - Layer 2: Stepper that drives Layer 1 (案A 統合モード)
   - All kinetic chars gated on data-rt (rule_type), not data-s (category)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ CSS Variables — sound-change family colours ═══ */
:root {
  --sc-family-linking: #5B9CF5;
  --sc-family-linking-light: #7BBAF5;
  --sc-family-reduction: #E8A84C;
  --sc-family-modification: #B07AF5;
  --sc-family-flapping: #4CC9B0;
  --sc-family-allophonic: #A89B8C;
  /* v5 short aliases (used in selectors below) */
  --r: var(--sc-family-reduction);
  --m: var(--sc-family-modification);
  --f: var(--sc-family-flapping);
  --l: var(--sc-family-linking);
  --ll: var(--sc-family-linking-light);
  --a: var(--sc-family-allophonic);
  /* Backward-compat aliases for legacy code */
  --sc-cv_linking: var(--sc-family-linking);
  --sc-vv_r: var(--sc-family-linking-light);
  --sc-flapping: var(--sc-family-flapping);
  --sc-affrication: var(--sc-family-modification);
  --sc-elision: var(--sc-family-reduction);
  --sc-dark_l: var(--sc-family-allophonic);
  --sc-unreleased_stop: var(--sc-family-allophonic);
  --sc-weak: var(--sc-family-reduction);
}

/* ═══ Container ═══ */
.ssd-container {
  display: block;
  width: 100%;
}

/* ═══ Stage (Layer 1 + Layer 2 wrapper) ═══ */
.stage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══ Layer 1: Word columns ═══ */
.main {
  position: relative;
  width: 100%;
  padding: 0 2px;
}
.main svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.ssd-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}
/* Soft break placeholder at comma/dash/sentence-end. Inert by default; the
   .has-breaks class (toggled by evalBreaks when content overflows) turns it
   into a forced flex line break. */
.ssd-break {
  flex-basis: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ssd-row.has-breaks .ssd-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin-bottom: 14px;
}
.wc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* tie で連結された単語ペアを束ねる。.ssd-row が flex-wrap で折り返す際、
   このグループは flex item として一塊に扱われるので、アーチ（リンキング線）が
   行をまたいで分断されない。 */
.ssd-word-group {
  display: flex;
  align-items: flex-end;
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 50px;
}
.bar {
  width: 6px;
  border-radius: 2px;
  transition: height 0.5s cubic-bezier(0.22,1,0.36,1);
}
.lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  white-space: nowrap;
  margin-top: 3px;
  color: var(--text-muted);
  opacity: 0.75;
  min-height: 0.8em;
  transition: all 0.3s;
}
.lbl.hide {
  opacity: 0;
  height: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.eng {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  white-space: nowrap;
  margin-top: 3px;
  text-align: center;
  line-height: 1.4;
}
.gap {
  width: 8px;
  flex-shrink: 0;
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.lgap {
  width: 8px;
  flex-shrink: 0;
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
}

/* ═══ Kinetic chars ═══ */
.ch {
  display: inline;
  transition: all 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ch-s4 {
  color: var(--coral);
  font-weight: 700;
  font-size: 0.88rem;
}
.ch-s3 {
  color: var(--helix-blue);
  font-weight: 700;
  font-size: 0.88rem;
}
.ch-wk {
  color: var(--text-muted);
  opacity: 0.55;
  font-size: 0.78rem;
}
/* Hidden by default — VV-insert chars only appear when their rule is active */
.ch[data-rt="vv_r"], .ch[data-rt="vv_y"], .ch[data-rt="vv_w"] { display: none; }

/* ═══ Stepper-driven kinetic state — gate on data-rt (rule_type) ═══ */
/* Linking-family lgap shrink */
.stage[data-active~="cv_linking"] .lgap,
.stage[data-active~="cc_linking"] .lgap,
.stage[data-active~="vv_r"] .lgap,
.stage[data-active~="vv_y"] .lgap,
.stage[data-active~="vv_w"] .lgap,
.stage[data-shrink="1"] .lgap { width: 1px; }

/* Reduction family */
.stage[data-active~="weak"] .ch[data-rt="weak"] {
  opacity: 0.4;
  color: var(--r);
  text-decoration: underline;
  text-decoration-color: rgba(232,168,76,0.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.stage[data-active~="elision"] .ch[data-rt="elision"] {
  opacity: 0.1;
  color: var(--r);
  text-decoration: line-through;
  text-decoration-color: rgba(232,168,76,0.5);
}

/* Linking family */
.stage[data-active~="cv_linking"] .ch[data-rt="cv_linking"] {
  color: var(--l);
  text-decoration: underline;
  text-decoration-color: rgba(91,156,245,0.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.stage[data-active~="cc_linking"] .ch[data-rt="cc_linking"] {
  color: var(--l);
  text-decoration: underline;
  text-decoration-color: rgba(91,156,245,0.6);
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* VV insertion (R / Y / W) — appear with parens */
.stage[data-active~="vv_r"] .ch[data-rt="vv_r"],
.stage[data-active~="vv_y"] .ch[data-rt="vv_y"],
.stage[data-active~="vv_w"] .ch[data-rt="vv_w"] {
  display: inline;
  color: var(--ll);
  font-size: 0.65em;
  font-weight: 400;
  opacity: 0.7;
}
.stage[data-active~="vv_r"] .ch[data-rt="vv_r"]::before,
.stage[data-active~="vv_y"] .ch[data-rt="vv_y"]::before,
.stage[data-active~="vv_w"] .ch[data-rt="vv_w"]::before { content: '('; color: var(--ll); opacity: 0.5; }
.stage[data-active~="vv_r"] .ch[data-rt="vv_r"]::after,
.stage[data-active~="vv_y"] .ch[data-rt="vv_y"]::after,
.stage[data-active~="vv_w"] .ch[data-rt="vv_w"]::after { content: ')'; color: var(--ll); opacity: 0.5; }

/* Flapping */
.stage[data-active~="flapping"] .ch[data-rt="flapping"] {
  color: var(--f);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(76,201,176,0.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Allophonic — separate styles for dark_l vs unreleased_stop */
.stage[data-active~="dark_l"] .ch[data-rt="dark_l"] {
  color: var(--a);
  opacity: 0.65;
  text-decoration: underline;
  text-decoration-color: rgba(168,155,140,0.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.stage[data-active~="unreleased_stop"] .ch[data-rt="unreleased_stop"] {
  color: var(--a);
  font-weight: 700;
  text-decoration: overline;
  text-decoration-color: rgba(168,155,140,0.7);
  text-decoration-thickness: 2px;
}

/* Modification — assimilation (generic / nasal / stop) + affrication / yod */
.stage[data-active~="assimilation"] .ch[data-rt="assimilation"],
.stage[data-active~="nasal_assimilation"] .ch[data-rt="nasal_assimilation"],
.stage[data-active~="stop_assimilation"] .ch[data-rt="stop_assimilation"],
.stage[data-active~="affrication"] .ch[data-rt="affrication"],
.stage[data-active~="yod_coalescence"] .ch[data-rt="yod_coalescence"] {
  color: var(--m);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(176,122,245,0.6);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ═══ Tags ═══ */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s 0.15s;
}
.stage[data-active]:not([data-active=""]) .tags { max-height: 40px; opacity: 1; }
.tag {
  font-size: 0.52rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.td { width: 5px; height: 5px; border-radius: 50%; }

/* ═══ Toggle ═══ */
.tog {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tog-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  transition: all 0.3s;
  flex-shrink: 0;
}
.tog-track.on {
  background: rgba(43,107,242,0.25);
  border-color: var(--helix-blue);
}
.tog-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.tog-track.on .tog-thumb {
  left: 22px;
  background: var(--helix-blue);
  box-shadow: 0 0 8px rgba(43,107,242,0.5);
}
.tog-labels { display: flex; flex-direction: column; }
.tog-main {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.3s;
}
.tog-track.on ~ .tog-labels .tog-main { color: var(--text); }
.tog-sub {
  font-size: 0.52rem;
  color: var(--text-muted);
  opacity: 0.6;
}
.stepidx {
  font-size: 0.55rem;
  color: var(--text-muted);
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
}

/* ═══ Label toggle (IPA / Respelling / 非表示) ═══ */
.ltog {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 8px;
}
.lb {
  padding: 3px 10px;
  font-size: 0.58rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.lb:first-child { border-radius: 6px 0 0 6px; }
.lb:last-child { border-radius: 0 6px 6px 0; }
.lb.on {
  background: rgba(43,107,242,0.15);
  border-color: var(--helix-blue);
  color: var(--text);
}

/* ═══ Layer 2: Stepper ═══ */
.l2-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s;
}
.l2-btn:hover { border-color: rgba(43,107,242,0.3); color: var(--text); }
.l2-btn .chev { transition: transform 0.3s; font-size: 0.6rem; }
.l2-btn.open .chev { transform: rotate(180deg); }
.l2-body {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1);
}
.l2-body.open { max-height: 2000px; }

.steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
}
.stp {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s;
}
.stp:hover { background: rgba(255,255,255,0.02); }
.stp.active {
  background: rgba(43,107,242,0.05);
  border-color: rgba(43,107,242,0.15);
}
.sn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  margin-top: 2px;
}
.stp.active .sn {
  background: var(--helix-blue);
  color: white;
  border-color: var(--helix-blue);
}
.stp.done .sn {
  border-color: rgba(52,211,153,0.4);
  color: #34D399;
  background: rgba(52,211,153,0.1);
}
.si { flex: 1; min-width: 0; }
.sl {
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ss {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 1px;
  font-family: 'JetBrains Mono', monospace;
}
.sd { margin-top: 4px; display: none; }
.stp.active .sd { display: block; }
.stp.active .ss { display: none; }
.cat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.desc {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Step word display (案B 累積リスペリング) */
.sw {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 0 2px;
}
.se {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.3;
}
.sr {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  line-height: 1.2;
  min-height: 0.6em;
  margin-top: 1px;
}
.nr { color: var(--r); }
.nf { color: var(--f); }
.nl { color: var(--l); }
.nll { color: var(--ll); }
.na { color: var(--a); }
.nm { color: var(--m); }
.pv { opacity: 0.4; }
.sc .se { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.scr .se { text-decoration-color: rgba(232,168,76,0.5); opacity: 0.5; }
.scl .se { text-decoration-color: rgba(91,156,245,0.5); }
.scll .se { text-decoration-color: rgba(123,186,245,0.5); }
.scf .se { text-decoration-color: rgba(76,201,176,0.5); }
.sca .se { text-decoration-color: rgba(168,155,140,0.5); }
.scm .se { text-decoration-color: rgba(176,122,245,0.5); }
.st4 { font-weight: 700; color: var(--coral); }
.st3 { font-weight: 700; color: var(--helix-blue); }
.resyl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.8;
  padding: 4px 0;
}
.resyl .dt { color: var(--text-muted); opacity: 0.3; }

/* ═══ Click-to-expand (for entry_detail) ═══ */
.ssd-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ssd-collapse.open { overflow: visible; }
.ssd-trigger {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ssd-trigger:hover strong { color: var(--helix-blue); }
.ssd-icon {
  font-size: 0.8rem;
  color: var(--helix-blue);
  margin-right: 5px;
  opacity: 0.6;
}
.ssd-trigger:hover .ssd-icon { opacity: 1; }
.ssd-chev {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.3s;
  margin-left: 4px;
  display: inline-block;
}

/* ═══ Rich popover for kinetic chars ═══ */
.ch[data-tip] { cursor: help; }
.ssd-popover {
  position: absolute;
  z-index: 9999;
  background: var(--surface2, #1a1f2e);
  border: 1px solid var(--border, #2a3040);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  max-width: 280px;
  pointer-events: none;
  animation: ssd-pop-in 0.15s ease;
}
@keyframes ssd-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ssd-pop-head {
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}
.ssd-pop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ssd-pop-body {
  font-size: 0.68rem;
  color: var(--text-muted, #7B8CA8);
  line-height: 1.4;
  font-family: 'JetBrains Mono', monospace;
}