/* ----------------------------------------------------------------
   Styles for the prerendered product pages under /product/<slug>/.

   These pages carry no app JavaScript: the content is in the HTML so a
   search engine, a text browser or someone on a slow connection gets the
   whole thing on first paint. They borrow the site's palette from
   styles.css and add only what a long-form page needs.
   ---------------------------------------------------------------- */

body.static { color: var(--text); background: var(--void); }

.sp-wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: 760px; margin: 0 auto; padding: 0 22px 80px;
  font-size: 16px; line-height: 1.65;
}

/* header: brand, search, and a way into the rest of the site */
.sp-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 22px 0 8px;
}
.sp-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 800; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text); text-decoration: none;
}
.sp-mark { width: 26px; height: 26px; color: var(--text); flex-shrink: 0; }
.sp-search { flex: 1 1 200px; max-width: 320px; margin-left: auto; }
.sp-search input {
  width: 100%; height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--edge-soft); background: var(--glass-1); color: var(--text);
  font: inherit; font-size: 14px; outline: none;
}
.sp-search input:focus { border-color: var(--cyan); background: var(--glass-2); }
.sp-nav { display: flex; align-items: center; gap: 4px; }
.sp-nav a:not(.btn) {
  padding: 8px 11px; border-radius: var(--r-pill); font-size: 13.5px;
  color: var(--text-2); text-decoration: none;
}
.sp-nav a:not(.btn):hover { color: var(--text); background: var(--glass-1); }
@media (pointer: coarse) { .sp-search input { font-size: 16px; } }
@media (max-width: 640px) {
  .sp-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .sp-nav { margin-left: auto; }
  .sp-nav a[href="/#/trending"] { display: none; }
}

.sp-crumbs { font-size: 12.5px; color: var(--text-3); margin-top: 18px; }
.sp-crumbs a { color: var(--text-3); }

.sp-wrap h1 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(28px, 6vw, 42px); line-height: 1.08; letter-spacing: -.035em;
  margin: 14px 0 0; text-wrap: balance;
}
.sp-lede { color: var(--text-2); font-size: 17px; margin-top: 16px; }

/* the four numbers, above the fold, no javascript */
.sp-scores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin-top: 26px; border-radius: var(--r-m); overflow: hidden;
  background: var(--edge-soft); border: 1px solid var(--edge-soft);
}
.sp-scores > div { background: var(--glass-1); padding: 15px 16px; }
.sp-scores span {
  display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); min-height: 2.7em;
}
.sp-scores b {
  display: block; margin-top: 6px; font-family: var(--f-display); font-weight: 800;
  font-size: 30px; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: var(--band, var(--text));
}
.sp-scores b i { font-size: 14px; font-style: normal; color: var(--text-3); }
.sp-scores b.v { font-size: 20px; letter-spacing: .02em; }
.sp-scores em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; color: var(--text-3); }

.sp-note {
  margin-top: 20px; padding: 13px 15px; border-radius: var(--r-m);
  background: var(--glass-1); border: 1px solid var(--edge-soft);
  font-size: 13px; color: var(--text-2);
}

.sp-q { margin-top: 38px; }
.sp-q h2 {
  font-family: var(--f-display); font-weight: 800; font-size: 21px;
  letter-spacing: -.025em; line-height: 1.25; margin: 0 0 10px;
}
.sp-q p { color: var(--text-2); margin: 0 0 10px; }
.sp-q ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-2); }
.sp-q li { margin-bottom: 7px; }

.sp-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.sp-table th, .sp-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge-soft);
}
.sp-table th { font-weight: 500; color: var(--text-2); }
.sp-table td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--text); }

.sp-cta {
  padding: 22px; border-radius: var(--r-l);
  background: var(--glass-1); border: 1px solid var(--edge);
}
.sp-cta h2 { margin-bottom: 8px; }

.sp-sources { margin: 14px 0 0; padding-left: 20px; }
.sp-sources li { margin-bottom: 14px; color: var(--text-2); font-size: 14px; }
.sp-sources a { font-weight: 500; }
.sp-sources .pub {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-left: 6px;
}
.sp-sources p { margin: 5px 0 0; font-size: 13px; color: var(--text-3); }
.sp-sources .none { color: var(--text-3); font-size: 13px; }

.sp-foot {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid var(--edge-soft);
  font-size: 13px; color: var(--text-3);
}
.sp-fine { margin-top: 10px; font-size: 11.5px; }

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

