/* public/garage-app/content.css
 *
 * Content Studio overlay styles.
 *
 * SCOPING
 * -------
 * Every rule is scoped under .cs-overlay, .cs-modal__backdrop, or
 * .cs-toast-stack so this file cannot leak styles into the rest of
 * the garage-app. Design tokens are declared on :root with a --cs-
 * prefix to avoid collisions and to keep them available to the
 * modal and toast (which are appended directly to <body>, outside
 * .cs-overlay).
 *
 * NAMING
 * ------
 * BEM-ish: block__element--modifier. Class prefix is "cs-" for
 * "content studio". The blueprint used "content-" but the actual
 * implementation in content.js uses "cs-" for brevity; this file
 * matches the JS.
 *
 * MOTION
 * ------
 * Overlay entrance: 200ms ease-out slide+fade.
 * Overlay close: instant (removed from DOM — no exit animation).
 * Skeleton shimmer: 1.5s linear infinite.
 * Toast auto-hide: 220ms fade.
 * Everything respects prefers-reduced-motion.
 *
 * NO SPINNERS
 * -----------
 * Not a single animation in this file is a spinner. All loading
 * states use either a skeleton (shimmer placeholder) or a
 * determinate progress bar. This is a hard product rule.
 *
 * DARK MODE
 * ---------
 * Not implemented in V1. The garage-app's existing surfaces were
 * not confirmed to support dark mode; adding it only here would
 * make the Content Studio the sole dark-mode-aware surface. When
 * the app adds dark mode, add a @media (prefers-color-scheme: dark)
 * block that overrides the --cs-color-* tokens; no other rules
 * would need to change.
 */

/* ═════════════════════════════════════════════════════════════
 * 1. DESIGN TOKENS
 * ═════════════════════════════════════════════════════════════ */

:root {
  /* Colors — from the master design system */
  --cs-color-primary:        #0B3C5D;
  --cs-color-primary-hover:  #082B44;
  --cs-color-primary-faded:  rgba(11, 60, 93, 0.12);
  --cs-color-secondary:      #F59E0B;
  --cs-color-success:        #16A34A;
  --cs-color-success-faded:  rgba(22, 163, 74, 0.12);
  --cs-color-danger:         #DC2626;
  --cs-color-danger-hover:   #B91C1C;
  --cs-color-danger-faded:   rgba(220, 38, 38, 0.10);
  --cs-color-warning:        #F97316;
  --cs-color-warning-faded:  rgba(249, 115, 22, 0.12);
  --cs-color-info:           #0EA5E9;
  --cs-color-info-faded:     rgba(14, 165, 233, 0.12);

  --cs-color-bg:             #F7F9FC;
  --cs-color-surface:        #FFFFFF;
  --cs-color-surface-alt:    #F1F5F9;
  --cs-color-text:           #0F172A;
  --cs-color-text-muted:     #64748B;
  --cs-color-border:         #D9E2EC;
  --cs-color-border-strong:  #CBD5E1;
  --cs-color-backdrop:       rgba(15, 23, 42, 0.55);
  --cs-color-skeleton-base:  #E8EEF5;
  --cs-color-skeleton-shine: #F2F7FC;

  /* Typography */
  --cs-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-font-heading: "Sora", "Manrope", "Inter", system-ui, sans-serif;

  --cs-fs-xs:  12px;
  --cs-fs-sm:  14px;
  --cs-fs-md:  16px;
  --cs-fs-lg:  18px;
  --cs-fs-xl:  20px;
  --cs-fs-2xl: 24px;

  --cs-lh-tight:  1.25;
  --cs-lh-normal: 1.5;

  /* Spacing (4px grid) */
  --cs-space-1:  4px;
  --cs-space-2:  8px;
  --cs-space-3:  12px;
  --cs-space-4:  16px;
  --cs-space-5:  20px;
  --cs-space-6:  24px;
  --cs-space-8:  32px;
  --cs-space-10: 40px;
  --cs-space-12: 48px;

  /* Radius */
  --cs-radius-input: 6px;
  --cs-radius-card:  10px;
  --cs-radius-modal: 16px;
  --cs-radius-pill:  9999px;

  /* Shadows */
  --cs-shadow-rest:  0 1px 2px rgba(15, 23, 42, 0.05);
  --cs-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
  --cs-shadow-modal: 0 12px 32px rgba(15, 23, 42, 0.16);

  /* Motion */
  --cs-motion-fast: 150ms ease-out;
  --cs-motion-base: 200ms ease-out;

  /* Layout */
  --cs-header-h: 56px;
  --cs-footer-h: 72px;
  --cs-touch-target: 48px;
}

