/* UI hint: a small "?" next to a heading or label; its explanation opens on hover, keyboard focus and tap.
   Markup: app/templates/_ui_hint.html · behaviour: ui-hint.js · rules and inventory: docs/UI_HINTS_2026-10-13.md.
   No inline styles anywhere: ui-hint.js sets the open tooltip's position through CSSOM only. */
.uh{position:relative;display:inline-flex;align-items:center;vertical-align:middle;margin:-4px 0 -4px 4px;
  line-height:1;font-weight:400;letter-spacing:0;text-transform:none}
.uh-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;padding:0;margin:0;
  border:0;border-radius:50%;background:transparent;color:var(--muted,#6B7089);cursor:help;font:inherit;box-shadow:none}
.uh-q{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;
  border:1.5px solid currentColor;border-radius:50%;font:700 11px/1 Inter,system-ui,Arial,sans-serif}
.uh-btn:hover,.uh-open>.uh-btn{color:var(--accent,#6C4FF6)}
.uh-open>.uh-btn .uh-q{background:var(--accent,#6C4FF6);border-color:var(--accent,#6C4FF6);color:#fff}
.uh-btn:focus-visible{outline:2px solid var(--accent,#6C4FF6);outline-offset:1px}
.uh-tip{display:none;position:fixed;left:0;top:0;z-index:1000;box-sizing:border-box;width:max-content;
  max-width:min(320px,calc(100vw - 16px));padding:10px 12px;border-radius:10px;
  background:var(--uh-bg,#1B1D2E);color:var(--uh-fg,#fff);box-shadow:0 12px 32px rgba(27,29,46,.28);
  font:400 .84rem/1.5 Inter,system-ui,Arial,sans-serif;letter-spacing:0;text-align:left;text-transform:none;
  white-space:normal;overflow-wrap:anywhere;cursor:auto}
.uh-tip::before{content:"";position:absolute;top:-5px;left:var(--uh-arrow,16px);width:10px;height:10px;
  margin-left:-5px;background:inherit;transform:rotate(45deg)}
.uh-tip.uh-above::before{top:auto;bottom:-5px}
.uh-p{display:block}
.uh-p+.uh-p{margin-top:6px}
.uh-js .uh-open>.uh-tip{display:block}
/* Without JavaScript the explanation still opens on hover and keyboard focus, as a bar inside the viewport. */
html:not(.uh-js) .uh:hover>.uh-tip,html:not(.uh-js) .uh:focus-within>.uh-tip{display:block;top:auto;left:8px;right:8px;
  bottom:8px;width:auto;max-width:none}
html:not(.uh-js) .uh-tip::before{display:none}
/* A label and its hint on one row (a hint never goes inside a <label> or <summary>). */
.uh-label{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:10px 0 4px}
.uh-label>label{margin:0}
/* A full-width action button followed by its hint on one row. */
.uh-action{display:flex;align-items:center;gap:2px}
.uh-action>.btn{flex:1 1 auto;min-width:0}
@media print{.uh{display:none}}