/* Compatibility charts. Built on kb.css -- this file only adds the list.

   The rows are a <ul>, not cards: there are twenty of them and the only
   question a person has is "which one is mine", which is answered by
   reading down a column of names. Cards would spread twenty short labels
   over three screens and make scanning harder, not easier. */

.chart-group {
    margin: 2.2rem 0 0;
}

.chart-group h2 {
    margin: 0 0 .25rem;
    font-size: 1.15rem;
}

.chart-blurb {
    margin: 0 0 .9rem;
    color: var(--muted, #5b6066);
    font-size: .92rem;
}

/* Earlier macOS is deliberately quieter: it is the longest group and the
   least often wanted, and someone still on Catalina knows to look for it. */
.chart-group-quiet { opacity: .82; }
.chart-group-quiet h2 { font-weight: 600; }

.chart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule, #e3e5e8);
}

.chart-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .2rem;
    border-bottom: 1px solid var(--rule, #e3e5e8);
}

/* The name takes the slack so the button and size stay in a straight
   column down the page -- the thing that makes a list of twenty scannable
   is that the eye only has to track one edge. */
.chart-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.chart-title { font-weight: 600; }

.chart-sub {
    font-size: .86rem;
    color: var(--muted, #5b6066);
}

.chart-size {
    flex: 0 0 5.5rem;
    text-align: right;
    font-size: .85rem;
    color: var(--muted, #5b6066);
    font-variant-numeric: tabular-nums;   /* so the sizes line up */
}

.chart-footnote {
    margin: 2.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule, #e3e5e8);
    color: var(--muted, #5b6066);
}

/* On a phone the size would squeeze the name to nothing, so it moves
   under the title and the button keeps its own line. */
@media (max-width: 34rem) {
    .chart-row { flex-wrap: wrap; gap: .5rem .8rem; }
    .chart-size { flex: 0 0 auto; text-align: left; }
}

/* THE TWO PRIMARY CARDS
   Sonnet's own charts page leads with two picture-links, macOS and
   Windows 11, and nothing else. We keep that: it is the shape people
   arriving from the old site expect, and it is right -- those two answer
   almost every question, and a list of fifteen would bury them.

   The picture is the link, as it is there. The name and the line under
   it are inside the same anchor so the whole card is one target. */
.chart-cards {
    display: grid;
    /* THE CARDS SHARE THE ROW; THEY ARE NOT CAPPED AT A FIXED WIDTH.
     *
     * This was minmax(16rem, 20rem) while there were two cards, where a
     * cap stopped them stretching halfway across a 1200px page. A third
     * card joined them on 26 October and the cap became the problem:
     * 3 x 20rem plus two gaps needs about 1005px of content, so on any
     * window narrower than that the row broke 2 + 1 and Thunderbolt sat
     * alone underneath.
     *
     * 1fr instead of a maximum lets the three divide whatever width
     * there is, so they stay on one row down to about 670px and only
     * then fall to two, and one on a phone. auto-fit rather than
     * repeat(3, ...) so that still happens without a media query. */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.4rem;
    margin: 1.6rem 0 2.6rem;
}

.chart-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--rule, #e3e5e8);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    background: var(--card, #fff);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.chart-card:hover,
.chart-card:focus-visible {
    border-color: var(--accent, #5b4b9c);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
    transform: translateY(-1px);
}

/* A fixed band for the artwork so the two cards line up even though the
   PNGs are not the same visual weight. */
.chart-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    margin-bottom: .3rem;
    border-radius: 6px;
    background: var(--tile, #f4f5f7);
    overflow: hidden;
}

.chart-card-img img { max-width: 100%; height: auto; display: block; }

.chart-card-title { font-weight: 700; font-size: 1.02rem; }

.chart-card-sub {
    font-size: .9rem;
    color: var(--muted, #5b6066);
    line-height: 1.4;
}

.chart-card-meta {
    margin-top: .25rem;
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--accent, #5b4b9c);
    font-weight: 600;
}