/* «?» video hints (js/core/hint.js, docs/UX_SIMPLIFY_1310.md §7.1) and the shared «Сохранено» line (js/pages/_saved.js).
   Loaded by index.html after app.css. Desktop: a window next to «?», min(480px, 100vw − 32px), clip 3:2. <= 900 px: a
   bottom sheet 16 px from the edges, above the phone bar. */

/* .hq.hq: twice, so that a page's «.links button» / «.rule button» (0,1,1) does not restyle the circle */
.hq.hq { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px;
  margin: 0 0 0 6px; padding: 0; border: 1px solid var(--field); border-radius: 50%; background: none; color: var(--muted);
  font: 500 11px/1 var(--mono); vertical-align: 0.1em; cursor: help; min-height: 0; }
.hq.hq:hover, .hq.hq.on, .hq.hq[aria-expanded="true"] { color: var(--fg); border-color: var(--fg); background: none; }
.hq.hq:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
h1 .hq.hq, h2 .hq.hq, h3 .hq.hq { vertical-align: 0.15em; }
/* the circle's size above any page's phone rule for buttons in a row («.tg-step .act button { width: 100% }»,
   «.st-pg .rule .act button { min-height }» are (0,2,1)–(0,3,1)): a «?» is 18 × 18 everywhere (review 13.10) */
button.hq.hq.hq.hq { width: 18px; height: 18px; min-width: 0; min-height: 0; max-width: none; padding: 0; flex: none; }

.hq-pop { position: fixed; z-index: 40; box-sizing: border-box; width: min(480px, calc(100vw - 32px)); padding: 12px;
  background: var(--soft); border: 1px solid var(--field); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); color: var(--fg);
  font: 13px/1.5 var(--sans); }
.hq-pop:focus { outline: none; }
.hq-pop:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.hq-media { position: relative; width: 100%; aspect-ratio: 3 / 2; margin: 0 0 10px; background: var(--bg); overflow: hidden; }
.hq-media[hidden] { display: none; }
.hq-media video, .hq-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hq-media.calm .hq-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg); }
.hq-txt { margin: 0; color: var(--fg); }
.hq-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font: 12.5px var(--mono); }
.hq-foot:empty { display: none; }
.hq-guide { color: var(--fg-2); }
.hq-x { margin-left: auto; }

@media (max-width: 900px) {
  .hq.hq::after { content: ""; position: absolute; inset: -9px; }   /* 36 px to tap (--tap), the circle stays 18 px */
  .hq-sheet { left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto;
    max-height: calc(100dvh - 32px); overflow-y: auto; }
  .hq-sheet .hq-media { max-height: 50dvh; }
  .hq-sheet .hq-x { min-height: var(--tap); }
}
@media (prefers-reduced-motion: reduce) { .hq-pop { transition: none; } }

/* the shared «Сохранено» line (_saved.js): quiet when it went through, --bad when it did not */
.saved.bad, .sv-line.bad { color: var(--bad); }
.sv-line:empty { display: none; }