/* ParentProof AI filtering — first-class Home prompt and Settings card.
 * The prompt reuses .pg-prompt/.pg-actions/.pg-eyebrow/.pg-shield/.pill
 * verbatim from parent-guard.css (those rules are generic, not scoped to
 * #parentGuardCard). Only the id-scoped touch-ups below are new. */
#aiFilterCard .sect { margin: 1px 0 0; }
#aiFilterCard .help { margin-bottom: 14px; }

#aiFilterCard .pg-toggle {
  align-items: center;
  min-height: 44px;
}

#aiFilterCard .pg-toggle input {
  width: 20px;
  height: 20px;
  margin-top: 0;
}

#aiFilterCard #consentAiControls > .fineprint {
  display: block;
  margin-top: 8px;
}

#aiFilterAdvancedBtn {
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------
 * DEF-007 (owner's 2026-09-21 visual audit) — the compact banner.
 *
 * MEASURED: the prompt is 288px in an 812px viewport (35%) and repeats above
 * Overview, My Devices, Apps and Websites. js/ai-filter.js adds
 * `.aif-prompt-compact` on the three SECONDARY screens only; Home keeps the
 * whole card, and so does the Settings card, so the full explanation is never
 * more than one tap away.
 *
 * CSS-THAT-IS-REALLY-BEHAVIOUR AUDIT (commit ed3eaf68's lesson) — this block
 * sets `display: none` on user-facing prose inside a card that JS also writes
 * into, so the audit was done FIRST and is the reason the selectors are the
 * shape they are:
 *
 *   - Every text write in js/ai-filter.js was listed
 *     (`grep -n '\.textContent *=' public/js/ai-filter.js`): four sites.
 *     THREE are `#aiFilterState` (the Settings pill — not in this card at
 *     all). The FOURTH is `#aiFilterPromptMsg`, and it is in this card:
 *     render() writes aif.savingOn / aif.savingOff / aif.savedOn /
 *     aif.savedOff / aif.saveFailed / aif.loadFailed into it. It is the one
 *     node that must never be hidden, and NOTHING below selects it.
 *   - So the prose rules name their targets by class — `.pg-eyebrow`,
 *     `.aif-prompt-lede`, `.fineprint` — and never `\.pg-prompt-body > p`,
 *     which WOULD have swept #aiFilterPromptMsg (a `<p class="muted
 *     pg-status">` in that same container) up with them. That selector is the
 *     exact mistake this comment exists to prevent; it is written out here so
 *     a later edit cannot "simplify" the three class names back into it.
 *   - `#aiFilterPromptOn` is hidden by js/ai-filter.js's own `is-hidden`
 *     class, NOT by a rule here. A button hidden by a stylesheet is still
 *     focusable and still activatable by assistive technology, so "you cannot
 *     accept from this screen" has to be a DOM fact, not a paint.
 *   - Nothing here sets `opacity` on a live control.
 * ------------------------------------------------------------------------ */
#aiFilterPrompt.aif-prompt-compact .pg-eyebrow,
#aiFilterPrompt.aif-prompt-compact .aif-prompt-lede,
#aiFilterPrompt.aif-prompt-compact .fineprint { display: none; }

#aiFilterPrompt.aif-prompt-compact { padding: 14px 16px; gap: 12px; }

#aiFilterPrompt.aif-prompt-compact .pg-prompt-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
#aiFilterPrompt.aif-prompt-compact .pg-prompt-icon svg { width: 18px; height: 18px; }

#aiFilterPrompt.aif-prompt-compact h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

#aiFilterPrompt.aif-prompt-compact .pg-actions { margin-top: 10px; gap: 8px; }
#aiFilterPrompt.aif-prompt-compact .pg-actions .ghost {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 13px;
}

/* #aiFilterPromptMsg keeps its reserved line so a saving/saved/failed sentence
   never reflows the banner out from under the finger that pressed Not now.
   Deliberately NOT collapsed — see the audit note above. */
#aiFilterPrompt.aif-prompt-compact .pg-status { margin-top: 6px; }