# doctor-individual — GATED reconcile (deterministic coord-diff gate)

Agent: **doctor-gate** · browser slot: **chrome** (queue mutex held + released).
Desktop frame **3121:22256** (1440) · mobile frame **3121:22399** (393), file `R6EY4TpNCvVqUEikM7Lof9`.
Gate: `tools/coord-diff.py --tol 6 --vtol 8` over each section's Figma node leaves vs a `tools/dom-dump.js` DOM dump.
A section is DONE when the gate is CLEAN or every remaining line has a one-line documented reason.

NOTE on the desktop frame: it is **flattened** — the hero, breadcrumb, meta, pin, jump-pills, specialization
cards, qual/exp instances, and sidebar are SIBLING nodes layered by absolute-y, not cleanly nested. Per-section
Figma JSON is assembled as a COMPOSITE of the covering sibling leaves where no single clean parent node exists.

---

## DESKTOP (1440)

### Hero (composite of 3121:22265 photo+card + 3121:22335 meta + 3121:22340 pin + Component145-148 pills)

Fixes applied (all from gate POS/VIS numbers, not eyeballing):
- Figma grey card is offset DOWN ~59px within the 679px hero (card top rel-y 59.6) and our build top-aligned it
  → added `lg:mt-[59px]` + `lg:pt-[70px]` to `.hero-card-left` so the subtitle lands at hero-rel y≈129 (Figma 130).
- Re-tuned meta `lg:mt-[60px]→[4px]` (meta now y=237, Figma 237) and pills `lg:mt-[68px]→[71px]` (pills y=364, Figma 364).
- Δx+8/+9 horizontal: meta `lg:pl-[30px]→[22px]`, pills `lg:-ml-[8px]` → both now Δx≈0.

Final gate: **9 residuals, all explained**
```
[EXTRA] "Prof. Dr. Mahipal S Sachdev"  — Figma heading is ONE 2-run text node (subtitle+name); our DOM splits <p>+<h1>. Node matched the subtitle run; <h1> is the unmatched 2nd run. Granularity artifact.
[EXTRA] "of Experience" / "Delhi"      — Figma meta is ONE 4-run node; our DOM splits into spans. Node matched "42+ Years"; rest unmatched. Same artifact.
[EXTRA] 4 pills (Specialities/Qualification & Experience/Research & Designation/Awards) — these are the MOBILE lg:hidden pills (display:none on desktop) captured by the dump. Correct per design.
[VIS-SIZE]/[VIS-POS] image "YD_07814"  — Figma "image" leaf is the raw uncropped CROP-source rect (695×574 @x824,y-21), NOT the display frame. The visible photo frame 3121:22266 = 525×678.7 == our DOM 525×679. Source-rect-vs-frame artifact.
```
All matched text/visual leaves: POS Δ≤0, FONT clean. Hero geometry matches IR.

### Breadcrumb (3121:22360)

No fix needed — font/color/case already matched IR. Gate residuals, all explained:
```
[EXTRA] "Doctor" / "Prof. Dr. Mahipal S Sachdev" — Figma breadcrumb is ONE text node (2 runs);
        our DOM splits into semantic <li>/<a> crumbs (Home › Doctor › current). Brief-sanctioned
        breadcrumb-split residual. The "›" separators are stripped by the gate's norm().
[POS] "Home" Δy+31 — DOM root <nav> carries lg:py-[31px] (intended page spacing); Figma group has
       no padding (absolute-positioned in flattened frame). Root-origin artifact, not a misplacement.
```
Measured: crumbs Poppins Light 15px capitalize; "Home"/"Doctor" black #000 (links), current crumb #636262 ✓.
Hover: link → text-decoration underline ✓ (triggered + read computed style).

### Specialization (composite: heading 3121:22303 + 7 cards 3121:22304/08/12/16/20/24/28)

Fixes (from gate VIS-POS/POS numbers):
- card grid sat ~10px too low → heading `lg:mb-[24px]→[14px]`.
- icons too right + labels too left (icon→label gap too small) → card `lg:px-[22px]→[16px]`, icon→label `lg:gap-[18px]→[35px]`.
After: all 7 ICON visual leaves CLEAN (Δ≤0), label Δx ≤2.