/* ═════════════════════════════════════════════════════════════
 * 2. RESET (scoped)
 * ═════════════════════════════════════════════════════════════ */

.cs-overlay,
.cs-overlay *,
.cs-overlay *::before,
.cs-overlay *::after,
.cs-modal__backdrop,
.cs-modal__backdrop *,
.cs-modal__backdrop *::before,
.cs-modal__backdrop *::after,
.cs-toast-stack,
.cs-toast-stack *,
.cs-toast-stack *::before,
.cs-toast-stack *::after {
  box-sizing: border-box;
}

.cs-overlay button,
.cs-modal__backdrop button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

.cs-overlay button:disabled,
.cs-modal__backdrop button:disabled {
  cursor: not-allowed;
}

.cs-overlay img,
.cs-overlay video,
.cs-preview__video {
  display: block;
  max-width: 100%;
}

/* ═════════════════════════════════════════════════════════════
 * 3. BODY WHEN OVERLAY IS OPEN
 * ═════════════════════════════════════════════════════════════ */

body.cs-overlay-open {
  overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════
 * 4. OVERLAY SHELL
 * ═════════════════════════════════════════════════════════════ */

.cs-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  font-family: var(--cs-font-body);
  font-size: var(--cs-fs-md);
  line-height: var(--cs-lh-normal);
  color: var(--cs-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cs-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: var(--cs-color-backdrop);
  animation: cs-fade-in var(--cs-motion-base) ease-out both;
}

.cs-overlay__sheet {
  position: absolute;
  inset: 0;
  z-index: 8000;
  display: grid;
  grid-template-rows: var(--cs-header-h) auto 1fr auto;
  grid-template-areas:
    "header"
    "banner"
    "body"
    "footer";
  background: var(--cs-color-bg);
  animation: cs-slide-up var(--cs-motion-base) ease-out both;
  overflow: hidden;
}

@keyframes cs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cs-slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Header ── */
.cs-overlay__header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  padding: 0 var(--cs-space-3);
  padding-top: env(safe-area-inset-top);
  background: var(--cs-color-surface);
  border-bottom: 1px solid var(--cs-color-border);
  box-shadow: var(--cs-shadow-rest);
}

.cs-overlay__back {
  width: var(--cs-touch-target);
  height: var(--cs-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-input);
  color: var(--cs-color-text);
  transition: background-color var(--cs-motion-fast);
  flex-shrink: 0;
}

.cs-overlay__back:hover,
.cs-overlay__back:focus-visible {
  background: var(--cs-color-surface-alt);
  outline: none;
}

.cs-overlay__back:focus-visible {
  outline: 2px solid var(--cs-color-primary);
  outline-offset: 2px;
}

.cs-overlay__back-icon {
  font-size: 22px;
  line-height: 1;
}

.cs-overlay__title {
  flex: 1;
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-lg);
  font-weight: 700;
  line-height: var(--cs-lh-tight);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-overlay__spacer {
  flex: 0 0 auto;
  min-width: 8px;
}

/* ── Banner slot (below header, above body) ── */
.cs-overlay__banner-slot {
  grid-area: banner;
  /* Empty when no banner — collapses to 0 height. */
}

/* ── Body ── */
.cs-overlay__body {
  grid-area: body;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--cs-space-4);
  background: var(--cs-color-bg);
}

/* ── Footer ── */
.cs-overlay__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  padding: var(--cs-space-3) var(--cs-space-4);
  padding-bottom: calc(var(--cs-space-3) + env(safe-area-inset-bottom));
  background: var(--cs-color-surface);
  border-top: 1px solid var(--cs-color-border);
  box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.05);
  min-height: var(--cs-footer-h);
}

