/* Précis brand: the gradient, amber as the only accent, two faces.
   System stacks stand in for Cormorant Garamond and JetBrains Mono so the page
   ships with no webfont dependency and no layout shift. */
:root {
  --bg1: #0a0e17;
  --bg2: #111827;
  --amber: #f59e0b;
  --offwhite: #f9fafb;
  --mist: #d1d5db;
  --slate: #6b7280;
  --border: #374151;
  --red: #ef4444;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--offwhite);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

.masthead { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.wordmark {
  font-family: var(--serif);
  font-size: 1.6rem; margin: 0 0 .5rem; letter-spacing: .01em;
}
.wordmark span { color: var(--amber); }
h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); margin: 0 0 .5rem; font-weight: 500; }
.standfirst { color: var(--mist); margin: 0; max-width: 34rem; }

/* ── form ─────────────────────────────────────────────────────────────── */
form { margin: 2rem 0; display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--slate);
}
input, select, button {
  font: inherit; color: var(--offwhite);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .8rem .9rem; width: 100%;
  /* 16px+ prevents iOS zooming the viewport on focus */
  font-size: 1rem;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px; border-color: var(--amber);
}
button {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .09em;
  font-size: .8rem; background: var(--amber); color: #1a1206;
  border-color: var(--amber); cursor: pointer; padding: .9rem;
  min-height: 44px; /* touch target */
}
button:hover { filter: brightness(1.08); }

/* ── result ───────────────────────────────────────────────────────────── */
#result { margin-top: 1rem; }
.card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 1.5rem 1.25rem; background: rgba(255,255,255,.02);
}
.verdict {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 .35rem;
}
.verdict.in  { color: var(--amber); }
.verdict.out { color: var(--mist); }
.verdict.unknown { color: var(--slate); }
.card h2 { font-size: 1.7rem; margin: 0 0 1.25rem; font-weight: 500; }

dl { display: grid; grid-template-columns: 1fr; gap: .85rem; margin: 0 0 1.4rem; }
@media (min-width: 34rem) { dl { grid-template-columns: 11rem 1fr; gap: .7rem 1.2rem; } }
dt {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); align-self: baseline;
}
dd { margin: 0; }
/* Every link, not just the ones in the definition list. An unstyled anchor
   falls back to the browser's #0000ee, which is ~1.3:1 against this
   background — invisible in practice. */
a { color: var(--offwhite); text-decoration-color: var(--slate); }
a:hover { text-decoration-color: var(--amber); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* The attribution limit. Never collapsed, never below the fold. */
.attribution {
  border-left: 3px solid var(--amber);
  padding: .9rem 1rem; margin: 1.4rem 0 0;
  background: rgba(245,158,11,.06);
}
.attribution strong { display: block; margin-bottom: .35rem; }
.attribution p { margin: 0; color: var(--mist); font-size: .96rem; }

.estimate { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.estimate .amount { font-size: 1.5rem; color: var(--amber); }
.source-class {
  display: inline-block; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--slate);
  border: 1px solid var(--border); border-radius: 3px;
  padding: .15rem .45rem; margin-left: .4rem; vertical-align: middle;
}
.notes { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.notes li {
  color: var(--mist); font-size: .96rem; margin-bottom: .6rem;
  padding-left: 1rem; border-left: 1px solid var(--border);
}
.sources {
  margin: 1.4rem 0 0; padding: 1rem 0 0; list-style: none;
  border-top: 1px solid var(--border);
}
.sources li {
  font-size: .82rem; color: var(--slate); margin-bottom: .55rem; line-height: 1.5;
}
.sources strong {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate);
  margin-bottom: .15rem; font-weight: 400;
}
.sources a { color: var(--mist); }

.checked {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--slate); margin-top: 1.3rem;
}

footer { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
footer h2 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); font-weight: 400;
}
footer p { color: var(--mist); font-size: .96rem; }
footer .meta { color: var(--slate); font-size: .86rem; }
footer a { color: var(--mist); }

@media (prefers-reduced-motion: no-preference) {
  #result[data-shown] .card { animation: rise .28s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } }
}