/* =====================================================================
   CONTENT STUDIO - STYLES  (Module #6)
   ---------------------------------------------------------------------
   Built on the design system + shared components (reuses .ap-mock
   previews and .lo-step lifecycle stepper). Adds the content library,
   asset card, and new-content picker. Prefix: .cs
   ===================================================================== */

.cs { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 1480px; }
.cs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.cs-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cs-filter { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--ds-hairline); background: var(--ds-surface-2); cursor: pointer; padding: 7px 13px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--ds-text-lo); }
.cs-filter:hover { color: var(--ds-text-hi); border-color: var(--ds-hairline-strong); }
.cs-filter.is-active { color: var(--ds-text-hi); border-color: var(--ds-gold-500); }
.cs-filter__n { font-size: var(--fs-xs); font-weight: 700; color: var(--ds-text-mute); }
.cs-search { max-width: 260px; }

/* ---- Library grid ---- */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.cs-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); box-shadow: var(--el-1); cursor: pointer; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.cs-card:hover { transform: translateY(-3px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2), var(--el-glow); }
.cs-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.cs-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); line-height: var(--lh-snug); }
.cs-stagebar { height: 5px; border-radius: var(--r-pill); background: rgba(212,175,55,0.14); overflow: hidden; }
.cs-stagebar > span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ds-gold-500), var(--ds-gold-300)); }
.cs-card__stage { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.cs-stage-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-accent); }
.cs-card__meta { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.cs-card__foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-top: var(--sp-2); border-top: 1px solid var(--ds-hairline); }
.cs-updated { margin-left: auto; font-size: var(--fs-xs); color: var(--ds-text-mute); }

/* ---- Source / AI badge ---- */
.cs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--ds-text-lo); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); }
.cs-badge--ai { color: var(--ds-accent); background: rgba(212,175,55,0.1); border-color: color-mix(in srgb, var(--ds-gold-500) 26%, transparent); }

/* ---- Lifecycle stepper (reuses .lo-step) ---- */
.cs-lifecycle .lo-step { min-width: 96px; }

/* ---- New content ---- */
.cs-types { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cs-type { border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); cursor: pointer; padding: 8px 14px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--ds-text-lo); text-transform: capitalize; }
.cs-type:hover { color: var(--ds-text-hi); border-color: var(--ds-hairline-strong); }
.cs-type.is-active { color: var(--ds-text-hi); border-color: var(--ds-gold-500); background: rgba(212,175,55,0.08); }
.cs-newfoot { display: flex; justify-content: flex-end; }

/* ---- Performance ---- */
.cs-perf { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-text-hi); }

@media (max-width: 900px) { .cs-search { max-width: 100%; flex: 1; } }