Apply final-review fixes: correct !important record, document styling convention, retire dead max-* artefacts, close anchors test gap

Fixes the four Important findings from the final whole-branch review:

- .nav-github's !important is load-bearing (specificity, not layering);
  documented why. .footer-brand's !important was inert; dropped it and
  corrected the comment that had cited a false precedent. Corrected the
  Task 7/12 entries in deferred-findings.md to match.
- Added a "Styling conventions" section to README.md recording the
  utilities-vs-scoped-CSS rule the branch actually followed.
- Removed the dead --breakpoint-xs token, corrected Navbar's comment that
  claimed its media query was "mirrored with max-md: semantics" (the
  opposite is true), and noted in the plan that the max-* variant approach
  was rejected in favour of raw @media blocks.
- extract.mjs now captures target/rel on anchors so the "target and label"
  test name matches what it checks.

Also fixes a stale baseline line-range comment in index.astro (1298-1324 ->
1298-1325).

11/11 parity tests pass, astro build is clean, astro check reports 0
errors/warnings. Verified in Chrome that .footer-brand's computed color is
unchanged (rgb(226, 232, 240)) with and without the !important.

Author: muhammetsafak

README.md

@@ -9,6 +9,19 @@ npm install
 npm run dev
 ```
 
+## Styling conventions
+
+- Use Tailwind utilities for simple layout and spacing on a component's outer
+  elements.
+- Write a scoped `<style>` rule for anything with more than about four
+  declarations, or that deserves a name worth reading.
+- Rules shared across multiple files go in `src/styles/global.css`, under
+  `@layer components`.
+- Never set the same property both ways on the same element. Astro's scoped
+  styles are unlayered, so they beat both `@layer base` and Tailwind
+  utilities — a utility and a scoped rule targeting the same property do not
+  resolve by specificity the way you'd expect; pick one per property.
+
 ## Test
 
 ```sh

docs/superpowers/plans/2026-08-23-astro-migration.md

@@ -79,6 +79,8 @@ For each component task the procedure is mechanical and identical:
 2. For each declaration, write the equivalent Tailwind utility on the element. Where no utility exists, use an arbitrary value (`bg-[rgba(10,14,23,0.85)]`, `w-[44px]`).
 3. The original stylesheet is **desktop-first**: the unprefixed rule is the desktop one and `@media (max-width: 768px)` / `@media (max-width: 480px)` blocks override it downward. **Mirror that structure exactly using Tailwind v4's `max-*` variants** — the desktop declaration stays unprefixed and the override becomes `max-md:` or `max-xs:`. Do **not** invert the stylesheet into mobile-first; inverting is the single most likely defect in this migration and buys nothing here.
 
