/* P905 — the Studio's phone shell, outside the page region so it lives across swaps (D179): the top bar
   (src/studio/phone-bar.ts), the tab bar (src/studio/phone-tabs.ts) and the account sheet (src/studio/account-sheet.ts).
   Every page shows the bars but the Studio page while it splits or plays a song (`data-screen` other than
   'first-time', the Library); outside the phone layout none of it shows. */

.st-rail .st-phone-bar,
.st-tabs { display: none; }
/* No grey flash on a tap anywhere in the Studio (inherited): a pressed button shows `[data-pressed]` (ui/press.ts). */
.st-rail { -webkit-tap-highlight-color: transparent; }

@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  /* ---- Top bar: the page's name large, then Install, the bell and the face (44 px each) ---------------------- */
  .st-rail:not(:has(.st-shell:not([data-held] *):not([data-screen='first-time']))) .st-phone-bar { display: flex; }
  /* The bar's row is the bar's height; the page takes the rest (else short pages hand the bar spare height). */
  :root .st-rail:not(:has(.st-shell:not([data-held] *):not([data-screen='first-time']))) .app { grid-template-rows: auto minmax(0, 1fr); }
  /* The Library's own top (☰ · logo · Studio · its bell) gives way to the shell's bar; splitting keeps its own controls. */
  .st-shell[data-screen='first-time'] .st-shell__top { display: none; }
  /* The website's legal line is the website's: not inside the app on a phone (More has Support, Privacy, Terms). */
  .st-rail .legal, .st-rail .st-shell[data-screen='first-time'] .legal { display: none; }
  /* No long-press drag ghost or link preview on what the Studio draws (song rows, cards, covers, tabs); fields and the
     lyrics keep text selection. A long-press menu, if ever, is a sheet of our own. */
  .st-rail :is(a, img) { -webkit-user-drag: none; -webkit-touch-callout: none; }
  .st-rail :is(a, button, li, [role='button']):not(:has(input, textarea, [contenteditable])) { -webkit-user-select: none; user-select: none; }
  /* The large-title header is compact (the user: "too big line space"): a 52px bar and 8px to the page, about 16px from
     the title to the search under it, as in Ultimate Guitar's (P905). */
  .st-rail .work { padding-top: 8px; }
  /* A page under a tab (‹ shown): iOS's smaller title, so "Notifications" and "Add a song" fit beside ‹ and the actions;
     Add a song hides the Library's + (it is the page the + opens). */
  .st-phone-bar:has(> .st-phone-bar__back:not([hidden])) .st-phone-bar__title { font: var(--st-type-subtitle); }
  .st-phone-bar[data-adding] .lib-bar-add { display: none; }
  /* ‹ on a page under a tab (phone-bar.ts BACK_TO), in the accent like iOS. */
  .st-phone-bar__back { margin-left: -10px; color: var(--st-accent); }
  .st-phone-bar__back[hidden] { display: none; }
  .st-rail .st-phone-bar {
    /* Sticky with a solid fill: iOS 26 Safari tints its status bar to it instead of blurring the page (P350). */
    position: sticky;
    z-index: 10;
    top: 0;
    align-items: center;
    gap: 2px;
    /* Below the status bar: the installed app runs under it (viewport-fit=cover, pwa/app-feel.ts); 0 in a browser tab. */
    height: calc(52px + env(safe-area-inset-top, 0px));
    margin: 0;
    padding: env(safe-area-inset-top, 0px) 10px 0 var(--ph-gutter, 16px);
    background: var(--st-bg);
  }
  .st-rail .st-phone-bar__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--st-text);
    font: var(--st-type-title);
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* Install and the installed app's Offline pill (offline/mac.ts); empty elsewhere, so no gap. */
  .st-phone-bar__actions { display: flex; flex: none; align-items: center; }
  .st-phone-bar__actions:empty { display: none; }
  .st-phone-bar__btn {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--st-text-dim);
    cursor: pointer;
  }
  .st-phone-bar__btn:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }
  .st-phone-bar__btn .st-icon { width: 24px; height: 24px; stroke-width: 1.75; }
  .st-phone-bar__dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--st-accent); box-shadow: 0 0 0 2px var(--st-bg); }
  .st-phone-bar__dot[hidden] { display: none; }
  .st-phone-bar__face > * { grid-area: 1 / 1; width: 36px; height: 36px; border-radius: 50%; }
  .st-phone-bar__avatar { object-fit: cover; }
  .st-phone-bar__initial { display: grid; place-items: center; background: var(--st-accent-soft); color: var(--st-accent); font: 600 16px/1 var(--st-font); }
  .st-phone-bar__face > [hidden] { display: none; }
  /* The bell lit on its pages (phone-bar.ts `aria-current`, P905, frames Aw4gg / JAm0q): the bell filled in the accent on a
     36px accent disc, its dot still on top; the face ringed while the account sheet is open (account-sheet.ts). */
  .st-phone-bar__bell[aria-current='page'] { color: var(--st-accent); }
  .st-phone-bar__bell[aria-current='page']::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--st-accent-soft); }
  .st-phone-bar__bell[aria-current='page'] .st-icon { position: relative; fill: currentColor; }
  .st-phone-bar__face[aria-expanded='true'] > :not([hidden]) { box-shadow: 0 0 0 2px var(--st-accent); }

  /* ---- Tab bar: Explore · Library · History · More, solid, the safe area under it in the same fill ----------- */
  .st-tabs {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 8px max(8px, calc(env(safe-area-inset-bottom, 0px) - 12px)); /* labels just clear of the home indicator */
    border-top: 1px solid var(--st-line);
    background: var(--st-bar-material);
  }
  /* A song open (or splitting) keeps its own foot. */
  :root:has(.st-shell:not([data-held] *):not([data-screen='first-time'])) .st-tabs { display: none; }
  .st-tabs__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 50px;
    padding-top: 3px;
    border-radius: 10px;
    color: var(--st-text-faint);
    font: var(--st-type-tab);
    text-decoration: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  /* Pressed (P905, ui/press.ts): the tab bar and the top bar's buttons only. Rows, cards and chips in a scrolling list
     have none: a touch that starts a scroll left them changed. */
  :is(.st-tabs__tab, .st-phone-bar__btn, .st-phone-bar__face, .ex-chip, .ex-card, .ex-chart, .ex-tile, .ex-face, .ex-folder, .ex-row, .ex-artist) { touch-action: manipulation; }
  :is(.st-tabs__tab, .st-phone-bar__btn, .st-phone-bar__face) { transition: transform 90ms ease-out, opacity 90ms ease-out; }
  :is(.st-tabs__tab, .st-phone-bar__btn, .st-phone-bar__face)[data-pressed] { transform: scale(0.96); opacity: 0.7; }
  @media (prefers-reduced-motion: reduce) {
    :is(.st-tabs__tab, .st-phone-bar__btn, .st-phone-bar__face)[data-pressed] { transform: none; }
  }
  .st-tabs__tab:focus-visible { outline: 2px solid var(--st-accent); outline-offset: -2px; }
  .st-tabs__icon { width: 26px; height: 26px; stroke-width: 1.75; }
  .st-tabs__tab[aria-current='page'] { color: var(--st-text); font-weight: 700; }
  .st-tabs__tab[aria-current='page'] .st-tabs__icon { color: var(--st-accent); }
  /* Nothing hides under the tab bar: the page ends above it. */
  .st-rail:not(:has(.st-shell:not([data-held] *):not([data-screen='first-time']))) .app { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* The installed app's update bar (pwa.css) sits above the tab bar, not over it. */
  .st-rail:not(:has(.st-shell:not([data-held] *):not([data-screen='first-time']))) .pwa-update { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- The account sheet: the account menu (#account) borrowed into a modal bottom sheet ------------------------ */
/* Support, Privacy and Terms are the sheet's alone: the laptop's menu stays as it is. */
.account__links { display: none; }
.st-account-sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - max(40px, env(safe-area-inset-top, 0px) + 12px));
  margin: 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 20px 20px 0 0;
  /* The face's glow (frame "Account sheet"): a soft accent wash behind the top of the sheet. */
  background: radial-gradient(120% 260px at 50% 0, color-mix(in srgb, var(--st-accent) 16%, transparent), transparent) no-repeat, var(--st-panel);
  color: var(--st-text);
  font-family: var(--st-font);
}
.st-account-sheet:focus { outline: none; }
.st-account-sheet[open] { animation: st-sheet-in 0.22s var(--ease, ease-out); }
.st-account-sheet::backdrop { background: rgb(0 0 0 / 0.5); }
.st-account-sheet__grabber { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--st-line-strong); }
.st-account-sheet__head { display: flex; justify-content: flex-end; }
.st-account-sheet__done { min-width: 44px; height: 44px; padding: 0 4px; border: 0; background: none; color: var(--st-accent); font: 600 17px/1 var(--st-font); cursor: pointer; }
.st-account-sheet__done:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; border-radius: 8px; }
/* The menu, unboxed: the sheet is its box. */
.st-account-sheet .account { position: static; width: auto; gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.st-account-sheet .account__who { flex-direction: column; gap: 6px; padding: 0; text-align: center; }
.st-account-sheet .account__face { width: 96px; height: 96px; border: 2px solid var(--st-accent); background: var(--st-accent-soft); color: var(--st-accent); font-size: 40px; font-weight: 600; }
.st-account-sheet .account__name { font-size: 24px; font-weight: 700; }
.st-account-sheet .account__email { color: var(--st-text-dim); font-size: 15px; }
.st-account-sheet .account .account__rule { display: none; }
.st-account-sheet .account__links { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-surface); }
.st-account-sheet .account__link { --tone: var(--st-text-dim); display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; color: var(--st-text); font-size: 17px; text-decoration: none; }
.st-account-sheet .account__link--support { --tone: var(--st-stem-guitar); }
.st-account-sheet .account__link--privacy { --tone: var(--st-ok); }
.st-account-sheet .account__link-tile { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.st-account-sheet .account__link-tile .st-icon { width: 18px; height: 18px; }
.st-account-sheet .account__link-label { display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: space-between; }
/* The divider starts at the label, not the tile (iOS inset rows). */
.st-account-sheet .account__link + .account__link .account__link-label { border-top: 1px solid var(--st-line); }
.st-account-sheet .account__link-out { width: 18px; height: 18px; color: var(--st-text-faint); }
.st-account-sheet .account__item { justify-content: center; min-height: 52px; border: 1px solid var(--st-line); border-radius: 14px; font-size: 17px; font-weight: 600; }
.st-account-sheet .account__logout { color: var(--st-accent); }
.st-account-sheet .account__logout::before { display: none; }
@keyframes st-sheet-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .st-account-sheet[open] { animation: none; }
}

