/* GearCensus public site. Dark by default, light when the system asks for it. No external fonts or scripts. */

:root {
    color-scheme: dark;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

    --bg: #0c0e12;
    --surface: #13161c;
    --surface-raised: #1a1e25;
    --line: #20252e;
    --line-strong: #2f3642;
    --text: #eef0f3;
    --text-2: #a3acb8;
    --text-3: #6e7784;
    --accent-text: #f5c162;

    /* Chart marks, validated for colorblind separation against --bg. */
    --accent: #f2b33d;
    --on-accent: #1b1304;
    --mark: #5a6474;
    --on-mark: #ffffff;
    --mark-muted: #262b34;

    /* Vendor colors, one per vendor in the vendor bars' fixed order (NVIDIA, AMD, Intel, Apple): neighbors were
       validated for colorblind and normal-vision separation against --bg in both themes. */
    --vendor-nvidia: #199e70;
    --vendor-amd: #d95926;
    --vendor-intel: #3987e5;
    --vendor-apple: #d55181;
    --on-vendor: #121418;

    --shadow: 0 18px 48px rgb(0 0 0 / 0.45);
    --bar-hover: rgb(255 255 255 / 0.22);
}

@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        --bg: #f6f6f3;
        --surface: #ffffff;
        --surface-raised: #ffffff;
        --line: #e6e6e1;
        --line-strong: #d4d6d0;
        --text: #121418;
        --text-2: #4a525e;
        --text-3: #747c87;
        --accent-text: #9c5a00;

        --accent: #c27c00;
        --on-accent: #1b1304;
        --mark: #8c95a2;
        --on-mark: #121418;
        --mark-muted: #e4e6e9;

        --vendor-nvidia: #1baf7a;
        --vendor-amd: #eb6834;
        --vendor-intel: #2a78d6;
        --vendor-apple: #e87ba4;

        --shadow: 0 18px 48px rgb(20 24 30 / 0.14);
        --bar-hover: rgb(0 0 0 / 0.18);
    }
}

/* Base */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.55 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

h1, h2, h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 4px;
}

code {
    font-family: var(--font-mono);
}

.container {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 640px) {
    .container {
        padding-inline: 32px;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 100;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 12px;
}

.eyebrow,
.section__title,
.peers__title,
.breakdown__caption,
.facts dt {
    display: block;
    margin: 0;
    font: 500 0.75rem/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.lede {
    max-width: 48ch;
    margin: 20px 0 0;
    font-size: clamp(1.0625rem, 1.2vw + 0.8rem, 1.25rem);
    line-height: 1.5;
    color: var(--text-2);
}

.source {
    margin: 12px 0 0;
    font: 0.8125rem/1.4 var(--font-mono);
    color: var(--text-3);
}

/* A warning about the data, such as a survey list that Steam left out of a month. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--text);
}

.notice__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--accent-text);
}

.muted {
    color: var(--text-3);
}

.tag {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font: 500 0.6875rem/1.6 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}

/* Header and footer */

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

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 650;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.wordmark__mark {
    width: 22px;
    height: 22px;
    color: var(--accent);
}

.site-nav {
    display: flex;
    gap: 4px;
}

.site-nav a,
.site-nav summary {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-2);
    text-decoration: none;
}

.site-nav a:hover,
.site-nav a.active,
.site-nav summary:hover,
.site-nav summary.active,
.site-nav__group[open] > summary {
    color: var(--text);
}

.site-nav a.active,
.site-nav summary.active {
    background: var(--surface);
}

/* A section menu, such as GPUs: a disclosure that a tap or click opens. */
.site-nav__group {
    position: relative;
}

.site-nav summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

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

.site-nav__chevron {
    width: 12px;
    height: 12px;
    transition: transform 120ms ease;
}

.site-nav__group[open] .site-nav__chevron {
    transform: rotate(180deg);
}

.site-nav__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 100%;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

/* Keeps the menu open while the pointer crosses the gap under the section name. */
.site-nav__menu::before {
    content: "";
    position: absolute;
    inset: -8px 0 100%;
}

.site-nav__menu a {
    white-space: nowrap;
}

.site-nav__menu a:hover,
.site-nav__menu a.active {
    background: var(--mark-muted);
}

/* Where the device can hover, pointing at the section or tabbing into it opens the menu too. */
@media (hover: hover) {
    .site-nav__group:hover::details-content,
    .site-nav__group:has(:focus-visible)::details-content {
        content-visibility: visible;
    }
}

/* On a phone, the links take their own row under the wordmark. */
@media (max-width: 560px) {
    .site-header__inner {
        flex-wrap: wrap;
        row-gap: 4px;
        height: auto;
        padding-block: 14px 8px;
    }

    .site-nav {
        flex-basis: 100%;
        flex-wrap: wrap;
        margin-inline: -10px;
    }
}

.site-footer {
    margin-top: 80px;
    border-top: 1px solid var(--line);
    padding-block: 28px 36px;
    font-size: 0.8125rem;
    color: var(--text-3);
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 24px;
    margin-bottom: 4px;
    font-size: 0.875rem;
}

.site-footer__links a {
    color: var(--text-2);
}

.site-footer__links a:hover {
    color: var(--text);
}

.site-footer p {
    max-width: 58ch;
    margin: 0;
}

/* Hero: a median headline, such as the median GPU on the home page */

.hero {
    padding-block: clamp(48px, 9vw, 112px) 48px;
}

.hero__title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
    /* Lets the name size itself on the title's width. */
    container-type: inline-size;
}

