/* ============================================================================
   WCAG Contrast Checker — tool layer over base.css

   base.css supplies the reset, typography, forms, buttons, chips, badges,
   panels, tables, header, footer and focus rings. This file adds the accent
   and only the parts of the checker no other tool has.

   Because the product *is* a contrast checker, its own chrome is held above
   WCAG AA everywhere and to AAA wherever the shared tokens allow. Two base
   tokens are nudged for that reason and only that reason.
   ========================================================================= */

:root {
  --accent:     #4ade80;
  --accent-dim: rgba(74, 222, 128, 0.14);

  /* base --text-faint (#6f7986) is 3.66–4.43:1 on our surfaces — under AA for
     the 11px label/eyebrow/th text it drives. This is 5.32–6.45:1. */
  --text-faint: #8b95a2;
  /* base --line-strong is ~1.7:1. Fine as a divider, but it also draws every
     input border, and 1.4.11 wants 3:1 on control boundaries — a failure this
     very page lists by name. This is 3.4–4.1:1. */
  --line-strong: #697485;
}

@media (prefers-color-scheme: light) {
  :root {
    --accent:      #15803d;
    --accent-dim:  rgba(21, 128, 61, 0.10);
    --text-faint:  #616a77;   /* 4.81–5.47:1 */
    --line-strong: #858b94;   /* 3.02–3.43:1 */
  }

  /* base pairs accent text with an accent tint for the active state. With a
     green accent that composites to 4.22:1 in light — under AA. One shade
     down the same hue restores it to 5.57:1 on the tint. */
  .site-nav a[aria-current="page"],
  .chip[aria-pressed="true"],
  .chip.is-active { color: #0f6b31; }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* base has no visually-hidden helper; the live region and table captions need one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Every small label in the tool wears base's .eyebrow treatment. The markup is
   generated by contrast.js and cannot carry the class, so extend the selector. */
.tool > h2,
.field > label,
.ratio-label,
.target-row label,
.card-t,
.preview::before {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================================================================
   The instrument bay
   A recessed console (--bg-sunk) holding raised modules (--surface): fields,
   verdicts, preview, suggestion cards. Depth is surface steps, not shadow.
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

/* the panel's heading reads as a module label so the ratio stays the hero */
.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- fields -- */

.fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* hex field + native picker are one control: a single hairline outline with an
   internal divider, so the swatch reads as the field's own end-cap. */
.inputrow { display: flex; align-items: stretch; }

.inputrow > input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.inputrow > input[type="text"][aria-invalid="true"] { border-color: var(--err); }

.inputrow > input[type="color"] {
  flex: 0 0 3rem;
  width: 3rem;
  height: auto;
  padding: 0.3rem;
  margin-left: -1px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* the swatch keeps its own hairline, or a white pick vanishes into a white field */
.inputrow > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.inputrow > input[type="color"]::-webkit-color-swatch,
.inputrow > input[type="color"]::-moz-color-swatch {
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}

/* keep whichever half is focused or hovered above the shared hairline */
.inputrow > input:hover,
.inputrow > input:focus-visible { position: relative; z-index: 1; }

.err {
  display: block;
  min-height: 1.4em;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--err);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

/* ============================================================================
   Result — the ratio is the hero number

   Deliberately NOT accent-coloured. This tool's accent is green and green is
   also the PASS colour; a green hero number would read as a verdict on a page
   where the pair may well be failing. The measurement stays neutral at full
   --text contrast and earns prominence from size alone; the verdict pills
   carry all of the semantic colour.
   ========================================================================= */

.result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.ratio-block { display: flex; align-items: baseline; gap: 0.55rem; flex: 0 0 auto; }

.ratio {
  font-family: var(--mono);
  font-size: clamp(2.75rem, 1.9rem + 4.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--text);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.ratio-label { line-height: 1.5; }

/* -------------------------------------------------------------- verdicts -- */
/* contrast.js emits .badge.pass / .badge.fail — same semantics as base's
   .badge-pass / .badge-fail, laid out as a 2×2 scan grid: level on the left,
   pill on the right. --ok / --err come straight from base, so green here
   always means "this pair passes" and never "this is the brand colour". */

.badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  flex: 1 1 22rem;
  min-width: 0;
}
@media (max-width: 30rem) { .badges { grid-template-columns: 1fr; } }

.badges .badge {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  text-transform: none;
}
.badges .lvl {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
.badges .verdict {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  background: var(--surface);
}

.badge.pass {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}
.badge.fail {
  background: var(--err-bg);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
}
.badge.pass .verdict { color: var(--ok); }
.badge.fail .verdict { color: var(--err); }

/* ============================================================================
   Live preview
   The interior renders in the user's own colours, so it may legitimately be
   unreadable — that is the measurement, not a broken UI. A cut-in legend and a
   3:1 frame mark it as a test surface. Both are painted in chrome colours,
   never inherited from the sample.
   ========================================================================= */

.preview {
  position: relative;
  margin-top: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.25rem;
  overflow-wrap: break-word;
}

.preview::before {
  content: "Live preview · your colours";
  position: absolute;
  top: 0;
  left: 0.85rem;
  transform: translateY(-50%);
  padding: 0 0.5rem;
  background: var(--bg-sunk);
  white-space: nowrap;
}

.preview p { margin: 0 0 0.8em; }
.preview p:last-child { margin-bottom: 0; }

.pv-lg   { font-size: 24px;    line-height: 1.35; }
.pv-lgb  { font-size: 18.66px; line-height: 1.4; font-weight: 700; }
.pv-sm   { font-size: 16px;    line-height: 1.55; }
.pv-tiny { font-size: 13px;    line-height: 1.55; }

/* rendered in the exact colours under test — never dimmed, or the preview
   would overstate the contrast being measured */
.preview .pv-tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.15em;
}

/* ============================================================================
   Nearest passing colours
   ========================================================================= */

.suggest {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.suggest h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.suggest .hint {
  font-size: 0.875rem;
  color: var(--text-dim);
  margin: 0 0 0.9rem;
  max-width: 62ch;
}

.target-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1rem;
}
/* auto width so the longest option sets the box; if it has to shrink, base's
   text-overflow: ellipsis takes over and the value never slides under the
   chevron that base's padding-right reserves. */
.target-row select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
  background-color: var(--surface);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 0.75rem;
}

.card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}
button.card { cursor: pointer; transition: border-color 0.12s ease; }

.card-t, .card-r, .card-apply { display: block; }

.card-hex {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.3rem 0 0.2rem;
}
.card-r    { font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); }
.card-none { font-size: 0.875rem; color: var(--text-dim); margin: 0.4rem 0 0; }
.card-apply {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 0.5rem;
}

/* colour sample — the suggestion cards and the worked examples share it */
.swatch {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
}

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

/* .formula is a <div> with white-space: pre, so base's `pre` rule can't reach it */
.formula,
.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
}
.formula {
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}
.callout {
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.example,
.pagelinks a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.example { margin: 0 0 1rem; }
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; }
/* base's .chip is a control; these are read-only data samples */
.example .chip {
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  cursor: default;
  color: var(--text);
  font-size: 0.8125rem;
  white-space: normal;
}
.example .chip:hover { border-color: var(--line); }

.tag-pass { color: var(--ok);  font-weight: 600; }
.tag-fail { color: var(--err); font-weight: 600; }

td .mono, th .mono { white-space: nowrap; }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a { display: block; text-decoration: none; }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

button.card:hover,
.pagelinks a:hover { border-color: var(--accent); }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}