/* Dense, instant, function over polish (UX bar: diskprices.com). No animation. */
:root {
  --border: #d8d8d8;
  --muted: #666;
  --accent: #0b57d0;
  --bg-alt: #f6f6f6;
  font-size: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
}
button { font: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-head {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border);
}
.site-name { font-weight: 700; color: inherit; }
.cat-switch { font: inherit; padding: 0.15rem; }

.page { display: flex; align-items: flex-start; }

/* Sidebar */
.sidebar {
  width: 230px; flex: none; padding: 0.5rem 0.75rem;
  border-right: 1px solid var(--border);
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
.sidebar-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.reset-all { background: none; border: none; color: var(--accent); padding: 0; }
.facet-group { margin-top: 0.75rem; }
.facet-title { font-weight: 600; margin-bottom: 0.25rem; }
.facet-value { display: flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0; }
.facet-value input { margin: 0; }
.facet-count { color: var(--muted); margin-left: auto; }
.facet-more { background: none; border: none; color: var(--accent); padding: 0.1rem 0; }
.facet-range-inputs { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.2rem; }
.facet-range-inputs input { width: 5.5em; padding: 0.15rem 0.3rem; border: 1px solid var(--border); }
.filters-toggle { display: none; }

/* Results */
.results { flex: 1; min-width: 0; }
.toolbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border);
}
.result-count { font-weight: 600; }
.sort-ctl { display: flex; align-items: center; gap: 0.3rem; }
.sort-key { font: inherit; padding: 0.15rem; }
.sort-dir { border: 1px solid var(--border); background: none; padding: 0.1rem 0.4rem; }
.search { margin-left: auto; padding: 0.2rem 0.4rem; border: 1px solid var(--border); min-width: 12em; }
.chips { padding: 0 0.75rem; }
.chips:not(:empty) { padding: 0.3rem 0.75rem; border-bottom: 1px solid var(--border); }
.chip {
  border: 1px solid var(--border); background: var(--bg-alt); border-radius: 2px;
  padding: 0.1rem 0.45rem; margin: 0.1rem 0.3rem 0.1rem 0;
}

/* Rows */
.row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.35rem 0.75rem; border-bottom: 1px solid var(--border);
}
.row:nth-child(even) { background: var(--bg-alt); }
.row-img { width: 52px; height: 52px; object-fit: contain; flex: none; background: #fff; }
.row-main { flex: 1; min-width: 0; }
.row-name { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-specs { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-price { flex: none; text-align: right; font-weight: 600; min-width: 5.5em; }
.row-metric { color: var(--muted); font-weight: 400; }
.show-more { display: block; margin: 0.75rem auto; padding: 0.3rem 1rem; border: 1px solid var(--border); background: var(--bg-alt); }
.empty, .load-error { padding: 2rem 0.75rem; color: var(--muted); }

/* Homepage */
.home { max-width: 640px; margin: 0 auto; padding: 1rem 0.75rem; }
.tagline { color: var(--muted); }
.cat-card {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.75rem; border: 1px solid var(--border); margin-bottom: 0.5rem; color: inherit;
}
.cat-name { font-weight: 600; color: var(--accent); }
.cat-meta { color: var(--muted); }

/* Mobile: sidebar becomes a drawer */
@media (max-width: 720px) {
  .filters-toggle {
    display: block; margin: 0.4rem 0.75rem 0; padding: 0.25rem 0.75rem;
    border: 1px solid var(--border); background: var(--bg-alt);
    min-height: 44px; min-width: 44px; /* tap target */
  }
  /* 16px floor on text-entry controls: below that iOS zooms the page on focus.
     Class selectors included: .sort-key/.cat-switch's `font: inherit` outranks bare `select`. */
  input, select, textarea, .sort-key, .cat-switch { font-size: 16px; }
  /* align-items:stretch overrides the base flex-start: in column direction,
     align-items sizes the cross (horizontal) axis — flex-start makes children
     shrink-to-fit max-content width (669px of nowrap rows) and overflow. */
  .page { flex-direction: column; align-items: stretch; }
  .sidebar { display: none; width: 100%; border-right: none; border-bottom: 1px solid var(--border); position: static; max-height: none; }
  .sidebar.open { display: block; }
}