/* =============================================================================
 * public/css/cards.css
 * Разделяемые стили для .ath-card / .music-row / .member-card / .ap-pills /
 * .photo-avatar / .photo-hint. Используется и в /apply, и в /roster.
 * Источник истины — этот файл. Не дублировать рули в inline <style> страниц.
 * ========================================================================== */

/* ── Athlete/Group card — iOS collapsible grouped card ────────────────────── */
.ath-card{margin-bottom:18px}

/* Tappable header — card surface that doubles as the collapse trigger */
.ath-card-header{
  display:flex;align-items:center;gap:11px;
  margin:0 16px;padding:9px 8px 9px 12px;min-height:56px;
  background:var(--card);
  border:0.5px solid var(--card-border);
  border-radius:var(--radius-lg);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .15s var(--ease);
}
.ath-card-header:active{background:var(--fill-quaternary)}
.ath-card-header:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
/* Одобренная участница — карточка-замок (только просмотр) */
.ath-card.is-locked .ath-card-header{background:var(--success-bg);cursor:default}
.ath-card.is-locked .ath-card-header:active{background:var(--success-bg)}
.member-card.is-locked{background:var(--success-bg)}
.ath-card-num{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;font-variant-numeric:tabular-nums}
.ath-card-headbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ath-card-title{display:flex;align-items:center;gap:7px;min-width:0}
.ath-card-name{min-width:0;font-size:var(--fs-headline);font-weight:600;color:var(--label);letter-spacing:-0.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ath-card-title .tag{flex-shrink:0;font-size:var(--fs-caption-2)}
.ath-card-status{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption-1);color:var(--text-muted);letter-spacing:-0.01em}
.ath-card-status .ath-dot{width:7px;height:7px;border-radius:50%;box-sizing:border-box;border:1.5px solid var(--text-muted);flex-shrink:0}
.ath-card-status.ok{color:var(--success)}
.ath-card-status.ok .ath-dot{background:var(--success);border-color:var(--success)}
.ath-card-trail{display:flex;align-items:center;gap:2px;flex-shrink:0}
.ath-card-remove{background:var(--fill-tertiary);border:none;width:30px;height:30px;border-radius:50%;color:var(--danger);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.ath-card-remove:active{opacity:.5}
.ath-card-chevron{display:inline-flex;color:var(--text-muted);padding:4px;transition:transform .3s var(--ease)}
.ath-card:not(.collapsed) .ath-card-chevron{transform:rotate(90deg)}

/* Collapsible body — animated height via grid-template-rows */
.ath-card-bodywrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--ease)}
.ath-card.collapsed .ath-card-bodywrap{grid-template-rows:0fr}
.ath-card-body{overflow:hidden;min-height:0}

/* Focus flash (deep-link from cabinet) */
.ath-card.focus-flash .ath-card-header{animation:cardflash 1.6s ease}
@keyframes cardflash{0%,100%{background-color:var(--card)}25%{background-color:var(--primary-soft)}}

/* Card enter / leave motion */
@keyframes athCardIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.ath-card.card-enter{animation:athCardIn .34s var(--ease-spring) both}
.ath-card.card-leave{overflow:hidden;transition:max-height .32s var(--ease),opacity .22s var(--ease),margin-bottom .32s var(--ease)}

/* Tab panel fade on switch */
@keyframes tabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tab-fade{animation:tabFade .26s var(--ease)}

/* ── Photo avatar (for individual / coach / judge / group cover) ─────────── */
.photo-avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 6px;background:var(--fill-tertiary);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;color:var(--primary);border:none;transition:opacity .15s}
.photo-avatar:active{opacity:.7}
.photo-avatar img{width:100%;height:100%;object-fit:cover}
.photo-hint{text-align:center;color:var(--primary);font-size:var(--fs-subhead);letter-spacing:-0.016em;margin:2px 0 0;cursor:pointer;display:inline-block;padding:4px 10px}
.photo-hint:active{opacity:.5}

