/* Carby's O-Chem — install card, "new version ready" bar and offline pill (js/pwa.js) */
.sw-bar { position: fixed; left: 0; right: 0; bottom: 20px; margin-inline: auto; width: max-content; z-index: 400; display: flex; align-items: stretch; max-width: min(560px, calc(100vw - 24px)); background: var(--panel); border: 2px solid var(--brand); border-radius: 16px; box-shadow: var(--shadow); animation: fadeUp .3s; overflow: hidden; }
.sw-bar button { background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; }
.sw-bar .sw-go { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; font-weight: 600; flex: 1; }
.sw-bar .sw-go:hover { background: var(--soft); }
.sw-bar .sw-go .mascot { flex: none; }
.sw-bar .sw-x { padding: 0 14px; color: var(--ink2); border-left: 2px solid var(--line); font-weight: 800; }
.sw-bar .sw-x:hover { color: var(--ink); background: var(--soft); }
@media (max-width: 900px) { .sw-bar { bottom: calc(76px + env(safe-area-inset-bottom)); } }

.pwa-card { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.pwa-card > div:nth-child(2) { flex: 1; min-width: 200px; }
.pwa-card h3 { margin: 0 0 2px; }
.pwa-card p { margin: 0; }
.pwa-how { text-align: center; }
.pwa-how .pwa-steps { text-align: left; padding-left: 22px; line-height: 1.6; }
.pwa-how .pwa-steps li { margin: 6px 0; }
.pwa-share { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border: 2px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--blue); vertical-align: middle; }

.net-pill { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); }
.net-pill[hidden] { display: none; }
/* phones: no room in the top bar, so it becomes a small badge on Carby's avatar */
@media (max-width: 900px) { .net-pill { position: absolute; left: 6px; bottom: 4px; z-index: 2; padding: 1px 4px; font-size: 11px; gap: 0; } .net-pill .np-t { display: none; } }