/* answers.css — the search box, its results, the "ask us" block and the share row.
 *
 * Four sites, four palettes, one stylesheet. Every colour here is taken from the
 * host site's own tokens with a fallback chain, so this file inherits each brand
 * (and each site's dark mode) instead of introducing a fifth look:
 *   --text / --ink, --text-muted / --muted, --border / --line, --surface, --accent.
 * Nothing below sets a raw colour except as the last fallback in a var() chain.
 */

.ans-search,
.ans-ask,
.ans-share {
  --ans-text:    var(--text, var(--ink, #1d2433));
  --ans-muted:   var(--text-muted, var(--muted, #5b6473));
  --ans-line:    var(--border, var(--line, rgba(128,128,128,.28)));
  --ans-surface: var(--surface, #fff);
  --ans-accent:  var(--accent, #2e8f66);
  /* Text ON the accent. The page background is the one token guaranteed to
     contrast with the accent in both themes: near-white in light mode, near-black
     in dark. Deriving it from --surface alone broke on SubSense, whose prose rule
     repainted the link purple on a purple button. */
  --ans-on-accent: var(--ground, var(--surface, #fff));
}

/* ---- search box ---- */
.ans-search { margin: 1.4rem 0 .4rem; }
.ans-search-label {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ans-muted); margin-bottom: .4rem;
}
.ans-search input[type="search"] {
  width: 100%; box-sizing: border-box;
  padding: .72rem .9rem; font: inherit; font-size: 1rem; line-height: 1.4;
  color: var(--ans-text); background: var(--ans-surface);
  border: 1px solid var(--ans-line); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
.ans-search input[type="search"]::placeholder { color: var(--ans-muted); opacity: .8; }
.ans-search input[type="search"]:focus-visible {
  outline: 2px solid var(--ans-accent); outline-offset: 2px; border-color: var(--ans-accent);
}

/* ---- results ---- */
.ans-results { margin: .9rem 0 1.4rem; }
.ans-count, .ans-none {
  font-size: .85rem; color: var(--ans-muted); margin: 0 0 .6rem;
}
.ans-hits { list-style: none; margin: 0; padding: 0; }
.ans-hits li {
  padding: .7rem 0; border-top: 1px solid var(--ans-line);
}
.ans-hits li:last-child { border-bottom: 1px solid var(--ans-line); }
.ans-hits a { text-decoration: none; }
.ans-hits a:hover strong { text-decoration: underline; }
.ans-hit-d { display: block; margin-top: .2rem; font-size: .9rem; color: var(--ans-muted); }
.ans-results mark {
  background: transparent; color: inherit; font-weight: 700; padding: 0;
}

/* ---- ask us ---- */
.ans-ask {
  margin: 2rem 0 .5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--ans-line); border-radius: 12px;
  background: var(--surface-2, var(--ans-surface));
}
.ans-ask p { margin: 0 0 .7rem; font-size: .95rem; }
.ans-ask p:last-child { margin-bottom: 0; }
.ans-ask-btn {
  display: inline-block; padding: .55rem .95rem; font-size: .92rem; font-weight: 600;
  text-decoration: none; color: var(--ans-on-accent); background: var(--ans-accent);
  border-radius: 9px;
}
.ans-ask-btn:hover { filter: brightness(1.06); }
.ans-ask-fine { font-size: .82rem; color: var(--ans-muted); }
.ans-ask-typed { display: none; }
.ans-ask-live .ans-ask-typed { display: inline; }

/* ---- share row ---- */
.ans-share {
  margin: 2.2rem 0 .5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--ans-line);
}
.ans-share-h {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ans-muted); margin-bottom: .6rem;
}
.ans-share-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.ans-share-btn {
  display: inline-block; padding: .42rem .8rem;
  font: inherit; font-size: .88rem; font-weight: 500; line-height: 1.35;
  color: var(--ans-text); background: var(--ans-surface);
  border: 1px solid var(--ans-line); border-radius: 999px;
  text-decoration: none; cursor: pointer;
}
/* Every site underlines links inside body copy. A pill that is also underlined
   reads as two controls, so this selector is deliberately specific enough to win
   against each site's prose rule without reaching for !important. */
.ans-share .ans-share-row a.ans-share-btn,
.ans-hits a { text-decoration: none; }
.ans-ask a.ans-ask-btn { text-decoration: none; color: var(--ans-on-accent); }
.ans-share-btn:hover { border-color: var(--ans-accent); color: var(--ans-accent); }
.ans-share-native { border-color: var(--ans-accent); color: var(--ans-accent); font-weight: 600; }
.ans-share-fine { margin: .7rem 0 0; font-size: .8rem; color: var(--ans-muted); }