/* P349 — spoken cues, dynamics and muting on the phone (src/studio/phone/cues-*.ts, dynamic-*.ts, sounds-sheet.ts;
   D470's Sounds and Names, dynamics and voice sheets). The marks laid on the shared sheet, chord row and seek bar exist at every width, so outside
   the phone layout they are hidden here and nothing changes on a wider screen. Touch: every sheet row and button 44px or more,
   chips 36 high on a 44 hit area, toolbar toggles 40×40 on a 44 hit area (36 wide at 360). */

.ph-cue-tag,
.ph-cue-ticks,
.ph-cue-banner-host { display: none; }

@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  /* ---- Chips (the offline sheet's): 40 high on a 44 hit area; on is the accent outline with its soft fill ---------------- */
  .ph-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 10px; background: transparent; color: var(--st-text-dim); font: 500 14px/1 var(--st-font); white-space: nowrap; touch-action: manipulation; }
  .ph-chip::before { position: absolute; inset: -2px; content: ''; }
  .ph-chip .st-icon { color: var(--st-text-faint); }
  .ph-chip[aria-pressed='true'] { border-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-text-strong); }
  .ph-chip[aria-pressed='true'] .st-icon { color: var(--st-text-strong); }

  /* ---- Sheets: notes ------------------------------------------------------------------------------------------- */
  .ph-cue-note { margin: 10px 0 0; color: var(--st-text-faint); font: 400 12px/1.4 var(--st-font); }
  .ph-cue-pair { display: inline-flex; align-items: center; gap: 10px; }
  .ph-cue-group { margin: 14px 0 8px; color: var(--st-text-faint); font: 600 12px/1 var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-cue-group:first-child { margin-top: 0; }
  .ph-cue-edit .st-btn { min-height: 44px; }

  /* ---- Sounds (D549): Song, Metronome, Spoken cues cards, each with Volume and L & R; one 390 × 844 screen, no scroll */
  .ph-snd { gap: 8px; padding-bottom: 8px; }
  .ph-snd-card { display: grid; gap: 4px; padding: 4px 14px 8px; border-radius: 14px; background: var(--st-surface-2); }
  .ph-snd-card[hidden] { display: none; }
  .ph-snd-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  .ph-snd-head__icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--st-panel); color: var(--st-accent); }
  .ph-snd-head__icon .st-icon { width: 16px; height: 16px; }
  .ph-snd-head__icon .mixer-metronome-icon { color: var(--st-stem-metronome); }
  .ph-snd-head__icon .mixer-metronome-icon__needle { stroke: var(--st-panel); }
  .ph-snd-head__name { flex: 1; min-width: 0; color: var(--st-text-strong); font: 500 16px/21px var(--st-font); }
  .ph-snd-bpm { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--st-accent); font: 500 15px/1 var(--st-font); white-space: nowrap; cursor: pointer; }
  .ph-snd-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
  .ph-snd-line[data-off='true'] { opacity: 0.5; }
  .ph-snd-line__name { color: var(--st-text-dim); font: 400 15px/20px var(--st-font); white-space: nowrap; }
  .ph-snd-pair { display: inline-flex; align-items: center; gap: 10px; }
  .ph-snd-pair .st-btn { min-height: 36px; }
  .ph-snd-reset { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--st-accent); font: 500 17px/22px var(--st-font); cursor: pointer; }
  .ph-snd-reset:disabled { color: var(--st-text-faint); opacity: 0.5; cursor: default; }
  /* Each tab's own Reset (P616): small, at the card's foot, only while its levels aren't the default. */
  .ph-snd-reset--part { justify-self: end; min-height: 36px; font-size: 15px; }
  .ph-snd-reset--part[hidden] { display: none; }

  /* ½× · 1× · 2× full width; Count-in at the right of its name. On: the accent outline with its soft fill (as .ph-chip). */
  .ph-snd .st-seg { display: flex; }
  .ph-snd-line .st-seg { flex: 0 1 250px; }
  .ph-snd .st-seg__item { flex: 1; min-height: 32px; font-size: 14px; }
  .ph-snd .st-seg__item[aria-checked='true'] { outline-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-text-strong); }
  /* Click speed: three equal thirds, edge to edge, each "½×" over "38 a minute", centred; the picked one in the accent. */
  .ph-snd .ph-snd-rate { gap: 3px; padding: 3px; border-radius: 10px; }
  .ph-snd .ph-snd-rate .st-seg__item { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 52px; padding: 6px 2px; border-radius: 8px; color: var(--st-text-dim); font: 600 16px/1 var(--st-font); }
  .ph-snd-rate__sub { color: var(--st-text-faint); font: 400 12px/1 var(--st-font); font-variant-numeric: tabular-nums; }
  .ph-snd .ph-snd-rate .st-seg__item[aria-checked='true'] { color: var(--st-text-strong); }
  .ph-snd-rate .st-seg__item[aria-checked='true'] .ph-snd-rate__sub { color: var(--st-text); }

  /* Volume and L & R (D695): a long volume slider under its caption, then the laptop's pan knob with L and R under it
     (mixer.css .mixer-track__pan), as a stem's popover (phone-stems.css .psv-pop__levels). */
  .ph-snd-levels { display: flex; align-items: flex-end; gap: 16px; padding: 2px 0 4px; }
  .ph-snd-levels__volume { flex: 1; min-width: 0; }
  .ph-snd-levels__caption { display: block; color: var(--st-text-dim); font: 400 13px/16px var(--st-font); }
  .ph-snd-levels .st-slider { --slider-color: var(--st-accent); }
  .ph-snd-levels .st-slider__track { height: 28px; }
  .ph-snd-levels .st-slider__thumb { width: 20px; height: 20px; border-radius: 10px; outline: 0; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.35); }

  /* ---- Word chips (frame 9) -------------------------------------------------------------------------------------- */
  .ph-cue-words { display: grid; gap: 6px; }
  .ph-cue-words__group { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; }
  .ph-cue-words__title { color: var(--st-text-faint); font: 600 10px/1 var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-cue-words__chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .ph-cue-chip {
    position: relative;
    height: 36px;
    margin: 4px 0;
    padding: 0 12px;
    border: 1px solid var(--st-line-strong);
    border-radius: 10px;
    background: var(--st-surface-2);
    color: var(--st-text);
    font: 500 13px/1 var(--st-font);
  }
  .ph-cue-chip::before { content: ''; position: absolute; inset: -4px 0; }
  .ph-cue-chip[aria-pressed='true'] { border-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-text-strong); }
  .ph-cue-where { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 8px; padding: 0 12px; border-radius: 12px; background: var(--st-surface-2); }
  .ph-cue-where__icon { color: var(--st-accent); }
  .ph-cue-add { width: 100%; margin-top: 12px; }

  /* ---- Edit a dynamic (frames 10, 13): the zoomed timeline under a fixed pin ------------------------------------ */
  .ph-cue-edit__head { display: flex; align-items: baseline; gap: 10px; }
  .ph-cue-edit__time { font: 700 22px/1.2 var(--st-font-mono); }
  .ph-cue-edit__where { flex: 1; color: var(--st-text-dim); font: 400 12px/1 var(--st-font); text-align: right; }
  .ph-cue-edit__delete { color: var(--st-accent-ink); }
  .ph-cue-edit[data-gone='true'] > :not(.ph-cue-edit__head) { visibility: hidden; }
  .ph-cue-tl {
    position: relative;
    height: 104px;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid var(--st-line);
    border-radius: 12px;
    background: var(--st-surface-2);
    touch-action: none;
    cursor: grab;
  }
  .ph-cue-tl__strip > * { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  /* The ruler's times and chord names are the sections timeline's (rulerMarks, phone-sections.css). */
  .ph-cue-tl__beat { top: 0; width: 1px; height: 6px; background: var(--st-line-strong); }
  .ph-cue-tl__beat--bar { height: 10px; background: var(--st-text-faint); }
  .ph-cue-tl__other { top: 30px; padding: 2px 6px; border-radius: 6px; background: var(--st-surface); color: var(--st-text-dim); font: 700 10px/1.2 var(--st-font); }
  .ph-cue-tl__playhead { top: 0; bottom: 0; width: 2px; background: var(--st-accent); opacity: 0.6; }
  .ph-cue-tl__pin { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--st-text-strong); transform: translateX(-50%); pointer-events: none; }
  .ph-cue-tl__tag {
    position: absolute;
    top: 52px;
    left: 50%;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--st-text-strong);
    color: var(--st-bg);
    font: 700 11px/1 var(--st-font);
    white-space: nowrap;
    transform: translateX(-50%);
  }
  .ph-cue-edit__hint { display: flex; justify-content: space-between; }
  .ph-cue-edit__key::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--st-accent); vertical-align: middle; }
  .ph-cue-edit .ph-sec-steps { margin: 10px 0 4px; }
  .ph-cue-caption { color: var(--st-text-faint); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-cue-edit__word { color: var(--st-text); font-size: 15px; }

  /* ---- The dynamics list ------------------------------------------------------------------------------------------ */
  .ph-cue-list { display: grid; margin: 0 0 12px; padding: 0; list-style: none; }
  .ph-cue-list__row { display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--st-line); background: none; color: inherit; text-align: left; }

  /* ---- The cue card (frames 11–12), dropping under the sheet toolbar over the chart ----------------------------- */
  .ph-cue-banner-host { display: block; order: 3; position: relative; z-index: 5; height: 0; }
  .ph-cue-card {
    --ph-cue-sect: var(--st-text-strong);
    position: absolute;
    top: 6px;
    right: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    border: 2px solid var(--ph-cue-sect);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ph-cue-sect) 14%, var(--st-surface));
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
  }
  .ph-cue-card[hidden] { display: none; }
  .ph-cue-card[data-kind='silent'] { color: var(--st-text-strong); font: inherit; text-align: left; cursor: pointer; }
  .ph-cue-card[data-kind='silent'] .ph-cue-card__title { color: var(--st-text-strong); }
  @media (prefers-reduced-motion: no-preference) {
    .ph-cue-card:not([hidden]) { animation: ph-cue-drop 160ms ease-out; }
    @keyframes ph-cue-drop { from { transform: translateY(-8px); opacity: 0; } }
  }
  .ph-cue-card__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--st-text-strong); color: var(--st-bg); }
  .ph-cue-card[data-kind='section'] .ph-cue-card__icon { background: var(--ph-cue-sect); }
  .ph-cue-card__words { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .ph-cue-card__title { color: var(--ph-cue-sect); font: 800 20px/1.1 var(--st-font); }
  .ph-cue-card[data-kind='dynamic'] .ph-cue-card__title { color: var(--st-text-strong); }
  .ph-cue-card__sub { color: var(--st-text-dim); font: 400 12px/1 var(--st-font); }
  .ph-cue-card__counts { display: flex; gap: 4px; }
  .ph-cue-card__count { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--st-line-strong); border-radius: 6px; color: var(--st-text-faint); font: 600 12px/1 var(--st-font); }
  .ph-cue-card__count[data-lit='true'] { border-color: var(--st-text-strong); background: var(--st-text-strong); color: var(--st-bg); }
  /* The page's one Undo toast (mixer/cue-toast.ts): above the player bar, over a sheet. */
  .cue-toast { bottom: calc(var(--ph-sheet-bottom, 108px) + 8px); z-index: 35; }
  /* A phone's toast stays on screen: its words wrap (two lines at 390), its Undo keeps its size. */
  .cue-toast { width: max-content; max-width: calc(100vw - 24px); white-space: normal; }
  .cue-toast__undo { flex: none; }
  .cue-toast__ok { flex: none; }

  /* ---- Marks on the chart, the chord row and the seek bar --------------------------------------------------------- */
  .ph-cue-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin: 4px 0;
    padding: 0 8px;
    border: 1px solid var(--st-line-strong);
    border-radius: 6px;
    background: var(--st-surface-2);
    color: var(--st-text);
    font: 700 11px/1 var(--st-font);
    letter-spacing: 0.04em;
  }
  .ph-cue-tag__icon { width: 14px; height: 14px; }
  .st-shell[data-screen='song'] [data-slot='live'] .live__chip[data-ph-cue]::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--st-text-strong) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E");
  }
  .ph-cue-ticks { display: block; position: absolute; inset: 0; pointer-events: none; }
  .ph-cue-ticks__tick { position: absolute; top: 50%; width: 2px; height: 12px; border-radius: 1px; background: #fff; transform: translate(-50%, -50%); }
}

/* A long press anywhere on the phone's controls (toolbar, chord row, play bar, sheets) neither selects text nor opens
   iOS's Copy · Look Up callout; the chart's lyrics stay selectable. Safari needs the -webkit- form. */
@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  .st-shell[data-screen='song'] :is(.st-shell__phone-bar, .st-shell__phone-tools, .st-shell__phone-play, .st-shell__playbar, [data-slot='live']),
  .ph-sheet, .ph-cue-banner-host {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}