/* Product collection pages — the filter bar and the model table.
   The rest of the page is the shared page layer (pages.css) and the site
   stylesheet; only what is new here carries a collection- prefix, and every
   value comes from assets/css/tokens.css. */

/* -------------------------------------------------------- Quick selection -- */
.collection-filter{display:grid;gap:20px}

.collection-filter__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:22px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}

.collection-field{display:block;min-width:0}
.collection-field__label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--color-navy)}
.collection-field__select{min-width:0}

/* The count line is written by the script. With JavaScript off it stays empty
   and takes no room, and the table below is the whole list. */
.collection-filter__count{margin:0;font-size:14px;color:var(--color-muted)}
.collection-filter__count:empty{display:none}

/* ------------------------------------------------------------ Model table -- */
/* The table keeps its own column widths and scrolls inside this box, so a
   narrow screen scrolls the list instead of breaking the page. */
.collection-table-scroll,
.collection-table__scroll{overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}

.collection-table{width:100%;min-width:900px;border-collapse:collapse;font-size:14px;text-align:left}

.collection-table th,.collection-table td{padding:16px 18px;border-bottom:1px solid var(--color-line);vertical-align:top}
.collection-table thead th{padding-block:14px;background:var(--color-pale);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap}
.collection-table tbody tr:last-child td{border-bottom:0}
.collection-table tbody tr:hover{background:var(--color-accent-pale)}

.collection-table__model{min-width:220px}
.collection-table__name{display:block;font-weight:600;color:var(--color-navy);text-decoration:none}
a.collection-table__name:hover{color:var(--color-accent);text-decoration:underline}
.collection-table__code{display:block;margin-top:5px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--color-muted)}
.collection-table__note{display:block;margin-top:6px;font-size:13px;color:var(--color-muted)}
.collection-table__action{white-space:nowrap}
.collection-table__action .text-link{display:inline-flex;font-size:13px}

/* A row the script has taken out of the list. With JavaScript off no row
   carries the attribute, so every row stays visible. */
.collection-table tbody tr[hidden]{display:none}

/* ------------------------------------------------------------ Responsive -- */
@media(max-width:1180px){
  .collection-filter__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .collection-filter__fields{grid-template-columns:1fr;padding:18px}
  .collection-table{min-width:840px;font-size:13px}
  .collection-table th,.collection-table td{padding:13px 14px}
}

/* A paragraph that stands where the table would be, or under it: the empty
   state of a collection and the note that an empty cell is an unstated value. */
.collection-note{margin:0;max-width:760px;font-size:15px;color:var(--color-muted)}
.collection-filter + .collection-table-scroll{margin-top:26px}
.collection-table-scroll + .collection-note{margin-top:16px}

/* The table's caption names the list for a screen reader without taking a line
   of the page; the heading above the table is what a visitor reads. */
.collection-table__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------------ The page as it renders -- */
/* The filter bar and the table are also written as one flat group of fields —
   a label over a select, one per facet — and a plain scroll box, so both
   shapes are styled here and the page reads the same either way. */
.collection-filter:has(> .collection-filter__field){grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}

.collection-filter__field{margin:0;min-width:0}
.collection-filter__field label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--color-navy)}

.collection-filter__count{grid-column:1/-1}
.collection-filter + .collection-table-scroll,
.collection-filter + .collection-table__scroll{margin-top:26px}

/* The model is the heading of its own row, so it is a th: the name, the series
   code and, where the record carries one, its one-line note. */
.collection-table tbody th{min-width:220px;font-size:14px;font-weight:600;color:var(--color-navy);text-align:left}

/* The caption names the list for a screen reader without taking a line of the
   page; the heading above the table is what a visitor reads. */
.collection-table caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The applications row: cards with the shared card look, written without the
   shared body wrapper, so the padding the wrapper would carry is here. */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card-grid--three{grid-template-columns:repeat(3,1fr)}
.card-grid .card{padding:26px}
.card-grid .card h3{margin:0}
.card-grid .card p{margin:15px 0 0;font-size:15px;color:var(--color-muted)}

.checklist--wide{max-width:760px}

@media(max-width:980px){
  .collection-filter:has(> .collection-filter__field){grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-grid,.card-grid--three{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .collection-filter:has(> .collection-filter__field){grid-template-columns:1fr}
  .card-grid,.card-grid--three{grid-template-columns:1fr}
}

/* The way across from the filter to the selection: the filter narrows the list
   on this page, the selection reads the visitor's own figures against the same
   records. It stands between the filter bar and the table, so the table keeps
   its spacing with the handoff in place. */
.collection-filter__handoff{margin:18px 0 0;font-size:14px}
.collection-filter__handoff .text-link{display:inline-flex}
.collection-filter__handoff + .collection-table__scroll,
.collection-filter__handoff + .collection-table-scroll{margin-top:26px}