/* Hide footer entirely when JS sets display:none — no additional
 * CSS needed, but ensure no padding leaks: */
.cs-overlay__footer:empty {
  display: none;
}

/* ── Desktop: centered card ── */
@media (min-width: 720px) {
  .cs-overlay__sheet {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 48px));
    height: min(90vh, 820px);
    border-radius: var(--cs-radius-modal);
    box-shadow: var(--cs-shadow-modal);
    overflow: hidden;
    animation: cs-pop-in var(--cs-motion-base) ease-out both;
  }

  @keyframes cs-pop-in {
    from { transform: translate(-50%, -48%); opacity: 0; }
    to   { transform: translate(-50%, -50%); opacity: 1; }
  }

  .cs-overlay__header {
    border-top-left-radius: var(--cs-radius-modal);
    border-top-right-radius: var(--cs-radius-modal);
  }

  .cs-overlay__footer {
    border-bottom-left-radius: var(--cs-radius-modal);
    border-bottom-right-radius: var(--cs-radius-modal);
  }
}

/* ═════════════════════════════════════════════════════════════
 * 5. BANNER
 * ═════════════════════════════════════════════════════════════ */

.cs-banner {
  display: flex;
  align-items: center;
  gap: var(--cs-space-2);
  padding: var(--cs-space-3) var(--cs-space-4);
  font-size: var(--cs-fs-sm);
  font-weight: 500;
  line-height: var(--cs-lh-normal);
  animation: cs-fade-in var(--cs-motion-fast) ease-out both;
}

.cs-banner--offline {
  background: var(--cs-color-warning-faded);
  color: #9A3412;
  border-bottom: 1px solid rgba(249, 115, 22, 0.28);
}

.cs-banner--online {
  background: var(--cs-color-success-faded);
  color: #14532D;
  border-bottom: 1px solid rgba(22, 163, 74, 0.28);
}

.cs-banner--info {
  background: var(--cs-color-info-faded);
  color: #075985;
  border-bottom: 1px solid rgba(14, 165, 233, 0.28);
}

.cs-banner--warning {
  background: var(--cs-color-warning-faded);
  color: #9A3412;
  border-bottom: 1px solid rgba(249, 115, 22, 0.28);
}

.cs-banner__text {
  flex: 1;
}

.cs-banner__dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-input);
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.7;
}

.cs-banner__dismiss:hover { opacity: 1; }

/* ═════════════════════════════════════════════════════════════
 * 6. STATE WRAPPER
 * ═════════════════════════════════════════════════════════════ */

.cs-state {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-4);
  animation: cs-fade-in var(--cs-motion-fast) ease-out both;
}

/* ═════════════════════════════════════════════════════════════
 * 7. SKELETON
 * ═════════════════════════════════════════════════════════════ */

.cs-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--cs-color-skeleton-base);
  border-radius: var(--cs-radius-card);
}

.cs-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    var(--cs-color-skeleton-base) 0%,
    var(--cs-color-skeleton-shine) 50%,
    var(--cs-color-skeleton-base) 100%
  );
  background-size: 200% 100%;
  animation: cs-shimmer 1.5s linear infinite;
}

.cs-skeleton__card {
  width: 100%;
  height: 80px;
}

.cs-skeleton__thumb {
  width: 100%;
  height: 96px;
  border-radius: var(--cs-radius-card);
}

.cs-skeleton__line {
  height: 12px;
  border-radius: var(--cs-radius-pill);
  margin-top: var(--cs-space-2);
}

@keyframes cs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═════════════════════════════════════════════════════════════
 * 8. JOB CARD SUMMARY
 * ═════════════════════════════════════════════════════════════ */

.cs-jobcard {
  background: var(--cs-color-surface);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-4);
  box-shadow: var(--cs-shadow-rest);
}

.cs-jobcard__title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-lg);
  font-weight: 700;
  line-height: var(--cs-lh-tight);
  color: var(--cs-color-text);
  margin: 0 0 var(--cs-space-1) 0;
}

.cs-jobcard__meta {
  font-size: var(--cs-fs-sm);
  color: var(--cs-color-text-muted);
  line-height: var(--cs-lh-normal);
}

/* ═════════════════════════════════════════════════════════════
 * 9. SECTIONS (BEFORE / AFTER)
 * ═════════════════════════════════════════════════════════════ */

.cs-section {
  background: var(--cs-color-surface);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-4);
  box-shadow: var(--cs-shadow-rest);
}

.cs-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--cs-space-3);
  margin-bottom: var(--cs-space-4);
}

.cs-section__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-pill);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.cs-section--before .cs-section__icon {
  background: var(--cs-color-warning-faded);
  color: var(--cs-color-warning);
}

.cs-section--after .cs-section__icon {
  background: var(--cs-color-success-faded);
  color: var(--cs-color-success);
}

.cs-section__titles {
  flex: 1;
  min-width: 0;
}

.cs-section__title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-color-text);
  margin: 0;
  line-height: var(--cs-lh-tight);
}

.cs-section__hint {
  font-size: var(--cs-fs-xs);
  color: var(--cs-color-text-muted);
  margin: var(--cs-space-1) 0 0 0;
  line-height: var(--cs-lh-normal);
}

.cs-section__count {
  flex-shrink: 0;
  font-size: var(--cs-fs-xs);
  font-weight: 600;
  color: var(--cs-color-text-muted);
  background: var(--cs-color-surface-alt);
  padding: var(--cs-space-1) var(--cs-space-2);
  border-radius: var(--cs-radius-pill);
}

.cs-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--cs-space-2);
  margin-bottom: var(--cs-space-3);
}

.cs-section__dropzone {
  border: 2px dashed var(--cs-color-border-strong);
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-4);
  text-align: center;
  font-size: var(--cs-fs-xs);
  color: var(--cs-color-text-muted);
  cursor: pointer;
  transition: border-color var(--cs-motion-fast), background-color var(--cs-motion-fast);
  min-height: var(--cs-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-section__dropzone:hover,
.cs-section__dropzone:focus-visible {
  border-color: var(--cs-color-primary);
  background: var(--cs-color-primary-faded);
  outline: none;
}

.cs-section__dropzone--active {
  border-color: var(--cs-color-primary);
  background: var(--cs-color-primary-faded);
  border-style: solid;
}

/* ═════════════════════════════════════════════════════════════
 * 10. FILE TILES
 * ═════════════════════════════════════════════════════════════ */

.cs-file {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cs-color-surface-alt);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  overflow: hidden;
  min-height: 96px;
  transition: border-color var(--cs-motion-fast), box-shadow var(--cs-motion-fast);
}

.cs-file--uploading { border-color: var(--cs-color-primary); }
.cs-file--done      { border-color: var(--cs-color-success); }
.cs-file--failed    { border-color: var(--cs-color-danger); }

.cs-file__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--cs-color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-file__thumb img,
.cs-file__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-file__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.cs-file__placeholder {
  width: 100%;
  height: 100%;
  background: var(--cs-color-skeleton-base);
}

.cs-file__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: var(--cs-radius-pill);
  background: rgba(15, 23, 42, 0.65);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--cs-motion-fast);
}

.cs-file__remove:hover,
.cs-file__remove:focus-visible {
  background: rgba(15, 23, 42, 0.9);
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.cs-file__progress {
  height: 3px;
  width: 100%;
  background: var(--cs-color-border);
}

.cs-file__progress-bar {
  height: 100%;
  width: 0;
  background: var(--cs-color-primary);
  transition: width var(--cs-motion-base) ease-out;
}

.cs-file--done .cs-file__progress-bar    { background: var(--cs-color-success); }
.cs-file--failed .cs-file__progress-bar  { background: var(--cs-color-danger); }

.cs-file__status {
  padding: var(--cs-space-1) var(--cs-space-2);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--cs-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 22px;
}

.cs-file__status--error { color: var(--cs-color-danger); }

/* ── Add tile ── */
.cs-file--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--cs-color-border-strong);
  background: transparent;
  min-height: 96px;
  gap: var(--cs-space-1);
  color: var(--cs-color-text-muted);
  padding: var(--cs-space-2);
  font-family: inherit;
  font-size: var(--cs-fs-xs);
  text-align: center;
  line-height: var(--cs-lh-tight);
  transition: border-color var(--cs-motion-fast), background-color var(--cs-motion-fast);
}

