). */\n .styled-pill-low { background-color: rgb(31, 26, 21); color: rgb(91, 79, 68); display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; }\n .low-contrast-button { background-color: rgb(55, 65, 81); color: rgb(108, 114, 128); display: inline-block; padding: 10px 20px; border-radius: 8px; border: 0; font-size: 14px; }\n .good-pill-high { background-color: rgb(20, 20, 25); color: rgb(245, 240, 232); display: inline-block; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; }\n .inline-link-low { color: rgb(170, 170, 170); }\n /* Chip / badge cases: text-bearing spans painting their own background. */\n .chip-sev-low { display: inline-block; background-color: rgb(182, 50, 45); color: rgb(92, 84, 73); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }\n .chip-ok-high { display: inline-block; background-color: rgb(20, 20, 25); color: rgb(245, 240, 232); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }\n .chip-sub9-low { display: inline-block; background-color: rgb(182, 50, 45); color: rgb(150, 60, 55); font-size: 8px; padding: 1px 4px; }\n .panel-reset { background: rgb(28, 30, 38); color: rgb(230, 232, 237); padding: 12px; }\n .panel-reset code { background: rgb(246, 242, 244); border-radius: 3px; padding: 1px 4px; }\n .panel-reset pre code { background: none; }\n /* issue #409 Case A: gradient-clipped text. The gradient IS the glyph fill\n (text-fill-color: transparent), not a backdrop. The inherited `color`\n (#e8e6e3) is never painted, so measuring it against the element's own\n gradient stops (#6d8cff / #a78bfa) is a false positive. */\n .ox-grad-text { background: linear-gradient(135deg, #6d8cff 0%, #a78bfa 50%, #6d8cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #e8e6e3; font-size: 40px; font-weight: 800; }\n /* issue #409 Case B: a 9%-alpha accent glow stop over a dark surface. The\n stop composites to ~#121f1f, not the full-opacity #34c0a8, so text stays\n high-contrast. The dark wrapper supplies the surface beneath the glow. */\n .ox-dark-wrap { background: #0f0f11; padding: 16px; }\n .ox-glow { background: linear-gradient(160deg, rgba(52,192,168,0.09) 0%, #141419 65%); padding: 20px; }\n .ox-glow p { color: #e8e6e3; font-size: 18px; }\n .ox-glow .muted { color: #8e8c89; font-size: 16px; }\n /* Gradient stop written as color-mix with a bright nested ingredient.\n The stop paints as a 16% wash of the light oklch color (composited\n over the dark wrap it is near-black); the nested oklch(90% ...) is an\n INGREDIENT, never painted. A parser that re-extracts nested tokens\n appends it as a phantom opaque light stop and the worst-case ratio\n then flags the light text at ~1:1 against a color nobody sees. */\n .mix-dark-wrap { background: #0f0f11; padding: 16px; }\n .mix-glow { background: linear-gradient(160deg, color-mix(in oklab, oklch(90% 0.02 95) 16%, transparent) 0%, #141419 65%); padding: 20px; }\n .mix-glow p { color: #ded9cf; font-size: 16px; }\n /* currentcolor surface: background-color paints with the element's own\n text color, which is itself a var() token here. jsdom hands both\n through verbatim, so the walk must resolve the token via the\n custom-prop map instead of abstaining on a knowable surface. */\n :root { --fixture-bone: #e8e2d6; }\n .currentcolor-surface { background-color: currentcolor; color: var(--fixture-bone); padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }\n .currentcolor-low-text { color: #cfc9bd; font-size: 14px; }\n .currentcolor-good-text { color: #3a352c; font-size: 14px; }\n /* Same shape but the token does not exist: the surface truly cannot be\n read, so the walk must abstain rather than guess. */\n .currentcolor-unknown { background-color: currentcolor; color: var(--fixture-undefined-token); padding: 14px 16px; border-radius: 10px; }\n .currentcolor-unknown p { color: #efe9dd; font-size: 14px; }\n \nstyle=\"background: #000000; color: white;\"\nstyle=\"background: rgb(59, 130, 246);\"\nstyle=\"color: rgb(150, 150, 150);\"\nstyle=\"background: rgb(16, 185, 129);\"\nstyle=\"color: rgb(180, 180, 180);\"\nstyle=\"background: white;\"\nstyle=\"color: rgb(200, 200, 200);\"\nstyle=\"background: rgb(30, 30, 30);\"\nstyle=\"color: rgb(80, 80, 80);\"\nstyle=\"background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%); padding: 16px;\"\nstyle=\"color: #808080; font-size: 32px; font-weight: 800; margin: 0;\"\nstyle=\"color: #666666; font-size: 14px;\"\nstyle=\"background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.5rem;\"\nstyle=\"color: rgb(139, 92, 246); font-size: 1.5rem; margin: 0;\"\nstyle=\"background: black; color: white;\"\nstyle=\"background: rgb(59, 130, 246);\"\nstyle=\"color: rgb(156, 163, 175);\"\nstyle=\"color: rgb(168, 85, 247); font-size: 1.5rem; font-weight: 700;\"\nstyle=\"background: linear-gradient(to right, rgb(168, 85, 247), rgb(99, 102, 241)); color: white;\"\nstyle=\"background: rgb(26, 26, 30);\"\nstyle=\"color: rgb(240, 240, 245);\"\nstyle=\"background: rgb(250, 250, 252);\"\nstyle=\"color: rgb(20, 20, 25);\"\nstyle=\"background: #ffffff;\"\nstyle=\"color: #111827;\"\nstyle=\"background: rgb(30, 64, 175);\"\nstyle=\"color: rgb(240, 240, 245);\"\nstyle=\"background: rgb(16, 185, 129);\"\nstyle=\"color: rgb(5, 46, 32);\"\nstyle=\"color: rgb(220, 38, 38); font-size: 1.25rem; margin: 0;\"\nstyle=\"color: rgb(180, 83, 9); font-size: 1.25rem; margin: 8px 0 0;\"\nstyle=\"background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPj/HwADBwIAMCbHYQAAAABJRU5ErkJggg=='); background-size: cover; padding: 20px;\"\nstyle=\"color: rgb(255, 255, 255); font-size: 16px;\"\nstyle=\"background: rgba(0,0,0,0.03);\"\nstyle=\"background: rgba(0,0,0,0);\"\nstyle=\"background: rgba(0,0,0,0.5);\"\nstyle=\"color: white;\"\nstyle=\"background: #ffe4e6;\"\nstyle=\"color: #ffe4e6; font-size: 24px;\"\nstyle=\"background: #1a1a1a;\"\nstyle=\"color: #1a1a1a; font-size: 24px;\"","classText":"grid\ncol\ncard\ncard\ncard\ncard\ncard\ncard\nstyled-pill-low\nlow-contrast-button\nchip-sev-low\nbg-black text-white p-4 rounded card\nbg-blue-500 text-gray-400 p-4 rounded card\ntext-purple-500 text-2xl font-bold\nbg-gradient-to-r from-purple-500 to-indigo-500 text-white p-4 rounded card\ncurrentcolor-surface\ncurrentcolor-low-text\ncol\ncard\ncard\ncard\ncard\ncard\nbg-black/3 p-4 rounded card\nhover:bg-black/5 p-4 rounded card\nbg-black/50 p-4 rounded card\ninline-link-low\ngood-pill-high\nchip-ok-high\nchip-sub9-low\npanel-reset\nox-grad-text\nox-dark-wrap\nox-glow\nmuted\nmix-dark-wrap\nmix-glow\ncurrentcolor-surface\ncurrentcolor-good-text\ncurrentcolor-unknown\ncard emoji-test\ncard emoji-test"}],"result":[{"id":"ai-color-palette","snippet":"Purple/violet accent colors detected"},{"id":"gradient-text","snippet":"background-clip: text + gradient","selector":".ox-grad-text"}]}
-{"args":["\n\n\nFixture: data-impeccable-ignore scoped waivers \n\n\n\n \n The control case has a 6px side-tab accent border and no waiver, so the side-tab rule must flag it. \n\n \n \n The waiver names pulsing-dot, not side-tab, so this 8px case must still flag. \n \n\n \n
\n A waiver on a preceding sibling is not an ancestor; this 12px case must still flag. \n\n \n \n \"side-tabs\" is not a rule id; the 5px case must still flag. \n \n\n \n \n Inside a container waived for exactly side-tab; must not flag. \n \n\n \n \n \n
Two levels below the waiving container; the ancestor walk must still find it. \n
\n\n \n \n Inside a star-waived container; must not flag. \n \n\n \n \n side-tab appears in the comma list; must not flag. \n \n\n \n The waiver sits on the element itself; must not flag. \n\n \n \n One voice. Another voice. One voice. Another voice.
\n \n\n\n",{"styleText":"\n body { margin: 0; padding: 40px; background: #faf8f4; font-family: Arial, sans-serif; color: #262421; }\n /* Every case carries a UNIQUE border-left width so each finding's snippet\n (`border-left: Npx`) attributes to exactly one case. Flag widths: 5, 6,\n 8, 12. Pass widths: 4, 7, 9, 10, 11. */\n .tabbed {\n width: 420px;\n padding: 16px 20px;\n margin: 0 0 24px;\n background: #ffffff;\n border: 1px solid #ddd8d0;\n border-left: 6px solid #b8422e;\n }\n .w4 { border-left-width: 4px; }\n .w5 { border-left-width: 5px; }\n .w7 { border-left-width: 7px; }\n .w8 { border-left-width: 8px; }\n .w9 { border-left-width: 9px; }\n .w10 { border-left-width: 10px; }\n .w11 { border-left-width: 11px; }\n .w12 { border-left-width: 12px; }\n /* Marquee specimen: keyframes + an infinite loop track. The section that\n hosts it carries a marquee waiver; the CSS-scan finding must resolve the\n selector to the live element and honor the ancestor attribute. */\n @keyframes ticker-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n .quote-track { display: flex; width: max-content; animation: ticker-loop 80s linear infinite; }\n .quote-track span { padding: 8px 16px; }\n /* Dead grid CSS: this two-axis hairline grid selector matches nothing on\n this page, so the browser pass must drop the codex-grid finding — the\n pattern never renders here. */\n .never-rendered-grid {\n background:\n linear-gradient(90deg, rgba(200,180,120,0.08) 1px, transparent 1px),\n linear-gradient(180deg, rgba(200,180,120,0.08) 1px, transparent 1px);\n background-size: 24px 24px;\n }\n /* Overshoot bezier inside a keyframe STEP: enclosingCssSelector must refuse\n `to` as a selector (it would match nothing and wrongly drop the finding),\n so this bounce-easing finding stays page-level and is retained. */\n @keyframes springy {\n from { transform: none; }\n to { transform: translateY(-4px); animation-timing-function: cubic-bezier(0.3, 1.8, 0.6, 1); }\n }\n","classText":"tabbed control-flags\ntabbed w8 flags-other-rule-waived\ntabbed w12 flags-sibling-waiver\ntabbed w5 flags-misspelled-rule\ntabbed w7 pass-exact-rule\ntabbed w9 pass-nested-depth\ntabbed w10 pass-star\ntabbed w11 pass-rule-list\ntabbed w4 pass-self-waiver\nquote-track"}],"result":[{"id":"bounce-easing","snippet":"cubic-bezier(0.3, 1.8, 0.6, 1)"},{"id":"marquee","snippet":".quote-track — infinite horizontal loop animation \"ticker-loop\"","selector":".quote-track"},{"id":"codex-grid-background","snippet":"two-axis grid-line gradient background","selector":".never-rendered-grid"}]}
-{"args":["\n\n\nFixture: gradient body ground, oklch stops (low-contrast) \n\n\n\n Light display text on the lacquer gradient \n This paragraph sits directly on the body's dark gradient ground. Its near-white ink clears WCAG AA against both gradient stops by a wide margin, so a detector that measures the real ground must not flag it. A detector that assumes a white body flags it at about 1.3:1.
\n Light text on a raised solid oklch surface between the text and the body gradient still resolves through the normal opaque-ancestor walk.
\n \n
Dark ink on a translucent light wash over the dark gradient. The wash composites to a light surface, so this passes; measuring raw gradient stops would wrongly flag it.
\n
Light ink on the same translucent light wash genuinely fails once the wash is composited over the stops; raw stops would wrongly pass it.
\n
This muted dark-gray ink genuinely fails contrast against both stops of the dark gradient ground, which proves the gradient stops are being measured instead of the checks silently skipping.
\n \n
Muted ink reached through a transparent wrapper still resolves to the body gradient and still fails against its stops.
\n
A non-body gradient with legacy hex stops keeps working through the original rgb/hex parser, and light text on it passes.
\n Dark ink on a translucent wash over a texture image. The image pixels are unknowable to the analytic walk, so contrast must skip rather than composite the wash over the wrong base.
\n Dark ink on a photo-backed panel sitting over the dark body gradient. Walking past the photo to the gradient stops would wrongly flag this; the unmeasurable image layer must end the walk.
\n Muted ink inside an opacity-zero scene deck. Nobody sees this state, so the contrast checks must not measure it.
Legitimate Border Patterns — Should NOT Flag \n \n\n\n Legitimate Border Patterns \n Every border here is a well-established web pattern. None should be flagged.
\n\n \n Blockquotes \n \n
\n \"Design is not just what it looks like and feels like. Design is how it works.\"\n \n
Sidebar Navigation (Active State) \n \n\n \n Form Validation \n \n
\n
Email \n
\n
Please enter a valid email address.
\n
\n
Timeline \n \n
\n
\n
\n
Order placed
\n
March 15, 2026
\n
\n
\n
\n
Shipped
\n
March 16, 2026
\n
\n
\n
\n
Delivered
\n
Expected March 18
\n
\n
\n
Code Diff Highlighting \n \n
\n- const old = getValue(); \n+ const value = getNewValue(); \n return value; \n
Tab Navigation \n \n
\n Overview \n Analytics \n Settings \n
\n
Data Table \n \n
\n \n \n Name \n Revenue \n \n \n \n Acme Corp $1.2M Globex $850K \n
\n
Alert Banner \n \n
\n
Warning: Your trial expires in 3 days.
Upgrade now \n
\n
Side-Tab with Modern Color Formats (oklch/lab/lch/hsl/hwb) \n \n\n\n \n
\n
Should flag \n
oklch checklist oklch border-left 3px + radius
\n
oklch medication card neutral all + colored left 4px
\n
oklch alert warm border-left 4px + radius
\n
oklab card oklab border-left 4px + radius
\n
lch card lch border-left 4px + radius
\n
lab card lab border-left 4px + radius
\n
\n Card-shaped label with oklch side border \n \n
\n Card-shaped label with rgb side border \n \n
var() shorthand border-left 5px + var(--brand)
\n
var() mixed neutral all + colored var left
\n
var() right side border-right 4px + var(--terracotta)
\n
\n Card-shaped label with var() side border \n \n
\n
\n
Should pass \n
oklch neutral chroma 0 gray
\n
oklch near-neutral chroma 0.01
\n
oklch all sides uniform border
\n
\n
\n
\n
\n Email address \n
\n
\n Label with neutral gray left border \n \n
\n
\n Label with 1px colored left border (too thin) \n \n
var() neutral --line resolves to gray
\n
var() thin 1px too thin to qualify
\n
var() all sides uniform, not a side-tab
\n
oklch neutral right divider 1px neutral context-bar hairline
\n
\n
with colored oklch side border + radius\n (the checklist-item pattern from preop-portal reproducer) */\n label#flag-label-oklch {\n display: grid;\n grid-template-columns: auto 1fr;\n width: 400px;\n padding: 16px;\n background: oklch(100% 0 0);\n border-radius: 4px;\n border-left: 3px solid oklch(65% 0.12 250);\n cursor: pointer;\n }\n\n /* 8: card-shaped with colored rgb side border + radius —\n proves the fix is not oklch-specific */\n label#flag-label-rgb {\n display: block;\n width: 400px;\n padding: 16px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid #3b82f6;\n cursor: pointer;\n }\n\n /* 9: CSS variable in shorthand — the canonical real-page pattern from\n evals (e.g. 09-physics-study: border-left:8px solid var(--brand-2)).\n jsdom silently drops this entire declaration, so the computed-style\n path used to miss it. */\n #flag-var-shorthand {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 5px solid var(--brand);\n }\n\n /* 10: CSS variable + neutral 1px all-around border — mirrors the\n medication-card pattern with a colored accent on the left. */\n #flag-var-mixed {\n width: 400px;\n background: #ffffff;\n border: 1px solid var(--line);\n border-left: 4px solid var(--warn);\n border-radius: 4px;\n }\n\n /* 11: CSS variable shorthand, right side. Ensures the fallback works\n for both inline axes, not just border-left. */\n #flag-var-right {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-right: 4px solid var(--terracotta);\n }\n\n /* 12: card-shaped with var() side border + radius —\n the checklist-row shape, built with tokens. */\n label#flag-label-var {\n display: block;\n width: 400px;\n padding: 16px;\n background: #ffffff;\n border-radius: 6px;\n border-left: 4px solid var(--brand);\n cursor: pointer;\n }\n\n /* ── PASS cases: legitimate or neutral borders, must NOT fire ── */\n\n /* 1: oklch chroma ~0 — true neutral gray border should not fire */\n #pass-oklch-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid oklch(80% 0 0);\n }\n\n /* 2: oklch low chroma (0.01) — still perceptually neutral */\n #pass-oklch-nearneutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid oklch(75% 0.01 250);\n }\n\n /* 3: oklch colored border all around (not one-sided) — no side-tab */\n #pass-oklch-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid oklch(65% 0.12 250);\n border-radius: 4px;\n }\n\n /* 4: oklch colored 1px border-left (too thin to qualify) */\n #pass-oklch-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid oklch(65% 0.12 250);\n }\n\n /* 5: lab neutral (chroma near zero) — must not fire */\n #pass-lab-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid lab(50% 0 0);\n }\n\n /* 6: lch neutral (chroma 0) */\n #pass-lch-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid lch(50% 0 0);\n }\n\n /* 7: plain inline form label — no border, no padding, no radius.\n Must NOT be flagged for anything. */\n label#pass-label-plain {\n font-size: 14px;\n font-weight: 500;\n color: #374151;\n }\n\n /* 8: form label with a small neutral gray left border — neutral color\n should not fire the colored side-tab rule. */\n label#pass-label-neutral-border {\n display: block;\n width: 400px;\n padding: 8px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid #e5e7eb;\n }\n\n /* 9: inline label inside a form row — default inline layout,\n no borders, must not fire. */\n label#pass-label-inline {\n font-size: 13px;\n color: #6b7280;\n margin-right: 8px;\n }\n\n /* 10: label with 1px colored left border — too thin to qualify\n (matches the existing 1px thin rule for divs). */\n label#pass-label-thin {\n display: block;\n width: 400px;\n padding: 8px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid #3b82f6;\n }\n\n /* 11: CSS variable resolving to a neutral gray — must NOT fire,\n even though the border shorthand contains var(). */\n #pass-var-neutral {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 3px solid var(--line);\n }\n\n /* 12: thin (1px) var-based left border — under the side-tab width\n threshold even when resolved. */\n #pass-var-thin {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-left: 1px solid var(--brand);\n }\n\n /* 13: var-based uniform border on all four sides. Not a side-tab. */\n #pass-var-allsides {\n width: 400px;\n background: #ffffff;\n border: 3px solid var(--brand);\n border-radius: 4px;\n }\n\n /* 14: neutral 1px oklch right divider — context-bar hairline, not a side-tab. */\n #pass-oklch-neutral-right-divider {\n width: 400px;\n background: #ffffff;\n border-radius: 4px;\n border-right: 1px solid oklch(92% 0 0 / 0.12);\n }\n ","classText":"grid\ncol\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncol\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase\ncase"}],"result":[]}
-{"args":["\n\n\n Side-Tab with CSS Named Colors (purple/rebeccapurple/crimson/teal) \n \n\n\n \n
\n
Should flag \n
named purple border-left 4px solid purple + radius
\n
rebeccapurple border-left 4px + radius
\n
crimson top stripe border-top 4px, horizontal variant
\n
named teal border-left 3px, no radius
\n
var() to named border-left 4px solid var(--accent)
\n
\n
inline named purple style attribute, issue #359 case (a); width 7px keeps the snippet unique
\n
\n
\n
\n
Should pass \n
dimgray neutral named color
\n
gainsboro light neutral named color
\n
named black neutral side border
\n
1px purple too thin to qualify
\n
uniform purple all four sides, not a stripe
\n
\n
Typography Anti-Patterns \n This page triggers three typography detections:
\n\n 1. Overused Font \n Inter is loaded from Google Fonts and set as the only font-family. It's the most common AI default.
\n\n 2. Single Font \n There's no second font for headings or display text. Everything uses Inter — no typographic variety.
\n\n 3. Flat Type Hierarchy \n The font sizes are 13px, 14px, 15px, 16px, 18px — all crammed into a 5px range. No visual contrast between heading and body.
\n This caption is barely distinguishable from body text.
\n\n A Subheading \n Can you tell this is a subheading? Exactly.
\n\n\n