/* 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; overflow-x: hidden; 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); }
/* Phones only: dimmed page behind the sheet; tapping it closes the sheet.
   Desktop has none, so learners can keep hovering other options while the
   pane is open to compare them. */
.pp-bd-scrim {
  position: fixed; inset: 0; z-index: 69;
  background: rgba(20, 14, 10, 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
@media (max-width: 620px) {
  .pp-bd-scrim.is-open { opacity: 1; pointer-events: auto; }
  /* Phones: there's no hover, so the breakdown is opened by press-and-hold and
     slides up as a sheet rather than a right-side drawer. It stops short of the
     top: iOS Safari draws fixed panels under the status bar, where the ✕ could
     not be tapped (the pages don't opt in to safe-area insets). The strip of
     page left above it is the scrim, so tapping there closes it too. */
  .pp-breakdown {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: none; height: 55vh; height: 55dvh; max-height: none;
    padding-top: 1.6rem;
    border-left: 0; border-radius: 18px 18px 0 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%; }
  /* The sheet itself stays put and only its body scrolls, so the ✕ in the
     corner is always reachable. (.pp-breakdown prefix: the base .pp-bd-close
     rule comes later in the file.) */
  .pp-breakdown { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .pp-breakdown .pp-bd-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 1.6rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
  }
  .pp-breakdown .pp-bd-formula { padding-right: 2.6rem; }
  .pp-breakdown .pp-bd-close {
    top: 0.7rem; right: 0.8rem; z-index: 1;
    width: 2.6rem; height: 2.6rem; font-size: 1.35rem;
  }
  :root[data-theme="dark"] .pp-breakdown { border-top: 1px solid rgba(241, 232, 219, 0.14); }
  /* Never scroll sideways. A two-syllable word used to squeeze its syllables
     into two narrow columns that spilled past the edge; on phones they stack,
     each using the full width. */
  .pp-breakdown .pp-bd-body { overflow-x: hidden; }
  .pp-breakdown .pp-bd-syls { flex-direction: column; flex-wrap: nowrap; gap: 0.9rem; }
  .pp-breakdown .pp-bd-syl { flex: none; min-width: 0; }
}
.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.82rem; font-weight: 800; 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.8rem; font-weight: 800; 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-fill); color: #fff; border-color: var(--red-fill); }
/* 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; }