/* The top-risks map /gps/top-risks/ (sitebuild/rane/toprisks.py, toprisks.js). Site tokens and .wrap, .lbl, .sr,
   .fine from site.css; the card, the static cards and the chevron from riskcard.css. Phone first (375 px): no
   sideways scroll, 44 px targets, every colour repeated by a number, a word or a shape. */
.tr{padding:12px 0 40px}
.tr .wrap{overflow-x:clip}
.tr-top{padding:2px 0 8px;border-bottom:1px solid var(--ink)}
.tr-top h1{font:500 26px/1.12 var(--serif);margin:2px 0 4px}
.tr-asof{font:400 12px/1.5 var(--mono);color:var(--graphite);margin:0}
.tr-draft-note{margin:6px 0 0;padding:5px 9px;border-left:3px solid var(--verm);background:var(--tint);font-size:13px;line-height:1.35}
@media (max-width:520px){.tr-top h1{font-size:22px}}

.tr-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--hair);margin-top:6px}
.tr-tab{background:none;border:0;border-bottom:3px solid transparent;padding:6px 3px 5px;cursor:pointer;text-align:left;min-height:44px;color:var(--ink);font-family:var(--sans);min-width:0}
.tr-tab .l{display:block;font:400 11px/1.2 var(--mono);color:var(--graphite)}
.tr-tab .n{display:block;font-weight:600;font-size:13.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-tab[aria-selected="true"]{border-bottom-color:var(--verm)}
.tr-tab[aria-selected="true"] .l{color:var(--verm)}
.tr-tab:focus-visible{outline:2px solid var(--verm);outline-offset:-2px}
@media (max-width:520px){.tr-tab .n{font-size:12px}}

.tr-controls{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--hair)}
.tr-controls[hidden]{display:none}
.tr-sel{display:inline-flex;align-items:center;gap:6px;font-size:13px;min-width:0}
.tr-sel select{min-height:44px;max-width:100%;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:400 13px var(--sans);padding:0 6px}
.tr-controls .tr-sel{flex:1 1 140px}
.tr-controls .tr-sel select{width:100%}
.tr-switch{display:inline-flex;align-items:center;gap:6px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:6px 10px;min-height:44px;cursor:pointer;font:500 13px var(--sans)}
.tr-switch[aria-pressed="false"]{color:var(--graphite);border-color:var(--hair)}
.tr-switch .state{font:400 11px var(--mono)}
.tr-count{font:400 12px var(--mono);color:var(--graphite)}

.tr-panel{padding-top:8px}
.tr-panel[hidden]{display:none}
.tr-stage{width:100%;min-height:120px}
.tr-stage svg,.tr-sheet svg.tr-map{display:block;max-width:100%;height:auto}
.tr-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-size:12px;color:var(--graphite)}
.tr-legend .it{display:inline-flex;align-items:center;gap:5px}
.tr-legend svg{flex:none;overflow:visible}
.tr-sheet{margin-top:8px}
.tr-sheet h3{font:500 17px/1.25 var(--serif);margin:6px 0 2px}
.tr-sheet h3:focus{outline:none}
.tr-hint{font-size:13px;color:var(--graphite);margin:2px 0 6px}
.tr-none{color:var(--graphite);font-size:14px;padding:10px 0}
.tr-btn,.tr-chip{background:var(--paper);border:1px solid var(--hair);min-height:44px;padding:4px 10px;cursor:pointer;font:400 13px var(--sans);color:var(--ink)}
.tr-chips{display:flex;flex-wrap:wrap;gap:6px}
.tr-chip .c{font:400 11px var(--mono);color:var(--graphite)}
.tr-alt{margin-top:10px;border-top:1px solid var(--hair);padding-top:6px}
.tr-alt summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:500 13.5px var(--sans)}
.tr-gh{font:600 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:10px 0 4px}
.tr-empty{border-left:3px solid var(--graphite);padding:8px 10px;background:var(--tint);font-size:14px}

