/**
 * Colour Contrast Checker — component styles
 *
 * Follows the house white-card pattern (bg-heading, rounded-3xl, text-dark)
 * used by block-process and block-price_tiers. Requirement ratios are
 * bg-secondary pill tags, the same component as the process card's
 * work tags.
 *
 * Lives outside Tailwind so state classes toggled by JS are never dropped
 * by the v4 scanner. Layout is Tailwind, in the template.
 *
 * Every colour below is checked against the card (#FAFAFA):
 *   #232323 15.06:1   #5A5A5A 6.61:1   #146C43 6.18:1
 *   #B3261E 6.26:1    #BA126A 5.95:1   #767676 4.35:1
 */

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */

.cc-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #232323;
}

.cc-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #232323;
}

.cc-eyebrow::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 999px;
  background-color: #ba126a;
}

/* ---------------------------------------------------------------
   The headline figure — same treatment as the homepage stat cards
   --------------------------------------------------------------- */

.cc-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1rem;
}

.cc-ratio {
  font-size: clamp(2.75rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #ba126a;
}

.cc-ratio__unit {
  font-size: 0.45em;
  font-weight: 600;
}

.cc-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.cc-status--pass {
  border-color: #146c43;
  background-color: #e3f4ea;
  color: #0f5231;
}

.cc-status--fail {
  border-color: #b3261e;
  background-color: #fdeceb;
  color: #8f1d16;
}

.cc-verdict {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5a5a5a;
}

/* ---------------------------------------------------------------
   The colour pair
   --------------------------------------------------------------- */

.cc-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.cc-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
}

.cc-col__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #232323;
}

/* Swatch sits inside the field as a dot, not beside it as a slab. */
.cc-input {
  position: relative;
  display: block;
}

/* !important on the box: the theme sets width/height on bare inputs and
   would otherwise stretch this into a pill. */
.cc-dot,
input[type="color"].cc-dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.5rem;
  transform: translateY(-50%);
  inline-size: 1.75rem !important;
  block-size: 1.75rem !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  padding: 0 !important;
  border: 1px solid #767676 !important;
  border-radius: 999px !important;
  background: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.cc-dot::-webkit-color-swatch-wrapper { padding: 0; }
.cc-dot::-webkit-color-swatch { border: none; border-radius: 999px; }
.cc-dot::-moz-color-swatch { border: none; border-radius: 999px; }

/* !important throughout: the theme's legacy style.css styles bare
   input[type="text"] and wins on specificity. */
.cc-hex,
input[type="text"].cc-hex {
  inline-size: 100%;
  padding: 0.6875rem 0.75rem 0.6875rem 2.75rem !important;
  border: 1px solid #767676 !important;
  border-radius: 0.75rem !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #232323 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.cc-hex[aria-invalid="true"],
input[type="text"].cc-hex[aria-invalid="true"] {
  border-color: #b3261e !important;
  border-width: 2px !important;
}

.cc-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  border: 1px solid #767676;
  border-radius: 999px;
  background-color: #ffffff;
  color: #232323;
  cursor: pointer;
}

.cc-swap:hover {
  border-color: #ba126a;
  background-color: #ffcfe8;
  color: #8e064c;
}

/* Slider track is painted with the field's own hue, so the control
   previews the result of moving it. */
