/* "?" help tips (src/views/help.tsx, public/js/help.js).
   Without JS the tooltip opens on :hover / :focus-visible under the icon.
   With JS (html.help-js) the script opens it, moves it to <body> and places it inside the viewport. */

.help { display: inline-block; position: relative; vertical-align: baseline; margin-left: .35em; line-height: 1; }
.help-tip {
  display: inline-grid; place-items: center; box-sizing: border-box; width: 16px; height: 16px; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-2);
  font: 600 10.5px/1 "Inter", system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  vertical-align: .08em; cursor: help; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.help-tip span { transform: translateY(.5px); }
.help-tip:hover, .help-tip:focus-visible, .help.open .help-tip {
  color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.help-tip:focus { outline: none; }
.help-tip:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.help-pop {
  display: none; position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  box-sizing: border-box; width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: .55rem .7rem;
  background: color-mix(in srgb, var(--glass-strong, var(--surface)) 55%, var(--surface)); color: var(--text);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-deep);
  font: 400 .8rem/1.45 "Inter", system-ui, sans-serif; letter-spacing: 0; text-transform: none; text-align: left;
  white-space: normal; overflow-wrap: anywhere; cursor: auto; user-select: text;
}
.help-pop.wide { max-width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; overscroll-behavior: contain; }
.help-pop code { font: .76rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); border-radius: 4px; padding: 0 .25em; white-space: nowrap; }
.help-pop p { margin: 0; }
.help-pop p + p { margin-top: .45rem; }

/* No JS: CSS only. Hover only where there is a real pointer, so a tap on a phone does not leave it stuck open. */
@media (hover: hover) { html:not(.help-js) .help:hover .help-pop { display: block; animation: help-in var(--dur) var(--ease); } }
html:not(.help-js) .help-tip:focus-visible + .help-pop { display: block; animation: help-in var(--dur) var(--ease); }

/* JS: one tooltip at a time, fixed to the viewport (the script sets left/top). */
.help-js .help-pop.open { display: block; position: fixed; z-index: 1001; transform: none; animation: help-in var(--dur) var(--ease); }
.help-js .help-pop.open.up { animation-name: help-in-up; }

@keyframes help-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@keyframes help-in-up { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .help-pop { background: var(--surface); }
}
@media print { .help { display: none; } }