:root {
  color-scheme: light;
  --ink: #1b1f24;
  --muted: #5b6470;
  --paper: #ffffff;
  --canvas: #f4f5f7;
  --border: #d9dce1;
  --error: #b3261e;
  --error-bg: #fdecea;
  --warning: #8a5a00;
  --warning-bg: #fff6e0;
  --clear: #1a6b3c;
  --clear-bg: #e9f7ef;
  --accent: #2451c9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem 4rem;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page-header,
main {
  max-width: 40rem;
  margin: 0 auto;
}

.page-header h1 {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.page-header .tagline {
  color: var(--muted);
  margin: 0 0 2rem;
}

main {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

#upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

#upload label {
  font-weight: 600;
}

#upload input[type="file"] {
  flex: 1 1 16rem;
}

#upload button {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 0.4rem;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

#upload button:hover {
  filter: brightness(1.08);
}

.privacy {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 1rem 0 0;
}

#preflight-result:not(:empty) {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

.preflight__heading,
.result__heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.preflight__privacy {
  margin: 0 0 1rem;
  font-style: italic;
  color: var(--muted);
}

.preflight__clear {
  color: var(--clear);
  margin: 0;
}

/* Shown while the newly chosen package is being read, in place of the previous
   file's findings. Without it the box would sit empty and collapse for the
   length of the parse, which reads as "nothing found" rather than "checking". */
.preflight__pending {
  margin: 0;
  color: var(--muted);
}

#result {
  margin-top: 1.5rem;
}

.progress {
  color: var(--muted);
}

.error {
  color: var(--error);
  background: var(--error-bg);
  border: 1px solid var(--error);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.summary {
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.summary--blocked {
  background: var(--error-bg);
  border: 1px solid var(--error);
}

.summary--clear {
  background: var(--clear-bg);
  border: 1px solid var(--clear);
}

.summary__counts {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.25rem;
}

.summary--blocked .summary__counts { color: var(--error); }
.summary--clear .summary__counts { color: var(--clear); }

.summary__verdict {
  margin: 0;
  color: var(--ink);
}

.finding {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 0.4rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.finding--error {
  border-left-color: var(--error);
}

.finding--warning {
  border-left-color: var(--warning);
}

.finding__location {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 0.25rem;
}

.finding__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.finding--error .finding__title { color: var(--error); }
.finding--warning .finding__title { color: var(--warning); }

.finding__means,
.finding__fix {
  margin: 0.25rem 0;
}

.finding__detail {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.disclaimer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

.finding__occurrences {
  margin: 0.25rem 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}