/* The phone's sheet bodies and its link card (P344, frame hUbhL): Key & tempo, Loop, Display, More, New song, and
   "Chords for any song" on the Studio home. Built by src/studio/phone/; the sheet around them is phone-sheet's.
   Only phones (the phone layout, phone-layout.ts) show these, so nothing here needs its own media query. */

/* ---- The link field (frames 14–18) ---------------------------------------------------------------------- */

.ph-link { position: relative; display: grid; gap: 10px; }
.ph-link__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--st-line-strong);
  border-radius: 12px;
  background: var(--st-bg);
}
.ph-link__field:has(:focus-visible) { outline: var(--st-focus-width) solid var(--st-accent); outline-offset: -1px; }
.ph-link[data-state='bad'] .ph-link__field { border-color: var(--st-accent); }
.ph-link__lead { display: inline-flex; flex: none; align-items: center; color: var(--st-text-faint); }
.ph-link__thumb { width: 48px; height: 27px; border-radius: 4px; object-fit: cover; }
.ph-link__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--st-text);
  /* 16 px: iOS zooms the page into a smaller field. */
  font: 400 16px/normal var(--st-font);
  --st-focus-ring-style: none;
}
/* Mono for a link only: words searched read in the text font (P808). */
.ph-link[data-filled='true']:not([data-state='typed']) .ph-link__input { font-family: var(--st-font-mono); font-size: 15px; }
.ph-link__input::placeholder { color: var(--st-text-faint); opacity: 1; }
.ph-link__paste,
.ph-link__clear {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--st-surface-2);
  color: var(--st-text);
  font: 600 15px/1 var(--st-font);
}
.ph-link__clear { width: 44px; padding: 0; }
.ph-link__paste .st-icon,
.ph-link__clear .st-icon { width: 18px; height: 18px; }
.ph-link[data-filled='true'] .ph-link__paste,
.ph-link:not([data-filled='true']) .ph-link__clear { display: none; }
.ph-link__get { justify-content: center; height: 48px; font-size: 16px; }
.ph-link__get:disabled { cursor: default; }
.ph-link__note { display: grid; justify-items: start; gap: 10px; }
.ph-link__words { margin: 0; color: var(--st-text-dim); font-size: 14px; line-height: 19px; }
.ph-link__words:empty { display: none; }
/* Nothing to say: the live region stays in the page, but out of the grid, so it takes no row-gap under the rights line. */
.ph-link__note:has(> .ph-link__words:empty:only-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; }
/* The rights line's own 44px touch row (controls.css) overlaps the card's padding instead of adding to it. */
.ph-home .ph-link:has(> .ph-link__note > .ph-link__words:empty:only-child) .st-rights { margin-bottom: -10px; }
.ph-link__action { height: 36px; }

/* ---- The Studio home's card (frame 14) ---------------------------------------------------------------- */

.ph-home {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--st-line);
  border-radius: 14px;
  background: var(--st-surface);
}
.ph-home__title { margin: 0; color: var(--st-text-strong); font: 700 19px/24px var(--st-font); }

/* ---- A sheet body, and its setting rows (frames 2 and 11) ------------------------------------------------ */

.ph-body { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ph-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--st-line);
}
.ph-row__words { display: grid; gap: 2px; min-width: 0; }
.ph-row__name { color: var(--st-text-strong); font: 500 16px/21px var(--st-font); }
.ph-row__sub { color: var(--st-text-faint); font-size: 13px; line-height: 17px; }
.ph-row .st-seg__item { min-width: 44px; height: 36px; }

/* The header's steppers (header/stepper.ts), at the sheet's touch size: 44 px buttons, 40 px tall. */
.ph-stepper .hd-control__label,
.ph-stepper .hd-stepper__badge[hidden],
.ph-stepper .hd-stepper__pending[hidden] { display: none; }
.ph-stepper .hd-stepper { height: 40px; }
.ph-stepper .hd-stepper__btn { width: 44px; }
.ph-stepper .hd-stepper__value { min-width: 56px; height: 40px; font-size: 16px; }

.ph-select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--st-line-strong);
  border-radius: 10px;
  background: var(--st-surface);
  color: var(--st-text);
  font: 400 15px var(--st-font-mono);
}

/* Key & tempo's speed presets under Tempo, each with the BPM it gives, and the line saying where the rest went (D470). */
.ph-kt-speeds { display: grid; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--st-line); }
.ph-kt-speeds__line { margin: 0; color: var(--st-text-dim); font-size: 13px; line-height: 17px; }
.ph-kt-speeds .st-seg { display: flex; }
.ph-kt-speeds .st-seg__item { flex: 1; height: 44px; }
.ph-kt-speed__bpm { margin-left: 6px; color: var(--st-text-faint); font-weight: 400; }
.ph-kt-note { margin: 12px 0 0; color: var(--st-text-faint); font-size: 12px; line-height: 16px; }

