/* v1.5.0 squad page: hero, quick-action tiles, collapsible manage panel, roster rows. Theme tokens only (dark + light). */
.sm-sq { display: grid; gap: 14px; align-content: start; }
.sm-sq .sm-squad-detail { display: grid; gap: 14px; min-width: 0; }
.sm-sq-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--sm-radius-card, 22px); border: 1px solid var(--outline-variant, rgba(128, 138, 156, .28)); background: linear-gradient(135deg, rgba(246, 196, 69, .14), var(--surface-container, #171b23) 70%); }
.sm-sq-hero__logo { flex: 0 0 auto; display: grid; } .sm-sq-hero__logo .sm-av { --av-size: 64px; }
.sm-sq-hero__t { min-width: 0; display: grid; gap: 2px; } .sm-sq-hero__t h2 { margin: 0; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; } .sm-sq-hero__t p { margin: 0; color: var(--on-surface-variant, #aeb8c7); } .sm-sq-hero__t .eyebrow { color: var(--primary, #f6c445); font-weight: 800; letter-spacing: .14em; font-size: .7rem; }
.sm-sq-note { margin: -6px 2px 0; font-size: .76rem; color: var(--on-surface-variant, #aeb8c7); }
.sm-sq-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.sm-sq-tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: 18px; border: 1px solid var(--outline-variant, rgba(128, 138, 156, .28)); background: var(--surface-container, #171b23); color: var(--on-surface, #f1f4f8); font: inherit; font-size: .78rem; font-weight: 700; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sm-sq-tile:active { transform: scale(.96); }
.sm-sq-tile__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(246, 196, 69, .16); color: var(--primary, #f6c445); } .sm-sq-tile__ic .icon { width: 22px; height: 22px; }
.sm-sq-manage { border-radius: 18px; border: 1px solid var(--outline-variant, rgba(128, 138, 156, .28)); background: var(--surface-container, #171b23); }
.sm-sq-manage summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; font-weight: 800; cursor: pointer; list-style: none; } .sm-sq-manage summary::-webkit-details-marker { display: none; } .sm-sq-manage summary .icon { width: 20px; height: 20px; color: var(--primary, #f6c445); }
.sm-sq-manage summary::after { content: '▾'; margin-left: auto; color: var(--on-surface-variant, #aeb8c7); transition: transform .18s ease; } .sm-sq-manage[open] summary::after { transform: rotate(180deg); }
.sm-sq-manage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 12px; } .sm-sq-manage__grid .btn { width: 100%; }
.sm-sq-h { margin: 4px 2px 0; display: flex; align-items: baseline; gap: 8px; font-size: 1rem; } .sm-sq-h small { color: var(--on-surface-variant, #aeb8c7); font-weight: 500; }
.sm-sq-roster { display: grid; gap: 8px; }
.sm-sq-player { display: grid; gap: 8px; padding: 6px; border-radius: 18px; border: 1px solid var(--outline-variant, rgba(128, 138, 156, .28)); background: var(--surface-container, #171b23); }
.sm-sq-player__who { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; touch-action: manipulation; }
.sm-sq-player__who > span { display: grid; min-width: 0; flex: 1; } .sm-sq-player__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sm-sq-player__who small { color: var(--on-surface-variant, #aeb8c7); }
.sm-sq-player__who i { display: grid; color: var(--on-surface-variant, #aeb8c7); } .sm-sq-player__who i .icon { width: 20px; height: 20px; }
.sm-sq-player__acts { display: flex; gap: 8px; padding: 0 6px 6px; } .sm-sq-player__acts .btn { flex: 1; }
.sm-sq-leave { display: grid; } .sm-sq-leave .btn { width: 100%; }
@media (max-width: 359px) { .sm-sq-hero { padding: 12px; gap: 10px; } .sm-sq-hero__t h2 { font-size: 1.25rem; } .sm-sq-hero__logo .sm-av { --av-size: 52px; } .sm-sq-manage__grid { grid-template-columns: minmax(0, 1fr); } }