/* WP-N3: Compare and Data and sources. Every class here is prefixed so- so two packages
   building next.js/next.css at the same time cannot collide on a name (section 0.5a). */

.so-controls .grid3 > div:last-child { position: relative; }
/* Review item 7: Within is beside the three "Compare by" selects, not inside the grid3 row,
   because it is a fourth and optional axis (council scope) rather than a fourth population. */
.so-within { margin-top: .8rem; max-width: 320px; }

/* -------------------------------------------------------------- generic table grid
   next.css already ships .tbl / .tbl-5 for the one fixed five-column shape Funding uses.
   Compare and Sources need variable column counts (3, 4, up to 7), so this is a parallel,
   equally plain, grid that sizes itself from a column-count modifier class. */
.so-tbl-wrap { overflow-x: auto; }
.so-tbl { display: grid; gap: .6rem; font-size: var(--t-caption); align-items: baseline; padding: .5rem 0; min-width: 560px; }
.so-tbl.head { font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); }
.so-tbl.row { border-bottom: 1px solid #eef2f4; }
.so-tbl .so-r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* The same rule next.css needs for .tbl: a column heading is a label, not a figure, so the head
   row keeps .so-r's alignment and gives up its face. This module has its own table classes, so
   the core fix does not reach it. */
.so-tbl.head .so-r { font-family: var(--font-ui); font-variant-numeric: normal; }
/* Compare owns its own widths. It used to borrow the Sources tab's, which are sized for a
   different table, so a third population landed in a column narrower than the other two. */
.so-cmp-2 { grid-template-columns: 1.5fr 1fr 1fr; }
.so-cmp-3 { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.so-tbl-3 { grid-template-columns: 1.4fr .9fr .9fr; }
/* so-tbl-4/5: the accuracy-and-coverage table (Source, Records held, Attributed [, Probable,
   not counted], Not attributed). Attributed carries its per-grade breakdown and its
   distinct-charities sub-line inside the one cell (review item 3), so that column is wider
   than a single figure needs. */
.so-tbl-4 { grid-template-columns: 1.5fr .8fr 1.3fr .9fr; }
.so-tbl-5 { grid-template-columns: 1.4fr .7fr 1.2fr .8fr .8fr; }
.so-na { color: var(--unknown); font-style: italic; font-family: var(--font-ui); }
.so-diff { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- Compare */
.so-foot { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #eef2f4; }
.so-foot + .so-foot { margin-top: .5rem; padding-top: 0; border-top: 0; }

/* -------------------------------------------------------------- Licences and reuse */
.so-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.so-pack { display: flex; flex-direction: column; gap: .25rem; border-top: 3px solid var(--teal); }
.so-pack-name { font-weight: 600; font-size: var(--t-ui-sm); }
.so-pack-stat { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--muted); font-variant-numeric: tabular-nums; }
.so-pack-links { display: flex; gap: .9rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }

/* Review item 1: sources with a licence and no download (the map boundary is the worked
   example). Reuses the .so-pack card grid at .so-packs, so it sits in the same visual family
   as the packs above it rather than inventing a second card shape. */
.so-oblig-section { margin-top: 1.4rem; }
.so-oblig { border-top: 3px solid var(--muted); gap: .5rem; }
.so-oblig-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.so-oblig-name { font-weight: 600; font-size: var(--t-ui-sm); }
.so-quote { font-family: var(--font-mono); font-size: var(--t-caption); background: #f6f7f8; border-left: 3px solid var(--line); padding: .6rem .8rem; margin: 0 0 .4rem; white-space: pre-wrap; word-break: break-word; }

/* -------------------------------------------------------------- Accuracy and coverage */
.so-evidence-card { margin-bottom: 1rem; }
.so-evidence-card:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- What is not here
   Was set in --font-prose/--t-prose (the serif, larger intro-paragraph treatment used for
   .lede at the top of a page). Nothing inside any other tabpanel on this route uses that
   treatment; their body text (panel-sub, known-limitations notes, table cells) is all
   --font-ui at --t-ui-sm or --t-caption. Confirmed by computed style before changing this
   (review item 12): brought into line with the sans-serif body font the sibling tabs use. */
.so-bounds { font-family: var(--font-ui); font-size: var(--t-ui-sm); line-height: 1.55; max-width: 74ch; margin: 0; padding-left: 1.3rem; }
.so-bounds li { margin-bottom: .7rem; }
.so-bounds li:last-child { margin-bottom: 0; }

@media (max-width: 1050px) {
  .so-packs { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .so-pack-links { flex-direction: column; align-items: flex-start; gap: .5rem; }
}