.pp-contrast-tool {
    max-width: 1060px;
    margin: 24px auto;
    color: var(--pp-text);
}

.pp-contrast-intro { margin-bottom: 28px; }
.pp-contrast-intro__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.pp-contrast-intro h2 { margin: 8px 0; color: var(--pp-text); font-size: clamp(1.7rem, 4vw, 2.5rem); }
.pp-contrast-intro p, .pp-contrast-help { color: var(--pp-text-soft); }
.pp-contrast-eyebrow { color: var(--pp-accent); font-size: .75rem; font-weight: 750; letter-spacing: .12em; }
.pp-contrast-fullscreen-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: 0 0 auto; padding: 9px 14px; border: 1px solid var(--pp-accent); border-radius: 11px; background: var(--pp-accent-soft); color: var(--pp-accent); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.pp-contrast-fullscreen-button:hover { background: var(--pp-accent); color: var(--pp-surface); }
.pp-contrast-fullscreen-button span { font-size: 1.2rem; line-height: 1; }
.pp-contrast-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
.pp-contrast-controls { min-width: 0; }
.pp-contrast-results { display: grid; gap: 16px; min-width: 0; }
.pp-contrast-results { position: sticky; top: 82px; }
.pp-contrast-panel { padding: clamp(18px, 3vw, 26px); background: var(--pp-surface); border: 1px solid var(--pp-line); border-radius: 20px; box-shadow: 0 8px 22px #0000000a; }
.pp-contrast-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pp-contrast-panel h3 { margin: 6px 0 0; color: var(--pp-text); font-size: 1.08rem; }
.pp-contrast-config-panel { padding: 0; overflow: hidden; }
.pp-contrast-config-panel__header { padding: clamp(20px, 3vw, 28px); background: linear-gradient(135deg, var(--pp-surface) 0%, var(--pp-accent-soft) 180%); }
.pp-contrast-config-panel__header h3 { margin: 6px 0; font-size: 1.25rem; }
.pp-contrast-config-panel__header p { margin: 0; color: var(--pp-text-soft); font-size: .88rem; }
.pp-contrast-config-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--pp-line); }
.pp-contrast-control-section { min-width: 0; padding: clamp(18px, 2.4vw, 24px); border-bottom: 1px solid var(--pp-line); }
.pp-contrast-control-section:last-child { border-bottom: 0; }
.pp-contrast-section-heading { margin-bottom: 15px; }
.pp-contrast-section-heading h4 { margin: 5px 0 0; color: var(--pp-text); font-size: 1rem; }
.pp-contrast-section-heading--action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-contrast-panel label { display: block; color: var(--pp-text); font-size: .9rem; font-weight: 650; }
.pp-contrast-panel input:not([type=color]), .pp-contrast-panel select { box-sizing: border-box; width: 100%; min-height: 46px; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface); color: var(--pp-text); font: inherit; }
.pp-contrast-panel input:focus-visible, .pp-contrast-panel select:focus-visible, .pp-contrast-panel button:focus-visible { outline: 3px solid var(--pp-accent); outline-offset: 3px; }
.pp-contrast-panel input.is-invalid { border-color: #d23b48; }
.pp-contrast-help { margin: 8px 0 0; font-size: .82rem; line-height: 1.45; }
.pp-contrast-preset-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-contrast-chip, .pp-contrast-button, .pp-contrast-icon-button, .pp-contrast-toggle button, .pp-contrast-cvd button { min-height: 44px; border: 1px solid var(--pp-line); border-radius: 10px; background: var(--pp-surface); color: var(--pp-text); font: inherit; cursor: pointer; touch-action: manipulation; }
.pp-contrast-chip { padding: 8px 12px; font-size: .82rem; }
.pp-contrast-chip:hover, .pp-contrast-chip.is-active, .pp-contrast-toggle button[aria-selected=true] { border-color: var(--pp-accent); background: var(--pp-accent-soft); color: var(--pp-accent); font-weight: 700; }
.pp-contrast-color-fields, .pp-contrast-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pp-contrast-control-section > label + .pp-contrast-two-columns { margin-top: 14px; }
.pp-contrast-control-section .pp-contrast-two-columns + label { margin-top: 14px; }
.pp-contrast-color-input { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pp-contrast-color-input input[type=color] { width: 46px; height: 46px; flex: 0 0 46px; padding: 3px; border: 1px solid var(--pp-line); border-radius: 10px; background: transparent; cursor: pointer; }
.pp-contrast-color-input input[type=text] { min-width: 0; margin: 0; font-family: ui-monospace, "Cascadia Mono", monospace; text-transform: uppercase; }
.pp-contrast-icon-button { width: 44px; font-size: 1.25rem; }
.pp-contrast-icon-button:hover, .pp-contrast-button:hover, .pp-contrast-cvd button:hover { border-color: var(--pp-accent); }
.pp-contrast-toggle { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--pp-line); border-radius: 13px; }
.pp-contrast-toggle button { flex: 1; border: 0; }
.pp-contrast-cvd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; font-size: .78rem; }
.pp-contrast-cvd > span { flex-basis: 100%; margin-bottom: 2px; color: var(--pp-text-soft); font-weight: 650; }
.pp-contrast-cvd button { min-height: 36px; padding: 6px 9px; font-size: .76rem; }
.pp-contrast-cvd button.is-active { border-color: var(--pp-accent); color: var(--pp-accent); font-weight: 700; }
.pp-contrast-live, .pp-contrast-summary { color: var(--pp-text-soft); font-size: .78rem; }
.pp-contrast-live::before { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #22c55e; content: ''; }
.pp-contrast-preview { min-height: 280px; padding: clamp(24px, 5vw, 44px); overflow: hidden; border: 1px solid var(--pp-line); border-radius: 16px; background: var(--contrast-bg, #fff); color: var(--contrast-fg, #111); transition: background-color .2s ease, color .2s ease, filter .3s ease; }
.pp-contrast-preview__text h4, .pp-contrast-preview__component h4 { margin: 0 0 12px; color: inherit; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.pp-contrast-preview__text p, .pp-contrast-preview__component p { max-width: 560px; margin: 0 0 16px; color: inherit; line-height: 1.6; }
.pp-contrast-preview a { color: inherit; font-weight: 650; text-decoration: underline; }
.pp-contrast-preview__component { display: none; max-width: 460px; padding: 22px; border: 1px solid currentColor; border-radius: 14px; }
.pp-contrast-preview__component h4 { font-size: 1.35rem; }
.pp-contrast-preview__component button { min-height: 44px; padding: 9px 15px; border: 1px solid currentColor; border-radius: 9px; background: var(--contrast-fg); color: var(--contrast-bg); font: inherit; font-weight: 700; cursor: pointer; }
.pp-contrast-tool[data-preview-mode=component] .pp-contrast-preview__text { display: none; }
.pp-contrast-tool[data-preview-mode=component] .pp-contrast-preview__component { display: block; }
.pp-contrast-preview__label { display: block; margin-bottom: 12px; font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.pp-contrast-feedback { padding: 12px 14px; border: 1px solid var(--pp-line); border-radius: 11px; font-size: .9rem; font-weight: 700; text-align: center; }
.pp-contrast-feedback.is-pass { border-color: #22c55e66; background: #22c55e12; color: #15803d; }
.pp-contrast-feedback.is-fail { border-color: #ef444466; background: #ef444412; color: #b91c1c; }
.pp-contrast-primary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.pp-contrast-metric { padding: 15px; border: 1px solid var(--pp-line); border-radius: 13px; }
.pp-contrast-metric span { display: block; color: var(--pp-text-soft); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.pp-contrast-metric strong { display: block; margin: 5px 0; color: var(--pp-text); font-size: clamp(1.6rem, 4vw, 2.2rem); font-variant-numeric: tabular-nums; }
.pp-contrast-metric small { display: block; min-height: 2.4em; color: var(--pp-text-soft); font-size: .75rem; line-height: 1.25; }
.pp-contrast-gauge { position: relative; height: 9px; margin: 18px 0 8px; border-radius: 5px; background: var(--pp-surface-muted); }
.pp-contrast-gauge__fill { width: 0; height: 100%; border-radius: inherit; background: #ef4444; transition: width .3s ease, background .3s ease; }
.pp-contrast-gauge__fill.is-readable { background: linear-gradient(90deg, #f59e0b, #22c55e); }
.pp-contrast-gauge__fill.is-strong { background: linear-gradient(90deg, #22c55e, #15803d); }
.pp-contrast-gauge i { position: absolute; top: -3px; width: 2px; height: 15px; background: var(--pp-text-soft); opacity: .55; }
.pp-contrast-apca-hint, .pp-contrast-luminance { margin: 8px 0; color: var(--pp-text-soft); font-size: .78rem; text-align: center; }
.pp-contrast-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.pp-contrast-checks > div { padding: 11px 7px; border: 1px solid var(--pp-line); border-radius: 11px; text-align: center; }
.pp-contrast-checks span { display: block; color: var(--pp-text-soft); font-size: .72rem; }
.pp-contrast-checks b { display: block; margin-top: 4px; font-size: .78rem; }
.pp-contrast-checks .is-pass { border-color: #22c55e66; background: #22c55e0d; }
.pp-contrast-checks .is-pass b { color: #15803d; }
.pp-contrast-checks .is-fail { border-color: #ef444466; background: #ef44440a; }
.pp-contrast-checks .is-fail b { color: #b91c1c; }
.pp-contrast-suggestion { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pp-line); font-size: .85rem; }
.pp-contrast-suggestion > strong { display: block; margin-bottom: 4px; }
.pp-contrast-suggestion p { margin: 0 0 10px; color: var(--pp-text-soft); }
.pp-contrast-suggestion__success { color: #15803d !important; }
.pp-contrast-suggestion { display: flex; flex-wrap: wrap; gap: 9px; }
.pp-contrast-suggestion > strong, .pp-contrast-suggestion > p { flex-basis: 100%; }
.pp-contrast-suggestion__swatch { width: 25px; height: 25px; flex: 0 0 25px; border: 1px solid #0003; border-radius: 7px; }
button.pp-contrast-suggestion { display: flex; flex: 1 1 170px; align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--pp-line); border-radius: 11px; background: var(--pp-surface); color: var(--pp-text); text-align: left; }
button.pp-contrast-suggestion:hover { border-color: var(--pp-accent); }
.pp-contrast-suggestion small { display: block; margin-top: 2px; color: var(--pp-text-soft); font-size: .72rem; }
.pp-contrast-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pp-contrast-button { padding: 9px 13px; font-size: .82rem; }
.pp-contrast-button--primary { border-color: var(--pp-accent); background: var(--pp-accent); color: var(--pp-surface); font-weight: 700; }
.pp-contrast-button--quiet { background: transparent; color: var(--pp-text-soft); }
.pp-contrast-history-panel summary { cursor: pointer; font-weight: 700; }
.pp-contrast-history-panel summary span { margin-left: 5px; color: var(--pp-text-soft); font-size: .78rem; font-weight: 400; }
.pp-contrast-history-panel [data-contrast-history] { display: grid; gap: 6px; margin: 16px 0; }
.pp-contrast-history__item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 7px 9px; border: 1px solid var(--pp-line); border-radius: 9px; background: var(--pp-surface); color: var(--pp-text); font: inherit; font-size: .76rem; text-align: left; cursor: pointer; }
.pp-contrast-history__item:hover { border-color: var(--pp-accent); }
.pp-contrast-history__swatches { display: inline-flex; gap: 3px; }
.pp-contrast-history__swatches i { width: 20px; height: 20px; border: 1px solid #0003; border-radius: 5px; }
.pp-contrast-empty { margin: 12px 0; color: var(--pp-text-soft); font-size: .82rem; }
@media (prefers-color-scheme: dark) { .pp-contrast-feedback.is-pass, .pp-contrast-checks .is-pass { color: #86efac; } .pp-contrast-feedback.is-fail, .pp-contrast-checks .is-fail { color: #fca5a5; } }
@media (max-width: 820px) { .pp-contrast-layout { grid-template-columns: 1fr; } .pp-contrast-results { position: static; } }
@media (max-width: 620px) { .pp-contrast-intro__header { display: block; } .pp-contrast-fullscreen-button { margin-top: 14px; } }
@media (max-width: 620px) { .pp-contrast-config-grid { grid-template-columns: 1fr; } .pp-contrast-control-section, .pp-contrast-control-section:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--pp-line); } .pp-contrast-control-section:last-child { border-bottom: 0; } }
@media (max-width: 520px) { .pp-contrast-color-fields, .pp-contrast-two-columns, .pp-contrast-primary-metrics, .pp-contrast-checks { grid-template-columns: 1fr; } .pp-contrast-actions .pp-contrast-button { flex: 1 1 140px; } .pp-contrast-live { display: none; } }

#tool-contrast.contrast-fullscreen, #tool-contrast:fullscreen { box-sizing: border-box; width: 100%; max-width: none; min-height: 100dvh; margin: 0; padding: clamp(18px, 3vw, 38px); overflow: auto; background: var(--pp-bg, var(--pp-surface-muted, #f5f7fb)); }
#tool-contrast.contrast-fullscreen .pp-contrast-layout, #tool-contrast:fullscreen .pp-contrast-layout { max-width: 1420px; margin: 0 auto; grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); gap: clamp(24px, 3vw, 42px); }
#tool-contrast.contrast-fullscreen .pp-contrast-results, #tool-contrast:fullscreen .pp-contrast-results { position: sticky; top: 18px; }
#tool-contrast.contrast-fullscreen .pp-contrast-preview, #tool-contrast:fullscreen .pp-contrast-preview { min-height: 360px; display: flex; align-items: center; }
#tool-contrast.contrast-fullscreen .pp-contrast-preview__text, #tool-contrast:fullscreen .pp-contrast-preview__text, #tool-contrast.contrast-fullscreen .pp-contrast-preview__component, #tool-contrast:fullscreen .pp-contrast-preview__component { width: 100%; }
@media (max-width: 900px) { #tool-contrast.contrast-fullscreen .pp-contrast-layout, #tool-contrast:fullscreen .pp-contrast-layout { grid-template-columns: 1fr; } #tool-contrast.contrast-fullscreen .pp-contrast-results, #tool-contrast:fullscreen .pp-contrast-results { position: static; } }
@media (prefers-reduced-motion: reduce) { .pp-contrast-preview, .pp-contrast-gauge__fill { transition: none; } }

/* Size the workspace against its available column, including the site sidebar. */
#tool-contrast { container: contrast / inline-size; }
#tool-contrast .pp-contrast-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
#tool-contrast .pp-contrast-results { position: static; }
#tool-contrast .pp-contrast-intro__header { flex-wrap: wrap; gap: 16px; }
#tool-contrast .pp-contrast-intro__header > div { flex: 1 1 360px; }
#tool-contrast .pp-contrast-intro h2 { margin: 8px 0 10px; font-size: 1.75rem; line-height: 1.25; }
#tool-contrast .pp-contrast-intro p { margin: 0; font-size: .95rem; line-height: 1.6; }
#tool-contrast .pp-contrast-config-panel__header p { margin: 8px 0 0; font-size: .85rem; line-height: 1.5; }
#tool-contrast .pp-contrast-panel { border-radius: 14px; box-shadow: none; }
#tool-contrast .pp-contrast-config-panel__header { background: var(--pp-surface); padding: 20px; }
#tool-contrast .pp-contrast-control-section { padding: 20px; }
#tool-contrast .pp-contrast-section-heading .pp-contrast-eyebrow { display: none; }
#tool-contrast .pp-contrast-panel h3 { font-size: 1.15rem; line-height: 1.35; margin: 0; }
#tool-contrast .pp-contrast-section-heading h4 { font-size: .95rem; line-height: 1.4; margin: 0; font-weight: 650; }
#tool-contrast .pp-contrast-panel__heading { flex-wrap: wrap; }
#tool-contrast .pp-contrast-color-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
#tool-contrast .pp-contrast-preview { box-sizing: border-box; min-height: 240px; padding: 28px; overflow-wrap: anywhere; }
#tool-contrast .pp-contrast-preview p { font-size: inherit; font-weight: inherit; }
#tool-contrast .pp-contrast-preview a { display: inline; font-size: inherit; line-height: inherit; font-weight: 500; }
#tool-contrast .pp-contrast-preview h4 { font-size: 1.35em; line-height: 1.35; margin: 0 0 16px; }
#tool-contrast .pp-contrast-preview__component { box-sizing: border-box; }
#tool-contrast .pp-contrast-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
#tool-contrast.contrast-fullscreen { position: fixed; inset: 0; z-index: 10000; height: 100dvh; }
#tool-contrast.contrast-fullscreen .pp-contrast-intro { max-width: 1420px; margin: 0 auto 24px; }
@container contrast (min-width: 740px) {
    #tool-contrast .pp-contrast-layout { grid-template-columns: 310px minmax(0, 1fr); }
}
@container contrast (max-width: 480px) {
    #tool-contrast .pp-contrast-panel { padding: 16px; }
    #tool-contrast .pp-contrast-config-panel { padding: 0; }
    #tool-contrast .pp-contrast-preview { padding: 20px; }
    #tool-contrast .pp-contrast-primary-metrics { grid-template-columns: 1fr; }
    #tool-contrast .pp-contrast-checks { grid-template-columns: 1fr; }
}