/* GlyphClip — the mnemonic animation on kana teaching cards.
   Layout only; every colour is a token (decision 0008). The strokes inherit
   their ink from `color` (`stroke="currentColor"` on the group) and take the
   object colour from --gclip-object while the group carries .is-object, both
   resolved at paint time, so the theme owns them without the script ever
   reading or writing a colour. */

.gclip{
  margin:14px auto 0;
  max-width:260px;
}

.gclip-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  min-height:150px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--cell);
}

/* One cell per character. A single card has one; a confusable pair has two,
   side by side, because the discrimination is the lesson. */
.gclip-cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.gclip-tag{
  font-size:13px;
  line-height:1;
  color:var(--dim);
}
.gclip.is-pair .gclip-stage{gap:10px}
/* Two clips have to fit the same 260px card the single one does. */
.gclip.is-pair .gclip-svg{width:104px;height:104px}

.gclip-svg{
  width:132px;
  height:132px;
  display:block;
  overflow:visible;
  color:var(--ink);
  --gclip-object:var(--accent);
  transition:color .2s ease;
}
/* The morph. The script toggles the class at the midpoint; a class rule beats
   the group's presentation attribute, and the token is set on .gclip-svg so
   any override of it there (the drill overlay's) reaches the strokes too. */
.gclip-strokes.is-object{stroke:var(--gclip-object)}

/* An icon, not a worded button: the label would have to be translated, would
   change width per locale, and would compete with the caption right below it.
   It sits inside the stage so the clip keeps its height whether or not it is
   running, and is sized to the 24px touch floor (#138). */
.gclip-play{
  position:absolute;
  right:6px;
  bottom:6px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--dim);
  cursor:pointer;
  opacity:.7;
  transition:opacity .15s ease,color .15s ease,background .15s ease;
}
.gclip-play svg{width:15px;height:15px;display:block}
.gclip-play:hover,
.gclip-play:focus-visible{
  opacity:1;
  color:var(--accent);
  background:var(--hover);
}
/* Hidden while running so it never overlaps the object mid-morph, but kept in
   flow so the stage does not reflow when it comes back. */
.gclip.is-playing .gclip-play{opacity:0;pointer-events:none}

.gclip-cap{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--dim);
  text-align:left;
}
.gclip-cap b{
  color:var(--accent);
  font-weight:600;
}
.gclip-cap[lang="hi"]{
  font-family:var(--devanagari);
  font-size:13px;
  line-height:1.75;
}

@media (prefers-reduced-motion:reduce){
  .gclip-svg,.gclip-play{transition:none}
}