/* Cajas by the numbers. A reading page: rankings in the content columns, the
   all-at-once chart and the sources in the apparatus column. Lakes are azul
   cúpula, summits verde (as on the map), the selected place teja. */

.cajas-numbers-page .cn-header h1 { margin-bottom:var(--s-3); }
.cajas-numbers-page .cn-header .g-lede { margin:0; }

/* Records: the four superlatives, each a way into its ranking. */
.cn-records { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:var(--s-6) 0 0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.cn-record { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-1); min-width:0; min-height:var(--hit); padding:var(--s-3) var(--s-4) var(--s-4); border:0; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); border-radius:var(--radius); background:var(--lime-raised); color:var(--ink); text-align:left; cursor:pointer; }
.cn-record:hover { background:var(--lime); }
.cn-record small { font:700 var(--t-label)/var(--lh-dense) var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-3); }
.cn-record strong { font:800 var(--t-title)/var(--lh-title) var(--display); letter-spacing:var(--track-display); font-variant-numeric:tabular-nums; }
.cn-record span { font:var(--t-dense)/var(--lh-dense) var(--sans); overflow-wrap:anywhere; }
.cn-record[aria-pressed=true] { background:var(--stone-panel); color:var(--ink-inverse); }
.cn-record[aria-pressed=true] small { color:var(--celeste-pale); }
.cn-record:focus-visible { outline:3px solid var(--celeste); outline-offset:-4px; }

/* The switch stays in reach while the list scrolls. */
.cn-switch { position:sticky; top:0; z-index:4; display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:var(--s-2) var(--s-3); margin:var(--s-5) 0 0; padding:var(--s-3) 0; background:var(--lime); border-bottom:1px solid var(--rule); }
.cn-switch .g-segmented { flex-wrap:nowrap; }
.cn-switch .g-segmented>.g-button { flex:none; white-space:nowrap; }
.cn-layout { margin-top:var(--s-5); }
.cn-ranking h2,.cn-chart-title { margin:0; }
.cajas-numbers-page .cn-ranking .g-note,.cajas-numbers-page .cn-figure .g-note { margin:var(--s-2) 0 0; }

/* Ranking rows: rank, name, value, and a bar or a position on the height scale. */
.cn-list { list-style:none; margin:var(--s-4) 0 0; padding:0; border-top:2px solid var(--rule-strong); }
.cn-list>li { border-bottom:1px solid var(--rule); }
.cn-row { display:grid; grid-template-columns:var(--s-7) minmax(0,1fr) auto var(--s-5); align-items:baseline; gap:var(--s-2); width:100%; min-height:var(--hit); padding:var(--s-3) 0; border:0; border-radius:var(--radius); background:var(--clear); color:var(--ink); text-align:left; cursor:pointer; }
.cn-row:hover .cn-name { color:var(--celeste); }
.cn-row:focus-visible { outline:3px solid var(--celeste); outline-offset:2px; }
.cn-rank { font:700 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-3); font-variant-numeric:tabular-nums; }
.cn-name { min-width:0; font:700 var(--t-body)/var(--lh-head) var(--sans); overflow-wrap:anywhere; }
.cn-name small { display:block; margin-top:var(--s-1); font:400 var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-3); }
.cn-value { font:700 var(--t-body)/var(--lh-dense) var(--sans); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.cn-chevron { width:20px; height:20px; align-self:center; color:var(--ink-3); }
.cn-row[aria-expanded=true] .cn-rank,.cn-row[aria-expanded=true] .cn-chevron { color:var(--ochre); }
.cn-track { grid-column:2/4; position:relative; height:6px; background:var(--lime-sunken); }
.cn-track i { position:absolute; top:0; bottom:0; left:0; width:var(--at); background:var(--celeste); }
.cn-track.cn-dot { height:2px; margin:var(--s-1) 0; }
.cn-track.cn-dot i { top:50%; left:var(--at); width:10px; height:10px; border-radius:50%; background:var(--celeste); transform:translate(-50%,-50%); }
.cn-track.cn-dot.peak i { border-radius:var(--radius); width:12px; height:11px; background:var(--verde); clip-path:polygon(50% 0,100% 100%,0 100%); }
.cn-more { display:flex; justify-content:center; margin-top:var(--s-4); }

/* An open row: picture, locator, facts, name meaning, actions. */
.cn-detail { display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--s-3) var(--s-4); padding:0 0 var(--s-5) var(--s-7); }
.cn-photo { grid-column:1/-1; margin:0; }
.cn-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.cn-photo figcaption { margin-top:var(--s-1); font:var(--t-micro)/var(--lh-dense) var(--sans); color:var(--ink-3); }
.cn-locator { display:block; width:112px; height:auto; background:var(--lime-sunken); }
.cn-loc-lakes { fill:var(--celeste-mid); fill-opacity:.6; }
.cn-loc-peaks { fill:var(--verde); }
.cn-loc-ring { fill:none; stroke:var(--action); stroke-width:2; }
.cn-loc-here { fill:var(--action); }
.cn-loc-scale { stroke:var(--ink-2); stroke-width:1.5; }
.cn-loc-text { font:700 var(--t-label)/1 var(--sans); letter-spacing:var(--track-label); fill:var(--ink-2); }
.cn-facts { display:grid; gap:var(--s-2); margin:0; }
.cn-facts div { display:flex; justify-content:space-between; gap:var(--s-2); padding-bottom:var(--s-1); border-bottom:1px solid var(--lime-sunken); }
.cn-facts dt { font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.cn-facts dd { margin:0; font:700 var(--t-dense)/var(--lh-dense) var(--sans); font-variant-numeric:tabular-nums; text-align:right; }
.cn-facts dd span { display:block; font-weight:400; color:var(--ink-3); }
.cajas-numbers-page .cn-meaning { grid-column:1/-1; margin:0; font:var(--t-dense)/var(--lh-body) var(--sans); color:var(--ink-2); }
.cn-meaning b { display:block; font:700 var(--t-label)/var(--lh-dense) var(--sans); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ochre); }
.cn-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:var(--s-2); }

