/* ==========================================================================
   Touch & installed-app polish. Shared by every page.

   Two jobs:
     1. Styles for the "Add to Home Screen" banner (install-v1.js).
     2. Small, universally correct touch behaviours — fast taps, no focus
        zoom, edge-to-edge displays — every one of them scoped so a desktop
        mouse-and-keyboard render is pixel-identical to before.

   The safe-area rules use env() directly with no device class in front:
   on displays without insets (every desktop, every classic display) the
   environment values resolve to 0 and the declarations are no-ops.
   ========================================================================== */

/* --- 1. Home-screen banner (compact instruction card) --------------------- */
.a2hs{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:2147482000;
  transform:translate(-50%,calc(100% + 24px));display:flex;align-items:flex-start;gap:10px;
  width:min(340px,calc(100vw - 24px));padding:12px 13px;border-radius:14px;
  background:#0d2c42;color:#eaf4fb;border:1px solid rgba(127,200,236,.28);
  box-shadow:0 14px 38px rgba(2,20,33,.5);opacity:0;pointer-events:none;
  font:400 12.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .28s ease}
.a2hs.a2hs-in{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.a2hs.a2hs-out{transform:translate(-50%,calc(100% + 24px));opacity:0}
.a2hs-icon{flex:none;width:32px;height:32px;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.25);margin-top:2px}
.a2hs-main{min-width:0;flex:1}
.a2hs-main b{display:block;font-size:13px;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:.1px}
.a2hs-copy{margin:0;color:#c6deeb}
.a2hs-step{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;
  padding:0 4px;margin:0 1px;border-radius:5px;background:rgba(127,200,236,.16);
  border:1px solid rgba(127,200,236,.34);color:#bfe3f7;vertical-align:text-bottom}
.a2hs-step svg{width:12px;height:12px;flex:none;display:block}
.a2hs-actions{display:flex;gap:8px;align-items:center;margin-top:9px}
.a2hs-install{border:none;border-radius:8px;padding:7px 13px;font-size:12px;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,#00b5e2,#0a6ea6);color:#fff;box-shadow:0 5px 13px rgba(0,140,190,.35)}
.a2hs-later{border:1px solid rgba(191,227,247,.32);background:transparent;border-radius:8px;
  padding:6px 11px;font-size:11.5px;font-weight:700;color:#bfe3f7;cursor:pointer}
.a2hs-close{position:absolute;top:4px;right:5px;border:none;background:none;color:#7fa5bd;
  font-size:17px;line-height:1;padding:3px 7px;cursor:pointer;border-radius:7px}
.a2hs-close:hover{color:#fff;background:rgba(255,255,255,.08)}
@media(prefers-reduced-motion:reduce){.a2hs{transition:none}}

/* --- 2. Touch behaviour --------------------------------------------------- */
/* Kill the grey tap flash and the 300 ms double-tap-zoom wait on controls.
   Scoped to touch devices via the html classes set by device-v1.js. */
html.fdev-touch *{-webkit-tap-highlight-color:transparent}
html.fdev-touch button,html.fdev-touch [role="button"],html.fdev-touch a,html.fdev-touch select,
html.fdev-touch summary,html.fdev-touch label{touch-action:manipulation}

/* iOS zooms any focused input smaller than 16px. On touch screens give text
   entry a floor; precise desktop layouts keep their sizes untouched. */
@media (pointer:coarse){
  input[type="text"],input[type="search"],input[type="email"],input[type="password"],
  input[type="tel"],input[type="number"],input:not([type]),select,textarea{font-size:max(16px,1em)}
}

/* Momentum scrolling is default on modern iOS; these two only matter inside
   installed-app mode where rubber-banding must stay contained per panel. */
html.fdev-standalone body{overscroll-behavior-y:none}