/* ================================================================
   pages/pinyin.css — the beginner pinyin chart (site/resources/pinyin.html).
   Loaded after pages/tocfl.css, which the page reuses for its mode tabs,
   toggle button, FAQ, closing CTA and attribution line. This file styles only
   what is new: sound cards, tone buttons, final cards and the syllable chart.
   ----------------------------------------------------------------
   The tool's signature colour is lavender, so it reads as a sibling of the
   TOCFL tool (sky-blue) rather than the same thing. Tone colour is the one
   piece of real semantics here: every tone keys off [data-tone="1..4"], so a
   learner sees the same colour for tone 3 everywhere on the page.
   ================================================================ */

.pinyin-tool {
  --pin:       var(--lavender);
  --pin-deep:  #7a6bc4;
  --pin-tint:  rgba(213,207,251,0.34);

  /* Four tones, four hues — flat / rising / dipping / falling. Light enough to
     carry black text at 0.8rem, distinct enough to tell apart at a glance. */
  --tone-1: #bee0f0;
  --tone-2: #b9d4b5;
  --tone-3: #ffd4b8;
  --tone-4: #ffafa8;

  max-width: var(--container-max);
  margin: 0 auto;
  padding: 36px var(--container-pad) 30px;
}

[data-tone="1"] { --tone: var(--tone-1); }
[data-tone="2"] { --tone: var(--tone-2); }
[data-tone="3"] { --tone: var(--tone-3); }
[data-tone="4"] { --tone: var(--tone-4); }


/* ============ PAGE HEADER · tool-specific tint ============ */

.pinyin-header {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(213,207,251,0.42), transparent 55%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.pinyin-header .header-text { max-width: 820px; }
.pinyin-header h1 { font-size: clamp(1.8rem, 2.6vw + 1rem, 2.8rem); margin-bottom: 10px; }
.pinyin-header .deck {
  font-size: 1.02rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 680px;
}


/* ============ TOOLBAR ============ */

.pinyin-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
.bopomofo-toggle[aria-pressed="true"] { background: var(--pin-tint); border-color: var(--pin); }

.pinyin-status {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
  line-height: 1.5;
}

.pinyin-panel[hidden] { display: none; }

.pinyin-intro {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 26px;
  max-width: 76ch;
}
.pinyin-intro b { color: var(--ink); }

/* The ㄅㄆㄇㄈ toggle hides every bopomofo reading in the tool at once. */
.pinyin-tool.bpmf-off .sound-card-b,
.pinyin-tool.bpmf-off .final-card-b,
.pinyin-tool.bpmf-off .syl-row-name .bpmf,
.pinyin-tool.bpmf-off .pinyin-block-b { display: none; }

/* The initial each chart block opens with is playable, like its card on the
   Initials tab. Styled as the heading it already was, not as a control. */
.pinyin-block-sound {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  margin: -2px -8px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft);
}
.pinyin-block-sound:hover { background: var(--pin-tint); }
.pinyin-block-sound.is-speaking { background: var(--pin-tint); box-shadow: 0 0 0 2px var(--pin); }


/* ============ GROUPS (shared by initials + finals) ============ */

.pinyin-group { margin-bottom: 34px; }
.pinyin-group-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pin-deep);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cream-deep);
}


/* ============ INITIALS · one card per consonant, no tone ============ */

.pinyin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
}

.sound-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-left: 4px solid var(--pin);
  border-radius: var(--r-md);
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft);
}
.sound-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(42,36,56,0.10);
  border-left-color: var(--pin-deep);
}
.sound-card.is-speaking { border-left-color: var(--pin-deep); background: var(--pin-tint); }

