/* Foundations extends the shared component catalog shell. */
html{scroll-behavior:auto}.catalog-main>main{max-width:1440px}.foundation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block-start:1px solid var(--qf-border-subtle);border-inline-start:1px solid var(--qf-border-subtle);margin-block-start:40px}.foundation-card{display:flex;flex-direction:column;padding:24px;min-height:260px;text-decoration:none;border-inline-end:1px solid var(--qf-border-subtle);border-block-end:1px solid var(--qf-border-subtle);background:var(--qf-layer);gap:16px}.foundation-card:hover{background:var(--qf-background-subtle)}.foundation-card h2{font-size:var(--qf-type-component-title-size);font-weight:400;line-height:1.15}.foundation-card p{color:var(--qf-text-muted);font-size:var(--qf-type-body-size)}.foundation-card .card-meta{margin-block-start:auto}.foundation-number{color:var(--qf-text-muted);font-size:var(--qf-type-body-size)}.foundation-block{margin-block:40px;border-block-start:1px solid var(--qf-border-subtle);padding-block-start:24px}.foundation-block h2{font-size:var(--qf-type-component-title-size);font-weight:400;margin-block-end:16px}.foundation-block p{max-width:850px;margin-block:12px;line-height:1.6;color:var(--qf-text-paragraph)}.foundation-notice{border-inline-start:3px solid var(--qf-interactive);padding:20px;background:var(--qf-background-subtle);line-height:1.6;margin-block:24px}.section-jumps{display:flex;flex-wrap:wrap;gap:24px;margin-block:24px 40px}.field-label{display:flex;gap:16px;align-items:center;margin-block:24px}.color-dot{display:inline-block;width:20px;height:20px;border:1px solid var(--qf-text-muted);margin-inline-end:8px;vertical-align:middle}.scope-table th{text-align:start;font-weight:500}.scope-table td,.scope-table th{vertical-align:top}.contrast-pass strong,.contrast-review strong{display:block}.contrast-pass small,.contrast-review small{display:block;font-size:var(--qf-type-body-size);white-space:nowrap}.contrast-pass{color:var(--qf-interactive)}.contrast-review{color:var(--qf-support-error)}.token-value{display:flex;gap:12px;align-items:center}.copy-status{font-size:var(--qf-type-body-size);margin-inline-start:6px}.foundation-chart-thumb{height:220px;overflow:hidden}.foundation-chart-thumb>section{width:740px;transform:scale(.43);transform-origin:top left;pointer-events:none}.foundation-chart-detail{max-width:none;min-width:0;margin:auto;flex-shrink:0}.foundation-chart-detail>section{margin:0}.foundation-chart-detail .grid{min-width:0}.foundation-source{white-space:pre-wrap;font:var(--qf-type-body-size)/1.7 'QF',sans-serif;color:var(--qf-text-secondary);margin-block:20px}.foundation-source-details{border-block-start:1px solid var(--qf-border-subtle);padding-block:16px}.foundation-source-details summary{cursor:pointer;font-weight:500}.foundation-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.type-specimen{padding:20px;border-block-end:1px solid var(--qf-border-subtle);overflow-wrap:anywhere}.legacy-section{background:var(--qf-layer);border:1px solid var(--qf-color-neutral-200);padding:24px;margin-block:24px}.legacy-section>div:first-child h2{font-size:var(--qf-type-component-title-size);font-weight:400}.legacy-section>div:first-child p{font-size:var(--qf-type-body-size);color:var(--qf-text-muted)}.foundation-missing{border-inline-start:3px solid var(--qf-color-support-warning);padding:16px 24px;background:var(--qf-background-subtle)}.scope-table code{overflow-wrap:anywhere}.page-heading h1:focus{outline:none}.foundation-doc-nav{display:flex;gap:20px;flex-wrap:wrap}.foundation-block li{margin-block:8px;line-height:1.6}.foundation-block ul{padding-inline-start:24px}.foundation-chart-detail .legacy-section{overflow-x:auto}.preview-stage{display:flex;overflow:auto}.foundation-scale-bar{height:16px;background:var(--qf-interactive)}.foundation-demo{padding:24px;border:1px solid var(--qf-border-subtle)}.foundation-block pre{overflow:auto;font-size:var(--qf-type-body-size);padding:24px;background:var(--qf-background-subtle)}a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--qf-focus);outline-offset:4px}[hidden]{display:none!important}
@media(max-width:1100px){.foundation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foundation-columns{grid-template-columns:1fr}}
@media(max-width:760px){.catalog-main>main{padding:32px 20px}.foundation-grid{grid-template-columns:1fr}.foundation-card{min-height:220px}.page-heading h1{font-size:var(--qf-type-section-heading-size)}.page-intro{font-size:var(--qf-type-component-title-size)}.field-label{align-items:start;flex-direction:column}.foundation-block{margin-block:32px}.legacy-section{padding:16px}.catalog-grid{grid-template-columns:1fr}.token-value{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.values-heading{font-size:var(--qf-type-component-title-size);font-weight:500;margin-block:32px 16px}.ramp-plot{max-width:800px;margin:24px 0}.ramp-plot svg{width:100%;height:auto}.ramp-plot figcaption{font-size:var(--qf-type-body-size);color:var(--qf-text-muted)}.foundation-block .foundation-block{border-block-start:0}.foundation-source{overflow-wrap:anywhere;white-space:pre-wrap}.foundation-demo .qf-icon{display:inline-block}.foundation-block h3+p{margin-block-start:12px}

.foundation-swatch{display:flex;align-items:flex-end;padding:10px;width:100%;border:1px solid var(--qf-border-subtle);border-radius:0;font-size:var(--qf-type-body-size);transition:none}.swatch-hex{font:var(--qf-type-body-size)/1.5 monospace;text-align:center;margin-block:8px;overflow-wrap:anywhere}.swatch-status{display:block;font-size:var(--qf-type-body-size);min-height:18px}.foundation-code{margin-block-start:24px;border-block-start:1px solid var(--qf-border-subtle);padding-block-start:16px}.foundation-code summary{cursor:pointer}.foundation-code pre{overflow:auto;padding:20px;background:var(--qf-background-subtle);font-size:var(--qf-type-body-size)}.foundation-chart-thumb .foundation-code{display:none}

/* Contrast measurements stay outside the deliberately low-contrast specimens. */
.pair-explorer{color:var(--qf-text-primary);--pair-line:var(--qf-border-subtle)}
.pair-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-block:24px}

.pair-specimen{display:flex;align-items:center;min-height:184px;padding:32px;border:1px solid var(--pair-line)}
.pair-body{font-size:var(--qf-type-body-size);line-height:1.5;max-width:430px}
.pair-large{font-size:var(--qf-type-heading-medium-size);font-weight:400;line-height:1.2}
.pair-bars{display:grid;gap:12px;width:100%}
.pair-bars i{display:block;width:70%;height:20px;background:currentColor}
.pair-bars i:nth-child(2){width:48%}.pair-bars i:nth-child(3){width:85%}
.pair-result{display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding-block:20px;border-block-end:1px solid var(--pair-line)}
.pair-ratio{font-size:var(--qf-type-section-heading-size);line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums}
.pair-caption{display:block;color:var(--qf-text-secondary);font-size:var(--qf-type-body-size);margin-block-start:8px}
.pair-verdict{text-align:end;font-size:var(--qf-type-body-size)}.pair-verdict strong,.pair-verdict span{display:block}.pair-verdict span{margin-block-start:8px}
.pair-heading{font-size:var(--qf-type-body-size);font-weight:500;margin-block:24px 16px}
.pair-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pair-choice{padding:0;min-width:0;text-align:start;background:var(--qf-layer);color:var(--qf-text-primary);border:1px solid var(--pair-line);border-radius:0;font:inherit;cursor:pointer}
.pair-choice[aria-pressed=true]{outline:2px solid var(--qf-text-primary);outline-offset:0}
.pair-choice:focus-visible{outline:3px solid var(--qf-focus);outline-offset:4px}
.pair-choice:hover .pair-meta{background:var(--qf-background-subtle)}
.pair-tile-sample{display:flex;align-items:center;justify-content:center;min-height:72px;font-size:var(--qf-type-body-size);font-weight:400}
.pair-tile-large{font-size:var(--qf-type-component-title-size)}.pair-mark{display:block;width:55%;height:20px;background:currentColor}
.pair-meta{display:grid;gap:4px;padding:12px;font-size:var(--qf-type-body-size);font-variant-numeric:tabular-nums}
.pair-meta strong{font-weight:500;text-transform:capitalize}.pair-meta code{font-size:var(--qf-type-body-size);color:var(--qf-text-secondary)}
.pair-alternative{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-block:24px;font-size:var(--qf-type-body-size)}


.pair-alternative small{flex-basis:100%;font-size:var(--qf-type-body-size);color:var(--qf-text-secondary)}
.pair-empty{padding:16px;border-inline-start:3px solid var(--qf-interactive);background:var(--qf-background-subtle)}
.pair-table{margin-block-start:24px;border-block:1px solid var(--pair-line)}
.pair-table summary{padding-block:16px;cursor:pointer;font-size:var(--qf-type-body-size);font-weight:500}
.pair-table .table-scroll{margin-block:8px 24px}

@media(max-width:600px){.pair-controls{grid-template-columns:1fr}.pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pair-specimen{padding:24px}.pair-result{flex-direction:column;gap:16px}.pair-verdict{text-align:start}}

.upcoming-list,.resource-list{display:grid;max-width:850px}
.upcoming-list a,.resource-list a{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;border-block-end:1px solid var(--qf-border-subtle);font-size:var(--qf-type-component-title-size)}
.upcoming-list a:hover,.resource-list a:hover{background:var(--qf-background-subtle)}
.upcoming-list span,.resource-list span{font-size:var(--qf-type-body-size);color:var(--qf-text-secondary);white-space:nowrap}
.upcoming-notice{max-width:650px;padding-block:24px;border-block-start:1px solid var(--qf-border-subtle);font-size:var(--qf-type-component-title-size);line-height:1.6}

/* Foundation specimens inherit the same roles as the distributed components. */
.foundation-mode-controls{display:flex;flex-wrap:wrap;gap:var(--qf-spacing-stack-gap);margin-block:var(--qf-spacing-24)}
.foundation-mode-controls p{margin:0 0 var(--qf-spacing-8)}
.foundation-mode-demo{margin-block:var(--qf-spacing-24);border:1px solid var(--qf-border-subtle)}
.foundation-mode-demo .foundation-role-body{font-size:var(--qf-type-body-size);line-height:var(--qf-type-body-line-height);margin:var(--qf-spacing-stack-gap) 0;color:var(--qf-body)}
.foundation-mode-demo .foundation-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--qf-spacing-grid-gap);margin-block-start:var(--qf-spacing-group-gap)}
.foundation-mode-demo .qf-tile p{margin:0;color:var(--qf-body)}
@container qf (max-width:700px){.foundation-mode-demo .foundation-role-grid{grid-template-columns:1fr}}
.foundation-card{padding:var(--qf-spacing-card-padding);gap:var(--qf-spacing-stack-gap)}
.foundation-columns{gap:var(--qf-spacing-grid-gap)}
.foundation-card h2,.foundation-block h2{font-size:var(--qf-type-component-title-size);line-height:var(--qf-type-component-title-line-height)}
.foundation-block{margin-block:var(--qf-spacing-section-gap)}
.catalog-main>main{padding:var(--qf-spacing-section-gap) var(--qf-spacing-page-gutter)}
.foundation-mode-demo .qf-boxed-text>.qf-display{font-size:var(--qf-type-page-heading-size);line-height:var(--qf-type-page-heading-line-height);font-weight:var(--qf-type-page-heading-weight);letter-spacing:var(--qf-type-page-heading-tracking)}
.foundation-mode-demo .qf-boxed-text>.foundation-role-body{font-size:var(--qf-type-body-size);line-height:var(--qf-type-body-line-height);font-weight:var(--qf-type-body-weight)}
/* Typography specimens display the actual token sizes, independent of shell text. */
.typeface-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--qf-border-subtle);margin-block:32px}
.typeface-card{padding:32px;min-width:0;background:var(--qf-layer)}.typeface-card+article{border-inline-start:1px solid var(--qf-border-subtle)}
.typeface-card h3{font-size:20px;font-weight:500}.typeface-glyph{display:block;font-size:128px;font-weight:400;line-height:1.2;margin-block:24px}
.foundation-block .typeface-alphabet{font-size:20px;line-height:1.6;overflow-wrap:anywhere;color:var(--qf-text-primary)}
.typeface-card dl{margin-block:24px}.typeface-card dl>div{display:flex;justify-content:space-between;gap:16px;border-block-start:1px solid var(--qf-border-subtle);padding-block:12px;font-size:14px}.typeface-card dd{margin:0}.typeface-card code{font-size:12px}
.typeface-weights{display:flex;justify-content:space-between;gap:16px;padding-block-start:16px;border-block-start:1px solid var(--qf-border-subtle)}.typeface-weights>span{font-size:28px}.typeface-weights small{display:block;font:12px/1.5 var(--qf-font);color:var(--qf-text-secondary)}
.type-ramp{margin-block:32px;border-block-start:1px solid var(--qf-border-subtle)}.type-ramp-row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:baseline;gap:32px;border-block-end:1px solid var(--qf-border-subtle);padding-block:24px}
.type-ramp-label{display:grid;gap:4px;font-size:14px;color:var(--qf-text-secondary)}.type-ramp-label strong{font-weight:500;font-size:20px;color:var(--qf-text-primary)}.type-ramp-label strong>span{font-weight:400;font-size:14px}
.type-specimen-scroll{min-width:0;max-width:100%;overflow:auto;scrollbar-width:thin;padding-block:4px}.type-ramp-sample{font-family:var(--qf-font);font-weight:400;line-height:1.25;white-space:nowrap;display:block;width:max-content;padding-inline-end:16px}
.type-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-block:32px}.type-toolbar>span{font-size:14px;color:var(--qf-text-secondary)}
.type-role-list{border-block-start:1px solid var(--qf-border-subtle)}.type-role-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding-block:32px;border-block-end:1px solid var(--qf-border-subtle)}
.type-role-label h3{font-size:16px;font-weight:500}.foundation-block .type-role-label p{font-size:14px;line-height:1.5;margin-block:8px 16px}.type-role-label>span{display:block;font-size:12px;color:var(--qf-text-secondary);margin-block:4px}.type-role-example{min-width:0}
.foundation-block .type-role-sample{margin:0;max-width:42ch;color:var(--qf-text-primary);padding-inline-end:4px}.type-style-code{margin-block-start:20px}.type-style-code summary,.type-specifications summary{cursor:pointer;font-size:14px;color:var(--qf-text-secondary)}
.type-style-code pre{font-size:var(--qf-code-size)!important;margin-block:16px;background:var(--qf-background-subtle)!important}.type-copy-status{font-size:14px;margin-inline-start:12px}.type-specifications{margin-block:24px;padding:20px;border:1px solid var(--qf-border-subtle)}
.type-tester-controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-block:32px 24px}.type-sample-input{display:grid;gap:8px;font-size:14px;color:var(--qf-text-secondary)}

