/* /comics catalog page. OWNER: comics agent. Tokens only. */
.comics-page { padding-block: 32px 64px; }

.comics-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; scroll-margin-top: calc(var(--header-h) + 16px); }
.comics-head h1 { font-size: var(--step-4); }
.result-count { color: var(--text-2); font-size: var(--step--1); font-weight: 500; }

/* Filters */
.filters { margin-bottom: 28px; }
.filters-toggle { display: none; }
.filters-toggle-icon { display: inline-flex; }
.filter-badge {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--step--1); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.filter-badge[hidden] { display: none; }

.filters-panel {
  background: var(--surface); border-radius: var(--r-lg); padding: 16px;
  display: grid; gap: 14px;
}
.filter-row {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)) auto;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--step--1); color: var(--text-2); font-weight: 600; }
.field input, .field select {
  width: 100%; min-height: 42px; padding: 0 12px; border-radius: var(--r-sm);
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  transition: border-color 0.2s var(--ease-out);
}
.field select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.field select option { background: var(--surface); color: var(--text); }
.field input:hover, .field select:hover { border-color: var(--text-3); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field input::placeholder { color: var(--text-3); }
.field-search { position: relative; }
.field-search input { padding-left: 38px; }
.field-search input::-webkit-search-cancel-button { filter: invert(0.7); }
.field-icon { position: absolute; left: 12px; bottom: 12px; color: var(--text-3); pointer-events: none; }
.reset-btn { min-height: 42px; color: var(--text-2); }
.reset-btn:hover { color: var(--text); }

/* Genres */
.genres { border-top: 1px solid var(--line); padding-top: 12px; }
.genres-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px;
  background: none; border: 0; font-weight: 600; color: var(--text); border-radius: var(--r-sm);
}
.genres-toggle:hover { color: var(--accent); }
.genre-selected { color: var(--accent); font-size: var(--step--1); }
.genres-toggle .chev { display: inline-flex; color: var(--text-3); transition: transform 0.25s var(--ease-out); }
.genres-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.genre-list { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.genre-list[hidden] { display: none; }
.genre-note { color: var(--text-3); font-size: var(--step--1); }
.genre-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2);
  font-size: var(--step--1); font-weight: 600;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s;
}
.genre-chip:hover { border-color: var(--text-3); color: var(--text); }
.genre-n { color: var(--text-3); font-weight: 500; }
.genre-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.genre-chip[aria-pressed="true"] .genre-n { color: color-mix(in srgb, var(--accent) 70%, var(--text-3)); }

/* Results */
.comics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 18px; min-height: 320px; }
.comics-grid.is-state { display: block; }
.comics-grid .empty-state .btn { margin-top: 16px; }
.comics-grid .empty-state p, .comics-grid .error-state p { max-width: 46ch; margin-inline: auto; }

/* Pagination */
.pagination { margin-top: 40px; }
.pagination ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); font-weight: 600;
  transition: background 0.2s var(--ease-out), color 0.2s;
}
a.page-btn:hover { background: var(--raised); color: var(--text); }
.page-btn[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.page-btn[aria-current="page"]:hover { background: var(--accent); color: var(--accent-ink); }
.page-btn[aria-disabled="true"] { opacity: 0.4; }
.page-edge { padding: 0 12px; }
.page-gap { color: var(--text-3); padding: 0 4px; }

@media (max-width: 1000px) {
  .filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .field-search { grid-column: 1 / -1; }
}

@media (max-width: 759.98px) {
  .filters-toggle { display: inline-flex; width: 100%; justify-content: flex-start; }
  .filters-toggle .filter-badge { margin-left: auto; }
  .filters-panel { display: none; margin-top: 10px; }
  .filters-panel.is-open { display: grid; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .field-search, .field-sort { grid-column: 1 / -1; }
  .reset-btn { grid-column: 1 / -1; border-color: var(--line); }
  .comics-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 12px; }
  .edge-label { display: none; }
  .page-btn { min-width: 36px; height: 36px; }
}

@media (max-width: 400px) {
  .comics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}