.cs-file--add:hover,
.cs-file--add:focus-visible {
  border-color: var(--cs-color-primary);
  background: var(--cs-color-primary-faded);
  outline: none;
}

.cs-file--add:focus-visible {
  outline: 2px solid var(--cs-color-primary);
  outline-offset: 2px;
}

.cs-file__plus {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--cs-color-primary);
}

.cs-file__add-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cs-color-text-muted);
  line-height: var(--cs-lh-tight);
}

/* ═════════════════════════════════════════════════════════════
 * 11. FORM NOTE
 * ═════════════════════════════════════════════════════════════ */

.cs-form__note {
  font-size: var(--cs-fs-xs);
  color: var(--cs-color-text-muted);
  text-align: center;
  padding: var(--cs-space-2) var(--cs-space-3);
  line-height: var(--cs-lh-normal);
}

/* ═════════════════════════════════════════════════════════════
 * 12. BUTTONS
 * ═════════════════════════════════════════════════════════════ */

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--cs-space-5);
  border-radius: var(--cs-radius-input);
  font-family: var(--cs-font-body);
  font-size: var(--cs-fs-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--cs-motion-fast),
              border-color var(--cs-motion-fast),
              color var(--cs-motion-fast),
              transform var(--cs-motion-fast);
}

.cs-btn:focus-visible {
  outline: 2px solid var(--cs-color-primary);
  outline-offset: 2px;
}

.cs-btn:active {
  transform: translateY(1px);
}

.cs-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cs-btn--primary {
  background: var(--cs-color-primary);
  color: #FFFFFF;
  border: 1px solid var(--cs-color-primary);
}

.cs-btn--primary:hover:not(:disabled),
.cs-btn--primary:focus-visible {
  background: var(--cs-color-primary-hover);
  border-color: var(--cs-color-primary-hover);
}

.cs-btn--ghost {
  background: transparent;
  color: var(--cs-color-text);
  border: 1px solid var(--cs-color-border-strong);
}

.cs-btn--ghost:hover:not(:disabled),
.cs-btn--ghost:focus-visible {
  background: var(--cs-color-surface-alt);
  border-color: var(--cs-color-border);
}

/* ═════════════════════════════════════════════════════════════
 * 13. AGGREGATE PROGRESS (creating)
 * ═════════════════════════════════════════════════════════════ */

.cs-progress {
  background: var(--cs-color-surface);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-4);
  box-shadow: var(--cs-shadow-rest);
}

.cs-progress__label {
  font-size: var(--cs-fs-sm);
  font-weight: 600;
  color: var(--cs-color-text);
  margin-bottom: var(--cs-space-2);
}

.cs-progress__bar {
  position: relative;
  height: 8px;
  width: 100%;
  background: var(--cs-color-surface-alt);
  border-radius: var(--cs-radius-pill);
  overflow: hidden;
}

.cs-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--cs-color-primary) 0%,
    var(--cs-color-info) 100%
  );
  border-radius: var(--cs-radius-pill);
  transition: width var(--cs-motion-base) ease-out;
}

/* ═════════════════════════════════════════════════════════════
 * 14. UPLOAD LIST
 * ═════════════════════════════════════════════════════════════ */

.cs-upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

.cs-upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name pct"
    "bar  bar"
    "error error";
  gap: var(--cs-space-1) var(--cs-space-2);
  padding: var(--cs-space-3);
  background: var(--cs-color-surface);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  font-size: var(--cs-fs-xs);
}

.cs-upload-row__name {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--cs-color-text);
}

.cs-upload-row__pct {
  grid-area: pct;
  font-weight: 600;
  color: var(--cs-color-text-muted);
  text-align: right;
  min-width: 40px;
}

