/* Tool pages (Bulk Check, Mixture Check) in the same flat look as the home and result pages (2026-11-07).
   Loaded after each page's own styles: it maps their colour names onto the XchangeIQ palette and squares the corners. */
:root {
  --navy: var(--xiq-navy); --ink: var(--xiq-ink); --muted: var(--xiq-muted); --line: var(--xiq-line); --soft: var(--xiq-soft);
  --blue: var(--xiq-navy); --blue-2: var(--xiq-navy-2); --blue-soft: var(--xiq-navy-soft);
  --teal: var(--xiq-teal); --teal-d: var(--xiq-teal-d); --teal-soft: var(--xiq-teal-soft);
  --shadow: none; --head: var(--xiq-head);
}
body { font-family: var(--xiq-body); }
h1, h2, h3 { font-family: var(--xiq-head); color: var(--xiq-navy); }

/* top of the page */
.hero { background: var(--xiq-soft); border-bottom: 1px solid var(--xiq-line); padding: 40px 0 30px; margin-bottom: 8px; }
.eyebrow { font: 600 13px var(--xiq-body); letter-spacing: .1em; color: var(--xiq-teal-d); }
.eyebrow::before { display: none; }
h1 { font-weight: 600; letter-spacing: -.02em; color: var(--xiq-navy); }
h1 .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.lead { color: var(--xiq-slate); }

/* boxes, inputs, buttons: flat and square */
.box, .tablewrap, .alert, .facts, .status, .msg, .label, .verdict, .total { border-radius: 4px; box-shadow: none; }
.box { border-color: var(--xiq-line); }
textarea { border-radius: 4px; border-color: #9AA6B8; background: #fff; }
textarea:focus { outline: 0; border-color: var(--xiq-navy); box-shadow: 0 0 0 3px rgba(14,171,173,.2); }
.drop { border-radius: 4px; }
.go { border-radius: 4px; background: var(--xiq-navy); box-shadow: none; transform: none; }
.go:hover:not(:disabled) { background: var(--xiq-navy-2); }
.btn, .tally, .tabs button, .x, .chip { border-radius: 4px; }
.btn:hover { border-color: var(--xiq-navy); color: var(--xiq-navy); }
.btn.primary { background: var(--xiq-navy); border-color: var(--xiq-navy); }
.btn.primary:hover { background: var(--xiq-navy-2); }
.tally[aria-pressed="true"], .tabs button[aria-pressed="true"] { border-color: var(--xiq-navy); background: var(--xiq-navy-soft); color: var(--xiq-navy); }
.pill, .tag { border-radius: 2px; }
.bar-out { border-radius: 0; }
.bar-in { background: var(--xiq-teal); }
th { background: var(--xiq-navy); }
td.verdict { min-width: 210px; }