/* ECHIVO /horeca — compat.css · OWNER: V10 · G2 (cross-browser). Loaded LAST in the head (after finish.css).
   Only real Safari / iOS Safari / Firefox ESR differences found by the static audit in v7-notes/V10-G2.md.
   Rule of this file: every rule is a no-op on desktop Chromium (env() = 0, hover available, no autofill), so the
   Chromium QA baselines (qa_layout, qa_mobile, qa_perf, shots) are unchanged. Remove a block once its owner adopts it. */

/* ---------- 1 · iPhone safe areas (G2-1) ----------
   The viewport meta has viewport-fit=cover, so iOS lays the page under the notch / Dynamic Island and the home
   indicator. Only the nav's top inset was handled (core.css). In LANDSCAPE the 16 px phone gutter put every heading, card
   and the form under the sensor housing (left/right inset ≈ 47–59 px), and the last footer line sat under the home bar.
   env() is 0 everywhere else (desktop, Android, portrait sides), so nothing moves there. */
@supports (padding: max(0px)) {
  html.hx-root {
    --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
  html.hx-root .hx-foot { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
  html.hx-root .hx-nav { max-width: calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
}

/* ---------- 2 · sticky :hover after a tap (iOS Safari, Chrome Android) (G2-2) ----------
   Touch browsers keep :hover on the last tapped element until the next tap elsewhere. Two hover styles copy a "selected"
   state, so on the founder's iPhone a just-DEselected chip still looked half on (white label + tinted border), and a
   just-CLOSED FAQ question stayed gold with a gold number, exactly like an open one. Only on hover-less devices, and only
   for the unselected / closed state, the hover look is put back to the resting look (values copied from groups.css/faq.css). */
@media (hover: none) {
  #groups .lm-chip:not([aria-pressed="true"]):hover { border-color: rgba(255,255,255,.11); color: var(--text-2); }
  #faq .hx-q:not([open]) summary:hover { color: inherit; }
  #faq .hx-q:not([open]) summary:hover .hx-q__n { color: var(--text-3); }
  #faq .hx-q:not([open]) summary:hover i { border-color: var(--hairline); background: none; box-shadow: none; }
}

/* ---------- 3 · autofill on the dark form (Safari, Chrome; Firefox ignores -webkit-) (G2-3) ----------
   Safari paints autofilled fields with its own light (yellow/blue) background and dark text, which on the navy glass panel
   reads as a broken white box. The long background-color transition keeps the author's dark field; text-fill keeps cream text.
   No box-shadow trick, so the gold focus ring and the rose error ring (apply.css) still show. */
#apply .hx-f input:-webkit-autofill,
#apply .hx-f input:-webkit-autofill:hover,
#apply .hx-f input:-webkit-autofill:focus,
#apply .hx-f select:-webkit-autofill,
#apply .hx-f textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: border-color .25s, box-shadow .25s, background-color 600000s 0s, color 600000s 0s;
}