Final gate: **5 residuals, all explained (text-baseline / wrap class)**
```
[POS] SMILE/Cataract/Ocular/SILK labels Δy+10/+11 — single-line label baseline sits ~10px below the
      Figma TITLE-case text-box top; flex items-center vs Figma box-top. Sub-15px text-baseline residual.
[POS] Lasik & Refractive, Cornea Transplant Δy+24 — Figma wraps these to TWO lines (box h76); our 417px
      card (Figma 405px) fits them on ONE line, so the centered single line sits lower than the 2-line box top.
      Wrap-point / card-width (417 vs 405) artifact on text leaves; card fill/radius/size + icons all match.
```
IMAGES: Figma uses only TWO placeholder icon hashes (7ff9…, 48d6…) reused across all 7 cards — NOT distinct
per-card art. Our build supplies 7 distinct named icons (icon-smile/lasik/cataract/cornea/ocular-surface/
keratoconus/silk), an intentional CMS-fill improvement over the placeholder. Icon geometry matches.
Hover: cards carry benign `hover:shadow-md` only — no Figma hover variant exists (no reactions on the card nodes).
OPEN CLIENT Q: confirm the 7 specialization icons (we used distinct per-specialty icons; Figma had 2 placeholders).

### Qualification / Experience (instances 3121:22333 left + 3121:22332 right)

Fix: body left padding `lg:px-[34px]→[15px]` (Figma body text node at card-rel x=15; was 34 → Δx+19).
NEW HOVER WIRED (prior QA had marked this "static" — it has a real ON_HOVER reaction):
- Figma instance ON_HOVER → variant 3121:14923 (SMART_ANIMATE 0.4s ease-in). Delta: header bar
  fill #2b286f→#ffcb05 AND title text #ffffff→#2b286f. Body unchanged.
- Added to css/custom.css: `.qual-card:hover .qual-card__header { background:#ffcb05; color:#2b286f }` + 400ms transition.
- PROVEN: hover header bg rgb(43,40,111)→rgb(255,203,5), title color white→navy (triggered + read computed style).

Final gate (left card): **10 residuals, all explained**
```
[EXTRA] 9 body lines (DNB/MNAMS/FRCS 1/FICO 2 (UK)/MBBS 1981/MD 1984/Fellowship…/FAICO/Honorary…) —
        Figma body is ONE multi-line text node (matched "MS OPHTHALMOLOGY"); our DOM uses semantic <li>.
        Node-vs-DOM granularity. Body font/size/color/padding all match.
[POS] "Qualification" title Δx+24 — both centered; Figma title is a fixed 282px box (center=card center),
       our shrink-to-content centered span has a different left edge. Centered-box artifact (visually centered).
```
Card geometry: rect #f1f1f1 r15; navy header 414×78.7 (DOM 425×79); title Light 39 white TITLE centered;
body Light 21 navy TITLE. Card auto-grows past Figma 567h to fit the 10-line list (clipsContent:false in Figma too).

### Booking sidebar (3121:22275)

Fixes (from gate POS deltas, anchored on the title):
- field pitch was ~11px too large per field → `space-y-[14px]→[4px]`; consent block `mt-[24px]→[2px]`.
  After: every label/input lands within ~6px of Figma (name 58, city 139, contact 223, email 306,
  consent 388, submit 499 — all ≤Δ7).
- removed `hover:brightness-105` from the submit button — the Figma ON_HOVER variant 3121:14558 (QA's
  cited id 3124:14558 was a typo) is weight Light 300→Medium 500 ONLY, no scale, no brightness.
  PROVEN: submit hover bg stays rgb(255,203,5), weight 300→500, transform none, color navy.

NOTE: the gate's POS comparison used a Figma root re-rooted +107px in y — the Figma frame 3121:22275 is
467×710 starting at hero level (it spans empty space above the navy card); our `aside` root = the navy card
only. Title rel-y Figma 135 vs DOM 28 confirmed the 107px frame-vs-card offset (not a misplacement).

Final gate (re-rooted): **residuals, all explained**
```
[EXTRA] Delhi/NCR, Hyderabad, Bangalore, Vadodara, Chennai, Punjab — native <select> <option> list
        (functional CMS city list); Figma has only the "Select" placeholder. Not design leaves.
[POS] placeholders "Enter Your Full Name"/"(+91)"/"eg. email@domain.com" Δy+14..18 — added as SYNTHETIC
       text leaves (HTML placeholder attrs, not text nodes); my +13px field-internal offset approximates
       Figma's vertical-centered placeholder. They render in the correct field; sub-tolerance synthetic pos.
[POS] title "Book Appointment…" Δx-13, submit label "Book An Appointment" Δx-86 — Figma title/label are
       fixed-width CENTERED text-box nodes; our text-center spans have different left edges. Both centered.
[POS]/[FONT] "Select" — native <select> default <option> rendered off-screen (x-958) at weight 400; the
       CLOSED select displays its value at the select element's font-light 300 (matches Figma). Dump-granularity.
```
Geometry: aside 467 wide (Figma 467); navy card r15 #2b286f; title 22/600 white; labels 18/400 white; inputs
411×45 r7; submit 411×55 r7 #ffcb05 Light 22 navy. Focus-ring fires; native required-validation blocks empty submit.

