/* Strature GPS phase 1: the event risk hubs /gps/risks/<slug>/ and the Risks index /gps/risks/ (owner WP4;
   sitebuild/hubs/risk.py, risks_index.py). On top of pages-hub.css; site tokens only. Phone first (W-115): one column
   at 375 px, nothing wider than the screen, tap targets at least 44 px. Copied into www/ only with site.config.json
   phase1.hubs on (sitebuild/hubs/__init__.py skip_asset). The region filter needs no script: radios and :has(). */

.hb[data-hub-kind="risk"],.hb[data-hub-kind="index"]{--hrH:var(--navy);--hrM:#4F6F91;--hrL:#93A9C0;--hr0:#E4E1DA;--hrHost:var(--verm)}

/* R2: the In short line, one size down on the phone so the first card's headline stays on the first screen (W-115) */
@media (max-width:767px){
  .hb[data-hub-kind="risk"] .hb-take{font-size:17px;line-height:1.45}
  /* the folded "Using this page" line takes the breadcrumb row's right end (howto.js): the type label gives way */
  .hb-crumb.ht-crumb .hb-type{display:none}
}

/* R5: who is exposed */
.hr-reach{font-family:var(--sans);font-size:15px;line-height:1.45;margin:0 0 6px}
.hr-tag{font-family:var(--sans);font-size:12px;color:var(--graphite)}
.hr-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
.hr-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 0;border-top:1px solid var(--hair);min-width:0}
.hr-cn{flex:1 1 9ch;min-width:0;font-family:var(--sans);font-weight:600;font-size:15px;padding:6px 0;overflow-wrap:anywhere}
.hr-b{display:inline-block;flex:0 0 auto;font:600 11.5px/1 var(--sans);letter-spacing:.04em;padding:4px 7px;color:#fff;background:var(--hr0)}
.hr-b.b-H{background:var(--hrH)}.hr-b.b-M{background:var(--hrM)}.hr-b.b-L{background:var(--hrL);color:var(--ink)}
.hr-b.b-host{background:var(--hrHost)}.hr-b.b-0{color:var(--ink)}
.hr-chs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px}
.hr-ch{display:inline-block;font:500 11.5px/1.2 var(--sans);padding:3px 6px;border:1px solid var(--hair);background:var(--knockout);color:var(--ink)}
.hr-ch.b-H{border-color:var(--hrH)}.hr-ch.b-M{border-color:var(--hrM)}.hr-ch.b-L{border-style:dashed}
.hr-more{margin-top:4px;border-top:1px solid var(--hair)}
.hr-more > summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 14px/1.2 var(--sans);text-decoration:underline;text-underline-offset:3px}
.hr-eu{margin-top:12px}

/* the region filter (no script): rows outside the chosen region hide */
.hr-rf{border:0;margin:10px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.hr-rl{font:600 11.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);padding:0;margin-bottom:4px;width:100%}
.hr-ro{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;font:500 13px/1.2 var(--sans);
  border:1px solid var(--hair);background:var(--knockout);cursor:pointer;max-width:100%}
.hr-ro input{margin:0;accent-color:var(--navy)}
.hr-ro:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.hr-ro:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.hr-filt:has(input[value="1"]:checked) [data-rg]:not([data-rg~="1"]),
.hr-filt:has(input[value="2"]:checked) [data-rg]:not([data-rg~="2"]),
.hr-filt:has(input[value="3"]:checked) [data-rg]:not([data-rg~="3"]),
.hr-filt:has(input[value="4"]:checked) [data-rg]:not([data-rg~="4"]),
.hr-filt:has(input[value="5"]:checked) [data-rg]:not([data-rg~="5"]),
.hr-filt:has(input[value="6"]:checked) [data-rg]:not([data-rg~="6"]),
.hr-filt:has(input[value="7"]:checked) [data-rg]:not([data-rg~="7"]),
.hr-filt:has(input[value="8"]:checked) [data-rg]:not([data-rg~="8"]){display:none}

/* R4: the forecast box, grouped by question */
.hr-q{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--hair)}
.hr-qt{font-size:16px;line-height:1.45;margin:4px 0 6px;max-width:var(--measure)}
.hr-q .fl-list{padding-left:0}
.hr-q .fcr{overflow-wrap:anywhere}

/* R6: goods and chokepoints, channels */
.hr-touch,.hr-chans,.hr-watch,.hr-review,.hr-briefs,.hr-scns,.hr-cards{list-style:none;margin:8px 0 0;padding:0}
.hr-touch,.hr-chans{display:flex;flex-wrap:wrap;gap:6px}
.hr-tc{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;font:600 14px/1.2 var(--sans);
  border:1px solid var(--navy);background:var(--knockout);color:var(--ink);text-decoration:none}
span.hr-tc{border-color:var(--hair);font-weight:500}
.hr-tk{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);font-weight:600}
.hr-cc{font:500 13px/1.2 var(--sans);padding:6px 8px;border:1px solid var(--hair);background:var(--knockout)}

/* R7, R8: what to watch, questions firms review */
.hr-watch li,.hr-review li{padding:8px 0;border-top:1px solid var(--hair);max-width:var(--measure)}
.hr-when{display:block;font:600 12.5px/1.3 var(--sans);letter-spacing:.04em;color:var(--graphite)}
.hr-review li::before{content:"?";display:inline-block;width:1.2em;font-family:var(--sans);font-weight:700;color:var(--graphite)}

/* R9: every country read */
.hr-tbl{overflow-x:auto;max-width:100%}
.hr-tbl table{min-width:0;width:100%}
.hr-tbl td,.hr-tbl th{vertical-align:top}

/* R10, scenario cases; R11 briefs */
.hr-scn{padding:10px 0;border-top:1px solid var(--hair)}
.hr-sh{font-size:17px;line-height:1.3;margin:0 0 4px}
.hr-sh a{text-decoration:underline;text-underline-offset:3px}
.hr-briefs li{padding:6px 0}

/* the Risks index cards */
.hr-cards{display:grid;gap:10px}
.hr-card{padding:12px;border:1px solid var(--hair);background:var(--knockout);min-width:0}
.hr-kh{font-size:19px;line-height:1.25;margin:0}
.hr-kh a{text-decoration:none}
.hr-kh a:hover{text-decoration:underline}
.hr-ks{margin:6px 0 0;font-size:15.5px;line-height:1.45}
.hr-card .hb-status{margin-top:8px}
.hr-near{margin-top:6px}

@media (min-width:768px){
  .hr-row{flex-wrap:nowrap}
  .hr-chs{flex-basis:auto;flex:1 1 auto;justify-content:flex-end}
  .hr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media print{
  .hr-rf{display:none}
  .hr-filt [data-rg]{display:revert!important}
  .hr-b{border:1px solid #000;color:#000;background:none}
}