/* Catalogue filters (plan readme/piani/2026-11-09-filtri-catalogo-veloci.md, points 5-6): a column beside the list from
   1024 px, a full-height dialog below. Plain CSS: these layouts need no Tailwind class that the compiled file lacks. */
#grant-catalog-shell [hidden] { display: none !important; }

.catalog-layout-main { min-inline-size: 0; }
.catalog-filter-home { display: none; }
.catalog-filter-open { display: inline-flex; }
@media (min-width: 1024px) {
  .catalog-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  /* Sticky inside the page's scroll: the column stays in view while the list scrolls, and scrolls itself when long. */
  .catalog-filter-home {
    display: block; position: sticky; top: 1rem; max-block-size: calc(100vh - 2rem); overflow-y: auto;
    border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 0.25rem 0.75rem;
  }
  .catalog-filter-open { display: none; }
}

.catalog-toolbar { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 0.75rem; }

.catalog-filter-section { border-block-end: 1px solid #f3f4f6; padding-block: 0.625rem; }
.catalog-filter-section:last-child { border-block-end: 0; }
.catalog-filter-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 600; color: #111827;
}
.catalog-filter-section-title::-webkit-details-marker { display: none; }
.catalog-filter-section-title::after { content: "▾"; color: #9ca3af; font-size: 0.75rem; margin-inline-start: auto; }
.catalog-filter-section:not([open]) > .catalog-filter-section-title::after { content: "▸"; }
.catalog-filter-section[open] > .catalog-filter-section-title { margin-block-end: 0.5rem; }

.catalog-filter-options { display: flex; flex-direction: column; gap: 0.125rem; }
.catalog-filter-option {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.1875rem 0.25rem; border-radius: 0.375rem;
  font-size: 0.8125rem; line-height: 1.25rem; color: #374151; cursor: pointer;
}
.catalog-filter-option:hover { background: #f9fafb; }
.catalog-filter-option input { margin-block-start: 0.1875rem; flex-shrink: 0; }
.catalog-filter-option[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.catalog-filter-count { margin-inline-start: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; color: #6b7280; font-size: 0.75rem; }
.catalog-filter-badge {
  display: inline-flex; min-inline-size: 1.25rem; justify-content: center; border-radius: 9999px;
  background: #e0e7ff; color: #1e3888; padding: 0 0.375rem; font-size: 0.75rem; font-weight: 600;
}

/* Below 1024 px: the sections move into this dialog, opened with showModal() (MDN: modal, inert page, Escape). */
.catalog-filter-dialog {
  inline-size: 100%; max-inline-size: 28rem; block-size: 100%; max-block-size: 100%;
  margin: 0 0 0 auto; padding: 0; border: 0; background: #fff;
}
.catalog-filter-dialog[open] { display: flex; flex-direction: column; }
.catalog-filter-dialog::backdrop { background: rgb(17 24 39 / 0.45); }
.catalog-filter-dialog-head {
  display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem;
  border-block-end: 1px solid #e5e7eb;
}
.catalog-filter-dialog-body { flex: 1; overflow-y: auto; padding: 0 1rem; }
.catalog-filter-dialog-foot {
  display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-block-start: 1px solid #e5e7eb; background: #fff;
}

/* The list (point 7): compact rows in one bordered block; the title link covers the row (Bootstrap stretched-link,
   MIT, as in static/css/catalog-badges.css), the star, «Why?» and links stay clickable above it. */
.catalog-rows { margin-block-start: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; }
.catalog-row {
  position: relative; isolation: isolate; display: flex; gap: 1rem; padding: 0.75rem 1rem;
  border-block-end: 1px solid #f3f4f6;
}
.catalog-row:hover { background: #f9fafb; }
.catalog-row-main { flex: 1; min-inline-size: 0; }
.catalog-row-issuer {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: #6b7280;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.catalog-row-title {
  display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.375rem;
  color: #111827;
}
.catalog-row-title:hover { color: #2b50c2; text-decoration: underline; }
.catalog-row-title::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.catalog-row-title:focus-visible::after { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 0.75rem; }
.catalog-row [data-catalog-favorite-form], .catalog-row details, .catalog-row a:not([data-catalog-card-title]),
.catalog-row .catalog-badge-help-button { position: relative; z-index: 2; }
.catalog-row-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-start: 0.375rem; }
.catalog-row [data-catalog-tags] { margin-block-start: 0.375rem; }
.catalog-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; }
.catalog-row-dates { font-size: 0.75rem; line-height: 1.125rem; color: #6b7280; text-align: end; white-space: nowrap; }
@media (max-width: 639.98px) {
  .catalog-row { flex-direction: column; gap: 0.375rem; }
  .catalog-row-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .catalog-row-dates { text-align: start; }
  .catalog-row [data-catalog-favorite-form] { margin-inline-start: auto; }
}
.catalog-more {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.875rem 1rem;
}