.sound-card-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.sound-card-p {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.sound-card-b {
  font-family: var(--font-han);
  font-size: 1.15rem;
  color: var(--pin-deep);
}
.sound-card-demo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent-deep);
}
.sound-card-demo .han { font-family: var(--font-han); font-style: normal; }
.sound-card-hint {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sound-card-hint b { color: var(--ink); font-weight: 700; }


/* ============ FINALS · card + its four tones ============ */

.pinyin-finals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* The whole card is the control now — one final, one toneless sound, like the
   initials. Tones live on the "All syllables with tones" tab. */
.final-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-left: 4px solid var(--pin);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform var(--t-base) var(--ease-soft),
              box-shadow var(--t-base) var(--ease-soft),
              border-color var(--t-fast) var(--ease-soft);
}
.final-card.is-playable { cursor: pointer; }
.final-card.is-playable:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(42,36,56,0.10);
  border-left-color: var(--pin-deep);
}
.final-card.is-speaking { border-left-color: var(--pin-deep); background: var(--pin-tint); }
/* No recording and no syllable to borrow one from — shown, but inert. */
.final-card:not(.is-playable) { opacity: 0.55; border-left-color: var(--cream-deep); }
.final-card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.final-card-p {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.final-card-b {
  font-family: var(--font-han);
  font-size: 1.1rem;
  color: var(--pin-deep);
}
.final-card-alone {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-left: auto;
}
.final-card-alone b { color: var(--accent-deep); }
.final-card-note,
.final-card-via {
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
}
.final-card-note,
.final-card-via {
  color: var(--pin-deep);
  background: var(--pin-tint);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}
.final-card-note b { color: var(--ink); }


/* ============ TONE BUTTONS ============ */

.pinyin-tones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Two by two inside the card. Four across needs ~360px to fit zhuāng without
   wrapping, which would force the whole grid to that width and waste it on
   every short syllable; 2×2 keeps the card at ~212px, so a phone gets a
   comfortable single column and a desktop gets five or six. */
.syl-row .pinyin-tones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex-wrap: nowrap;
  gap: 5px;
}
/* Sized for the worst case — zhuāng, the longest toned syllable in the chart —
   so no button ever has to wrap or clip inside a card. */
.syl-row .tone-btn {
  font-size: 0.86rem;
  padding: 6px 7px 6px 5px;
  gap: 4px;
}
.syl-row .tone-num { width: 16px; height: 16px; font-size: 0.62rem; }

.tone-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--tone, var(--cream-deep));
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 8px 6px 6px;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft),
              box-shadow var(--t-fast) var(--ease-soft);
}
/* transform + shadow only — never anything that changes the button's box, or
   the whole row rewraps as the pointer moves across it. */
.tone-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(42,36,56,0.14);
}
.tone-btn.is-speaking {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--glow);
}

/* Tone number, so the four are distinguishable without relying on colour. */
.tone-num {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--ink);
  background: rgba(254,248,240,0.75);
  border-radius: 50%;
}

/* The example character, revealed on hover — the sound comes first. */
.tone-han {
  font-family: var(--font-han);
  font-size: 0.95rem;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--t-base) var(--ease-soft), opacity var(--t-base) var(--ease-soft);
}
.syl-row .tone-han { display: none; }   /* would change the column width */
.tone-btn:hover .tone-han,
.tone-btn:focus-visible .tone-han,
.tone-btn.is-speaking .tone-han { max-width: 1.4em; opacity: 1; }

/* A tone no TBCL word uses: shown, so the gaps in the language are visible,
   but there is nothing to play. */
.tone-btn.is-empty {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--cream-deep);
  border-style: dashed;
  cursor: not-allowed;
}
.tone-btn.is-empty .tone-num { background: transparent; color: var(--ink-soft); }
.tone-btn.is-empty:hover { transform: none; box-shadow: none; }

.pinyin-nothing {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
}


/* ============ FULL SYLLABLE CHART ============ */

.pinyin-jump {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 26px;
}
.pinyin-jump a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 999px;
  padding: 4px 10px;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.pinyin-jump a:hover { background: var(--pin-tint); color: var(--pin-deep); }

.pinyin-block {
  scroll-margin-top: 70px;        /* clear the sticky jump bar */
  margin-bottom: 34px;
}
.pinyin-block-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cream-deep);
}
.pinyin-block-b {
  font-family: var(--font-han);
  font-size: 1.3rem;
  color: var(--pin-deep);
}
.pinyin-block-p {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
}
.pinyin-block-n {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-left: auto;
}

/* Each syllable is a card of two fixed lines: its name, then its four tones.
   The earlier one-line layout put the name in a 92px column, so "zhuang ㄓㄨㄤ"
   wrapped while "ba ㄅㄚ" did not — every row a different height, which is what
   made the chart look ragged. Giving the name its own line removes the
   dependency on syllable length entirely: every card is the same size. */
