/* The song page with no internet on a phone (P348, P493; src/studio/offline/ui/panel.ts): the top bar's Offline pill
   and the slim bar over the video box. Phones only (≤ 640 px): over that none of it shows, so the laptop is
   unchanged. Colours are the Studio's tokens, light and dark. */

.off-pill,
.off-panel { display: none; }

@media (max-width: 640px) {
  /* ---- The Offline pill, in a top bar (frames 6–8) ------------------------------------------------------ */
  .off-pill:not([hidden]) {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid var(--st-line-strong);
    border-radius: 16px;
    background: var(--st-surface);
    color: var(--st-text-dim);
    font: 600 13px/1 var(--st-font);
  }
  .off-pill .st-icon { width: 15px; height: 15px; }

  /* ---- The song page offline (frames 7–8): the panel over the video box, the play bar off ------------------- */
  .st-shell[data-offline='true'] .ph-video__top,
  .st-shell[data-offline='true'] .ph-bar__btn { display: none; }
  /* The slim bar (P348): where the video sat, as a 48px card, saying why the song can't play. */
  .off-panel:not([hidden]) { display: block; margin: 8px var(--ph-gutter, 16px) 6px; }
  .off-panel__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    height: 48px;
    padding: 0 6px;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-surface);
  }
  .off-panel__tile { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--st-surface-2); color: var(--st-text-dim); }
  .off-panel__tile .st-icon { width: 20px; height: 20px; }
  .off-panel__title { flex: 1; min-width: 0; overflow: hidden; color: var(--st-text-strong); font: 600 14px/18px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
  .st-shell[data-offline-audio='none'] .st-shell__playbar { opacity: 0.45; }
  /* Nothing to play: no YouTube box, so none of its "didn't load" or "Play from our server instead". */
  .st-shell[data-offline-audio='none'] .yt-mini { display: none; }
}

/* ---- Offline in the installed apps (P415 T1, frames 1–3, 5; P493; src/studio/offline/mac.ts). Only the Mac app
   and the home-screen phone app draw these elements and set data-mac-offline, so a browser tab is unchanged (D539). */
.mac-net { display: flex; flex: none; align-items: center; gap: 12px; margin: 0 12px; }
/* Nothing to show (online, no sync line): no margin or flex gap left behind in the top bar. */
.mac-net:not(:has(.sync-status:not([hidden]), .off-pill:not([hidden]))) { display: none; }
.mac-net__sync { display: contents; }
/* The sync status (P415 T4, frames 1 and 4; src/studio/sync/status-view.ts). */
.sync-status:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; color: var(--st-text-strong); font: 600 13px/16px var(--st-font); white-space: nowrap; }
.sync-status .st-icon { width: 15px; height: 15px; color: var(--st-text-dim); }
.sync-status[data-tone='synced'] .st-icon { color: var(--st-ok); }
.sync-status[data-tone='syncing'] .st-icon { animation: sync-turn 1s linear infinite; }
.sync-status[data-tone='failed'],
.sync-status[data-tone='failed'] .st-icon { color: var(--st-error); }
.sync-status .st-btn { height: 28px; padding: 0 10px; }
@media (prefers-reduced-motion: reduce) { .sync-status[data-tone='syncing'] .st-icon { animation: none; } }
@keyframes sync-turn { to { transform: rotate(360deg); } }
.mac-net .off-pill:not([hidden]) {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--st-line-strong);
  border-radius: 16px;
  background: var(--st-surface);
  color: var(--st-text-dim);
  font: 600 13px/1 var(--st-font);
}
.mac-net .off-pill .st-icon { width: 15px; height: 15px; }
/* The phone app at a phone's width (P493, D539): a top bar is ☰, logo, the page's name in full, Offline, then the
   page's icons. No sync status in it (its "Couldn't sync · Retry" shows on wider screens), and on the Studio's and the
   song's bars, where a title needs the room, the pill is its icon alone (its label and title say Offline). The Mac's
   (data-offline-app='mac') is as it was at any width (D510). */
@media (max-width: 640px) {
  [data-offline-app='phone'] .mac-net__sync { display: none; }
  .st-phone-bar__actions .mac-net { margin: 0; }
  [data-offline-app='phone'] [data-slot='topbar'] .mac-net { margin: 0 4px; }
  [data-offline-app='phone'] :is([data-slot='topbar'], .st-shell__phone-bar) .off-pill:not([hidden]) { justify-content: center; width: 32px; padding: 0; }
  [data-offline-app='phone'] :is([data-slot='topbar'], .st-shell__phone-bar) .off-pill__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.mac-note,
.mac-admin-off { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface); }
.mac-note__icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--st-text-dim); }
.mac-note__title { margin: 0 0 4px; color: var(--st-text-strong); font: 600 16px/21px var(--st-font); }
.mac-note__body { margin: 0; color: var(--st-text-dim); font-size: 14px; line-height: 19px; }
.mac-admin-off { align-items: center; color: var(--st-text-strong); font: 600 15px/20px var(--st-font); }
.mac-admin-off .st-icon { width: 20px; height: 20px; color: var(--st-text-dim); }
/* The Admin page offline is that line alone. */
html[data-mac-offline='true'] main#main:has(> .mac-admin-off) > :not(.mac-admin-off) { display: none; }
/* A song that can't open on this Mac: dimmed, with "Needs a connection" in place of its stem state. */
[data-needs-connection] { opacity: 0.45; cursor: default; }
[data-needs-connection] .db-row__stem { display: none; }
/* In a song row it sits in the 64-70px last column: wrap onto two lines rather than spill into the gap. */
.mac-needs { color: var(--st-text-faint); font-size: 13px; line-height: 16px; }
/* In a History row (P492) it takes the Open column, on one line, and saved rows keep that width while offline, so the
   key, source, count and time sit on one x down the list. 136px fits "Needs a connection" at 13px. */
.hi-row { --hi-needs-w: 136px; }
.hi-row[data-needs-connection] .hi-open { display: none; }
.hi-row > .mac-needs { flex: none; width: var(--hi-needs-w); text-align: right; white-space: nowrap; }
html[data-mac-offline='true'] .hi-row:not([data-needs-connection]) .hi-open { margin-left: calc(var(--hi-needs-w) - 56px); }
/* Narrow windows fold the Open column away (history.css): the saved rows reserve the note and its gap at the end. */
@media (max-width: 720px) {
  html[data-mac-offline='true'] .hi-row:not([data-needs-connection]) { padding-right: calc(10px + 14px + var(--hi-needs-w)); }
}
/* Adding a song offline (frame 1): Get chords and Upload file (the song page's Upload too) at 0.4; the field keeps "Adding songs needs a connection". */
html[data-mac-offline='true'] [data-mac-adding] :is(button, a) { opacity: 0.4; }
html[data-mac-offline='true'] button.sp-split[aria-disabled='true'] { opacity: 0.45; }
/* The Dashboard's resume panel for a song that can't open here (frame 1): one line, above the song. */
.db-resume[data-needs-connection] { opacity: 1; }
.db-resume[data-needs-connection] > :not(.mac-needs) { opacity: 0.45; }
.mac-needs--resume { display: block; margin: 0 0 8px; font-size: 14px; }