/* The shared site header: logo, Fault codes link, colour picker, Join the test, and the row of
   section chips under it. Used by every page that carries the header (the homepage and the
   fault-code hub today; the deeper pages from build step 3). The markup is the same block on
   every page; site-header.js fills in the colour dots and wires everything up.

   Layout trick: the chip row (and the phone colour tray) sit in .sh-under, absolutely placed
   under the bar, so hiding the chips on a phone never shifts the page. The header's margin-bottom
   holds their space at the top of the page. */
header.sh {
  position: sticky; top: 0; z-index: 50;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
  margin-bottom: 45px;
}
.sh-bar, .sh-chips, .sh-tray {
  background: rgba(10, 14, 18, 0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border, #232c36);
}
.sh-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.sh-bar .sh-in { display: flex; align-items: center; gap: 22px; height: 64px; }
.sh-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: var(--text, #e6edf3); }
.sh-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.sh-links { margin-left: auto; display: flex; gap: 22px; }
.sh-links a { color: var(--muted, #8b98a5); font-size: 0.92rem; font-weight: 500; }
.sh-links a:hover { color: var(--text, #e6edf3); }

/* Colour: a pill of six dots on desktop, one wheel button and a tray on a phone */
.sh-tint { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border, #232c36);
  border-radius: 999px; background: var(--bg2, #141a21); }
.sh-lbl { font-size: 0.74rem; color: var(--muted, #8b98a5); margin-right: 2px; }
.sh-tint .sh-set { display: flex; align-items: center; gap: 11px; padding: 0 2px; }
.sh-sw { width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  transition: transform .12s; }
.sh-sw:hover { transform: scale(1.12); }
.sh-sw.on { outline: 2px solid var(--text, #e6edf3); outline-offset: 2px; }
/* The seventh dot, "Yours", and the two-slider mixer it opens */
.sh-yours { background: conic-gradient(#ff5252, #ffd740, #69f0ae, #40c4ff, #7c4dff, #ff4081, #ff5252); }
.sh-tint { position: relative; }
.sh-bar { position: relative; z-index: 2; } /* so the mixer drops over the chip row, not under it */
.sh-mix { padding: 14px 16px 12px; border: 1px solid var(--border, #232c36); border-radius: 14px;
  background: var(--bg2, #141a21); }
.sh-mix[hidden] { display: none; }
.sh-tint .sh-mix { position: absolute; top: calc(100% + 14px); right: 0; width: 264px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.sh-tray .sh-mix { margin-top: 14px; max-width: 360px; }
.sh-mix label { display: block; margin-bottom: 12px; }
.sh-mix label span { display: block; font-size: 0.76rem; color: var(--muted, #8b98a5); margin-bottom: 7px; }
.sh-mix input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 12px;
  border-radius: 999px; margin: 0; cursor: pointer; }
.sh-hue { background: linear-gradient(90deg, hsl(0 85% 56%), hsl(60 85% 56%), hsl(120 85% 56%),
  hsl(180 85% 56%), hsl(240 85% 56%), hsl(300 85% 56%), hsl(359 85% 56%)); }
.sh-viv { background: linear-gradient(90deg, #7f8a94, var(--accent)); }
.sh-mix input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.sh-mix input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.sh-mix p { margin: 2px 0 0; font-size: 0.76rem; color: var(--muted, #8b98a5); }
.sh-wheel { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, #232c36);
  background: var(--bg2, #141a21); align-items: center; justify-content: center; cursor: pointer; padding: 0;
  margin-left: auto; }
.sh-wheel[aria-expanded="true"] { border-color: var(--accent); }
.sh-wheel span { width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(#3ddc84 0 60deg, #2196f3 0 120deg, #ffc107 0 180deg, #ff5722 0 240deg, #9c27b0 0 300deg, #ff2d8e 0); }
.sh-join { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 10px; white-space: nowrap;
  font-weight: 600; font-size: 0.85rem; background: var(--accent); color: var(--accent-ink, #04201c);
  transition: transform .12s; }
.sh-join:hover { transform: translateY(-1px); }

.sh-under { position: absolute; top: 100%; left: 0; right: 0; }
.sh-tray { padding: 14px 0 12px; }
.sh-tray[hidden] { display: none; }
.sh-tray .sh-set { display: flex; gap: 16px; }
.sh-tray .sh-sw { width: 32px; height: 32px; }
.sh-tray p { margin-top: 10px; font-size: 0.8rem; color: var(--muted, #8b98a5); }

/* Section chips */
.sh-clip { overflow: hidden; }
.sh-chips { transition: transform .2s ease; }
.sh-row { position: relative; display: flex; gap: 8px; height: 44px; align-items: center;
  overflow-x: auto; scrollbar-width: none; }
.sh-row::-webkit-scrollbar { display: none; }
.sh-row.more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent); }
.sh-chip { flex: 0 0 auto; font-size: 0.82rem; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border, #232c36); color: var(--muted, #8b98a5); white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s; }
.sh-chip:hover { color: var(--text, #e6edf3); }
.sh-chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
header.sh.tucked .sh-chips { transform: translateY(-100%); }

.sh :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Buttons on the page follow the picked colour, so their text has to as well (white on purple). */
.btn-primary { color: var(--accent-ink, #04201c); }
/* Anchor jumps land below the header, not under it. */
[id] { scroll-margin-top: 120px; }

@media (max-width: 860px) {
  .sh-bar .sh-in { height: 58px; gap: 12px; }
  .sh-links, .sh-tint { display: none; }
  .sh-wheel { display: flex; }
  header.sh { margin-bottom: 43px; }
  .sh-row { height: 42px; }
  [id] { scroll-margin-top: 110px; }
}
@media (min-width: 861px) {
  .sh-tray { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-chips, .sh-sw, .sh-join, .sh-chip { transition: none; }
}