/* P353 (D470): every note on the phone song page sits in one slot, 12px above the play bar with 12px side margins,
   one at a time, as the same card: a round icon, a title, a sub line and its action on the right. The notes stay
   where their code puts them (cues-card.ts's silent note, offline/ui/panel.ts's bar, pwa/update-bar.ts, the Silent
   Mode tip, silent-tip.ts); this file only places and dresses them, so a wider screen is unchanged.
   The slot sits under an open sheet (phone-sheet.css, z-index 30), never over it. --ph-sheet-bottom is the play
   bar's height (phone-song/index.ts), 108px until a sheet first opens.
   One at a time: an action note (silent, couldn't load, offline) beats the update bar, which beats the tip. The
   loser is hidden while the winner shows and comes back when it goes. */

/* "Lyrics are ready" (P392, phone-song/lyrics-panel.ts): the phone's alone. */
.ph-tip--ready { display: none; }

@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  /* ---- The slot -------------------------------------------------------------------------------------------- */
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'],
  .st-shell[data-screen='song'] .off-panel:not([hidden]),
  :root:has(.st-shell[data-screen='song']) .pwa-update,
  .st-shell[data-screen='song'] .ph-tip:not([hidden]) {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(var(--ph-sheet-bottom, 108px) + 12px);
    left: 12px;
    z-index: 25;
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
  }

  /* ---- One at a time --------------------------------------------------------------------------------------- */
  /* Two action notes: the silent one is about the sound right now, the offline bar stays as long as the page. */
  :root:has(.st-shell[data-screen='song'] .ph-cue-card[data-kind='silent']:not([hidden])) .off-panel { display: none; }
  :root:has(.st-shell[data-screen='song'] :is(.ph-cue-card[data-kind='silent']:not([hidden]), .off-panel:not([hidden]))) .pwa-update,
  :root:has(.st-shell[data-screen='song'] :is(.ph-cue-card[data-kind='silent']:not([hidden]), .off-panel:not([hidden]))) .ph-tip:not([hidden]),
  :root:has(.st-shell[data-screen='song']):has(.pwa-update) .ph-tip:not([hidden]) { display: none; }
  /* Lyrics are ready (P392) is a tip with an action: it beats the Silent Mode tip, as the update bar does. */
  :root:has(.st-shell[data-screen='song'] .ph-tip--ready:not([hidden])) .ph-tip:not([hidden]):not(.ph-tip--ready) { display: none; }
  .st-shell[data-screen='song'] .ph-tip--ready .ph-tip__icon { background: var(--st-accent-soft); color: var(--st-accent); }
  .st-shell[data-screen='song'] .ph-tip--ready .ph-tip__go { flex: none; height: 40px; }

  /* ---- The card -------------------------------------------------------------------------------------------- */
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'],
  .st-shell[data-screen='song'] .off-panel__bar,
  :root:has(.st-shell[data-screen='song']) .pwa-update,
  .st-shell[data-screen='song'] .ph-tip:not([hidden]) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    min-height: 0;
    padding: 12px;
    border: 1px solid var(--st-line-strong);
    border-radius: 12px;
    outline: 0;
    background: var(--st-surface-2);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--st-shadow) 40%, transparent);
    color: var(--st-text);
    font: 400 12px/16px var(--st-font);
    text-align: left;
    white-space: normal;
  }
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'][hidden] { display: none; }

  /* The round icon. */
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'] .ph-cue-card__icon,
  .st-shell[data-screen='song'] .off-panel__tile,
  .st-shell[data-screen='song'] .ph-tip__icon,
  :root:has(.st-shell[data-screen='song']) .pwa-update__icon {
    box-sizing: border-box;
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    background: var(--st-surface);
    color: var(--st-text);
  }
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'] .ph-cue-card__icon { background: var(--st-accent-soft); color: var(--st-accent); }
  :root:has(.st-shell[data-screen='song']) .pwa-update__icon { color: var(--st-accent); }
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'] .ph-cue-card__icon .st-icon,
  .st-shell[data-screen='song'] .off-panel__tile .st-icon,
  .st-shell[data-screen='song'] .ph-tip__icon .st-icon { width: 20px; height: 20px; }
  .st-shell[data-screen='song'] .ph-tip__icon { color: var(--st-chord-ink); }

  /* The title, 14/600, and the sub, 12 secondary. */
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'] .ph-cue-card__title,
  .st-shell[data-screen='song'] .off-panel__title,
  :root:has(.st-shell[data-screen='song']) .pwa-update__text,
  .st-shell[data-screen='song'] .ph-tip__title { color: var(--st-text-strong); font: 600 14px/18px var(--st-font); }
  .st-shell[data-screen='song'] .ph-cue-card[data-kind='silent'] .ph-cue-card__sub,
  .st-shell[data-screen='song'] .off-panel__body,
  .st-shell[data-screen='song'] .ph-tip__sub { color: var(--st-text-dim); font: 400 12px/16px var(--st-font); }
  .st-shell[data-screen='song'] .off-panel__words,
  .st-shell[data-screen='song'] .ph-tip__words { display: grid; flex: 1; gap: 2px; min-width: 0; }
  :root:has(.st-shell[data-screen='song']) .pwa-update__text { white-space: normal; }

  /* The action on the right. */
  .st-shell[data-screen='song'] .ph-cue-card__go { display: inline-flex; flex: none; color: var(--st-text-faint); }
  .st-shell[data-screen='song'] .ph-cue-card__go .st-icon { width: 20px; height: 20px; }
  .st-shell[data-screen='song'] .ph-tip__close { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; color: var(--st-text-dim); }
  .st-shell[data-screen='song'] .off-panel__add,
  :root:has(.st-shell[data-screen='song']) .pwa-update__reload { flex: none; align-self: center; height: 40px; }
}