/**
 * states-index.css — /states, the clickable-map index.
 *
 * Layers on top of glyph-gallery.css (which supplies the page chrome, the .gg-* type scale and
 * the puzzle-miniature styles the thumbnails reuse). Only the map, the jump bar and the row
 * layout live here.
 */

/* ── the map ─────────────────────────────────────────────────────────────── */
.si-map-wrap {
    max-width: 1000px;
    margin: 0 auto 1.6rem;
    padding: 0 1rem;
}
.us-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #0e1a16;
    border: 1px solid #24413a;
}
.us-sea { fill: #0e1a16; }

/* One <path> per state, wrapped in an <a> that jumps to its list entry. */
.us-map path {
    fill: #33544a;
    stroke: #0e1a16;
    stroke-width: 0.8;
    stroke-linejoin: round;
    transition: fill .12s ease;
    cursor: pointer;
}
.us-map a:hover path,
.us-map a:focus path { fill: #7fd0a4; }
.us-map a:focus { outline: none; }
.us-map a:focus-visible path { stroke: #fff; stroke-width: 1.6; }

/* The list entry the map just jumped to, so the eye lands in the right place. */
.si-row:target { background: #17302a; border-color: #7fd0a4; }
.si-row:target .si-name { color: #7fd0a4; }

.us-inset-lbl {
    fill: #6f8a80;
    font: 500 13px system-ui, sans-serif;
    letter-spacing: .04em;
}

/* ── jump bar: every state as a chip, for keyboard and small screens ─────── */
.si-jump {
    max-width: 1000px;
    margin: 0 auto 1.8rem;
    padding: 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.si-jump a {
    font: 600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: .04em;
    color: #93b6a6;
    background: #17302a;
    border: 1px solid #24413a;
    border-radius: 999px;
    padding: .34rem .5rem;
    text-decoration: none;
}
.si-jump a:hover { color: #0e1a16; background: #7fd0a4; border-color: #7fd0a4; }

/* ── one row per state ───────────────────────────────────────────────────── */
.si-row {
    max-width: 1000px;
    margin: 0 auto 1rem;
    padding: 1rem 1.1rem;
    display: grid;
    grid-template-columns: 1fr minmax(140px, 300px);
    gap: 1.4rem;
    align-items: center;
    background: #12241f;
    border: 1px solid #24413a;
    border-radius: 12px;
    /* Anchor targets must clear the sticky nothing above, but leave breathing room so a jumped-to
       row is not flush against the viewport edge. */
    scroll-margin-top: 1rem;
}
.si-name { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700; color: #e9f5ee; }
.si-facts {
    margin: 0 0 .5rem;
    font: 400 12.5px/1.5 "IBM Plex Mono", ui-monospace, monospace;
    color: #93b6a6;
    font-variant-numeric: tabular-nums;
}
.si-links { margin: 0 0 .3rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.si-play {
    display: inline-block;
    background: #7fd0a4; color: #0b1622;
    font-weight: 700; font-size: .88rem;
    padding: .4rem .8rem; border-radius: 8px; text-decoration: none;
}
.si-play:hover { filter: brightness(1.08); }
.si-edit { color: #93b6a6; font-size: .8rem; text-decoration: none; }
.si-edit:hover { color: #e9f5ee; }
.si-back { margin: 0; }
.si-back a { color: #6f8a80; font-size: .75rem; text-decoration: none; }
.si-back a:hover { color: #7fd0a4; }

/* Same squash, same cure as `.wi-mode` below — the widest states (34+ columns) overflow this
 * column and `table-layout:fixed` compresses their width while the row height holds. Measured 4 of
 * 50 distorted, worst 0.798. `.si-thumb` is a grid item with a track-derived width, so it is safe
 * to make it the container. */
.si-thumb { justify-self: end; width: 100%; container-type: inline-size; --gg-chrome: 20px; }
.si-thumb .gg-grid {
    --gg-cell: min(11px, calc((100cqw - var(--gg-chrome)) / var(--gg-cols, 12)));
}
.si-thumb .gg-grid td { box-sizing: border-box; }
.si-thumb .gg-pair-label, .si-thumb .gg-meta { display: none; }   /* the row already says it */

.si-src { display: block; margin-top: .5rem; font-size: .72rem; color: #55706a; }

@media (max-width: 720px) {
    .si-row { grid-template-columns: 1fr; gap: .9rem; }
    .si-thumb { justify-self: center; max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Variant badge in the heading, so the two series are never confused at a glance. */
.si-variant {
    font-size: .5em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    vertical-align: middle; color: #0b1622; background: #7fd0a4;
    padding: .18em .5em; border-radius: 999px;
}

/* ── /mapskuro/world: three policies side by side ─────────────────────────── */
.wi-row { grid-template-columns: minmax(180px, 260px) 1fr; }
.wi-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.wi-mode { margin: 0; min-width: 0; }

/* ⚠️ Shrink the cell to fit; never let the table squash.
 *
 * `.gg-grid` is a `table-layout:fixed` table whose td carries `width:var(--gg-cell)` AND
 * `height:var(--gg-cell)`. When the card column is narrower than the grid's natural width the
 * browser honours the height and compresses the WIDTH — so the cells stop being square and the
 * country stops being recognisable. Measured before this rule: 115 of 570 cards distorted, the
 * 36-column grids at 5.2×11px (ratio 0.47 — Indonesia, Russia, China, the USA).
 *
 * The fix is to make the cell small enough that the table never needs squeezing, so a wide country
 * becomes a smaller thumbnail at true proportions. `--gg-cols` comes from the card partial because
 * CSS cannot count a table's columns; `100cqw` is the card's own width, which is why `.wi-mode`
 * declares itself a container.
 *
 * ⚠️ The track sizes must stay `fr`/fixed, never `auto`. `container-type: inline-size` size-contains
 * the inline axis, so a content-sized track would measure the card as zero-width and collapse it.
 */
/* ⚠️ The container must be `.wi-mode`, whose width comes from the grid track and NOT from its
 * contents. Putting it on `.gg-card` looks more accurate — cq units resolve against the content
 * box, which is exactly what the table gets — but `.gg-item` centres the card with
 * `align-items:center`, so the card is content-sized; size containment then makes its contents
 * contribute nothing and it collapses. Measured: every cell fell to 0.5×0px.
 *
 * So measure the track and subtract the card's chrome by hand: .5rem padding either side plus its
 * 1px border, and 2px for the table's own collapsed outer border. ⚠️ Keep `--gg-chrome` in step
 * with `.gg-card`'s padding/border in glyph-gallery.css. */
.wi-mode { container-type: inline-size; --gg-chrome: 20px; }
.wi-mode .gg-grid {
    --gg-cell: min(11px, calc((100cqw - var(--gg-chrome)) / var(--gg-cols, 12)));
}
/* The 1px td border sits inside the cell, so cols × --gg-cell is the true table width. */
.wi-mode .gg-grid td { box-sizing: border-box; }
.wi-mode figcaption {
    display: flex; flex-direction: column; gap: .1rem; margin-bottom: .4rem;
    font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: #93b6a6;
}
.wi-mode figcaption b { color: #e9f5ee; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.wi-none { color: #c58b8b; }
/* A policy that cannot represent a shape is a RESULT, not an absence — show it. */
.wi-empty {
    border: 1px dashed #3a5b52; border-radius: 8px; padding: 1.1rem .7rem;
    color: #6f8a80; font-size: 11.5px; text-align: center; line-height: 1.45;
}
@media (max-width: 900px) {
    .wi-row { grid-template-columns: 1fr; }
    .wi-modes { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
}
@media (max-width: 620px) { .wi-modes { grid-template-columns: 1fr; } }

/* Size switcher — the one control a visitor needs; the three series are otherwise identical. */
.si-sizes { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .5rem; }
.si-sizes-label {
    font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #6f8a80; font-weight: 700;
}
.si-sizes a {
    color: #93b6a6; text-decoration: none; font-weight: 600; font-size: .9rem;
    padding: .18rem .6rem; border-radius: 999px; border: 1px solid #24413a;
}
.si-sizes a:hover { color: #e9f5ee; border-color: #7fd0a4; }
.si-sizes a.is-on { background: #7fd0a4; border-color: #7fd0a4; color: #0b1622; }
.si-sizes-note { color: #6f8a80; font-size: .8rem; }
.si-more { color: #93b6a6; font-size: .8rem; text-decoration: none; border-bottom: 1px dotted #3a5b52; }
.si-more:hover { color: #7fd0a4; border-bottom-color: #7fd0a4; }

/* Revision queue: the failure reason is the point of the row, so give it room. */
.rv-reason {
    margin: .1rem 0 .5rem; max-width: 60ch;
    font: 400 12px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: #c9a227;
}
.rv-hash { font-size: .7rem; color: #55706a; user-select: all; }