.hero__title .eyebrow {
    margin-bottom: 28px;
    letter-spacing: 0.08em;
}

.hero__vendor {
    display: block;
    margin-bottom: 10px;
    font-size: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text-2);
}

/* --name-length is the number of characters of the longest name shown. A bold character of this font averages
   a little over half an em, so dividing the title's width by 0.58 em per character keeps the name on one line. */
.hero__name {
    display: block;
    font-size: clamp(2rem, calc(100cqi / (var(--name-length, 12) * 0.58)), 6.75rem);
    color: var(--text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.hero__name:hover {
    color: var(--accent-text);
}

/* Vertical text rotator: the items share one grid cell, so the box keeps the height of the tallest name.
   The current item rests in place, the leaving one slides up and out, and the others wait below. */

.rotator {
    display: grid;
    overflow: hidden;
    /* Room for focus outlines and descenders, which overflow: hidden would cut off. */
    padding: 4px;
    margin: -4px;
}

.rotator__item {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

.rotator__item--current,
.rotator__item--leaving {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.rotator__item--current {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.rotator__item--leaving {
    transform: translateY(-100%);
}

.peers {
    margin-top: 44px;
}

.peers__title {
    margin-bottom: 12px;
}

/* GPU chips */

.gpu-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gpu-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.gpu-link:hover {
    border-color: var(--text-3);
    background: var(--surface-raised);
}

.gpu-link__name {
    font-weight: 500;
}

.gpu-link__share {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

/* Sections */

.section {
    margin-block: 64px;
}

.section__title {
    margin-bottom: 14px;
}

.panel {
    margin-block: 24px;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.panel__title {
    margin: 0 0 18px;
    font-size: clamp(1.25rem, 1.5vw + 0.8rem, 1.625rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-head {
    padding-block: clamp(36px, 7vw, 80px) 28px;
}

.page-head__title {
    margin: 0;
    font-size: clamp(2.25rem, 5vw + 1rem, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.page-head .eyebrow {
    margin-bottom: 16px;
}

.page-head .search {
    max-width: 640px;
    margin-top: 32px;
}

/* Search box */

.search {
    margin: 0;
}

.search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.search__field {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--bg);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search__field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.search__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: 16px;
    color: var(--text-3);
}

.search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    /* 16px or more keeps iOS from zooming in on focus. */
    font-size: 1.0625rem;
}

.search__input::placeholder {
    color: var(--text-3);
}

.search__input:focus-visible {
    outline: none;
}

.search__button {
    flex: none;
    height: 44px;
    margin-right: 6px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: filter 0.15s;
}

.search__button:hover {
    filter: brightness(1.08);
}

.search__options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: min(400px, 60vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    list-style: none;
}

.search__options[hidden] {
    display: none;
}

.search__options [role="option"] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.search__options [aria-selected="true"] {
    background: var(--line);
}

.option__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.option__share {
    margin-left: auto;
    color: var(--text-3);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* GPU page: the answer */

.answer {
    padding-block: clamp(28px, 6vw, 72px) 8px;
}

.breadcrumb {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    font: 0.8125rem/1.4 var(--font-mono);
    color: var(--text-3);
}

.breadcrumb a {
    color: var(--text-2);
    text-decoration: none;
}

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

.answer__title {
    margin: 0;
    font-weight: 700;
}

.answer__figure {
    display: block;
    font-size: clamp(5rem, 20vw, 11rem);
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: var(--accent-text);
}

.answer__sentence {
    display: block;
    max-width: 30ch;
    margin-top: 18px;
    font-size: clamp(1.5rem, 3vw + 0.8rem, 2.5rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--text-2);
}

.answer__sentence strong {
    font-weight: 700;
    color: var(--text);
}

/* The GPU's tier and share history in one or two sentences, under the headline. */
.answer__summary {
    max-width: 62ch;
    margin-top: 24px;
}

/* Segmented bar of all surveyed PCs */

.breakdown {
    margin: 44px 0 0;
}

.breakdown__caption {
    margin-bottom: 12px;
}

.breakdown__bar {
    display: flex;
    gap: 2px;
    height: 28px;
}

.segment {
    display: flex;
    align-items: center;
    flex-basis: 0;
    min-width: 2px;
    border-radius: 4px;
}

.segment__label {
    padding-inline: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.segment--highlight,
.swatch--highlight {
    background: var(--accent);
    color: var(--on-accent);
}

.segment--partial,
.swatch--partial {
    background: repeating-linear-gradient(
        135deg,
        var(--accent) 0 3px,
        color-mix(in srgb, var(--accent) 22%, transparent) 3px 7px);
}

.segment--default,
.swatch--default {
    background: var(--mark);
    color: var(--on-mark);
}

.segment--muted,
.swatch--muted {
    background: var(--mark-muted);
    color: var(--text-2);
}

.segment--vendor-nvidia,
.swatch--vendor-nvidia {
    background: var(--vendor-nvidia);
}

.segment--vendor-amd,
.swatch--vendor-amd {
    background: var(--vendor-amd);
}

.segment--vendor-intel,
.swatch--vendor-intel {
    background: var(--vendor-intel);
}

.segment--vendor-apple,
.swatch--vendor-apple {
    background: var(--vendor-apple);
}

/* Near-black reads on every vendor color in both themes. */
.segment[class*="segment--vendor-"] {
    color: var(--on-vendor);
}

.breakdown__change {
    margin-left: 6px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-3);
}

.breakdown__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 16px 0 0;
}

.breakdown__legend > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.breakdown__legend dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--text-2);
}

.breakdown__legend dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 40px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--line);
}

.facts > div {
    padding: 16px 20px;
    background: var(--surface);
}

.facts dd {
    margin: 6px 0 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

    .facts > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
    }

    .facts dd {
        margin: 0;
        font-size: 1.0625rem;
    }
}

/* Tier chart */

.tier-chart {
    margin: 0;
}

.tier-chart__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 16px;
}

.tier-chart__title {
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.tier-chart__note {
    font-size: 0.875rem;
    color: var(--text-3);
}

.tier-chart__plot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    height: clamp(170px, 26vw, 240px);
    margin: 0;
    padding: 30px 0 0;
    border-bottom: 1px solid var(--line-strong);
    list-style: none;
}

.tier-chart__tier {
    position: relative;
    min-width: 0;
}

.tier-chart__hit {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    outline-offset: 1px;
}

.tier-chart__bar {
    position: relative;
    display: block;
    width: 100%;
    max-width: 24px;
    border-radius: 4px 4px 0 0;
    background: var(--mark);
    transition: box-shadow 0.15s;
}

.tier-chart__tier--highlight .tier-chart__bar {
    background: var(--accent);
}

.tier-chart__tier--partial .tier-chart__bar {
    background: repeating-linear-gradient(
        135deg,
        var(--accent) 0 3px,
        color-mix(in srgb, var(--accent) 22%, transparent) 3px 7px);
}

.tier-chart__tier--muted .tier-chart__bar {
    background: var(--mark-muted);
}

.tier-chart__hit:hover .tier-chart__bar,
.tier-chart__hit:focus-visible .tier-chart__bar {
    /* An overlay rather than a filter, which would also tint the tooltip inside the bar. */
    box-shadow: inset 0 0 0 100vmax var(--bar-hover);
}

.tier-chart__marker {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    font: 600 0.6875rem/1 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    white-space: nowrap;
}

.tier-chart__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 10;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.8125rem;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.12s;
}

.tier-chart__tip strong {
    font-weight: 650;
}

.tier-chart__tier--start .tier-chart__marker,
.tier-chart__tier--start .tier-chart__tip {
    left: 0;
    transform: none;
}

.tier-chart__tier--end .tier-chart__marker,
.tier-chart__tier--end .tier-chart__tip {
    left: auto;
    right: 0;
    transform: none;
}

.tier-chart__hit:hover .tier-chart__tip,
.tier-chart__hit:focus-visible .tier-chart__tip {
    opacity: 1;
    visibility: visible;
}

.tier-chart__axis {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font: 0.6875rem/1.3 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* GPU list */

.result-count {
    margin: 0 0 16px;
    color: var(--text-2);
}

.gpu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.gpu-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-strong);
    font: 500 0.6875rem/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    color: var(--text-3);
}

.gpu-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: baseline;
}

