/* ---------- putting the app on the home screen (owner, 2026-10-07: "an announcement banner at the top, with a button") ----------
   The banner is the first thing in the app's column, above the panel, on an Android or iOS device that shows Dorax in a browser tab
   (js/features/install/). It scrolls away with the page; the panel under it is what stays. A computer never draws it. */
.install-bar { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink-strong); }
.install-bar .ins-app { width: 38px; height: 38px; border-radius: 9px; flex: none; box-shadow: 0 0 0 1px var(--line-strong); }
.install-bar .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.install-bar b { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.install-bar small { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.install-bar .btn.primary { min-height: 40px; padding: 0 16px; flex: none; }
.install-bar .x { flex: none; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
.install-bar .x svg { width: 15px; height: 15px; }
@media (min-width: 921px) { .topbar > .install-bar { order: -1; flex: 1 0 100%; margin: -6px 0 6px; border: 1px solid var(--line); border-radius: var(--r-mid); } }      /* a tablet wide enough for the computer's layout */
@media (max-width: 920px) { .install-bar { padding-top: calc(var(--safe-t) + 10px); } .install-bar ~ .navbar { padding-top: 16px; } }      /* the banner takes the room at the very top; the panel under it needs no more of its own */
/* the steps */
.ins-steps { list-style: none; margin: 14px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ins-steps li { display: flex; align-items: center; gap: 14px; }
.ins-steps .fl-ico { width: 44px; height: 44px; color: var(--side-ink); background: var(--side); border-color: var(--side-line); }
.ins-steps .fl-ico svg { width: 20px; height: 20px; }
.ins-steps .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-steps b { font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--ink-strong); }
.ins-steps small { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
/* the question about notifications, a moment after the first-time setup (js/features/reminders/push-ask.js): a notice like the others, with its two answers */
.curio.nudge .row { margin-top: 8px; flex-wrap: wrap; }
.curio.nudge .btn.primary { min-height: 40px; }