/* GraphChinese — textbook gloss engine styles (assets/gloss.js).
   Everything is scoped under .tb-page (the textbook reading surface); nothing
   here touches the char card except the small-screen bottom-sheet restyle at
   the end, which only applies on body.tb-page. Mobile-first. */

/* ── Pop-in surface tokens (inverted-adjacent chip, matching the site's
      tooltip language). Defined for light here and re-defined in the one dark
      block below — tokens, not per-element overrides. ───────────────────────*/
:root {
  --tb-popin-bg:     #211C16;                 /* dark chip on the cream page */
  --tb-popin-fg:     #F4E6C8;
  --tb-popin-border: rgba(20, 17, 13, 0.18);
  --tb-popin-py:     #E7A98F;
  --tb-popin-sub:    rgba(244, 236, 216, 0.66);
}
:root[data-theme="dark"] {
  --tb-popin-bg:     #2E2820;                 /* one step above the night ground */
  --tb-popin-fg:     var(--ink);
  --tb-popin-border: rgba(244, 236, 216, 0.14);
  --tb-popin-py:     #E7A98F;
  --tb-popin-sub:    rgba(232, 224, 204, 0.66);
}

/* ── Trigger affordance: a subtle dotted underline. text-decoration (not a
      border) so it adds no box height and never shifts the pinyin ruby that
      floats above each .hz via ::before in py-on mode. ───────────────────────*/
.tb-page .tb-glossable .hz {
  text-decoration: underline dotted rgba(var(--accent-rgb), 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ── Level-1 pop-in ─────────────────────────────────────────────────────────*/
.tb-page .tb-popin {
  overflow: hidden;
  max-height: 0;
  margin: 6px 0;
  transition: max-height 0.28s ease;
}
.tb-page .tb-popin-in {
  background: var(--tb-popin-bg);
  color: var(--tb-popin-fg);
  border: 1px solid var(--tb-popin-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.tb-page .tb-popin-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tb-page .tb-popin-zh { font-family: var(--han); font-size: 22px; line-height: 1.2; }
.tb-page .tb-popin-py {
  font-family: var(--serif-body); font-style: italic; font-size: 15px; color: var(--tb-popin-py);
}
.tb-page .tb-popin-gloss { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--tb-popin-fg); }
.tb-page button.tb-popin-gloss {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer;
}

/* Place-Your-Bets veil: pinyin already shows; the English is hidden behind a
   blur + "tap to reveal" until the reader has made their guess. */
.tb-page .tb-popin-gloss.tb-veil { position: relative; min-height: 24px; }
.tb-page .tb-veil .tb-veil-text { filter: blur(7px); opacity: 0.5; user-select: none; }
.tb-page .tb-veil .tb-veil-cue {
  position: absolute; inset: 0; display: flex; align-items: center;
  font-size: 13px; font-style: italic; color: var(--tb-popin-sub);
}

.tb-page .tb-popin-actions { display: flex; gap: 8px; margin-top: 12px; }
.tb-page .tb-popin-actions button {
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--tb-popin-border);
  background: rgba(255, 255, 255, 0.06); color: var(--tb-popin-fg);
  font: inherit; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-page .tb-popin-actions button:hover { background: rgba(255, 255, 255, 0.12); }
.tb-page .tb-popin-audio { min-width: 44px; font-size: 16px; }
.tb-page .tb-popin-full { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .tb-page .tb-popin { transition: none; }
}

/* ── Level-2 char card as a bottom sheet on small screens. charcard.js already
      adds .sheet below 640px and owns close/outside-tap/Esc; this only
      restyles that surface on the textbook page — no JS fork. ───────────────*/
@media (max-width: 640px) {
  body.tb-page .char-card.sheet {
    left: 0 !important; right: 0; bottom: 0; top: auto !important;
    width: 100%; max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 70vh; overflow-y: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  /* decorative grab handle — the real dismissal is the ✕ and Esc, not a swipe */
  body.tb-page .char-card.sheet::before {
    content: ''; display: block; width: 40px; height: 4px; margin: 2px auto 10px;
    border-radius: 999px; background: var(--hairline);
  }
  body.tb-page .char-card.sheet .cc-head {
    position: sticky; top: 0; z-index: 1;
    background: var(--paper-raised); padding-top: 2px;
  }
  body.tb-page .char-card.sheet .cc-close {
    font-size: 24px; padding: 6px; min-width: 40px; min-height: 40px; line-height: 1;
  }
}