.cs-upload-row__bar {
  grid-area: bar;
  height: 4px;
  background: var(--cs-color-surface-alt);
  border-radius: var(--cs-radius-pill);
  overflow: hidden;
}

.cs-upload-row__bar-fill {
  height: 100%;
  width: 0;
  background: var(--cs-color-primary);
  border-radius: var(--cs-radius-pill);
  transition: width var(--cs-motion-base) ease-out;
}

.cs-upload-row--done .cs-upload-row__bar-fill {
  background: var(--cs-color-success);
}
.cs-upload-row--failed .cs-upload-row__bar-fill {
  background: var(--cs-color-danger);
}

.cs-upload-row__error {
  grid-area: error;
  color: var(--cs-color-danger);
  font-size: 11px;
  line-height: var(--cs-lh-normal);
}

/* Inline error */
.cs-inline-error {
  padding: var(--cs-space-3);
  background: var(--cs-color-danger-faded);
  color: var(--cs-color-danger);
  border-radius: var(--cs-radius-input);
  font-size: var(--cs-fs-sm);
  font-weight: 500;
  text-align: center;
}

/* Inline button */
.cs-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 var(--cs-space-3);
  font-size: var(--cs-fs-xs);
  font-weight: 600;
  color: var(--cs-color-primary);
  border: 1px solid var(--cs-color-primary);
  border-radius: var(--cs-radius-input);
  background: transparent;
  transition: background-color var(--cs-motion-fast);
  margin-top: var(--cs-space-2);
}

.cs-inline-btn:hover,
.cs-inline-btn:focus-visible {
  background: var(--cs-color-primary-faded);
  outline: none;
}

/* ═════════════════════════════════════════════════════════════
 * 15. PIPELINE
 * ═════════════════════════════════════════════════════════════ */

.cs-pipeline {
  background: var(--cs-color-surface);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-4);
  box-shadow: var(--cs-shadow-rest);
}

.cs-pipeline__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-3);
}

.cs-step {
  display: flex;
  align-items: center;
  gap: var(--cs-space-3);
  font-size: var(--cs-fs-sm);
  color: var(--cs-color-text-muted);
  line-height: var(--cs-lh-normal);
}

.cs-step__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-pill);
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--cs-color-border);
  color: var(--cs-color-text-muted);
  background: var(--cs-color-surface);
}

.cs-step__label { flex: 1; }

.cs-step--done {
  color: var(--cs-color-text);
}

.cs-step--done .cs-step__icon {
  background: var(--cs-color-success);
  border-color: var(--cs-color-success);
  color: #FFFFFF;
}

.cs-step--active {
  color: var(--cs-color-text);
  font-weight: 600;
}

.cs-step--active .cs-step__icon {
  background: var(--cs-color-primary);
  border-color: var(--cs-color-primary);
  color: #FFFFFF;
  animation: cs-pulse 1.4s ease-in-out infinite;
}

@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 60, 93, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(11, 60, 93, 0); }
}

.cs-pipeline__story {
  margin-top: var(--cs-space-4);
  padding-top: var(--cs-space-3);
  border-top: 1px solid var(--cs-color-border);
  font-size: var(--cs-fs-sm);
  color: var(--cs-color-text-muted);
}

.cs-pipeline__story strong {
  color: var(--cs-color-text);
  font-weight: 700;
}

.cs-pipeline__note {
  font-size: var(--cs-fs-xs);
  color: var(--cs-color-text-muted);
  text-align: center;
  line-height: var(--cs-lh-normal);
  padding: var(--cs-space-2);
}

/* ═════════════════════════════════════════════════════════════
 * 16. AWAITING MEDIA
 * ═════════════════════════════════════════════════════════════ */

.cs-awaiting__title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-lg);
  font-weight: 700;
  margin: 0 0 var(--cs-space-2) 0;
  color: var(--cs-color-text);
}

.cs-awaiting__list {
  margin: 0;
  padding-left: var(--cs-space-5);
  color: var(--cs-color-text);
  font-size: var(--cs-fs-sm);
  line-height: var(--cs-lh-normal);
}

.cs-awaiting__list li {
  margin-bottom: var(--cs-space-1);
}

/* ═════════════════════════════════════════════════════════════
 * 17. PREVIEW (READY_TO_POST)
 * ═════════════════════════════════════════════════════════════ */

.cs-preview {
  background: #000000;
  border-radius: var(--cs-radius-card);
  overflow: hidden;
  box-shadow: var(--cs-shadow-hover);
  aspect-ratio: 9 / 16;
  max-height: 60vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-preview__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
}

.cs-preview__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
  margin-top: var(--cs-space-4);
}

.cs-preview__actions .cs-btn {
  width: 100%;
}

.cs-loading-label {
  text-align: center;
  font-size: var(--cs-fs-sm);
  color: var(--cs-color-text-muted);
  padding: var(--cs-space-3);
}

/* ═════════════════════════════════════════════════════════════
 * 18. FAILED
 * ═════════════════════════════════════════════════════════════ */

.cs-failed {
  background: var(--cs-color-surface);
  border: 1px solid var(--cs-color-border);
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-6) var(--cs-space-4);
  text-align: center;
  box-shadow: var(--cs-shadow-rest);
}

.cs-failed__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--cs-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cs-radius-pill);
  background: var(--cs-color-danger-faded);
  color: var(--cs-color-danger);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.cs-failed__title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-lg);
  font-weight: 700;
  margin: 0 0 var(--cs-space-2) 0;
  color: var(--cs-color-text);
}

.cs-failed__message {
  font-size: var(--cs-fs-sm);
  color: var(--cs-color-text-muted);
  line-height: var(--cs-lh-normal);
  margin: 0 0 var(--cs-space-2) 0;
}

.cs-failed__detail {
  font-size: var(--cs-fs-xs);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--cs-color-surface-alt);
  border: 1px solid var(--cs-color-border);
  padding: var(--cs-space-2);
  border-radius: var(--cs-radius-input);
  color: var(--cs-color-text-muted);
  margin-top: var(--cs-space-3);
  text-align: left;
  word-break: break-word;
}

/* ═════════════════════════════════════════════════════════════
 * 19. MODAL
 * ═════════════════════════════════════════════════════════════ */

.cs-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cs-space-4);
  background: var(--cs-color-backdrop);
  font-family: var(--cs-font-body);
  font-size: var(--cs-fs-md);
  line-height: var(--cs-lh-normal);
  color: var(--cs-color-text);
  animation: cs-fade-in var(--cs-motion-fast) ease-out both;
}

.cs-modal__dialog {
  background: var(--cs-color-surface);
  border-radius: var(--cs-radius-modal);
  box-shadow: var(--cs-shadow-modal);
  width: min(100%, 420px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: var(--cs-space-5);
  animation: cs-modal-in var(--cs-motion-base) ease-out both;
}

@keyframes cs-modal-in {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.cs-modal__title {
  font-family: var(--cs-font-heading);
  font-size: var(--cs-fs-lg);
  font-weight: 700;
  margin: 0 0 var(--cs-space-3) 0;
  color: var(--cs-color-text);
  line-height: var(--cs-lh-tight);
}

.cs-modal__body {
  font-size: var(--cs-fs-sm);
  color: var(--cs-color-text-muted);
  line-height: var(--cs-lh-normal);
  margin-bottom: var(--cs-space-5);
}

.cs-modal__body p {
  margin: 0;
}

.cs-modal__body p + p {
  margin-top: var(--cs-space-2);
}

.cs-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-2);
}

@media (min-width: 480px) {
  .cs-modal__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .cs-modal__actions .cs-modal__btn {
    flex: 0 1 auto;
  }
}

.cs-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--cs-space-5);
  border-radius: var(--cs-radius-input);
  font-family: var(--cs-font-body);
  font-size: var(--cs-fs-sm);
  font-weight: 600;
  line-height: 1;
  background: var(--cs-color-surface-alt);
  border: 1px solid var(--cs-color-border);
  color: var(--cs-color-text);
  transition: background-color var(--cs-motion-fast), border-color var(--cs-motion-fast);
}

.cs-modal__btn:hover,
.cs-modal__btn:focus-visible {
  background: var(--cs-color-border);
  outline: none;
}