/* ---- Loop (frames 5–6) ---------------------------------------------------------------------------------- */

.ph-body--loop { gap: 12px; }
.ph-loop__toggle { min-height: 48px; }
.ph-loop__toggle .st-switch[aria-checked='true'] { background: var(--st-loop); }
.ph-loop__card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--st-loop);
  border-radius: 12px;
  background: color-mix(in srgb, var(--st-loop) 8%, transparent);
}
.ph-body--loop:not([data-looping='true']) .ph-loop__card:not([data-naming='true']) { border-color: var(--st-line); background: none; }
/* The shared range strip (sections-timeline.ts) in the loop's colour, as the band on the seek bar. */
.ph-loop__card .ph-sec-tl { --sect: var(--st-loop); margin-top: 0; }
.ph-loop__hint { margin: 0; color: var(--st-text-dim); font-size: 14px; line-height: 19px; }
.ph-loop__range { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--st-text-strong); font-size: 17px; }
.ph-loop__facts { color: var(--st-text-faint); font: 400 12px/16px var(--st-font-mono); }
/* A or B, its time, then −5s · −1s · Set here · +1s · +5s (P350): the steps share what's left at 360. */
.ph-loop__edge { display: grid; grid-template-columns: 20px minmax(34px, auto) minmax(0, 1fr); align-items: center; gap: 6px; }
.ph-loop__mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--st-loop);
  color: var(--st-on-loop);
  font: 700 12px/1 var(--st-font);
}
.ph-loop__at { min-width: 0; color: var(--st-text-strong); font: 500 15px/1 var(--st-font); font-variant-numeric: tabular-nums; }
.ph-loop__step,
.ph-loop__here,
.ph-loop__done {
  display: grid;
  place-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--st-line-strong);
  border-radius: 9px;
  background: none;
  color: var(--st-text);
  font: 500 14px/1 var(--st-font);
}
.ph-loop__step { padding: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ph-loop__label { color: var(--st-text-faint); font-size: 13px; }
.ph-loop__naming { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ph-loop__naming .ph-loop__name { height: 40px; font-size: 16px; }
.ph-loop__done { height: 40px; background: var(--st-text-strong); color: var(--st-bg); }
.ph-loop__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ph-loop__chip {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--st-line-strong);
  border-radius: 18px;
  background: none;
  color: var(--st-text-dim);
  font: 500 14px/1 var(--st-font);
}
.ph-loop__chip[aria-pressed='true'] { border-color: var(--st-loop); background: color-mix(in srgb, var(--st-loop) 18%, transparent); color: var(--st-text-strong); }
.ph-loop__save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 1px solid var(--st-line-strong);
  border-radius: 10px;
  background: var(--st-surface);
  color: var(--st-text-strong);
  font: 500 15px/1 var(--st-font);
}
.ph-loop__save:disabled { opacity: 0.5; }
.ph-loop__save[data-saved='true'] { color: var(--st-text-dim); }
.ph-loop__save[data-saved='true'] .st-icon { color: var(--st-loop); }
.ph-loop__head { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; }
.ph-loop__caption { color: var(--st-text-faint); font: 600 12px/16px var(--st-font); letter-spacing: 0.04em; text-transform: uppercase; }
.ph-loop__count { color: var(--st-text-faint); font-size: 12px; }
.ph-loop__list { display: grid; margin: 0; padding: 0; list-style: none; }
.ph-loop__item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px; align-items: center; gap: 8px; min-height: 56px; border-bottom: 1px solid var(--st-line); }
.ph-loop__play,
.ph-loop__icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background: none; color: var(--st-text-dim); }
.ph-loop__play { background: var(--st-surface-2); }
.ph-loop__item[data-active='true'] .ph-loop__play { background: var(--st-loop); color: var(--st-on-loop); }
.ph-loop__item-text { display: grid; gap: 2px; min-width: 0; }
.ph-loop__item-name { overflow: hidden; color: var(--st-text-strong); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }

/* ---- More and New song (frame 18) ----------------------------------------------------------------------- */