.gpu-table tbody tr:hover td {
    background: var(--surface);
}

.gpu-table td a {
    font-weight: 500;
    text-decoration: none;
}

.gpu-table td a:hover {
    color: var(--accent-text);
}

.gpu-table .tag {
    margin-left: 8px;
}

.gpu-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .gpu-table th:nth-child(2),
    .gpu-table td:nth-child(2) {
        display: none;
    }

    .gpu-table th,
    .gpu-table td {
        padding-inline: 6px;
    }

    /* Tables whose second column is a figure keep it on phones. */
    .gpu-table--all-columns th:nth-child(2),
    .gpu-table--all-columns td:nth-child(2) {
        display: table-cell;
    }
}

/* Monthly survey pages */

.survey-median,
.survey-figure {
    max-width: 46rem;
    margin: 0 0 20px;
    color: var(--text-2);
}

.survey-median a {
    font-weight: 500;
    color: var(--text);
}

.survey-median a:hover {
    color: var(--accent-text);
}

.survey-figure strong {
    font-size: 1.5rem;
    color: var(--text);
}

/* The CPU section shows its core counts and vendors one under the other. */
.feature-chart + .feature-chart {
    margin-top: 32px;
}

/* Gains and losses side by side where there is room. */
.survey-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 64px 40px;
    margin-block: 64px;
}

