/* ============================================================
   Platform chrome: the update banner, and later the install screen.
   Kept separate from app.css so this can be changed, or deleted whole,
   without touching the app's own styles.
   ============================================================ */

/* The dock is the only thing positioned. Its children stack upward in
   source order, so nothing has to know what else is on screen. */
.dock{
  position:fixed;
  left:0;right:0;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  padding:0 .8rem;
  pointer-events:none;             /* the page stays usable around them */
}
.dock > *{pointer-events:auto;max-width:100%}

.update-banner{
  display:flex;
  align-items:center;
  gap:.6rem;
  max-width:calc(100vw - 2rem);
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:99px;
  padding:.5rem .5rem .5rem 1rem;
  box-shadow:0 3px 14px rgb(0 0 0 / .18);
  font-size:.88rem;
}
.update-banner span{white-space:nowrap}

/* ---------- install screen ----------
   A card, not a gate. Firefox and desktop Safari cannot install at all, and
   the app works fine for them. */
.install-card{
  width:min(29rem,100%);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 4px 20px rgb(0 0 0 / .22);
  padding:1rem;
  display:flex;flex-wrap:wrap;gap:.85rem;align-items:flex-start;
}
.install-icon{border-radius:11px;flex-shrink:0;display:block}
.install-head{flex:1;min-width:9rem}
.install-head strong{font-size:1rem;font-weight:600;display:block}
.install-head p{font-size:.86rem;color:var(--ink-2);margin-top:.15rem}
.install-steps{flex:1 1 100%;list-style:none;margin:.1rem 0 0;padding:0;
               display:flex;flex-direction:column;gap:.55rem}
.install-steps li{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--ink-2)}
.install-steps b{color:var(--ink);font-weight:600}
.install-steps .gl{
  width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
}
.install-steps .gl svg{width:15px;height:15px;display:block}
.install-note{flex:1 1 100%;font-size:.86rem;color:var(--ink-2)}
.install-actions{flex:1 1 100%;display:flex;gap:.5rem;justify-content:flex-end;align-items:center}