.type-tester-caption{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-block:20px;font-size:14px;color:var(--qf-text-secondary)}
.type-tester-stage{border:1px solid var(--qf-border-subtle);padding:32px;overflow:auto;min-height:240px;background:var(--qf-layer)}.type-tester-sample{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--qf-text-primary);min-height:var(--type-leading)}
.type-tester-sample.has-guides{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--type-leading) - 1px),var(--qf-border-subtle) calc(var(--type-leading) - 1px),var(--qf-border-subtle) var(--type-leading))}
.foundation-block .type-tester-note{font-size:14px;color:var(--qf-text-secondary)}
.type-basics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-block:32px}.type-basics-grid h3{font-size:20px;font-weight:500}.type-basics-grid article{min-width:0}.type-leading-demo,.type-reading-demo,.type-alignment-demo,.type-format-demo{background:var(--qf-background-subtle);border:1px solid var(--qf-border-subtle);padding:24px;margin-block-start:24px;min-height:180px}
.foundation-block .type-leading-demo p{font:16px/24px var(--qf-font);margin:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 23px,var(--qf-color-sage-300) 23px,var(--qf-color-sage-300) 24px)}
.foundation-block .type-reading-demo p{font-size:16px;line-height:1.5;max-width:28ch;margin:0}.type-alignment-demo>span{font-size:12px;color:var(--qf-text-secondary)}.foundation-block .type-alignment-demo p{font-size:16px;line-height:1.5;border-inline-start:2px solid var(--qf-interactive);padding-inline-start:12px;text-align:start;margin-block-end:0}
.type-format-demo{display:flex;gap:20px;align-items:baseline;overflow:hidden}.type-format-demo span:nth-child(1){font-size:20px}.type-format-demo span:nth-child(2){font-size:40px}.type-format-demo span:nth-child(3){font-size:72px}
.type-dashboard-list{border-block-start:1px solid var(--qf-border-subtle);margin-block:24px}.type-dashboard-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:center;border-block-end:1px solid var(--qf-border-subtle);padding-block:24px}.type-dashboard-row strong{display:block;font-weight:500}.type-dashboard-row span{display:block}.type-dashboard-row>div:first-child span{font-size:14px;color:var(--qf-text-secondary);margin-block-start:8px}.type-dashboard-row .type-specimen-scroll>span{white-space:nowrap;width:max-content}
.foundation-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin-block:32px;border-block-start:1px solid var(--qf-border-subtle);border-inline-start:1px solid var(--qf-border-subtle)}.foundation-icon-grid>div{display:flex;flex-direction:column;gap:20px;padding:24px;align-items:start;border-inline-end:1px solid var(--qf-border-subtle);border-block-end:1px solid var(--qf-border-subtle)}.foundation-icon-grid>div>span:last-child{font-size:14px;overflow-wrap:anywhere}.icon-library-link{display:inline-block;padding-block:12px}
@media(max-width:760px){.typeface-grid,.type-basics-grid{grid-template-columns:minmax(0,1fr)}.typeface-card{padding:24px}.typeface-card+article{border-inline-start:0;border-block-start:1px solid var(--qf-border-subtle)}.typeface-glyph{font-size:96px}.typeface-weights{gap:8px}.type-ramp-row{grid-template-columns:72px minmax(0,1fr);gap:16px}.type-role-row,.type-dashboard-row{grid-template-columns:minmax(0,1fr);gap:20px}.type-role-label>span{display:inline-block;margin-inline-end:16px}.type-tester-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.type-tester-caption{align-items:start;flex-direction:column;gap:8px}.type-tester-stage{padding:20px}.type-format-demo{padding:16px;gap:12px}.type-format-demo span:nth-child(3){font-size:60px}}

