/* Illinois Answers / BGA design system — tokens and rules per design.md.
   Flat, square, high-contrast: navy structure, one gold accent, uppercase labels. */
:root {
  --navy: #003282;
  --navy-dark: #000a5a;
  --navy-header: #003a63;
  --link: #003a63;
  --gold: #fac346;
  --gold-dark: #d29b1e;
  --bg: #ffffff;
  --bg-subtle: #f3f5f6;
  --border: #dce1e9;
  --hairline: rgba(0, 0, 0, 0.1);
  --text: #111111;
  --text-muted: #464b50;
}

* { box-sizing: border-box; }

body {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}

button, input {
  font-family: inherit;
}

/* ── Header: navy masthead, gold rule, uppercase nav ── */
header {
  background: var(--navy-header);
  color: #fff;
  padding: 1.25rem 1.25rem 0;
  border-bottom: 3px solid var(--gold);
}

header h1 {
  margin: 0;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.tagline { margin: 0.15rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; }

/* ── Nav ─────────────────────────────────────────────── */
nav { margin-top: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; }
nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 0 0.65rem;
  margin-right: 1.5rem;
  transition: color 150ms ease-in-out;
}
nav a:hover { color: var(--gold); }
nav a.nav-cta {
  background: var(--gold);
  color: var(--text);
  padding: 0.55rem 1.1rem;
  margin-bottom: 0.6rem;
  border-bottom: none;
  transition: background 150ms ease-in-out;
}
nav a.nav-cta:hover { background: var(--gold-dark); color: var(--text); }

/* ── Layout ──────────────────────────────────────────── */
main { max-width: 740px; margin: 0 auto; padding: 1.5rem 1rem; }
footer {
  max-width: 740px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
}
footer a { color: var(--link); }

/* ── Sections ────────────────────────────────────────── */
section {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* One big display headline per page — bold sans, tight leading */
.hero h2 {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 0;
}

/* Signup/manage forms: no boxes — headings carry the hierarchy */
form#signup-form section, form#manage-form section {
  border: 0;
  padding: 0;
  margin-bottom: 1.75rem;
}

/* Delivery methods nested under the real-time checkbox */
.nested { margin-left: 1.75rem; transition: opacity 150ms ease-in-out; }
.nested.disabled { opacity: 0.45; }

/* ── Advanced options (firehose + committee search) ──── */
details.advanced { margin: 1.5rem 0; }
details.advanced > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0;
}
details.advanced > summary:hover { color: var(--navy); }
details.advanced[open] > summary { margin-bottom: 0.5rem; }

/* ── Typography ──────────────────────────────────────── */
h2 { font-size: 1.15rem; margin-top: 1.25rem; margin-bottom: 0.4rem; color: var(--navy); }
h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.hint { font-size: 0.85rem; color: var(--text-muted); }
a { color: var(--link); }
a:hover { color: var(--navy); }

/* ── Forms ───────────────────────────────────────────── */
input[type="email"], input[type="search"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  font-size: 1rem;
  margin: 0.25rem 0;
  border-radius: 0;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
input[type="email"]:focus, input[type="search"]:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(0, 50, 130, 0.12);
}

/* Gold primary button — square, uppercase, dark text (never white on gold) */
button {
  background: var(--gold);
  color: var(--text);
  border: 0;
  border-radius: 0;
  padding: 0.8rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 150ms ease-in-out;
}
button:hover { background: var(--gold-dark); }
button:disabled { opacity: 0.55; cursor: wait; }

/* ── Race / channel checkboxes ───────────────────────── */
.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0.25rem 0.75rem;
}
.race, .channel { display: block; padding: 0.25rem 0; }
.all-cps { border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }

/* ── Committee search ────────────────────────────────── */
.committee-search { position: relative; }
#committee-results {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-top: 2px solid var(--navy);
  background: #fff; max-height: 240px; overflow-y: auto;
}
#committee-results li { padding: 0.5rem 0.75rem; cursor: pointer; }
#committee-results li:hover { background: var(--bg-subtle); }
#committee-chosen { list-style: none; margin: 0.5rem 0 0; padding: 0; }
#committee-chosen li {
  display: inline-block;
  background: var(--navy); color: #fff;
  border-radius: 0;
  padding: 0.2rem 0.7rem; margin: 0.15rem; font-size: 0.875rem;
}
#committee-chosen button.remove {
  background: none; padding: 0 0 0 0.4rem;
  font-size: 1rem; line-height: 1;
  letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, 0.75); font-weight: normal;
}
#committee-chosen button.remove:hover { background: none; color: #fff; }

/* ── Messages ────────────────────────────────────────── */
.message { font-size: 1.05rem; background: #fff; border: 1px solid var(--border); padding: 1.25rem; }
.message.error { border-color: #c0392b; }
#form-status { min-height: 1.5rem; font-weight: 600; }

/* ── Filings table ───────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
th {
  background: var(--navy); color: #fff;
  padding: 0.45rem 0.6rem; text-align: left;
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.filings td a { color: var(--link); font-weight: 500; }
.nowrap { white-space: nowrap; }
.scope-toggle { font-size: 0.875rem; margin-bottom: 0.5rem; }

/* ── CTA link-buttons (landing page) ────────────────── */
.hero p { margin: 0.5rem 0; }
.cta-row { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn {
  display: inline-block;
  background: var(--gold); color: var(--text);
  padding: 0.7rem 1.5rem;
  text-decoration: none; font-size: 0.9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 0;
  transition: background 150ms ease-in-out;
}
.btn:hover { background: var(--gold-dark); color: var(--text); }
.btn-secondary { background: var(--navy); color: #fff; }
.btn-secondary:hover { background: var(--navy-dark); color: #fff; }

/* ── Inline text-style button (switch account) ───────── */
button.linklike {
  background: none; border: 0; padding: 0; border-radius: 0;
  color: var(--link); text-decoration: underline;
  font-size: inherit; font-weight: normal;
  text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
button.linklike:hover { background: none; color: var(--navy); }