/* The installable Studio (P347): the home's install sheet (src/studio/pwa/install-sheet.ts), the update bar
   (src/studio/pwa/update-bar.ts) and the offline screen (/studio/offline.html, which the service worker keeps). */

/* ---- Install sheet body (frames azBZf, KfRnf), inside phoneSheet (phone-sheet.css) ---- */

.pwa-install { display: flex; flex-direction: column; gap: 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.pwa-install__intro { display: flex; align-items: center; gap: 14px; }
.pwa-install__app { flex: none; border-radius: 10px; }
.pwa-install__lede { margin: 0; color: var(--st-text-dim); font: 400 14px/1.4 var(--st-font); }
.pwa-install__steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pwa-install__step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-card);
  color: var(--st-text-dim);
  font: 400 15px/1.2 var(--st-font);
}
.pwa-install__num {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--st-surface-2);
  color: var(--st-text-strong);
  font-size: 12px;
  font-weight: 600;
}
.pwa-install__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--st-surface-2);
  color: var(--st-text-strong);
  font-weight: 600;
}
.pwa-install__chip-icon { width: 16px; height: 16px; color: var(--st-art-blue); }
.pwa-install__wide { justify-content: center; width: 100%; height: 48px; }
.pwa-install__wide .st-icon { width: 18px; height: 18px; }
.pwa-install__foot { margin: 0; color: var(--st-text-faint); font: 400 13px/1.4 var(--st-font); text-align: center; }

/* ---- Update bar (frame v1AUh) ---------------------------------------------- */

.pwa-update {
  position: fixed;
  inset-inline: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  height: 52px;
  margin-inline: auto;
  padding: 0 6px 0 14px;
  border: 1px solid var(--st-line-strong);
  border-radius: 12px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font: 400 14px/1.2 var(--st-font);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--st-shadow) 40%, transparent);
}
/* On the phone song page it is a card in the note slot above the player bar (phone-notes.css, D470). */
.pwa-update__icon { width: 18px; height: 18px; color: var(--st-accent); }
.pwa-update__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-update__reload { height: 36px; padding: 0 14px; background: var(--st-accent-soft); color: var(--st-accent); font-weight: 600; font-size: 14px; }
.pwa-update__reload:hover { background: color-mix(in srgb, var(--st-accent) 22%, transparent); }

/* ---- Offline screen (frame KKbk5) ------------------------------------------ */

/* The page loads only tokens.css and this file, so it sets the theme and the type base.css would. */
:root:has(body.offline) { color-scheme: dark; --font: system-ui, -apple-system, "Segoe UI", sans-serif; }
@media (prefers-color-scheme: light) { :root:has(body.offline):not([data-theme='dark']) { color-scheme: light; } }
:root:has(body.offline)[data-theme='light'] { color-scheme: light; }

.offline {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--st-bg);
  color: var(--st-text);
  font: 400 15px/1.5 var(--st-font);
}
.offline__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--st-line);
  font-size: 17px;
  font-weight: 600;
}
.offline__bar img { border-radius: 7px; }
.offline__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  text-align: center;
}
.offline__icon { width: 40px; height: 40px; color: var(--st-text-faint); }
.offline h1 { margin: 16px 0 8px; font-size: 19px; font-weight: 700; }
.offline p { max-width: 270px; margin: 0 0 16px; color: var(--st-text-dim); }
.offline__retry {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font: 600 15px/1 var(--st-font);
  cursor: pointer;
}
.offline__retry svg { width: 18px; height: 18px; }
.offline__retry:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 2px; }