/*! * SmartHomie suburb autocomplete (card #246) — self-contained styles for the type-ahead dropdown. * * Namespaced `--sh-ac-*` custom properties carry sane fallback values, and each reads the site's * theme token when present (var(--surface) etc.), so the control inherits the page look on the real * site but still renders correctly standalone (the demo/test page) and on the sign-up form. * The list is appended to and positioned as fixed by the JS. */ .sh-ac-list { --sh-ac-bg: var(--surface, #fffdfa); --sh-ac-line: var(--card-line, #e7ddd2); --sh-ac-ink: var(--ink, #2a1b14); --sh-ac-accent: var(--accent-2, #b4562a); --sh-ac-wash: var(--accent-wash, #f6ede4); --sh-ac-muted: var(--muted, #8a7c70); position: fixed; z-index: 200; background: var(--sh-ac-bg); border: 1px solid var(--sh-ac-line); border-radius: 14px; box-shadow: 0 18px 44px rgba(51, 34, 28, 0.16); overflow: hidden; text-align: left; font-family: var(--body, system-ui, -apple-system, "Segoe UI", sans-serif); } .sh-ac-list[hidden] { display: none; } .sh-ac-list button { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.98rem; padding: 0.6em 1.1em; border: 0; background: none; color: var(--sh-ac-ink); cursor: pointer; } .sh-ac-list button b { color: var(--sh-ac-accent); } .sh-ac-list button.sel, .sh-ac-list button:hover { background: var(--sh-ac-wash); } .sh-ac-list button:focus-visible { outline: 2px solid var(--focus, #b4562a); outline-offset: -2px; } .sh-ac-dym { font-size: 0.82rem; color: var(--sh-ac-muted); padding: 0.5em 1.1em 0.3em; border-top: 1px dashed var(--sh-ac-line); } @media (prefers-reduced-motion: no-preference) { .sh-ac-list button { transition: background 0.12s ease; } }