/* NEWS-47: the living explainers' graphics (web/src/lib/explainerGraphics.ts, public/scripts/explainer-graphics.js). The finished
   graphic is the page's default state; the script adds .is-armed (hidden start) only when motion is allowed, then .is-in on scroll.
   Light and dark through the portal theme's colours, with fallbacks for the other themes. */
.xg {
  --xg-fg: var(--pt-head, #1d1d1d); --xg-text: var(--pt-body, #333); --xg-mute: var(--pt-mute, #6b6b6b); --xg-line: var(--pt-line, #e3e3e3);
  --xg-bg: var(--pt-stripe, #f8f7f5); --xg-card: var(--pt-surface, #fff);
  --xg-a: #8a1538; --xg-b: #1f5f8b; --xg-sea: #e9f0f5; --xg-land: #ddd8d0; --xg-land-hl: #f4efe6; --xg-land-line: #fff;
  --k-DT: #8aa6bb; --k-TT: #2f86c9; --k-1: #e3a600; --k-2: #ef7d1a; --k-3: #d8402a; --k-4: #b0177f; --k-5: #5c1a8f;
  --g-mx: #0d7a4c; --g-us: #1f5f8b; --g-ca: #c8102e;
  --g-a14: #6e0f2c; --g-a22: #d66b80; --ua: #f2e3b3;
  margin: 30px 0 34px; padding: 18px 18px 14px; background: var(--xg-bg); border-top: 3px solid var(--xg-a); color: var(--xg-text);
  font-family: var(--pt-sans, system-ui, sans-serif); font-size: 15px; line-height: 1.45; clear: both;
}
html[data-theme="dark"] .xg {
  --xg-a: #ff8aa3; --xg-b: #78b8ea; --xg-sea: #10171e; --xg-land: #34312d; --xg-land-hl: #4a443b; --xg-land-line: #1b1b1b;
  --k-DT: #8aa6bb; --k-TT: #5fb2f0; --k-1: #f2c230; --k-2: #ff9a45; --k-3: #ff6a50; --k-4: #ea5fc4; --k-5: #b58cff;
  --g-mx: #3fcf8e; --g-us: #78b8ea; --g-ca: #ff6b7d; --g-a14: #e0507a; --g-a22: #8c3a50; --ua: #5a5133;
}
@media (prefers-color-scheme: dark) {
  html.theme-auto:not([data-theme="light"]) .xg {
    --xg-a: #ff8aa3; --xg-b: #78b8ea; --xg-sea: #10171e; --xg-land: #34312d; --xg-land-hl: #4a443b; --xg-land-line: #1b1b1b;
    --k-DT: #8aa6bb; --k-TT: #5fb2f0; --k-1: #f2c230; --k-2: #ff9a45; --k-3: #ff6a50; --k-4: #ea5fc4; --k-5: #b58cff;
    --g-mx: #3fcf8e; --g-us: #78b8ea; --g-ca: #ff6b7d; --g-a14: #e0507a; --g-a22: #8c3a50; --ua: #5a5133;
  }
}
.xg * { box-sizing: border-box; }
.xg__head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; }
.xg__kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--xg-a); }
.xg__title { font-family: var(--pt-head-font, inherit); font-size: 21px; line-height: 1.2; font-weight: 700; color: var(--xg-fg); }
.xg__dek { font-size: 15px; color: var(--xg-mute); }
.xg__src { margin: 12px 0 0; font-size: 12.5px; color: var(--xg-mute); }
.xg .xg__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.xg ol, .xg ul, .xg dl { margin: 0; padding: 0; list-style: none; }
.xg li { margin: 0; padding: 0; }
.xg p { margin: 0; }
.xg-tag { display: inline-block; margin-top: 5px; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--xg-mute); box-shadow: inset 0 0 0 1px var(--xg-line); }
.xg-tag--next { background: var(--xg-a); color: var(--xg-card); box-shadow: none; }
.xg-tag + .xg-tag { margin-left: 6px; }
.xg-when, .xg-tl time { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--xg-a); text-transform: uppercase; }

