/* Contrast Checker: styles for this tool only. Shared styles live in /tools/shared/tools.css.
   Page structure, card surface, rows and spacing follow the Grid Calculator (grid.css). */

html,
body {
  overflow-x: clip;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-variant-numeric: tabular-nums;
}
.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-4);
}

/* ---------- top: the ratio and results on the left, the preview on the right (same height), then the colors card ---------- */

.ct-main {
  width: 100%;
  max-width: 880px; /* the same width as the Color Converter card */
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-16); /* same distance from the header as the Color Converter card */
  /* One inner padding for the results, the preview and the colors card */
  --ct-pad-x: var(--space-6);
  --ct-pad-y: 20px;
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  grid-template-rows: 1fr auto; /* the preview takes whatever height the results container has beyond the colors card */
  gap: var(--space-4);
  align-items: start;
}

.preview {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  border-radius: var(--radius-2xl);
  padding: var(--ct-pad-y) var(--ct-pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg, #fff);
  color: var(--fg, #000);
}
.preview-large {
  font-size: 1.5rem;
  line-height: 1.25;
  color: inherit;
}
.preview-bold {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: var(--weight-bold);
  color: inherit;
}
.preview-body {
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}
.preview-ui {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 var(--space-4);
  border: 2px solid var(--fg, #000);
  border-radius: var(--radius-lg);
  background: none;
  color: inherit;
  font-weight: var(--weight-bold);
  pointer-events: none;
}
.preview-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--fg, #000);
}

/* Ratio and results: one thin-bordered container, the headline on top and the three groups under it, split by 0.5px lines */
.results {
  grid-column: 1;
  grid-row: 1 / span 2; /* as tall as the preview and the colors card together */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 0 var(--ct-pad-x);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-2xl);
}
.headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--ct-pad-y) 0 14px;
}
.headline-value {
  display: flex;
  flex-direction: column;
}
.headline-label {
  font-size: var(--text-md);
  color: var(--color-muted);
}
.ratio-num {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  letter-spacing: -0.02em;
}
.ratio-num small {
  margin-left: 0.25rem; /* air between 21.00 and :1 */
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--color-muted);
  letter-spacing: 0;
}
.result-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* title, with its description to the right of it */
  column-gap: var(--space-3);
  align-items: baseline;
  padding: 14px 0;
  border-top: 0.5px solid var(--color-border);
}
.result-group:last-child {
  padding-bottom: var(--ct-pad-y);
}
.result-group > .result-row {
  grid-column: 1 / -1;
}
.result-group h2 {
  font-size: var(--text-md);
  color: var(--color-ink);
}
.result-hint {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-bottom: var(--space-2);
  text-align: right;
  opacity: 0.6; /* lighter than the muted text, like the placeholders and counts */
}
.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.25rem;
  font-size: var(--text-md);
  color: var(--color-ink);
}
.result-row .need {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-left: var(--space-2);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 1.5rem;
  padding: 0 var(--space-2) 0 6px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  min-width: 4.25rem;
  justify-content: center;
}
.badge .icon {
  width: 0.875rem;
  height: 0.875rem;
}
.badge.pass {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
}
.badge.fail {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
}

/* ---------- controls card: same card as the Grid Calculator ---------- */

.readout {
  width: 100%;
  grid-column: 2;
  grid-row: 2;
  padding: calc(var(--ct-pad-y) - 14px) var(--ct-pad-x); /* the input rows add 14px above and below themselves */
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-2xl);
}
.pair-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* text color, swap, background: one under the other */
  align-items: center;
}
.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: var(--space-3);
  min-height: 68px;
  padding: 14px 0;
}
.input-row label,
.row-label {
  font-size: var(--text-md);
  color: var(--color-ink);
}
.swap {
  justify-self: end;
  margin: -6px 0;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-surface);
}

.color-error {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-danger);
}
.color-error:empty {
  margin: 0;
}

/* ---------- narrow screens: everything stacks full width ---------- */

@media (max-width: 900px) {
  .preview,
  .results,
  .readout {
    grid-column: 1;
    grid-row: auto;
  }
  .results {
    order: 1; /* preview, colors, then the results when stacked */
  }
  .readout {
    order: 0;
  }
  .ct-main {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .pair-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .pair-row .swap {
    justify-self: end;
    margin: -6px 0;
  }
  .input-row + .swap,
  .pair-row .input-row + .swap + .input-row {
    border-top: 0;
  }
  .ratio-num {
    font-size: 2.5rem;
  }
}
@media (max-width: 560px) {
  .ct-main {
    --ct-pad-x: var(--space-4);
    --ct-pad-y: var(--space-4);
  }
}