fix(ui): unpin routine detail title bar + add main top-padding (PAP-10748)

- Title-action header now scrolls with the page instead of sticking.
- Re-anchor sticky sub-sidebar + mobile section picker to top-0 so they
  stay flush once the header scrolls off (no 56px gap).
- Bump main pane top padding (py-6 -> pt-10) so content no longer crowds
  the bar above it.
- Mirror the layout in the storybook variation-C shell.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

ui/src/components/RoutineSubSidebar.tsx

@@ -110,7 +110,7 @@ export function RoutineSubSidebar({
   return (
     <nav
       aria-label="Routine sections"
-      className="sticky top-14 hidden max-h-[calc(100dvh-3.5rem)] w-52 shrink-0 flex-col gap-4 self-start overflow-y-auto border-r border-border bg-sidebar/30 px-3 py-4 md:flex"
+      className="sticky top-0 hidden max-h-[100dvh] w-52 shrink-0 flex-col gap-4 self-start overflow-y-auto border-r border-border bg-sidebar/30 px-3 py-4 md:flex"
     >
       {NAV_GROUPS.map((group) => (
         <div key={group.label} className="flex flex-col gap-0.5">
@@ -174,7 +174,7 @@ export function RoutineSectionPicker({
   isSectionDirty: (section: RoutineSectionKey) => boolean;
 }) {
   return (
-    <div className="sticky top-14 z-10 border-b border-border bg-background px-4 py-2 md:hidden">
+    <div className="sticky top-0 z-10 border-b border-border bg-background px-4 py-2 md:hidden">
       <Select
         value={activeSection}
         onValueChange={(value) => {

ui/src/pages/RoutineDetail.tsx

@@ -782,8 +782,8 @@ export function RoutineDetail() {
       </a>
 
       <div className="-m-4 flex min-h-full flex-col md:-m-6">
-        {/* Slim page header */}
-        <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-6">
+        {/* Slim page header — scrolls with the page (not sticky) */}
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-6">
           <div className="flex min-w-0 flex-1 items-center gap-3">
             <textarea
               ref={titleInputRef}
@@ -848,7 +848,7 @@ export function RoutineDetail() {
           <main
             id="routine-section"
             role="main"
-            className="min-w-0 flex-1 px-4 py-6 md:px-8"
+            className="min-w-0 flex-1 px-4 pb-6 pt-10 md:px-8"
           >
             <section
               aria-labelledby="routine-section-title"

ui/storybook/stories/routine-detail-c.stories.tsx

@@ -270,8 +270,8 @@ function RoutineCShell({ initialSection = "overview", dirty = false }: { initial
 
   return (
     <RoutineDetailContext.Provider value={ctx}>
-      <div className="flex h-[900px] flex-col bg-background text-foreground">
-        <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-6">
+      <div className="flex h-[900px] flex-col overflow-y-auto bg-background text-foreground">
+        <header className="flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background px-6">
           <div className="flex min-w-0 flex-1 items-center gap-3">
             <span className="truncate text-base font-semibold">{routine.title}</span>
             <Badge variant="outline" className="hidden shrink-0 gap-1.5 text-xs text-muted-foreground sm:inline-flex">
@@ -297,7 +297,7 @@ function RoutineCShell({ initialSection = "overview", dirty = false }: { initial
             hasLiveRun={false}
             onNavigate={setSection}
           />
-          <main className="min-w-0 flex-1 overflow-y-auto px-4 py-6 md:px-8">
+          <main className="min-w-0 flex-1 px-4 pb-6 pt-10 md:px-8">
             <section className={isEditable ? "mx-auto w-full max-w-3xl" : "w-full"}>
               <h2 className="mb-4 text-lg font-semibold">{SECTION_TITLES[section]}</h2>
               <SectionBody section={section} />