/* Hovarn Classic · Math — formulas and the symbol picker. Theme tokens only (each token has a neutral fallback,
   so the module also works on a page without a theme). See docs/hovarn-math.md. */

/* ---------- rendered formulas */
.hm-math{display:inline}
.hm-math .katex{font-size:1.08em;line-height:1.2;color:inherit}
.hm-math.hm-display{display:block;margin:.5em 0;text-align:center;white-space:normal;overflow-x:auto;overflow-y:hidden;max-width:100%}
.hm-math.hm-display .katex-display{margin:0}
.hm-math.hm-err{white-space:pre-wrap;font-family:var(--f-body,system-ui,sans-serif);color:var(--warn,#8a5a00);background:var(--warn-bg,#fdf3dc);border-bottom:1px dashed currentColor;border-radius:2px;padding:0 2px;cursor:help}
/* chemistry and maths inside headings and buttons keep the surrounding weight */
b .hm-math .katex, strong .hm-math .katex{font-weight:700}

/* ---------- the Ω button next to a field */
.hm-btn{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;padding:0;margin:0;border:1px solid var(--line-2,#d9d2c5);border-radius:var(--r-sm,8px);
  background:var(--sheet,#fff);color:var(--brand-900,#0b2545);font:600 16px/1 var(--f-body,system-ui,sans-serif);cursor:pointer;
  transition:background var(--dur,200ms),border-color var(--dur,200ms),color var(--dur,200ms)}
.hm-btn:hover{background:var(--brand-50,#f0f3f8);border-color:var(--brand-200,#d6deea)}
.hm-btn:focus-visible{outline:none;box-shadow:var(--focus,0 0 0 3px rgba(0,0,0,.35))}
.hm-btn[aria-expanded="true"]{background:var(--brand-900,#0b2545);border-color:var(--brand-900,#0b2545);color:var(--on-brand,#fff)}
.hm-btn-overlay{position:absolute;z-index:2;width:28px;height:28px;font-size:15px;border-color:transparent;background:transparent;color:var(--ink-3,#5f6675)}
.hm-btn-overlay:hover{color:var(--brand-900,#0b2545)}
.hm-btn-inline{align-self:center}
@media (pointer:coarse){.hm-btn{width:40px;height:40px}.hm-btn-overlay{width:36px;height:36px}}

/* ---------- the picker (popover on desktop, bottom sheet on phones) */
.hm-pop{position:fixed;inset:auto;margin:0;z-index:2147483000;width:min(436px,calc(100vw - 16px));max-height:min(470px,calc(100vh - 16px));
  display:none;flex-direction:column;padding:0;overflow:hidden;border:1px solid var(--line-2,#d9d2c5);border-radius:var(--r-md,12px);
  background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);box-shadow:var(--sh-3,0 24px 60px -18px rgba(0,0,0,.35));font:400 var(--t-14,.875rem)/1.4 var(--f-body,system-ui,sans-serif)}
.hm-pop.is-open{display:flex}
.hm-pop::backdrop{display:none}
.hm-handle{display:none}
.hm-head{display:flex;align-items:center;gap:4px;padding:6px 44px 0 6px;border-bottom:1px solid var(--line,#e6e1d8)}
.hm-tabs{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.hm-tabs::-webkit-scrollbar{display:none}
.hm-tab{flex:none;height:34px;padding:0 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2,#4a5263);
  font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui,sans-serif);cursor:pointer;border-radius:6px 6px 0 0;white-space:nowrap}
.hm-tab:hover{color:var(--brand-900,#0b2545);background:var(--paper-2,#f3efe7)}
.hm-tab[aria-selected="true"]{color:var(--brand-900,#0b2545);border-bottom-color:var(--accent-500,#f26a1b)}
.hm-tab:focus-visible,.hm-sym:focus-visible,.hm-x:focus-visible,.hm-tpl:focus-visible,.hm-go:focus-visible,.hm-tex:focus-visible{outline:none;box-shadow:var(--focus,0 0 0 3px rgba(0,0,0,.35))}
.hm-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-sm,8px);background:none;color:var(--ink-2,#4a5263);cursor:pointer}
.hm-x:hover{background:var(--paper-2,#f3efe7);color:var(--ink-1,#1a1f2b)}
.hm-recent{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line,#e6e1d8);background:var(--paper,#fbfaf7)}
.hm-recent[hidden]{display:none}
.hm-recent-h{flex:none;font:600 var(--t-12,.75rem)/1 var(--f-display,system-ui,sans-serif);color:var(--ink-3,#5f6675)}
.hm-recent .hm-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0;gap:2px;scrollbar-width:thin}
.hm-panel{overflow:auto;padding:8px 10px 10px;min-height:0;flex:1}
.hm-grid{display:flex;flex-wrap:wrap;gap:4px}
.hm-sym{flex:none;min-width:36px;height:36px;padding:0 6px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--r-sm,8px);
  background:var(--paper,#fbfaf7);color:var(--ink-1,#1a1f2b);font:400 18px/1 var(--f-body,system-ui,sans-serif);cursor:pointer;font-variant-numeric:normal}
.hm-sym.hm-wide{font-size:15px;padding:0 8px}
.hm-sym:hover{background:var(--brand-50,#f0f3f8);border-color:var(--brand-200,#d6deea);color:var(--brand-900,#0b2545)}
.hm-sym:active{background:var(--accent-100,#fbdcc6)}
.hm-list{display:grid;gap:2px}
.hm-row{display:grid;grid-template-columns:48px 1fr;align-items:center;justify-items:start;gap:8px;width:100%;height:auto;min-height:44px;padding:4px 8px;text-align:left;background:none}
.hm-row b{justify-self:center;font:500 20px/1 var(--f-body,system-ui,sans-serif);color:var(--brand-900,#0b2545)}
.hm-row span{display:grid;gap:1px;font:500 var(--t-14,.875rem)/1.25 var(--f-body,system-ui,sans-serif);color:var(--ink-1,#1a1f2b)}
.hm-row small{font-size:var(--t-12,.75rem);color:var(--ink-3,#5f6675);font-variant-numeric:tabular-nums}
.hm-eq{display:grid;gap:8px}
.hm-l{font:600 var(--t-14,.875rem)/1.3 var(--f-display,system-ui,sans-serif);color:var(--ink-1,#1a1f2b)}
.hm-muted{color:var(--ink-3,#5f6675);font-weight:400;font-size:var(--t-12,.75rem)}
.hm-tex{width:100%;box-sizing:border-box;height:40px;padding:0 10px;border:1px solid var(--border-input,#857f73);border-radius:var(--r-sm,8px);background:var(--sheet,#fff);color:var(--ink-1,#1a1f2b);
  font:400 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.hm-tpls{display:flex;flex-wrap:wrap;gap:4px}
.hm-tpl{height:30px;padding:0 9px;border:1px solid var(--line-2,#d9d2c5);border-radius:var(--r-pill,999px);background:var(--sheet,#fff);color:var(--ink-2,#4a5263);font:500 var(--t-12,.75rem)/1 var(--f-body,system-ui,sans-serif);cursor:pointer}
.hm-tpl:hover{border-color:var(--brand-700,#1d4271);color:var(--brand-900,#0b2545)}
.hm-prev{min-height:58px;display:grid;place-items:center;padding:8px;border:1px dashed var(--line-2,#d9d2c5);border-radius:var(--r-sm,8px);background:var(--paper,#fbfaf7);overflow-x:auto;color:var(--ink-1,#1a1f2b)}
.hm-prev .hm-math.hm-display{margin:0}
.hm-uni{margin:0;font-size:var(--t-14,.875rem);color:var(--ink-2,#4a5263)}
.hm-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hm-go{height:36px;padding:0 14px;border:0;border-radius:var(--r-sm,8px);background:var(--brand-900,#0b2545);color:var(--on-brand,#fff);font:600 var(--t-14,.875rem)/1 var(--f-display,system-ui,sans-serif);cursor:pointer}
.hm-go:hover{background:var(--brand-800,#13315c)}

.hm-pop.hm-sheet{width:100%;max-width:none;max-height:min(58vh,520px);border-radius:var(--r-lg,18px) var(--r-lg,18px) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0)}
.hm-sheet .hm-x{top:16px}
.hm-sheet .hm-handle{display:block;width:40px;height:4px;margin:8px auto 2px;border-radius:4px;background:var(--line-2,#d9d2c5)}
.hm-sheet .hm-sym{min-width:44px;height:44px;font-size:20px}
.hm-sheet .hm-sym.hm-wide{font-size:16px}
.hm-sheet .hm-tab{height:40px}
@media (prefers-reduced-motion:no-preference){.hm-pop.is-open{animation:hm-in 160ms var(--ease,cubic-bezier(.16,1,.3,1))}.hm-pop.hm-sheet.is-open{animation:hm-up 220ms var(--ease,cubic-bezier(.16,1,.3,1))}}
@keyframes hm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes hm-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media print{.hm-btn,.hm-pop{display:none!important}}
/* the Ω glyph used as the "Insert symbol" label in editor toolbars */
.hm-glyph{display:inline-block;min-width:20px;text-align:center;font:600 17px/1 var(--f-body,system-ui,sans-serif)}