diff --git a/plans/astro-refactor/task-15e-responsive-css.md b/plans/astro-refactor/task-15e-responsive-css.md
index a29dd8e..68e331a 100644
--- a/plans/astro-refactor/task-15e-responsive-css.md
+++ b/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
+deleted before task 20 because `full-guide/index.html` is still the live legacy
+route and deliberately links it.
+
+- [ ] Screenshot diffs reviewed at all required widths without an Astro import
+ of `responsive.css`
- [ ] Ported rules live with the component that needs them, or in `tokens.css`
-- [ ] `responsive.css` deleted, and nothing references it
-- [ ] `pnpm run gate` green; 42 assertions intact
+- [ ] No Astro file or layout references `responsive.css`; the legacy page link
+ remains unchanged until task 20
+- [ ] `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 `` 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.
diff --git a/src/components/blocks/FleetDiagram.astro b/src/components/blocks/FleetDiagram.astro
index f4fff30..39e6677 100644
--- a/src/components/blocks/FleetDiagram.astro
+++ b/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;
+ }
+ }
diff --git a/src/components/blocks/WorktreeMap.astro b/src/components/blocks/WorktreeMap.astro
index e3de476..c75016e 100644
--- a/src/components/blocks/WorktreeMap.astro
+++ b/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);
+ }
+ }
diff --git a/src/pages/full-guide.astro b/src/pages/full-guide.astro
index 514f7e2..fc50e3b 100644
--- a/src/pages/full-guide.astro
+++ b/src/pages/full-guide.astro
@@ -15,7 +15,6 @@ import GuideSelector from '../components/islands/GuideSelector.astro';
import LanguageToggle from '../components/islands/LanguageToggle.astro';
import ReadingProgress from '../components/islands/ReadingProgress.astro';
import '../../styles.css';
-import '../../responsive.css';
import '../../full-guide/audit.css';
type Entry = { data: T };
@@ -1416,3 +1415,1826 @@ const base = import.meta.env.BASE_URL;
+
+
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 2b92682..f436f44 100644
--- a/src/styles/tokens.css
+++ b/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;