/* artist_pages.css — «Своя страница артиста и лейбла» и «Поиск с полуслова»
   (docs/studio-features/24-artist-label-pages.md §9). Раскладки — общие (shelf.css): телефон
   < 768, планшет 768–1099, компьютер ≥ 1100. Касание ≥ 44 px, поля 16 px, без горизонтальной
   прокрутки страницы; на телефоне одна липкая полоса — мини-шапка с именем и ▶. */

/* ── Подсказки ─────────────────────────────────────────────────────────── */
.sg-box {
    position: fixed; z-index: var(--z-drawer, 200); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: 4px 0;
}
.sg-box[hidden] { display: none; }
.sg-pin { position: sticky; top: -4px; z-index: 1; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.sg-box.has-pin { scroll-padding-top: 64px; }      /* выбранная строка не уезжает под «Раскладка: …» */
.sg-row {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; cursor: pointer;
    color: var(--text); box-sizing: border-box;
}
.sg-box.is-phone .sg-row { min-height: 60px; }
.sg-row:hover, .sg-row.is-active { background: var(--bg-card-hover, rgba(255, 255, 255, .06)); }
.sg-row.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }
.sg-face { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; background: var(--bg-input); }
.sg-face .sg-av { width: 40px; height: 40px; font-size: 15px; }
.sg-face .sg-face-rg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.sg-face .pf-av.has-img + .sg-face-rg, .sg-face .sg-face-rg + .pf-av.has-img { z-index: 1; }
.sg-face-label, .sg-face-album { border-radius: 6px; font-size: 20px; }
.sg-face-album img { width: 100%; height: 100%; object-fit: cover; }
.sg-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sg-name { color: var(--text-strong, var(--text)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-sub { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-box.is-phone .sg-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sg-kbd { flex: 0 0 40px; text-align: center; font-size: 18px; }
.sg-layout .sg-text, .sg-catalog .sg-text { color: var(--accent); font-weight: 600; }
/* Нашёл перевод раскладки: «queen → Queen» и пометка «раскладка» (19.10). Текст пометки — терракота
   мелкого текста: --accent давал 3,8:1 при 11 px, а мелкому тексту нужно ≥ 4,5:1 (ревью 19.10). */
.sg-from { color: var(--text-dim); font-weight: 500; }
.sg-chip { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid var(--accent); border-radius: 99px;
    color: var(--accent-text, #c9706a); font-size: 12px; line-height: 16px; vertical-align: 1px; }
.sg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.sg-note { margin: 0 0 12px; color: var(--text-mid, var(--text)); font-size: 14px; }
.sg-note .link-btn, .ap-page .link-btn {
    min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer;
}

/* ── Страница артиста ──────────────────────────────────────────────────── */
.ap-page { --ap-stick: var(--topbar-h, 64px); min-width: 0; max-width: 100%; padding-bottom: 24px; }
.ap-hero { display: flex; gap: 24px; align-items: flex-end; margin: 8px 0 16px; min-width: 0; }
.ap-face { flex: 0 0 auto; }
.ap-face .cover-art, .ap-face .af-face { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; }
.ap-face-label { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; font-size: 56px;
    border-radius: var(--radius, 10px); background: var(--bg-input); }
.ap-head { min-width: 0; }
.ap-name { margin: 0 0 6px; font-size: 40px; line-height: 1.1; color: var(--text-strong, var(--text)); overflow-wrap: anywhere; }
.ap-sub { color: var(--text-mid, var(--text)); margin-bottom: 4px; }
.ap-line { color: var(--text-strong, var(--text)); font-weight: 600; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ap-chip {
    min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: var(--radius-pill, 99px);
    background: var(--bg-card); color: var(--text-strong, var(--text)); font: inherit; cursor: pointer; white-space: nowrap;
}
.ap-chip:hover { border-color: var(--accent); }
.ap-follow { display: inline-flex; align-items: center; }
.ap-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
.ap-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 0 8px; font-size: 18px;
    color: var(--text-strong, var(--text)); }
.ap-note { color: var(--text-mid, var(--text)); margin: 8px 0; }
.ap-top-list { display: flex; flex-direction: column; }
.ap-tr { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) 96px 72px 44px; align-items: center; gap: 8px;
    min-height: 52px; border-bottom: 1px solid var(--border); }
.ap-tr-n { color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.ap-tr-play, .ap-tr-mark {
    width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-strong, var(--text));
    font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.ap-tr-play:hover, .ap-tr-mark:hover { background: var(--bg-card-hover, rgba(255, 255, 255, .06)); }
.ap-tr-play.is-off { color: var(--text-dim); cursor: default; }
.ap-tr-mark.is-own { color: var(--success, #5ec27a); cursor: default; }
.ap-tr-t { display: flex; flex-direction: column; min-width: 0; }
.ap-tr-name { color: var(--text-strong, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tr-sub { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tr-bar { height: 6px; border-radius: 3px; background: var(--bg-input); overflow: hidden; }
.ap-tr-bar i { display: block; height: 100%; background: var(--accent); opacity: .7; }
.ap-tr-l { color: var(--text-mid, var(--text)); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.ap-more { min-height: 44px; margin-top: 8px; }
.ap-side .ap-box { margin-bottom: 8px; }
.ap-people { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ap-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-label { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill, 99px);
    background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.ap-label span { color: var(--text-dim); margin-left: 4px; }
.ap-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ap-seg { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill, 99px);
    background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.ap-seg.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.ap-shelf { margin: 8px 0 16px; min-width: 0; scroll-margin-top: calc(var(--ap-stick) + 52px); }
.ap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.ap-tiles > .shelf-tile { width: auto; }
.ap-catno { display: inline-block; align-self: flex-start; padding: 1px 6px; border-radius: 4px; background: var(--bg-input);
    color: var(--text-mid, var(--text)); font-size: 11px; font-variant-numeric: tabular-nums; }
.ap-unofficial { margin: 8px 0 16px; color: var(--text-mid, var(--text)); }
.ap-foot { margin-top: 24px; color: var(--text-dim); font-size: 12px; }
.ap-mini { display: none; }
.ap-entry-row { margin: 4px 0; }
/* Кнопки страницы, входов и выбора тёзок — не ниже 44 px и на компьютере (ревью 18.10: «Отмена»,
   «Повторить», «Искать в каталогах», «👤 Страница артиста» были 37 px). */
.ap-page .btn, .ap-entry, .ap-choose .btn, .ap-failed .btn { min-height: 44px; }
/* «Повторить» и «Искать в каталогах» стояли вплотную, текст прижат к ним (смоук 19.10). */
.ap-failed .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.ap-skel .shelf-tile-cover { background: var(--bg-input); }
.ap-tiles-skel { margin-top: 24px; }

.ap-choose { max-width: min(520px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: var(--radius, 10px);
    background: var(--bg-card); color: var(--text); }
.ap-choose-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.ap-choose-row { display: flex; flex-direction: column; align-items: flex-start; min-height: 52px; padding: 6px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm, 7px); background: transparent; color: var(--text);
    font: inherit; text-align: left; cursor: pointer; }
.ap-choose-sub { color: var(--text-dim); font-size: 12px; }

/* Планшет 768–1099: одна колонка, состав — строкой с прокруткой. */
@media (max-width: 1099px) {
    .ap-cols { grid-template-columns: minmax(0, 1fr); }
    .ap-side .ap-people { flex-wrap: nowrap; overflow-x: auto; }
    .ap-side .ap-people > * { flex: 0 0 auto; }
}

/* Телефон < 768: лицо 96, фишки одной прокручиваемой строкой, полки — строкой обложек 120 px с
   «Показать все»; липкая мини-шапка (имя и ▶) — единственная липкая полоса экрана. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
    .ap-page { --ap-stick: calc(var(--safe-top, 0px) + 60px); }
}
@media (max-width: 767px) {
    .ap-hero { gap: 16px; align-items: center; }
    .ap-face .cover-art, .ap-face .af-face { width: 96px; height: 96px; }
    .ap-face-label { width: 72px; height: 72px; font-size: 36px; }
    .ap-name { font-size: 28px; }
    .ap-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
    .ap-chips > * { flex: 0 0 auto; }
    .ap-tr { grid-template-columns: 24px 44px minmax(0, 1fr) 56px 44px; }
    .ap-tr-bar { display: none; }
    .ap-page:not(.is-scrolled) .ap-mini { visibility: hidden; height: 0; min-height: 0; overflow: hidden; border: 0; }
    .ap-mini {
        display: flex; position: sticky; top: var(--ap-stick); z-index: 3; align-items: center; justify-content: space-between;
        gap: 8px; min-height: 44px; margin: 0 -16px; padding: 0 8px 0 16px; background: var(--bg);
        border-bottom: 1px solid var(--border); color: var(--text-strong, var(--text)); font-weight: 600;
    }
    .ap-mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ap-mini-play { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); }
    .ap-shelf:not(.is-open) .ap-tiles { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x proximity;
        margin-right: -16px; padding-right: 16px; }
    .ap-shelf:not(.is-open) .ap-tiles > .shelf-tile { flex: 0 0 120px; width: 120px; scroll-snap-align: start; }
    /* minmax(0, …): три колонки по 100 + зазоры = 316 при месте 292 на iPhone SE — третья срезалась. */
    .ap-shelf.is-open .ap-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ap-filter { flex-wrap: nowrap; overflow-x: auto; }
    .ap-filter > * { flex: 0 0 auto; }
}