/* Layout extensions to the supplied Headcount components. No new colour or type palette. */
:root{--blue:var(--ink);--blue-text:var(--ink);--blue-wash:var(--wash-hover);--blue-wash-hover:var(--wash-pressed);--blue-ring:var(--border-strong);--focus:var(--ink)}
.charts-page{--gutter:var(--sp-4)}
.charts-page .pl-lead{margin-top:var(--sp-4)}
.charts-list{padding:0;margin:var(--sp-8) 0 0;list-style:none;border-top:1px solid var(--border)}
.charts-list li{border-bottom:1px solid var(--border)}
.charts-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;padding:var(--sp-6) 0;color:var(--ink);text-decoration:none}
.charts-preview{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:contain;background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-tag)}
.charts-row h2{font:600 var(--fs-body)/var(--lh-body) var(--font);letter-spacing:var(--ls-body);text-wrap:pretty}
.charts-row p{margin:var(--sp-2) 0 0;color:var(--ink-2);font:400 var(--fs-small)/var(--lh-small) var(--font)}
.charts-date{display:block;margin:var(--sp-2) 0 0;color:var(--ink-3);font:400 var(--fs-micro)/var(--lh-micro) var(--font)}
.charts-row-arrow{color:var(--ink-3);font:400 var(--fs-h3)/var(--lh-h3) var(--font)}
.charts-row:focus-visible{outline:2px solid var(--ink);outline-offset:var(--sp-1)}
@media(hover:hover){.charts-row:hover{background:var(--bg-soft)}.charts-row:hover h2{text-decoration:underline;text-underline-offset:var(--sp-1)}}
.charts-film{margin:var(--sp-8) 0 0;max-width:480px}
.charts-film video{display:block;width:100%;height:auto;aspect-ratio:4 / 5;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-control);object-fit:contain}
.charts-film figcaption{font:500 var(--fs-small)/var(--lh-small) var(--font);margin-top:var(--sp-2)}
.charts-film figcaption a{display:inline-flex;align-items:center;min-height:48px;color:var(--ink)}
/* The supplied media has coloured flags. Greyscale keeps this section within the requested palette. */
.charts-mono{filter:grayscale(1)}
.charts-source{max-width:var(--read);margin:var(--sp-4) 0 0;font:400 var(--fs-small)/var(--lh-small) var(--font);color:var(--ink-2)}
.charts-source a,.charts-notes a{color:var(--ink);text-underline-offset:var(--sp-1);overflow-wrap:anywhere}
.charts-summary{margin-top:var(--sp-6);max-width:var(--read)}
.charts-table{width:100%;table-layout:fixed}
.charts-table :is(th,td),.charts-table thead th{padding:var(--sp-2) var(--sp-4);min-width:0;max-width:none;overflow-wrap:anywhere}
.charts-table :is(th,td):first-child{position:static;width:50%;border-right:0}
.charts-table tbody th{font-weight:500}
.charts-table td small{margin-top:var(--sp-2);font-size:var(--fs-micro);line-height:var(--lh-micro)}
.charts-note{margin-top:var(--sp-4)}
.charts-subheading{margin:var(--sp-8) 0 0;font:600 var(--fs-h3)/var(--lh-h3) var(--font);letter-spacing:var(--ls-h3)}
.charts-censuses{max-width:var(--read);margin-top:var(--sp-6)}
.charts-census{border-top:1px solid var(--border);padding:var(--sp-2) 0}
.charts-census:last-child{border-bottom:1px solid var(--border)}
.charts-census>summary{padding:var(--sp-4) 0;font:600 var(--fs-body)/var(--lh-body) var(--font);cursor:pointer}
.charts-notes{padding:var(--sp-4) 0;font:400 var(--fs-small)/var(--lh-small) var(--font);color:var(--ink-2)}
.charts-notes summary{cursor:pointer;min-height:48px;padding:var(--sp-2) 0}
.charts-notes ul{padding-left:var(--sp-6);margin:var(--sp-2) 0}
.charts-notes li+li{margin-top:var(--sp-2)}
@media(min-width:600px){.charts-row{grid-template-columns:160px minmax(0,1fr) auto;gap:var(--sp-6)}.charts-row h2{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}}
@media(min-width:901px){.charts-page{--gutter:var(--sp-12)}.charts-film{max-width:none}.charts-film video{aspect-ratio:16 / 9}}