/*
 * Catalog and product record styling.
 *
 * Only what system.css does not already carry: the record header, the unit
 * switch, the category table controls, the drawings, and the compare extras.
 * Every class is prefixed .product-, .catalog- or .compare-, and every colour
 * comes from a token or from currentColor, so a drawing stays legible on any
 * band tone it is placed on. The quiet text and rule colours are stated twice:
 * once for the dark bands, once inside .band-light, because a value that reads
 * as quiet on carbon is invisible on paper.
 */

/* ------------------------------------------------------------------ */
/* Unit switch                                                         */
/* ------------------------------------------------------------------ */

/* The catalog landing page is an orientation page rather than a record. Its
 * title occupies a fluid, centred row before the visitor chooses a path. */
.products-intro .open-statement {
  width: min(100%, 88rem);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.products-intro .statement {
  max-width: 28ch;
  margin-right: auto;
  margin-left: auto;
}

.products-intro .statement-lead {
  max-width: 74ch;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.products-custom-config {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem clamp(1.5rem, 4vw, 5rem);
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge-strong);
}

.products-custom-config h3 {
  flex: 1 1 16rem;
  max-width: 18ch;
}

.products-custom-config p {
  flex: 2 1 34rem;
  max-width: 68ch;
  color: var(--metal-2);
}

.products-custom-config .action {
  flex: 0 1 auto;
  margin-left: auto;
}

.products-custom-cta {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 720px) {
  .products-custom-config .action {
    margin-left: 0;
  }
}

.product-units {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin: 1.5rem 0 0;
}

.product-units-label {
  font-family: var(--body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--metal-3);
}

.product-units a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--metal-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
}

.product-units a:hover,
.product-units a:focus-visible {
  color: var(--metal);
  border-bottom-color: var(--edge-strong);
}

.product-units a[aria-current="true"] {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

.product-units-note {
  margin: 0.75rem 0 0;
  max-width: var(--measure-width);
  font-size: 0.875rem;
  color: var(--metal-3);
}

/* ------------------------------------------------------------------ */
/* Record header                                                       */
/* ------------------------------------------------------------------ */

.product-identity {
  display: block;
}

.product-sku {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0;
  overflow-wrap: anywhere;
}

.product-summary {
  max-width: var(--measure-width);
  margin: 0.9rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--metal-2);
}

.product-identity .fact-row {
  margin-top: 1.75rem;
}

.product-subhead {
  margin: 2.5rem 0 1rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.product-record-line {
  margin: 2rem 0 0;
  max-width: var(--measure-width);
  font-family: var(--mono);
  font-size: 0.78125rem;
  line-height: 1.6;
  color: var(--metal-3);
}

.product-cautions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-cautions li {
  max-width: var(--measure-width);
  padding: 0.7rem 0;
  border-top: 1px solid var(--edge);
  line-height: 1.6;
}

.product-cautions li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ------------------------------------------------------------------ */
/* Documents and access                                                */
/* ------------------------------------------------------------------ */

.product-access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem 3rem;
  margin-top: 1.5rem;
}

.product-access-block .product-subhead {
  margin-top: 0;
}

.product-access-block p {
  margin: 0 0 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Drawings                                                            */
/* ------------------------------------------------------------------ */

.product-cad {
  display: block;
}

.product-figure {
  margin: 0;
}

/*
 * The plot keeps its own scroll on a narrow screen instead of shrinking the
 * tick labels below a readable size.
 */
.product-plot {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.product-drawing {
  display: block;
  width: 100%;
  min-width: 32rem;
  max-width: 45rem;
  height: auto;
  margin: 0 auto;
  color: inherit;
}

.product-elev-part {
  fill: currentColor;
  fill-opacity: 0.07;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-opacity: 0.9;
}

.product-elev-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-opacity: 0.55;
}

/* A real centreline pattern: long, short, long. */
.product-elev-center {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.45;
  stroke-dasharray: 14 4 3 4;
}

.product-elev-note {
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.02em;
  fill: currentColor;
  fill-opacity: 0.7;
}

.product-dim {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.55;
}

.product-dim-text {
  font-family: var(--mono);
  font-size: 12.5px;
  fill: currentColor;
  fill-opacity: 0.82;
}

.product-plot-axis {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-opacity: 0.75;
}

.product-plot-grid {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.14;
}

.product-plot-guide {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-opacity: 0.4;
  stroke-dasharray: 4 4;
}

.product-plot-line {
  fill: none;
  stroke: var(--copper, currentColor);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.product-plot-line-over {
  stroke-width: 1.8;
  stroke-opacity: 0.5;
  stroke-dasharray: 7 5;
}

.product-plot-point {
  fill: var(--copper, currentColor);
  stroke: none;
}

.product-plot-title {
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.02em;
  fill: currentColor;
  fill-opacity: 0.72;
}

/* ------------------------------------------------------------------ */
/* Category controls                                                   */
/* ------------------------------------------------------------------ */

.catalog-controls {
  display: grid;
  gap: 1rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
}

.catalog-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
}

.catalog-filter-label {
  min-width: 8rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--metal-3);
}