/* Chart: sticky beside the list on wide screens. */
.cn-apparatus { position:sticky; top:calc(var(--hit) + var(--s-6)); }
.cn-figure { margin:0; padding-top:var(--s-3); border-top:2px solid var(--rule-strong); }
.cn-chart-title { font:800 var(--t-sub)/var(--lh-head) var(--sans); }
.cn-chart { display:block; width:100%; height:auto; margin-top:var(--s-3); touch-action:manipulation; cursor:crosshair; }
.cn-ax { font:400 var(--t-dense)/1 var(--sans); fill:var(--ink-3); }
.cn-ax-title { font:600 var(--t-dense)/1 var(--sans); fill:var(--ink-2); }
.cn-grid { stroke:var(--lime-sunken); stroke-width:1; }
.cn-baseline { stroke:var(--ink); stroke-width:1; }
.cn-surface { stroke:var(--celeste); stroke-width:2; }
.cn-pt { fill:var(--celeste-mid); fill-opacity:.45; }
.cn-pt.top { fill:var(--celeste); fill-opacity:1; }
.cn-pt.peak { fill:var(--verde); fill-opacity:1; }
.cn-pt.sel { fill:var(--action); fill-opacity:1; stroke:var(--lime-raised); stroke-width:2; }
.cn-sel-label { font:700 var(--t-dense)/1 var(--sans); fill:var(--ink); paint-order:stroke; stroke:var(--lime); stroke-width:4px; stroke-linejoin:round; }
.cn-legend { display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-4); margin-top:var(--s-2); font:var(--t-dense)/var(--lh-dense) var(--sans); color:var(--ink-2); }
.cn-legend i { display:inline-block; width:10px; height:10px; margin-right:var(--s-2); border-radius:50%; background:var(--celeste); }
.cn-legend i.faint { background:var(--celeste-mid); opacity:.45; }
.cn-legend i.sel { background:var(--action); }
.cn-legend i.tri { border-radius:var(--radius); background:var(--verde); clip-path:polygon(50% 0,100% 100%,0 100%); }
.cn-picked { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-3); margin-top:var(--s-3); padding:var(--s-3); background:var(--lime-sunken); font:var(--t-dense)/var(--lh-dense) var(--sans); }
.cn-picked strong { display:block; font:700 var(--t-body)/var(--lh-head) var(--sans); }
.cn-picked .g-button { background:var(--lime-raised); }
.cn-apparatus .g-provenance { margin-top:var(--s-6); }

@media (max-width:900px) {
 .cn-records { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .cn-layout { display:block; }
 .cn-apparatus { position:static; margin-top:var(--s-6); }
}
@media (max-width:480px) {
 .cn-record { padding:var(--s-3); }
 .cn-detail { padding-left:0; }
 .cn-switch .g-segmented>.g-button { padding:var(--s-2); }
}