/* ============ MATHFABLE — HELP (❓ handbook) ============ */
/* New file only — style.css untouched. Reuses .modal/.modal-card/.med-btn tokens. */

.help-card { max-height:88vh; overflow-y:auto; text-align:left; max-width:460px; }
.help-card h2 { text-align:center; }
.help-intro { font-size:14px; color:#c4b5fd; text-align:center; margin-bottom:2px; line-height:1.4; }

/* topic accordion */
.help-topic {
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden;
}
.help-topic + .help-topic { margin-top:8px; }
.help-topic-head {
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:none; color:#fff; font-size:16px; font-weight:bold; padding:11px 12px;
}
.help-topic-head .ht-icon { font-size:20px; }
.help-topic-head .ht-caret { margin-left:auto; color:#a5b4fc; font-size:13px; transition:transform .15s; }
.help-topic.open .ht-caret { transform:rotate(90deg); }
.help-topic-body { display:none; padding:2px 13px 13px; font-size:14px; line-height:1.5; color:#e5e1ff; }
.help-topic.open .help-topic-body { display:block; }
.help-topic-body p { margin:6px 0; }
.help-topic-body ul { margin:6px 0 6px 18px; }
.help-topic-body li { margin:3px 0; }
.help-topic-body b { color:#fde047; }
.help-note {
  background:rgba(0,0,0,.28); border-left:3px solid #8b5cf6; border-radius:8px;
  padding:7px 10px; font-size:13px; color:#c4b5fd; margin:8px 0;
}

/* tappable chips (items, badges, icons) — tap to open the explanation */
.help-chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.help-chip {
  background:rgba(0,0,0,.3); border:1.5px solid rgba(255,255,255,.16); color:#fff;
  border-radius:999px; padding:5px 11px; font-size:14px; display:inline-flex; align-items:center; gap:5px;
}
.help-chip.sel { border-color:#fde047; background:rgba(253,224,71,.14); }
.help-chip small { color:#a5b4fc; font-weight:normal; }
.help-chip-desc {
  display:none; flex-basis:100%; background:rgba(0,0,0,.3); border-radius:10px; padding:8px 11px;
  font-size:13.5px; color:#e5e1ff; margin:2px 0 4px; line-height:1.45;
}
.help-chip-desc.show { display:block; }
.help-chip-desc b { color:#fde047; }

/* icon glossary rows */
.help-glossary { display:flex; flex-direction:column; gap:4px; margin:8px 0; }
.help-gloss-row { display:flex; gap:10px; align-items:baseline; background:rgba(0,0,0,.22); border-radius:9px; padding:6px 10px; font-size:13.5px; }
.help-gloss-row .hg-icon { font-size:17px; min-width:26px; text-align:center; }
.help-gloss-row .hg-name { font-weight:bold; color:#fde047; min-width:86px; }
.help-gloss-row .hg-desc { color:#e5e1ff; flex:1; }

/* contextual ❓ buttons injected into screen headers */
.help-ctx-btn { margin-left:auto; }
.sub-head .help-ctx-btn { margin-left:auto; }