/**
 * bpt-search results page + suggest dropdown.
 *
 * Deliberately minimal and theme-agnostic: inherits the theme's typography and
 * colours, sets only layout and the few affordances the markup needs. Every
 * group renders whether or not its tab is active, so the page works with CSS
 * and JS both off.
 */

.bpts { margin: 0 0 2rem; }

/* --- search form ------------------------------------------------------- */
.bpts-form { position: relative; display: flex; gap: .5rem; margin: 0 0 1.5rem; }
.bpts-form input[type="search"] { flex: 1 1 auto; min-width: 0; }

/* --- suggest dropdown -------------------------------------------------- */
.bpts-suggest {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    max-height: 24rem; overflow-y: auto;
    background: #fff; border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
}
.bpts-suggest[hidden] { display: none; }
.bpts-suggest-item {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .5rem .75rem; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.bpts-suggest-item:last-child { border-bottom: 0; }
.bpts-suggest-item:hover,
.bpts-suggest-item.is-active { background: rgba(0, 0, 0, .05); }
.bpts-suggest-title { font-weight: 600; }
.bpts-suggest-group { font-size: .8em; opacity: .7; white-space: nowrap; }

/* --- group tabs -------------------------------------------------------- */
.bpts-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.bpts-tab {
    padding: .35rem .8rem; text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .2); border-radius: 999px;
}
.bpts-tab.is-active { border-color: currentColor; font-weight: 600; }
.bpts-count { opacity: .65; font-size: .85em; margin-left: .25rem; }

/* --- groups + results --------------------------------------------------- */
.bpts-group { margin: 0 0 2rem; }
.bpts-group h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.bpts-list { list-style: none; margin: 0; padding: 0; }
.bpts-item { padding: .75rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.bpts-title { font-weight: 600; text-decoration: none; }
.bpts-summary { margin: .25rem 0 0; opacity: .8; font-size: .95em; }

/* A cluster card: the heading names the MODULE, never one of its products —
   promoting a product to look like a heading reads as if the others belong to
   it, which is wrong for a family key whose members are separate products. */
.bpts-item--cluster { padding-top: 1rem; }
.bpts-cluster-title { font-weight: 700; text-decoration: none; }
.bpts-others { list-style: none; margin: .4rem 0 0; padding: 0 0 0 1rem; font-size: .95em; }
.bpts-others li { padding: .15rem 0; }
.bpts-more { margin: .35rem 0 0 1rem; font-size: .9em; }

.bpts-showall { margin: .75rem 0 0; font-size: .9em; }

/* --- notes + empty state ------------------------------------------------- */
.bpts-note { font-size: .9em; opacity: .75; }
.bpts-empty { padding: 1rem 0; }

/* The selected group leads. This needs a real flex container — `order` on a
   child of a block parent does nothing — and the tab links also carry a
   #bpts-<group> fragment, so the right section is reached even when this
   stylesheet does not load. Every group stays on the page either way. */
.bpts-groups { display: flex; flex-direction: column; }
.bpts-group { order: 1; }
.bpts-group.is-active { order: 0; }

/* Setup diagnosis shown to administrators only, never to visitors. */
.bpts-admin-note { margin-top: 1rem; padding: .6rem .8rem; border-left: 3px solid #d63638; background: rgba(214, 54, 56, .06); font-size: .9em; }