.cs-modal__btn:focus-visible {
  outline: 2px solid var(--cs-color-primary);
  outline-offset: 2px;
}

.cs-modal__btn--primary {
  background: var(--cs-color-primary);
  border-color: var(--cs-color-primary);
  color: #FFFFFF;
}

.cs-modal__btn--primary:hover,
.cs-modal__btn--primary:focus-visible {
  background: var(--cs-color-primary-hover);
  border-color: var(--cs-color-primary-hover);
}

.cs-modal__btn--danger {
  background: var(--cs-color-danger);
  border-color: var(--cs-color-danger);
  color: #FFFFFF;
}

.cs-modal__btn--danger:hover,
.cs-modal__btn--danger:focus-visible {
  background: var(--cs-color-danger-hover);
  border-color: var(--cs-color-danger-hover);
}

/* ═════════════════════════════════════════════════════════════
 * 20. TOAST
 * ═════════════════════════════════════════════════════════════ */

.cs-toast-stack {
  position: fixed;
  bottom: calc(var(--cs-space-4) + env(safe-area-inset-bottom));
  left: var(--cs-space-4);
  right: var(--cs-space-4);
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--cs-space-2);
  pointer-events: none;
  font-family: var(--cs-font-body);
}

@media (min-width: 720px) {
  .cs-toast-stack {
    left: auto;
    right: var(--cs-space-6);
    bottom: var(--cs-space-6);
    width: min(380px, calc(100vw - 48px));
  }
}

.cs-toast {
  pointer-events: auto;
  background: var(--cs-color-text);
  color: #FFFFFF;
  border-radius: var(--cs-radius-card);
  padding: var(--cs-space-3) var(--cs-space-4);
  font-size: var(--cs-fs-sm);
  font-weight: 500;
  line-height: var(--cs-lh-normal);
  box-shadow: var(--cs-shadow-modal);
  cursor: pointer;
  animation: cs-toast-in var(--cs-motion-base) ease-out both;
  word-break: break-word;
}

.cs-toast--hiding {
  animation: cs-toast-out 220ms ease-in both;
}

.cs-toast--success { background: var(--cs-color-success); }
.cs-toast--error   { background: var(--cs-color-danger); }
.cs-toast--warning { background: var(--cs-color-warning); }
.cs-toast--info    { background: var(--cs-color-info); }

@keyframes cs-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cs-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ═════════════════════════════════════════════════════════════
 * 21. RESPONSIVE ENHANCEMENTS
 * ═════════════════════════════════════════════════════════════ */

@media (min-width: 720px) {
  .cs-overlay__body {
    padding: var(--cs-space-5);
  }

  .cs-preview__actions {
    flex-direction: row;
    justify-content: center;
  }

  .cs-preview__actions .cs-btn {
    width: auto;
    min-width: 160px;
  }

  .cs-section__grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  }
}

/* ═════════════════════════════════════════════════════════════
 * 22. PREFERS-REDUCED-MOTION
 * ═════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .cs-overlay__backdrop,
  .cs-overlay__sheet,
  .cs-modal__backdrop,
  .cs-modal__dialog,
  .cs-toast,
  .cs-toast--hiding,
  .cs-state,
  .cs-banner {
    animation: none !important;
  }

  .cs-skeleton::after {
    animation: none;
    background: var(--cs-color-skeleton-base);
  }

  .cs-step--active .cs-step__icon {
    animation: none;
  }

  .cs-file__progress-bar,
  .cs-progress__fill,
  .cs-upload-row__bar-fill,
  .cs-btn {
    transition: none;
  }
}

/* ═════════════════════════════════════════════════════════════
 * 23. FOCUS VISIBLE FALLBACK
 * ═════════════════════════════════════════════════════════════ */
/* Older browsers that do not support :focus-visible get a visible
 * focus outline via :focus. Modern browsers only show it for
 * keyboard focus thanks to :focus-visible above. */
@supports not selector(:focus-visible) {
  .cs-overlay button:focus,
  .cs-modal__backdrop button:focus {
    outline: 2px solid var(--cs-color-primary);
    outline-offset: 2px;
  }
}