/* Page layouts. */

/* Theme toggle shows the theme you'd switch to. */
:root[data-theme="light"] .theme-icon--light,
:root:not([data-theme="light"]) .theme-icon--dark {
  display: none;
}

.theme-icon {
  display: inline-flex;
}

@media (max-width: 860px) {
  .hide-md {
    display: none;
  }
}

@media (max-width: 640px) {
  .hide-sm {
    display: none;
  }
}

.lede {
  color: var(--text-2);
  font-size: var(--fs-17);
  max-width: 62ch;
}

.discount {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--r-tag);
  background: var(--pos-wash);
  color: var(--pos);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  line-height: 1.6;
}

/* ── Home ─────────────────────────────────────────────── */

.hero {
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: start;
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
}

.hero__lede {
  margin-top: var(--s-4);
  color: var(--text-2);
  font-size: var(--fs-17);
  max-width: 52ch;
}

.hero__search {
  margin-top: var(--s-5);
  max-width: 600px;
}

.hero__try {
  margin-top: var(--s-3);
  color: var(--muted);
  font-size: var(--fs-13);
}

@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-top: var(--s-6);
  }
}

.card-grid--6 {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.tags--lg .tag {
  height: 32px;
  padding: 0 var(--s-3);
  font-size: var(--fs-13);
}

.live-list__items {
  list-style: none;
  padding: var(--s-1) 0;
}

.live-row {
  display: grid;
  grid-template-columns: 22px 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-4);
  color: var(--text);
}

.live-row:hover {
  background: var(--raised);
  text-decoration: none;
}

.live-row__rank {
  color: var(--muted);
  font-size: var(--fs-13);
  text-align: right;
}

.live-row__art {
  aspect-ratio: 231 / 87;
  overflow: hidden;
  border-radius: var(--r-tag);
  background: var(--raised);
}

.live-row__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-row__count {
  color: var(--text-2);
  font-size: var(--fs-13);
}

/* ── Charts ───────────────────────────────────────────── */

.tabs + .table-wrap {
  margin-top: var(--s-2);
}

.chart-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.chart-game {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 260px;
  color: var(--text);
}

.chart-game:hover {
  text-decoration: none;
}

.chart-game:hover .chart-game__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chart-game__art {
  flex: none;
  width: 104px;
  aspect-ratio: 231 / 87;
  overflow: hidden;
  border-radius: var(--r-tag);
  background: var(--raised);
}

.chart-game__text {
  display: grid;
  min-width: 0;
}

