/* Local AI Search Check widget (templates/partials/ai_search_check.html),
 * 2026-10-24. Tokens only (static/css/tokens.css). Mobile first: one column,
 * full-width controls, 44px tap targets; it never sets a width wider than its
 * container, so nothing scrolls sideways at 360px. Shared pieces (.field,
 * .input, .textarea, .button, .note) come from site.css. */

.aic {
  /* Its own type, so a blog post's article serif (19px Newsreader) does not leak in. */
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s4);
  color: var(--body);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.aic__title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 0 0 var(--s4); line-height: var(--lh-tight); }

/* svc-v2.css reverts form controls to browser fonts inside <main> (a textarea
   would be monospace); the widget's controls use the site font everywhere. */
.aic :is(input, textarea, button, select) { font-family: var(--font-sans); }
.aic__form { display: grid; gap: var(--s5); }
.aic__form .input, .aic__form .textarea { width: 100%; min-height: var(--tap); }
.aic__question { min-height: 72px; }
.aic__help { margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }

/* "Try it on our site" and the presets are buttons: they fill fields, they go nowhere. */
.aic__demo {
  min-height: var(--tap); padding: 0 var(--s1); font-size: inherit;
  background: none; border: 0; cursor: pointer;
  color: var(--teal-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.aic__demo:hover { color: var(--navy); }

.aic__presets { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
.aic__presets li { display: flex; max-width: 100%; }
.aic__preset {
  min-height: var(--tap); max-width: 100%; padding: 10px 14px;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.aic__preset:hover { border-color: var(--teal); }
.aic__preset[aria-pressed="true"] { background: var(--teal-tint); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }

.aic__turnstile { min-height: 65px; max-width: 100%; }
.aic__status { margin: 0; min-height: 1.5em; font-weight: 600; color: var(--ink); }
.aic__status:empty { min-height: 0; }
.aic__disclosure { margin: 0; color: var(--muted); }
.aic__disclosure a { color: var(--teal-text); }

/* ---------- Results ---------- */
.aic__results { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); display: grid; gap: var(--s5); }
.aic__results[hidden] { display: none; }
[data-aic-body] { display: grid; gap: var(--s5); }
.aic__head { display: grid; gap: var(--s1); }
.aic__heading { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink); margin: 0; line-height: var(--lh-tight); }
.aic__heading:focus { outline: none; }
.aic__heading:focus-visible { outline: var(--focus); outline-offset: 4px; }
.aic__count { margin: 0; font-weight: 700; color: var(--teal-text); }
.aic__cached { margin: 0; color: var(--muted); }
.aic__note { margin: 0; }

.aic__quote { margin: 0; background: var(--mist); border-left: 4px solid var(--teal); border-radius: var(--r-control); padding: var(--s4); }
.aic__quote-label { font-size: var(--fs-small); font-weight: 700; color: var(--teal-text); margin-bottom: var(--s2); }
.aic__answer { margin: 0; font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.45; color: var(--ink); }
.aic__answer p { margin: 0; }
.aic__answer p::before { content: "\201C"; }
.aic__answer p::after { content: "\201D"; }

.aic__cols { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
.aic__col h4, .aic__checks-title { margin: 0 0 var(--s2); font-size: 1rem; color: var(--ink); }
.aic__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.aic__empty { margin: 0; color: var(--muted); }

.aic__fix { background: var(--navy); color: var(--on-navy); border-radius: var(--r-control); padding: var(--s4); }
.aic__fix-label { margin: 0 0 var(--s1); font-size: var(--fs-small); font-weight: 700; color: var(--teal-on-navy); }
.aic__fix-text { margin: 0; color: var(--white); font-weight: 600; }

.aic__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.aic-check { display: grid; grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.aic-check__text p { margin: 0; }
.aic-check__label { font-weight: 700; color: var(--ink); }
.aic-check__detail { margin-top: 2px; }
.aic-check__info { margin-top: var(--s1); color: var(--muted); }
.aic-check__note { margin-top: var(--s1); color: var(--muted); }

/* Badges: icon and word, never color alone. */
.aic-badge {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  min-height: 28px; padding: 2px 10px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font-size: var(--fs-small); font-weight: 700; white-space: nowrap;
}
.aic-badge svg { flex: none; }
.aic-badge--pass { background: var(--teal-tint); color: var(--teal-text); border-color: var(--teal-tint); }
.aic-badge--partial { background: var(--ochre-tint); color: var(--ochre-text); border-color: var(--ochre-tint); }
.aic-badge--fail { background: var(--white); color: var(--ochre-text); border-color: var(--ochre-text); }
.aic-badge--unknown { background: var(--mist); color: var(--muted); border-color: var(--line-strong); }

.aic__reminder { margin: 0; }
.aic__sim { margin: 0; color: var(--muted); }
.aic__next { margin: 0; color: var(--ink); }
.aic__next a { color: var(--teal-text); font-weight: 600; }
.aic__down { margin: 0; }

@media (min-width: 640px) {
  .aic { padding: var(--s8); }
  .aic__cols { grid-template-columns: 1fr 1fr; }
  .aic-check { grid-template-columns: 8.5rem 1fr; align-items: start; gap: var(--s4); }
}