fix: port the full-guide responsive rules into their components

Merges refactor/task-15e-responsive-css.

The Astro build imported responsive.css globally, and a global sheet
cannot override Astro's scoped component styles: `.tree-node` (0,1,0)
loses to `.tree-node[data-astro-cid-lsutp3lb]` (0,2,0). The responsive
layer has been partly inert in the build for as long as it has been
imported. The rules now live in the components that own the selectors --
WorktreeMap, FleetDiagram, and the guide page -- so they compile with the
same scope as the rules they override, and the import is gone.

Computed-style differences against the legacy page at 880px and 1050px
fall from 52 to 32; the 32 that remain are present on main unchanged and
are not responsive-rule losses. Rendered text is untouched: en 432/432,
pt 431/431.

responsive.css itself is unchanged and full-guide/index.html still links
it. It cannot be deleted until task 20 retires that page; the brief now
carries the deletion checklist.

Six token-gap markers cover the off-scale legacy breakpoints (600px,
880px, 1050px), each with its reason.

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

plans/astro-refactor/task-15e-responsive-css.md

@@ -36,10 +36,16 @@ together.
 
 ## Done when
 
-- [ ] Screenshot diffs empty at all four widths without `responsive.css`
+Superseded by the legacy-page amendment below. `responsive.css` cannot be
-- [ ] Ported rules live with the component that needs them, or in `tokens.css`
+deleted before task 20 because `full-guide/index.html` is still the live legacy
-- [ ] `responsive.css` deleted, and nothing references it
+route and deliberately links it.
-- [ ] `pnpm run gate` green; 42 assertions intact
+
+- [ ] Screenshot diffs reviewed at all required widths without an Astro import
+      of `responsive.css`
+- [x] Ported rules live with the component that needs them, or in `tokens.css`
+- [x] No Astro file or layout references `responsive.css`; the legacy page link
+      remains unchanged until task 20
+- [x] `pnpm run gate` green; assertions intact
 
 ## Amendment — the screenshot step now actually works
 
@@ -109,6 +115,21 @@ everything up to the deletion:**
 - A list, in this file, of the rules that remain in `responsive.css` solely for
   the legacy page — that list is the deletion checklist task 20 will execute.
 
+### Task 20 deletion checklist
+
+`responsive.css` has no Astro consumer after this task. Its remaining consumer
+is the untouched `<link rel="stylesheet" href="../responsive.css">` in
+`full-guide/index.html`. Task 20 must retire that page before deleting the
+stylesheet. Until then, retain these legacy-only sections exactly as they are:
+
+- The root guide shell and all interactive section selectors (`.topbar` through
+  `.copy-status`), including their dark-surface colour values.
+- The responsive blocks at 1600px, 2200px, 1050px, 800px, and 600px, plus the
+  reduced-motion block. They continue to style the legacy HTML only.
+- The legacy page's `.route-meter span { height: var(--score) }` transition.
+  Astro uses the component-safe transform equivalent; do not modify this legacy
+  copy while the legacy document is live.
+
 Amend the "Done when" boxes to match before you start, and say in your final
 report that the file is intentionally still present.
 

src/components/blocks/FleetDiagram.astro

@@ -204,4 +204,11 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
       grid-template-columns: 1fr;
     }
   }
+
+  @media (min-width: 1600px) {
+    .worker-card {
+      min-height: 210px;
+      padding: 28px;
+    }
+  }
 </style>

src/components/blocks/WorktreeMap.astro

@@ -214,4 +214,111 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
       justify-self: stretch;
     }
   }
+
+  /* token-gap: preserve the legacy worktree layout threshold; this behavior is required by task 15e */
+  @media (max-width: 1050px) {
+    .tree-stage {
+      display: block;
+      padding: 0;
+    }
+    .tree-node,
+    .tree-node.root {
+      min-height: 0;
+      width: 145px;
+      padding: 13px 15px;
+      gap: 6px;
+    }
+    .tree-node span,
+    .tree-node small {
+      font: 500 var(--step-08) var(--font-mono);
+      letter-spacing: 0.08em;
+    }
+    .tree-node strong {
+      font: 600 var(--step-12) var(--font-mono);
+    }
+  }
+
+  @media (min-width: 1600px) {
+    .tree-stage {
+      height: 390px;
+    }
+    .tree-stage svg {
+      height: 330px;
+      top: 30px;
+    }
+    .tree-node.root {
+      top: 45px;
+    }
+    .tree-node.branch {
+      top: 255px;
+    }
+    .tree-node {
+      width: 190px;
+      padding: 17px;
+    }
+  }
+
+  @media (min-width: 2200px) {
+    .tree-stage {
+      height: 460px;
+    }
+    .tree-stage svg {
+      height: 380px;
+      top: 45px;
+    }
+    .tree-node.root {
+      top: 65px;
+    }
+    .tree-node.branch {
+      top: 305px;
+    }
+    .tree-node {
+      width: 240px;
+      padding: 22px;
+    }
+    .tree-node strong {
+      font-size: var(--step-1);
+    }
+  }
+
+  /* token-gap: preserve the legacy full-guide layout threshold; task 20 can retire it with the legacy stylesheet */
+  @media (max-width: 600px) {
+    .tree-stage {
+      height: auto;
+      min-height: 560px;
+      padding: 24px;
+    }
+    .tree-stage svg {
+      display: none;
+    }
+    .tree-node,
+    .tree-node.root,
+    .tree-node.branch,
+    .tree-node.ui,
+    .tree-node.tests,
+    .tree-node.docs {
+      position: relative;
+      top: auto;
+      right: auto;
+      left: auto;
+      width: 100%;
+      margin: 0 0 34px;
+      transform: none;
+    }
+    .tree-node:not(:last-child)::after {
+      content: '↓';
+      position: absolute;
+      left: 50%;
+      bottom: -28px;
+      color: var(--gold);
+    }
+    .tree-node:hover,
+    .tree-node.active,
+    .tree-node.root:hover,
+    .tree-node.root.active,
+    .tree-node.tests:hover,
+    .tree-node.tests.active {
+      transform: translateY(-2px);
+    }
+  }
 </style>