/* data table (text alternative) */
.xg__data { margin-top: 12px; font-size: 14px; }
.xg__data summary { cursor: pointer; color: var(--xg-fg); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.xg__tw { overflow-x: auto; margin-top: 8px; }
.xg__data table { width: 100%; border-collapse: collapse; background: var(--xg-card); }
.xg__data th, .xg__data td { padding: 6px 8px; border-bottom: 1px solid var(--xg-line); text-align: left; vertical-align: top; }
.xg__data thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--xg-mute); }
.xg__data td { font-variant-numeric: tabular-nums; }

/* key figures */
.xg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.xg-stats li { background: var(--xg-card); padding: 14px; border-left: 3px solid var(--xg-a); display: flex; flex-direction: column; gap: 4px; }
.xg-stats__v { font-family: var(--pt-head-font, inherit); font-size: 34px; line-height: 1; font-weight: 700; color: var(--xg-fg); font-variant-numeric: tabular-nums; }
.xg-stats__l { font-weight: 600; color: var(--xg-fg); }
.xg-stats__s { font-size: 13px; color: var(--xg-mute); }

/* before and after */
.xg-cmp__h { display: none; }
.xg-cmp__r { background: var(--xg-card); padding: 12px 14px; margin-bottom: 8px; }
.xg-cmp dt { font-weight: 700; color: var(--xg-fg); margin-bottom: 8px; }
.xg-cmp dd { margin: 0; padding: 6px 0 6px 12px; }
.xg-cmp__k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--xg-mute); }
.xg-cmp__b { border-left: 3px solid var(--xg-line); color: var(--xg-mute); }
.xg-cmp__a { border-left: 3px solid var(--xg-a); color: var(--xg-fg); margin-top: 6px !important; }
.xg-cmp__a .xg-cmp__k { color: var(--xg-a); }
@media (min-width: 700px) {
  .xg-cmp__h { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 14px; padding: 0 14px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--xg-mute); }
  .xg-cmp__h span:last-child { color: var(--xg-a); }
  .xg-cmp__r { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 14px; align-items: start; }
  .xg-cmp dt { margin: 0; }
  .xg-cmp__k { display: none; }
  .xg-cmp__a { margin-top: 0 !important; }
}