.type-ramp-compact{display:none}
@media(max-width:760px){.type-ramp-full{display:none}.type-ramp-compact{display:inline}}

.type-tester-sample{ text-align:start }

/* Arabic specimens use connected text and independent preview leading. */
.arabic-specimen{letter-spacing:normal;text-align:start;margin-block:32px;overflow-wrap:anywhere}
.foundation-block .arabic-specimen-heading{font-size:2.5rem;line-height:1.5;font-weight:400;color:var(--qf-text-primary);margin:0 0 24px}
.foundation-block .arabic-specimen-body{font-size:1.25rem;line-height:1.8;font-weight:400;color:var(--qf-text-primary);margin:0}
.foundation-block :is(.arabic-face-purpose,.arabic-specimen-caption,.arabic-preview-caption,.arabic-preview-note){font-size:14px;line-height:1.6;color:var(--qf-text-secondary)}
.arabic-specimen-caption{padding-block-start:20px;border-block-start:1px solid var(--qf-border-subtle)}
.arabic-subheading,.arabic-setting-guidance h3{font-size:20px;font-weight:500}
.arabic-tester-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}
.arabic-sample-input textarea{font-family:var(--qf-font);font-size:1.25rem;line-height:1.8;letter-spacing:normal;text-align:start}
.arabic-preview-caption{margin-block:20px 12px}
.arabic-tester-stage{border:1px solid var(--qf-border-subtle);background:var(--qf-layer);padding:32px;min-height:240px;overflow:auto}
.arabic-tester-sample{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;letter-spacing:normal;text-align:start;color:var(--qf-text-primary)}
.arabic-setting-guidance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-block-start:40px}
.arabic-setting-guidance article{min-width:0}
.foundation-block .arabic-setting-guidance p{font-size:16px;line-height:1.6;margin-block:12px 0}
@media(max-width:760px){.arabic-setting-guidance{grid-template-columns:minmax(0,1fr);gap:24px}.arabic-tester-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.arabic-tester-controls>.foundation-library:first-child{grid-column:1/-1}.arabic-tester-stage{padding:20px}}


