/* Little Lantern — global Sound Breakdown panel styles (shared by pinyin-pairs,
   foundations, …). Class names kept as `pp-*` for continuity. Colour tokens
   (--paper, --ink, --brown, --gold, --red, --ll-muted, --ll-font-*) come from
   the site's styles.css, loaded on every page that uses this panel. */

/* the pane — slides in from the right like the grammar pane */
.pp-breakdown {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(400px, 92vw); text-align: left;
  background: var(--paper);
  border-left: 1px solid rgba(123, 92, 67, 0.2);
  box-shadow: -14px 0 44px rgba(79, 51, 28, 0.2);
  padding: calc(1.6rem + env(safe-area-inset-top, 0px)) 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; z-index: 70;
  transform: translateX(100%); transition: transform 0.28s ease;
}
.pp-breakdown.is-open { transform: translateX(0); }
/* wider pane for longer words so the per-syllable columns have room */
.pp-breakdown.pp-breakdown--w3 { width: min(540px, 94vw); }
.pp-breakdown.pp-breakdown--w4 { width: min(680px, 96vw); }
@media (max-width: 620px) {
  /* Phones: there's no hover, so the breakdown is opened by press-and-hold and
     covers the whole screen (slides up from the bottom) rather than a right-side
     drawer. The ✕ (enlarged below) closes it. */
  .pp-breakdown {
    top: 0; left: 0; right: 0; width: 100%; max-width: none;
    height: 100%; max-height: 100%;
    border-left: 0; border-radius: 0;
    box-shadow: 0 -14px 44px rgba(79, 51, 28, 0.24);
    transform: translateY(100%);
  }
  .pp-breakdown.is-open { transform: translateY(0); }
  .pp-breakdown.pp-breakdown--w3,
  .pp-breakdown.pp-breakdown--w4 { width: 100%; }
  .pp-bd-close {
    top: calc(0.7rem + env(safe-area-inset-top, 0px)); right: 0.8rem;
    width: 2.6rem; height: 2.6rem; font-size: 1.35rem;
  }
}
.pp-bd-close {
  position: absolute; top: 0.8rem; right: 0.9rem;
  width: 2rem; height: 2rem; min-width: 0; min-height: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(123, 92, 67, 0.25); border-radius: 999px;
  background: var(--paper); color: var(--brown); font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.pp-bd-close:hover { background: #fff3ea; }
.pp-bd-eyebrow { margin: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
/* "Every Chinese syllable is made up of Initial + Final + Tone" explainer */
.pp-bd-formula { margin: 0.35rem 0 0.55rem; font-size: 0.82rem; line-height: 1.5; color: var(--brown); }
.pp-bd-formula b { color: var(--ink); }
.pp-bd-word { margin: 0.15rem 0 0.15rem; font-family: var(--ll-font-sans); font-weight: 800; font-size: 1.55rem; color: var(--ink); }
.pp-bd-eng { margin: 0 0 0.7rem; font-family: var(--ll-font-sans); font-size: 0.9rem; color: var(--brown); }
/* syllables sit side by side (horizontal) to save vertical space */
.pp-bd-syls { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; }
.pp-bd-syl { flex: 1 1 6.5rem; min-width: 6.5rem; padding: 0.2rem 0 0; }
.pp-bd-syl .pp-bd-tag { flex-basis: 2.6rem; }
.pp-bd-syl-py { margin: 0; font-family: var(--ll-font-sans); font-weight: 800; font-size: 1.15rem; color: var(--red); }
.pp-bd-syl-note { margin: 0.15rem 0 0; font-size: 0.72rem; line-height: 1.35; color: var(--ll-muted); font-style: italic; }
.pp-bd-parts { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pp-bd-part { display: flex; gap: 0.55rem; align-items: baseline; font-size: 0.9rem; line-height: 1.4; }
.pp-bd-tag { flex: 0 0 3.2rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ll-muted); }
.pp-bd-detail { flex: 1 1 auto; }
.pp-bd-val { font-family: var(--ll-font-sans); font-weight: 800; color: var(--ink); }
.pp-bd-cue { color: var(--brown); }
/* little "hear this sound" button beside an initial / final (pinyin-table clip) */
.pp-bd-hear {
  appearance: none; -webkit-appearance: none;
  width: 1.35rem; height: 1.35rem; min-height: 0; min-width: 0; flex: 0 0 auto; padding: 0; margin: 0 0.4rem 0 0;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  border: 1px solid rgba(123, 92, 67, 0.3); border-radius: 999px; background: var(--paper);
  color: var(--red); font-size: 0.52rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .1s ease, color .15s ease, border-color .15s ease;
}
.pp-bd-hear:hover { background: #fff3ea; }
.pp-bd-hear:active { transform: scale(0.9); }
.pp-bd-hear.is-playing { background: var(--red); color: #fff; border-color: var(--red); }
/* a compound final broken further into its own sounds */
.pp-bd-sub { list-style: none; margin: 0.3rem 0 0; padding: 0.05rem 0 0 0.7rem; border-left: 2px solid rgba(123, 92, 67, 0.18); display: flex; flex-direction: column; gap: 0.22rem; }
.pp-bd-sub li { display: flex; gap: 0.45rem; align-items: baseline; font-size: 0.82rem; line-height: 1.35; }
.pp-bd-subval { flex: 0 0 1.3rem; font-family: var(--ll-font-sans); font-weight: 800; color: var(--red); }
/* the combined tone graph inside the pane */
.pp-tg { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed rgba(123, 92, 67, 0.22); }
.pp-tg .pp-bd-eyebrow { margin-bottom: 0.55rem; }
.pp-tg-chart { width: 100%; }
.pp-tg-svg { width: 100%; height: auto; display: block; }
.pp-tg-grid line { stroke: rgba(123, 92, 67, 0.22); stroke-width: 1; }
.pp-tg-num { font-size: 17px; font-weight: 800; fill: var(--ink); font-family: var(--ll-font-sans); }
.pp-tg-word { font-size: 11px; font-weight: 700; fill: var(--ll-muted); font-family: var(--ll-font-sans); letter-spacing: 0.01em; }
.pp-tg-xlab { font-size: 12px; font-weight: 700; fill: var(--ll-muted); font-family: var(--ll-font-sans); letter-spacing: 0.04em; }
.pp-tg-line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pp-tg-line--t1 { stroke: #E08A1E; }
.pp-tg-line--t2 { stroke: #C6472F; }
.pp-tg-line--t3 { stroke: #4F7A34; }
.pp-tg-line--t4 { stroke: #6A4C93; }
.pp-tg-line--nu { stroke: #9C8F7C; stroke-width: 3.5; }
.pp-tg-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.pp-tg-leg { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pp-tg-sw { flex: 0 0 auto; width: 28px; height: 0; border-top-width: 5px; border-top-style: solid; border-radius: 2px; }
.pp-tg-sw--t1 { border-top-color: #E08A1E; }
.pp-tg-sw--t2 { border-top-color: #C6472F; }
.pp-tg-sw--t3 { border-top-color: #4F7A34; }
.pp-tg-sw--t4 { border-top-color: #6A4C93; }
.pp-tg-sw--nu { border-top-color: #9C8F7C; }
/* memorable analogy per tone, under the legend */
.pp-tg-tips { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(123, 92, 67, 0.22); display: flex; flex-direction: column; gap: 7px; }
.pp-tg-tip { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink); }
.pp-tg-tip-n { font-weight: 800; }
.pp-tg-tip-n--t1 { color: #E08A1E; }
.pp-tg-tip-n--t2 { color: #C6472F; }
.pp-tg-tip-n--t3 { color: #4F7A34; }
.pp-tg-tip-n--t4 { color: #6A4C93; }
.pp-tg-tip-n--nu { color: #9C8F7C; }