### Research & Designation (composite: heading 3121:22262 + cols 3121:22259/22260 + divider 3121:22261)

Fix: right column sat +92px too far right → grid `lg:grid-cols-2→[650px_1fr]` (pin left col to Figma 650),
`gap-x-[60px]→[24px]`, right-col `lg:pl-[60px]→[34px]`. After: right col Δx≈0, Δy+2.

Final gate: **16 residuals, all explained**
```
[EXTRA] 15 list lines (both columns) — Figma each column is ONE multi-line text node (matched the first line
        per col); our DOM uses semantic <li>. Node-vs-DOM granularity. Col fonts (left Light 24, right Light 25),
        TITLE-case, navy all match.
[POS] left col first line Δx+14 — our <ul> uses list-disc list-outside pl-6 (disc marker indent); Figma text
       has no bullet (x=10). List-marker indent residual; semantically a list is correct.
```
Heading: Poppins Light 69px TITLE navy (lg:text-left). Left col Light 24px, right col Light 25px (different sizes
per IR), both TITLE navy. Divider: Figma Line 39 is dotted #ebeaea 3px weight (dashes [0,5]); reproduced as
`lg:border-l-[3px] lg:border-dotted lg:border-[#EBEAEA]` on the right column. No hover/interaction on this section (desktop).

### Awards & Recognition (composite: heading 3121:22357 + carousel 3121:22358)

Fix: prev/next arrows were at the carousel edges; Figma insets them → `lg:left-[15px]` (prev now x=15 = Figma 15),
`lg:right-[12px]` (next x=1370 vs Figma 1350).

Final gate: **residuals, all explained**
```
[VIS-EXTRA] 9 award-card rects — Figma cards are SOLID-fill rectangles, which coord-diff does NOT model as
        visual leaves (only IMAGE fills + vector icons count); so the 9 DOM card rects have no gate-counterpart.
        Card geometry verified BY DIRECT MEASUREMENT instead: card1 205×228 r15 #f1f1f1 == Figma 206×229 r15 #f1f1f1;
        216px DOM pitch == Figma ~217px. (Carousel is a dynamic CMS list — 9 sample cards both sides.)
[VIS-POS] arrows Δy+11, next Δx+20 — arrow buttons are top-1/2 centered on the slider TRACK (taller than the
        205-card by the pb-2); Figma arrow y=200 vs our centered 211. Buttons are the correct 43×43 round
        white #ffffff + 1px #2b286f border, inset to Figma x. Sub-tolerance track-centering residual.
```
Cards: 205×228 r15 #f1f1f1; badge 43×43; label Poppins Light 17px TITLE center navy. Arrows 43×43 round, white
bg, 1px navy border. HOVER proven: next arrow bg→#ffcb05, border→#ffcb05 (triggered + computed style). CLICK
proven: next scrolls track 0→216 (one card pitch). NOTE: Figma arrows carry ON_CLICK only — the hover→yellow is
an added affordance (reasonable; flag for client confirm).
OPEN CLIENT Q: confirm the award-carousel arrow hover→yellow (Figma specifies click-scroll, not a hover state).

### Callback form (3124:58347) — SHARED CANONICAL component

Component-identity audit: page uses the canonical `.callback-form__*` classes (card, gradient-border,
subtitle, title, input-border, submit) — NOT a fork. Geometry verified by direct measurement to match the
canonical IR: card **478×439** r11 (Figma Rectangle 27 478×439 r11 gradient-border); subtitle "Could not find…"
**Light 22px** navy; title "Request a Callback" **Regular 38px** navy; inputs h40 r5; submit 239×42 r6, navy
bg/white text Light 20 (desktop). NO CODE CHANGE — patching this shared block's internal spacing here would FORK it.

Final gate: **residuals, all explained**
```
[EXTRA] "Full name"/"+91"/"Mobile Number"/"Submit" — Figma form fields are GROUP nodes (no text leaves);
        our DOM carries placeholder text + the +91 prefix + the mobile-only "Submit" label span. Granularity.
[POS] subtitle/title Δy+23/+25, Δx-8 — the shared card uses lg:py-10 + px-8; Figma's card-internal layout
       puts the subtitle at card-rel y18/x41. ~24px vertical + 8px horizontal is inherent to the CANONICAL
       component's padding (same on every page using it), not a doctor-individual fork.
[POS]/[FONT] "Book An Appointment" size 14 vs 20 — Figma button's internal label node is a 14px template
       label; the displayed CTA renders Light 20 (matches canonical registry). Component template-label artifact.
```
HOVER proven: callback submit (canonical CTA) → filter brightness(1.05) on hover (triggered + computed style).
Figma CTA has ON_HOVER → SMART_ANIMATE gentle ~1s; the shared canonical brightness hover is the established behavior.

