/*
 * Contextual help (docs/mobile-app-shell.md section 3): floating "?" button, help sheet, inline field hints.
 * Tokens come from site.css; the sheet reuses dialog.sheet from appshell.css.
 *
 * Position of the button is computed from CSS variables so other fixed UI can move it:
 *   --help-lift  extra distance in px (set by a cookie/PWA prompt: `:root { --help-lift: 72px }` while it is visible).
 * Sticky action bars (.actions.sticky) are detected with :has() and lift the button above them.
 */
.help-fab {
  --help-base: 16px;
  position: fixed; right: 14px; z-index: 35;
  bottom: calc(var(--help-base) + var(--help-lift, 0px) + env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-fg); border: 3px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  font-size: 1.35rem; font-weight: 700; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.help-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
@media (max-width: 719px) {
  /* Above the tab bar (60px + safe area). */
  body.has-tabbar .help-fab { --help-base: calc(var(--tabbar-h) + 12px); }
  /* Above a sticky Save bar (about 72px high). */
  body:has(.form .actions.sticky) .help-fab { --help-lift: 76px; }
  html.kb-open .help-fab { display: none; }
}
@media (min-width: 720px) { .help-fab { right: 20px; --help-base: 20px; } }
@media print { .help-fab, .help-sheet { display: none !important; } }

/* Help sheet content. */
.help-sheet .help-block { margin: .2rem 0 .9rem; }
.help-sheet .help-block h3 { margin: 0 0 .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.help-sheet .help-block p { margin: 0; }
.help-sheet .help-block ul { margin: 0; padding-left: 1.2rem; }
.help-sheet .help-block li + li { margin-top: .3rem; }
.help-sheet .help-x { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.help-sheet .help-actions { margin: 1rem 0 0; }
.help-sheet .help-actions .btn { width: 100%; justify-content: center; }
/* No-JS fallback: ?help=1 renders the dialog open and non-modal; keep it a bottom sheet above the bar. */
dialog.help-sheet[open]:not(:modal) { z-index: 60; box-shadow: 0 -4px 24px rgba(0, 0, 0, .35); }
dialog.help-sheet { max-height: 80vh; }

/* Inline hint: <details class="hint"><summary>?</summary><span class="hint-text">...</span></details> */
details.hint { display: inline; font-weight: 400; }
details.hint > summary {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 22px; height: 22px; margin-left: .35rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--accent);
  font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer; list-style: none; user-select: none;
}
details.hint > summary::-webkit-details-marker { display: none; }
details.hint > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
details.hint[open] > summary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
details.hint > .hint-text {
  display: block; margin: .35rem 0 .2rem; padding: .5rem .7rem; border-left: 3px solid var(--accent);
  background: var(--bg-alt); color: var(--fg); font-size: .85rem; line-height: 1.4; border-radius: 0 6px 6px 0;
}
/* A tap target of 44px around the small "?" without growing the layout. */
details.hint > summary::after { content: ""; position: absolute; top: -11px; left: -11px; width: 44px; height: 44px; }
details.hint > summary { position: relative; }