/* ===== Fit-only installation request: banner + modal (partials/install-request) ===== */

.ir-banner{display:flex;align-items:center;gap:16px;margin-block-end:14px;
  padding:16px 18px;border:1px solid var(--accent);border-radius:var(--r);
  background:linear-gradient(90deg,var(--accent-soft),var(--surface-2))}
.ir-ico{flex:0 0 auto;inline-size:42px;block-size:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.ir-ico svg{inline-size:22px;block-size:22px}
.ir-copy{flex:1 1 auto;display:grid;gap:3px;min-inline-size:0}
.ir-copy b{font-size:15px;line-height:1.4}
.ir-copy small{font-size:13px;line-height:1.6;color:var(--text-2)}
.ir-open{flex:0 0 auto}
.ir-flash{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-sm);font-size:.9rem;
  background:rgba(62,207,142,.12);border:1px solid rgba(62,207,142,.45)}

@media (max-width:640px){
  .ir-banner{flex-wrap:wrap;padding:14px}
  .ir-copy{flex-basis:calc(100% - 58px)}
  .ir-open{inline-size:100%;justify-content:center}
}

/* the modal — a native <dialog>, so Esc, focus trapping and the top layer come free.
   margin:auto is restated because site.css's `*{margin:0}` reset strips the
   browser default that centres a modal dialog, pinning it to the top corner. */
.ir-modal{position:fixed;inset:0;margin:auto;
  inline-size:min(520px,calc(100vw - 32px));max-block-size:calc(100dvh - 32px);
  padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text);
  box-shadow:0 32px 74px -30px rgba(0,0,0,.6);overflow:auto}
.ir-modal::backdrop{background:rgba(6,16,18,.6);backdrop-filter:blur(3px)}
.ir-dialog{position:relative;padding:26px 22px 22px}
.ir-close{position:absolute;inset-block-start:12px;inset-inline-end:12px;inline-size:34px;block-size:34px;
  display:grid;place-items:center;border:0;border-radius:50%;background:var(--surface-2);color:var(--text-2);cursor:pointer}
.ir-close svg{inline-size:16px;block-size:16px}
.ir-close:hover{color:var(--text)}
.ir-title{margin:0 0 6px;font-size:1.25rem;line-height:1.4;padding-inline-end:40px}
.ir-sub{margin:0 0 18px;font-size:.9rem;line-height:1.7;color:var(--text-2)}
.ir-form{display:grid;gap:14px}
.ir-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.ir-row{grid-template-columns:1fr}}
.ir-form .iti{inline-size:100%}
.ir-submit{inline-size:100%;justify-content:center;margin-block-start:4px}

.ir-done{text-align:center;padding-block:10px}
.ir-done[hidden],.ir-form-view[hidden]{display:none}
.ir-done .ir-title{padding-inline-end:0}
.ir-done-ico{inline-size:56px;block-size:56px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
  background:rgba(62,207,142,.14);color:#3ECF8E}
.ir-done-ico svg{inline-size:28px;block-size:28px}

.ir-modal[open]{animation:ir-pop .22s var(--ease,ease-out)}
@keyframes ir-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* Phones: a bottom drawer instead of a floating box — thumb-reachable, and the
   keyboard pushes the form up rather than covering half of it. */
@media (max-width:640px){
  .ir-modal{inset-block:auto 0;margin:0;inline-size:100%;max-inline-size:100%;
    max-block-size:92dvh;border-radius:var(--r) var(--r) 0 0;border-block-end:0}
  .ir-modal[open]{animation:ir-drawer .28s var(--ease,ease-out)}
  .ir-dialog{padding:22px 16px calc(18px + env(safe-area-inset-bottom))}
  .ir-dialog::before{content:"";display:block;inline-size:40px;block-size:4px;border-radius:2px;
    background:var(--line-strong,var(--line));margin:-8px auto 14px}
}
@keyframes ir-drawer{from{transform:translateY(100%)}to{transform:none}}

@media (prefers-reduced-motion:reduce){.ir-modal[open]{animation:none}}