/* Grid items keep their margins, which would double the space between sections. */
.survey-columns > .section {
    margin-block: 0;
}

.survey-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-weight: 500;
}

.survey-nav a {
    text-decoration: none;
}

.survey-nav a:hover {
    color: var(--accent-text);
}

.month-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.month-list a {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    font-weight: 500;
    text-decoration: none;
}

.month-list a:hover {
    border-color: var(--line-strong);
    color: var(--accent-text);
}

/* Feature badges on GPU pages. Marks reuse the tokens of the breakdown bar, so no new chart color is introduced. */

.feature-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-badge {
    padding: 14px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
}

.feature-badge--supported {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}

.feature-badge--not-supported {
    background: transparent;
}

.feature-badge__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
}

.feature-badge__head:hover .feature-badge__name {
    color: var(--accent-text);
}

.feature-badge__name {
    font-weight: 600;
}

.feature-badge__state {
    flex: none;
    font: 500 0.75rem/1.3 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.feature-badge--supported .feature-badge__state {
    color: var(--accent-text);
}

.feature-badge__details {
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--text-2);
}

.feature-badge__technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.feature-badge__technology {
    padding: 1px 8px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--text);
}

.feature-badge__technology--compatible {
    border-style: dashed;
    color: var(--text-3);
}

/* Feature overview cards */

.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin: 32px 0 24px;
    padding: 0;
    list-style: none;
}

.feature-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.feature-card:hover {
    border-color: var(--text-3);
    background: var(--surface-raised);
}

.feature-card__name {
    font: 500 0.75rem/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.feature-card__figure {
    margin-top: 10px;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}

.feature-card__sentence {
    flex: 1;
    margin-top: 8px;
    color: var(--text-2);
}

.feature-card__bar {
    display: flex;
    gap: 2px;
    height: 8px;
    margin-top: 16px;
}

.feature-card__bar .segment__label {
    display: none;
}

.feature-explanation {
    max-width: 62ch;
    margin: 12px 0 0;
    color: var(--text-2);
}

/* Feature chart: one horizontal bar per technology, relative to PCs with an identifiable GPU */

.feature-chart {
    margin: 0;
}

.feature-chart__caption {
    margin-bottom: 16px;
    font: 500 0.75rem/1.3 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.feature-chart__rows {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-chart__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 7.5rem;
    align-items: center;
    gap: 16px;
}

.feature-chart__name {
    font-size: 0.9375rem;
}

.feature-chart__name .tag {
    margin-left: 6px;
}

.feature-chart__track {
    display: flex;
    height: 14px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--mark-muted);
}

.feature-chart__bar {
    flex: none;
}

.feature-chart__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.feature-chart__split {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-3);
}