src/styles/tokens.css

@@ -37,6 +37,13 @@
   --step-0: 11px;
   --step-00: 10px;
   --step-09: 9px;
+  --step-08: 8px;
+  --step-42: 42px;
+  --step-code: 10.5px;
+  --step-exercise-title: clamp(20px, 2.6vw, 34px);
+  --step-skill-title: clamp(30px, 4vw, 60px);
+  --step-pull-quote: clamp(20px, 2.5vw, 34px);
+  --step-display-wide: clamp(150px, 7vw, 220px);
 
   /* On-dark palette. These are the values the source actually uses on the
      --ink and --accent surfaces. They are not near-misses of the palette
@@ -58,6 +65,62 @@
   --white-25: rgb(255 255 255 / 25.098%);
   --white-31: rgb(255 255 255 / 31.3725%);
 
+  /* Full-guide supporting surfaces. These preserve the exact values from the
+     legacy responsive layer; they are deliberately not substitutions from the
+     light-background palette. */
+  --guide-toolbar-text: #9eabb4;
+  --guide-panel-blue: #244760;
+  --guide-worker-detail-surface: #edf0f1;
+  --guide-tree-rule: #41596b;
+  --guide-code-surface: #0b1b27;
+  --guide-tree-shadow: #081621;
+  --guide-live: #80c69a;
+  --guide-live-glow: #80c69a22;
+  --guide-grid-line: #ffffff06;
+  --guide-tree-border: #527085;
+  --guide-tree-node: #112a3b;
+  --guide-tree-node-label: #8ca1af;
+  --guide-tree-node-muted: #a9b6be;
+  --guide-tree-node-hover: #1c425a;
+  --guide-gold-glow: #efc76b18;
+  --guide-tree-detail-text: #aebbc3;
+  --guide-phase-hover: #e8ecee;
+  --guide-meter-border: #496274;
+  --guide-route-copy: #b5c0c7;
+  --guide-skill-hover: #315f80;
+  --guide-skill-copy: #c4cdd3;
+  --guide-skill-index-hover: #eceff0;
+  --guide-provider-copy: #cbd9e1;
+  --guide-provider-detail-copy: #b7c7d1;
+  --guide-provider-rule: #ffffff2b;
+  --guide-effort-surface: #18364a;
+  --guide-effort-copy: #aebfc9;
+  --guide-effort-active: #e9ecee;
+  --guide-effort-active-copy: #eeedf6;
+  --guide-builder-surface: #132b3b;
+  --guide-builder-rule: #ffffff30;
+  --guide-builder-action-copy: #d5dde2;
+  --guide-builder-copy: #a9bcc8;
+  --guide-builder-border: #344c5d;
+  --guide-builder-live-glow: #80c69a20;
+  --guide-builder-code: #bed0dc;
+  --guide-builder-grid: #ffffff05;
+  --guide-verify-rule: #ffffff1f;
+  --guide-verify-copy: #bfccd4;
+  --guide-verify-code: #0f2230;
+  --guide-verify-code-border: #2a4150;
+  --guide-accent-rule: #ffffff42;
+  --guide-accent-note: #6c6898;
+  --guide-accent-copy: #f1f0f7;
+  --guide-install-rule: #ffffff2d;
+  --guide-install-copy: #b9c8d1;
+  --guide-control-border: #ffffff50;
+  --guide-exercise-copy: #afbec7;
+  --guide-prompt-surface: #19364a;
+  --guide-prompt-enhanced: #596f9a;
+  --guide-prompt-rule: #ffffff32;
+  --guide-prompt-enhanced-copy: #e5e3ef;
+
   /* Breakpoints */
   --bp-sm: 560px;
   --bp-md: 800px;