/* 借力 band, mobile-first. Phone layout is the base; the two-column desktop
   arrangement is the enhancement, not the other way round. */
.lb { padding: 34px 0 8px; }
.lb-inner { display: flex; flex-direction: column; gap: 20px; }

.lb-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px; }
.lb-eyebrow .hz { font-family: var(--han); font-size: 15px; letter-spacing: .04em; }
.lb h2 { font-family: var(--serif-display); font-size: clamp(26px, 6.4vw, 40px);
  line-height: 1.12; margin: 0 0 14px; }
.lb-sub { font-size: 15.5px; line-height: 1.68; color: var(--ink-faded); margin: 0 0 12px; }
.lb-note { font-size: 15px; margin: 0; }
.lb-note b { color: var(--accent); }

.lb-fig { margin: 0; }
/* Portrait on a phone: a wide short treemap turns 200 tiles into slivers. */
.lb-stage { position: relative; height: 68vh; min-height: 380px; max-height: 560px;
  border-radius: 14px; overflow: hidden; background: var(--paper-raised);
  border: 1px solid var(--hairline); }
.lb-cap { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin-top: 9px; font-size: 11.5px; color: var(--ink-faded); }
.lb-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin: 0 4px 0 8px; vertical-align: 0; }
.lb-legend i:first-child { margin-left: 0; }
.lb-tap { margin-left: auto; }

.lb-promise { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 0; margin: 0; }
.lb-promise li { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 11px; }
.lb-promise b { font-family: var(--han); font-size: 21px; color: var(--accent); line-height: 1; }
.lb-promise span { font-size: 13.5px; color: var(--ink-faded); }

/* Bottom sheet on phones. */
.lb-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper-raised); border-top: 1px solid var(--hairline);
  border-radius: 16px 16px 0 0; padding: 18px 20px 74px;
  /* 74px, not 22: the floating Pinyin pill and Feedback tab live at the bottom
     of every page and would otherwise sit on top of the last line here. */
  box-shadow: 0 -8px 30px rgba(0,0,0,.16); animation: lb-up .18s ease; }
.lb-sheet[hidden] { display: none; }
@keyframes lb-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lb-sheet { animation: none; } }
.lb-x { position: absolute; top: 10px; right: 14px; background: none; border: 0;
  font-size: 15px; color: var(--ink-faded); cursor: pointer; padding: 4px 6px; }
.lb-top { display: flex; gap: 14px; align-items: center; }
.lb-c { font-family: var(--han); font-size: 46px; line-height: 1; }
/* 为什么 at 46px is 138px of headword and pushes the gloss off a narrow sheet. */
.lb-c[data-len="2"] { font-size: 38px; }
.lb-c[data-len="3"] { font-size: 29px; }
.lb-c[data-len="4"], .lb-c[data-len="5"], .lb-c[data-len="6"] { font-size: 23px; }
.lb-py { margin: 0; font-size: 14px; color: var(--accent); }
.lb-en { margin: 3px 0 0; font-size: 13px; color: var(--ink-faded); line-height: 1.4; }
.lb-rank { margin-left: auto; text-align: right; font-size: 10.5px; color: var(--ink-faded);
  letter-spacing: .08em; text-transform: uppercase; }
.lb-rank b { display: block; font-family: var(--serif-display); font-size: 22px;
  color: var(--ink); letter-spacing: 0; }
.lb-sub-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faded); margin: 15px 0 6px; }
.lb-phrase { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.lb-phrase:last-child { border-bottom: 0; }
.lb-phrase b { display: block; font-family: var(--han); font-size: 17px; font-weight: 400; }
/* Direct child only: the hanzi inside <b> are .hz spans once HSKChar.wrap runs, and
   a descendant selector here restyled them into one character per line. */
.lb-phrase > span { display: block; font-size: 12.5px; color: var(--ink-faded); margin-top: 2px; }
.lb-ex { font-family: var(--han); font-size: 15px; margin: 0; line-height: 1.7; }
/* Ruby rides in a ::before above each .hz, so the line has to make room for it
   or the readings collide with the row above. */
.py-on .lb-phrase b { line-height: 2.2; }
.py-on .lb-ex { line-height: 2.4; }

@media (min-width: 900px) {
  .lb { padding: 54px 0 20px; }
  .lb-inner { display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
    grid-template-areas: "copy fig" "promise fig"; gap: 18px 40px; align-items: start; }
  .lb-copy { grid-area: copy; }
  .lb-fig { grid-area: fig; }
  .lb-promise { grid-area: promise; align-self: end; }
  .lb-stage { height: 540px; max-height: none; }
  /* Desktop keeps it in the flow rather than pinned over the page. */
  .lb-sheet { position: absolute; left: auto; right: 24px; bottom: 24px; width: 320px;
    padding-bottom: 20px;
    border-radius: 14px; border: 1px solid var(--hairline); box-shadow: 0 10px 30px rgba(0,0,0,.14); }
  .lb { position: relative; }
}