.chart-game__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-game__tags {
  color: var(--muted);
  font-size: var(--fs-13);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-change {
  width: 56px;
  font-size: var(--fs-13);
  white-space: nowrap;
}

.price-cell {
  white-space: nowrap;
}

/* ── Local prices (prices.js) ─────────────────────────── */

/* Wraps a price without adding a box, so US pages look exactly as before. */
.lp-group {
  display: contents;
}

/* data-region is on <html> for visitors outside the US. */
:root:not([data-region]) .region-only,
:root[data-region] .us-only {
  display: none;
}

/* Room for local prices, set aside before they arrive so nothing moves when
   they do. --lp-ch is about the longest price in that store, in characters
   ("₹ 2,999" is 7, "Rp 329 000" 10, "Mex$ 1,299.00" 13). */
:root[data-region] {
  --lp-ch: 10;
}

:root[data-region="EU"],
:root[data-region="GB"],
:root[data-region="IN"],
:root[data-region="JP"] {
  --lp-ch: 7;
}

:root[data-region="MX"] {
  --lp-ch: 13;
}

:root[data-region] .price-cell .lp-group {
  display: inline-block;
  min-width: calc((var(--lp-ch) + 5.5) * 1ch); /* the price and a discount badge */
}

:root[data-region] [data-lp] > .num {
  min-width: calc(var(--lp-ch) * 1ch);
}

/* Badge, sale price and regular price; at least room for a US one marked USD. */
:root[data-region] .deal-price {
  justify-content: flex-end;
  min-width: max(20.5ch, calc(var(--lp-ch) * 1.87ch + 6ch));
}

/* ── Charts and Deals on smaller screens ──────────────── */

/* Below 1024px the list tables give back width so they never scroll sideways:
   names and review summaries may wrap, and a price sits over its discount
   instead of beside it. From 1024px up they're as above. */
@media (max-width: 1023px) {
  .chart-table .chart-game,
  .deals-table .chart-game {
    min-width: min(260px, 28vw);
  }

  .chart-table .chart-game__art,
  .deals-table .chart-game__art {
    width: clamp(72px, 11vw, 104px);
  }

  .chart-table .chart-game__name,
  .deals-table .chart-game__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
  }

  /* At most two lines: "Overwhelmingly" is the longest word. */
  .chart-table .review,
  .deals-table .review {
    display: inline-block;
    min-width: 7.5em;
    white-space: normal;
  }

  /* The price on one line; its discount, the regular price (Deals) and any
     USD note on the next. */
  .price-cell .lp-group,
  :root[data-region] .price-cell .lp-group,
  .deals-table .deal-price {
    display: inline-grid;
    grid-template-columns: 1fr auto auto;
    justify-items: end;
    align-items: baseline;
    gap: 0;
    min-width: 0;
  }

  .price-cell .lp-group > .num,
  .deal-price__now {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .deal-price s {
    order: 1;
    margin-left: var(--s-2);
  }

  .price-cell .lp-usd,
  .deal-price .lp-usd {
    order: 2;
    margin-left: var(--s-1);
  }

  /* Local prices: on charts the price keeps the room set aside above
     ([data-lp] > .num). On Deals the second line is the wider one; at its
     widest it's a discount and a US regular price marked USD. */
  :root[data-region] .deal-price {
    min-width: max(14.2ch, calc(var(--lp-ch) * 0.87ch + 5ch));
  }
}

@media (max-width: 640px) {
  .chart-game {
    min-width: 0;
  }

  .chart-game__art {
    width: 72px;
  }

  .chart-table th,
  .chart-table td,
  .deals-table th,
  .deals-table td {
    padding-left: var(--s-2);
    padding-right: var(--s-2);
  }

  .chart-table th:first-child,
  .chart-table td:first-child,
  .deals-table th:first-child,
  .deals-table td:first-child {
    padding-left: 0;
  }

  .chart-table th:last-child,
  .chart-table td:last-child,
  .deals-table th:last-child,
  .deals-table td:last-child {
    padding-right: 0;
  }

  .chart-table th {
    white-space: normal;
  }

  .chart-table .chart-game,
  .deals-table .chart-game {
    min-width: 0;
    gap: var(--s-2);
  }

  /* The discount says enough; the regular price is on the game page. */
  .deal-price s {
    display: none;
  }

  /* The sale price, or under it a discount marked USD. */
  :root[data-region] .deal-price {
    min-width: calc(max(var(--lp-ch), 8.1) * 1ch);
  }
}

/* Portrait phones: the name needs the room more than the art does. */
@media (max-width: 480px) {
  .chart-table .chart-game__art,
  .deals-table .chart-game__art {
    display: none;
  }
}

/* ── Discover ─────────────────────────────────────────── */

.vibe-picker {
  margin: 0 0 var(--s-4);
  padding: 0;
  border: 0;
}

.vibe-picker legend {
  margin-bottom: var(--s-2);
}

.vibe-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* A checkbox that looks like a toggle button (works without JavaScript). */
.toggle-check {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.toggle-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-check input:checked + .toggle {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--text);
}

.toggle-check input:checked + .toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}

.toggle-check input:focus-visible + .toggle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle-check.is-disabled {
  cursor: not-allowed;
}

.toggle-check.is-disabled .toggle {
  opacity: 0.45;
}

.filters.filters--5 {
  grid-template-columns: repeat(4, minmax(0, 200px)) auto;
  align-items: end;
}

@media (max-width: 960px) {
  .filters.filters--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  font-size: var(--fs-15);
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: var(--s-3);
}

.dcard {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.dcard[hidden] {
  display: none;
}

.dcard__art {
  display: block;
  aspect-ratio: 460 / 215;
  overflow: hidden;
  border-radius: var(--r-ctl);
  background: var(--raised);
}

.dcard__title {
  font-size: var(--fs-15);
  line-height: 1.3;
}

.dcard__title a {
  color: var(--text);
}

.dcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  margin: 4px 0 var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-13);
}

.dcard__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
}

.dcard__value {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}

.dcard__value .num {
  font-size: var(--fs-20);
  font-weight: 500;
}

@media (max-width: 560px) {
  .dcard {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .dcard__side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }
}

.picker {
  margin-top: var(--s-5);
}

.picker__card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--accent);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.picker__art {
  display: block;
  aspect-ratio: 460 / 215;
  overflow: hidden;
  border-radius: var(--r-ctl);
}

.picker__body {
  display: grid;
  gap: var(--s-2);
}

.picker__body h2 {
  font-size: var(--fs-32);
}

