/* learn-help.css - the Helpers tray and the helper panel (learn-help.js). Built on brainlag.css and learn.css tokens,
   so light and dark follow the site. Quiet by design: a rule above the tray, plain text buttons, no badges or counts
   in colour. The panel is a side panel on wide screens and a bottom sheet on phones. */
.lh-tray{margin:22px 0 0;padding:14px 0 0;border-top:1px solid var(--rule)}
.lh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.lh-lab{font:700 15px var(--f-body);color:var(--ink-2)}
.lh-count,.lh-topcount{display:inline-flex;align-items:center;gap:5px;font:800 16px/1 var(--f-display,var(--f-body));color:var(--ink)}
.lh-sp,.lh-sp16,.lh-spbig{flex:none;display:block}
.lh-btns{display:flex;flex-wrap:wrap;gap:8px}
/* a chip: solid, square-cornered like the answer keys (no pill), the helper's own icon */
.lh-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 12px 0 11px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);
  font:600 15.5px var(--f-body);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(var(--ink-rgb),.08)}
.lh-btn > svg:first-child{color:var(--study-ink);flex:none}
.lh-btn:hover{border-color:var(--study)}
.lh-btn:active{transform:translateY(1px);box-shadow:none}
.lh-btn.is-open{border-color:var(--study);background:var(--study-tint,var(--surface))}
.lh-cost{display:inline-flex;align-items:center;gap:2px;margin-left:2px;padding-left:8px;border-left:1px solid var(--rule);font:700 13.5px var(--f-body);color:var(--gold-ink,var(--ink-2))}
.lh-cost .lh-sp16{color:var(--gold-ink,var(--ink-2))}
.lh-btn[aria-disabled="true"]{color:var(--ink-3);box-shadow:none;background:transparent}
.lh-btn[aria-disabled="true"] > svg:first-child{color:var(--ink-3)}
.lh-btn:focus-visible,.lh-sbtn:focus-visible,.lh-x:focus-visible,.lh-set summary:focus-visible,.lh-topcount:focus-visible,.lh-opts a:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.lh-next{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:14.5px;color:var(--ink-3)}
.lh-ring{flex:none}
.lh-ring circle{fill:none;stroke:var(--rule-2);stroke-width:3}
.lh-ring .f{stroke:var(--gold,#ffc23d);stroke-linecap:round}
.lh-rule{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}
.lh-set{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}
.lh-set summary{cursor:pointer;color:var(--ink-3);min-height:32px;display:inline-flex;align-items:center}
.lh-set label{display:flex;align-items:center;gap:8px;margin:6px 0 0;min-height:36px}
.lh-set input{width:20px;height:20px;accent-color:var(--study)}
.lh-set p{margin:4px 0 0;color:var(--ink-3)}
.lh-tag-p,.lp-result p.lh-tag{margin:6px auto 0;font-size:15px;color:var(--ink-2);text-align:center;max-width:52ch;background:none}
.lh-earned{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;font:600 16px var(--f-body);color:var(--ink-2)}
/* the counter in the player's top bar */
.lh-topcount{min-height:44px;padding:0 8px;border:0;background:none;border-radius:12px;cursor:pointer}
.lh-topcount:hover{background:var(--sunk)}
.lh-topcount.lh-bump .lh-sp{animation:lh-bump .5s var(--ln-ease,ease-out)}
@keyframes lh-bump{0%{transform:translateY(0)}35%{transform:translateY(-5px)}100%{transform:translateY(0)}}
/* the Spark on dark paper: a light halo outside its navy line */
:root[data-theme="dark"] .sp-halo{stroke:#f2f6fb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-halo{stroke:#f2f6fb}}

/* the sparks sheet: centred on wide screens, a bottom sheet on phones */
.lh-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.lh-sheet[hidden]{display:none}
.lh-scrim{position:absolute;inset:0;background:rgba(11,22,38,.38)}
.lh-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border:2px solid var(--rule-2);border-radius:18px;padding:20px 20px 18px;box-shadow:0 16px 48px rgba(var(--ink-rgb),.22)}
.lh-sheet.lh-in .lh-card{animation:lh-pop .22s var(--ln-ease,ease-out)}
@keyframes lh-pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.lh-shead{display:flex;gap:14px;align-items:center;margin:0 0 6px}
.lh-shead h2{margin:0;font:800 21px/1.25 var(--f-display,var(--f-body));outline:none}
.lh-shead p{margin:4px 0 0;font-size:15px;color:var(--ink-2);line-height:1.45}
.lh-opts{list-style:none;margin:12px 0 0;padding:0}
.lh-opts li{display:grid;grid-template-columns:76px 1fr;gap:2px 12px;padding:12px 0;border-top:1px solid var(--rule)}
.lh-opts b{font:700 15.5px var(--f-body);color:var(--ink)}
.lh-opts span{font-size:15px;color:var(--ink-2);line-height:1.45}
.lh-opts a{grid-column:2;justify-self:start;min-height:36px;display:inline-flex;align-items:center;color:var(--study-ink);font:700 15px var(--f-body);text-decoration:underline;text-underline-offset:3px}
.lh-wait{display:flex;align-items:flex-start;gap:7px}
.lh-wait .lh-ring{margin-top:2px}
.lh-free{margin:6px 0 14px;padding-top:12px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--ink-3)}
.lh-ok{width:100%}
@media (max-width:600px){
  .lh-sheet{align-items:flex-end;padding:0}
  .lh-card{width:100%;border-radius:18px 18px 0 0;border-width:2px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .lh-sheet.lh-in .lh-card{animation:lh-up .26s var(--ln-ease,ease-out)}
}

/* the panel */
.lh-panel{position:fixed;z-index:40;top:76px;right:16px;bottom:100px;width:min(420px,40vw);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);
  border:2px solid var(--rule-2);border-radius:16px;box-shadow:0 12px 40px rgba(var(--ink-rgb),.16);overflow:hidden}
.lh-panel[hidden]{display:none}
.lh-panel.lh-in{animation:lh-side .22s var(--ln-ease,ease-out)}
@keyframes lh-side{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.lh-ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 8px 18px;border-bottom:1px solid var(--rule)}
.lh-ph h2{margin:0;font:700 18px var(--f-display,var(--f-body));outline:none}
.lh-x{width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
.lh-x:hover{background:var(--sunk)}
.lh-pnote{margin:0;padding:10px 18px;font-size:14.5px;color:var(--ink-2);border-bottom:1px solid var(--rule)}
.lh-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.lh-frame{display:block;width:100%;height:100%;min-height:420px;border:0;background:transparent;opacity:0;transition:opacity .15s}
.lh-frame.ready{opacity:1}
/* on a wide screen the question keeps clear of the panel */
@media (min-width:1101px){body.lh-on .lp-stage{padding-right:min(440px,42vw)}}

/* the number line */
.lh-nl{position:relative;padding:14px 18px 18px}
.lh-nlctl{display:flex;flex-wrap:wrap;gap:10px 16px}
.lh-nlctl label{display:flex;align-items:center;gap:8px;font:600 15px var(--f-body);color:var(--ink-2)}
.lh-nlctl input{width:96px;height:44px;padding:0 10px;border-radius:10px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 16px var(--f-body)}
.lh-nlsvg{margin:14px 0 4px;touch-action:none}
.lh-nlg{display:block;overflow:visible}
.lh-hit{fill:transparent;cursor:crosshair}
.lh-ax{stroke:var(--ink);stroke-width:2}
.lh-mj{stroke:var(--ink);stroke-width:2}
.lh-mn{stroke:var(--ink-3);stroke-width:1}
.lh-tl{font:500 13px var(--f-body);fill:var(--ink-2)}
.lh-pt{cursor:grab;outline:none}
.lh-pt circle{fill:var(--study);stroke:var(--paper);stroke-width:2}
.lh-pt:focus-visible circle,.lh-pt:hover circle{stroke:var(--ink);stroke-width:3}
.lh-pl{font:700 13.5px var(--f-body);fill:var(--ink)}
.lh-nlact{display:flex;gap:10px;margin:8px 0 0}
.lh-sbtn{min-height:44px;padding:0 14px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 15px var(--f-body);cursor:pointer}
.lh-nlhelp{margin:10px 0 0;font-size:14px;color:var(--ink-3);line-height:1.5}
.lh-nlvals{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phones and narrow windows: a bottom sheet above everything, the question scrolls behind it */
@media (max-width:1100px){
  .lh-panel{top:auto;left:0;right:0;bottom:0;width:auto;height:min(72vh,620px);border-radius:18px 18px 0 0;border-width:2px 0 0;box-shadow:0 -10px 30px rgba(var(--ink-rgb),.18);padding-bottom:env(safe-area-inset-bottom)}
  .lh-panel.lh-in{animation:lh-up .26s var(--ln-ease,ease-out)}
  .lh-frame{min-height:0}
}
@keyframes lh-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.lh-panel.lh-in,.lh-sheet.lh-in .lh-card,.lh-topcount.lh-bump .lh-sp{animation:none}.lh-frame{transition:none}}
.lp-result .lh-tray,.lp-review .lh-tray{display:none}
/* phones: the top bar already shows the count, and the floating Noodle sits bottom right; keep the tray's own counter
   off, so nothing of the Spark ever meets him */
@media (max-width:760px){.lh-tray .lh-count{display:none}}
/* the floating Noodle steps aside while the sparks sheet, or the helper's bottom sheet, is up (no overlap with the Spark) */
body.lh-sheet-on .lp-coach{visibility:hidden}
@media (max-width:1100px){body.lh-on .lp-coach{visibility:hidden}}