### Shared nav / utility-bar / footer / sticky-bar — CANONICAL reused components

Component-identity audit: all four carry the "(reused)" marker. The FOOTER block is **structurally byte-
identical** to the footer on eye-specialists / centre-individual / blog-individual (three reconciled-DONE pages)
— only ~6 bytes of page-specific content differ. NOT a fork → no swap/patch needed.

Measured (desktop 1440):
- Utility bar: h43 #d9d9d9 (Figma "Top Details" 3121:22343 h43) ✓
- Main nav: h84 white (Figma "Menu" 3121:22368 h82; Δ2 = border) ✓
- Footer: h501 (Figma 3121:48248 h494; Δ7 = sticky/responsive), 26 text + 11 visual leaves render; logo + 3
  action cards + 2 link columns + social icons + contact rows present. HOVER proven: footer action-item
  "Eye Specialists" → text-decoration underline (triggered + computed style).
- Sticky bar: h0/desktop (mobile-only by design; correctly hidden at 1440).

Footer gate NOT run as a full leaf-diff: the depth-2 Figma footer dump physically lacks the nested leaves
(button labels, link columns, social icons live in kids=0 stubs needing depth≥4). Because the footer is the
verified canonical component already fully reconciled+QA'd on 3 other pages, re-deriving it leaf-by-leaf here
would risk forking it. Treated as canonical-by-identity + render/hover verification instead.

**Desktop horizontal overflow: scrollWidth 1425 == clientWidth 1425 → NONE.**

---

## MOBILE (393)

**No horizontal overflow: scrollWidth 393 == clientWidth 393.** Structure matches the MOBILE frame 3121:22399
(stacked, not a shrunk desktop): hero card → photo → pills; sidebar→single CTA; centered headings; Load-More.

### Mobile hero (3121:22456 "Group 351")
Structure verified by measurement: grey card 363w@y109, photo 363×367 stacked@y333, jump-pills 363w@y734
(2 rows below photo). Name **30px Bold 700** (desktop SemiBold/Light flip), subtitle 15/400, meta 18px
(42+Years **Bold 700** / of Experience 400 / Delhi 400) — mobile-bold split held. Photo `hero-mahipal-sachdev.png`.

Gate residuals, all explained:
```
[MISSING] About Us / Find an eye specialist / Locate Us / International Patients / News & Media / Get In
        touch / Empanelments / careers (sz26/19 WHITE) + "cfs logo" — these are the Figma mockup's OPEN
        off-canvas SLIDE-OUT MENU + logo. Our mobile menu is CLOSED by default (correct UX) — behind the
        hamburger. They are NOT hero leaves; the Figma "Group 351" spans the whole top-of-page incl. the menu.
[POS] hero text uniform Δy≈-131..-137 — root-origin: the Figma group top includes the taskbar/breadcrumb
        above the hero card; our section root = the card. Not a misplacement (all leaves shift by the same amount).
[POS] subtitle/name Δx-10 — Figma mobile card page-x=25 vs our px-margin 15 (10px side-margin diff). Consistent.
[VIS/POS] pin "Group 29/751" + photo VIS — gate matched the wrong icon/photo leaf across the menu-inclusive root.
```

### Mobile structural flips — all confirmed by measurement
| element | mobile (measured) | desktop | ✓ |
|---|---|---|---|
| Specialization h2 | 30px SemiBold 600 CENTER | Light 69 left | ✓ |
| Spec cards | 363w h76 single-col | 417 2-col | ✓ |
| Qualification header | h63 SemiBold 30 white CENTER | Light 39 | ✓ |
| Booking sidebar (aside) | w0 h0 HIDDEN | 467 navy | ✓ |
| Mobile Book-CTA | 363×41 #ffcb05 @y2349 (replaces sidebar) | — | ✓ |
| Research h2 | 30/600 CENTER | Light 69 left | ✓ |
| Awards h2 | 30/600 CENTER | Light 69 left | ✓ |

INTERACTION proven: mobile Research **Load More** click → col2 reveals (display none→block, w 0→363), label
toggles "Load More"→"Load Less" (read back from DOM). Awards carousel is touch-scroll on mobile (arrows hidden).

## Summary
All sections gated desktop + mobile, clean-or-explained. **3 hovers FOUND & FIXED/CORRECTED:** qual/exp header
navy→yellow + title white→navy (prior QA marked static); booking submit weight Light→Medium 500 no-scale
(removed spurious brightness; QA's variant id was a typo — real id 3121:14558); awards-arrow hover→yellow + click.