.picker__body h2 a {
  color: var(--text);
}

@media (max-width: 760px) {
  .picker__card {
    grid-template-columns: 1fr;
  }
}

/* ── My Steam ─────────────────────────────────────────── */

.me-form {
  display: grid;
  grid-template-columns: minmax(0, 560px) auto;
  gap: var(--s-2) var(--s-3);
  align-items: end;
  max-width: 760px;
}

.me-form__input {
  height: 44px;
}

.me-form__go {
  height: 44px;
}

.me-form__remember,
.me-form__help {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .me-form {
    grid-template-columns: 1fr;
  }
}

.me-status {
  margin-top: var(--s-4);
  max-width: 760px;
}

.me-profile {
  margin-top: var(--s-5);
}

.me-profile__card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.me-profile__avatar {
  border-radius: var(--r-ctl);
}

.me-profile__name {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1.1;
}

.me-profile__card .btn {
  margin-left: auto;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

.stat-tiles div {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}

.stat-tiles dt {
  color: var(--muted);
  font-size: var(--fs-13);
}

.stat-tiles dd {
  margin: 2px 0 0;
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: 1.1;
}

@media (max-width: 760px) {
  .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lib-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}

@media (max-width: 860px) {
  .lib-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lib-grid h3,
.section-head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bars {
  list-style: none;
  padding: var(--s-2) var(--s-4) var(--s-3);
}

.bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40% 56px;
  align-items: center;
  gap: var(--s-3);
  padding: 5px 0;
  font-size: var(--fs-13);
}

.bars a {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bars__bar {
  height: 6px;
  border-radius: var(--r-tag);
  background: var(--line-soft);
  overflow: hidden;
}

.bars__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.bars .num {
  text-align: right;
  color: var(--text-2);
}

.backlog-pick {
  margin-top: var(--s-3);
}

.backlog-pick .grow {
  grid-template-columns: 140px minmax(0, 1fr);
  border-bottom: 0;
}

/* ── Compare ──────────────────────────────────────────── */

.compare-search {
  max-width: 520px;
  margin-bottom: var(--s-5);
}

.compare-search .combo__input {
  height: 42px;
  font-size: var(--fs-15);
}

.compare-table {
  table-layout: fixed;
  min-width: 640px;
}

.compare-table thead th {
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  color: var(--text);
  padding-bottom: var(--s-3);
}

.compare-table th[scope="row"] {
  width: 150px;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--line-soft);
}

.compare-table thead th:first-child {
  width: 150px;
}

.compare-table td {
  vertical-align: top;
  position: relative;
}

.compare-table td.is-best,
.compare-table tbody tr:hover td.is-best {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.best-mark {
  display: block;
  margin-top: 4px;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare-game {
  display: grid;
  gap: 6px;
  color: var(--text);
}

.compare-game__art {
  aspect-ratio: 460 / 215;
  overflow: hidden;
  border-radius: var(--r-ctl);
  background: var(--raised);
}

.compare-game__name {
  font-weight: 600;
  line-height: 1.3;
}

.compare-remove {
  margin-top: 6px;
  margin-left: -10px;
  color: var(--muted);
}

.score {
  font-size: var(--fs-20);
  font-weight: 500;
}

.compare-body .notice {
  margin-bottom: var(--s-4);
}

/* ── Error ────────────────────────────────────────────── */

.error-page {
  padding-top: var(--s-8);
  max-width: 720px;
}

.error-page__code {
  color: var(--accent-text);
  font-size: var(--fs-15);
  margin-bottom: var(--s-2);
}

.error-page .lede {
  margin: var(--s-3) 0 var(--s-5);
}

/* ── Game page ────────────────────────────────────────── */

.nowrap {
  white-space: nowrap;
}

.game-banner {
  margin-top: var(--s-5);
  aspect-ratio: 1920 / 620;
  max-height: 320px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--raised);
}

.game-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: end;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}

.game-head h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
}

.game-head__by {
  margin-top: var(--s-2);
  color: var(--text-2);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-13);
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.facts li + li {
  padding-left: var(--s-4);
  border-left: 1px solid var(--line);
}

.facts li[hidden] {
  display: none;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pos);
}

.deck {
  font-weight: 500;
}

.deck--3 {
  color: var(--pos);
}

.deck--2 {
  color: var(--mixed);
}

.deck--1 {
  color: var(--neg);
}

.game-head__actions {
  display: flex;
  gap: var(--s-2);
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
}

.game-main,
.game-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  align-content: start;
}