/* More's Install the app row shows while the install offer applies (pwa/install-sheet.ts). */
:root:not([data-installable]) .more__install { display: none; }

/* ---- The split queue's screens (P905, frames 13–17 in row cZzaj: queue-ui/) ----------------------------------- */
.qu-dock, .qu-banner-host { display: none; }
.qu-ring { position: relative; display: inline-grid; flex: none; place-items: center; }
.qu-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.qu-ring circle { fill: none; stroke-width: 3; }
.qu-ring__track { stroke: var(--st-line-strong); }
.qu-ring__arc { stroke: var(--st-text); stroke-linecap: round; transition: stroke-dashoffset 0.3s ease-out; }
.qu-ring__count { position: relative; color: var(--st-text); font: 700 11px/1 var(--st-font); }
.qu-strip__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.qu-strip__title { overflow: hidden; color: var(--st-text); font: 600 14px/18px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
.qu-strip__line { overflow: hidden; color: var(--st-text-dim); font: 500 12px/16px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
.qu-art { display: grid; flex: none; place-items: center; overflow: hidden; width: 40px; height: 40px; border-radius: 8px; background: var(--st-surface-2); color: var(--st-text-faint); }
.qu-art img { width: 100%; height: 100%; object-fit: cover; }
.qu-art .st-icon, .qu-art svg { width: 16px; height: 16px; }
.qu-art:has(img) > :not(img) { display: none; }
/* P1008: a chart on its way, in the Queue sheet: the busy mark in the art's place. */
.qu-art--busy { color: var(--st-accent); }
.qu-art--busy svg { animation: st-spin 1s linear infinite; }
.qu-badge { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border: 1.5px solid var(--st-bg); border-radius: 9px; background: var(--st-accent); color: #fff; font: 700 11px/15px var(--st-font); text-align: center; }
.st-tabs__tab { position: relative; }
.qu-chip[hidden] { display: none; }

@media (max-width: 640px), (max-width: 900px) and (min-height: 700px) {
  /* Above the tab bar on tab pages (frame 13, 14); a song's page has its ring and banner instead. */
  .qu-dock { position: fixed; z-index: 29; inset: auto 12px calc(72px + env(safe-area-inset-bottom, 0px)); display: block; }
  :root:has(.st-shell:not([data-held] *):not([data-screen='first-time'])) .qu-dock { display: none; }
  .qu-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--st-line-strong);
    border-radius: 12px;
    background: var(--st-surface-2);
    color: var(--st-text);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .qu-strip:active { opacity: 0.8; }
  .qu-strip:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
  .qu-strip__chevron { width: 20px; height: 20px; margin: 6px; color: var(--st-text-dim); }
  .qu-strip--done { gap: 10px; padding-right: 4px; cursor: default; }
  .qu-strip__mark { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 14px; background: color-mix(in srgb, var(--st-ok) 12%, transparent); color: var(--st-ok); }
  .qu-strip__mark .st-icon { width: 16px; height: 16px; }
  .qu-strip__close { width: 36px; height: 36px; color: var(--st-text-dim); }
  /* P1008 (frame ZQTeY): a chart on its way spins in the accent's soft disc; a failed one says so in the accent. */
  .qu-strip__mark--busy, .qu-strip--failed .qu-strip__mark { background: color-mix(in srgb, var(--st-accent) 14%, transparent); color: var(--st-accent); }
  .qu-strip__mark--busy .st-icon { animation: st-spin 1s linear infinite; }
  /* The page's end clears the strip too. */
  :root:has(.qu-dock > *) .st-rail:not(:has(.st-shell:not([data-held] *):not([data-screen='first-time']))) .app { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
  /* Frame 16: over the song's top, never over its player; it hides on its own. */
  .qu-banner-host { position: fixed; z-index: 31; inset: calc(8px + env(safe-area-inset-top, 0px)) 12px auto; display: block; }
  .qu-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 6px 0 8px;
    border: 1px solid var(--st-line-strong);
    border-radius: 14px;
    background: var(--st-surface-2);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
    animation: qu-drop 0.22s ease-out;
  }
  @keyframes qu-drop { from { transform: translateY(-120%); } }
  @media (prefers-reduced-motion: reduce) { .qu-banner, .qu-strip__mark--busy .st-icon, .qu-art--busy svg { animation: none; } .qu-ring__arc { transition: none; } }
}

/* Frame 17: the Queue sheet, Now · Waiting · Ready · Couldn't split, then the footer. */
.qu-sheet .ph-sheet__panel { max-height: 80dvh; }
.qu-sheet .ph-sheet__body { padding: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
.qu-group + .qu-group { margin-top: calc(var(--st-section-gap) - var(--st-section-head-gap)); }
.qu-group__label { margin: 0; padding: var(--st-section-head-gap) 16px 6px; color: var(--st-text-faint); font: 500 13px/17px var(--st-font); }
.qu-list { margin: 0; padding: 0; list-style: none; }
.qu-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-left: 16px; }
.qu-row__content { display: flex; flex: 1; align-items: center; align-self: stretch; gap: 10px; min-width: 0; padding-right: 10px; border-bottom: 1px solid var(--st-line); }
.qu-row__text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 0; }
.qu-row__title { overflow: hidden; color: var(--st-text); font: 500 15px/19px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
.qu-row__line { overflow: hidden; color: var(--st-text-dim); font: 400 12px/16px var(--st-font); white-space: nowrap; text-overflow: ellipsis; }
.qu-row__bar { display: block; height: 4px; margin-top: 3px; overflow: hidden; border-radius: 2px; background: var(--st-line); }
.qu-row__fill { display: block; height: 100%; border-radius: 2px; background: var(--st-text); transition: width 0.3s ease-out; }
.qu-row__grip { display: grid; flex: none; place-items: center; width: 24px; height: 40px; padding: 0; border: 0; background: none; color: var(--st-text-faint); touch-action: none; cursor: grab; }
.qu-row__grip:disabled { opacity: 0.35; cursor: default; }
.qu-row__grip .st-icon { width: 18px; height: 18px; stroke-width: 3; }
.qu-row__remove { width: 36px; height: 36px; color: var(--st-text-dim); }
.qu-row__action:disabled, .qu-row__remove:disabled { opacity: 0.45; }
.qu-note { margin: 8px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--st-surface); color: var(--st-text-dim); font: 400 13px/18px var(--st-font); }
.qu-footer, .qu-empty { margin: 0; padding: 14px 16px 16px; color: var(--st-text-faint); font: 400 12px/16px var(--st-font); }
.qu-skeleton .qu-row { padding-block: 8px; }