/* ------------------------------------------------------------------
   stuffstolen.co.za
   Built for a mid-range Android phone on a slow connection first.
   One typeface (Archivo) carries the page; serial numbers are set in
   a mono face so 0 and O, 1 and I cannot be confused.
------------------------------------------------------------------ */

:root {
  --ink:      #16213a;
  --ink-soft: #46506a;
  --paper:    #f6f5f2;
  --card:     #ffffff;
  --rule:     #d7d5cd;
  --signal:   #c9961c;   /* a match was found */
  --signal-bg:#fdf4de;
  --clear:    #2e6b4f;   /* nothing listed */
  --clear-bg: #ecf4ef;
  --alarm:    #a3281d;
  --alarm-bg: #fbeceb;
  --focus:    #16213a;

  --max: 64rem;
  --radius: 4px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

.mono, .serial {
  font-family: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  letter-spacing: 0.02em;
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.1rem;
}

.narrow { max-width: 42rem; }

main { padding: 1.75rem 0 4rem; }

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1rem; }

/* ---------- Header ---------- */
.site-head {
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 0;
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin-right: auto;
}
.brand span { color: var(--signal); }
.site-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  font-size: 0.95rem;
}
.site-head nav a {
  color: #d8dced;
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.site-head nav a:hover,
.site-head nav a:focus-visible { color: #fff; border-bottom-color: var(--signal); }

/* ---------- Headings ---------- */
h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  font-weight: 800;
}
h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
h2 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); margin-top: 2rem; }
h3 { font-size: 1.1rem; margin-top: 1.4rem; font-weight: 700; }

.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0 0 1.5rem;
}

a { color: var(--ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- The search hero ---------- */
.hero {
  background: var(--ink);
  color: #fff;
  padding: 2.5rem 0 2.75rem;
}
.hero h1 { color: #fff; max-width: 20ch; }
.hero p { color: #c7cde0; max-width: 46ch; margin: 0 0 1.5rem; }

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 34rem;
}
.search-form input[type="text"] {
  flex: 1 1 15rem;
  font-size: 1.15rem;
  padding: 0.85rem 0.9rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  text-transform: uppercase;
}
.search-form .btn { flex: 0 0 auto; }
.hero .captcha { color: #c7cde0; width: 100%; }
.hero .captcha label { color: #c7cde0; }
.hero .captcha input { width: 100%; max-width: 14rem; }
.hero .link-button { color: var(--signal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--signal);
  color: #16213a;
  font: inherit;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px;
}
.btn:hover { background: #d9a526; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #22304f; }
.btn-quiet {
  background: transparent;
  border: 2px solid var(--rule);
  color: var(--ink);
  font-weight: 600;
}
.btn-quiet:hover { border-color: var(--ink); background: transparent; }
.btn-danger { background: var(--alarm); color: #fff; }
.btn-danger:hover { background: #8d2219; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 1.5rem; }

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Panels ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem;
  margin: 0 0 1.25rem;
}

/* ---------- Search results ---------- */
.verdict { margin: 0 0 1.5rem; border-radius: var(--radius); overflow: hidden; }

.verdict-head { padding: 1.25rem 1.4rem; }
.verdict-match .verdict-head {
  background: var(--signal-bg);
  border-left: 8px solid var(--signal);
}
.verdict-clear .verdict-head {
  background: var(--clear-bg);
  border-left: 8px solid var(--clear);
}
.verdict-head h2 { margin: 0 0 0.35rem; font-size: 1.45rem; }
.verdict-head p { margin: 0; color: var(--ink-soft); max-width: 48ch; }
.verdict-head .queried {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 1.05rem;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius);
}

.listing {
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: none;
  padding: 1.25rem 1.4rem;
}
.listing h3 { margin: 0 0 0.75rem; }
.listing .ref { color: var(--ink-soft); font-weight: 400; font-size: 0.95rem; }

dl.facts { margin: 0; display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.45rem 1rem; }
dl.facts dt { color: var(--ink-soft); font-size: 0.95rem; }
dl.facts dd { margin: 0; }

.contact-block {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--signal-bg);
  border-radius: var(--radius);
}
.contact-block strong { display: block; margin-bottom: 0.2rem; }
.contact-block .phone { font-size: 1.25rem; font-weight: 700; }
.contact-block p { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }

.no-contact {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Forms ---------- */
.field { margin: 0 0 1.15rem; }
.field label,
fieldset legend {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: -0.1rem 0 0.4rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* stops iOS zooming on focus */
  padding: 0.7rem 0.75rem;
  border: 1px solid #a9a7a0;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  min-height: 48px;
}
textarea { min-height: 7rem; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }

fieldset {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 0.4rem;
  margin: 0 0 1.5rem;
  background: var(--card);
}
fieldset legend { padding: 0 0.45rem; font-size: 1.05rem; font-weight: 700; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 34rem) { .two-up { grid-template-columns: 1fr; } }

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 0;
}
.check input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0.15rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--ink);
}
.check label { font-weight: 400; margin: 0; }
.check label strong { display: block; font-weight: 700; }

.captcha-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.captcha img { border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }

.field-error { color: var(--alarm); font-size: 0.95rem; margin-top: 0.3rem; }

/* ---------- Messages ---------- */
.msg {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  margin: 0 0 1.2rem;
  border-left: 6px solid;
}
.msg-error   { background: var(--alarm-bg); border-color: var(--alarm); }
.msg-success { background: var(--clear-bg); border-color: var(--clear); }
.msg-info    { background: var(--signal-bg); border-color: var(--signal); }
.msg ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* ---------- Disclaimer block ---------- */
.disclaimer {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 6px solid var(--signal);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  max-height: 17rem;
  overflow-y: auto;
}
.disclaimer h3 { margin-top: 0; }
.disclaimer p, .disclaimer li { color: var(--ink-soft); }
.disclaimer ol { padding-left: 1.2rem; }

/* ---------- Tables ---------- */
table.items { width: 100%; border-collapse: collapse; background: var(--card); }
table.items th, table.items td {
  text-align: left;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.items th { font-size: 0.92rem; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 46rem) {
  table.items thead { position: absolute; left: -9999px; }
  table.items tr { display: block; border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 0.9rem; background: var(--card); }
  table.items td { display: block; border: none; padding: 0.3rem 0.9rem; }
  table.items td:first-child { padding-top: 0.9rem; }
  table.items td:last-child { padding-bottom: 0.9rem; }
  table.items td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.85rem;
    color: var(--ink-soft);
  }
}

.pill {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid;
}
.pill-listed    { color: var(--alarm); border-color: var(--alarm); background: var(--alarm-bg); }
.pill-recovered { color: var(--clear); border-color: var(--clear); background: var(--clear-bg); }
.pill-withdrawn { color: var(--ink-soft); border-color: var(--rule); background: var(--paper); }

.empty {
  background: var(--card);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: 2rem 1.4rem;
  text-align: left;
}
.empty p { max-width: 40ch; color: var(--ink-soft); }

/* ---------- How it works ---------- */
.steps { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.5rem 0 0; }
.step h3 { margin-top: 0; }
.step p { color: var(--ink-soft); margin: 0; }

/* ---------- Footer ---------- */
.site-foot {
  border-top: 1px solid var(--rule);
  background: #fff;
  padding: 1.75rem 0 2.5rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 0.9rem; }
.site-foot p { max-width: 55ch; margin: 0 0 0.6rem; }

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