@media (max-width: 960px) {
  .game-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

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

@media (max-width: 640px) {
  .facts li + li {
    padding-left: 0;
    border-left: 0;
  }

  .game-head__actions .btn--primary {
    flex: 1;
  }
}

/* Value */

.value__top {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.value__score {
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.value__label {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1.1;
}

.meter {
  margin: var(--s-5) 0 var(--s-2);
}

.meter__track {
  position: relative;
  height: 10px;
  border-radius: var(--r-tag);
  /* Hard-stop zones that turn more amber past each label threshold. */
  background: linear-gradient(
    90deg,
    var(--line-soft) 0 40%,
    color-mix(in srgb, var(--accent) 16%, var(--line-soft)) 40% 55%,
    color-mix(in srgb, var(--accent) 34%, var(--line-soft)) 55% 70%,
    color-mix(in srgb, var(--accent) 58%, var(--line-soft)) 70% 85%,
    var(--accent) 85% 100%
  );
}

.meter__needle {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: calc(var(--score) * 1%);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1px;
  background: var(--text);
  box-shadow: 0 0 0 2px var(--surface);
}

.meter__scale {
  position: relative;
  height: 20px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-12);
}

.meter__scale span {
  position: absolute;
  left: calc(var(--at) * 1%);
  white-space: nowrap;
}

.meter__scale span::before {
  content: "";
  position: absolute;
  left: 0;
  top: -8px;
  height: 5px;
  border-left: 1px solid var(--line);
}

.value__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.value__facts dt {
  color: var(--muted);
  font-size: var(--fs-12);
}

.value__facts dd {
  margin: 2px 0 0;
  font-size: var(--fs-17);
}

.value__worth {
  margin-top: var(--s-4);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--accent);
  color: var(--text-2);
  max-width: none;
}

.value__worth strong {
  color: var(--text);
  font-weight: 500;
}

.value__explain {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}

.breakdown {
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.breakdown__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 56px;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-13);
}

.breakdown__bar {
  height: 6px;
  border-radius: var(--r-tag);
  background: var(--line-soft);
  overflow: hidden;
}

.breakdown__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.breakdown__pts {
  text-align: right;
}

@media (max-width: 640px) {
  .value__facts {
    grid-template-columns: 1fr 1fr;
  }

  .breakdown__row {
    grid-template-columns: minmax(0, 1fr) 80px 48px;
  }
}

/* Buy now or wait */

.timing__verdict {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: 1.1;
}

.timing__verdict--buy {
  color: var(--pos);
}

.timing__verdict--wait {
  color: var(--mixed);
}

.timing__summary {
  margin-top: var(--s-1);
  color: var(--text-2);
}

.timing .buy-notes {
  border-top: 1px solid var(--line-soft);
}

.timing__fact {
  font-size: var(--fs-13);
}

/* Before you buy */

.buy-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.buy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}

.buy-note + .buy-note {
  border-top: 1px solid var(--line-soft);
}

.buy-note > .icon {
  flex: none;
  margin-top: 2px;
  color: var(--muted);
}

.buy-note--neg > .icon {
  color: var(--neg);
}

.buy-note--pos > .icon {
  color: var(--pos);
}

.buy-note--caution > .icon {
  color: var(--mixed);
}

.buy-note__title {
  font-weight: 500;
}

.buy-note__detail {
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--fs-13);
  overflow-wrap: anywhere;
}

/* Regional prices */

.region-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.select--sm {
  width: auto;
  height: 30px;
  font-size: var(--fs-13);
}

.price-table .region-cell {
  white-space: nowrap;
}

.price-table .chip-region {
  margin-right: var(--s-2);
}

.price-table .flag-note {
  margin-left: 4px;
}

.price-table tr.is-mine td {
  background: var(--accent-wash);
}

.price-table tr.is-mine .region-name {
  font-weight: 600;
}

.strip-head,
.strip-cell {
  width: 30%;
  min-width: 120px;
}

.strip {
  position: relative;
  display: block;
  height: 14px;
}

.strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}

.strip__us {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 1%);
  border-left: 1px dashed var(--muted);
}

.strip__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 1%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--muted);
}

.strip__dot--pos {
  background: var(--pos);
}

.strip__dot--neg {
  background: var(--neg);
}

/* Price check */

.price-check {
  display: grid;
  gap: var(--s-4);
}

.price-now__value {
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: 1.1;
}

