/* search: Sökningen: /sok. Ägare: vyn "sök".

   Fältet stort och lugnt överst, sticky. Träffarna linjerar med fältet:
   sortikonen står under förstoringsglaset och texten under söktexten (som i
   Things och Linear). Hela raden är länken, markerbar med j k. */

@layer views {

/* ── .search (sidan) ─────────────────────────────────────────────────────── */

.search {
  --sr-indent: 14px;          /* förstoringsglaset och ikonerna från kanten */
  --sr-icon: 20px;
  --sr-gap: var(--space-5);
  --sr-text: calc(var(--sr-indent) + var(--sr-icon) + var(--sr-gap));
}

/* ── .search-bar ─────────────────────────────────────────────────────────── */

.search-bar {
  position: sticky; top: var(--titlebar-h, 0px); z-index: var(--z-sticky);
  margin: 0 calc(-1 * var(--space-4)) var(--space-4); padding: var(--space-4);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.search-bar__icon {
  position: absolute; top: 50%; left: calc(var(--space-4) + var(--sr-indent)); translate: 0 -50%;
  width: var(--sr-icon); height: var(--sr-icon); color: var(--text-3); pointer-events: none;
}
/* Eget fält (inte inmatningens): grundens ram och ring gäller inte här, så
   fokus ritas här — kantfärgen och en ring, som alla fält. */
.search-bar__input {
  width: 100%; height: 48px; min-height: 48px; padding: 0 var(--space-6) 0 var(--sr-text);
  font: inherit; font-size: var(--fs-17); color: var(--text);
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-lg);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.search-bar__input:hover { background: var(--surface-2); }
.search-bar__input:focus { outline: none; background: var(--bg); border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent); }
.search-bar__input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; cursor: pointer; }

/* ── .search-filter ──────────────────────────────────────────────────────── */

.search-filter { margin: 0 0 var(--space-4); }

/* ── .search-count ───────────────────────────────────────────────────────── */

.search-count {
  margin: 0; padding: var(--space-2) 0 var(--space-2) var(--sr-indent);
  font-size: var(--fs-13); font-weight: var(--fw-600); line-height: var(--lh-row); color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* ── .search-results ─────────────────────────────────────────────────────── */

.search-results { list-style: none; margin: 0; padding: 0; }

/* ── .search-result ──────────────────────────────────────────────────────── */

.search-result { position: relative; }
.search-result + .search-result::before { content: ""; position: absolute; top: 0; left: var(--sr-text); right: 0; border-top: 1px solid var(--line); }
.search-result__link {
  display: grid; grid-template-columns: var(--sr-icon) minmax(0, 1fr); column-gap: var(--sr-gap); align-items: start;
  min-height: var(--hit); padding: var(--space-4) var(--space-4) var(--space-4) var(--sr-indent);
  border-radius: var(--r-sm); color: inherit; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
a.search-result__link:hover { background: var(--hover); }
.search-result.is-selected > .search-result__link { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
.search-result:hover::before, .search-result:hover + .search-result::before,
.search-result.is-selected::before, .search-result.is-selected + .search-result::before { border-color: transparent; }
.search-result__icon { display: flex; align-items: center; height: 20px; color: var(--text-3); }
.search-result__icon .kind-icon { width: 16px; height: 16px; margin-inline: auto; }
.search-result__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.search-result__head { display: flex; align-items: baseline; gap: var(--space-5); min-width: 0; }
.search-result__title { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: var(--fw-500); line-height: 20px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result__date { flex: none; font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.search-result__snippet {
  font-size: var(--fs-13); line-height: var(--lh-row); color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.search-result__kind { color: var(--text-3); }
.search-result mark { color: var(--text); background: var(--attention-tint); border-radius: 2px; padding: 0 1px; }

/* Doit.app utan fokus: den markerade träffen grå (som mac.css för listorna). */
html.mac-inactive body.in-mac .search-result.is-selected > .search-result__link { background: var(--active); box-shadow: none; }

/* ── .search-foot ────────────────────────────────────────────────────────── */

.search-foot { margin-top: var(--space-7); padding-left: var(--sr-indent); font-size: var(--fs-12); color: var(--text-3); }
.search-foot .keys-hint { margin-left: var(--space-2); }

/* Telefonen: fältet sticky under statusraden, rader på minst 52 px,
   brödtext 17, utdraget på två rader. Filtren på en rad som går att svepa. */
@media (max-width: 600px) {
  .search { --sr-indent: 12px; }
  .search-bar { top: env(safe-area-inset-top); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .search-bar__icon { left: calc(var(--gutter) + var(--sr-indent)); }
  .search-bar__input { height: 48px; font-size: var(--fs-17); }
  .search-filter {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    /* Raden fortsätter: den högra kanten tonar ut, och luft efter det sista chipet. */
    -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-9)), transparent);
    mask-image: linear-gradient(to right, currentColor calc(100% - var(--space-9)), transparent);
  }
  .search-filter::after { content: ""; flex: none; width: 1px; }
  .search-filter::-webkit-scrollbar { display: none; }
  .search-result__link { min-height: 52px; padding-block: var(--space-5); }
  .search-result.is-selected > .search-result__link { box-shadow: inset 3px 0 0 var(--selected-edge); }
  .search-result__title { font-size: var(--fs-17); line-height: 22px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .search-result__icon { height: 22px; }
  .search-result__date { font-size: var(--fs-14); }
  .search-result__snippet { font-size: var(--fs-15); -webkit-line-clamp: 2; }
}
}