.suomi-haku { position: relative; max-width: 100%; }
.suomi-haku__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.suomi-haku__input { flex: 1 1 14em; min-width: 0; padding: .55em .75em; font-size: 1em; border: 1px solid #c3c4c7; border-radius: 4px; box-sizing: border-box; }
.suomi-haku__input:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
.suomi-haku__inflect { display: inline-flex; align-items: center; gap: .35em; font-size: .9em; white-space: nowrap; cursor: pointer; user-select: none; }
.suomi-haku__inflect input { margin: 0; }
.suomi-haku__submit { padding: .55em 1em; cursor: pointer; }
.suomi-haku.is-loading .suomi-haku__input { background-image: linear-gradient(90deg, transparent 0, rgba(34,113,177,.12) 50%, transparent 100%); background-size: 200% 100%; animation: suomi-haku-load 1s linear infinite; }
@keyframes suomi-haku-load { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.suomi-haku__results { position: absolute; z-index: 9999; left: 0; right: 0; top: calc(100% + 4px); max-height: 70vh; overflow-y: auto; background: #fff; color: #1d2327; border: 1px solid #c3c4c7; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.15); text-align: left; }
.suomi-haku__results[hidden] { display: none; }
.suomi-haku__item { display: block; padding: .65em .85em; border-bottom: 1px solid #f0f0f1; color: inherit; text-decoration: none; }
.suomi-haku__item:hover, .suomi-haku__item.is-active { background: #f0f6fc; }
.suomi-haku__title { display: block; font-weight: 600; }
.suomi-haku__meta { display: block; font-size: .78em; color: #646970; margin: .1em 0 .25em; }
.suomi-haku__snippet { display: block; font-size: .88em; line-height: 1.45; color: #3c434a; }
.suomi-haku__results mark, mark.suomi-haku-mark { background: #ffe066; color: inherit; padding: 0 .05em; border-radius: 2px; }
mark.suomi-haku-mark.is-current { background: #ff9f1c; box-shadow: 0 0 0 2px #ff9f1c; }
.suomi-haku__more { display: block; padding: .6em .85em; font-size: .9em; font-weight: 600; text-align: center; text-decoration: none; }
.suomi-haku__empty { padding: .75em .85em; color: #646970; }

.suomi-haku-nav { position: fixed; z-index: 99999; right: 16px; bottom: 16px; width: 250px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: .6em .7em .7em; background: #1d2327; color: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.35); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.suomi-haku-nav__head { display: flex; align-items: flex-start; gap: .5em; margin-bottom: .45em; }
.suomi-haku-nav__q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.suomi-haku-nav__qlabel { font-weight: 400; opacity: .7; }
.suomi-haku-nav__tag { display: inline-block; margin-left: .2em; padding: 0 .4em; font-size: 11px; font-weight: 400; background: rgba(255,255,255,.15); border-radius: 3px; vertical-align: 1px; }
.suomi-haku-nav__row { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.suomi-haku-nav__count { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }
.suomi-haku-nav button { background: rgba(255,255,255,.1); color: #fff; border: 0; margin: 0; padding: .4em .75em; font-size: 13px; line-height: 1; cursor: pointer; border-radius: 4px; }
.suomi-haku-nav button:hover:not(:disabled), .suomi-haku-nav button:focus-visible { background: rgba(255,255,255,.25); }
.suomi-haku-nav button:disabled { opacity: .35; cursor: default; }
.suomi-haku-nav .suomi-haku-nav__close { background: transparent; padding: .25em .4em; opacity: .75; }
.suomi-haku-nav .suomi-haku-nav__close:hover { opacity: 1; }
.suomi-haku-nav__back { display: block; margin-top: .6em; padding: .5em .6em; text-align: center; color: #1d2327 !important; background: #ffe066; border-radius: 4px; text-decoration: none !important; font-weight: 600; }
.suomi-haku-nav__back:hover, .suomi-haku-nav__back:focus-visible { background: #ffd23f; }
@media (max-width: 600px) {
  .suomi-haku-nav { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; }
}

.suomi-haku .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }