/* P349 — sections on the phone (src/studio/phone/sections-*.ts, time-steps.ts): the Sections sheet's list, one
   section, New section and the name picker; the chart's pill ⌄ and hold menu; the chord cards' colour
   edge; the Undo toast. Every rule is inside the phone layout's query (phone-layout.ts), so nothing changes on a wider screen. Rows 52px,
   every button 44px or a 36px face on a 44px hit area (P349 notes, "Touch sizes"). Colours: --st-sect-* (tokens.css),
   set per section as --sect. */


@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  /* ---- Shared ----------------------------------------------------------------------------------------------- */
  .ph-sec { --sect: var(--st-sect-other); }
  .ph-sec button { font: inherit; cursor: pointer; }
  .ph-sec button:disabled { cursor: default; opacity: 0.45; }
  .ph-sec .st-icon { width: 18px; height: 18px; }
  .ph-sec-head { display: flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 8px -12px; }
  .ph-sec-head__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: var(--st-text-strong); font: 600 17px/22px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
  .ph-sec-head__status { color: var(--st-text-faint); font: 400 13px/1 var(--st-font-mono); }
  .ph-sec-back,
  .ph-sec-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--st-text-dim); }
  .ph-sec-icon[aria-pressed='true'] { color: var(--st-text-strong); }
  .ph-sec-caption { margin: 16px 0 4px; color: var(--st-text-faint); font: 600 11px/16px var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-sec-note,
  .ph-sec-hint { margin: 8px 0 0; color: var(--st-text-dim); font-size: 13px; line-height: 18px; }
  .ph-sec-primary,
  .ph-sec-secondary {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--st-line-strong);
    border-radius: 12px;
    background: none;
    color: var(--st-text-strong);
    font-weight: 600;
  }
  .ph-sec-primary { border-color: transparent; background: var(--st-text-strong); color: var(--st-bg); }
  .ph-sec-secondary { flex: none; }
  .ph-sec-actions { display: flex; gap: 8px; margin-top: 16px; }

  /* ---- The list (frame 3; empty, 20 and 24) ------------------------------------------------------------------ */
  .ph-sec-count { margin: -4px 0 8px; color: var(--st-text-faint); font: 400 12px/16px var(--st-font-mono); }
  .ph-sec-rows { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .ph-sec-row { display: flex; align-items: center; min-height: 52px; border-radius: 12px; }
  .ph-sec-row[data-now='true'] { background: var(--st-surface); box-shadow: inset 0 0 0 1px var(--st-line); }
  .ph-sec-row__main { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 0 8px; border: 0; background: none; color: inherit; text-align: left; }
  .ph-sec-row__bar { flex: none; width: 3px; height: 32px; border-radius: 2px; background: var(--sect); }
  .ph-sec-row__words { display: grid; flex: 1; gap: 2px; min-width: 0; }
  .ph-sec-row__name { overflow: hidden; color: var(--st-text-strong); font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .ph-sec-row__range,
  .ph-sec-row__sub { color: var(--st-text-faint); font: 400 12px/16px var(--st-font-mono); }
  .ph-sec-row--next { box-shadow: inset 0 0 0 1px var(--st-line); }
  .ph-sec-row--next .ph-sec-row__bar { background: var(--st-line-strong); }
  .ph-sec-now { flex: none; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--st-accent) 18%, transparent); color: var(--st-accent); font: 700 10px/14px var(--st-font); text-transform: uppercase; }
  .ph-sec-foot { display: flex; gap: 8px; margin-top: 12px; }
  .ph-sec-foot__add,
  .ph-sec-foot__cues { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface); color: var(--st-text-strong); font-weight: 600; }
  .ph-sec-foot__add { flex: 1; }
  .ph-sec-empty-view { display: grid; justify-items: center; gap: 8px; padding: 24px 8px 8px; text-align: center; }
  .ph-sec-empty-view__icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--st-text-dim); }
  .ph-sec-empty-view__icon .st-icon { width: 26px; height: 26px; }
  .ph-sec-empty-view__title { margin: 0; color: var(--st-text-strong); font-size: 16px; font-weight: 600; }
  .ph-sec-empty-view__text,
  .ph-sec-empty-view__hint { margin: 0 0 8px; color: var(--st-text-dim); font-size: 13px; line-height: 18px; }
  .ph-sec-empty-view .ph-sec-primary { width: 100%; }

  /* ---- One section (frame 4) and New section (25–28) ---------------------------------------------------------- */
  .ph-sec-one,
  .ph-sec-new { --sect: var(--st-sect-other); }
  .ph-sec-name-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 4px 0 12px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface); color: inherit; text-align: left; }
  /* One section's name card: the label above, then the name and Change › on one row, centred on each other. */
  .ph-sec-one .ph-sec-name-row { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; grid-template-rows: auto 44px; column-gap: 12px; align-items: center; padding: 10px 4px 6px 12px; }
  .ph-sec-one .ph-sec-name-row .ph-sec-row__bar { grid-row: 1 / 3; align-self: stretch; height: auto; margin: 2px 0 8px; }
  .ph-sec-one .ph-sec-name-row .ph-sec-caption { grid-column: 2 / 4; margin: 0; }
  .ph-sec-one .ph-sec-name-row .ph-sec-change { grid-row: 2; grid-column: 3; }
  .ph-sec-name-row__name { flex: 1; min-width: 0; overflow: hidden; color: var(--st-text-strong); font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
  .ph-sec-badge { flex: none; padding: 2px 6px; border: 1px solid var(--st-line-strong); border-radius: 6px; color: var(--st-text-dim); font: 600 10px/14px var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-sec-badge[hidden] { display: none; }
  .ph-sec-change { display: inline-flex; flex: none; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--st-text-dim); }
  .ph-sec-card { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--st-line); border-radius: 14px; }
  .ph-sec-card__head { display: flex; align-items: baseline; gap: 10px; margin: 0; }
  .ph-sec-card__range { color: var(--st-text-strong); font: 600 16px/22px var(--st-font-mono); }
  .ph-sec-card__length { color: var(--st-text-faint); font: 400 12px/16px var(--st-font-mono); }
  .ph-sec-edge { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 44px; }
  .ph-sec-new .ph-sec-edge { margin-top: 8px; }
  .ph-sec-edge__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sect); color: var(--st-bg); font: 700 12px/1 var(--st-font); }
  .ph-sec-edge__time { color: var(--st-text-strong); font: 600 15px/1 var(--st-font-mono); }
  /* Saved as made: a tick by the range after each change; Done at the end; Delete apart, last (P349). */
  .ph-sec-saved { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--st-ok); font: 600 12px/1 var(--st-font); }
  .ph-sec-saved[hidden] { display: none; }
  .ph-sec-saved .st-icon { width: 14px; height: 14px; }
  .ph-sec-done { width: 100%; min-height: 48px; margin-top: 16px; }
  .ph-sec-danger { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--st-line); }
  .ph-sec-tl__other { cursor: pointer; }
  /* Clear all (as on the laptop): last on the list, apart, then a confirm in place. */
  .ph-sec-clear { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--st-line); }
  .ph-sec-clear__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border: 0; background: none; color: var(--st-error); font: 600 14px/1 var(--st-font); }
  .ph-sec-clear__text { margin: 0 0 10px; color: var(--st-text); font-size: 14px; line-height: 19px; }
  .ph-sec-clear__actions { display: flex; gap: 8px; }
  .ph-sec-clear__actions > * { flex: 1; min-height: 44px; }
  .ph-sec-clear__go { border: 0; border-radius: 12px; background: var(--st-error); color: var(--st-on-accent); font-weight: 600; }
  .ph-sec-locked { flex: none; padding: 2px 6px; border: 1px solid var(--st-line); border-radius: 6px; color: var(--st-text-dim); font: 600 11px/1.3 var(--st-font); }
  .ph-sec-delete { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid var(--st-line); border-radius: 12px; background: none; color: var(--st-error); font-weight: 600; }
  .ph-sec-one .ph-row { min-height: 52px; }

  /* ---- Time steps: −5s · −1s · Set here · +1s · +5s, 36px faces on 44px targets (time-steps.ts) ------------------ */
  .ph-sec-steps { display: flex; gap: 4px; min-width: 0; }
  .ph-sec-step,
  .ph-sec-here {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 4px;
    border: 1px solid var(--st-line);
    border-radius: 8px;
    background: var(--st-surface);
    color: var(--st-text-strong);
    font: 500 13px/1 var(--st-font-mono);
    white-space: nowrap;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }
  .ph-sec-here { flex: 2; font-family: var(--st-font); font-weight: 600; }
  .ph-sec-step::before,
  .ph-sec-here::before { position: absolute; inset: -4px -2px; content: ''; }
  .ph-sec-step:disabled,
  .ph-sec-here:disabled { opacity: 0.4; }
  .ph-sec-here { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.05; }
  .ph-sec-here__word { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--st-text-dim); }
  .ph-sec-here__at { font: 600 12px/1 var(--st-font-mono); }

  /* ---- The zoomed timeline: 104px, the whole strip drags (sections-timeline.ts) ---------------------------------- */
  .ph-sec-tl { position: relative; height: 104px; margin-top: 12px; overflow: hidden; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-bg); touch-action: none; user-select: none; -webkit-user-select: none; }
  .ph-sec-tl__marks { position: absolute; inset: 0; }
  .ph-sec-tl__tick,
  .ph-sec-tl__chord { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  .ph-sec-tl__tick { bottom: 6px; color: var(--st-text-faint); font: 400 10px/1 var(--st-font-mono); }
  .ph-sec-tl__tick::before { position: absolute; bottom: 14px; left: 50%; width: 1px; height: 8px; background: var(--st-line-strong); content: ''; }
  /* A label on S's or E's line moves just clear of it; its tick stays on its second (labelDodge). */
  .ph-sec-tl__tick { transform: translateX(calc(-50% + var(--dodge, 0px))); }
  .ph-sec-tl__tick::before { left: calc(50% - var(--dodge, 0px)); }
  .ph-sec-tl__chord { top: 10px; color: var(--st-warn); font: 700 12px/1 var(--st-font); }
  /* The song's other sections under the range, in their colours, named: the room a section has is plain to see. */
  .ph-sec-tl__others { position: absolute; inset: 0; }
  .ph-sec-tl__other { position: absolute; top: 0; bottom: 0; border-right: 1px solid color-mix(in srgb, var(--other) 55%, transparent); border-left: 1px solid color-mix(in srgb, var(--other) 55%, transparent); background: color-mix(in srgb, var(--other) 14%, transparent); }
  .ph-sec-tl__other-name { position: absolute; top: 8px; right: 6px; left: 6px; overflow: hidden; color: var(--other); font: 600 11px/1 var(--st-font); text-overflow: ellipsis; white-space: nowrap; }
  /* The sections before and after, running off the strip: a tappable peek (PEEK_SHARE), its name across the top and a
     ‹ or › at its outer edge, halfway down, pointing its way (P357). */
  .ph-sec-tl__other--before { border-left: 0; background: color-mix(in srgb, var(--other) 20%, transparent); }
  .ph-sec-tl__other--after { border-right: 0; background: color-mix(in srgb, var(--other) 20%, transparent); }
  .ph-sec-tl[data-pick] .ph-sec-tl__other--before::after,
  .ph-sec-tl[data-pick] .ph-sec-tl__other--after::after { position: absolute; top: 50%; color: var(--other); font: 600 16px/1 var(--st-font); transform: translateY(-50%); }
  .ph-sec-tl[data-pick] .ph-sec-tl__other--before::after { left: 6px; content: '‹'; }
  .ph-sec-tl[data-pick] .ph-sec-tl__other--after::after { right: 6px; content: '›'; }
  .ph-sec-tl__band { position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--sect); border-left: 2px solid var(--sect); background: color-mix(in srgb, var(--sect) 22%, transparent); }
  .ph-sec-tl__handle { position: absolute; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--st-text-strong); color: var(--st-bg); font: 700 12px/1 var(--st-font); transform: translate(-50%, -50%); }
  :is(.ph-sec-tl__band, .ph-sec-tl__handle)[hidden] { display: none; }
  @media (max-width: 360px) {
    .ph-sec-tl { height: 64px; }
    .ph-sec-tl__chord { top: 6px; }
  }

  /* ---- The name picker (frames 5 and 27) ------------------------------------------------------------------------ */
  /* "‹  Section name  Done" on one 44px row, the title centred; the sheet's × steps aside (below). */
  .ph-sec-names .ph-sec-head { display: grid; grid-template-columns: 1fr auto 1fr; margin: 0 -4px 8px -12px; padding-right: 0; }
  .ph-sec-names .ph-sec-head__title { text-align: center; }
  .ph-sec-names .ph-sec-back { justify-self: start; }
  .ph-sec-names .ph-sec-done { justify-self: end; width: auto; min-width: 64px; min-height: 32px; margin: 6px 0; padding: 0 14px; border: 0; border-radius: 16px; background: var(--st-accent); color: #fff; font: 600 14px/1 var(--st-font); }
  .ph-sec-names__field { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 12px; background: var(--st-surface); color: var(--st-text-dim); }
  .ph-sec-names__search { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--st-text-strong); font: 400 16px/1 var(--st-font); }
  .ph-sec-names__group { margin-top: 12px; }
  .ph-sec-names__title { margin: 0 0 6px; color: var(--st-text-faint); font: 600 11px/16px var(--st-font); letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-sec-names__row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
  .ph-sec-name {
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--st-line);
    border-radius: 18px;
    background: var(--st-surface);
    color: var(--st-text);
    font-size: 14px;
  }
  .ph-sec-name::after { position: absolute; inset: -4px -3px; content: ''; }
  .ph-sec-name--base::before { width: 7px; height: 7px; border-radius: 50%; background: var(--sect); content: ''; }
  .ph-sec-name--num { justify-content: center; padding: 0; }
  .ph-sec-name[aria-pressed='true'] { border-color: var(--sect); background: color-mix(in srgb, var(--sect) 30%, transparent); box-shadow: inset 0 0 0 1px var(--sect); color: var(--st-text-strong); font-weight: 600; }
  .ph-sec-name[hidden],
  .ph-sec-names__row[hidden],
  .ph-sec-names__group[hidden] { display: none; }
  .ph-sec-names__empty { color: var(--st-text-dim); font-size: 14px; }

  /* ---- The chart: the pill's ⌄, holding a line (21); no empty card since P728 ------------------------------------ */
  .st-shell[data-screen='song'] [data-slot='sheet'] .sheet__tag-label::after { margin-left: 4px; content: '\2304'; }
  /* A held line opens its menu, not the browser's own. */
  .st-shell[data-screen='song'] [data-slot='sheet'] [data-sec] { -webkit-touch-callout: none; }
  .ph-sec-hold {
    position: fixed;
    z-index: 40;
    right: 16px;
    left: 40px;
    padding: 6px;
    border: 1px solid var(--st-line);
    border-radius: 14px;
    background: var(--st-popover-bg, var(--st-panel));
    box-shadow: var(--st-shadow);
  }
  .ph-sec-hold[hidden] { display: none; }
  .ph-sec-hold__caption { margin: 4px 8px 6px; overflow: hidden; color: var(--st-text-faint); font: 400 12px/16px var(--st-font-mono); white-space: nowrap; text-overflow: ellipsis; }
  .ph-sec-hold__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--st-text-strong); font: 500 15px/1 var(--st-font); text-align: left; }
  .ph-sec-hold__item:focus-visible,
  .ph-sec-hold__item:first-of-type { background: color-mix(in srgb, var(--st-accent) 12%, transparent); }
  .ph-sec-hold__item .st-icon { width: 18px; height: 18px; color: var(--st-text-dim); }

  /* ---- Chord cards: a 3px top edge in the section's colour (frame 1) ------------------------------------------- */
  .st-shell[data-screen='song'] [data-slot='live'] .live__chip[data-sect] { overflow: hidden; }
  .st-shell[data-screen='song'] [data-slot='live'] .live__chip[data-sect]::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--ph-sec-edge); content: ''; }
}

