/*
  BASE: reset, document typography, links, focus, and the handful of layout primitives every page
  uses (container, stack, cluster, grid). Component families live in components.css as `.c-*`;
  the app shell lives in shell.css. Everything here reads semantic tokens from tokens.css.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Clears the sticky top bar AND an entity page's sticky section nav, so an anchored heading
     never lands underneath either. */
  scroll-padding-top: calc(var(--topbar-height) + var(--section-nav-height) + var(--space-4));
}

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}

/* ---------- Type ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); letter-spacing: normal; }
h5,
h6 { font-size: var(--text-md); letter-spacing: normal; }

p {
  text-wrap: pretty;
}

small {
  font-size: var(--text-sm);
}

strong,
b {
  font-weight: var(--weight-semibold);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

mark {
  background: var(--color-mark-bg);
  color: var(--color-mark-text);
  border-radius: var(--radius-xs);
  padding: 0 0.1em;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* Every count and figure lines up: tabular numerals wherever numbers are the content. */
td,
th,
data,
time,
.u-num,
[data-num] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Links ---------- */

a {
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Links inside running prose are underlined at rest, so colour is never the only signal (1.4.1). */
.u-prose a,
p a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.u-prose a:hover,
p a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Focus: always visible for keyboard users, never for mouse clicks ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection {
  background: color-mix(in srgb, var(--color-action) 22%, transparent);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout primitives ---------- */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--prose {
  max-width: calc(var(--container-prose) + 2 * var(--gutter));
}

.l-page {
  padding-block: var(--space-8) var(--space-16);
}

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Modifiers set gap directly, not through a custom property, so a nested stack never inherits
   its parent's spacing. */
.l-stack--sm { gap: var(--space-2); }
.l-stack--lg { gap: var(--space-8); }
.l-stack--xl { gap: var(--space-12); }

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.l-cluster--lg { gap: var(--space-4); }
.l-cluster--between { justify-content: space-between; }

.l-grid {
  --grid-min: 16rem; /* declared here so a nested grid never inherits its parent's minimum */
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 16rem), 1fr));
}

/* A tile grid whose last row is always full: the tile columns are fixed (--fill-2 / --fill-3) and a
   final tile that would sit alone, or two short of a row, grows to take the rest of the row. Single
   column on a phone. Use instead of .l-grid where a half-empty last row would look unfinished. */
.l-grid--fill-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--fill-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cards of unequal content keep their own height instead of stretching to the tallest. */
.l-grid--start { align-items: start; }
.l-grid--fill-2 > :last-child:nth-child(odd) { grid-column: span 2; }
.l-grid--fill-3 > :last-child:nth-child(3n + 1) { grid-column: span 3; }
.l-grid--fill-3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }

@media (max-width: 64rem) {
  .l-grid--fill-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-grid--fill-3 > :last-child:nth-child(3n + 1),
  .l-grid--fill-3 > :last-child:nth-child(3n + 2) { grid-column: auto; }
  .l-grid--fill-3 > :last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 40rem) {
  .l-grid--fill-2,
  .l-grid--fill-3 { grid-template-columns: minmax(0, 1fr); }
  .l-grid--fill-2 > :last-child:nth-child(odd),
  .l-grid--fill-3 > :last-child:nth-child(odd) { grid-column: auto; }
}

/* Exactly three tiles stay in one row down to a phone, so the tablet rule above never leaves one short
   tile alone on a row (/explore with the comparison pages dark). Add with .l-grid--fill-3. */
@media (min-width: 40.0625rem) {
  .l-grid--hold-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l-grid--hold-3 > :last-child:nth-child(odd) { grid-column: auto; }
}

.l-split {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  align-items: start;
}

/* The facet layout: a filter rail beside the results. */
.l-rail {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 64rem) {
  :root {
    --gutter: var(--space-6);
  }

  .l-split,
  .l-rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  :root {
    --gutter: var(--space-4);
  }
}

/* ---------- Utilities (kept deliberately few) ---------- */

.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-muted { color: var(--color-text-muted); }
/* Supplier- or user-authored prose: a very long unbroken word wraps instead of widening the page. */
.u-wrap-anywhere { overflow-wrap: anywhere; }
.u-subtle { color: var(--color-text-subtle); }
.u-strong { color: var(--color-text-strong); }
.u-small { font-size: var(--text-sm); }
.u-xs { font-size: var(--text-xs); }
.u-mono { font-family: var(--font-mono); font-size: 0.92em; }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-right { text-align: right; }

.u-overline {
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Supplier-authored text after SupplierDescription's allowlist: paragraphs, lists, bold, small headings. */
.u-richtext > * + * { margin-top: var(--space-3); }
.u-richtext ul,
.u-richtext ol { padding-left: var(--space-5); }
.u-richtext ul { list-style: disc; }
.u-richtext ol { list-style: decimal; }
.u-richtext li + li { margin-top: var(--space-1); }
.u-richtext h3,
.u-richtext h4 {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.u-richtext a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.u-prose {
  max-width: var(--container-prose);
}

.u-prose > * + * {
  margin-top: var(--space-4);
}