/* Install page only. Tokens, font, .btn, .link, .spinner come from ../css/style.css. Everything here is scoped to .ins* / body.ins-page. */
body.ins-page{padding:0;min-height:100vh;min-height:100dvh;background:var(--color-secondary)}
.ins{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto}

.ins-hero{flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:calc(var(--sp-8) + var(--safe-top)) var(--sp-5) var(--sp-8);color:var(--color-on-secondary);text-align:center}
.ins-logo{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:var(--sp-4) var(--sp-6);display:flex;align-items:center;justify-content:center;min-height:88px}
.ins-logo img{display:block;width:min(240px,62vw);height:auto;max-height:110px;object-fit:contain}
.ins-tag{margin:0;font-weight:var(--fw-semibold);font-size:var(--fs-card-title)}

.ins-sheet{flex:1;background:var(--color-surface);border-radius:28px 28px 0 0;padding:var(--sp-6) var(--sp-5) calc(var(--sp-6) + var(--safe-bottom))}
.ins-sheet h1{font-size:var(--fs-page);margin-bottom:var(--sp-2)}
.ins-lead{color:var(--color-text-primary);margin-bottom:var(--sp-5)}

.ins-feats{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:var(--sp-3)}
.ins-feats li{display:flex;gap:var(--sp-3);align-items:center;background:var(--color-secondary-soft);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4)}
.ins-feats h2{font-size:var(--fs-body);font-weight:var(--fw-semibold);margin:0}
.ins-feats p{margin:0;font-size:var(--fs-small)}
.ins-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--color-secondary);color:var(--color-on-secondary);display:flex;align-items:center;justify-content:center}

/* One state visible at a time: elements list the states they belong to in data-show */
.ins [data-show]{display:none}
.ins[data-state="checking"] [data-show~="checking"],
.ins[data-state="ready"] [data-show~="ready"],
.ins[data-state="ios"] [data-show~="ios"],
.ins[data-state="installing"] [data-show~="installing"],
.ins[data-state="manual"] [data-show~="manual"],
.ins[data-state="dismissed"] [data-show~="dismissed"],
.ins[data-state="installed"] [data-show~="installed"],
.ins[data-state="incomplete"] [data-show~="incomplete"],
.ins[data-state="inapp"] [data-show~="inapp"]{display:block}
.ins[data-state="ready"] .btn[data-show],.ins[data-state="ios"] .btn[data-show]{display:flex}
.ins-guide[hidden]{display:none!important}

.ins-checking{display:none;align-items:center;gap:var(--sp-3);background:var(--color-surface-muted);border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);color:var(--color-text-strong)}
.ins[data-state="checking"] .ins-checking[data-show~="checking"],.ins[data-state="installing"] .ins-checking[data-show~="installing"]{display:flex}
.ins-msg{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);background:var(--color-info-soft);color:var(--color-text-strong)}
.ins-msg:empty{display:none!important}
.ins-msg.ok{background:var(--color-success-soft)}
.ins-guide{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border:var(--border);border-radius:var(--radius-md)}
.ins-guide h2{font-size:var(--fs-body);margin:0 0 var(--sp-1)}
.ins-guide p{margin:0 0 var(--sp-2);font-size:var(--fs-small)}
.ins-guide p:last-child{margin:0}
.ins-fine{margin:var(--sp-3) 0 0;text-align:center;font-size:var(--fs-small);color:var(--color-text-secondary)}
.ins .btn{margin-top:var(--sp-3)}
.ins .btn[disabled]{cursor:progress}

/* iOS instructions: bottom sheet */
.ins-dlg{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:auto;background:var(--color-surface);color:var(--color-text-primary);border-radius:28px 28px 0 0;box-shadow:var(--shadow-2)}
.ins-dlg::backdrop{background:rgba(51,51,51,.55)}
.ins-dlg-in{padding:var(--sp-6) var(--sp-5) calc(var(--sp-5) + var(--safe-bottom))}
.ins-dlg h2{font-size:var(--fs-page)}
.ins-dlg-sub{color:var(--color-text-secondary)}
.ins-steps{list-style:none;margin:var(--sp-4) 0;padding:0;display:grid;gap:var(--sp-3)}
.ins-steps li{display:flex;gap:var(--sp-3);align-items:center;background:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4)}
.ins-steps b{color:var(--color-text-strong)}
.ins-steps p{margin:var(--sp-1) 0 0;font-size:var(--fs-small)}
.ins-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--color-primary-text);color:var(--color-on-primary);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center}
.ins-sic{margin-left:auto;color:var(--color-secondary);width:32px;height:32px}

/* Landscape phones: logo left, content right */
@media (orientation:landscape) and (max-height:520px){
  .ins{flex-direction:row;max-width:none}
  .ins-hero{flex:0 0 38%;justify-content:center;padding:var(--sp-4) var(--sp-5)}
  .ins-sheet{border-radius:28px 0 0 28px;overflow-y:auto;max-height:100vh;max-height:100dvh;padding-right:max(var(--sp-5),env(safe-area-inset-right,0px))}
  .ins-lead{margin-bottom:var(--sp-3)}
}
@media (min-width:768px) and (min-height:640px){ .ins-sheet{border-radius:28px;margin-bottom:var(--sp-8)} .ins-hero{padding-top:var(--sp-12)} }