+   *(Note, added during implementation: this `max-*` variant approach was rejected. All eight responsive overrides in the branch use raw `@media` blocks instead, because they match the baseline's inclusive `<=` boundaries exactly — see the next paragraph, and the comments in `Hero.astro` and `Navbar.astro`.)*
+
    ```
    /* baseline */                          /* Tailwind */
    .stats-grid { grid-template-columns: repeat(3, 1fr) }   grid-cols-3
@@ -88,6 +90,8 @@ For each component task the procedure is mechanical and identical:
    ```
 
    `max-md` is `< 48rem` and `max-xs` is `< 30rem`, against the baseline's `<= 768px` and `<= 480px`. The two differ only at exactly 768.00 and 480.00 CSS pixels. That is accepted.
+
+   *(Note, added during implementation: this off-by-one-pixel difference is not actually present in the branch — every responsive override was implemented as a raw `@media` block, not a `max-*` variant, precisely to hit the baseline's boundary exactly.)*
 4. Do not invent, round, or "improve" any value. Copy pixel and colour values exactly.
 
 Two things Task 7 discovered the hard way, which every later component task inherits:
@@ -1173,6 +1177,8 @@ Markup: `tests/fixtures/baseline.html:844-864`. CSS: `tests/fixtures/baseline.ht
 
 Keep the baseline's desktop-first structure: the horizontal nav stays unprefixed and the drawer override becomes `max-md:`. Do not invert to mobile-first.
 
+*(Note, added during implementation: the drawer override was implemented as a raw `@media (max-width: 768px)` block, not `max-md:`, because `max-md:` excludes exactly 768px while the baseline's boundary is inclusive — see the comment in `Navbar.astro`.)*
+
 - [ ] **Step 2: Write `src/components/Navbar.astro`**
 
 ```astro

src/components/Footer.astro

@@ -51,15 +51,13 @@ const social = [
     gap: 1.5rem;
   }
 
-  /* .footer-brand, baseline.html:677-681. Kept `!important` as a faithful
-     transcription, matching Navbar's .nav-github precedent (baseline.html:
-     172-182) — it is redundant now that Astro's unlayered scoped styles
-     already beat `@layer base`'s `a { color }`, but Task 6/7 chose to keep
-     it there rather than drop it, and this component follows that choice
-     for consistency rather than re-litigating it per component. */
+  /* .footer-brand, baseline.html:677-681. Unlayered scoped rule beats
+     global.css's @layer base `a { color }`, so no !important needed here —
+     unlike .nav-github (Navbar.astro), which competes with a
+     higher-specificity sibling rule (.nav-links a) and does need it. */
   .footer-brand {
     font-weight: 700;
-    color: var(--color-text-primary) !important;
+    color: var(--color-text-primary);
     font-size: 1.05rem;
   }
 

src/components/Navbar.astro

@@ -74,7 +74,11 @@ import { Icon } from 'astro-icon/components';
     color: var(--color-text-primary);
   }
 
-  /* .nav-github, baseline.html:172-182 */
+  /* .nav-github, baseline.html:172-182. !important is required here:
+     .nav-links a (0,4,1) outranks .nav-github (0,2,0), both unlayered, so
+     specificity — not layering — decides. Verified: removing it renders
+     #94a3b8 (--color-text-secondary) instead of #e2e8f0
+     (--color-text-primary). Do not drop it. */
   .nav-github {
     display: inline-flex;
     align-items: center;
@@ -107,8 +111,11 @@ import { Icon } from 'astro-icon/components';
     cursor: pointer;
   }
 
-  /* Desktop-first: the baseline's @media (max-width: 768px) override,
-     baseline.html:705-726, mirrored with max-md: semantics. */
+  /* Desktop-first: baseline's @media (max-width: 768px) override,
+     baseline.html:705-726. A real media query is used, not Tailwind's
+     max-md: variant: max-md: compiles to (width < 768px), which excludes
+     exactly 768px, while the baseline's media query includes it. Matches
+     the reasoning in Hero.astro. */
   @media (max-width: 768px) {
     .nav-links {
       display: none;

src/pages/index.astro

@@ -58,7 +58,7 @@ import { libraries } from '../data/libraries';
     </div>
   </section>
 
-  <!-- Install, baseline.html:1298-1324 -->
+  <!-- Install, baseline.html:1298-1325 -->
   <Install />
 
   <!-- Footer, baseline.html:1327-1343 -->

src/styles/global.css

@@ -23,8 +23,6 @@
   --radius-card: 12px;
   --radius-chip: 8px;
 
-  --breakpoint-xs: 30rem;
-
   --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono Variable', 'Fira Code', ui-monospace, monospace;
 }

tests/extract.mjs

@@ -43,6 +43,8 @@ export function extractSnapshot(html) {
     anchors: body.querySelectorAll('a').map((a) => ({
       href: normPath(a.getAttribute('href')),
       text: norm(a.text),
+      target: a.getAttribute('target') ?? null,
+      rel: a.getAttribute('rel') ?? null,
     })),
     images: body.querySelectorAll('img').map((img) => ({
       src: normPath(img.getAttribute('src')),