/* the map */
.tr-sphere{fill:var(--paper);stroke:var(--hair)}
.tr-c{fill:var(--tint);stroke:var(--paper);stroke-width:.5;vector-effect:non-scaling-stroke}
.tr-c.b-h{fill:var(--coral);fill-opacity:.75}
.tr-c.b-m{fill:var(--coral);fill-opacity:.38}
.tr-c.b-l{fill:var(--hair)}
.tr-c.b-k{fill:var(--navy);fill-opacity:.28}
.tr-glow .tr-c.g1{fill:var(--navy);fill-opacity:.16}
.tr-glow .tr-c.g2{fill:var(--navy);fill-opacity:.32}
.tr-glow .tr-c.g3{fill:var(--navy);fill-opacity:.5}
.tr-glow .tr-c.g4{fill:var(--navy);fill-opacity:.72}
.tr-c.tap{cursor:pointer}
.tr-c.pick{stroke:var(--verm);stroke-width:2}
.tr-sw{stroke:var(--hair)}
.tr-sw.b-h{fill:var(--coral);fill-opacity:.75}.tr-sw.b-m{fill:var(--coral);fill-opacity:.38}.tr-sw.b-l{fill:var(--hair)}.tr-sw.b-k{fill:var(--navy);fill-opacity:.28}
.tr-sw.g1{fill:var(--navy);fill-opacity:.16}.tr-sw.g2{fill:var(--navy);fill-opacity:.32}.tr-sw.g3{fill:var(--navy);fill-opacity:.5}.tr-sw.g4{fill:var(--navy);fill-opacity:.72}
.tr-hit{fill:transparent}
.tr-ring{fill:none;stroke:transparent}
.tr-mark{cursor:pointer;outline:none}
.tr-mark.on .tr-ring,.tr-mark:focus-visible .tr-ring{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tr-mark.fade{opacity:.25}
.tr-disc{fill:var(--paper);stroke:var(--navy)}
.tr-disc.prov{stroke-dasharray:2 2}
.tr-legend .tr-disc{stroke-width:1}
.tr-arc{fill:none;stroke:var(--verm);stroke-linecap:butt}
.tr-rk{font-family:var(--mono);fill:var(--ink);text-anchor:middle}
.tr-cm-bg{fill:var(--paper)}
.tr-up{fill:var(--verm)}.tr-down{fill:var(--navy)}.tr-same{fill:var(--graphite)}.tr-new{fill:var(--ink)}
.tr-adot{fill:var(--ink)}
.tr-lead{stroke:var(--ink);stroke-opacity:.6}
.tr-dia{fill:var(--paper);stroke:var(--ink)}
.tr-str{cursor:pointer;outline:none}
.tr-str.on .tr-dia,.tr-str:focus-visible .tr-dia{fill:var(--verm)}
.tr-str.on .tr-num,.tr-str:focus-visible .tr-num{fill:var(--paper)}
.tr-num{font-family:var(--mono);fill:var(--ink);text-anchor:middle;pointer-events:none}
.tr-link-l{fill:none;stroke:var(--navy);stroke-opacity:.45;stroke-linecap:round}
.tr-link-l.on{stroke:var(--verm);stroke-opacity:.9}
.tr-opp{cursor:pointer;outline:none}
.tr-chev-bg{fill:var(--paper);fill-opacity:.85}
.tr-chev{fill:none;stroke:var(--verm);stroke-linecap:round;stroke-linejoin:round}
.tr-opp:focus-visible .tr-chev-bg{fill:var(--tint);stroke:var(--ink)}
.tr-olist{list-style:none;margin:4px 0 0;padding:0}
.tr-olist li{border-bottom:1px solid var(--hair);padding:6px 0;font-size:13.5px}
.tr-olist .tr-link{display:block;margin-top:4px}

/* D: the chart */
.tr-q{fill:var(--tint)}
.tr-ax{stroke:var(--ink)}
.tr-mid{stroke:var(--hair)}
.tr-tick{font:400 10px var(--mono);fill:var(--graphite)}
.tr-qlbl{font:400 10.5px var(--sans);fill:var(--graphite)}
.tr-small{margin:6px 0}
.tr-sheet .tr-sel{display:flex;flex-wrap:wrap;margin:4px 0}
/* E: the radar */
.tr-r1{fill:var(--paper);stroke:var(--hair)}
.tr-r2{fill:var(--tint);stroke:var(--hair)}
.tr-now{fill:var(--ink)}
.tr-nowt{font:400 9px var(--mono);fill:var(--paper);text-anchor:middle}
.tr-reg{cursor:pointer;outline:none}
.tr-reg text{font:400 11.5px var(--sans);fill:var(--ink);text-anchor:middle}
.tr-reg.empty text{fill:var(--graphite)}
.tr-reg.on text{font-weight:600}
.tr-reg:focus-visible .tr-hit{stroke:var(--verm);stroke-width:2}

/* lists */
.tr-rows{list-style:none;margin:0;padding:0}
.tr-row{display:grid;grid-template-columns:34px 1fr auto;gap:6px;align-items:start;width:100%;min-height:44px;background:none;border:0;border-bottom:1px solid var(--hair);padding:6px 0;text-align:left;cursor:pointer;color:var(--ink);font:400 14px/1.3 var(--sans)}
.tr-row .rk{font:500 13px var(--mono);color:var(--verm)}
.tr-row .mt{display:block;font:400 11.5px/1.35 var(--mono);color:var(--graphite);margin-top:2px}
.tr-row .pp{font:500 15px var(--mono)}
.tr-tbl{border-collapse:collapse;width:100%;font-size:13px;table-layout:fixed}
.tr-tbl th,.tr-tbl td{border-bottom:1px solid var(--hair);padding:5px 4px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.tr-tbl th:first-child,.tr-tbl td:first-child{width:32px}
.tr-tbl .n{font-family:var(--mono);white-space:nowrap}
.tr-sub{display:block;font:400 11px var(--mono);color:var(--graphite)}
.tr-link{background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;text-align:left;cursor:pointer;color:var(--navy);text-decoration:underline;font:inherit}
/* phone: the risk table drops Resolves (5th), never Reach, the figure the view plots; the date moves under the title */
.tr-res{display:none}
@media (max-width:520px){.tr-tbl th:nth-child(5),.tr-tbl td:nth-child(5){display:none}.tr-res{display:inline}}
.tr-tabs[hidden]{display:none}

.tr-list{margin-top:14px}
.tr-lh{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin:0 0 8px}
.tr-key{margin-top:18px;border-top:1px solid var(--ink);padding-top:8px}
.tr-key h2{font:500 18px var(--serif);margin:0 0 4px}
.tr :focus-visible{outline:2px solid var(--verm);outline-offset:2px}
.tr-first{margin:8px 0 0}
.tr-first .rc-static{margin:0;padding:6px 10px;border-top-width:2px}
.tr-first .rc-sh{font-size:16px;margin:2px 0}
.tr-first .rc-open{margin-top:4px;min-height:44px}
@media (max-width:520px){.tr-controls .tr-sel{flex:1 1 40%}}
@media (max-width:520px){.tr-reg text{font-size:10.5px}}