/* steps and timeline: a rail with dots */
.xg-steps, .xg-tl { position: relative; padding-left: 4px; }
.xg-steps::before, .xg-tl::before { content: ''; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: var(--xg-a); transform-origin: top; }
.xg-steps li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 0 0 18px; }
.xg-steps__n { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--xg-a); color: var(--xg-card); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.xg-steps li.is-next .xg-steps__n { background: var(--xg-card); color: var(--xg-a); box-shadow: inset 0 0 0 2px var(--xg-a); }
.xg-steps strong, .xg-tl strong { display: block; color: var(--xg-fg); font-size: 16px; line-height: 1.3; }
.xg-steps p, .xg-tl p { margin-top: 3px; color: var(--xg-text); }
.xg-tl li { position: relative; padding: 0 0 18px 40px; }
.xg-tl li::before { content: ''; position: absolute; left: 7px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--xg-a); box-shadow: 0 0 0 4px var(--xg-bg); }
.xg-tl li.is-next::before { background: var(--xg-bg); box-shadow: inset 0 0 0 2px var(--xg-a), 0 0 0 4px var(--xg-bg); }
.xg-tl li.xg-tl__today { padding: 4px 0 20px 40px; }
.xg-tl li.xg-tl__today::before { left: 0; top: 13px; width: 100%; height: 0; border-radius: 0; border-top: 2px dashed var(--xg-a); background: none; box-shadow: none; }
.xg-tl__today span { position: relative; background: var(--xg-bg); padding: 0 8px; margin-left: -8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--xg-a); }
@media (min-width: 700px) {
  .xg-tl li:not(.xg-tl__today) { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
  .xg-tl time { padding-top: 1px; }
}

/* bars */
.xg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 13px; color: var(--xg-mute); }
.xg-legend li { display: flex; align-items: center; gap: 6px; }
.xg-legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; background: var(--xg-a); }
.xg-legend i.s1 { background: var(--xg-b); }
.xg-legend--block { flex-direction: column; gap: 6px; margin-top: 10px; }
.xg-bars__r { display: grid; grid-template-columns: minmax(64px, 30%) 1fr; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--xg-line); }
.xg-bars__l { font-size: 14px; font-weight: 600; color: var(--xg-fg); line-height: 1.25; }
.xg-bars__r.is-hl .xg-bars__l { color: var(--xg-a); }
.xg-bars__g { display: flex; flex-direction: column; gap: 3px; padding-right: 74px; }
.xg-bars__b { position: relative; display: block; height: 20px; width: calc(var(--v) * 100%); min-width: 2px; background: var(--xg-a); border-radius: 0 2px 2px 0; transform-origin: left; }
.xg-bars__r:not(.is-hl) .xg-bars__b.s0 { background: color-mix(in srgb, var(--xg-a) 72%, var(--xg-bg)); }
.xg-unit { margin: -4px 0 8px !important; font-size: 13px; color: var(--xg-mute); }
.xg-bars__g { position: relative; }
.xg-bars__m { position: absolute; z-index: 1; top: -6px; bottom: -6px; left: calc(var(--m) * (100% - 74px)); border-left: 2px dashed var(--xg-fg); opacity: .55; }
.xg-bars__mk { border-bottom: 0; padding: 0; }
.xg-bars__ml { position: relative; display: inline-block; align-self: flex-start; left: calc(var(--m) * 100%); transform: translateX(-50%); margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--xg-fg); white-space: nowrap; }
.xg-bars__b.is-inside b { left: auto; right: 7px; color: #fff; }
.xg-bars--2 .xg-bars__b.is-inside b { right: 5px; }
@media (max-width: 640px) {
  .xg-bars__r { grid-template-columns: 1fr; gap: 4px; padding: 7px 0; }
  .xg-bars__g { padding-right: 58px; }
  .xg-bars__m { left: calc(var(--m) * (100% - 58px)); }
  .xg-bars__ml { transform: translateX(calc(-100% + 2px)); padding-right: 6px; border-right: 2px dashed var(--xg-fg); }
}
.xg-bars--2 .xg-bars__b { height: 13px; }
.xg-bars__b.s1 { background: var(--xg-b); opacity: 1; }
.xg-bars__b b { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--xg-fg); font-variant-numeric: tabular-nums; }
.xg-bars--2 .xg-bars__b b { font-size: 11.5px; font-weight: 600; }

/* scale */
.xg-scale { display: grid; gap: 6px; }
.xg-scale li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 12px; background: var(--xg-card); border-left: 6px solid var(--k-1); }
.xg-scale li.c0 { border-color: var(--k-DT); } .xg-scale li.c1 { border-color: var(--k-TT); } .xg-scale li.c2 { border-color: var(--k-1); }
.xg-scale li.c3 { border-color: var(--k-2); } .xg-scale li.c4 { border-color: var(--k-3); } .xg-scale li.c5 { border-color: var(--k-4); } .xg-scale li.c6 { border-color: var(--k-5); }
.xg-scale__k { font-weight: 700; color: var(--xg-fg); }
.xg-scale__r { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--xg-fg); text-align: right; }
.xg-scale__t { grid-column: 1 / -1; font-size: 13.5px; color: var(--xg-mute); }

