/* ---- Sort chips (TD-02): interaction states the inline styles can't provide ---- */
.aict-sort-chip{transition:background .15s,border-color .15s,color .15s}
.aict-sort-chip:hover{border-color:#4f46e5 !important;color:#4338ca !important}
.aict-sort-chip.is-active:hover{color:#fff !important}
.aict-sort-chip:focus-visible{outline:3px solid #4338ca;outline-offset:2px}

/* ============================ DARK MODE ============================ */
html[data-theme="dark"]{
  /* contrast block (HP-02) */
}
html[data-theme="dark"] .aict-contrast-block h2{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-contrast-block p{color:#cbd5e1 !important}
html[data-theme="dark"] .aict-contrast-block > div > div{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-contrast-block li{color:#94a3b8 !important}
html[data-theme="dark"] .aict-contrast-block li[style*="font-weight:500"],
html[data-theme="dark"] .aict-contrast-block .aict-us-item{color:#e2e8f0 !important}

/* sort chips + filter selects + pagination (TD-07) */
html[data-theme="dark"] .aict-sort-chip{background:#1e293b !important;border-color:#334155 !important;color:#cbd5e1 !important}
html[data-theme="dark"] .aict-sort-chip.is-active{background:#4f46e5 !important;border-color:#4f46e5 !important;color:#fff !important}
html[data-theme="dark"] .aict-sort-chip:hover{border-color:#6366f1 !important}

/* floating rating widget (A11Y-DARK / TP-03) */
html[data-theme="dark"] #aict-rating-widget{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-head{color:#cbd5e1 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-avg-num{color:#f1f5f9 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-count{color:#94a3b8 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-star{color:#94a3b8 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-close{color:#94a3b8 !important}

/* usage badge (A11Y-DARK) — already greenish; just lift text/border on dark */
html[data-theme="dark"] .aict-usage-badge{background:rgba(34,197,94,.16) !important;border-color:rgba(34,197,94,.4) !important;color:#86efac !important}

/* "Continue with your result" chain panel (A11Y-DARK / TP-03) */
html[data-theme="dark"] #aict-chain-next{background:rgba(99,102,241,.12) !important;border-color:rgba(99,102,241,.35) !important}
html[data-theme="dark"] #aict-chain-next h3{color:#c7d2fe !important}
html[data-theme="dark"] #aict-chain-next .aict-chain-sub{color:#94a3b8 !important}
html[data-theme="dark"] .aict-chain-card{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-chain-card .aict-chain-label{color:#e2e8f0 !important}
html[data-theme="dark"] .aict-chain-prefill-note{background:rgba(34,197,94,.14) !important;color:#86efac !important}

/* collections Save popover (cohesion) */
html[data-theme="dark"] #aict-collect-btn,
html[data-theme="dark"] #aict-collect-pop{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] #aict-collect-pop h4{color:#f1f5f9 !important}
html[data-theme="dark"] #aict-collect-pop .aict-col-row{color:#cbd5e1 !important}

/* blog archive cards (BL): default-dark page had near-black hardcoded titles */
html[data-theme="dark"] .aict-blog-card h2,
html[data-theme="dark"] .aict-blog-card h2 a,
html[data-theme="dark"] .aict-blog-card .aict-blog-card-title{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-blog-card .aict-blog-card-meta,
html[data-theme="dark"] .aict-blog-card time,
html[data-theme="dark"] .aict-blog-card .aict-blog-card-cat{color:#94a3b8 !important}

/* ---- FLOAT (TP-02): bring 2026 fixed widgets into the z-ladder ----
   They shipped at z 9997-9999 (modal/critical-alert layer) → covered the chat
   launcher + each other. Drop to the FAB tier; on mobile clear the bottom-right
   chat launcher / sticky run bar. */
#aict-rating-widget{z-index:var(--aict-z-fab,1200) !important}
#aict-collect-btn{z-index:var(--aict-z-fab,1200) !important}
#aict-collect-pop{z-index:calc(var(--aict-z-fab,1200) + 10) !important}
@media (max-width:640px){
  #aict-rating-widget{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;right:.75rem !important}
  #aict-collect-btn{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
  #aict-collect-pop{bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important}
}

/* ---- Wave 3 dark sweep ---- */
/* /tools/ filter controls + pagination + no-results (TD-05/TD-07) */
html[data-theme="dark"] .aict-search-input,
html[data-theme="dark"] .aict-category-select{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] .aict-pagination a{background:#1e293b !important;border-color:#334155 !important;color:#cbd5e1 !important}
html[data-theme="dark"] .aict-pagination .active{background:#4f46e5 !important;border-color:#4f46e5 !important;color:#fff !important}
html[data-theme="dark"] .aict-pagination .aict-page-gap{color:#64748b !important}
html[data-theme="dark"] .aict-no-results{color:#cbd5e1 !important}
.aict-no-results{text-align:center;padding:2rem 1rem}
/* compare page (CMP-DARK) */
html[data-theme="dark"] .aict-cmp-card,
html[data-theme="dark"] .aict-cmp-related-card,
html[data-theme="dark"] .aict-cmp-hero-tool,
html[data-theme="dark"] .aict-cmp-cat-group{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] .aict-cmp-card-desc,
html[data-theme="dark"] .aict-cmp-cat-label{color:#94a3b8 !important}
html[data-theme="dark"] .aict-cmp-hdr,
html[data-theme="dark"] .aict-cmp-hdr *{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-cmp-howto li{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-cmp-howto li strong{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-cmp-howto li span:last-child{color:#cbd5e1 !important}
/* workflows marketplace (WF-DARK) */
html[data-theme="dark"] .aict-wf-community-card,
html[data-theme="dark"] .aict-wf-cta-banner{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] .aict-wf-cat-chip{background:#1e293b !important;border-color:#334155 !important;color:#cbd5e1 !important}
/* [a11y-axe 2026-06-04] /workflows/ (and other aict-cv2) pages render on the dark #0f172a body
   in the dark/dark-pref state, but the hero h1/intro + section headings keep light-theme dark
   inline colours (#1e293b/#64748b, forced to #0B1B35/#334155 by the "Nuclear" heading sweep) ->
   dark-on-dark invisible. Lighten them in the dark indicators ONLY (resolved-light pages keep
   their dark text on the now-light bg per the gated rules below). */
html[data-theme="dark"] body.aict-cv2 #main [style*="color:#1e293b"],
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 #main [style*="color:#1e293b"],
html[data-theme="dark"] body.aict-cv2 .aict-wf-mp-v3-h2,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .aict-wf-mp-v3-h2{color:#f1f5f9 !important;-webkit-text-fill-color:#f1f5f9 !important}
html[data-theme="dark"] body.aict-cv2 #main [style*="color:#64748b"],
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 #main [style*="color:#64748b"]{color:#cbd5e1 !important;-webkit-text-fill-color:#cbd5e1 !important}

/* ---- PR-DARK: restore dark mode on /pricing/ ----
   ~40 inline !important rescue blocks force `body.aict-cv2` + `.pricing-card`
   to #fff even when the user's pref is dark (body keeps .aict-theme-pref-dark).
   These higher-specificity dark rules win back the dark path WITHOUT touching
   the rescue blocks. Light mode is untouched (gated to dark indicators). */
html[data-theme="dark"] body.aict-cv2,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2{background:#0f172a !important}
html[data-theme="dark"] body.aict-cv2 .pricing-card,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] body.aict-cv2 .pricing-card .plan-name,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .plan-name,
html[data-theme="dark"] body.aict-cv2 .pricing-card .price-amount,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .price-amount,
html[data-theme="dark"] body.aict-cv2 .pricing-card h2,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card h2,
html[data-theme="dark"] body.aict-cv2 .pricing-card h3,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card h3{color:#f1f5f9 !important}
html[data-theme="dark"] body.aict-cv2 .pricing-card .price-period,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .price-period,
html[data-theme="dark"] body.aict-cv2 .pricing-card .plan-features,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .plan-features,
html[data-theme="dark"] body.aict-cv2 .pricing-card .plan-features li,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .plan-features li,
html[data-theme="dark"] body.aict-cv2 .pricing-card p,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card p{color:#cbd5e1 !important}

/* ---- Wave 4/5 small wins ---- */
/* HP-04: mobile intent-chips scroll with no fade → look cut off / undiscoverable */
@media (max-width:640px){
  .aict-intent-chips{-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);mask-image:linear-gradient(to right,#000 86%,transparent)}
}
/* HP-07: hero H1 hardcoded <br> wraps badly across 18 locales — balance the wrap */
.hero-title{text-wrap:balance}
/* HP-08/09: consistent focus-visible on hero/intent/contrast CTAs + input ring */
.aict-hero-search-btn:focus-visible,.aict-intent-submit:focus-visible,.aict-contrast-block a:focus-visible{outline:3px solid #4338ca;outline-offset:2px}
.aict-intent-input-wrap:focus-within,.aict-hero-search-wrap:focus-within{outline:2px solid rgba(79,70,229,.55);outline-offset:1px;border-radius:10px}
.aict-contrast-block a{transition:filter .15s,transform .15s}
.aict-contrast-block a:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* CMP-VS: VS pill used padding-top:4rem to fake-center → misaligns on unequal cards */
.aict-cmp-vs-sep{padding-top:0 !important;align-self:center !important}
/* PR-ACCENT: stale orange pricing accent → indigo brand */
:root{--pricing-accent-hover:#4338ca}
/* ===== CONTRAST TAIL (WCAG AA, 2026-06-03 audit F3/F4/F7/F8) ===== */
/* F3: rating "Thanks" #10b981 (2.54:1 on white) → emerald-700 / dark emerald-400 */
#aict-rating-widget .aict-rw-thanks{color:#047857 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-thanks{color:#34d399 !important}
/* F8: empty rating stars #d1d5db (1.47:1) → readable gray (gold still applies on hover/selected) */
#aict-rating-widget .aict-rw-star{color:#6b7280}
/* F4: collections save flash #16a34a (3.30:1) → emerald-700 / dark emerald-400 */
#aict-collect-msg{color:#047857 !important}
html[data-theme="dark"] #aict-collect-msg{color:#4ade80 !important}
/* F7: breadcrumb separator #cbd5e1 on #f8fafc (1.42:1) → slate-500; theme-aware bar on dark */
.aict-bc-sep,.aict-breadcrumbs .aict-bc-sep,.aict-breadcrumbs-wrap .aict-bc-sep{color:#64748b !important}
html[data-theme="dark"] .aict-breadcrumbs-wrap,html[data-theme="dark"] .aict-breadcrumbs{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-breadcrumbs,html[data-theme="dark"] .aict-breadcrumbs a{color:#cbd5e1 !important}
html[data-theme="dark"] .aict-bc-sep{color:#94a3b8 !important}
/* F5: collections empty-state (was inline color:#94a3b8, 2.56:1 light) → themed class */
.aict-collect-empty{color:#64748b}
html[data-theme="dark"] .aict-collect-empty{color:#94a3b8}