/* ============================================================
   EVERYTHING MONTERREY — Answers / reference page
   Extends home.css tokens. A 300-item Q&A with live filter.
   ============================================================ */

/* ---------- masthead ---------- */
.a-head{padding:clamp(2.4rem,5vw,4.5rem) var(--pad) clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.a-head .kick{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.a-head h1{font-size:clamp(2.1rem,5.5vw,3.8rem);line-height:1;margin:1rem 0 0;font-weight:720;
  letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.a-head h1 .n{color:var(--accent)}
.a-head .sub{font-size:clamp(1.02rem,2vw,1.2rem);line-height:1.45;color:var(--ink-soft);
  margin:1.2rem 0 0;max-width:42rem;text-wrap:pretty}

/* ---------- sticky filter bar ---------- */
.filterbar{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.92);
  backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);padding:.75rem var(--pad);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.filterbar .field{flex:1 1 18rem;display:flex;align-items:center;gap:.6rem;
  border:1px solid var(--line-2);background:var(--paper);padding:.55rem .85rem}
.filterbar .field:focus-within{border-color:var(--accent)}
.filterbar .field svg{flex:none;width:14px;height:14px;stroke:var(--muted)}
.filterbar input{flex:1;border:0;background:transparent;font-family:var(--mono);font-size:.84rem;
  color:var(--ink);letter-spacing:.01em}
.filterbar input::placeholder{color:var(--faint)}
.filterbar input:focus{outline:none}
.filterbar .count{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.filterbar .count b{color:var(--accent);font-variant-numeric:tabular-nums}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.45rem .7rem;border:1px solid var(--line-2);color:var(--muted);background:transparent;cursor:pointer;transition:.15s}
.chip:hover{color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:620px){.chips{width:100%;order:3}}

/* ---------- tier divider ---------- */
.tier{padding:clamp(2rem,4vw,3rem) var(--pad) .4rem;border-bottom:1px solid var(--line)}
.tier .t-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.tier h2{font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.05;margin:.6rem 0 .2rem;font-weight:680;
  letter-spacing:-.03em;color:var(--ink)}
.tier p{margin:.3rem 0 1rem;color:var(--muted);font-size:.95rem;max-width:46rem}

/* ---------- category block ---------- */
.qcat{border-bottom:1px solid var(--line)}
.qcat-head{display:flex;align-items:baseline;gap:.7rem;padding:1.5rem var(--pad) .3rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.qcat-head .rng{color:var(--faint)}
.qlist{padding:0 var(--pad) 1rem}

/* ---------- single Q&A ---------- */
.qa{display:grid;grid-template-columns:2.8rem 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line)}
.qa:first-child{border-top:0}
.qa .qn{font-family:var(--mono);font-size:.76rem;color:var(--accent);padding-top:.15rem;font-variant-numeric:tabular-nums}
.qa .q{font-size:1.06rem;font-weight:620;color:var(--ink);letter-spacing:-.01em;line-height:1.35;margin:0}
.qa .a{margin:.5rem 0 0;color:var(--ink-soft);line-height:1.58;font-size:1rem;text-wrap:pretty}
.qa .a .flag{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid var(--line-2);padding:.05rem .35rem;margin-right:.45rem;vertical-align:.08em}
.qa .src{margin:.55rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--muted);
  display:block;line-height:1.5}
.qa .src a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.qa .src a:hover{color:var(--accent)}
@media(max-width:560px){.qa{grid-template-columns:1fr;gap:.2rem}.qa .qn{padding-top:0}}

/* ---------- no results ---------- */
.noresults{display:none;padding:3rem var(--pad);text-align:center;font-family:var(--mono);
  font-size:.84rem;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--line)}
.noresults.show{display:block}

/* hidden by filter */
.qa[hidden],.qcat[hidden],.tier[hidden]{display:none}

/* back link in topbar */
.topbar .back{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;gap:.4rem;align-items:center}
.topbar .back:hover{color:var(--ink)}