.catalog-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.catalog-filter-options a {
  font-size: 0.875rem;
  color: var(--metal-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
}

.catalog-filter-options a:hover,
.catalog-filter-options a:focus-visible {
  color: var(--metal);
  border-bottom-color: var(--edge-strong);
}

.catalog-filter-options a[aria-current="true"] {
  color: var(--copper);
  border-bottom-color: var(--copper);
}

.catalog-result-count {
  margin: 1.25rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--metal-3);
}

/* ------------------------------------------------------------------ */
/* Category tables                                                     */
/* ------------------------------------------------------------------ */

.catalog-table .catalog-sort {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.catalog-table .catalog-sort:hover,
.catalog-table .catalog-sort:focus-visible {
  border-bottom-color: var(--edge-strong);
}

.catalog-table .catalog-sort[aria-current="true"] {
  color: var(--copper);
}

.catalog-sort-mark {
  font-family: var(--mono);
  font-size: 0.75em;
}

.catalog-pick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}

.catalog-pick-box {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  /* A native control, told which surface it sits on, rather than a
   * hand-rolled box that would only look like one. */
  color-scheme: dark;
  accent-color: var(--copper);
  cursor: pointer;
}

.band-light .catalog-pick-box {
  color-scheme: light;
}

.catalog-sku,
.catalog-table a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.catalog-select {
  display: block;
  margin-top: 1.25rem;
}

.catalog-compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge);
}

.catalog-compare-count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--metal-3);
}

/* ------------------------------------------------------------------ */
/* Compare extras                                                      */
/* ------------------------------------------------------------------ */

.compare-remove {
  font-size: 0.8125rem;
  color: var(--metal-2);
}

.compare-remove:hover,
.compare-remove:focus-visible {
  color: var(--metal);
}

/* On the paper band the quiet tones and rules come from the paper scale. */
.band-light .product-summary,
.band-light .product-record-line,
.band-light .catalog-compare-count,
.band-light .catalog-result-count,
.band-light .catalog-filter-label,
.band-light .product-units-label,
.band-light .product-units-note,
.band-light .compare-remove {
  color: var(--paper-ink-2);
}

.band-light .product-cautions li,
.band-light .catalog-controls,
.band-light .catalog-compare-bar {
  border-color: var(--paper-edge);
}

.band-light .product-units a,
.band-light .catalog-filter-options a {
  color: var(--paper-ink-2);
}

.band-light .product-units a:hover,
.band-light .product-units a:focus-visible,
.band-light .catalog-filter-options a:hover,
.band-light .catalog-filter-options a:focus-visible,
.band-light .compare-remove:hover,
.band-light .compare-remove:focus-visible {
  color: var(--paper-ink);
  border-bottom-color: var(--paper-edge);
}

.band-light .product-units a[aria-current="true"],
.band-light .catalog-filter-options a[aria-current="true"],
.band-light .catalog-table .catalog-sort[aria-current="true"] {
  color: var(--copper-deep);
  border-bottom-color: var(--paper-edge);
}

@media (max-width: 40rem) {
  .catalog-filter-label {
    min-width: 100%;
  }

  .product-drawing {
    min-width: 28rem;
  }
}