/* Studio page: departments (features/studio/departments.js). Page-specific styles only; shared ones are in kit.css.
   --dc is the department's Kitsu colour (set inline); without one the card stays neutral. */
.dp-grid { display: grid; gap: clamp(14px, 1.5vw, 20px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.dp-card { --dc: var(--zinc-500); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; min-width: 0; overflow: hidden; cursor: pointer; transition: box-shadow .2s, border-color .2s, transform .1s; }
.dp-card.tinted { background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 9%, var(--card)) 0, var(--card) 64px); border-color: color-mix(in srgb, var(--dc) 18%, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.11))); }
.dp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--dc); opacity: .85; }
.dp-card:not(.tinted)::before { opacity: .25; }
.dp-card:hover { box-shadow: var(--shadow-card-hover); border-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.17)); }
.dp-card:active { transform: scale(0.995); }
.dp-card:focus-visible { outline: 2px solid rgba(0, 113, 227, 0.5); outline-offset: 2px; }
.dp-card.selected { box-shadow: 0 0 0 2px var(--blue), var(--shadow-card-hover); }
.dp-card.archived { opacity: .72; }

.dp-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dp-card-head h3 { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-chev { color: var(--text-3); transition: transform .15s, color .15s; }
.dp-chev svg { width: 16px; height: 16px; display: block; }
.dp-card:hover .dp-chev, .dp-card:focus-visible .dp-chev { color: var(--text-2); transform: translateX(2px); }

.dp-members { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.dp-stack { display: inline-flex; align-items: center; }
.dp-stack .sk-avatar { box-shadow: 0 0 0 2px light-dark(#fff, var(--card)); }
.dp-stack .sk-avatar + .sk-avatar { margin-left: -7px; }
.dp-more { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dp-count { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dp-none { font-size: 12.5px; color: var(--text-3); }

.dp-sec { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dp-sec-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.dp-aside { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dp-sec-body, .dp-pills { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }

/* compact tinted pill: a task type in its Kitsu colour, or a neutral tool */
.dp-pill { --dc: var(--zinc-500); display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--text);
  background: color-mix(in srgb, var(--dc) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--dc) 24%, var(--card)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--dc); flex: none; }
.dp-pill.tool, .dp-pill.more { background: var(--zinc-100); border-color: var(--zinc-200); }
.dp-pill.more { color: var(--text-2); font-variant-numeric: tabular-nums; }
.dp-for { color: var(--text-2); font-weight: 400; }

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

/* designed empty state */
.dp-emptystate { display: flex; flex-direction: column; align-items: center; }
.dp-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; }
.dp-empty-icon svg { width: 22px; height: 22px; }
.dp-emptystate p { max-width: 380px; }

@media (max-width: 640px) {
  .dp-card { padding: 14px 14px 16px; }
  .dp-dhero { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}