refactor: style tweaks and bug fixes

- italic and bold for rundown metadata entries
- allow deleting groups
- make groups in order
- correct style for milestones
- open playing groups
- style tweaks

apps/client/src/features/rundown/rundown-milestone/RundownMilestone.module.scss

@@ -6,7 +6,8 @@
   margin-left: calc(2rem + 1px); // binder + border
   margin-block: 0.125rem;
   padding-right: 0.25rem;
-  background-color: color-mix(in srgb, var(--user-bg, $block-bg) 15%, transparent 85%);
+  background-color: $gray-1050; // to override inline
+  color: $section-white; // to override inline
 
   display: grid;
   grid-template-columns: 2rem 8rem 1fr auto;
@@ -23,7 +24,8 @@
   height: 100%;
   display: grid;
   place-content: center;
-  background-color: var(--user-bg, $block-bg);
+  background-color: $gray-1050; // to override inline
+  color: $section-white; // to override inline
 }
 
 .drag {

apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx

@@ -76,17 +76,11 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
       className={cx([style.milestone, hasCursor ? style.hasCursor : null])}
       ref={setNodeRef}
       onClick={handleFocusClick}
-      style={{ ...dragStyle, '--user-bg': colour }}
+      style={dragStyle}
       data-testid='rundown-milestone'
     >
-      <div className={style.binder}>
-        <span
-          className={style.drag}
-          style={{ ...binderColours }}
-          ref={handleRef}
-          {...dragAttributes}
-          {...dragListeners}
-        >
+      <div className={style.binder} style={{ ...binderColours }}>
+        <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
           <IoReorderTwo />
         </span>
       </div>