/* ==========================================================================
   Evidence4Impact — shared toolbench styling
   Loaded AFTER each tool's own stylesheet so it normalises the family:
   one palette, one type system, one header. Tool layout rules stay put.
   The toolbench commits to a single light surface (these are working
   instruments with dense tables); the marketing site remains theme-aware.
   ========================================================================== */

:root{
  /* --- core palette --- */
  --ground:#F4F6F9;
  --surface:#FFFFFF;
  --surface-2:#E8EDF4;
  --surface-3:#F8FAFC;
  --ink:#121C2B;
  --ink-2:#3B4A5F;
  --ink-3:#6B7A8D;
  --line:#D8DFE9;
  --line-strong:#B7C2D1;
  --brand:#1B5FC0;
  --brand-2:#144A99;
  --brand-soft:#E4EDFA;

  /* --- semantic --- */
  --c-ok:#2B3F96;      --c-ok-soft:#E2E8F5;
  --c-warn:#B4741F;    --c-warn-soft:#F8EFDF;
  --c-bad:#C4452E;     --c-bad-soft:#F9E7E2;
  --c-info:#3E7FD1;    --c-info-soft:#E6EEFA;

  /* --- type --- */
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:Newsreader,"Iowan Old Style",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --deep:#0A5296;
  --deep-ink:#F4FAFF;
  --deep-ink-2:#BCDCF7;
  --deep-line:rgba(255,255,255,.26);
  --accent-hi:#B7DEFF;
  --accent-ink:#0B4C8C;

  --radius:4px;
  --shadow:0 1px 0 rgba(18,28,43,.03), 0 10px 26px -22px rgba(18,28,43,.45);

  /* --- legacy aliases: keep every tool's own variable names working --- */
  --bg:var(--ground);        --paper:var(--ground);      --cream:var(--ground);
  --cream-dark:var(--surface-2);
  --panel:var(--surface);    --card:var(--surface);      --white:var(--surface);
  --muted:var(--ink-3);      --ink-soft:var(--ink-2);
  --navy:var(--brand);       --navy-deep:var(--brand-2);
  --teal:var(--brand);       --teal-dark:var(--brand-2); --teal-light:var(--brand);
  --teal-soft:var(--brand-soft);
  --brand-dk:var(--brand-2); --accent:var(--brand);
  --blue:var(--c-info);      --blue-dark:#144A99;        --soft-blue:var(--c-info-soft);
  --violet:#3E7FD1;          --violet-soft:#E6EEFA;      --soft-violet:#E6EEFA;
  --gold:var(--c-warn);      --gold-light:#B07A18;   --gold-soft:var(--c-warn-soft);
  --amber:var(--c-warn);     --amber-soft:var(--c-warn-soft);
  --orange:var(--c-warn);    --soft-orange:var(--c-warn-soft);
  --green:var(--c-ok);       --green-soft:var(--c-ok-soft);   --ok-fg:var(--c-ok);   --ok-bg:var(--c-ok-soft);
  --red:var(--c-bad);        --red-soft:var(--c-bad-soft);    --flag-fg:var(--c-bad);--flag-bg:var(--c-bad-soft);
  --rev-fg:var(--c-warn);    --rev-bg:var(--c-warn-soft);
  --keep:var(--c-ok-soft);   --keep-ink:var(--c-ok);
  --dup:var(--c-bad-soft);   --dup-ink:var(--c-bad);
  --uniq:var(--c-info-soft); --uniq-ink:var(--c-info);
  --warn:var(--c-warn-soft); --warn-ink:var(--c-warn);
  --border:var(--line);      --soft-teal:var(--brand-soft);
}

/* --- base ------------------------------------------------------------- */
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.012em;text-wrap:balance}
button,input,select,textarea{font-family:var(--font-body)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* --- shared top bar ---------------------------------------------------- */
.e4i-bar{
  background:var(--deep);
  color:var(--deep-ink);
  border-bottom:1px solid var(--deep-line);
  padding:0;
  position:sticky;top:0;z-index:40;
}
.e4i-bar__in{
  width:min(1240px,100% - 2.4rem);margin-inline:auto;
  display:flex;align-items:center;gap:1.2rem;padding-block:.6rem;
}
.e4i-logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--deep-ink);font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.e4i-logo i{display:flex;gap:2px}
.e4i-logo i b{display:block;width:4px;height:17px;border-radius:0}
.e4i-logo em{font-style:normal;color:var(--accent-hi)}
.e4i-bar nav{margin-left:auto;display:flex;align-items:center;gap:1.1rem}
.e4i-bar nav a{
  text-decoration:none;color:var(--deep-ink-2);font-size:.85rem;
  border-bottom:1px solid transparent;padding-block:2px;
}
.e4i-bar nav a:hover{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}
.e4i-bar nav a.here{color:var(--accent-hi);border-bottom-color:var(--accent-hi)}

