/* public/creative-studio/style.css — small additions on top of the
   shared /style.css HUD tokens (--purple2, --pink2, --panel, etc. all
   inherited). Everything reused verbatim from the shared sheet — this
   file only adds the handful of Creative-Studio-specific layouts
   (capability status table, folder grid, run-task form) that don't
   exist anywhere else in the app yet. */

.small{font-size:12px;}
.dim{color:var(--dim);}

.cap-table{display:flex;flex-direction:column;gap:6px;}
.cap-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--panel);
}
.cap-row .cap-name{font-family:'JetBrains Mono',monospace;font-size:12.5px;}
.cap-badge{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:3px 9px;border-radius:99px;
  white-space:nowrap;letter-spacing:0.3px;
}
.cap-badge.working{background:rgba(47,224,138,0.14);color:var(--green);border:1px solid rgba(47,224,138,0.3);}
.cap-badge.needs{background:rgba(255,200,56,0.14);color:var(--yellow);border:1px solid rgba(255,200,56,0.3);}
.cap-badge.notbuilt{background:rgba(251,99,99,0.12);color:var(--red);border:1px solid rgba(251,99,99,0.28);}

.cs-run-form{display:flex;flex-direction:column;gap:8px;max-width:520px;}
.cs-run-form select,.cs-run-form input,.cs-run-form textarea{
  background:var(--panel-solid);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);padding:9px 11px;font-family:'Inter',sans-serif;font-size:13px;
}
.cs-run-form textarea{resize:vertical;}
.cs-result{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:12px;white-space:pre-wrap;color:var(--dim);}

.cs-folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
.cs-folder-card{
  padding:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel);
  display:flex;flex-direction:column;gap:4px;
}
.cs-folder-card .name{font-weight:600;}
.cs-folder-card .count{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);}

.cs-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.cs-table th{text-align:left;color:var(--dim);font-weight:500;padding:6px 10px;border-bottom:1px solid var(--border);}
.cs-table td{padding:7px 10px;border-bottom:1px solid rgba(255,255,255,0.04);}

.cs-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.cs-list-item{
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel);
  display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;
}

/* Timeline Editor clip rows — R50 Phase 4, same drag-reorder feel as the main dashboard's sidebar-tab customizer (public/style.css's .tab.dragging etc.), scoped to this module instead of reusing that class. */
.cs-clip-row{
  padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel);
  display:flex;align-items:center;gap:8px;font-size:12px;cursor:grab;margin-bottom:6px;
}
.cs-clip-row.dragging{opacity:0.35;}
.cs-clip-row.drag-over-top{box-shadow:0 -2px 0 0 var(--pink2,#ff4fd8) inset;}
.cs-clip-row.drag-over-bottom{box-shadow:0 2px 0 0 var(--pink2,#ff4fd8) inset;}
.cs-clip-row .clip-handle{opacity:0.5;font-size:14px;}
.cs-clip-row input[type="number"]{width:70px;}
.cs-clip-row .clip-name{flex:1;font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}