/* NIC Validation Service — UI styles.
   Same restrained palette as the PDF guide: near-black ink, one accent blue,
   and status colours reserved strictly for verdicts and rule outcomes. */

:root {
  --ink: #16191d;
  --muted: #5b6470;
  --faint: #8b94a1;
  --rule: #dde2e8;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --soft: #f6f8fa;
  --accent: #1a5fb4;
  --accent-soft: #e8f0fb;
  --pass: #1a7f45;
  --warn: #9a6400;
  --fail: #b3261e;
  --pass-bg: #eaf6ef;
  --warn-bg: #fdf4e3;
  --fail-bg: #fdeceb;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.01em; }

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 4px;
}

/* ── top bar ─────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.brand h1 { font-size: 18px; font-weight: 650; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 550;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--soft);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.status--ok   { color: var(--pass); border-color: #bfe0cd; background: var(--pass-bg); }
.status--ok .dot { background: var(--pass); }
.status--down { color: var(--fail); border-color: #f2c4c1; background: var(--fail-bg); }
.status--down .dot { background: var(--fail); }

.banner {
  margin: 0; padding: 11px 24px; font-size: 13px;
  border-bottom: 1px solid var(--rule);
}
.banner--warn { background: var(--warn-bg); color: #6b4700; }
.banner--info { background: var(--accent-soft); color: #10396e; }

/* "not connected" placeholder where a data table would otherwise sit */
.notconnected {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px; border-radius: 6px;
  background: var(--soft); border: 1px dashed var(--rule);
}
.notconnected__mark {
  font: 650 10px/1 var(--mono); letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--rule); background: var(--surface);
  padding: 4px 6px; border-radius: 4px; white-space: nowrap;
}
.notconnected__text { font-size: 12.5px; color: var(--muted); }
.notconnected__text strong { color: var(--ink); display: block; margin-bottom: 2px; }

.verdict__note {
  flex-basis: 100%; font: 500 11.5px/1.4 -apple-system, sans-serif;
  opacity: .9; margin-top: 2px;
}

/* ── layout ──────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
#resultPanel { position: sticky; top: 20px; }
@media (max-width: 980px) { #resultPanel { position: static; } }

.panel h2 {
  font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  margin: 22px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.panel form > h2:first-of-type { margin-top: 0; }
.optional {
  text-transform: none; letter-spacing: 0; font-weight: 450;
  color: var(--faint); font-size: 11px;
}
.hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.muted { color: var(--faint); font-size: 13px; }

/* ── samples ─────────────────────────────────────────── */
.samples { margin-bottom: 12px; }
.samples__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--muted); margin-bottom: 7px;
}
.samples__list { display: flex; flex-wrap: wrap; gap: 6px; }
.sample {
  font: 550 12px/1 var(--mono);
  padding: 6px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--soft); color: var(--ink);
  transition: background .12s, border-color .12s;
}
.sample:hover { background: var(--accent-soft); border-color: #b9d0ee; }
.sample[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.sample small { display: block; font: 400 10px/1.3 inherit; opacity: .7; margin-top: 3px; }

.linkbtn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 12.5px; text-decoration: underline;
}

/* ── dropzone ────────────────────────────────────────── */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  padding: 22px 16px; cursor: pointer;
  border: 1.5px dashed var(--rule); border-radius: var(--radius);
  background: var(--soft); color: var(--muted); font-size: 12.5px;
  transition: border-color .12s, background .12s;
}
.dropzone strong { color: var(--ink); font-size: 13.5px; font-weight: 600; }
.dropzone:hover, .dropzone:focus-visible,
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.dropzone--slim { padding: 13px; }

/* ── image list ──────────────────────────────────────── */
.imagelist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.imagecard {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 11px; align-items: start;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px; background: var(--surface);
}
.imagecard img {
  width: 62px; height: 62px; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--rule); background: var(--soft);
}
.imagecard__meta { min-width: 0; }
.imagecard__name {
  font-weight: 600; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imagecard__sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.imagecard input[type="text"] {
  margin-top: 6px; width: 100%; font-size: 12px;
  padding: 4px 7px; border: 1px solid var(--rule); border-radius: 5px;
  font-family: var(--mono);
}
.iconbtn {
  border: 1px solid var(--rule); background: var(--surface); color: var(--muted);
  width: 24px; height: 24px; border-radius: 5px; cursor: pointer;
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.iconbtn:hover { color: var(--fail); border-color: #f2c4c1; background: var(--fail-bg); }

/* base64 strip inside each image card */
.b64 { grid-column: 1 / -1; margin-top: 2px; }
.b64__head {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--muted);
}
.b64 pre {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.45;
  background: var(--soft); border: 1px solid var(--rule); border-radius: 5px;
  padding: 6px 8px; margin: 5px 0 0;
  max-height: 62px; overflow: hidden;
  word-break: break-all; white-space: pre-wrap; color: var(--muted);
}
.minibtn {
  font: 550 11px/1 inherit; padding: 3px 7px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); color: var(--accent);
}
.minibtn:hover { background: var(--accent-soft); border-color: #b9d0ee; }

/* ── form fields ─────────────────────────────────────── */
.field { display: block; margin-bottom: 11px; }
.field > span { display: block; font-size: 12.5px; font-weight: 550; margin-bottom: 4px; }
.field input {
  width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--surface);
  color: var(--ink);
}
.field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#nic { font-family: var(--mono); }
.fieldhint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); min-height: 1em; }
.fieldhint.bad { color: var(--fail); }
.fieldhint.good { color: var(--pass); }

.checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.checks label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 550 12px/1 var(--mono); cursor: pointer;
}

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: block; text-align: center; cursor: pointer;
  padding: 9px 8px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--soft); font: 550 12px/1.3 var(--mono);
  transition: background .12s, border-color .12s;
}
.segmented small { display: block; font: 400 10.5px/1.4 var(--mono); color: var(--faint); margin-top: 2px; }
.segmented input:checked + span {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
.segmented input:checked + span small { color: var(--accent); }
.segmented input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

.refpreview { margin-top: 9px; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.refpreview img {
  width: 46px; height: 46px; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--rule);
}

/* ── actions ─────────────────────────────────────────── */
.actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.primary {
  flex: 1; padding: 11px 16px; font-size: 14px; font-weight: 600;
  border: none; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: #fff;
}
.primary:hover:not(:disabled) { background: #17539c; }
.primary:disabled { opacity: .55; cursor: progress; }
.elapsed { font: 550 12px var(--mono); color: var(--muted); }
.formerror {
  margin: 10px 0 0; padding: 9px 11px; font-size: 12.5px;
  background: var(--fail-bg); border: 1px solid #f2c4c1;
  border-radius: 6px; color: var(--fail);
}

/* ── results ─────────────────────────────────────────── */
.placeholder { text-align: center; padding: 56px 20px; color: var(--muted); }
.placeholder p { margin: 0 0 6px; }
.placeholder strong { color: var(--ink); }

#result h3 {
  font-size: 12px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
}

.verdict {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 17px; border-radius: var(--radius);
  border: 1px solid; font-weight: 650;
}
.verdict__label { font-family: var(--mono); font-size: 17px; letter-spacing: -.01em; }
.verdict__counts { font: 500 12px var(--mono); opacity: .85; }
.verdict--ACCEPT        { background: var(--pass-bg); border-color: #bfe0cd; color: var(--pass); }
.verdict--MANUAL_REVIEW { background: var(--warn-bg); border-color: #ecd7a6; color: var(--warn); }
.verdict--REJECT        { background: var(--fail-bg); border-color: #f2c4c1; color: var(--fail); }

.reasons { margin-top: 11px; padding: 11px 13px; background: var(--soft);
  border: 1px solid var(--rule); border-left: 3px solid var(--warn); border-radius: 6px; }
.reasons ul { margin: 0; padding-left: 17px; }
.reasons li { font-size: 12.5px; margin-bottom: 3px; }
.reasons li:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; }
.rules td { padding: 7px 4px; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: 12.5px; }
.rules tr:last-child td { border-bottom: none; }
.rules tr.is-skipped { color: var(--faint); }
.rules__name { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; width: 1%; padding-right: 10px !important; }
.rules__status { width: 1%; padding-right: 10px !important; }

.pill {
  display: inline-block; white-space: nowrap; font: 650 10px/1 var(--mono);
  padding: 4px 6px; border-radius: 4px; border: 1px solid currentColor;
  letter-spacing: .03em;
}
.pill--PASS    { color: var(--pass); background: var(--pass-bg); }
.pill--WARN    { color: var(--warn); background: var(--warn-bg); }
.pill--FAIL    { color: var(--fail); background: var(--fail-bg); }
.pill--SKIPPED { color: var(--faint); background: var(--soft); }

.kv td { padding: 6px 4px; border-bottom: 1px solid var(--rule); font-size: 12.5px; vertical-align: top; }
.kv tr:last-child td { border-bottom: none; }
.kv td:first-child { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 38%; }
.kv .isnull { color: var(--faint); font-style: italic; }

.disclosure { margin-top: 14px; position: relative; }
.disclosure summary {
  cursor: pointer; font-size: 12.5px; font-weight: 550; color: var(--accent);
  padding: 7px 0;
}
.disclosure pre {
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  background: var(--soft); border: 1px solid var(--rule); border-radius: 6px;
  padding: 11px; margin: 4px 0 0; max-height: 320px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.copybtn {
  position: absolute; top: 34px; right: 8px;
  font: 550 11px/1 inherit; padding: 4px 8px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); color: var(--accent);
}
.copybtn:hover { background: var(--accent-soft); }

.foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 24px; border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--faint); background: var(--surface);
}

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 550;
  padding: 9px 15px; border-radius: 999px; z-index: 50;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .18);
}

