/* The review list: category filter, leaderboard rows, score bars, what the sources said. */

/* Reviews: category filter */

.filters {
  max-width: 100%;
  padding: 4px;
  border-radius: var(--r-pill);
}

/* One row that scrolls sideways on narrow screens, like a segmented control. */
.filter-track {
  position: relative;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: inherit;
  scrollbar-width: none;
}

.filter-track::-webkit-scrollbar {
  display: none;
}

@media (max-width: 759px) {
  .section-head .filters {
    width: 100%;
  }
}

.filters button {
  position: relative;
  z-index: 1;
  flex: none;
  min-height: 44px;
  white-space: nowrap;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.filters button:hover {
  color: var(--ink);
}

/* Inside the scrolling row, so the focus ring is not cut off at the edges. */
.filters button:focus-visible {
  outline-offset: -3px;
}

/* On the chosen button the ring sits on the ember bubble, where an ember ring would vanish. Two rings
   instead: the text color at the edge, against the glass, and the bubble's text color inside it. */
.filters button[aria-pressed="true"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px var(--on-accent);
}

.filters button[aria-pressed="true"] {
  background: var(--accent-fill);
  color: var(--on-accent);
}

/* With JavaScript, one bubble slides to the chosen button instead. */
.filters.has-indicator button[aria-pressed="true"] {
  background: transparent;
}

/* A drop of tinted glass that slides between the options. */
.filter-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w, 0);
  height: var(--h, 0);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.3), rgb(255 255 255 / 0) 50%), var(--accent-fill);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    inset 0 -2px 5px rgb(255 220 190 / 0.3),
    0 6px 16px -8px var(--accent-fill);
  transform: translate(var(--x, 0), var(--y, 0));
}

.filters .count {
  unicode-bidi: isolate; /* keeps the number after the label, also after Latin words like "AI" */
  opacity: 0.75;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.score-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.score-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-legend li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: var(--heat);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Reviews: a leaderboard, like the benchmark charts of hardware reviews. One tile holds the ranked rows.
   Each row has its rank, its score, and a bar on a 0-10 scale with a tick for every source,
   so how much the reviewers agree is visible at a glance. */

#reviews {
  --list-pad: clamp(16px, 3vw, 32px);
}

.review-list {
  margin: 0;
  padding: 0 var(--list-pad);
  list-style: none;
  counter-reset: rank;
}

/* Each row reaches the edges of the list, so its hover light fills the whole width. */
.review {
  margin-inline: calc(-1 * var(--list-pad));
  padding-inline: var(--list-pad);
  border-bottom: 1px solid var(--line);
  counter-increment: rank;
}

/* First and last of the rows that are shown: filtering hides rows, so plain :first-child would miss. */
.review:nth-child(1 of :not([hidden])) {
  border-start-start-radius: calc(var(--r-tile) - 1px);
  border-start-end-radius: calc(var(--r-tile) - 1px);
}

.review:nth-last-child(1 of :not([hidden])) {
  border-bottom: 0;
  border-end-start-radius: calc(var(--r-tile) - 1px);
  border-end-end-radius: calc(var(--r-tile) - 1px);
}

.review article {
  display: grid;
  grid-template-columns: 1.6rem 60px minmax(0, 1fr);
  grid-template-areas:
    "rank score title"
    "bar bar bar"
    "verdict verdict verdict"
    "meta meta meta"
    "details details details";
  gap: 10px 14px;
  padding-block: 22px;
}

/* The rank, from the counter: the list is sorted by score, and filtering renumbers what is shown. */
.review article::before {
  content: counter(rank);
  content: counter(rank) / "";
  grid-area: rank;
  align-self: center;
  color: var(--ink-2);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.review:nth-child(1 of :not([hidden])) article::before {
  color: var(--accent);
}

.review .score-tile {
  grid-area: score;
  align-self: center;
}

.review h3 {
  grid-area: title;
  align-self: center;
  font-size: var(--text-lg);
  /* The chip links to this heading; land with the whole row, not the heading, under the header. */
  scroll-margin-top: 40px;
}

.review h3 a {
  text-decoration: none;
}

.review h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* The bar: the filled part is the average; each tick is one source's own score. */
.consensus {
  grid-area: bar;
  width: 100%;
  height: 16px;
  overflow: visible;
}

[dir="rtl"] .consensus {
  transform: scaleX(-1);
}

.consensus .track {
  fill: var(--track);
}

.consensus .fill {
  fill: var(--heat);
}

.consensus .tick {
  fill: var(--ink);
}

.review-verdict {
  grid-area: verdict;
  max-width: 68ch;
  color: var(--ink-2);
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  grid-area: meta;
  align-items: center;
  gap: 6px 10px;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* Plain facts, not pills: only the things you can press in a row look like buttons. */
.review-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  white-space: nowrap;
}

.review-meta span + span {
  padding-inline-start: 10px;
  border-inline-start: 1px solid var(--line-strong);
}

.cat-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Placed by column only, so reviews without this link get no empty grid row. */
.review-more {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  font-weight: 600;
}

.review-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  text-decoration: none;
}