/* maps */
.xg-mapwrap { position: relative; margin: 0 -4px; }
.xg-map { display: block; width: 100%; height: auto; border-radius: 3px; }
.xg-sea { fill: var(--xg-sea); }
.xg-land { fill: var(--xg-land); stroke: var(--xg-land-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xg-land.is-hl { fill: var(--xg-land-hl); }
.xg-count { margin: 8px 0 8px; font-size: 13.5px; color: var(--xg-mute); }
.xg-count [data-clock] { font-weight: 700; color: var(--xg-fg); font-variant-numeric: tabular-nums; }
.xg-storm path { fill: none; stroke: var(--k-TT); stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.xg-storm.is-hu path { stroke-width: 2.8px; }
.xg-storm circle { fill: var(--k-TT); }
.xg-storm text { font-size: 17px; font-weight: 700; fill: var(--xg-fg); paint-order: stroke; stroke: var(--xg-sea); stroke-width: 4px; stroke-linejoin: round; }
.xg-storm.kDT path { stroke: var(--k-DT); } .xg-storm.kDT circle { fill: var(--k-DT); }
.xg-storm.k1 path { stroke: var(--k-1); } .xg-storm.k1 circle { fill: var(--k-1); }
.xg-storm.k2 path { stroke: var(--k-2); } .xg-storm.k2 circle { fill: var(--k-2); }
.xg-storm.k3 path { stroke: var(--k-3); } .xg-storm.k3 circle { fill: var(--k-3); }
.xg-storm.k4 path { stroke: var(--k-4); } .xg-storm.k4 circle { fill: var(--k-4); }
.xg-storm.k5 path { stroke: var(--k-5); } .xg-storm.k5 circle { fill: var(--k-5); }
.xg-storm__now { fill: none !important; stroke: var(--xg-fg); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.xg-tracks.has-pick .xg-storm { opacity: .14; }
.xg-tracks.has-pick .xg-storm.is-pick { opacity: 1; }
.xg-tracks.has-pick .xg-storm.is-pick path { stroke-width: 4px; }
.xg-storm { transition: opacity .25s ease; }
@media (max-width: 640px) { .xg-storm:not(.is-active):not(.is-pick) text { display: none; } .xg-storm text { font-size: 30px; stroke-width: 6px; } }
.xg-legend--cats i { border-radius: 50%; }
.xg-legend--cats i.kTT { background: var(--k-TT); } .xg-legend--cats i.k1 { background: var(--k-1); } .xg-legend--cats i.k2 { background: var(--k-2); }
.xg-legend--cats i.k3 { background: var(--k-3); } .xg-legend--cats i.k4 { background: var(--k-4); } .xg-legend--cats i.k5 { background: var(--k-5); }
.xg-legend--cats { margin-top: 4px; }
.xg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.xg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--xg-line); border-left: 4px solid var(--k-TT); background: var(--xg-card); color: var(--xg-fg); font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 3px; cursor: pointer; }
.xg-chip small { font-size: 11.5px; font-weight: 500; color: var(--xg-mute); }
.xg-chip.k1 { border-left-color: var(--k-1); } .xg-chip.k2 { border-left-color: var(--k-2); } .xg-chip.k3 { border-left-color: var(--k-3); }
.xg-chip.k4 { border-left-color: var(--k-4); } .xg-chip.k5 { border-left-color: var(--k-5); }
.xg-chip[aria-pressed="true"] { background: var(--xg-fg); color: var(--xg-card); border-color: var(--xg-fg); }
.xg-chip[aria-pressed="true"] small { color: inherit; opacity: .8; }
.xg-chip:focus-visible, .xg-places button:focus-visible { outline: 2px solid var(--xg-a); outline-offset: 2px; }
.xg-pickinfo { min-height: 1.45em; margin-top: 8px !important; font-size: 14px; color: var(--xg-fg); }
/* places */
.xg-pin__m { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.xg-pin circle { fill: var(--xg-a); stroke: var(--xg-card); stroke-width: 3; }
.xg-pin.g-mx circle { fill: var(--g-mx); } .xg-pin.g-us circle { fill: var(--g-us); } .xg-pin.g-ca circle { fill: var(--g-ca); }
.xg-pin text { font-size: 15px; font-weight: 700; fill: #fff; text-anchor: middle; pointer-events: none; }
.xg-pin.is-pick .xg-pin__m { transform: scale(1.7); }
.xg-pin.is-pick circle { stroke: var(--xg-fg); }
@media (max-width: 640px) { .xg-pin__m { transform: scale(1.45); } .xg-pin.is-pick .xg-pin__m { transform: scale(2.3); } .xg-pin text { display: none; } }
.xg-legend i.g-mx { background: var(--g-mx); } .xg-legend i.g-us { background: var(--g-us); } .xg-legend i.g-ca { background: var(--g-ca); }
.xg-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; margin-top: 10px !important; }
.xg-places button { width: 100%; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; text-align: left; padding: 8px 10px; background: var(--xg-card); color: var(--xg-text); border: 1px solid var(--xg-line); border-radius: 3px; font: inherit; font-size: 13.5px; cursor: pointer; }
.xg-places button[aria-pressed="true"] { border-color: var(--xg-fg); box-shadow: inset 0 0 0 1px var(--xg-fg); }
.xg-places__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--xg-a); color: #fff; font-weight: 700; font-size: 13px; }
.xg-places .g-mx .xg-places__n { background: var(--g-mx); } .xg-places .g-us .xg-places__n { background: var(--g-us); } .xg-places .g-ca .xg-places__n { background: var(--g-ca); }
.xg-places strong { display: block; color: var(--xg-fg); font-size: 14.5px; }
.xg-places em { display: block; font-style: normal; color: var(--xg-fg); }
.xg-places span span { display: block; color: var(--xg-mute); }
@media (max-width: 640px) {
  .xg-places { grid-template-columns: 1fr 1fr; }
  .xg-places button { grid-template-columns: 22px 1fr; gap: 6px; padding: 6px 7px; font-size: 12.5px; }
  .xg-places__n { width: 22px; height: 22px; font-size: 11.5px; }
  .xg-places strong { font-size: 13px; }
  .xg-places em, .xg-places span span:last-child:not(:first-of-type) { display: none; }
}
/* place names on a map */
.xg-maplabel { font-size: 24px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--xg-mute); opacity: .8; text-anchor: middle; }
.xg-maplabel.is-sea { font-style: italic; text-transform: none; letter-spacing: .02em; font-weight: 500; }
@media (max-width: 640px) { .xg-maplabel { font-size: 34px; } }
/* regions */
.xg-reg { fill: var(--ua); stroke: var(--xg-land-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xg-reg.g-annexed2014 { fill: var(--g-a14); } .xg-reg.g-annexed2022 { fill: var(--g-a22); }
.xg-legend i.g-annexed2014 { background: var(--g-a14); } .xg-legend i.g-annexed2022 { background: var(--g-a22); } .xg-legend i.g-ukraine { background: var(--ua); outline: 1px solid var(--xg-line); }
.xg-city circle { fill: var(--xg-fg); stroke: var(--xg-card); stroke-width: 2; }
.xg-city text { font-size: 22px; font-weight: 700; fill: var(--xg-fg); paint-order: stroke; stroke: var(--xg-land-hl); stroke-width: 5px; }
@media (max-width: 640px) { .xg-city text { font-size: 34px; } .xg-city circle { r: 9px; } }

/* motion: only when the script armed the graphic (motion allowed); every rule ends in the finished state */
.xg.is-armed .xg-stats li, .xg.is-armed .xg-cmp__r, .xg.is-armed .xg-steps li, .xg.is-armed .xg-tl li, .xg.is-armed .xg-scale li, .xg.is-armed .xg-bars__r { opacity: 0; transform: translateY(10px); }
.xg.is-armed .xg-cmp__a { opacity: 0; transform: translateX(14px); }
.xg.is-armed .xg-steps::before, .xg.is-armed .xg-tl::before { transform: scaleY(0); }
.xg.is-armed .xg-bars__b { transform: scaleX(0); }
.xg.is-armed .xg-bars__b b { opacity: 0; }
.xg.is-armed .xg-storm path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.xg.is-armed .xg-storm circle, .xg.is-armed .xg-storm text { opacity: 0; }
.xg.is-armed .xg-pin .xg-pin__m { transform: scale(0); }
.xg.is-armed .xg-reg.g-annexed2014, .xg.is-armed .xg-reg.g-annexed2022 { fill: var(--ua); }
.xg.is-in .xg-stats li, .xg.is-in .xg-cmp__r, .xg.is-in .xg-steps li, .xg.is-in .xg-tl li, .xg.is-in .xg-scale li, .xg.is-in .xg-bars__r {
  opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.xg.is-in .xg-cmp__a { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms + 350ms); }
.xg.is-in .xg-steps::before, .xg.is-in .xg-tl::before { transform: scaleY(1); transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.xg.is-in .xg-bars__b { transform: scaleX(1); transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
.xg.is-in .xg-bars__b b { opacity: 1; transition: opacity .3s ease; transition-delay: calc(var(--i, 0) * 80ms + 900ms); }
.xg.is-in .xg-storm path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--t, 0) * 3.6s); }
.xg.is-in .xg-storm circle, .xg.is-in .xg-storm text { opacity: 1; transition: opacity .35s ease; transition-delay: calc(var(--t, 0) * 3.6s + .9s); }
.xg.is-in .xg-pin .xg-pin__m { transform: scale(1); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); transition-delay: calc(var(--i, 0) * 70ms); }
@media (max-width: 640px) { .xg.is-in .xg-pin .xg-pin__m { transform: scale(1.45); } .xg.is-in .xg-pin.is-pick .xg-pin__m { transform: scale(2.3); } }
.xg.is-in .xg-pin.is-pick .xg-pin__m { transform: scale(1.7); }
.xg.is-in .xg-reg.g-annexed2014 { fill: var(--g-a14); transition: fill .8s ease .3s; }
.xg.is-in .xg-reg.g-annexed2022 { fill: var(--g-a22); transition: fill .8s ease 1.3s; }
.xg.is-done .xg-storm__now { animation: xg-pulse 1.8s ease-out 3; transform-box: fill-box; transform-origin: center; }
@keyframes xg-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .xg *, .xg *::before { transition: none !important; animation: none !important; } }
html[data-motion="off"] .xg *, html[data-motion="off"] .xg *::before { transition: none !important; animation: none !important; }