.cc-slider,
input[type="range"].cc-slider {
  inline-size: 100%;
  block-size: 1.125rem;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

.cc-slider::-webkit-slider-runnable-track {
  block-size: 0.5rem;
  border: 1px solid #767676;
  border-radius: 999px;
  background: var(--cc-track, #ffffff);
}

.cc-slider::-moz-range-track {
  block-size: 0.5rem;
  border: 1px solid #767676;
  border-radius: 999px;
  background: var(--cc-track, #ffffff);
}

.cc-slider::-webkit-slider-thumb {
  appearance: none;
  margin-block-start: -0.28125rem;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #232323;
  box-shadow: 0 0 0 1px #767676;
}

.cc-slider::-moz-range-thumb {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #232323;
  box-shadow: 0 0 0 1px #767676;
}

.cc-hex-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #8f1d16;
  font-size: 0.875rem;
  font-weight: 500;
}

.cc-hex-error[hidden] { display: none; }

.cc-rule {
  block-size: 1px;
  border: 0;
  margin: 0;
  background-color: #d9d9d9;
}

/* ---------------------------------------------------------------
   Presets
   Deliberately NOT the bg-secondary tag component: that one labels
   things (the process card's work tags) and these are controls, so
   they need to look pressable. Each carries the two colours it loads.
   --------------------------------------------------------------- */

.cc-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.cc-presets__label {
  font-size: 0.875rem;
  color: #5a5a5a;
}

.cc-preset {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.5rem;
  border: 1px solid #767676;
  border-radius: 999px;
  background-color: #ffffff;
  color: #232323;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.cc-preset:hover {
  border-color: #ba126a;
  background-color: #fff5fa;
}

/* One circle split on the diagonal, showing the pair this button loads.
   Two overlapping dots read as a toggle switch, which this is not. */
.cc-preset__pair {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: 0 0 auto;
  border: 1px solid #767676;
  border-radius: 999px;
  background-image: linear-gradient(
    135deg,
    var(--cc-a, #000) 0 50%,
    var(--cc-b, #fff) 50% 100%
  );
}

/* ---------------------------------------------------------------
   Results table
   --------------------------------------------------------------- */

.cc-table {
  inline-size: 100%;
  border-collapse: collapse;
  margin: 0;
}

.cc-table th,
.cc-table td {
  padding: 0.875rem 0.5rem;
  border: 0;
  border-block-end: 1px solid #e2e2e2;
  text-align: start;
  vertical-align: top;
  background: none;
  color: #232323;
}

.cc-table th:first-child,
.cc-table td:first-child { padding-inline-start: 0; }

.cc-table thead th {
  padding-block: 0 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #5a5a5a;
}

.cc-table thead th:not(:first-child),
.cc-table tbody td:not(:first-child) { inline-size: 6rem; }

.cc-table tbody tr:last-child th,
.cc-table tbody tr:last-child td { border-block-end: 0; }

.cc-table tbody th { font-weight: 600; }

.cc-cat__note {
  display: block;
  margin-block-start: 0.1875rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #5a5a5a;
}

/* Pass / fail. Icon shape differs as well as colour. */
.cc-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.cc-mark--pass { color: #146c43; }
.cc-mark--fail { color: #b3261e; }
.cc-mark--na   { color: #5a5a5a; font-weight: 400; }

/* The requirement, as a house pill tag rather than grey small print. */
.cc-req {
  display: inline-block;
  margin-block-start: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  background-color: #ffcfe8;
  color: #232323;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Suggestions
   --------------------------------------------------------------- */

.cc-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  align-self: flex-start;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background-color: #ba126a;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.cc-cta:hover { background-color: #8e064c; }

.cc-cta[hidden] { display: none; }

.cc-cta__chev { transition: transform 150ms ease; }

.cc-cta[aria-expanded="true"] .cc-cta__chev { transform: rotate(180deg); }

.cc-fixes[hidden] { display: none; }

.cc-fixes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cc-fix-intro {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #5a5a5a;
}

.cc-fix {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  inline-size: 100%;
  padding: 0.75rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.875rem;
  background-color: #ffffff;
  color: #232323;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 120ms linear, background-color 120ms linear;
}

.cc-fix:hover {
  border-color: #ba126a;
  background-color: #fff5fa;
}

.cc-fix__swatch {
  flex: 0 0 auto;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid #767676;
  border-radius: 0.625rem;
}

.cc-fix__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-inline-size: 0;
}

.cc-fix__what { font-weight: 600; font-size: 0.9375rem; }

.cc-fix__meta {
  font-size: 0.8125rem;
  color: #5a5a5a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cc-fix__apply {
  margin-inline-start: auto;
  flex: 0 0 auto;
  padding-inline-start: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ba126a;
}

/* ---------------------------------------------------------------
   Footer row
   --------------------------------------------------------------- */

.cc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.cc-foot__group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #232323;
}

.cc-select,
select.cc-select {
  padding: 0.4375rem 0.625rem !important;
  border: 1px solid #767676 !important;
  border-radius: 0.5rem !important;
  background-color: #ffffff !important;
  color: #232323 !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
}

.cc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0;
  border: 0;
  background: none;
  color: #ba126a;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cc-link:hover { color: #8e064c; }

.cc-status-msg {
  font-size: 0.875rem;
  color: #5a5a5a;
}

/* ---------------------------------------------------------------
   Reference table
   Sits inside the house white card. Every colour checked against
   that card (#FAFAFA): #232323 15.06:1, #5A5A5A 6.61:1,
   #767676 4.35:1 (UI only, never text), #232323 on #FFCFE8 11.48:1.
   --------------------------------------------------------------- */

.reftable {
  inline-size: 100%;
  border-collapse: collapse;
  /* Forces the horizontal scroll rather than crushing the columns. */
  min-inline-size: 46rem;
  margin: 0;
}

.reftable th,
.reftable td {
  padding: 1rem 0.75rem;
  border: 0;
  border-block-end: 1px solid #e2e2e2;
  text-align: start;
  vertical-align: middle;
  background: none;
  color: #232323;
}

.reftable th:first-child,
.reftable td:first-child { padding-inline-start: 0; }

.reftable thead th {
  padding-block: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #5a5a5a;
}

.reftable tbody tr:last-child th,
.reftable tbody tr:last-child td { border-block-end: 0; }

.reftable tbody th { font-weight: 600; }

.reftable__note {
  display: block;
  margin-block-start: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #5a5a5a;
}

/* The requirement, as the house pill tag. */
.ref-pill {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border-radius: 0.5rem;
  background-color: #ffcfe8;
  color: #232323;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ref-na {
  color: #5a5a5a;
  font-size: 0.875rem;
}

/* Specimens demonstrate SIZE, not colour, so they stay at full
   contrast rather than modelling the threshold they sit beside. */
.ref-demo {
  font-weight: 600;
  color: #232323;
  white-space: nowrap;
}

.ref-icon {
  color: #5a5a5a;
  font-size: 22px;
}

.ref-icon + .ref-icon { margin-inline-start: 0.5rem; }

.ref-swatch {
  display: inline-block;
  inline-size: 3.5rem;
  block-size: 1.5rem;
  border: 2px solid #767676;
  border-radius: 0.375rem;
  background-color: #ffffff;
}

.ref-foot {
  margin-block-start: 1.25rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid #e2e2e2;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #5a5a5a;
}

/* ---------------------------------------------------------------
   Preview — framed like a browser window so it reads as "a page"
   --------------------------------------------------------------- */

/* The frame now sits inside the white card, so its chrome is light.
   The border is #767676 rather than a hairline: the preview background
   is whatever colour the user picked, and a pale one would otherwise
   melt into the card behind it. */
.cc-frame {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #767676;
  border-radius: 1rem;
  background-color: #efefef;
}

/* Let the preview stretch to the height of the controls beside it,
   rather than leaving a hole in the grid. */
.cc-frame > .cc-preview {
  flex: 1 1 auto;
}

.cc-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.75rem 1rem;
  border-block-end: 1px solid #d9d9d9;
  background-color: #efefef;
}

.cc-frame__dot {
  inline-size: 0.6875rem;
  block-size: 0.6875rem;
  border-radius: 999px;
  background-color: #b7b7b7;
}

.cc-preview {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  min-block-size: 28rem;
  background-color: var(--cc-bg, #ffffff);
  color: var(--cc-fg, #000000);
  transition: background-color 120ms linear, color 120ms linear;
}

.cc-preview__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  margin: 0;
}

.cc-preview__h {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
  margin: 0;
}

.cc-preview__body {
  max-inline-size: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: inherit;
  margin: 0;
}

.cc-preview__small {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: inherit;
  margin: 0;
}

.cc-preview__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-preview__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: 0.25rem;
}

.cc-preview__btn {
  padding: 0.6875rem 1.5rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
}

.cc-preview__input {
  padding: 0.625rem 0.875rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------
   Focus
   The theme's global rule only covers links, so the tool's own
   controls would fall back to the browser default. Use the theme's
   light-background treatment (outline-hero-off-heading).
   --------------------------------------------------------------- */

.cc-card :is(button, input, select):focus-visible {
  outline: 3px solid #8e064c !important;
  outline-offset: 3px !important;
}

.cc-dot:focus-visible { border-radius: 999px; }

.cc-preset:focus-visible,
.cc-swap:focus-visible,
.cc-cta:focus-visible { border-radius: 999px; }

/* ---------------------------------------------------------------
   Utility
   --------------------------------------------------------------- */

.cc-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 420px) {
  .cc-pair { grid-template-columns: 1fr; }
  .cc-swap { justify-self: center; }
  .cc-table th,
  .cc-table td { padding-inline: 0.25rem; }
  .cc-table thead th:not(:first-child),
  .cc-table tbody td:not(:first-child) { inline-size: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-preview,
  .cc-fix,
  .cc-cta__chev { transition: none; }
}