.review-more a:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The 0-10 scale above the bars. */
.scale-axis {
  display: flex;
  justify-content: space-between;
  margin: 0 calc(var(--list-pad) + 1px) 8px;
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 860px) {
  /* Desktop: name on the start side, bar beside it, like a benchmark chart. */
  .review-list,
  .scale-axis {
    --bar-col: 34%;
  }

  .review article {
    grid-template-columns: 2.4rem 72px minmax(0, 1fr) var(--bar-col);
    grid-template-areas:
      "rank score title bar"
      ". . verdict verdict"
      ". . meta meta"
      ". . details details";
    column-gap: 20px;
  }

  .review article::before {
    font-size: 2rem;
  }

  .review .score-tile {
    width: 72px;
    font-size: 1.6rem;
  }

  .consensus {
    align-self: center;
  }

  .review-more {
    grid-column: 3 / -1;
  }

  /* Over the bar column only. */
  .scale-axis {
    width: calc((100% - 2 * var(--list-pad) - 2px) * 0.34);
    margin-inline-start: auto;
  }
}

.score-tile {
  display: grid;
  place-items: center;
  width: 60px;
  aspect-ratio: 1;
  border: 1px solid transparent; /* stays visible in forced-colors mode */
  border-radius: 18px;
  background: var(--gloss), var(--heat);
  color: var(--on-heat);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3);
}

/* What the sources said */

.review details {
  grid-area: details;
  margin-top: 6px;
}

.review summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-block: 8px;
  padding-inline: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--hover);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.review summary::-webkit-details-marker {
  display: none;
}

.review summary::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0) center / 10px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 10px no-repeat,
    var(--tile-solid);
}

.review details[open] summary::before {
  transform: rotate(45deg);
}

.review summary:hover {
  background: var(--tint);
}

.proscons {
  display: grid;
  gap: 16px 32px;
  margin-top: 16px;
  font-size: var(--text-sm);
}

@media (min-width: 560px) {
  .proscons {
    grid-template-columns: 1fr 1fr;
  }
}

.proscons h3,
.proscons h4 {
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pros,
.cons {
  padding: 0;
  list-style: none;
}

.pros li,
.cons li {
  position: relative;
  padding-inline-start: 1.5em;
}

.pros li + li,
.cons li + li {
  margin-top: 6px;
}

.pros li::before,
.cons li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0.3em;
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
}

.pros li::before {
  content: "+";
  content: "+" / "";
  background: var(--tint);
  color: var(--accent);
}

.cons li::before {
  content: "−";
  content: "−" / "";
  background: var(--hover);
  color: var(--ink-2);
}

.sources-title {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sources {
  margin-top: 8px;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

/* Source name, its original rating and date; a rated source also gets a bar of its score out of 10. */
.sources li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
}

.sources li:last-child {
  border-bottom: 0;
}

.sources .bar {
  flex-basis: 100%;
  height: 6px;
}

/* The tap area reaches the row's own padding (44px tall), without changing the layout. */
.sources a {
  margin-block: -10px;
  padding-block: 10px;
  font-weight: 600;
}

.src-rating,
.src-date {
  font-variant-numeric: tabular-nums;
}

.src-date {
  color: var(--ink-2);
}

.bar {
  flex: 1;
  min-width: 0;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--track);
}

[dir="rtl"] .bar {
  transform: scaleX(-1);
}

.bar rect {
  fill: var(--heat, var(--ink-2));
}

/* Home: how the score is made. A real sequence, so the steps are numbered and joined by a line. */

.steps {
  position: relative;
  display: grid;
  gap: 28px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* The line: down the start side on phones, across the top on wider screens. */
.steps::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  inset-inline-start: 19px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--line-strong));
}

.steps li {
  position: relative;
  padding-inline-start: 60px;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  content: counter(step) / "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 700;
  /* A glossy bead in a ring of glass; the line runs behind it. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -3px 6px rgb(255 220 190 / 0.3),
    0 0 0 5px var(--chip-glass),
    0 0 0 6px var(--glass-edge),
    0 8px 18px -8px var(--accent-fill);
}

.steps h3 {
  padding-top: 7px;
  font-size: var(--text-md);
}

.steps p {
  max-width: 34ch;
  margin-top: 8px;
  color: var(--ink-2);
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }

  .steps::before {
    top: 19px;
    bottom: auto;
    inset-inline: 20px calc((100% - 64px) / 3 - 20px);
    width: auto;
    height: 2px;
    background: linear-gradient(to left, var(--accent), var(--line-strong));
  }

  /* The line starts at the first step: on the right in Hebrew, on the left in English. */
  [dir="ltr"] .steps::before {
    background: linear-gradient(to right, var(--accent), var(--line-strong));
  }

  .steps li {
    padding-inline-start: 0;
    padding-top: 60px;
  }

  .steps h3 {
    padding-top: 0;
  }
}

.conditions {
  margin-top: 44px;
  padding: 6px 24px;
}

.conditions div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 4px 24px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.conditions div:last-child {
  border-bottom: 0;
}

.conditions dt {
  color: var(--ink-2);
}

.conditions dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 519px) {
  .conditions div {
    grid-template-columns: 1fr;
  }
}