/* ============================================================================
   Diff Checker — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — violet, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #a78bfa  6.95:1 on --bg   6.41:1 on --surface   7.19:1 on --bg-sunk
     light #6d28d9  6.81:1 on --bg   7.10:1 on --surface   6.24:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.

   Added/removed diff colours are NOT this accent — they are the functional
   green/red already measured and shipped in base.css (--ok / --err / --ok-bg /
   --err-bg), the same tokens contrast-checker's pass/fail badges use. Keeping
   diff semantics on those tokens means "green = added, red = removed" never
   collides with "violet = this tool's brand colour", and there is nothing new
   to re-verify here.
   ========================================================================= */
:root { --accent: #a78bfa; --accent-dim: rgba(167, 139, 250, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #6d28d9; --accent-dim: rgba(109, 40, 217, 0.10); }
}

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

/* base has no visually-hidden helper; the per-line screen-reader labels 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;
}

/* ============================================================================
   The two input panes
   ========================================================================= */

.diff-inputs textarea {
  min-height: 12rem;
  resize: vertical;
  line-height: 1.5;
  font-size: 0.875rem;
}

/* ============================================================================
   Options row — checkboxes styled as the same chip language as everywhere
   else on the site, but semantically real checkboxes (labelled, keyboard and
   screen-reader operable) rather than button-shaped fakes.
   ========================================================================= */

.diff-options {
  margin-top: 1.1rem;
}

.opt-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  cursor: pointer;
}
.opt-check:hover { border-color: var(--line-strong); }
.opt-check input {
  width: 1rem; height: 1rem; margin: 0; cursor: pointer;
  accent-color: var(--accent);
}
.opt-check:has(input:checked) {
  color: var(--text); border-color: var(--accent); background: var(--accent-dim);
}

/* ============================================================================
   View toggle (Unified / Side by side) — a two-way chip group
   ========================================================================= */

.view-toggle {
  display: inline-flex;
  gap: 0.25rem;
  margin-left: auto;
}
.view-toggle .chip[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent); background: var(--accent-dim);
}

.toolbar { align-items: center; }

/* ============================================================================
   Summary line and truncation note
   ========================================================================= */

.diff-summary {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.1rem 0 0.6rem;
}
.diff-summary .n-add { color: var(--ok); }
.diff-summary .n-rem { color: var(--err); }

#diff-note {
  margin-bottom: 0.9rem;
}

/* ============================================================================
   Legend — a small textual key above the diff, so "green/red means
   added/removed" is stated once in words rather than relying on colour memory.
   ========================================================================= */

.diff-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.75rem;
  border-radius: 3px;
}
.legend-add .legend-mark    { color: var(--ok);  background: var(--ok-bg); }
.legend-remove .legend-mark { color: var(--err); background: var(--err-bg); }
.legend-equal .legend-mark  { color: var(--text-faint); background: var(--surface-2); }

/* ============================================================================
   Diff output
   Every line carries colour AND a monospace +/- glyph in its own gutter
   column AND a screen-reader-only "Added:" / "Removed:" prefix — never
   colour alone (WCAG 1.4.1).
   ========================================================================= */

.diff-output-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-sunk);
}

.diff-output {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  min-width: 100%;
  width: max-content;
}

.diff-empty-msg {
  padding: 1rem 1.1rem;
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 0.9375rem;
}

/* -- unified rows -- */

.diff-line {
  display: flex;
  align-items: flex-start;
  padding: 0.15rem 0.9rem 0.15rem 0;
  border-left: 3px solid transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diff-line.diff-add {
  background: var(--ok-bg);
  border-left-color: var(--ok);
}
.diff-line.diff-remove {
  background: var(--err-bg);
  border-left-color: var(--err);
}
.diff-line.diff-equal { color: var(--text-dim); }

.diff-gutter {
  flex: 0 0 2.1rem;
  text-align: center;
  font-weight: 700;
  user-select: none;
}
.diff-add .diff-gutter    { color: var(--ok); }
.diff-remove .diff-gutter { color: var(--err); }
.diff-equal .diff-gutter  { color: var(--text-faint); }

.diff-text { flex: 1 1 auto; }
.diff-add .diff-text, .diff-remove .diff-text { color: var(--text); }

/* -- side-by-side rows -- */

.diff-output.side-view { width: 100%; min-width: 44rem; }

.diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.diff-row + .diff-row { border-top: 1px solid var(--line); }

.diff-cell {
  display: flex;
  align-items: flex-start;
  padding: 0.15rem 0.9rem 0.15rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-left: 3px solid transparent;
}
.diff-row .diff-cell:first-child { border-right: 1px solid var(--line); }

.diff-cell.diff-add    { background: var(--ok-bg);  border-left-color: var(--ok); }
.diff-cell.diff-remove { background: var(--err-bg); border-left-color: var(--err); }
.diff-cell.diff-equal  { color: var(--text-dim); }
.diff-cell.diff-empty  { color: var(--text-faint); }

/* ============================================================================
   Article furniture shared with the rest of the site's tools
   ========================================================================= */

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

.formula {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

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

.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;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

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

.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;
}

@media (max-width: 30rem) {
  .toolbar { flex-wrap: wrap; }
  .view-toggle { margin-left: 0; }
}