refactor(rundown): move offset tip inside the pill, drop labels

Group labels widened the header and left the label, toggles and icon
reading as three detached elements. Instead keep only the offset
indicator and place it inside the pill, divided from the toggles, so the
control reads as one grouped segmented unit. Mode/View revert to plain
pills.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hj5P4eDgf97zSCzViGHNDy

apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss

@@ -58,24 +58,19 @@
   }
 }
 
-.controlGroup {
+/** inner toggle row when the pill also holds a trailing element (e.g. info icon) */
+.segments {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 2px;
-}
-
-.groupLabel {
-  color: $gray-400;
-  font-size: calc(1rem - 3px);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
 }
 
 .infoIcon {
   display: flex;
   align-items: center;
+  height: calc(2rem - 4px); // match .radioButton height
+  padding-inline: 0.4rem;
+  border-left: 1px solid $gray-1000;
   color: $gray-400;
   font-size: calc(1rem + 1px);
   cursor: help;

apps/client/src/features/rundown/rundown-header/RundownHeader.tsx

@@ -75,8 +75,6 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
   return (
     <Toolbar.Root className={style.header}>
       {showRunEditToggle && (
-        <div className={style.controlGroup}>
-          <span className={style.groupLabel}>Mode</span>
         <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
           <Tooltip
             text='Live playback view with auto-follow'
@@ -91,11 +89,8 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
             Edit
           </Tooltip>
         </ToggleGroup>
-        </div>
       )}
 
-      <div className={style.controlGroup}>
-        <span className={style.groupLabel}>View</span>
       <ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
         <Tooltip
           text='View rundown in list mode'
@@ -110,12 +105,10 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
           Table
         </Tooltip>
       </ToggleGroup>
-      </div>
 
       {showOffsetToggle && (
-        <div className={style.controlGroup}>
+        <div className={style.group}>
-          <span className={style.groupLabel}>Offset</span>
+          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.segments}>
-          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
             <Toolbar.Button render={<Toggle />} value={OffsetMode.Absolute} className={style.radioButton}>
               Absolute
             </Toolbar.Button>