.tbd-contrast-checker,
.tbd-contrast-checker *{box-sizing:border-box}

html body .wp-block-the-brand-deco-contrast-checker.alignfull.tbd-contrast-checker{
  --tbd-cc-ink:var(--wp--preset--color--contrast,#171512);
  --tbd-cc-muted:#6f6a61;
  --tbd-cc-page:var(--wp--preset--color--base,#f7f3ea);
  --tbd-cc-surface:rgba(255,255,255,.42);
  --tbd-cc-surface-strong:rgba(255,255,255,.68);
  --tbd-cc-border:rgba(23,21,18,.17);
  --tbd-cc-border-strong:rgba(23,21,18,.28);
  --tbd-cc-focus:#365cf5;
  --tbd-cc-success:#3d6a50;
  --tbd-cc-danger:#8b2e2e;
  --tbd-cc-button:#151412;
  --tbd-cc-button-text:#fffdf8;
  --tbd-cc-display:var(--wp--preset--font-family--heading,Georgia,"Times New Roman",serif);
  --tbd-cc-ui:var(--wp--preset--font-family--body,inherit);
  position:relative!important;
  left:50%!important;
  width:min(1320px,calc(100vw - 64px))!important;
  max-width:none!important;
  margin:clamp(1.75rem,3vw,3.5rem) 0 2.5rem!important;
  transform:translateX(-50%)!important;
  color:var(--tbd-cc-ink);
  font-family:var(--tbd-cc-ui);
  line-height:1.48
}

.tbd-cc-shell{border-top:1px solid var(--tbd-cc-border-strong);border-bottom:1px solid var(--tbd-cc-border-strong);padding:18px 0 20px}
.tbd-cc-metrics{display:grid;grid-template-columns:1fr 1fr minmax(180px,.7fr);border-top:1px solid var(--tbd-cc-border);border-bottom:1px solid var(--tbd-cc-border);margin-bottom:18px}
.tbd-cc-metric{min-height:78px;padding:13px 17px;border-right:1px solid var(--tbd-cc-border);display:flex;align-items:center;gap:13px}
.tbd-cc-metric:last-child{border-right:0;justify-content:center;text-align:center;display:grid;gap:2px}
.tbd-cc-metric small{display:block;color:var(--tbd-cc-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.tbd-cc-metric strong{display:block;font-size:15px;font-weight:650;font-variant-numeric:tabular-nums}
.tbd-cc-ratio strong{font-family:var(--tbd-cc-display);font-size:30px;font-weight:500}
.tbd-cc-dot{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid var(--tbd-cc-border-strong);box-shadow:inset 0 0 0 3px rgba(255,255,255,.46)}

.tbd-cc-workspace{display:grid;grid-template-columns:minmax(250px,290px) minmax(0,1fr) minmax(280px,330px);gap:18px;align-items:stretch}
.tbd-cc-panel,.tbd-cc-card{border:1px solid var(--tbd-cc-border);border-radius:3px;background:var(--tbd-cc-surface)}
.tbd-cc-panel{padding:20px;min-width:0}
.tbd-cc-heading{margin-bottom:17px}
.tbd-cc-heading h2,.tbd-cc-card h2{font-family:var(--tbd-cc-display);font-size:21px;line-height:1.13;margin:0;color:var(--tbd-cc-ink);font-weight:500;letter-spacing:-.01em}
.tbd-cc-heading p,.tbd-cc-card p{margin:6px 0 0;color:var(--tbd-cc-muted);font-size:12px;line-height:1.55}

.tbd-cc-controls label{display:block;font-size:11px;font-weight:650;margin:15px 0 7px;letter-spacing:.025em}
.tbd-cc-input-row{display:grid;grid-template-columns:46px 1fr auto;gap:9px;align-items:center}
.tbd-cc-input-row input[type=color]{width:46px;height:45px;padding:3px;border:1px solid var(--tbd-cc-border-strong);border-radius:2px;background:transparent}
.tbd-cc-input-row input[type=text],.tbd-cc-controls textarea{width:100%;border:1px solid var(--tbd-cc-border-strong);border-radius:2px;background:rgba(255,255,255,.34);color:var(--tbd-cc-ink);padding:0 12px;font:inherit;font-size:13px}
.tbd-cc-input-row input[type=text]{height:45px}
.tbd-cc-controls textarea{min-height:84px;padding:10px 12px;resize:vertical;line-height:1.45}
.tbd-cc-input-row input[type=text]:hover,.tbd-cc-controls textarea:hover{border-color:rgba(23,21,18,.42)}
.tbd-cc-error{font-size:11px;color:var(--tbd-cc-danger);min-height:16px;margin:4px 0 0}
.tbd-cc-icon-button,.tbd-cc-button{appearance:none;border:1px solid var(--tbd-cc-border-strong);background:transparent;color:var(--tbd-cc-ink);font:inherit;font-weight:600;cursor:pointer;transition:background-color .14s ease,color .14s ease,border-color .14s ease,transform .14s ease}
.tbd-cc-icon-button{width:45px;height:45px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:2px}
.tbd-cc-icon-button svg,.tbd-cc-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.tbd-cc-button{min-height:43px;border-radius:2px;padding:9px 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px}
.tbd-cc-button-primary{background:var(--tbd-cc-button);color:var(--tbd-cc-button-text);border-color:var(--tbd-cc-button)}
.tbd-cc-icon-button:hover,.tbd-cc-button-secondary:hover{background:rgba(23,21,18,.055);border-color:rgba(23,21,18,.42)}
.tbd-cc-button-primary:hover{background:#2a2824;border-color:#2a2824}
.tbd-cc-button:active,.tbd-cc-icon-button:active{transform:translateY(1px)}
.tbd-cc-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}

.tbd-cc-preview-panel{display:flex;flex-direction:column}
.tbd-cc-preview{min-height:390px;border:1px solid var(--tbd-cc-border);display:flex;align-items:center;justify-content:center;padding:clamp(24px,5vw,64px);transition:background-color .15s ease,color .15s ease}
.tbd-cc-preview-content{max-width:600px;text-align:left}
.tbd-cc-preview-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-bottom:20px}
.tbd-cc-preview h3{font-family:var(--tbd-cc-display);font-size:clamp(32px,4vw,54px);line-height:1.02;font-weight:500;margin:0 0 20px;color:inherit}
.tbd-cc-preview p{font-size:16px;line-height:1.65;margin:0 0 24px;color:inherit;opacity:.9}
.tbd-cc-preview-button{display:inline-flex;min-height:42px;align-items:center;padding:0 16px;border:1px solid currentColor;font-size:12px;font-weight:700}

.tbd-cc-results-list{display:grid;gap:9px}
.tbd-cc-check{border:1px solid var(--tbd-cc-border);padding:13px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;background:transparent}
.tbd-cc-check strong{font-size:12px}
.tbd-cc-check small{grid-column:1/2;color:var(--tbd-cc-muted);font-size:10px}
.tbd-cc-check-badge{grid-column:2/3;grid-row:1/3;min-width:76px;padding:5px 8px;border:1px solid var(--tbd-cc-border);text-align:center;font-size:10px;font-weight:750}
.tbd-cc-check.is-pass .tbd-cc-check-badge{background:rgba(61,106,80,.08);border-color:rgba(61,106,80,.22);color:#355c46}
.tbd-cc-check.is-fail .tbd-cc-check-badge{background:rgba(139,46,46,.055);border-color:rgba(139,46,46,.18);color:#7b2d2d}
.tbd-cc-threshold-note{font-size:10px!important;margin-top:15px!important}

.tbd-cc-details{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;margin-top:18px}
.tbd-cc-card{padding:18px;min-width:0}
.tbd-cc-suggestions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}
.tbd-cc-suggestion{border:1px solid var(--tbd-cc-border);padding:13px;background:var(--tbd-cc-surface-strong)}
.tbd-cc-suggestion-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tbd-cc-suggestion-swatch{width:34px;height:34px;border-radius:50%;border:1px solid var(--tbd-cc-border-strong);flex:0 0 34px}
.tbd-cc-suggestion strong{display:block;font-size:12px}
.tbd-cc-suggestion span{font-size:10px;color:var(--tbd-cc-muted)}
.tbd-cc-suggestion-actions{display:flex;gap:7px;margin-top:11px}
.tbd-cc-suggestion-actions .tbd-cc-button{flex:1;min-height:36px;padding:6px 9px;font-size:10px}
.tbd-cc-suggestion.is-unavailable{opacity:.7}
.tbd-cc-suggestion.is-unavailable .tbd-cc-suggestion-swatch{background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(23,21,18,.07) 4px,rgba(23,21,18,.07) 8px)}

.tbd-cc-tech-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin-top:15px;font-size:11px}
.tbd-cc-tech-grid dt{color:var(--tbd-cc-muted)}
.tbd-cc-tech-grid dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tbd-cc-best{margin-top:14px!important;padding-top:12px;border-top:1px solid var(--tbd-cc-border)}
.tbd-cc-share-actions{display:grid;gap:9px;margin-top:15px}
.tbd-cc-status{min-height:22px;margin:14px 2px 0;color:var(--tbd-cc-success);font-size:11px;font-weight:600}
.tbd-cc-note{margin:6px 2px 0;color:var(--tbd-cc-muted);font-size:10px}
.tbd-cc-notice{border-left:2px solid #8d6600;padding:10px 12px;background:rgba(255,248,223,.7)}

.tbd-contrast-checker :focus-visible{outline:2px solid var(--tbd-cc-focus);outline-offset:3px}
.tbd-contrast-checker button:disabled{opacity:.48;cursor:not-allowed}

@media (max-width:1080px){
  .tbd-cc-workspace{grid-template-columns:minmax(240px,280px) minmax(0,1fr)}
  .tbd-cc-results{grid-column:1/-1}
  .tbd-cc-results-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tbd-cc-check{grid-template-columns:1fr;align-content:start}
  .tbd-cc-check small{grid-column:auto}
  .tbd-cc-check-badge{grid-column:auto;grid-row:auto;margin-top:8px}
  .tbd-cc-details{grid-template-columns:1fr 1fr}
  .tbd-cc-details>.tbd-cc-card:first-child{grid-column:1/-1}
}
@media (max-width:760px){
  .tbd-contrast-checker{width:calc(100vw - 20px)!important}
  .tbd-cc-metrics{grid-template-columns:1fr 1fr}
  .tbd-cc-ratio{grid-column:1/-1;border-top:1px solid var(--tbd-cc-border)}
  .tbd-cc-metric:nth-child(2){border-right:0}
  .tbd-cc-workspace{grid-template-columns:1fr;gap:12px}
  .tbd-cc-results{grid-column:auto}
  .tbd-cc-results-list{grid-template-columns:1fr 1fr}
  .tbd-cc-details{grid-template-columns:1fr;gap:12px}
  .tbd-cc-details>.tbd-cc-card:first-child{grid-column:auto}
  .tbd-cc-preview{min-height:330px;padding:32px 22px}
}
@media (max-width:480px){
  .tbd-cc-metrics{grid-template-columns:1fr}
  .tbd-cc-metric,.tbd-cc-metric:nth-child(n){border-right:0;border-top:1px solid var(--tbd-cc-border)}
  .tbd-cc-metric:first-child{border-top:0}
  .tbd-cc-ratio{grid-column:auto}
  .tbd-cc-input-row{grid-template-columns:42px 1fr 42px}
  .tbd-cc-input-row input[type=color]{width:42px}
  .tbd-cc-actions,.tbd-cc-results-list,.tbd-cc-suggestions{grid-template-columns:1fr}
  .tbd-cc-preview h3{font-size:34px}
}
@media (prefers-reduced-motion:reduce){.tbd-contrast-checker *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
