/* proto-pages-parts.css: RaceQuip's line and part pages (templates/search/_rq_page.html and the 12 pages that extend it)
   over the shared frame of proto-pages.css, on cl-site.css's --site-* tokens: the card's colour, rating and size select
   (templates/search/_rq.html) and the which-rating table. Lines and parts share one shape here,
   so they share this file. Classes are rq-*. */
@layer base, kit, site;

@layer site {

/* the card: the colour and the rating under the name, the size select over the Add */
.rq-card__colour { font: 400 15px/1.25 var(--site-font-body); color: var(--site-fg); }
.rq-card__rating { align-self: flex-start; padding: 2px 8px; border: 2px solid var(--site-fg); font: 700 14px/1.3 var(--site-font-heading); letter-spacing: .3px; text-transform: uppercase; color: var(--site-fg); }
.rq-card__size { font: 400 15px/1.25 var(--site-font-body); color: var(--site-fg); margin-bottom: 8px; }
.rq-add { display: flex; flex-direction: column; gap: 8px; }
.rq-add__size {
  width: 100%; min-height: 40px; padding: 0 8px; border: 2px solid var(--site-fg); border-radius: var(--site-radius);
  background: var(--site-bg); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body);
}
.rq-add__size:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

/* the which-rating table */
.rq-which { margin-top: 16px; max-width: 900px; }

@media (max-width: 600px) {
  .rq-card__colour, .rq-card__size { font-size: 13px; }
  .rq-card__rating { font-size: 13px; }
  .rq-which tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--site-line); }
  .rq-which th, .rq-which td { border-bottom: 0; }
  .rq-which td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; padding-top: 0; }
}

}