/* HEALTH extras: sparklines, plain-language meaning, COUNTRY RISK CARD. Real official data, so a calm teal/pink-neutral palette (SIM owns the fiction look). */
.hx{--hxc:var(--m-pink)}
.hx-mean{font-size:11.5px;line-height:1.55;color:var(--ink);border-left:2px solid var(--hxc);background:color-mix(in srgb,var(--m-pink) 6%,transparent);padding:8px 10px;margin:4px 0 6px}
.hx-why{font-size:11px;line-height:1.5;color:var(--dim);margin:4px 0 6px}.hx-why b{color:var(--cy2);font-weight:400;letter-spacing:.14em;font-size:9.5px;margin-right:6px}
.hx-tr{margin:6px 0 10px}
.hx-trh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10px;letter-spacing:.12em;color:var(--dim)}
.hx-trh b{color:var(--ink);font-weight:400;min-width:0;overflow-wrap:anywhere}
.hx-dir{color:var(--dim);white-space:nowrap}.hx-dir.up{color:var(--warn)}.hx-dir.dn{color:var(--ok)}
.hx-sp{display:block;width:100%;height:44px;color:var(--cy);margin:3px 0 2px;overflow:visible}
.hx-trf{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;color:var(--dim)}.hx-trf b{color:var(--cy2);font-weight:400}
.hx-cap{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--dim);line-height:1.5;margin:2px 0 6px}
.hx-cmp>div{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:6px 0;font-size:10px;letter-spacing:.1em;color:var(--dim)}
.hx-cmp i{grid-column:1/3;display:block;height:7px;background:var(--faint);max-width:100%}.hx-cmp i.now{background:var(--hxc)}
.hx-cmp b{color:var(--ink);font-weight:400;grid-row:1;grid-column:2}
.hx-src{display:flex;align-items:center;gap:7px;margin:14px 0 4px;font-size:9.5px;letter-spacing:.2em;color:var(--ok)}
.hx-src i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok);flex:none}
.hx-disc{font-size:9.5px;line-height:1.5;color:var(--dim);margin-bottom:8px}
.hx-acts{margin:8px 0}
/* country card */
.hx-flag{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hxc);color:var(--hxc);font:700 13px var(--mono);letter-spacing:.05em;flex:none}
.hx-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.hx-sum>div{border:1px solid var(--line);background:var(--panel);padding:7px 8px;min-width:0}
.hx-sum span:not(.hx-chip){display:block;font-size:10px;letter-spacing:.14em;color:var(--dim);margin-bottom:5px;line-height:1.3}
.hx-sum small{display:block;font-size:9.5px;color:var(--dim);margin-top:5px;line-height:1.3}
.hx-sum b{font:700 20px var(--hd);color:var(--cy2)}.hx-sum em{font-size:10px;color:var(--dim);font-style:normal}
.hx-chip{display:inline-block;border:1px solid var(--lc);color:var(--lc);background:color-mix(in srgb,var(--lc) 12%,transparent);padding:1px 7px;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.hx-it{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--line2);background:var(--panel);padding:7px 8px;margin:0 0 5px;color:var(--ink);cursor:pointer}
.hx-it:hover,.hx-it:focus-visible{border-color:var(--cy);background:color-mix(in srgb,var(--cy) 7%,transparent)}
.hx-itx{min-width:0;display:block}.hx-itx b{display:block;font-weight:400;font-size:11.5px;line-height:1.35;overflow-wrap:anywhere}.hx-itx small{display:block;font-size:9.5px;color:var(--dim);margin-top:2px;letter-spacing:.08em}
.hx-dot{width:6px;height:6px;border-radius:50%;background:var(--hxc);margin:6px 4px 0 3px;flex:none}
.hx-none{font-size:10px;letter-spacing:.14em;color:var(--faint);padding:4px 0 6px}
.hx-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:5px}
.hx-pick button{border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:6px 7px;font-size:11px;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-pick button:hover,.hx-pick button:focus-visible{border-color:var(--cy);color:var(--cy2)}
/* left box */
.hx-box{margin:10px 0 6px;border:1px solid var(--line);background:color-mix(in srgb,var(--m-pink) 5%,transparent);padding:9px 10px}
.hx-box .fl{display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.16em;color:var(--dim);margin-bottom:7px}.hx-box .fl b{color:var(--cy2);font-weight:400;text-align:right}
.hx-row{display:flex;gap:6px}
.hx-row input{flex:1;min-width:0;height:36px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:0 9px;font:12px var(--mono);letter-spacing:.06em}
.hx-row input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 0 1px color-mix(in srgb,var(--cy) 25%,transparent)}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .hx-sum{grid-template-columns:1fr 1fr}.hx-sum>div:last-child{grid-column:1/3}
  .hx-row input{font-size:16px;height:42px}.hx-row .btn,.hx-box .btn.sm{min-height:42px}
  .hx-it{padding:10px 9px}.hx-pick{grid-template-columns:1fr 1fr}.hx-pick button{padding:11px 8px;font-size:12px}
  .hx-mean{font-size:12px}.hx-acts .btn{min-height:42px}
  .hx-box .fl b{display:none} /* the 4-agency list wrapped the title to two lines; the card itself names the sources */
}
/* UX sweep tab-extras: 44px touch targets */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .hx-row input,.hx-row .btn,.hx-box .btn.sm,.hx-acts .btn{min-height:44px;height:auto}
  .hx-row input{height:44px}
}
/* light mode (CJ 10/13 polish): level chips are data colors, pulled toward ink on paper */
html[data-theme="light"] .hx-chip{color:color-mix(in srgb,var(--lc) 58%,var(--ink))}

/* CJ 10/13: sparkline colour is a var so light mode can deepen pale data colours (yellow/lime were faint on white) */
.hx-sp{--sc:var(--c)} html[data-theme="light"] .hx-sp{--sc:color-mix(in srgb,var(--c) 50%,var(--ink))}