/* version: 0.1.0 | build: 2026-09-17 | update: 2026-09-17 */
/* Discovery screens: search, categories, category page, rankings, leaderboard, methodology.
   Mobile first; tokens come from site.css. */

.discovery-title {
   margin-top: 10px;
   font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.discovery-body {
   padding: 28px 16px 72px;
}

@media (min-width: 720px) {
   .discovery-body {
      padding-left: 28px;
      padding-right: 28px;
   }
}

.discovery-body > * + * {
   margin-top: 20px;
}

.section-lede {
   color: var(--ink-2);
   max-width: 66ch;
   margin-top: 8px;
}

.retry {
   margin-top: 12px;
}

.more-link {
   margin-top: 16px;
   font-weight: 600;
}

.count {
   font: 500 .78rem/1 var(--mono);
   color: var(--ink-3);
}

/* ---------- search ---------- */
.search-page-form {
   margin-top: 18px;
   max-width: 100%;
}

.search-page-form .input {
   padding-right: 104px;
}

.search-tip {
   margin-top: 10px;
   max-width: 66ch;
}

.popular-grid {
   margin-top: 16px;
}

.facet-chips {
   margin-top: 0;
}

.result-count {
   font: 600 1rem/1.4 var(--body);
   letter-spacing: 0;
   color: var(--ink-2);
}

.suggest-line {
   text-align: center;
   color: var(--ink-2);
}

.suggest-line a {
   font-weight: 600;
}

/* ---------- categories index ---------- */
.jump-links {
   margin-top: 0;
}

.kind-group {
   scroll-margin-top: 88px;
}

.kind-group + .kind-group {
   margin-top: 36px;
}

.kind-group-head {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 6px 14px;
   margin-bottom: 14px;
}

.kind-group-link {
   margin-left: auto;
   font-weight: 600;
   font-size: .9rem;
}

.cat-card {
   display: grid;
   gap: 12px;
   padding: 16px 18px;
}

.cat-card-head {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 12px;
}

.cat-card-head .count {
   font-size: 1.2rem;
   font-weight: 600;
}

.cat-card-top {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: .88rem;
   color: var(--ink-2);
   min-width: 0;
}

.cat-card-top span:last-child {
   overflow-wrap: anywhere;
}

/* ---------- category page ---------- */
.fresh-summary {
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 8px 18px;
   font-size: .84rem;
}

.fresh-summary li {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.listing {
   min-width: 0;
}

.filters-title {
   font-size: 1rem;
   margin-bottom: 12px;
}

.filters .options {
   display: flex;
   flex-wrap: wrap;
   gap: 2px 16px;
}

.filters .check {
   align-items: center;
}

.filters .check input {
   margin-top: 0;
}

.filter-actions {
   gap: 8px;
}

@media (min-width: 980px) {
   .filters .options {
      flex-direction: column;
   }
}

.lane-head {
   flex-wrap: wrap;
   align-items: center;
}

.lane-title {
   font: inherit;
   letter-spacing: 0;
}

.lane-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 12px;
}

.lane-item {
   display: grid;
   grid-template-columns: 32px minmax(0, 1fr);
   gap: 4px 12px;
   align-items: start;
}

.lane-name {
   font-weight: 700;
}

.lane-summary {
   color: var(--ink-2);
   font-size: .9rem;
}

.lane-rank {
   grid-column: 2;
   font: 500 .78rem/1.3 var(--mono);
}

@media (min-width: 720px) {
   .lane-item {
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
   }

   .lane-rank {
      grid-column: auto;
   }
}

.sort-links {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   font-size: .84rem;
}

/* ---------- rankings hub ---------- */
.period-switch {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px 14px;
   margin-top: 18px;
}

.segmented {
   display: inline-flex;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
   overflow: hidden;
   background: var(--surface);
}

.segmented a {
   padding: 8px 14px;
   min-height: 38px;
   display: inline-flex;
   align-items: center;
   text-decoration: none;
   font-weight: 600;
   font-size: .88rem;
   color: var(--ink-2);
}

.segmented a + a {
   border-left: 1px solid var(--line);
}

.segmented a[aria-current="true"] {
   background: var(--ink);
   color: var(--paper);
}

.board-grid {
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
}

@media (min-width: 720px) {
   .board-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 1080px) {
   .board-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

.board {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 16px;
}

.board-title {
   font-size: 1.1rem;
}

.board-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 10px;
}

.board-list li {
   display: grid;
   grid-template-columns: 18px 32px minmax(0, 1fr) auto auto;
   gap: 8px;
   align-items: center;
}

.board-pos {
   color: var(--rank);
   font-weight: 700;
}

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

.board-score {
   font-size: .84rem;
}

.board-link {
   margin-top: auto;
   font-weight: 600;
   font-size: .88rem;
}

.movers .timeline li {
   grid-template-columns: 32px minmax(0, 1fr) auto;
   align-items: center;
}

.movers-list {
   margin-top: 12px;
}

.method-callout {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 20px;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   background: var(--rank-soft);
}

.method-callout p {
   color: var(--ink-2);
   margin-top: 6px;
   max-width: 60ch;
}

/* ---------- leaderboard ---------- */
.scroll-hint {
   margin-bottom: 8px;
}

@media (min-width: 1180px) {
   .scroll-hint {
      display: none;
   }
}

table.leaderboard {
   min-width: 1040px;
}

/* The weight already sits on its own line, so letting the label wrap too is
   what makes all ten columns fit the wide shell without a horizontal scroll. */
table.leaderboard thead th {
   white-space: normal;
}

table.leaderboard thead th.num {
   min-width: 96px;
}

table.leaderboard th[scope="row"] {
   font: 600 .94rem/1.3 var(--body);
   text-transform: none;
   letter-spacing: 0;
   color: var(--ink);
   background: transparent;
   border-bottom: 1px solid var(--line);
   padding: 12px 14px;
}

table.leaderboard tr:last-child th[scope="row"] {
   border-bottom: 0;
}

.leaderboard .col-weight {
   display: block;
   font-weight: 500;
   text-transform: none;
   letter-spacing: 0;
   margin-top: 3px;
   color: var(--ink-3);
}

.leaderboard .overall {
   display: block;
   font-size: .7rem;
   color: var(--ink-3);
   white-space: nowrap;
}

.leaderboard .product {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   white-space: nowrap;
}

.leaderboard .product a {
   text-decoration: none;
}

.leaderboard .product a:hover {
   text-decoration: underline;
}

.leaderboard .score-cell {
   font-weight: 700;
}

.fresh-cell {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
}

/* ---------- methodology ---------- */
.method-section {
   scroll-margin-top: 88px;
}

.method > .method-section + .method-section {
   margin-top: 48px;
}

.method-section h2 + .section-lede {
   margin-top: 8px;
}

.method-section .table-wrap,
.method-section .formula,
.method-section .shrink-examples,
.method-section .decay-figure,
.method-section .rule-list,
.method-section .example-grid {
   margin-top: 16px;
}

.weights-table th[scope="row"] {
   font: 600 .92rem/1.3 var(--body);
   text-transform: none;
   letter-spacing: 0;
   color: var(--ink);
   background: transparent;
}

.weights-table tfoot th,
.weights-table tfoot td {
   border-top: 1px solid var(--line-strong);
   font-weight: 700;
}

.weights-table td.num {
   white-space: nowrap;
}

.weight-bar {
   display: inline-block;
   width: 48px;
   height: 6px;
   margin-right: 8px;
   vertical-align: middle;
   background: var(--sunken);
   border-radius: 3px;
   overflow: hidden;
}

.weight-bar span {
   display: block;
   height: 100%;
   background: var(--rank);
}

.sponsor-row th,
.sponsor-row td {
   color: var(--ink-3);
}

.formula {
   font: 500 .9rem/1.5 var(--mono);
   padding: 12px 14px;
   background: var(--sunken);
   border-radius: var(--radius-sm);
   overflow-wrap: anywhere;
}

.shrink-examples {
   list-style: none;
   padding: 0;
   margin-bottom: 0;
}

.shrink-examples li {
   display: flex;
   align-items: center;
   gap: 14px;
}

.stat-value {
   font: 700 1.8rem/1 var(--mono);
   letter-spacing: -.03em;
   color: var(--rank);
}

.shrink-examples + .hint {
   margin-top: 10px;
}

.decay-figure {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
   max-width: 560px;
}

.decay-chart {
   width: 100%;
   height: auto;
   font-family: var(--mono);
}

.decay-chart .band-fresh {
   fill: var(--fresh-soft);
}

.decay-chart .band-aging {
   fill: var(--aging-soft);
}

.decay-chart .band-stale {
   fill: var(--stale-soft);
}

.decay-chart .band-label {
   font-size: 11px;
   font-weight: 600;
}

.decay-chart .band-label-fresh {
   fill: var(--fresh);
}

.decay-chart .band-label-aging {
   fill: var(--aging);
}

.decay-chart .band-label-stale {
   fill: var(--stale);
}

.decay-chart .grid-line {
   stroke: var(--line);
   stroke-width: 1;
}

.decay-chart .tick-line {
   stroke: var(--line-strong);
   stroke-width: 1;
}

.decay-chart .tick,
.decay-chart .axis-label {
   font-size: 11px;
   fill: var(--ink-3);
}

.decay-chart .decay-line {
   fill: none;
   stroke: var(--ink);
   stroke-width: 2.5;
   stroke-linejoin: round;
}

.decay-figure figcaption {
   margin-top: 8px;
}

.rule-list {
   list-style: none;
   padding: 0;
   display: grid;
   gap: 12px;
}

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

.rule-list p {
   color: var(--ink-2);
   margin-top: 8px;
   font-size: .94rem;
}

.example-grid {
   display: grid;
   gap: 20px;
   align-items: start;
}

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