/* Search page styles using design tokens (CSS variables) */
.search-hero{margin:24px 0 16px}

.search-form{
  display:flex; gap:8px;
}
.search-form input[type="search"]{
  flex:1 1 auto;
  padding:.8rem 1rem;
  background: var(--bg);
  color: var(--text);
  border:1px solid var(--border);
  border-radius:12px;
}
.search-form input[type="search"]::placeholder{ color: var(--muted); }
.search-form input[type="search"]:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

.search-form button{
  padding:.8rem 1rem;
  border:1px solid var(--border);
  border-radius:12px;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
}
.search-form button:hover{
  filter: brightness(0.98);
}

.search-meta{ color: var(--muted); margin:10px 0 18px }

.result-list{ display:grid; gap:16px }
.result{
  display:grid;
  gap:14px;
  padding:14px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  color: var(--text);
}
.thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:10px;
  background: var(--card);
  overflow:hidden;
}
.thumb img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

.result h2{ margin:2px 0 6px; font-size:1.05rem }
.result h2 a{ text-decoration:none; color:inherit }
.meta{ color: var(--muted); font-size:.9rem; margin-bottom:6px }
.desc{ font-size:.95rem; color: var(--text) }

mark{
  background:#fff3a3; /* fallback */
  padding:0 .15em; border-radius:.15em;
}
/* nicer mark tint if supported */
@supports (color: color-mix(in oklab, white, black)) {
  mark{ background: color-mix(in oklab, var(--accent) 20%, transparent); }
}

.pager{
  display:flex; gap:8px; margin:18px 0; align-items:center;
}
.pager a, .pager span{
  border:1px solid var(--border);
  padding:.5rem .75rem;
  border-radius:10px;
  text-decoration:none;
  color: var(--text);
  background: var(--bg);
}
.pager a:hover{ background: color-mix(in oklab, var(--accent) 6%, var(--bg)); }
.pager .on{
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}