/* Catalog-specific composition; shared widgets retain library anatomy and states. */
.qf.foundation-library{background:transparent;min-width:0;container-type:normal}
.foundation-library-button{display:inline-block;vertical-align:middle}
.foundation-card-wrapper>.qf-tile{height:100%;min-height:260px}
.foundation-grid{gap:var(--qf-spacing-grid-gap);border:0}
.foundation-mode-demo .foundation-library{container-type:normal}
.foundation-mode-demo .foundation-role-grid>.foundation-library>.qf-tile{height:100%}
.type-tester-caption{flex-wrap:wrap}
.type-tester-caption>.foundation-library{flex-shrink:0}
.foundation-block .foundation-library p{line-height:var(--qf-type-body-line-height)}
@media(max-width:760px){.foundation-card-wrapper>.qf-tile{min-height:220px}}

.foundation-role-panel{padding:var(--qf-spacing-card-padding);background:var(--qf-surface)}
.foundation-mode-controls>div{min-width:0}

/* Contiguous editorial navigation grid. */
.foundation-illustrated-grid{gap:1px;padding:1px;background:var(--qf-border-subtle);border:0;margin-block-start:var(--qf-spacing-40)}
.foundation-illustrated-grid .foundation-card-wrapper>.qf-tile{border:0;height:100%;min-height:0;padding-block-end:var(--qf-spacing-64);background-color:var(--qf-white)}
.foundation-illustrated-grid .qf-tile--illustrated>.qf-icon{position:absolute;inset-inline-end:var(--qf-spacing-16);inset-block-end:var(--qf-spacing-16);inline-size:var(--qf-spacing-32);block-size:var(--qf-spacing-32);padding:var(--qf-spacing-4);margin:0;background:var(--qf-white)}
.foundation-illustrated-grid .qf-tile::before{content:"";position:absolute;inset:var(--qf-spacing-16);z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--qf-border-subtle) 1.2px,transparent 1.4px);background-size:var(--qf-spacing-32) var(--qf-spacing-32)}
.foundation-illustrated-grid .qf-tile-illustration{mix-blend-mode:normal;background:transparent;object-position:center;align-self:center}
.foundation-illustrated-grid .qf-tile--illustrated>:is(h2,h3,p){background:var(--qf-white)}
.foundation-illustrated-grid .qf-tile--illustrated>:is(h2,h3){margin-block-end:var(--qf-spacing-12)}

