/* The World Map's front page (il-worldmap.js). Every colour is a token; the choropleth
   mixes --series-1 into the surface in five steps, so it follows the mood and the theme. */

.wm-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  margin-bottom: .6rem; }
.wm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wm-chip { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; }
.wm-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.wm-chip.on { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }
.wm-select { display: inline-flex; gap: 8px; align-items: center; }
.wm-select select { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); }

.wm-wrap { position: relative; }
/* The frame keeps the world's proportions whatever the zoom: a region's viewBox is narrower,
   and with height:auto the map would grow to fit it. */
.wm-svg { display: block; width: 100%; height: auto; max-height: 72vh; touch-action: manipulation; }
.wm-c { fill: color-mix(in oklab, var(--text-muted) 14%, var(--surface-1)); stroke: var(--surface-1);
  stroke-width: .6px; cursor: pointer; transition: opacity .2s ease; }
.wm-c.nodata { fill: color-mix(in oklab, var(--text-muted) 8%, var(--surface-1)); cursor: default; }
.wm-c:hover { stroke: var(--text-primary); stroke-width: 1.2px; }
.wm-c.dim { opacity: .28; }
.wm-c.sel { stroke: var(--text-primary); stroke-width: 1.8px; }
.wm-pt { stroke-width: 1px; }
.wm-c[data-phase="exp"] { fill: var(--good); }
.wm-c[data-phase="early"] { fill: color-mix(in oklab, var(--good) 45%, var(--surface-1)); }
.wm-c[data-phase="late"] { fill: var(--warning); }
.wm-c[data-phase="slow"] { fill: color-mix(in oklab, var(--critical) 55%, var(--surface-1)); }
.wm-c[data-phase="rec"] { fill: var(--critical); }
.wm-tip { position: absolute; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  padding: 6px 9px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--border-strong);
  font-size: 12px; color: var(--text-primary); white-space: nowrap; z-index: 2; }
.wm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-top: .5rem; }
.wm-legend-t { color: var(--text-secondary); font-weight: 600; }
.wm-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px;
  background: color-mix(in oklab, var(--text-muted) 8%, var(--surface-1)); border: 1px solid var(--border); }
.wm-sw[data-phase="exp"] { background: var(--good); }
.wm-sw[data-phase="early"] { background: color-mix(in oklab, var(--good) 45%, var(--surface-1)); }
.wm-sw[data-phase="late"] { background: var(--warning); }
.wm-sw[data-phase="slow"] { background: color-mix(in oklab, var(--critical) 55%, var(--surface-1)); }
.wm-sw[data-phase="rec"] { background: var(--critical); }

.wm-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; margin-bottom: .8rem; }
.wm-sum > div { display: flex; flex-direction: column; gap: 2px; }
.wm-sum b { font-size: 1.25rem; }
.wm-table { display: flex; flex-direction: column; }
.wm-tr { display: grid; grid-template-columns: minmax(120px, 1.6fr) minmax(90px, 1.2fr) repeat(6, 38px) 70px 54px minmax(90px, 1fr);
  gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.wm-tr[data-wm-open] { cursor: pointer; }
.wm-tr[data-wm-open]:hover, .wm-tr[data-wm-open]:focus-visible { background: var(--surface-2); outline: none; }
.wm-th { cursor: default; }
.wm-stat { text-align: right; }
.wm-tr .mr-chip { margin-left: 0; }
.wm-bar-cell { display: grid; grid-template-columns: 1fr 26px; gap: 6px; align-items: center; }
.wm-bar-cell i { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); position: relative; overflow: hidden; }
.wm-bar-cell i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  background: var(--series-1); border-radius: 3px; }
.wm-bar-cell b { text-align: right; font-size: 12px; }
.wm-bar-cell.wide { grid-template-columns: 1fr 30px; min-width: 120px; flex: 1; }

.wm-country-head { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-end; margin-bottom: .8rem; }
.wm-big { display: flex; flex-direction: column; gap: 2px; }
.wm-big b { font-size: 2.2rem; line-height: 1; }
.wm-cycle { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.wm-cycle .mr-chip { margin-left: 0; }
.wm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 22px; }
.wm-stat-head { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; }
.wm-sub { display: grid; grid-template-columns: 1fr auto 42px; gap: 8px; padding: 3px 0;
  border-bottom: 1px solid var(--border); }
.wm-sub > span:nth-child(3) { text-align: right; }
.wm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
.wm-chart { margin: 0; }
.wm-chart figcaption { margin-bottom: 2px; }

@media (max-width: 640px) {
  .wm-tr { grid-template-columns: 1fr 90px 64px; }
  .wm-tr > .wm-stat, .wm-tr > span:nth-last-child(2), .wm-tr > span:nth-last-child(3) { display: none; }
  .wm-th > span:nth-last-child(1) { display: none; }
  .wm-stats { grid-template-columns: 1fr; }
}