/* ── Music row (apparatus / program slot) ─────────────────────────────────── */
.music-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;min-height:48px;
  border-bottom:0.5px solid var(--separator);
  background:rgba(52,199,89,0.06);
  cursor:pointer;
  transition:background .15s;
}
.music-row:last-child{border-bottom:none}
.music-row:active{background:rgba(52,199,89,0.10)}
.music-row.empty{background:transparent}
.music-row.empty:active{background:var(--fill-quaternary)}
.music-row-icon{width:30px;height:30px;border-radius:8px;background:rgba(52,199,89,0.16);color:var(--success);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.music-row.empty .music-row-icon{background:var(--fill-tertiary);color:var(--text-muted)}
.music-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.music-row-title{font-size:var(--fs-subhead);color:var(--label);letter-spacing:-0.016em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-row.empty .music-row-title{color:var(--text-muted)}
.music-row-meta{font-size:var(--fs-footnote);color:var(--text-muted);letter-spacing:-0.006em}
.music-row-remove{background:var(--fill-tertiary);border:none;width:28px;height:28px;border-radius:50%;color:var(--danger);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.music-row-remove:active{opacity:.5}
.music-player-inline{padding:8px 16px 12px;border-bottom:0.5px solid var(--separator)}
.music-player-inline .audio-player{margin:0}

/* ── Member card grid (group composition) ─────────────────────────────────── */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:14px 16px}
.member-card{background:var(--card);border:0.5px solid var(--card-border);border-radius:var(--radius);padding:14px 12px;text-align:center}
.member-avatar{width:64px;height:64px;border-radius:50%;background:var(--fill-tertiary);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;overflow:hidden;cursor:pointer;color:var(--primary);border:none;transition:opacity .15s}
.member-avatar:active{opacity:.7}
.member-avatar img{width:100%;height:100%;object-fit:cover}
.member-card input{width:100%;min-height:32px;padding:5px 8px;border:0.5px solid var(--border-soft);border-radius:7px;font-size:var(--fs-footnote);font-family:inherit;letter-spacing:-0.006em;margin-bottom:5px}
.member-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(255,45,85,0.10)}
.member-hint{font-size:var(--fs-caption-2);color:var(--primary);margin-bottom:6px;display:inline-flex;align-items:center;gap:3px}

/* ── Apparatus pills (group programs) ─────────────────────────────────────── */
.ap-pills{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 4px}
.ap-pill{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-footnote);cursor:pointer;padding:6px 12px;border:1px solid var(--border);border-radius:100px;background:var(--fill-tertiary);user-select:none;color:var(--label);letter-spacing:-0.006em;transition:all .15s}
.ap-pill:active{opacity:.5}
.ap-pill.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-dark);font-weight:600}
.ap-pill input{display:none}

@media(max-width:600px){.member-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.member-grid{grid-template-columns:1fr 1fr}}

/* ── Member / coach chips (Phase 3 — /roster) ─────────────────────────────── */
.member-chips,.coach-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 4px;align-items:center}
.member-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 4px;border-radius:999px;background:var(--fill-tertiary);border:0.5px solid var(--border-soft);font-size:var(--fs-footnote);color:var(--label);cursor:pointer;min-height:32px;-webkit-tap-highlight-color:transparent;transition:background .15s}
.member-chip:active{background:var(--fill-quaternary)}
.member-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-soft)}
.member-chip--missing{background:var(--fill-quaternary);color:var(--text-muted);cursor:default}
.member-chip--archived{background:var(--fill-quaternary);color:var(--text-muted);cursor:default;opacity:.72}
.chip-avatar{width:24px;height:24px;border-radius:50%;background:var(--fill-tertiary);display:inline-flex;align-items:center;justify-content:center;color:var(--primary);font-size:10px;font-weight:600;flex:0 0 24px;object-fit:cover;overflow:hidden}
.chip-avatar--ph{background:var(--primary-soft);color:var(--primary-dark)}
.chip-avatar--missing{background:var(--fill-quaternary);color:var(--text-muted)}
.member-chip--archived .chip-avatar{filter:grayscale(1)}
.chip-name{white-space:nowrap;letter-spacing:-0.006em;max-width:130px;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:5px}
.chip-tag{font-size:var(--fs-caption-2);font-weight:600;color:var(--text-muted);background:var(--fill-tertiary);border-radius:5px;padding:1px 5px;letter-spacing:0;flex-shrink:0}
.chip-x{position:relative;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:0 4px;font-size:14px;line-height:1;font-family:inherit}
.chip-x::after{content:"";position:absolute;inset:-10px}  /* расширяем тач-зону до ~34px без изменения визуала */
.chip-x:active{color:var(--danger)}
.member-chips-empty{font-size:var(--fs-footnote);color:var(--text-muted);font-style:italic;padding:4px 0}
.r-picker-add{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:none;border:1px dashed var(--border);border-radius:100px;color:var(--primary);font-size:var(--fs-footnote);cursor:pointer;font-family:inherit}
.r-picker-add:active{opacity:.5}

/* ── Save badge: маленькая точка/спиннер вместо текста «Изменено» ─────────── */
.r-save{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;flex-shrink:0;transition:opacity .2s,background .15s}
.r-save[data-state="idle"]{opacity:0;pointer-events:none}
.r-save[data-state="pending"]{background:var(--text-muted);opacity:.55}
.r-save[data-state="saving"]{background:transparent;border:1.5px solid var(--fill-tertiary);border-top-color:var(--primary);animation:spin .7s linear infinite}
.r-save[data-state="error"]{background:var(--danger);cursor:pointer;box-shadow:0 0 0 3px rgba(255,59,48,0.16)}
.r-save[data-state="error"]::before{content:"!";color:#fff;font-size:10px;font-weight:700;line-height:1}

/* ── Inline-row input: подсветка незаполненного обязательного поля (400) ───── */
.inline-row-input.has-error{box-shadow:0 0 0 2px rgba(255,59,48,0.45);border-radius:6px;background:rgba(255,59,48,0.06)}