/* family.css — just the product family strip, self-contained on purpose.
 *
 * Every product front door carries this strip, but they do not all share a
 * palette: the main site (and /featureboard/) is dark, the NativeCAD products
 * area is light-by-default and theme-aware, and SlopRadar has its own tokens.
 * So this file defines its OWN --plf-* variables rather than reading the
 * host page's, and ships a light variant keyed off html[data-theme="light"] —
 * which is exactly what the NativeCAD page already sets. Dropping this
 * stylesheet into any page on the site is therefore safe: it defines no
 * global tokens and styles nothing outside .pl-family.
 *
 * Set --plf-accent on the page (or on <body>) to tint the strip to that
 * product; everything else is deliberately identical everywhere.
 */

.pl-family {
  --plf-bg: #101214;
  --plf-line: #38414a;
  --plf-text: #b6c2cf;
  --plf-text-hi: #e8edf2;
  --plf-muted: #6b778c;
  --plf-accent: var(--accent, #00d5ff);
  --plf-on: rgba(255, 255, 255, .06);

  border-bottom: 1px solid var(--plf-line);
  background: var(--plf-bg);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html[data-theme="light"] .pl-family {
  --plf-bg: #f5f8fb;
  --plf-line: #e3e7ee;
  --plf-text: #14171c;
  --plf-text-hi: #000;
  --plf-muted: #5b6472;
  --plf-on: rgba(0, 0, 0, .04);
}

.pl-family-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pl-family-label {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--plf-muted);
  margin-right: 4px;
}

.pl-family a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--plf-line);
  color: var(--plf-text);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.pl-family a:hover { border-color: var(--plf-accent); color: var(--plf-text-hi); }
.pl-family a[aria-current="page"] {
  border-color: var(--plf-accent);
  color: var(--plf-text-hi);
  background: var(--plf-on);
}
.pl-family a .pl-fam-ico { font-size: 1rem; line-height: 1; }
.pl-family a .pl-fam-sub { color: var(--plf-muted); font-weight: 400; }

@media (max-width: 560px) {
  .pl-family a .pl-fam-sub { display: none; }
}