/* ==========================================================================
   Pulsar Theme — Search Modal (Cmd+K)
   ========================================================================== */

.pls-search-modal{display:none;position:fixed;inset:0;z-index:500;background:rgba(15,29,54,.6);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding:min(15vh,120px) 16px 32px}
.pls-search-modal--open{display:flex}

.pls-search-modal__box{width:100%;max-width:580px;background:var(--pls-surface);border-radius:var(--pls-radius-lg);box-shadow:var(--pls-shadow-lg);overflow:hidden}

.pls-search-modal__header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--pls-border-soft)}
.pls-search-modal__header .pls-icon{color:var(--pls-mute);flex-shrink:0}

[data-search-input]{flex:1;border:none;outline:none;font-size:16px;color:var(--pls-ink);background:transparent;font-family:var(--pls-font)}
[data-search-input]:focus-visible{outline:2px solid var(--pls-brand,#1e63d4);outline-offset:2px}
[data-search-input]::placeholder{color:var(--pls-mute)}

[data-search-results]{max-height:400px;overflow-y:auto;padding:0}

.pls-search-modal__item{display:block;padding:14px 20px;color:var(--pls-ink);font-size:14px;font-weight:500;border-bottom:1px solid var(--pls-border-soft);transition:background .1s}
.pls-search-modal__item:last-child{border-bottom:none}
.pls-search-modal__item:hover{background:var(--pls-bg)}
.pls-search-modal__item-title{display:block}

/* Articles carry a square thumbnail to the left of the title: the piece is
   recognised before it is read.
   These rules come AFTER .pls-search-modal__item on purpose: that one declares
   display:block and, at equal specificity, the later rule wins — higher up, the
   thumbnail would end up above the title. */
.pls-search-modal__item--post{display:flex;align-items:center;gap:12px}
.pls-search-modal__item--post .pls-search-modal__item-title{display:block;line-height:1.35;min-width:0}
.pls-search-modal__thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0;background:var(--pls-bg)}

.pls-search-modal__empty{padding:24px 20px;color:var(--pls-mute);font-size:14px;text-align:center}

.pls-search-modal__all{display:block;padding:14px 20px;text-align:center;font-size:13px;font-weight:600;color:var(--pls-brand);border-top:1px solid var(--pls-border-soft);transition:background .1s}
.pls-search-modal__all:hover{background:var(--pls-brand-soft)}

.pls-search-modal__footer{padding:10px 20px;border-top:1px solid var(--pls-border-soft);font-size:11px;color:var(--pls-mute);display:flex;gap:8px}
.pls-search-modal__footer kbd{padding:1px 5px;background:var(--pls-bg);border:1px solid var(--pls-border);border-radius:calc(3px * var(--pls-r));font-size:10px}

@media(max-width:640px){
.pls-search-modal{padding:min(10vh,80px) 12px 20px}
[data-search-results]{max-height:300px}
.pls-search-modal__footer{display:none}
}

/* ── Groups of results, each under its own label ──────────────────────────── */
/* The label is a full width grey band between two rules:
   so the groups stay clearly apart even while the list is scrolled. */
.pls-search-modal__grouptitle{
  display:block;
  padding:9px 20px;
  background:var(--pls-bg);
  border-top:1px solid var(--pls-border-soft);
  border-bottom:1px solid var(--pls-border-soft);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pls-mute);
}
/* The first group touches the search field, which already has its own border. */
.pls-search-modal__group:first-child .pls-search-modal__grouptitle{border-top:0}




.pls-search-modal__item-meta{display:block;font-size:11.5px;color:var(--pls-mute);margin-top:2px}

/* The option the arrow keys are on. The same look as hover: nobody should have
   to wonder whether they are two different things. */
.pls-search-modal__item.is-active,
.pls-search-modal__all.is-active {
    background: var(--pls-brand-soft, rgba(0, 0, 0, .05));
    outline: 2px solid var(--pls-brand, currentColor);
    outline-offset: -2px;
}