/* ==========================================================================
   Brokk Search Overlay
   ACSS tokens: --primary, --text-dark, --text-dark-muted, --space-*, --font-condensed,
   --radius, --radius-xs, --neutral-light — same set as search-destroy/brokk-search.css.
   ========================================================================== */

.brk-so {
    position: fixed;
    inset:    0;
    z-index:  9999;
    display:  flex;
    align-items:     flex-start;
    justify-content: center;
}

.brk-so[hidden] { display: none; }

.brk-so__scrim {
    position:         absolute;
    inset:            0;
    background-color: rgba(0, 0, 0, 0.55);
}

.brk-so__panel {
    position:         relative;
    z-index:           1;
    width:            100%;
    max-width:        720px;
    margin:           8vh var(--space-m, 1.25rem) 0;
    background-color: #fff;
    color:            var(--text-dark, #000);
    border-radius:    var(--radius, 5px);
    box-shadow:       0 24px 60px rgba(0, 0, 0, 0.3);
    max-height:       82vh;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
}

/* ── Field ─────────────────────────────────────────────────────────────── */
/* Wrapper padding only — the visible bordered "field" is .brk-so__input-box
   below, styled like any other text input on the site (see e.g.
   .brk-filter__search-input in components/filter-ui). No accent-colored
   border or underline; a search field shouldn't look different from other
   form fields just because it lives in an overlay. */
.brk-so__field {
    display:     flex;
    align-items: center;
    gap:         var(--space-s, 0.75rem);
    padding:     var(--space-l, 1.75rem) var(--space-l, 1.75rem) var(--space-m, 1.25rem);
    flex-shrink: 0;
}

.brk-so__input-box {
    flex:          1;
    min-width:     0;
    display:       flex;
    align-items:   center;
    gap:           var(--space-s, 0.75rem);
    border:        1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius-xs, 2px);
    background:    #fff;
    padding:       0.9rem 1.2rem;
}
.brk-so__input-box:focus-within {
    border-color: var(--text-dark, #000);
    box-shadow:   0 0 0 1px var(--text-dark); /* fokus syns på rutan, 2 px svart */
}
/* Ingen egen ring på själva inputen: den ritades som ett fält i fältet.
   Fyra klasser för att väga över ACSS `body.bricks-is-frontend.bricks-is-frontend :focus`. */
.brk-so .brk-so__input-box .brk-so__input:focus,
.brk-so .brk-so__input-box .brk-so__input:focus-visible {
    outline:    none;
    box-shadow: none;
}

.brk-so__field .brokk-icon { color: var(--text-dark-muted, #595959); flex-shrink: 0; }

.brk-so__input {
    flex:        1;
    min-width:   0;
    border:      0;
    outline:     0;
    box-shadow:  none;
    background:  transparent;
    font-family: "Geist", sans-serif;
    font-size:   1.4rem;
    font-weight: 500;
    color:       var(--text-dark, #000);
}

.brk-so__clear {
    border:      0;
    background:  transparent;
    cursor:      pointer;
    font-family: "Geist", sans-serif;
    font-size:   var(--text-xs, 0.8rem);
    font-weight: 500;
    color:       var(--text-dark-muted, #595959);
    flex-shrink: 0;
}

/* Stängknapp i fältets höjd (kvadrat), inte en lös "Esc"-ruta. */
.brk-so__close {
    align-self:      stretch;
    min-width:       4.4rem; /* tryckyta 44 px; höjden följer fältet */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    padding:         0;
    border:          1px solid var(--neutral-light);
    border-radius:   var(--radius-xs);
    background:      transparent;
    color:           var(--text-dark);
    cursor:          pointer;
    transition:      background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.brk-so__field .brk-so__close .brokk-icon { color: currentColor; }

/* ── Results scroll area ───────────────────────────────────────────────── */
.brk-so__results {
    overflow-y: auto;
    padding:    var(--space-m, 1.25rem) var(--space-l, 1.75rem) var(--space-l, 1.75rem);
}

.brk-so__label {
    font-family:    "Geist", sans-serif;
    font-size:      1.05rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--text-dark-muted, #595959);
    margin-bottom:  var(--space-xs, 0.6rem);
}

/* ── Empty state: popular / recent / quick links ──────────────────────── */
.brk-so__empty { display: flex; flex-direction: column; gap: var(--space-l, 1.75rem); }

.brk-so__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs, 0.6rem); }

.brk-so__chip {
    border:      1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius-xs, 2px);
    background:  #fff;
    cursor:      pointer;
    padding:     7px 12px;
    font-family: "Geist", sans-serif;
    font-size:   1.2rem;
    font-weight: 500;
    color:       var(--text-dark, #000);
    transition:  border-color var(--dur-fast);
}
.brk-so__chip:hover,
.brk-so__chip.is-active { border-color: var(--text-dark, #000); }

/* Senaste: samma chip, med klocka framför. */
.brk-so__chip--recent {
    display:     inline-flex;
    align-items: center;
    gap:         calc(var(--space-xs) / 2);
}
.brk-so__chip--recent .brokk-icon { color: var(--text-dark-muted); flex-shrink: 0; }

/* Rubrik + "Clear history" på samma rad. */
.brk-so__label-row {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             var(--space-s);
}
.brk-so__label-action {
    border:          0;
    padding:         0;
    background:      transparent;
    cursor:          pointer;
    font-size:       var(--text-xs);
    color:           var(--text-dark-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.brk-so__label-action:hover { color: var(--text-dark); }

.brk-so__row {
    display:      flex;
    align-items:  center;
    gap:          var(--space-xs, 0.6rem);
    width:        100%;
    border:       0;
    border-bottom: 1px solid var(--neutral-light, #ececec);
    background:   transparent;
    cursor:       pointer;
    padding:      9px 0;
    text-align:   left;
    text-decoration: none;
    font-family:  "Geist", sans-serif;
    font-size:    1.3rem;
    color:        var(--text-dark, #000);
}
.brk-so__row.is-active,
.brk-so__row:hover { color: var(--text-dark, #000); background-color: var(--hdd-link-bg-hover); }
.brk-so__row svg { flex-shrink: 0; color: var(--text-dark-muted, #8a8a8a); }

/* Snabblänkar: en lista med pil, linjerna mellan raderna och hovertonen inskjuten. */
.brk-so__links { border-top: 1px solid var(--neutral-light); }
.brk-so__row--link {
    font-weight:     500;
    justify-content: space-between;
    padding:         1.2rem var(--space-xs);
    transition:      background-color var(--dur-fast) var(--ease-out);
}
.brk-so__row--link .brokk-icon { transition: translate var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .brk-so__row--link:hover .brokk-icon { translate: 0.3rem 0; color: var(--text-dark); }
    .brk-so__close:hover { background-color: var(--hdd-link-bg-hover); border-color: var(--text-dark); }
}

/* ── Live hit groups ───────────────────────────────────────────────────── */
.brk-so__hits { display: flex; flex-direction: column; gap: var(--space-m, 1.25rem); }
.brk-so__group + .brk-so__group { border-top: 1px solid var(--neutral-light, #ececec); padding-top: var(--space-m, 1.25rem); }

.brk-so__prod,
.brk-so__doc,
.brk-so__page {
    display:       flex;
    align-items:   center;
    width:         100%;
    border:        0;
    background:    transparent;
    cursor:        pointer;
    text-align:    left;
    padding:       8px 10px;
    margin:        0 -10px;
    border-radius: var(--radius-xs, 2px);
}
.brk-so__prod.is-active, .brk-so__prod:hover,
.brk-so__doc.is-active,  .brk-so__doc:hover,
.brk-so__page.is-active, .brk-so__page:hover { background-color: var(--hdd-link-bg-hover); }

/* Transparent, not a grey box — the product cut-out's own shape shows
   through otherwise (same fix as .search-best-match__media). */
.brk-so__prod-media {
    width:        56px;
    height:       42px;
    flex-shrink:  0;
    margin-right: var(--space-s, 0.75rem);
}
.brk-so__prod-media img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; /* vit bildbakgrund syns inte som en ruta på den markerade raden */ }

.brk-so__prod-name {
    font-family:    var(--font-condensed);
    font-weight:    700;
    text-transform: uppercase;
    font-size:      1.5rem;
    flex:           1;
    min-width:      0;
}
/* Understrykning, inte textfärg — #ffcd00 mot vitt mäter ≈1,5:1, se
   brokk-search.css för uträkningen. */
.brk-so__prod-name strong {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary, #ffcd00);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.brk-so__prod-spec {
    font-family: "Geist", sans-serif;
    font-size:   1.1rem;
    color:       var(--text-dark-muted, #595959);
    flex-shrink: 0;
    margin-left: var(--space-s, 0.75rem);
}

.brk-so__doc-title,
.brk-so__page > span:first-child {
    font-family: "Geist", sans-serif;
    font-size:   1.3rem;
    font-weight: 500;
    flex:        1;
    min-width:   0;
}
.brk-so__doc-title strong,
.brk-so__page strong { background-color: var(--primary, #ffcd00); font-weight: 500; }

.brk-so__doc-kind,
.brk-so__page-type {
    font-family: "Geist", sans-serif;
    font-size:   1.1rem;
    color:       var(--text-dark-muted, #595959);
    flex-shrink: 0;
    margin-left: var(--space-s, 0.75rem);
}

/* ── Footer: keyboard hints + submit ───────────────────────────────────── */
.brk-so__foot {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             var(--space-m, 1.25rem);
    margin-top:      var(--space-m, 1.25rem);
    padding-top:     var(--space-m, 1.25rem);
    border-top:      1px solid var(--neutral-light, #ececec);
    flex-wrap:       wrap;
}

.brk-so__keys { display: flex; gap: var(--space-m, 1.25rem); font-size: 1.1rem; color: var(--text-dark-muted, #595959); }
.brk-so__keys b {
    font-family: ui-monospace, Menlo, monospace;
    font-size:   1rem;
    border:      1px solid var(--neutral-light, #d9d9d9);
    padding:     2px 5px;
    margin-right: 4px;
}

.brk-so__seeall {
    font-family:    var(--font-condensed);
    font-weight:    700;
    text-transform: uppercase;
    font-size:      1.25rem;
    background:     var(--primary, #ffcd00);
    color:          #332900;
    border:         0;
    cursor:         pointer;
    padding:        10px 16px;
    border-radius:  var(--radius-xs, 2px);
    white-space:    nowrap;
}

/* ── No hits ───────────────────────────────────────────────────────────── */
.brk-so__nohits p { font-family: "Geist", sans-serif; font-size: 1.4rem; margin: 0 0 var(--space-s, 0.75rem); }
.brk-so__dym { border: 0; background: transparent; cursor: pointer; font-weight: 700; border-bottom: 2px solid var(--primary, #ffcd00); padding: 0; font-size: 1.4rem; font-family: "Geist", sans-serif; }
.brk-so__ask { color: var(--text-dark-muted, #595959); font-size: 1.15rem !important; }
.brk-so__ask a { color: var(--text-dark, #000); font-weight: 600; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .brk-so__panel { margin: 0; max-width: none; height: 100%; max-height: none; border-radius: 0; }
    .brk-so__field { padding: var(--space-s, 0.9rem) var(--space-m, 1.1rem); }
    .brk-so__results { padding: var(--space-s, 0.9rem) var(--space-m, 1.1rem) var(--space-m, 1.1rem); }
    .brk-so__foot { flex-direction: column; align-items: stretch; }
    .brk-so__seeall { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .brk-so__row--link .brokk-icon { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .brk-so__panel { animation: brk-so-in 160ms ease-out; }
}
@keyframes brk-so-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}