.deals__low {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.deals__list {
  list-style: none;
  padding: 0;
  margin-top: var(--s-2);
}

.deal {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 0;
  color: var(--text);
  font-size: var(--fs-15);
}

.deal:hover {
  text-decoration: none;
}

.deal:hover .deal__store {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deal img {
  width: 16px;
  height: 16px;
}

.deal .icon {
  color: var(--muted);
}

/* Vibes */

.vibes {
  display: grid;
  gap: var(--s-3);
}

.vibe__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.vibe__label {
  font-weight: 500;
}

.vibe__bar {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: var(--r-tag);
  background: var(--line-soft);
  overflow: hidden;
}

.vibe__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.vibe__why {
  margin-top: 2px;
}

/* Similar, about */

.similar .grow {
  grid-template-columns: 92px minmax(0, 1fr);
}

.about p + .about__list,
.about__list + .about__links {
  margin-top: var(--s-3);
}

.about__list {
  display: grid;
  gap: 6px;
  font-size: var(--fs-13);
}

.about__list div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-3);
}

.about__list dt {
  color: var(--muted);
}

.about__list dd {
  margin: 0;
}

/* Review history chart */

.history {
  position: relative;
}

.history svg {
  display: block;
  width: 100%;
  height: auto;
}

.history .bar-up {
  fill: var(--pos);
}

.history .bar-down {
  fill: var(--neg);
}

.history .axis {
  stroke: var(--line);
}

.history .tick {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.history .hit {
  fill: transparent;
  cursor: crosshair;
}

.history .hover-band {
  fill: var(--raised);
}

.history-tip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-12);
  pointer-events: none;
}

.history-tip[hidden] {
  display: none;
}

.history-legend {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-12);
}

.history-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 1px;
}

.history-legend .up::before {
  background: var(--pos);
}

.history-legend .down::before {
  background: var(--neg);
}

/* Price history chart (shares .history, the tooltip and the legend) */

.history .grid {
  stroke: var(--line-soft);
}

.history .price-area {
  fill: var(--accent-wash);
}

.history .price-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.history .price-low {
  stroke: var(--pos);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
}

.history .price-dot {
  fill: var(--accent);
}

.history .price-dot--hover {
  stroke: var(--surface);
  stroke-width: 2;
}

.history .price-guide {
  stroke: var(--muted);
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}

.history-legend .price::before {
  height: 2px;
  vertical-align: middle;
  background: var(--accent);
}

.history-legend .low::before {
  height: 0;
  vertical-align: middle;
  border-top: 2px dashed var(--pos);
}

.history .sale-band {
  fill: var(--raised);
}

.history-legend .sale::before {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Lowest of the last 90 days, in the price check panel */

.price-low[hidden] {
  display: none;
}

.price-low__hint {
  margin-top: var(--s-2);
  color: var(--text-2);
}

/* ── Deals ────────────────────────────────────────────── */

.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 200px));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

@media (max-width: 760px) {
  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.results-count {
  margin-bottom: var(--s-2);
}

.notes {
  margin-top: var(--s-4);
  max-width: 80ch;
}

.deal-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--text);
}

.deal-price:hover {
  text-decoration: none;
}

.deal-price:hover .deal-price__now {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deal-price__now {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* "90-day low", on its own line under the price */
.deal-low {
  display: block;
  width: max-content;
  margin: 4px 0 0 auto;
}

.deal-score {
  display: block;
  font-size: var(--fs-17);
  font-weight: 500;
}

.deal-score__label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* ── Regional price index ─────────────────────────────── */

.index {
  display: grid;
}

.notice + .index {
  margin-top: var(--s-4);
}

.index__head,
.index__row {
  display: grid;
  grid-template-columns: 220px 120px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
}

.index__head {
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.index__row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.index__region {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
}

.index__median {
  font-size: var(--fs-20);
  text-align: right;
}

.index__axis,
.index__strip {
  position: relative;
  height: 22px;
}

.index__axis span {
  position: absolute;
  left: calc(var(--x) * 1%);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.index__axis span:first-child {
  transform: none;
}

.index__axis span:last-child {
  transform: translateX(-100%);
}

.index__strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}

.index__iqr {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: calc(var(--a) * 1%);
  width: calc((var(--b) - var(--a)) * 1%);
  border-radius: var(--r-tag);
  background: var(--accent-wash);
}

.index__us {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: calc(var(--x) * 1%);
  border-left: 1px dashed var(--muted);
}

.index__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 1%);
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--text-2);
  opacity: 0.55;
}

.index__mid {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: calc(var(--x) * 1%);
  width: 3px;
  margin-left: -1.5px;
  border-radius: 1px;
  background: var(--accent);
}

@media (max-width: 640px) {
  .index__head,
  .index__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}