/* eLoadX. Plain CSS, no build step, no external font or asset. */

:root {
  --ink: #101720;
  --ink-soft: #4a5768;
  --line: #d9dee5;
  --bg: #f6f8fa;
  --card: #ffffff;
  --brand: #0b5cab;
  --brand-dark: #094a8a;
  --critical: #a4243b;
  --warning: #9a6400;
  --info: #0b5cab;
  --good: #1c6b47;
  --radius: 8px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}

h1 { font-size: 1.7rem; margin: 0 0 .5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 0 0 .8rem; letter-spacing: -0.005em; }
h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; color: var(--ink-soft); text-transform: none; }

p { margin: 0 0 .8rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a.danger { color: var(--critical); }

code, pre, .code {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: .86em;
}
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; }
pre.code {
  background: #101720;
  color: #e8edf3;
  padding: 14px 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.45;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---- top bar ---- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 14px; height: 58px; }
.brand {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
}
/* The wordmark is a square lockup on a transparent background, so it sizes by
   height and keeps its own aspect ratio. It is dark ink on transparency and the
   top bar is white, so it reads without any treatment. */
.brand-logo { display: block; height: 40px; width: auto; }
.brand:hover { text-decoration: none; color: var(--brand); }
.tagline { color: var(--ink-soft); font-size: .86rem; }
.topnav { margin-left: auto; display: flex; gap: 16px; font-size: .86rem; }

/* ---- hero ---- */
.hero { padding: 34px 0 8px; }
.hero h1 { font-size: 1.9rem; }
.lead { font-size: 1rem; color: var(--ink-soft); max-width: 78ch; }

/* ---- cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 18px 0;
}

/* ---- layout helpers ---- */
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }

.tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: #fbfcfd;
}
.tile h3 { margin-top: 0; color: var(--ink); }

.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: #fbfcfd;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.stat-value { font-size: 1.22rem; font-weight: 600; }
.stat-foot { font-size: .78rem; color: var(--ink-soft); }
.stat-critical .stat-value { color: var(--critical); }
.stat-warning .stat-value { color: var(--warning); }
.stat-info .stat-value { color: var(--info); }

/* ---- forms ---- */
.formrow { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.field.grow { flex: 1 1 320px; }
label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }

input[type="text"], input[type="number"], select, textarea {
  font: inherit;
  font-size: .88rem;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  max-width: 100%;
}
input[type="file"] { font-size: .86rem; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(11, 92, 171, .35);
  outline-offset: 1px;
}

.check { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 500; margin: 8px 0; }

button, .button {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: inline-block;
  line-height: 1.4;
}
button:hover, .button:hover { text-decoration: none; border-color: #b9c2cd; background: #f7f9fb; }
button.primary, .button.primary {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #fff;
}
button.primary:hover, .button.primary:hover { background: var(--brand-dark); }

/* A destructive action is a form submit, so the button is styled rather than a
   link. These three rules give it the outline of the link it replaced, and remove
   the default form margins so the table cell and the action row keep their layout. */
button.danger, .button.danger { color: var(--critical); }
.inline-form { display: inline; margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }

/* ---- tables ---- */
.table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.table th {
  text-align: left;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: #f1f4f7;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.table td { padding: 8px 10px; border-bottom: 1px solid #eceff3; vertical-align: top; }
.table tbody tr:hover { background: #fafcfd; }
.table-compact th, .table-compact td { padding: 5px 8px; font-size: .85rem; }
.table .right, td.right, th.right { text-align: right; font-variant-numeric: tabular-nums; }
.table .center, td.center { text-align: center; }
.evidence-row td { border-bottom: 1px solid var(--line); background: #fbfcfd; }
.evidence-row details { padding: 4px 0; }
.evidence-row summary { cursor: pointer; font-size: .8rem; color: var(--ink-soft); }

.scroller { overflow-x: auto; margin: 10px 0; }
.scroller .table { margin: 0; min-width: 720px; }
.mapping select, .mapping input[type="text"] { min-width: 110px; font-size: .82rem; }

/* ---- pills ---- */
.pill {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1f5;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pill-good, .pill-analysed, .pill-ok { background: #e3f2ea; color: var(--good); }
.pill-caution, .pill-warning, .pill-uploaded { background: #fdf1dc; color: var(--warning); }
.pill-poor, .pill-critical, .pill-failed { background: #fbe6ea; color: var(--critical); }
.pill-info, .pill-not_applicable { background: #e7f0fa; color: var(--info); }

.tag {
  display: inline-block;
  font-size: .7rem;
  color: var(--ink-soft);
  background: #eef1f5;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}

/* ---- alerts ---- */
.alert {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0;
  border-left: 4px solid var(--line);
  background: #f7f9fb;
}
.alert p { margin: .3rem 0 0; }
.alert-error { border-left-color: var(--critical); background: #fbecef; }
.alert-warning { border-left-color: var(--warning); background: #fdf6e9; }
.alert-info { border-left-color: var(--info); background: #eaf2fb; }

/* ---- misc ---- */
.hint { font-size: .82rem; color: var(--ink-soft); margin: .4rem 0; }
.muted { color: var(--ink-soft); }
.small { font-size: .84rem; }
.unit { font-size: .8em; color: var(--ink-soft); font-weight: 400; }
.notes { margin: .5rem 0 0; padding-left: 20px; font-size: .86rem; color: var(--ink-soft); }
.notes li { margin-bottom: .3rem; }
.reasons { margin: 0; padding-left: 18px; }
.reasons li { margin-bottom: .2rem; }

.footer { padding: 22px 20px 34px; color: var(--ink-soft); font-size: .84rem; border-top: 1px solid var(--line); margin-top: 28px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.5rem; }
  .topbar-inner { height: auto; padding: 10px 0; flex-wrap: wrap; }
  .topnav { margin-left: 0; width: 100%; }
  /* Header wraps on small screens, so the mark steps down a little. */
  .brand-logo { height: 34px; }
}