/* installSteps.css — the per-browser install STEPS: numbered lines, glyph chips, the browser-bar mockups and the
   ringed target. Shared by the in-app card (#installHint) and the install page (/install), so the fiddly part — which
   glyph, which corner, what each browser calls it — has exactly one copy.

   Deliberately NOT here: the popup's own frame (fixed positioning, the flex row, hidden/steps modifiers). Those belong
   to the popup; a page rendering the same steps brings its own container. Lifting them once put a position:fixed card
   around the install page and folded its heading beside the steps. */
  .ins-scope .ins-icon { flex:none; width:30px; height:30px; display:grid; place-items:center; }
  .ins-scope .ins-icon svg { width:22px; height:22px; }
  .ins-scope .ins-txt { flex:1; font-size:13px; line-height:1.3; }
  .ins-scope .ins-title { display:block; font-weight:700; }
  .ins-scope .ins-sub { color:var(--muted); }
  .ins-scope .ins-btn { flex:none; padding:8px 16px; border-radius:999px; font-weight:700; font-size:14px; background:var(--btn); color:var(--btn-fg); border:0; cursor:pointer; }
  .ins-scope .ins-x { flex:none; align-self:flex-start; width:26px; height:26px; border-radius:8px; background:var(--field); color:var(--muted); font-size:14px; line-height:1; border:0; cursor:pointer; display:grid; place-items:center; }
  .ins-scope .ins-head { display:flex; align-items:center; gap:9px; }
  .ins-scope .ins-head .ins-title { flex:1; font-size:15px; text-wrap:balance; }
  .ins-scope .ins-onetap { margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); }
  .ins-scope .ins-btn.wide { width:100%; padding:11px; font-size:15px; }
  .ins-scope .ins-body { display:flex; flex-direction:column; gap:14px; }
  .ins-scope .ins-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .ins-scope .ins-steps li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.5; }
  .ins-scope .ins-steps b { font-weight:700; }
  .ins-scope .ins-n { flex:none; width:19px; height:19px; border-radius:50%; background:var(--btn); color:var(--btn-fg); font-weight:700; font-size:11px; display:grid; place-items:center; margin-top:1px; }
  .ins-scope .ins-chip { display:inline-flex; align-items:center; gap:5px; padding:1px 7px 1px 5px; margin:0 1px; vertical-align:-4px; background:var(--field); border:1px solid var(--line); border-radius:7px; font-weight:600; }
  .ins-scope .ins-chip svg { width:15px; height:15px; }
  .ins-scope .ins-dim { color:var(--muted); }
  .ins-scope .ins-bar { position:relative; }
  .ins-scope .ins-body > .ins-bar:first-child { margin-top:16px; }
  .ins-scope .ins-body > .ins-bar:last-child { margin-bottom:22px; }
  .ins-scope .ins-barlabel { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:center; font-weight:700; margin-bottom:5px; }
  .ins-scope .ins-toolbar { display:flex; align-items:center; gap:6px; background:var(--field); border:1px solid var(--line); border-radius:11px; padding:7px 9px; }
  .ins-scope .ins-toolbar.top { justify-content:space-between; }
  .ins-scope .ins-ti { flex:none; display:grid; place-items:center; color:var(--muted); }
  .ins-scope .ins-ti svg { width:18px; height:18px; }
  .ins-scope .ins-url { flex:1; height:20px; display:flex; align-items:center; padding:0 9px; border-radius:6px; background:var(--bg); color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; }
  .ins-scope .ins-sp { flex:1; }
  .ins-scope .ins-target { position:relative; display:grid; place-items:center; padding:3px; border-radius:9px; color:#2563eb; background:rgba(37,99,235,.12); border:2px solid #2563eb; box-shadow:0 0 0 4px rgba(37,99,235,.14); }
  .ins-scope .ins-target svg { width:20px; height:20px; }
  .ins-scope .ins-ptr { position:absolute; white-space:nowrap; font-size:11px; font-weight:700; color:#fff; background:#2563eb; padding:2px 7px; border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.25); z-index:1; }
  .ins-scope .ins-ptr.below { top:calc(100% + 11px); left:50%; transform:translateX(-50%); }
  .ins-scope .ins-ptr.below::before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-bottom-color:#2563eb; }
  .ins-scope .ins-ptr.aboveR { bottom:calc(100% + 11px); right:-6px; }
  .ins-scope .ins-ptr.aboveR::after { content:''; position:absolute; top:100%; right:14px; border:6px solid transparent; border-top-color:#2563eb; }
  @keyframes insIn { from { transform:translateX(-50%) translateY(-14px); opacity:0; } to { transform:translateX(-50%) translateY(0); opacity:1; } }