/* Search, at the top of the Brain view. Tokens only, so it reads in both themes. */

.srch{margin-bottom:14px}
.srch:hover{transform:none}

.srch-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.srch-bar input[type=text]{flex:1;min-width:200px;font-size:14.5px;padding:12px 14px}

.srch-out{margin-top:14px}
.srch-hint{color:var(--mute);font-size:13px;line-height:1.6;max-width:70ch}
.srch-hint.err{color:var(--bad)}
.srch-count{font:800 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);margin-bottom:12px}

.srch-group{margin-bottom:16px}
.srch-group:last-child{margin-bottom:0}
.srch-group h4{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.srch-group h4 span:last-child{font:800 11px/1 var(--mono);color:var(--dim)}

.srch-kind{display:inline-block;padding:5px 11px;border-radius:999px;font:700 10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;
  background:var(--panel2);border:1px solid var(--line);color:var(--mute)}
.srch-kind.k-journal{background:rgba(255,90,31,.14);border-color:rgba(255,90,31,.32);color:var(--hot)}
.srch-kind.k-session{background:rgba(46,168,255,.13);border-color:rgba(46,168,255,.3);color:var(--cool)}
.srch-kind.k-meal{background:rgba(34,217,122,.13);border-color:rgba(34,217,122,.3);color:var(--good)}
.srch-kind.k-event{background:rgba(157,107,255,.14);border-color:rgba(157,107,255,.32);color:var(--grape)}

.srch-hit{display:grid;grid-template-columns:1fr auto;gap:4px 12px;width:100%;text-align:left;
  padding:11px 13px;margin-bottom:7px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  transition:transform .16s ease,border-color .16s ease}
.srch-hit:last-child{margin-bottom:0}
.srch-hit:hover{border-color:var(--hot);transform:translateX(3px)}
.srch-hit:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.srch-hit b{font:700 14px/1.35 var(--mono);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.srch-hit time{font:700 11px/1.4 var(--mono);color:var(--dim);white-space:nowrap}
.srch-hit p{grid-column:1/-1;font-size:13px;line-height:1.55;color:var(--mute);overflow-wrap:anywhere}

.srch mark{background:rgba(255,90,31,.24);color:var(--ink);border-radius:4px;padding:0 2px}

@media(max-width:700px){
  .srch-hit{grid-template-columns:1fr}
  .srch-hit time{grid-row:2}
  .srch-hit p{grid-row:3}
}