.pinyin-syls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 212px), 1fr));
  gap: 10px;
}

.syl-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 11px;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-md);
}

.syl-row-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.syl-row-name .bpmf {
  font-family: var(--font-han);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--pin-deep);
}


/* ============ SOUND CARD · what was just played ============ */

/* Fixed, not sticky: this bar appears and disappears as sounds are played, and
   anything in normal flow would reflow the chart under the user's cursor every
   time — which read as the buttons jumping around. */
.pinyin-sound {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--cream);
  border: 1px solid var(--pin);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(42,36,56,0.16);
  padding: 10px 16px;
}
.pinyin-sound[hidden] { display: none; }

.pinyin-sound-han {
  font-family: var(--font-han);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.pinyin-sound-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pinyin-sound-pinyin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent-deep);
}
.pinyin-sound-gloss {
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
}
.pinyin-sound-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pin-deep);
  text-decoration: none;
  white-space: nowrap;
}
.pinyin-sound-link:hover { color: var(--ink); }
.pinyin-sound-link[hidden] { display: none; }

.pinyin-sound-close {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.pinyin-sound-close:hover { background: var(--cream-deep); color: var(--ink); }




/* ============ HOW TO USE ============ */

.pinyin-how {
  max-width: var(--container-max);
  margin: 10px auto 0;
  padding: 0 var(--container-pad);
}
.pinyin-how h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.4vw + 1rem, 1.9rem);
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 18px;
}
.pinyin-how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.pinyin-how-steps li {
  counter-increment: step;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-md);
  padding: 20px 22px 20px 22px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pinyin-how-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--ink);
  background: var(--pin);
  border-radius: 50%;
  margin-bottom: 12px;
}
.pinyin-how-steps b { color: var(--ink); }

/* Layout comes from .tocfl-hub-faq, which this section also carries. */
.pinyin-faq { margin-top: 56px; }

/* ============ TOUCH ============
   One card per row, and the tones stay 2×2. Four across does not fit: a 360px
   phone leaves ~296px inside the card, so four columns give 70px each while
   zhuāng needs about 80 — it would clip. Two columns give ~145px, which is a
   comfortable tap target as well. */
@media (max-width: 560px) {
  .pinyin-syls { grid-template-columns: 1fr; gap: 8px; }
  .syl-row { padding: 12px 14px; }
  .syl-row .tone-btn { padding: 11px 8px; font-size: 0.92rem; }
  .syl-row .tone-num { width: 18px; height: 18px; font-size: 0.66rem; }
  .syl-row-name { font-size: 1.08rem; }

  /* The jump bar is the only way around 404 cards on a phone, so give its
     chips real tap targets and let it scroll sideways rather than grow tall. */
  .pinyin-jump {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px;
    gap: 4px;
  }
  .pinyin-jump::-webkit-scrollbar { display: none; }
  .pinyin-jump a { flex: 0 0 auto; padding: 8px 12px; }

  /* Three tabs, one of them long — let them wrap instead of overflowing. */
  .pinyin-modes { display: flex; flex-wrap: wrap; width: 100%; border-radius: var(--r-lg); }
  .pinyin-modes .pinyin-mode { flex: 1 1 auto; padding: 9px 14px; font-size: 0.86rem; }

  .pinyin-cards, .pinyin-finals { grid-template-columns: 1fr 1fr; }

  .pinyin-sound { gap: 10px; padding: 8px 12px; border-radius: var(--r-lg); bottom: 10px; }
  .pinyin-sound-han { font-size: 1.7rem; }
  .pinyin-sound-gloss { max-width: 18ch; }
  .pinyin-sound-link { display: none; }   /* the gloss matters more on a phone */
}


/* ============ HOVER HIT-AREA BUFFER ============
   These elements lift on :hover. The transform moves their hit area with them,
   so a cursor resting in the bottom few pixels falls off the element — which
   drops the hover, which drops the element back under the cursor, which picks
   it up again: a flicker loop. The strip below each one extends the hover area
   downward by exactly the lift, so the pointer can never fall out of it. It
   sits outside the element's box, so it covers no content and blocks no click.
   ============================================== */
.sound-card { position: relative; }
.sound-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3px;
}
.final-card { position: relative; }
.final-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 3px;
}
.tone-btn { position: relative; }
.tone-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 2px;
}