@media (max-width: 560px) {
  .sp-wrap { padding-inline: 16px; }
  .sp-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------------------------------------------------------------- linking out */

.sp-wide { max-width: 980px; }

.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* product link cards: alternatives, siblings, category lists */
.sp-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px; margin-top: 14px;
}
.sp-card {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: var(--r-m); background: var(--glass-1); border: 1px solid var(--edge-soft);
  text-decoration: none; color: var(--text);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.sp-card:hover { border-color: var(--edge-strong); background: var(--glass-2); transform: translateY(-1px); }
.sp-card-score {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums;
  color: var(--band); background: color-mix(in srgb, var(--band) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--band) 30%, transparent);
}
.sp-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-card-body b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.sp-card-body span { font-size: 12px; color: var(--text-3); }
.sp-card-body em { font-style: normal; font-size: 11.5px; color: var(--green); }
.sp-all { margin-top: 14px; font-size: 14px; }
.sp-all a { color: var(--cyan); text-decoration: none; }
.sp-all a:hover { text-decoration: underline; }

/* the ranked table on a category page */
.sp-tablewrap { overflow-x: auto; margin-top: 14px; border-radius: var(--r-m); border: 1px solid var(--edge-soft); }
.sp-rank { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.sp-rank th {
  text-align: left; padding: 10px 12px; font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: var(--glass-1);
  border-bottom: 1px solid var(--edge-soft);
}
.sp-rank td { padding: 11px 12px; border-bottom: 1px solid var(--edge-soft); vertical-align: middle; }
.sp-rank tr:last-child td { border-bottom: 0; }
.sp-rank a { color: var(--text); font-weight: 500; text-decoration: none; }
.sp-rank a:hover { color: var(--cyan); }
.sp-rank .pr { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.sp-rank .rk { width: 36px; color: var(--text-3); font-family: var(--f-mono); font-size: 12px; }
.sp-rank .sc { font-family: var(--f-display); font-weight: 800; font-size: 16px; color: var(--band); font-variant-numeric: tabular-nums; }
.sp-rank .num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.sp-rank .vd { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--band); }

/* related-category chips */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--glass-1); border: 1px solid var(--edge-soft); color: var(--text-2);
  font-size: 13px; text-decoration: none;
}
.sp-chips a:hover { color: var(--text); border-color: var(--edge-strong); }
.sp-chips span { font-family: var(--f-mono); font-size: 11px; color: var(--text-3); }

/* the categories index */
.sp-catgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px; margin-top: 12px;
}
.sp-cat {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border-radius: var(--r-m); background: var(--glass-1); border: 1px solid var(--edge-soft);
  text-decoration: none; color: var(--text); transition: border-color .18s ease, background .18s ease;
}
.sp-cat:hover { border-color: var(--edge-strong); background: var(--glass-2); }
.sp-cat b { font-size: 15px; font-weight: 600; }
.sp-cat span { font-size: 12px; color: var(--text-3); line-height: 1.45; }
.sp-cat:target { border-color: var(--cyan); }

/* on a phone the ranked table fits the screen instead of scrolling sideways */
.sp-rank th { white-space: nowrap; }
@media (max-width: 560px) {
  .sp-rank { min-width: 0; font-size: 13.5px; }
  .sp-rank th:last-child, .sp-rank .vd { display: none; }
  .sp-rank th, .sp-rank td { padding-inline: 9px; }
  .sp-rank .rk { width: 24px; }
}

/* ---------------------------------------------------------------- scroll animation
   These pages carry no JavaScript, so the motion is CSS scroll-driven
   animation: a progress line on the page's own scroll, and sections, cards
   and table rows that rise in as they enter the viewport. Browsers without
   support simply show everything, and reduced motion turns it off. Only
   opacity and translate/scale move, so hover transforms are untouched. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.static::before{
      content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none;
      background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--red));
      transform-origin:0 50%;animation:sp-grow linear both;animation-timeline:scroll(root);
    }
    @keyframes sp-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes sp-rise{from{opacity:0;translate:0 28px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
    /* never anything inside .sp-tablewrap or .sp-scores: both clip their overflow, which makes them
       the scroll container a view() timeline measures against, and their last items would stick half-faded */
    .sp-q,.sp-card,.sp-cat,.sp-tablewrap,.sp-scores,.sp-sources li{
      animation:sp-rise linear both;animation-timeline:view();animation-range:entry 0px entry 140px;
    }
    .sp-q .sp-card,.sp-q .sp-cat{animation-range:entry 10px entry 130px}
  }
}