/* the poster (home page "Cobertura especial"): the graphic alone, small */
.xg--poster { margin: 0; padding: 0; background: transparent; border: 0; }
.xg--poster .xg__head, .xg--poster .xg__src, .xg--poster .xg__data, .xg--poster .xg-chips, .xg--poster .xg-pickinfo, .xg--poster .xg-places,
.xg--poster .xg-count, .xg--poster .xg-legend--block { display: none; }
.xg--poster .xg-cmp__r:nth-child(n+4), .xg--poster .xg-steps li:nth-child(n+5), .xg--poster .xg-tl li:nth-child(n+6), .xg--poster .xg-bars__r:nth-child(n+7) { display: none; }
@media print { .xg__data, .xg-chips, .xg-pickinfo { display: none; } .xg.is-armed * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } }
/* inside a story's text: the theme's paragraph and link rules (large type, justified, wide margins) do not apply to the graphics */
body .body .xg p, body.theme-portal .body .xg p, body.theme-portal .pa-main .body .xg p { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; text-align: start; hyphens: manual; -webkit-hyphens: manual; }
body .body .xg a, body.theme-portal .body .xg a { color: inherit; }
body.theme-portal .pa-main .body .xg p.xg__src, body .body .xg p.xg__src { margin-top: 12px; font-size: 12.5px; color: var(--xg-mute); }
body.theme-portal .pa-main .body .xg p.xg-unit, body .body .xg p.xg-unit { margin: -4px 0 8px; font-size: 13px; color: var(--xg-mute); }
body.theme-portal .pa-main .body .xg p.xg-count, body .body .xg p.xg-count { margin: 8px 0; font-size: 13.5px; color: var(--xg-mute); }
body.theme-portal .pa-main .body .xg p.xg-pickinfo, body .body .xg p.xg-pickinfo { margin-top: 8px; font-size: 14px; color: var(--xg-fg); }
body.theme-portal .pa-main .body .xg .xg-steps p, body.theme-portal .pa-main .body .xg .xg-tl p { margin-top: 3px; color: var(--xg-text); }
body .body .xg ul, body .body .xg ol, body .body .xg dl { margin: 0; padding: 0; list-style: none; }
body .body .xg li { margin: 0; }