.spinner {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── document vs input, side by side ─────────────────── */
.sbs { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 700px) { .sbs { grid-template-columns: 1fr; } }

.sbs__images { display: grid; gap: 8px; }
.sbs__images figure { margin: 0; }
.sbs__images img {
  width: 100%; border-radius: 5px; border: 1px solid var(--rule);
  background: var(--soft); display: block; cursor: zoom-in;
}
.sbs__images figcaption {
  font: 500 10.5px/1.3 var(--mono); color: var(--faint);
  margin-top: 3px; text-align: center;
}
.sbs__table { overflow-x: auto; }

.compare { font-size: 12px; }
.compare th {
  text-align: left; font: 650 9.5px/1 -apple-system, sans-serif;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  padding: 0 8px 6px 0; border-bottom: 1px solid var(--ink); white-space: nowrap;
}
.compare td {
  padding: 7px 8px 7px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; word-break: break-word;
}
.compare tr:last-child td { border-bottom: none; }
.compare td:first-child { font-weight: 600; white-space: nowrap; }
.compare td:nth-child(2), .compare td:nth-child(3), .compare td:nth-child(4) {
  font-family: var(--mono); font-size: 11px;
}
.compare td:last-child, .compare th:last-child { width: 1%; white-space: nowrap; }
.compare td:nth-child(4) { white-space: nowrap; }
.compare .isnull { color: var(--faint); font-style: italic; font-family: inherit; }
.compare tr.is-skipped td { color: var(--faint); }
/* A skipped check does not make the card's own value less real - keep the
   field name and what was read off the document at full contrast. */
.compare tr.is-skipped td:first-child,
.compare tr.is-skipped td:nth-child(2) { color: var(--ink); }
.compare .mismatch { color: var(--fail); font-weight: 600; }

/* full-size image on click */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: rgba(16, 24, 40, .82); padding: 28px; cursor: zoom-out;
}
.lightbox img {
  max-width: 100%; max-height: 100%; border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

/* ── expandable sections ─────────────────────────────── */
.section { border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: none; }
.section > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 13px 0 10px;
  user-select: none;
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before {
  content: '▸'; color: var(--faint); font-size: 10px;
  transition: transform .12s; display: inline-block; width: 9px;
}
.section[open] > summary::before { transform: rotate(90deg); }
.section > summary:hover .section__title { color: var(--accent); }
.section__title {
  font: 650 12px/1 -apple-system, sans-serif; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.section__note { font-size: 11.5px; color: var(--faint); }
.section > summary + *, .section > *:not(summary) { margin-bottom: 12px; }

/* ── API documentation ───────────────────────────────── */
.apilink {
  font-size: 12.5px; font-weight: 550; color: var(--accent);
  text-decoration: none; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--soft); margin-left: auto;
  margin-right: 12px;
}
.apilink:hover { background: var(--accent-soft); border-color: #b9d0ee; }

.apidocs { max-width: 1400px; margin: 0 auto 32px; }
@media (min-width: 1449px) { .apidocs { margin-inline: auto; } }
.apidocs__h { font-size: 16px; font-weight: 650; margin-bottom: 4px; text-transform: none;
  letter-spacing: -.01em; color: var(--ink); border: none; padding: 0; }
.apidocs h4 { font-size: 12px; font-weight: 650; margin: 12px 0 5px; color: var(--ink); }
.apidocs pre {
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
  background: var(--soft); border: 1px solid var(--rule); border-radius: 6px;
  padding: 11px 12px; margin: 0; overflow-x: auto; white-space: pre;
}
.apidocs__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 6px; }
@media (max-width: 860px) { .apidocs__cols { grid-template-columns: 1fr; } }
.apidocs__cols > div { min-width: 0; }
/* Flows under its own code block instead of pinning to the column, which the
   grid stretches to the tallest cell - that left the button floating. */
.copybtn--static {
  position: static; display: block; margin: 6px 0 0 auto;
}
.apidocs__endpoints td:first-child { width: 24%; white-space: nowrap; }
.apidocs__rules td:first-child { width: 26%; white-space: nowrap; }
.apidocs__rules td:last-child { width: 1%; white-space: nowrap; text-align: right; }

.apidocs__downloads { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.dl {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 6px; padding: 9px 13px;
  background: var(--soft); min-width: 170px;
}
.dl:hover { background: var(--accent-soft); border-color: #b9d0ee; }
.dl strong { display: block; font-size: 12.5px; color: var(--accent); }
.dl span { font-size: 11px; color: var(--muted); }

.apilink--quiet { color: var(--muted); margin-left: 0; }
.apilink--quiet:hover { color: var(--fail); border-color: #f2c4c1; background: var(--fail-bg); }