.feature-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.feature-chart__legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-2);
}

@media (max-width: 560px) {
    .feature-chart__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
    }

    .feature-chart__track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* Platforms: one card per platform, each with its own trend chart and zero-based scale */

.platform-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.platform-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.platform-card .feature-card__name {
    margin: 0;
}

.platform-card .trend-chart {
    margin-top: 20px;
}

.trend-chart__line {
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.trend-chart__line--highlight {
    stroke: var(--accent);
}

.trend-chart__line--default {
    stroke: var(--mark);
}

/* How a trend moved since its first month, under its chart. */
.trend-change {
    display: block;
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--text-3);
}

.trend-chart {
    margin: 0;
}

/* The margins hold the axis ticks on the left and, with several series, the end labels on the right. */
.trend-chart__frame {
    margin-left: 2.5rem;
}

.trend-chart--labeled .trend-chart__frame {
    margin-right: 9rem;
}

.trend-chart__plot {
    position: relative;
    height: clamp(180px, 26vw, 240px);
    border-bottom: 1px solid var(--line-strong);
}

.trend-chart--compact .trend-chart__plot {
    height: 120px;
}

.trend-chart__grid {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
}

.trend-chart__tick {
    position: absolute;
    right: 100%;
    padding-right: 8px;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.trend-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.trend-chart__label {
    position: absolute;
    left: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    font-size: 0.8125rem;
    color: var(--text-2);
    white-space: nowrap;
    transform: translateY(50%);
}

.trend-chart__label strong {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.trend-chart__hits {
    position: absolute;
    inset: 0;
}

.trend-chart__hit {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
}

.trend-chart__hit:hover::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--text-3);
}

.trend-chart__tip {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
    font-size: 0.8125rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, calc(-100% - 8px));
    transition: opacity 0.12s;
}

.trend-chart__tip strong {
    font-weight: 650;
}

.trend-chart__hit--start .trend-chart__tip {
    left: 0;
    transform: translateY(calc(-100% - 8px));
}

.trend-chart__hit--end .trend-chart__tip {
    left: auto;
    right: 0;
    transform: translateY(calc(-100% - 8px));
}

.trend-chart__hit:hover .trend-chart__tip {
    opacity: 1;
    visibility: visible;
}

.trend-chart__axis {
    position: relative;
    height: 1.5rem;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-3);
}

.trend-chart__axis span {
    position: absolute;
    transform: translateX(-50%);
}

.trend-chart__data {
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--text-2);
}

.trend-chart__data summary {
    cursor: pointer;
}

.trend-chart__data table {
    margin-top: 12px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.trend-chart__data th,
.trend-chart__data td {
    padding: 4px 16px 4px 0;
    text-align: left;
    font-weight: 400;
}

.trend-chart__data thead th {
    color: var(--text-3);
}

.table-scroll {
    overflow-x: auto;
}

@media (max-width: 560px) {
    .trend-chart--labeled .trend-chart__frame {
        margin-right: 7.5rem;
    }

    /* The value goes under the name, so the label fits the margin. Being positioned past the plot's edge, the
       label needs an explicit width. */
    .trend-chart__label {
        flex-wrap: wrap;
        width: 7.5rem;
        row-gap: 0;
        font-size: 0.75rem;
        white-space: normal;
    }

    .trend-chart__name {
        white-space: nowrap;
    }

    .trend-chart__label strong {
        flex-basis: 100%;
        padding-left: 16px;
    }
}

/* Long-form pages */

.prose {
    max-width: 68ch;
    padding-block: clamp(36px, 7vw, 80px) 0;
}

.prose h1 {
    margin: 0 0 8px;
    font-size: clamp(2.25rem, 5vw + 1rem, 3.5rem);
    letter-spacing: -0.035em;
    line-height: 1;
}

.prose h2 {
    margin: 44px 0 8px;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

.prose p {
    margin: 0 0 14px;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-2);
}

/* Accessibility preferences */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .tier-chart__bar,
    .feature-chart__bar,
    .segment,
    .swatch,
    .trend-chart__svg {
        forced-color-adjust: none;
    }
}