/* Studio page: studios (features/studio/studios.js). Page-specific styles only; shared ones are in kit.css.
   Visual sibling of departments.css (same avatar stack, drawer hero and list); --sc is the studio's Kitsu colour. */
.st-table .sk-table tr.click:focus-visible { outline: none; }
.st-table .sk-table tr.click:focus-visible td { background: var(--blue-soft); box-shadow: inset 0 1px 0 rgba(0, 113, 227, 0.35), inset 0 -1px 0 rgba(0, 113, 227, 0.35); }
.st-table .sk-table tr.click:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--blue), inset 0 1px 0 rgba(0, 113, 227, 0.35), inset 0 -1px 0 rgba(0, 113, 227, 0.35); }

.st-studio { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.st-studio-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-people { display: inline-flex; align-items: center; gap: 10px; }
.st-stack { display: inline-flex; align-items: center; }
.st-stack .sk-avatar { box-shadow: 0 0 0 2px light-dark(#fff, var(--card)); }
.st-stack .sk-avatar + .sk-avatar { margin-left: -6px; }
.st-more { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.st-count { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-none { font-size: 12.5px; color: var(--text-3); }
.sk-table tr.click:hover .st-stack .sk-avatar, .sk-table tr[aria-selected="true"] .st-stack .sk-avatar { box-shadow: 0 0 0 2px light-dark(#fafafc, var(--card)); }

/* drawer */
.st-dhero { --sc: var(--zinc-500); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; margin-bottom: 22px; border-radius: 12px;
  background: color-mix(in srgb, var(--sc) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--sc) 20%, var(--card)); }
.st-dstat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-dstat b { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.st-dstat span { font-size: 11.5px; color: var(--text-2); }
.st-n { margin-left: 6px; color: var(--text); font-variant-numeric: tabular-nums; }
.st-list { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; }
.st-list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; min-width: 0; }
.st-list li + li { border-top: 1px solid var(--border); }
.st-person { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.st-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-empty-line { font-size: 13px; color: var(--text-3); padding: 2px 0 22px; }

/* designed empty state */
.st-emptystate { display: flex; flex-direction: column; align-items: center; }
.st-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--zinc-100); color: var(--text-2); margin-bottom: 12px; }
.st-empty-icon svg { width: 22px; height: 22px; }
.st-emptystate p { max-width: 380px; }

@media (max-width: 480px) {
  .st-stack .sk-avatar:nth-child(n+4) { display: none; }
  .st-more { display: none; }
  .st-table .sk-table th[style] { width: auto !important; }
}