/* Japanese-words variant (/jp) — overrides layered on top of cogs.css.
   Each pillar cog sets --cog-accent / --cog-light / --cog-stroke / --cog-hot /
   --cog-glow inline (see cogs-jp.js); everything falls back to the shared
   orange, so the core cog keeps the brand treatment. */

.cog.active {
  filter: var(--cog-glow, url(#glow));
}
.cog.active .gear-body {
  fill: var(--cog-hot, url(#metalHot));
  stroke: var(--cog-stroke, #5a2c00);
}
.cog:focus-visible .hub-ring {
  stroke: var(--cog-accent, var(--accent));
}

/* Pillar icons take their cog's theme colour (variant A draws them neutral
   white); on hover they brighten to the light shade of the same theme. */
.cog-icon {
  stroke: var(--cog-accent, #e8e2db);
}
.cog-icon .fill {
  fill: var(--cog-accent, #e8e2db);
}
.cog.active .cog-icon {
  stroke: var(--cog-light, var(--accent));
}
.cog.active .cog-icon .fill {
  fill: var(--cog-light, var(--accent));
}

/* Fixed-height description: pillar copy is longer than the resting copy, and
   letting the panel grow on hover shoved the whole section around. Sized for
   the longest pillar body (~5 lines at panel width). */
#cog-body {
  height: 8.4em;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 880px) {
  #cog-body {
    height: auto;
    min-height: 8.4em;
  }
}

/* --- the mantra words (info panel, resting state) --------------------------
   The four words of the mantra as a 2×2 legend under the intro copy. Each chip
   carries its cog's colour via --w (set inline in jp.html — mirror of the cog
   theme colours in cogs-jp.js). Hovering a chip lights its cog (wired in JS);
   when a cog is focused, the other chips dim. */

.mantra-words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.9rem;
  width: 100%;
  margin: 0.1rem 0 0.4rem;
  text-align: left;
}
.mantra-words .word {
  display: grid;
  grid-template-columns: auto 1fr auto; /* kanji | romaji+gloss | cog icon */
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    border-color 0.2s ease;
}
.mantra-words .word:hover {
  border-color: color-mix(in srgb, var(--w) 65%, var(--border));
}
.mantra-words .word .kanji {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--w);
  font-family:
    'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', sans-serif;
}
.mantra-words .word .text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.mantra-words .word .romaji {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.mantra-words .word .gloss {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The cog's hub icon, repeated on its chip (injected by cogs-jp.js). */
.word-icon {
  width: 20px;
  height: 20px;
  overflow: visible;
}
.word-icon .cog-icon {
  stroke: var(--w);
  stroke-width: 2.6; /* compensates the ~0.7x scale-down from the hub size */
}
.word-icon .cog-icon .fill {
  fill: var(--w);
}
/* A cog (or chip) is focused: dim the other words, light the matching one. */
.mantra-words.focused .word {
  opacity: 0.35;
}
.mantra-words.focused .word.on {
  opacity: 1;
  border-color: color-mix(in srgb, var(--w) 65%, var(--border));
}

@media (max-width: 880px) {
  /* cog-info centres at this width; keep the chips readable + left-aligned */
  .mantra-words {
    max-width: 420px;
  }
}