/* Overview destinations use the shared linked Tile, with aligned card actions. */
.foundation-next{margin-block-start:var(--qf-spacing-64)}
.foundation-next>h2{font-size:var(--qf-type-heading-small-size);line-height:var(--qf-type-heading-small-line-height);font-weight:var(--qf-type-heading-small-weight);margin-block-end:var(--qf-spacing-16)}
.foundation-next>p{max-inline-size:850px;color:var(--qf-text-secondary)}
.foundation-next-grid{margin-block-start:var(--qf-spacing-32)}
.foundation-next-grid>.qf{min-inline-size:0}

/* Color roles: one reference with contextual examples and shared IBM controls. */
.foundation-icon{display:inline-flex;align-items:center;flex-shrink:0;vertical-align:middle}
.foundation-icon>.qf-icon{width:20px;height:20px;fill:currentColor}
.semantic-anchor{display:block;scroll-margin-block-start:100px}
.semantic-heading{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-block-end:24px}
.semantic-heading h2{margin-block-end:8px}.semantic-heading p{margin:0}
.semantic-heading>.foundation-library{flex-shrink:0}
.semantic-colors #semantic-group>div[role=group]{display:flex;flex-wrap:wrap;gap:24px;border-block-end:1px solid var(--qf-border-subtle)}
.semantic-colors #semantic-group button{flex:0 0 auto;border:0;border-radius:0;border-block-end:2px solid transparent;padding:12px 0;background:transparent;color:var(--qf-text-secondary)}
.semantic-colors #semantic-group button[aria-pressed=true]{border-block-end-color:var(--qf-interactive);background:transparent;color:var(--qf-text-primary)}
.semantic-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;padding-block:24px;border-block-end:1px solid var(--qf-border-subtle)}
.semantic-row h3{font-size:var(--qf-type-body-size);font-weight:500;line-height:1.4;margin:0}
.semantic-row header p{font-size:var(--qf-type-caption-size);margin-block:4px 0}
.semantic-feedback-example,.semantic-example{display:flex;align-items:center;gap:12px;padding:16px;min-block-size:56px}
.semantic-feedback-example{border-inline-start:3px solid var(--semantic-signal);background:var(--qf-color-website-light-white);color:var(--qf-color-sidra-900)}
.semantic-feedback-example .foundation-icon{color:var(--semantic-signal)}
.semantic-mapping{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-block-start:8px;font-size:var(--qf-type-caption-size);color:var(--qf-text-secondary)}
.semantic-mapping code{overflow-wrap:anywhere}.semantic-mapping>i{inline-size:12px;block-size:12px;border:1px solid var(--qf-border-subtle)}
.semantic-themed-example{background:var(--qf-layer);color:var(--qf-text-primary)}
.semantic-surface{border:1px solid var(--qf-border-subtle)}
.semantic-action-sample{display:inline-block;padding:12px 16px}
.semantic-control-sample{display:inline-block;min-inline-size:min(100%,240px);padding:12px 16px;border:1px solid;background:var(--qf-layer);color:var(--qf-text-primary)}
.semantic-control-sample.is-focused{border-width:2px}
.semantic-error-sample,.semantic-accent-sample{display:flex;align-items:center;gap:12px;padding:16px}
.semantic-error-sample{color:var(--qf-support-error)}.semantic-accent-sample>span{inline-size:24px;block-size:24px}
.semantic-references{border-block-end:1px solid var(--qf-border-subtle)}
.semantic-references>summary,.pair-custom>summary{display:flex;align-items:center;gap:12px;padding-block:20px;cursor:pointer;font-size:var(--qf-type-body-size);list-style:none}
.semantic-references>summary::-webkit-details-marker,.pair-custom>summary::-webkit-details-marker{display:none}
.semantic-references:not([open])>summary .foundation-icon,.pair-custom:not([open])>summary .foundation-icon{transform:rotate(-90deg)}
[dir=rtl] .semantic-references:not([open])>summary .foundation-icon,[dir=rtl] .pair-custom:not([open])>summary .foundation-icon{transform:rotate(90deg)}

