fix: port full-guide responsive rules

Move the Astro-facing responsive layer out of responsive.css, retaining the exact legacy stylesheet for full-guide/index.html until task 20. Scope worktree and fleet overrides to their components so they can win against component base styles. Do not delete responsive.css: the legacy page still loads it. Generated screenshot artifacts are deliberately untracked.
2026-09-06 03:44:42 +00:00
parent 0a12e9cbcc
commit 91e8d380d0
5 changed files with 2024 additions and 4 deletions
@@ -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 `<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.

@@ -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>
@@ -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>
@@ -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;