/* ============================================================================ Plants Whisperer — CUSTOMER · R4.3 RECONCILIATION M3 ---------------------------------------------------------------------------- The Customer is NOT a retired-identity migration. It already ships the R2B / Greenfield presentation layer (assets/storefront-r2.css, checkout-r2.css), which is the same brand system: Shade / Mist / Sun, white surfaces, no shadows, one sharp corner. This file reconciles the places where R4.3 explicitly supersedes a Greenfield choice — and nothing else. AUTHORITY, in the order §3 sets out 1 previews/r4-owner-final/FINAL-DESIGN-LOCK.md 2 previews/r5-spec-freeze/* (R5.3b active spec) 3 previews/owner-gap-closure/* 4 previews/r4-owner-final/final.css (locked source) 5 the current tracked implementation Greenfield (previews/greenfield-final/FREEZE.md, 2026-09-18) is implementation HISTORY. FINAL-DESIGN-LOCK (2026-09-20) states that R4 exploration is CLOSED and that any visual deviation needs owner approval, so where the two differ, R4.3 governs. WHAT THIS FILE DOES NOT DO No rewrite. No preview DOM. No new Sun moment. No filter redesign. No Guest Checkout of any kind — the login gate, create_order_v2, the order RLS and Clerk are untouched. No UX-Radar concept is introduced (§7). ========================================================================== */ /* ════════════════════════════════════════════════════════════════════════════ 1 · THE CORNER RULE — the one unequivocal supersession ---------------------------------------------------------------------------- Greenfield : "one sharp corner on every rectangle (the leaf tip, bottom-start)" — implemented as `border-end-start-radius: 4px` (--r2-tip). R4.3 : FINAL-DESIGN-LOCK line 8 — "corner rule 3 rounded + 1 square at top-inline-start"; 01-DESIGN-TOKENS §3.2, headed **binding**: "Every plate, image, button, input, option, chip, card, row, tile and container carries three rounded corners and one square corner … border-start-start-radius: 0 … always the top-inline-start corner, so it reads identically in RTL and LTR. This is structure, not mirroring: it is never flipped by direction, and the rule is never applied by physical corner names." §3.3 lists the exceptions (semantic circles, timeline markers, channel children, icon-internal radii, the glass control layer) and they are kept. Both forms are already logical properties, so the reconciliation is which corner and what value — not a direction fix. `--r2-tip` is re-pointed to a rounded value so the OLD corner simply rejoins the radius, and the square corner moves to the start-start corner where the lock puts it. ══════════════════════════════════════════════════════════════════════════ */ html.c-r4 body { /* the tip is no longer a distinctive corner; it takes the small radius so nothing else in either R2 sheet has to be touched to un-declare it */ --r2-tip: var(--c-r-s); } html.c-r4 :is( .card, .cat-card, .card-media, .card-img, .cat-link, .badge-seal, .hero-visual, .hero-band, .hero-visual-meta, .sheet, .sheet-hero, .sheet-close, .search-box, .search-results, .search-result-thumb, .cart-thumb, .cart-sheet .cart-thumb, .btn, .btn-primary, .btn-ghost, .cta, .add-btn, .qty, .qty button, .chip, .pill, .tag, .care-card, .care-grid, .colophon, .p5-story, .p5-next, .disco-none-btn, .grid-state-btn, .pd-media, .pd-gallery img, .pd-thumb, .surf, .li .im, .promo input, .promo button, .fulfil-row, .field, .field input, .field textarea, .field select, input, textarea, select, .tabbar, .toast, .banner, .account-fav-grid > *, .acct-row, .policy-card, .cat-avail, .cat-tier ) { border-start-start-radius: 0; } /* the plate/control radii the lock names (01-DESIGN-TOKENS §3.1, OD-06: "the locked scale is source-backed and is not an open choice") */ html.c-r4 body { --c-r-s: 10px; --c-r-m: 12px; --c-r-l: 16px; } /* R2B shipped 16 / 12 / 8; 16 and 12 already match, 8 does not. */ html.c-r4 body { --r2-rs: var(--c-r-s); } /* ════════════════════════════════════════════════════════════════════════════ 2 · TYPOGRAPHY — the locked Customer roles only ---------------------------------------------------------------------------- 02-TYPOGRAPHY §1-3, R5.3b. Three INTERFACE families and three roles: Readex Pro all UI text, both languages Noto Naskh Arabic the Arabic plant title on the Home hero and the Product detail heading ONLY Newsreader italic Latin botanical names anywhere, and the English plant title on Home hero / PDP Weights: the Customer body is **300** — NOT the 400 the operational surfaces use. 02-TYPOGRAPHY §3 measures 400 on `.ops` only, and M3 must not infer an operational role onto the Customer merely because M1/M2 use it. 500 carries headings, names, buttons and prices. 600 is the Noto Naskh specimen title; per **OD-44** the interface target is 500, and the 600 rendering in the locked build "contradicts an explicit locked instruction". The brand wordmark is NOT part of this: "همس النبات" stays Alexandria and "Plants Whisperer" stays Bricolage (FINAL-BRAND-FREEZE §4), and it already ships as SVG outlines — assets/brand/pw-wordmark.svg — so no brand face is loaded here either. ══════════════════════════════════════════════════════════════════════════ */ html.c-r4 body { /* Readex Pro is an Arabic + Latin face, so it leads in BOTH directions and .claude/rules/arabic-rtl.md's mono trap cannot occur: the Arabic-capable face is never behind a Latin-only one. The loaded Plex Arabic stays behind it, so a failed font request degrades to a real Arabic face. */ --r2-font: 'Readex Pro', 'IBM Plex Sans Arabic', system-ui, sans-serif; --c-spec-ar: 'Noto Naskh Arabic', serif; --c-spec-en: Newsreader, Georgia, serif; } /* ── one family, the locked roles, at a specificity the two R2 sheets cannot outrank. Between them they declare 86 weights at 600/700 — many on selectors an element-level rule cannot reach — so the surface carries the role and the 500 list is restated at the same level. */ html.c-r4 body.p5 *, html.c-r4 body:not(.p5) * { font-family: var(--r2-font); font-weight: 300; } html.c-r4 body :is(b, strong, h1, h2, h3, h4, th, .name-ar, .name-en, .cat-price, .cat-tier, .pd-name, .pd-price, .hero-eyebrow, .btn, .btn-primary, .btn-ghost, .cta, .add-btn, .tab.active span, .sheet-price, .cart-total, .sum-total, .total, .price, .amount, .acct-name, .policy-card h3, .care-card h3, .search-result-name, .grid-state-btn, .disco-none-btn) { font-weight: 500; } /* ── the two specimen roles, and only where the lock puts them ───────────── 02-TYPOGRAPHY §1: Noto Naskh Arabic is "the Arabic plant title on the customer Home hero and the Product detail heading ONLY", excluded from "any label, any dense row, any button". MEASURED, AND IT CHANGES WHERE THIS APPLIES: the tracked Home hero carries NO plant title. Its h1 is the brand tagline ("نهمس لكل نبتة نادرة / قبل ما توصلك", index.html line 291) and the featured specimen is drawn separately into #heroBand. The locked R4 hero puts the plant's own name in that slot; the shipped R2B hero puts a marketing headline there. So the specimen family goes on the PDP heading, where the lock's condition actually holds, and NOT on the tagline. Dressing a brand headline in a specimen serif would be inventing a role the lock does not grant — and the hero composition itself is a Greenfield decision R4.3 never names as superseded, so it is recorded, not redesigned. */ html.c-r4[lang="ar"] .pd-name { font-family: var(--c-spec-ar); font-weight: 600; line-height: 1.35; } html.c-r4[lang="en"] .pd-name { font-family: var(--c-spec-en); font-style: italic; font-weight: 500; letter-spacing: -0.01em; } /* Latin botanical names anywhere they appear */ html.c-r4 :is(.pd-latin, .search-result-latin, .fs-latin, .latin i, .card-latin) { font-family: var(--c-spec-en); font-style: italic; font-weight: 400; } /* ── the card caption: card.css declares its own family, weight and sizes at specificities the surface-level role cannot reach, and two of its sizes sit below the smallest size the lock demonstrates (9 px / 9.5 px against 10 px — 02-TYPOGRAPHY §4.5, whose withdrawn "11 px minimum" is NOT reintroduced). */ html.c-r4 .cat-caption :is(.name-ar, .name-en, .cat-price, .cat-tier, .cat-avail), html.c-r4 body.p5 .card .cat-caption > .name-ar, html.c-r4 body.p5 .card .cat-meta .cat-price, html.c-r4[dir='ltr'] body.p5 .card .cat-caption > .name-ar { font-family: var(--r2-font); /* OD-44: these two are declared 600 in storefront-r2.css at (0,4,1), which the surface-level role cannot reach. The locked interface weight is 500. */ font-weight: 500; } /* Two headings are declared 600 at specificities the surface-level role cannot reach — one of them doubled under html[lang='ar']. OD-44: the locked interface weight is 500, and 600 belongs to the Noto Naskh specimen title. */ html.c-r4 body.p5 .order-facts .order-fact h3, html.c-r4[lang='ar'] body.p5 .order-facts .order-fact h3, html.c-r4 body.p5 .disco-group h3 { font-weight: 500; } /* the rarity rail label is 9.5px — below the smallest size the lock shows */ html.c-r4 .ink-rarity-label { font-size: 10px; } /* The catalog's ink bar and rail still paint the retired ivory (#F0ECE2) as their on-ink text. pw-brand-tokens already carries the two locked roles for a Shade ground — --pw-text-on-shade (Mist) and its 72% secondary — so they are used rather than a fourth value invented. */ html.c-r4 :is(.cat-inkbar, .cat-inkbar-in, .ink-rail, .ink-genus-item) { color: var(--r2-mist, #EDEFEA); } html.c-r4 :is(.cat-inkbar-note, .ink-count, .ink-genus-item.is-active .ink-count, .ink-rarity-label) { color: rgba(237, 239, 234, 0.72); } /* the rarity seals are tone marks on the ink rail; ivory-at-50% measured 2.14:1 there. On this ground the locked roles are Mist and Mist at 72%. */ html.c-r4 :is(.ink-seal--common, .ink-seal--uncommon, .ink-seal--rare, .ink-seal--collector) .ink-seal-mark { color: var(--r2-mist, #EDEFEA); } html.c-r4 .ink-seal.is-active .ink-seal-mark { color: var(--r2-shade, #10312B); } /* The view toggle is a two-button segmented control whose buttons share a 1px divider — 34x34 each, touching, so neither can extend horizontally without taking the other's taps. The locked segmented control (.seg) makes the CONTAINER supply the room, and the gap then IS the divider: 10px lets each button extend ±5px and meet its neighbour at exactly zero, at 44x44, with the glyph untouched. */ html.c-r4 .cat-view { gap: 10px; } html.c-r4 .cat-view button + button { border-inline-start: 0; } html.c-r4 .cat-view button { position: relative; } html.c-r4 .cat-view button::after { content: ''; position: absolute; inset: -5px; } /* the colophon's links are 36px tall; the locked floor is 44 and a text link is not a glyph, so it reaches it by height rather than by extension. */ html.c-r4 body.p5 .colophon .foot-links a { min-height: 44px; } html.c-r4 .pw-cards .cat-sp, html.c-r4 .pw-cards:not(.is-list) .cat-sp, html.c-r4 .pw-cards.grid:not(.cat-grid):not(.is-list) .cat-sp { font-family: var(--r2-font); font-size: 10px; font-weight: 400; letter-spacing: normal; } /* Two warning-toned strings measured 4.04:1 against their own grounds — below AA. The locked attention token is #8A6A11 (01-DESIGN-TOKENS: --attention), which clears it; no new colour is invented. */ html.c-r4 .cat-caption .fulfill-chip, html.c-r4 body.p5 .card .cat-caption > .fulfill-chip, html.c-r4 body.p5 .cart-sheet .cart-info .fulfill-chip { color: var(--r2-ink, #0E1A17); } html.c-r4 body.p5 .card .cat-caption > .fulfill-chip::before { background: #8A6A11; } /* The PDP availability line sits on a MIST plate, where even the locked attention token only reaches 4.37:1 — the same ground OD-05 flags for placeholders. Inventing a darker amber is not available, so the locked division of labour applies instead: the TEXT takes the ink role and the marker keeps the tone. The sentence already names the state ("استلام فقط"), so nothing here is carried by colour alone. */ html.c-r4 body.p5 .pd-avail.is-exception { color: var(--r2-ink, #0E1A17); } html.c-r4 body.p5 .pd-avail.is-exception::before { background: #8A6A11; } /* The lock has three interface families and none of them is a monospace (02-TYPOGRAPHY §1). The archive reference on the PDP was still set in --archive-mono; it takes the UI role, which is also Arabic-capable and therefore safe under .claude/rules/arabic-rtl.md. */ html.c-r4 body.p5 .pd-fact-v.is-mono { font-family: var(--r2-font); } /* the skip link is focus-only, but it is real text on a real ground: it still carried the retired terracotta as its background. */ html.c-r4 .skip-link { background: var(--r2-shade, #10312B); color: var(--r2-white, #fff); min-height: 44px; display: inline-flex; align-items: center; } /* the header navigation is the Customer's own, not the operational rail; its links measured 44 × 36 and reach the floor by height, not by inflation. */ html.c-r4 :is(header.nav .links a, .nav .links a) { min-height: 44px; display: inline-flex; align-items: center; } /* ── Arabic joins: the interface is untracked ───────────────────────────── .claude/rules/arabic-rtl.md is a correctness layer, and the locked system carries exactly two letter-spacing values in total — both on the wordmark and the LTR specimen title. Several of these labels carry PLANT NAMES, which are user/archive data whose script is not the interface language, so an html[lang] guard would be the wrong hook for them. */ html.c-r4 body * { letter-spacing: normal; } html.c-r4[lang="en"] .pd-name { letter-spacing: -0.01em; } /* ════════════════════════════════════════════════════════════════════════════ 3 · FORMS — OD-05 B (owner-locked 2026-09-20, #69726E) 4.96:1 on white, 4.64:1 on the autofill tint. Declared at scope specificity because several component rules set the placeholder lower down. Entered text, labels, field geometry and focus geometry are NOT touched. ══════════════════════════════════════════════════════════════════════════ */ html.c-r4 body :is(input, textarea)::placeholder, html.c-r4 .search-box input::placeholder, html.c-r4 .disco-search input::placeholder, html.c-r4 .cart-sheet .promo-row input::placeholder { color: #69726E; /* storefront.css:211 also sets opacity .6, which composites the locked colour away — measured 4.3:1 instead of 4.96:1. */ opacity: 1; } /* ════════════════════════════════════════════════════════════════════════════ 3b · THE SELECTED TAB — Sun moves from the label to the marker ---------------------------------------------------------------------------- tabbar.css gives the selected tab `color: var(--pw-sun)` and weight 600. Both sit outside the lock: 01-DESIGN-TOKENS §1.3 states that Sun is NEVER a text colour, and OD-44 fixes the interface weight at 500. The locked selected tab is `.tab.on { color: var(--shade) }` with a 7px SUN WEDGE at the bar's top edge (final.css lines 74–78) — Sun as the selection MARKER, never as the type. The tracked bar is Shade rather than white, and R4.3 does not name that composition as superseded, so the bar is left alone: only the Sun moves, from the label to the wedge, and the label takes the on-shade ink role. Same bar, same composition, one Sun moment either way — now the one the locked inventory actually lists (row 2). The wedge is drawn with clip-path, not the border trick: the shape is symmetric and has no direction, and the border form needs three physical properties to draw it. ══════════════════════════════════════════════════════════════════════════ */ html.c-r4 :is(.tabbar .tab.active, .tabbar .tab[aria-current='page'], .tabbar .tab[aria-current='true']) { color: var(--pw-mist, #EDEFEA); font-weight: 500; position: relative; } html.c-r4 :is(.tabbar .tab.active, .tabbar .tab[aria-current='page'], .tabbar .tab[aria-current='true'])::after { content: ''; position: absolute; top: 0; inset-inline: 0; height: 7px; background: var(--pw-sun, #F4C95D); clip-path: polygon(calc(50% - 7px) 0, calc(50% + 7px) 0, 50% 100%); } /* ════════════════════════════════════════════════════════════════════════════ 4 · TOUCH TARGETS — the locked 44×44 EFFECTIVE floor 10-ACCESSIBILITY §7. A glyph is never inflated to reach it; the control extends transparently, and where two neighbours would collide the CONTAINER supplies the room (01-DESIGN-TOKENS §8, the .qty / .stock-ctl idiom). Every one is measured by the M3 harness, which also proves hit ownership. ══════════════════════════════════════════════════════════════════════════ */ html.c-r4 :is(.tab, .btn, .btn-primary, .btn-ghost, .cta, .add-btn, .icon-toggle, .sheet-close, .grid-state-btn, .disco-none-btn, .qty button, .fav-btn, .heart, .chip, .promo button) { min-height: 44px; } /* ════════════════════════════════════════════════════════════════════════════ 5 · PREFERENCE FALLBACKS — D6 · D7 09-IOS27-LIQUID-GLASS §5. Placed last so no later rule outranks them. ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-transparency: reduce) { html.c-r4 :is(.nav, .tabbar, .sheet, .sheet-scrim, .search-results, .toast) { backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { html.c-r4 :is(.btn-ghost, .chip, .search-box, input, textarea, select) { border: 1.5px solid var(--r2-shade, #10312B); } html.c-r4 .tabbar { border-top: 1.5px solid var(--r2-shade, #10312B); } html.c-r4 header.nav { border-bottom: 1.5px solid var(--r2-shade, #10312B); } } @media (prefers-reduced-motion: reduce) { html.c-r4 *, html.c-r4 *::before, html.c-r4 *::after { transition: none !important; animation: none !important; } }