/* --- tool masthead (replaces each tool's own coloured header) ----------- */
.e4i-head{
  background:var(--deep);
  color:var(--deep-ink);
  border-bottom:0;
  padding:0;
  position:relative;
}
.e4i-head::after{
  content:"";position:absolute;inset:auto 0 0 0;height:6px;border-top:2px solid rgba(255,255,255,.92);
  background:linear-gradient(90deg,
    var(--c-bad) 0 25%, var(--c-warn) 25% 50%, var(--c-info) 50% 75%, var(--c-ok) 75% 100%);
}
.e4i-head__in{width:min(1240px,100% - 2.4rem);margin-inline:auto;padding:2rem 0 2.1rem}
.e4i-head .kicker{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent-hi);
}
.e4i-head h1{
  font-size:clamp(2rem,3.8vw,3rem);margin:.55rem 0 .6rem;line-height:1.08;color:var(--deep-ink);
}
.e4i-head p{margin:0;max-width:74ch;color:var(--deep-ink-2);font-size:.98rem;line-height:1.55}
.e4i-head .spectrum{display:none}
.e4i-head .spectrum b:nth-child(1){background:var(--c-bad)}
.e4i-head .spectrum b:nth-child(2){background:var(--c-warn)}
.e4i-head .spectrum b:nth-child(3){background:var(--c-info)}
.e4i-head .spectrum b:nth-child(4){background:var(--c-ok)}

/* --- normalisation: flatten the family onto one visual language --------- */
.panel,.card,section.card,.stat,.tblwrap,.tablebox,.table-scroll,.drop,.drop-zone,
#dropzone,.file-item,.diag-item,.logbox,.prisma,.toggle-row,.step,details,
.hero-main,.privacy-card,.group-panel,.result-card,.summary-card{
  border-radius:var(--radius)!important;
}
.panel,.card,section.card,.hero-main,.privacy-card{
  border:1px solid var(--line);
  box-shadow:none;
  background:var(--surface);
  backdrop-filter:none;
}
.panel h2,.card h2,section.card h2{color:var(--ink);font-family:var(--font-display)}
.stat,.diag-item,.toggle-row,.step,.file-item{background:var(--surface-3);border-color:var(--line)}
.stat .n,.stat .num,.stat-value{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.stat .l,.stat .label,.stat-label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400}

/* buttons — one shape, one weight, colour by role */
.btn,button{border-radius:var(--radius);font-weight:600;letter-spacing:0}
.btn:hover:not(:disabled){transform:none}
.btn-primary,.btn-teal,button:not(.ghost):not(.btn){background:var(--brand);color:var(--surface);border:1px solid var(--brand)}
.btn-primary{background:var(--brand);color:var(--surface);box-shadow:none}
.btn-navy{background:var(--brand-2);color:var(--surface)}
.btn-gold{background:var(--surface);color:var(--brand);border:1px solid var(--line-strong)}
.btn-outline,.btn-ghost,.btn-quiet,.btn-secondary,button.ghost{
  background:var(--surface);color:var(--brand);border:1px solid var(--line-strong)
}
.btn-outline:hover,.btn-ghost:hover,.btn-quiet:hover,.btn-secondary:hover,button.ghost:hover{background:var(--surface-2);color:var(--brand-2)}
.btn-danger{background:var(--surface);color:var(--c-bad);border:1px solid var(--c-bad)}

/* fields */
input[type=text],input[type=number],input[type=search],select,textarea{
  border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)
}
label{color:var(--ink-2)}

/* tables */
thead th,table th{
  background:var(--surface-2);color:var(--ink);
  font-family:var(--font-mono);font-weight:500;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;
  border-bottom:1px solid var(--line-strong);
}
tbody td,table td{border-bottom:1px solid var(--line);vertical-align:top}
tr:nth-child(even) td{background:transparent}
tbody tr:hover td{background:var(--surface-3)}
td,th{font-variant-numeric:tabular-nums}

/* badges */
.badge{
  border-radius:999px;font-family:var(--font-mono);font-weight:500;
  font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;padding:.16rem .55rem;
}

/* drop zones */
.drop,.drop-zone,#dropzone,.dropzone{
  border:1px dashed var(--line-strong);background:var(--surface-3);
}
.drop:hover,.drop.over,.drop-zone.dragover,#dropzone:hover,#dropzone.dragover{
  border-color:var(--brand);background:var(--brand-soft);
}

/* progress */
.progress-outer,.bar{background:var(--surface-2);border-radius:2px;height:5px}
.progress-inner,.bar>i{background:var(--brand)}

/* footers */
footer,.footer-note{color:var(--ink-3);font-size:.8rem}
footer a,.footer-note a{color:var(--brand)}

/* shared page footer */
.e4i-foot{
  background:var(--deep);border-top:1px solid var(--deep-line);margin-top:2.6rem;
  padding:1.4rem 0 2.4rem;color:var(--deep-ink-2);font-size:.8rem;
}
.e4i-foot__in{width:min(1240px,100% - 2.4rem);margin-inline:auto;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between}
.e4i-foot a{color:var(--accent-hi)}

@media (max-width:640px){
  .e4i-head h1{font-size:1.6rem}
  .e4i-bar nav a:not(.here){font-size:.8rem}
}