/* Keep results readable independently of deliberately failing color samples. */
.accessibility-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-block:24px}
.accessibility-toolbar>.foundation-library{min-inline-size:0}
.accessibility-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.accessibility-card{min-inline-size:0;border:1px solid var(--qf-border-subtle);background:var(--qf-layer);color:var(--qf-text-primary)}
.accessibility-swatch{display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center;min-block-size:104px;font-size:var(--qf-type-heading-medium-size);line-height:1.2}
.accessibility-info{padding:16px}
.accessibility-card h3{font-size:var(--qf-type-body-size);font-weight:500;line-height:1.4;margin:0}
.accessibility-card code{display:block;font-size:var(--qf-type-caption-size);color:var(--qf-text-secondary);margin-block-start:4px}
.accessibility-recommendation{display:flex;gap:8px;align-items:center;font-size:var(--qf-type-caption-size);margin-block:12px}
.accessibility-results{border-block-start:1px solid var(--qf-border-subtle);padding-block-start:8px}
.accessibility-verdict{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;font-size:var(--qf-type-caption-size);font-variant-numeric:tabular-nums;line-height:1.6}
.accessibility-verdict>span:last-child{margin-inline-start:auto}
.pair-custom{margin-block-start:24px;border-block-end:1px solid var(--qf-border-subtle)}
.pair-explorer .qf .qf-select-control select{padding-inline-end:56px}
.pair-explorer .qf .qf-select-caret{inset-inline-end:20px}
@media(max-width:900px){.accessibility-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.semantic-heading{flex-direction:column;gap:16px}.semantic-row{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:20px}.semantic-row header p{margin:4px 0 0}.semantic-colors #semantic-group>div[role=group]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.semantic-colors #semantic-group button{justify-content:start}.accessibility-toolbar{grid-template-columns:1fr;gap:16px}.accessibility-grid{grid-template-columns:1fr}}