/* An inner view (one section, New section, Name) brings its own "‹ title" row: the sheet's own title steps aside
   (still named for screen readers) and its × sits on that row, so the sheet has one heading, not two. The list's
   footer (Add, Cues) stays in reach while the list scrolls. */
@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  .ph-sec-foot { position: sticky; bottom: 0; padding: 8px 0 12px; background: var(--st-panel); }
  @supports selector(:has(a)) {
    .ph-sheet__panel:has(.ph-sec-head) .ph-sheet__head { position: absolute; top: 13px; right: 0; z-index: 1; }
    .ph-sheet__panel:has(.ph-sec-head) .ph-sheet__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ph-sheet__panel:has(.ph-sec-head) .ph-sec-head { padding-right: 48px; }
    /* The name picker's Done takes the ×'s place: one way out on that row (Back and Escape still leave). */
    .ph-sheet__panel:has(.ph-sec-names) .ph-sheet__close { display: none; }
    .ph-sheet__panel:has(.ph-sec-names) .ph-sec-names .ph-sec-head { padding-right: 0; }
  }
}

/* Outside the phone layout none of it shows, even if the window grew with a toast or menu up. */
@media (min-width: 901px), (min-width: 641px) and (max-height: 699px) {
  .ph-sec-hold { display: none; }
}