.ph-more__row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--st-line);
  background: none;
  color: var(--st-text-strong);
  font: 500 16px/1 var(--st-font);
}
.ph-more__row .st-icon { flex: none; color: var(--st-text-dim); }
/* Print or save as PDF (P350): a sub-line, and the plan's PREMIUM badge while print is locked (upgrade-prompt.css). */
.ph-more__row:has(.ph-more__sub) { min-height: 68px; padding-block: 10px; text-align: left; }
.ph-more__words { display: grid; flex: 1; gap: 4px; min-width: 0; }
.ph-more__sub { color: var(--st-text-dim); font-size: 13px; font-weight: 400; line-height: 18px; }
/* Sounds (D470): its sub-line says what's on, in the accent while anything is. */
.ph-more__sub[data-on='true'] { color: var(--st-accent); }
.ph-body--new-song { gap: 12px; }
.ph-recent__caption { margin: 4px 0 0; color: var(--st-text-faint); font: 600 12px/16px var(--st-font); letter-spacing: 0.04em; text-transform: uppercase; }
.ph-recent { display: grid; margin: 0; padding: 0; list-style: none; }
.ph-recent__row { display: flex; align-items: center; gap: 12px; min-height: 60px; border-bottom: 1px solid var(--st-line); color: inherit; text-decoration: none; }
.ph-recent__art { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--st-surface-2); object-fit: cover; }
.ph-recent__text { display: grid; gap: 2px; min-width: 0; }
.ph-recent__title { overflow: hidden; color: var(--st-text-strong); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.ph-recent__sub { color: var(--st-text-faint); font-size: 13px; }
/* Explore's search rows (explore.css), in the sheet's flow rather than over the page; while open they take Recent's place. */
.ph-body--new-song .ex-drop { position: static; max-height: none; margin: 0 -8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ph-body--new-song .ex-drop__foot { display: none; }
.ph-body--new-song:has(.ex-drop.is-open) > :is(.ph-recent__caption, .ph-recent) { display: none; }

/* ---- Add to collection (P493 frames 3 to 5b, phone/collection-row.ts; a row of the ⋮ menu, P616) and a song's ⋯ menu (library/row-menu.ts) */
.ph-more__row.ph-collection { min-height: 44px; padding: 6px 12px; border-bottom: 0; font: inherit; gap: 12px; text-align: left; }
/* The drawer's row type (rail.css 15px/500 over a 13px muted line), each on one line: an ellipsis is the last resort, never a wrap. */
.ph-collection .ph-more__words { gap: 0; }
.ph-collection .ph-more__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--st-text-dim); font: 500 15px/22px var(--st-font); }
.ph-collection .ph-more__sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--st-text-faint); }
.ph-collection > .st-icon,
.ph-collection > .lib-icon,
.ph-collection__open > .st-icon,
.ph-collection__open > .lib-icon { width: 20px; height: 20px; }
.ph-collection__open { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.ph-collection__chevron { color: var(--st-text-faint); }
.ph-collection__add { flex: none; }
.ph-collection .lib-progress { flex: none; width: 56px; }
.lib-menu { display: grid; margin: 0; padding: 0; list-style: none; }
.lib-menu .ph-more__row { text-align: left; }
.lib-menu__meta { margin: -4px 0 4px; color: var(--st-text-faint); font: 400 12px/16px var(--st-font); }
.lib-menu__delete,
.lib-menu__delete .st-icon { color: var(--st-accent); }
.lib-menu .lib-icon { width: 16px; height: 16px; }
.lib-menu .lib-menu__confirm { flex-wrap: wrap; gap: 8px 12px; min-height: 52px; padding: 12px 0; font-size: 14px; line-height: 1.5; }
.lib-menu .lib-menu__confirm .lib-confirm__text { flex: 1 1 100%; overflow: visible; white-space: normal; }

/* ---- The Library's Cloud rows (P657 frames A to G, 10) ---------------------------------------------------------- */

@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  [data-phone-home='library'] [data-section='cloud'] { order: 0; }
  [data-phone-home='library'] [data-section='cloud'] .lib-section__head { justify-content: space-between; }
  .lib-cloud__add { flex: none; }
  [data-section='cloud'] .lib-item > .lib-progress { flex: none; width: 56px; }
  /* The installed app's offline watch (offline/mac.ts) dims and labels the link too: one dim, and the row's own line says it once. */
  .lib-item--needs-connection > .lib-item__link:not([data-needs-connection]) { opacity: 0.45; }
  [data-section='cloud'] .mac-needs { display: none; }
  .ph-collection[data-state='paused'] .lib-progress__fill { background: var(--st-text-faint); }
  .ph-collection > .ph-more__words { flex: 1; min-width: 0; }
}

@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  .lib-head__note:not([hidden]) { display: block; margin: 0; color: var(--st-text-dim); font: 400 13px/18px var(--st-font); }
}