/* Conviction stats guide only (built from stats.css by build_guide.py). Colour carries meaning: teal for the map scale and men, purple for women and the site's tables. */

/* Tables and the wide visuals use the rail, not the 881px reading width. */
.cgc-article-content .cgcs-table { overflow-x: auto; margin: 16px 0 8px; -webkit-overflow-scrolling: touch; }
.cgc-article-content .cgcs-table table { margin: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { padding: 10px 14px; }
.cgc-article-content .cgcs-table .cgcs-r { text-align: right; white-space: nowrap; }
.cgc-article-content .cgcs-table--short td:first-child, .cgc-article-content .cgcs-table--short th:first-child { white-space: nowrap; }
.cgc-article-content .cgcs-table:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.cgc-article-content p.cgcs-src, .cgc-article-content p.cgcs-note { margin: 0 0 24px; max-width: 560px; font-size: 14px; line-height: 1.45; color: #5c5c5c; }
.cgc-article-content p.cgcs-src a { color: inherit; }
.cgc-article-content h3 { margin-top: 32px; }
.cgc-article-content .cgcs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cgc-article-content .cgcs-more { margin: 12px 0 8px; }
.cgc-article-content .cgcs-more summary { cursor: pointer; font-weight: 700; color: var(--cgc-purple); padding: 10px 0; }
.cgc-article-content .cgcs-more[open] .cgcs-table { max-height: 520px; overflow-y: auto; }

/* Age bars */
.cgc-article-content .cgcs-age { margin: 20px 0 8px; max-width: 800px; }
.cgc-article-content .cgcs-key { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.cgc-article-content .cgcs-key span { display: inline-flex; align-items: center; gap: 7px; }
.cgc-article-content .cgcs-key i { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.cgc-article-content .cgcs-key .cgcs-key__unit { font-weight: 400; color: #5c5c5c; }
.cgc-article-content .cgcs-m { background: var(--cgc-teal); }
.cgc-article-content .cgcs-f { background: var(--cgc-purple); }
.cgc-article-content .cgcs-age__row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #e3e3e3; }
.cgc-article-content .cgcs-age__label { font-size: 15px; font-weight: 600; }
.cgc-article-content .cgcs-age__bar { display: flex; align-items: center; gap: 8px; height: 20px; }
.cgc-article-content .cgcs-age__bars { display: grid; gap: 3px; padding-right: 48px; }
.cgc-article-content .cgcs-age__fill { display: block; height: 16px; border-radius: 0 2px 2px 0; flex: none; max-width: 100%; }
.cgc-article-content .cgcs-age__val { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Trend */
.cgc-article-content .cgcs-trend { margin: 20px 0 8px; max-width: 800px; }
.cgc-article-content .cgcs-trend svg { display: block; width: 100%; height: auto; }
.cgcs-t-grid { stroke: #dcdcdc; stroke-width: 1; }
.cgcs-t-ax { font-size: 14px; fill: #5c5c5c; }
.cgcs-t-p, .cgcs-t-c { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.cgcs-t-p { stroke: var(--cgc-purple); }
.cgcs-t-c { stroke: var(--cgc-teal); }
.cgcs-t-p-dot { fill: var(--cgc-purple); }
.cgcs-t-c-dot { fill: var(--cgc-teal); }
.cgcs-t-lab { font-size: 16px; font-weight: 700; }
.cgcs-t-lab--p { fill: var(--cgc-purple); }
.cgcs-t-lab--c { fill: var(--cgc-teal); }
.cgcs-t-sub { font-size: 13px; fill: #5c5c5c; }

/* Tile map */
.cgc-article-content .cgcs-map { display: grid; grid-template-columns: minmax(0, 520px) minmax(220px, 1fr); gap: 32px; align-items: start; margin: 20px 0 10px; }
.cgc-article-content .cgcs-map__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.cgc-article-content button.cgcs-tile { appearance: none; aspect-ratio: 1; min-width: 0; width: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 3px; font: 700 13px/1 inherit; letter-spacing: 0; cursor: pointer; box-shadow: none; transform: none; }
.cgc-article-content button.cgcs-tile:hover, .cgc-article-content button.cgcs-tile.is-on { outline: 2px solid #111; outline-offset: 1px; z-index: 1; }
.cgc-article-content button.cgcs-tile:focus-visible { outline: 3px solid #111; outline-offset: 2px; z-index: 1; }
.cgc-article-content .cgcs-c0 { background: #e4f0ec; color: #17332e; }
.cgc-article-content .cgcs-c1 { background: #bcd9cf; color: #17332e; }
.cgc-article-content .cgcs-c2 { background: #86b7a7; color: #10241f; }
.cgc-article-content .cgcs-c3 { background: #3c7c6c; color: #fff; }
.cgc-article-content .cgcs-c4 { background: #1d4840; color: #fff; }
.cgc-article-content .cgcs-map__side { position: sticky; top: 90px; }
.cgc-article-content .cgcs-map__read { padding-bottom: 14px; border-bottom: 1px solid #cfcfcf; }
.cgc-article-content .cgcs-map__read p { margin: 0; }
.cgc-article-content .cgcs-map__code { font-size: 15px; font-weight: 700; color: #5c5c5c; }
.cgc-article-content .cgcs-map__name { font-size: 24px; font-weight: 800; color: var(--cgc-teal); line-height: 1.2; }
.cgc-article-content .cgcs-map__rate { margin-top: 6px; font-size: 16px; }
.cgc-article-content .cgcs-map__rate strong { font-size: 34px; line-height: 1.1; color: var(--cgc-teal); font-variant-numeric: tabular-nums; margin-right: 4px; }
.cgc-article-content .cgcs-map__count { font-size: 15px; color: #5c5c5c; }
.cgc-article-content .cgcs-map__hint { margin: 8px 0 18px; font-size: 14px; color: #5c5c5c; }
.cgc-article-content .cgcs-legend__t { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.cgc-article-content ul.cgcs-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
.cgc-article-content .cgcs-legend li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.cgc-article-content .cgcs-legend li::before { content: none; }
.cgc-article-content .cgcs-legend i { display: block; width: 18px; height: 18px; border-radius: 2px; flex: none; }
.cgc-article-content .cgcs-map__nat { margin: 12px 0 0; font-size: 14px; }

/* Lookup */
.cgc-article-content .cgcs-look { margin: 12px 0 18px; max-width: 520px; }
.cgc-article-content .cgcs-look label { display: block; margin-bottom: 6px; font-weight: 700; }
.cgc-article-content .cgcs-look__row { display: flex; gap: 8px; }
.cgc-article-content .cgcs-look input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid #8a8a8a; border-radius: 6px; background: #fff; font: inherit; font-size: 17px; text-transform: uppercase; }
.cgc-article-content .cgcs-look input::placeholder { text-transform: none; color: #6a6a6a; }
.cgc-article-content button.cgcs-look__go { height: 46px; padding: 0 20px; border: 0; border-radius: 6px; background: var(--cgc-purple); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.cgc-article-content p.cgcs-look__out { margin: 12px 0 0; min-height: 1.5em; }

@media (max-width: 760px) {
	.cgc-article-content .cgcs-two { grid-template-columns: 1fr; gap: 0; }
	/* The readout stays on screen while the tiles scroll under it. */
	.cgc-article-content .cgcs-map { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.cgc-article-content .cgcs-map__side { display: contents; }
	.cgc-article-content .cgcs-map__read { position: sticky; top: 0; z-index: 2; order: -2; padding: 10px 0; background: #f2fbdd; }
	.cgc-article-content .cgcs-map__hint { order: -1; margin: 0; }
	.cgc-article-content .cgcs-map__name { font-size: 20px; }
	.cgc-article-content .cgcs-map__rate strong { font-size: 26px; }
	.cgc-article-content ul.cgcs-legend { grid-template-columns: 1fr 1fr; }
	.cgc-article-content button.cgcs-tile { font-size: 11px; }
	.cgc-article-content .cgcs-map__grid { gap: 2px; }
	.cgc-article-content .cgcs-table table { font-size: 14px; }
	.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { padding: 8px 9px; }
	.cgc-article-content .cgcs-age__row { grid-template-columns: 76px 1fr; }
	.cgc-article-content .cgcs-age__label { font-size: 14px; }
}
/* Guide additions. The site colours come from cgc-page-templates, which guides don't load. */
.cgc-article-content { --cgc-teal: #24544c; --cgc-purple: #5a3a6d; }
.cgc-article-content p.cgcs-byline { margin: 0 0 22px; font-size: 15px; color: #5c5c5c; }
.cgc-article-content p.cgcs-src, .cgc-article-content p.cgcs-note { margin-top: -6px; }
.cgc-article-content ul.cgcs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 26px; }
.cgc-article-content ul.cgcs-facts li { margin: 0; padding: 14px 16px; border: 1px solid #e3e3e3; border-radius: 8px; background: #fff; font-size: 15px; line-height: 1.45; }
.cgc-article-content ul.cgcs-facts li::before { content: none; }
.cgc-article-content ul.cgcs-facts li strong { display: block; font-size: 15px; }
.cgc-article-content ul.cgcs-facts li em { display: block; margin: 2px 0 4px; font-style: normal; font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--cgc-teal); font-variant-numeric: tabular-nums; }
.cgc-article-content ul.cgcs-facts li a { color: inherit; }
.cgc-article-content .cgcs-table table { margin: 0; }
.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { border-width: 0 0 1px; }
.cgc-article-content div.cgcs-more > .cgcs-table { max-height: 520px; overflow-y: auto; }
/* The guide column is narrower than the landing page's rail: tighter cells and wrapping headings keep tables inside it. */
.cgc-article-content .cgcs-table table { font-size: 15px; }
.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { padding: 9px 10px; }
.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table th.cgcs-r { white-space: normal; vertical-align: bottom; }
/* Wrap headings at spaces only, never mid-word (the article CSS breaks words in table cells). */
.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { word-break: normal; overflow-wrap: normal; hyphens: none; }
.cgc-article-content .cgcs-age__bars { padding-right: 60px; }
/* Breathing space between the blocks (Ian, 9 Nov 2026): legend, chart, table, source line, next heading. Margins only. */
.cgc-article-content .cgcs-key { margin-bottom: 22px; }
.cgc-article-content .cgcs-age, .cgc-article-content .cgcs-trend, .cgc-article-content .cgcs-map { margin: 32px 0 36px; }
.cgc-article-content .cgcs-table { margin: 32px 0 16px; }
.cgc-article-content .cgcs-two { margin: 32px 0 0; }
.cgc-article-content .cgcs-two .cgcs-table { margin-top: 0; }
.cgc-article-content .cgcs-look { margin: 32px 0 32px; }
.cgc-article-content .cgcs-more, .cgc-article-content details.cgcs-more { margin: 28px 0 24px; }
.cgc-article-content p.cgcs-src, .cgc-article-content p.cgcs-note { margin: 14px 0 40px; }
.cgc-article-content ul.cgcs-facts { margin-bottom: 36px; }
/* Less space between the author bar and the first section (Ian, 9 Nov 2026). Other guides fill it with the green At A Glance box.
   guide.css only loads on this guide, so the header rule touches no other page. */
.cgc-article-template .cgc-article-header { margin-bottom: 4px; }
.cgc-article-content > h2:first-child { margin-top: 0; }
/* Header rows (Ian, 9 Nov 2026): short headings stay on one line above phone width, all bottom-aligned, so side-by-side tables line up. */
.cgc-article-content .cgcs-table thead th { vertical-align: bottom; }
@media (min-width: 641px) {
	.cgc-article-content .cgcs-table thead th, .cgc-article-content .cgcs-table thead th.cgcs-r { white-space: nowrap; }
}
@media (max-width: 640px) {
	.cgc-article-content ul.cgcs-facts { grid-template-columns: minmax(0, 1fr); }
	.cgc-article-content .cgcs-age, .cgc-article-content .cgcs-trend, .cgc-article-content .cgcs-map { margin: 26px 0 28px; }
	.cgc-article-content .cgcs-table { margin-top: 26px; }
	.cgc-article-content p.cgcs-src, .cgc-article-content p.cgcs-note { margin-bottom: 32px; }
	.cgc-article-content .cgcs-table table { font-size: 13px; }
	.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { padding: 7px 5px; }
	.cgc-article-content .cgcs-table th:first-child, .cgc-article-content .cgcs-table td:first-child { padding-left: 2px; }
	.cgc-article-content .cgcs-table--short td:first-child, .cgc-article-content .cgcs-table--short th:first-child { white-space: normal; }
	.cgc-article-content .cgcs-table th, .cgc-article-content .cgcs-table td { padding-right: 4px; padding-left: 4px; }
}