:root {
  --paper: #f7f8f5;
  --card: #ffffff;
  --ink: #16202c;
  --muted: #5a6672;
  --rule: #dce0d8;
  --signal: #1f7a4c;
  --warn: #9e6412;
  --fail: #ab352c;
  --link: #2b54b8;
}

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

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- navigation ---------- */

.site-nav a {
  color: var(--ink);
  display: block;
  padding: 0.35rem 0;
}
.site-nav a:hover { color: var(--link); text-decoration: none; }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
@media (max-width: 767px) {
  .site-nav { border-top: 1px solid var(--rule); margin-top: 0.5rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--ink); padding-left: 0.6rem; }
}

/* ---------- ad slots ---------- */

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--rule);
  background: #fbfcfa;
  color: #98a2ad;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.ad-slot--banner {
  min-height: 90px;
  margin-top: 1.25rem;
}
.ad-slot--rail { min-height: 250px; }
@media (max-width: 1023px) {
  .ad-slot--rail { min-height: 120px; }
}

/* ---------- surfaces ---------- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.field {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--ink);
}
.field:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); }
.field--mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.9rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 4px;
  padding: 0.6rem 1.1rem;
  font-size: 0.925rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #22303f; text-decoration: none; }
.btn--quiet { background: #fff; color: var(--ink); border-color: var(--rule); }
.btn--quiet:hover { border-color: #b9c1b6; text-decoration: none; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- verdict badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid;
}
.badge--pass { color: var(--signal); border-color: #b7dbc6; background: #f0f8f3; }
.badge--warn { color: var(--warn); border-color: #ecd6a8; background: #fdf7ec; }
.badge--fail { color: var(--fail); border-color: #eec4bf; background: #fdf2f0; }
.badge--idle { color: var(--muted); border-color: var(--rule); background: #fafbf9; }

.check-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.check-row:last-child { border-bottom: 0; }

/* ---------- risk meter ---------- */

.meter {
  height: 8px;
  border-radius: 99px;
  background: #eceee9;
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width 220ms ease, background-color 220ms ease;
}
.meter[data-level="medium"] > span { background: var(--warn); }
.meter[data-level="high"] > span { background: var(--fail); }

/* ---------- output blocks ---------- */

.record {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  word-break: break-all;
  background: #f4f6f2;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  white-space: pre-wrap;
}

mark.trigger {
  background: #fdf0c8;
  border-bottom: 2px solid #e0b64a;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
mark.trigger[data-risk="high"] { background: #fbdcd6; border-bottom-color: var(--fail); }

.copy-area {
  min-height: 190px;
  resize: vertical;
}

.highlight-view {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- prose ---------- */

.prose-block { max-width: 68ch; }
.prose-block h2 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.6rem; }
.prose-block h3 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 0.4rem; }
.prose-block p { margin: 0 0 0.9rem; line-height: 1.75; }
.prose-block ul, .prose-block ol { margin: 0 0 1rem 1.1rem; line-height: 1.75; }
.prose-block li { margin-bottom: 0.35rem; }
.prose-block ul { list-style: disc; }
.prose-block ol { list-style: decimal; }
.prose-block code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85em;
  background: #f1f3ee;
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ---------- tables ---------- */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.data-table th { font-weight: 600; background: #f4f6f2; white-space: nowrap; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  header, footer, .ad-slot, aside { display: none !important; }
}

/* ---------- tabs ---------- */

.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.925rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--ink);
}

/* ---------- csv dropzone ---------- */

.dropzone {
  border: 2px dashed var(--rule);
  border-radius: 8px;
  background: var(--card);
  padding: 2rem 1.25rem;
  text-align: center;
}
.dropzone--over {
  border-color: var(--link);
  background: #f2f5fd;
}