/* regions.css — «Продажі по регіонах» (web/regions.js). Same visual language as web/cf.css (big
   rounded hero with soft drifting glows, rounded panels with an icon chip, a glass range switch,
   square glowing swatches), its own palette — one meaning per colour:
     buyers / regions / their cities = teal      shop pickup = amber      no address = slate
     GA = neutral outline                       share up / down = green / rose
     delivery classes = their own family: branch blue, postomat purple, courier pink, Ukrposhta lime
   Data arrive as custom properties: --rg-v tile intensity 0..1, --rg-w bar width %, --rg-col /
   --rg-row tile cell, --rg-i / --rg-j animation order. The shared parts (tokens, the switch, month
   strip, chips, panel heads, change pills, split bars, swatches, keys, «Як рахуємо», the toggle,
   footnotes, the bottom sheet) are the kit's (web/ea-ui.css, the root is .ea-page); what differs from
   the kit today is in the "kept as before" block. The page's own blocks are prefixed rg-, numbers
   are tabular, motion is off under reduced motion. */

@property --rg-v {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* the page's own palette (ink, line, teal = --ea-mint, ease and spring come from the kit) */
#regions-root,
#sales-geo,
.rg-sheet {
    --rg-cold: rgba(255, 255, 255, 0.04);
    --rg-pickup: #f59e0b;
    --rg-unknown: #64748b;
    --rg-ga: #cbd5e1;
    --rg-up: #6ee7b7;
    --rg-down: #fda4af;
}

#regions-root {
    padding: 0 16px 28px;
}

/* ---------- kept as before: where the page differs from the kit today ----------
   Deleting a line here = the page takes the kit's value: a visible change, Sasha's call
   (plan step 1b / Q21, before/after first). */
/* the period switch: a frosted bar (12 / 10 px around it), a 4 px inset, a teal thumb, 12.5 px
   labels (kit: a solid bar, 3 px inset, a white thumb, 13 px) */
:where(#regions-root, #sales-geo) .ea-switch-wrap {
    margin: 0 -16px 2px;
    padding: 12px 16px 10px;
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.95) 65%, rgba(10, 10, 20, 0));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: none;
}
:where(#regions-root, #sales-geo) .ea-switch-wrap.is-stuck { padding: 12px 16px 10px; } /* no compact step here */
:where(#regions-root, #sales-geo) .rg-sentinel { height: 1px; margin-bottom: -1px; }
:where(#regions-root, #sales-geo) .ea-switch { padding: 4px; border-radius: 14px; }
:where(#regions-root, #sales-geo) .ea-switch__thumb {
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--n, 3));
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.26), rgba(94, 234, 212, 0.1));
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
:where(#regions-root, #sales-geo) .ea-switch__btn { font-size: 12.5px; white-space: nowrap; transition: color 0.25s; }
/* chips 12.5 px, the static one 11.5 px (kit 13 / 12) */
:where(#regions-root, #sales-geo, .rg-sheet) .ea-chip { font-size: 12.5px; }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-chip--static { font-size: 11.5px; }
/* panels rise with a stagger on each first render (kit: once, when scrolled into view); the head
   sits 14 px above the content, a 13 % icon tint, an 11.5 px meta that may wrap */
:where(#regions-root, #sales-geo) .ea-panel { animation: rgRise 0.6s var(--ea-ease) both; animation-delay: calc(var(--rg-i, 0) * 70ms); }
:where(#regions-root, #sales-geo) .ea-panel__head { margin-bottom: 14px; }
:where(#regions-root, #sales-geo) .ea-panel__icon { background: color-mix(in srgb, var(--c) 13%, transparent); }
:where(#regions-root, #sales-geo) .ea-panel__meta { font-size: 11.5px; white-space: normal; }
/* change pills 11 / 12.5 px in the page's softer green and rose (kit 12 / 13, --ea-good / --ea-bad) */
:where(#regions-root, #sales-geo, .rg-sheet) .ea-delta { font-size: 11px; }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-delta--big { font-size: 12.5px; }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-delta--up { color: var(--rg-up); background: rgba(52, 211, 153, 0.13); }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-delta--down { color: var(--rg-down); }
/* split bars 8 px with 4 / 6 px corners, each segment growing in turn (kit 10 px, 3 / 5 px) */
:where(#regions-root, #sales-geo, .rg-sheet) .ea-split { height: 8px; }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-split--thick { height: 12px; }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-split__seg {
    border-radius: 4px;
    animation: rgGrowX 0.9s var(--ea-ease) both;
    animation-delay: calc(0.15s + var(--rg-j, 0) * 90ms);
}
:where(#regions-root, #sales-geo, .rg-sheet) .ea-split__seg:first-child { border-radius: 6px 4px 4px 6px; }
:where(#regions-root, #sales-geo, .rg-sheet) .ea-split__seg:last-child { border-radius: 4px 6px 6px 4px; }
/* the show-all toggle 10 px under the list; the GA «hide» toggle draws its up chevron itself */
:where(#regions-root, #sales-geo) .ea-toggle { margin-top: 10px; }
:where(#regions-root, #sales-geo) .ea-toggle svg { transition: transform 0.35s var(--ea-ease); }
:is(#regions-root, #sales-geo) .ea-toggle[data-gaopen] svg { transform: none; }
/* footnotes 11.5 px (kit 12) */
:where(#regions-root, #sales-geo, .rg-sheet) .ea-footnote { font-size: 11.5px; }
/* the sheet's kicker at weight 600 (kit 650) */
.rg-sheet .ea-kicker { font-weight: 600; }

/* ---------- period switch (sticky): the kit's .ea-switch; month strip: the kit's .ea-strip ---------- */
/* month strip: under the switch, scrolls away with the page; soft edges, the chosen month centred */
/* ---------- body ---------- */
.rg-body {
    display: grid;
    gap: 14px;
    margin-top: 2px;
    transition: opacity 0.25s, filter 0.25s;
}

.rg-body--busy {
    opacity: 0.35;
    filter: blur(2px);
    pointer-events: none;
}

/* after the first paint, panels don't rise again on a period change */
.rg-body--settle .rg-hero,
.rg-body--settle .ea-panel {
    animation: none;
}

.rg-skel {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ea-line);
}

.rg-skel--hero { height: 470px; border-radius: 28px; }
.rg-skel--list { height: 300px; }

.rg-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    animation: rgShimmer 1.3s linear infinite;
}

/* ---------- hero: the map card ---------- */
.rg-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    padding: 16px 12px 14px;
    background: linear-gradient(160deg, #0f1420 0%, #0c0d18 55%, #0d0f1c 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px -30px rgba(94, 234, 212, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: rgRise 0.7s var(--ea-ease) both;
}

.rg-hero::before,
.rg-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
}

.rg-hero::before {
    top: -130px;
    left: -90px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.45), transparent 65%);
    animation: rgDriftA 14s ease-in-out infinite alternate;
}

.rg-hero::after {
    bottom: -150px;
    right: -100px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.3), transparent 65%);
    animation: rgDriftB 17s ease-in-out infinite alternate;
}

.rg-hero__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px;
}

.rg-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ea-ink-3);
}

.rg-lag {
    margin-top: 2px;
    padding: 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fbbf24;
}

.rg-total {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 0 4px;
}

.rg-total__v {
    font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    white-space: nowrap;
    background: linear-gradient(180deg, #ffffff 35%, #a7f3e4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rg-total__sub {
    margin-top: 3px;
    padding: 0 4px;
    font-size: 12.5px;
    color: var(--ea-ink-2);
}

.rg-total__sub b {
    color: var(--ea-ink);
    font-weight: 650;
}

/* the one-line reading: Kyiv's weight, the biggest share moves (tap = that region) */
.rg-ins-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 10px 0 12px;
}

/* shop pickups: in their cities or apart (Sasha 06.10) — a quiet row above the map */
/* online only | online + shop pickup, full width like the «Географія» card's switch (Sasha 15.10) */
:is(#regions-root, #sales-geo) .rg-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 12px 0 10px; /* the chips row that sat above it is gone (Sasha 15.10) */
    padding: 3px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ea-line);
}

:is(#regions-root, #sales-geo) .rg-pick .ea-seg__btn {
    padding: 6px 8px;
    font-size: 12.5px;
}

:is(#regions-root, #sales-geo) .rg-ins {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--ea-line);
    background: rgba(255, 255, 255, 0.05);
    font-size: 11px;
    color: var(--ea-ink-2);
    white-space: nowrap;
}

:is(#regions-root, #sales-geo) .rg-ins b {
    color: var(--ea-ink);
    font-weight: 650;
}

:is(#regions-root, #sales-geo) .rg-ins--up {
    color: var(--rg-up);
    background: rgba(52, 211, 153, 0.09);
    border-color: rgba(52, 211, 153, 0.24);
}

:is(#regions-root, #sales-geo) .rg-ins--down {
    color: var(--rg-down);
    background: rgba(251, 113, 133, 0.09);
    border-color: rgba(251, 113, 133, 0.24);
}

:is(#regions-root, #sales-geo) .rg-ins--up:active,
:is(#regions-root, #sales-geo) .rg-ins--down:active {
    transform: scale(0.96);
}

.rg-arrow {
    flex-shrink: 0;
    margin-right: 1px;
}

/* split bars (delivery mix, sheet, coverage) */
.rg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--ea-ink-2);
}

/* inline, so a long label wraps as text next to its swatch */
.rg-legend__item {
    display: inline-block;
}

.rg-legend__item .ea-sw {
    margin-right: 6px;
    vertical-align: 0;
}

.rg-legend__item b {
    color: var(--ea-ink);
    font-weight: 650;
}

.rg-legend__unit {
    margin-left: auto;
    font-size: 11px;
    color: var(--ea-ink-3);
}

/* colours: buckets (rg-c--) and delivery classes (rg-k--), on swatches and split segments */
.rg-c--located, .rg-c--db { --ea-swc: var(--ea-mint); background: linear-gradient(90deg, var(--ea-mint-deep), var(--ea-mint)); }
.rg-c--pickup { --ea-swc: var(--rg-pickup); background: var(--rg-pickup); }
.rg-c--unknown { --ea-swc: var(--rg-unknown); background: var(--rg-unknown); }
.ea-sw.rg-c--ga { background: rgba(203, 213, 225, 0.18); box-shadow: inset 0 0 0 1px var(--rg-ga); }
.rg-k--branch { --ea-swc: #60a5fa; background: #60a5fa; }
.rg-k--postomat { --ea-swc: #c084fc; background: #c084fc; }
.rg-k--courier { --ea-swc: #f472b6; background: #f472b6; }
.rg-k--ukrposhta { --ea-swc: #a3e635; background: #a3e635; }
.rg-k--other { --ea-swc: #94a3b8; background: #94a3b8; }
.rg-k--pickup { --ea-swc: var(--rg-pickup); background: var(--rg-pickup); }

/* delta pill: % change (hero, sheet) or change of share in p.p. (list) */
/* ---------- panels ---------- */
.rg-panel__sub {
    margin-top: -8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ea-ink-3);
}

.rg-sub {
    margin: 18px 0 0;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ea-ink-3);
}

.rg-sub--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.rg-sub__right {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* mini toggle (map mode, GA metric) */
/* ---------- tile map ---------- */
.rg-map {
    container-type: inline-size;
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));  /* 7: Луганська is off the map (Sasha 10.10) */
    grid-template-rows: repeat(6, minmax(0, 1fr));
    aspect-ratio: 7 / 6; /* square cells */
    gap: 4px;
}

:is(#regions-root, #sales-geo) .rg-tile {
    --rg-tone: var(--ea-mint-deep);
    grid-column: var(--rg-col);
    grid-row: var(--rg-row);
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* a solid base (Sasha 10.10: half-transparent tiles lost their colour over the card's tint) */
    background: color-mix(in oklab, var(--rg-tone) calc(var(--rg-v) * 94%), #171a24);
    box-shadow: 0 0 calc(var(--rg-v) * 16px) color-mix(in oklab, var(--rg-tone) calc(var(--rg-v) * 40%), transparent),
        inset 0 1px 0 rgba(255, 255, 255, calc(0.03 + var(--rg-v) * 0.12));
    transition: --rg-v 0.75s var(--ea-ease), transform 0.2s var(--ea-ease), border-color 0.2s;
}

:is(#regions-root, #sales-geo) [data-tone="pos"] { --rg-tone: #10b981; }
:is(#regions-root, #sales-geo) [data-tone="neg"] { --rg-tone: #e11d48; }
:is(#regions-root, #sales-geo) [data-tone="flat"] { --rg-tone: #64748b; }

:is(#regions-root, #sales-geo) .rg-tile:active {
    transform: scale(0.93);
}

.rg-tile__name {
    max-width: 100%;
    font-size: 11px;
    font-size: clamp(10px, 2.95cqi, 11.5px); /* never below 10 px (Sasha 10.10: the old 8.5 was a squeeze) */
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.rg-tile__val {
    min-height: 1em;
    font-size: 10px;
    font-size: clamp(10px, 2.75cqi, 11px);
    font-weight: 600;
    line-height: 1.05;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* the five biggest regions read first */
.rg-tile--lead .rg-tile__val {
    font-size: 11px;
    font-size: clamp(10.5px, 3.1cqi, 12.5px);
    font-weight: 750;
    color: #fff;
}

.rg-tile--zero .rg-tile__name {
    color: var(--ea-ink-4);
    text-shadow: none;
}

/* Kyiv city and its oblast read as one pair (Sasha 10.10: no round city tile, no «Обл.»): the city on top,
   «область» right under it, the corners between them nearly square */
:is(#regions-root, #sales-geo) .rg-tile--city {
    border-radius: 10px 10px 3px 3px;
}

:is(#regions-root, #sales-geo) .rg-tile[data-region="kyiv"] {
    border-radius: 3px 3px 10px 10px;
}

:is(#regions-root, #sales-geo) .rg-tile--sel {
    z-index: 1;
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 20px rgba(94, 234, 212, 0.55);
}

/* our shop here: a small amber dot in the bottom-left corner, clear of the labels */
.rg-tile__shop {
    display: none;
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rg-pickup);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.9);
}

.rg-tile--city .rg-tile__shop {
    bottom: 3px;
    left: 50%;
    margin-left: -2.5px;
}

.rg-tile--shop .rg-tile__shop {
    display: block;
}

.rg-tile__shop--legend {
    display: inline-block;
    position: static;
    margin-right: 6px;
    vertical-align: 1px;
}

/* first paint: tiles pop in from Kyiv outwards, the colour fills in behind them */
.rg-map--intro .rg-tile {
    animation: rgPop 0.5s var(--ea-spring) both;
    animation-delay: calc(0.15s + var(--rg-i) * 40ms);
    transition-delay: calc(0.3s + var(--rg-i) * 40ms) !important;
}

.rg-maplegend {
    /* in the map's empty south-west corner (rows 5–6, columns 1–4): no row of its own */
    grid-column: 1 / 5;
    grid-row: 5 / 7;
    align-self: end;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
    padding: 0 0 2px 2px;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--ea-ink-3);
}

.rg-steps {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

.rg-step {
    display: grid;
    justify-items: center;
    gap: 3px;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.rg-step__sw {
    --rg-tone: var(--ea-mint-deep);
    display: block;
    width: 24px;
    height: 8px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: color-mix(in oklab, var(--rg-tone) calc(var(--rg-v) * 94%), var(--rg-cold));
}

.rg-steps__unit {
    align-self: flex-end;
    margin-left: 3px;
    font-size: 10px;
    line-height: 1;
}

.rg-maplegend__note--left {
    max-width: 100%;
}

/* ---------- ranked rows (two lines: name + revenue; bar + share + change) ---------- */
.rg-rows {
    display: grid;
    gap: 2px;
}

:is(#regions-root, #sales-geo) .rg-row {
    display: block;
    width: 100%;
    padding: 8px 2px;
    text-align: left;
    border-radius: 12px;
    transition: background 0.2s;
}

:is(#regions-root, #sales-geo) button.rg-row:active {
    background: rgba(255, 255, 255, 0.04);
}

.rg-row__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rg-row__top .ea-sw {
    align-self: center;
    margin: 0 4px 0 4px;
}

.rg-row__rank {
    width: 18px;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ea-ink-4);
    text-align: right;
}

.rg-row__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-row__val {
    font-size: 13.5px;
    font-weight: 650;
    white-space: nowrap;
}

.rg-row__sub {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 18px;
    margin: 5px 0 0 26px;
}

.rg-row__sub--note {
    font-size: 11.5px;
    color: var(--ea-ink-3);
}

.rg-row__sub--note .rg-row__share {
    margin-left: auto;
}

.rg-row__bar {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.rg-row__fill {
    display: block;
    height: 100%;
    width: calc(var(--rg-w, 0) * 1%);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.55), var(--ea-mint));
    transform-origin: left center;
    animation: rgGrowX 0.9s var(--ea-ease) both;
    animation-delay: calc(0.1s + var(--rg-j, 0) * 45ms);
    transition: width 0.7s var(--ea-ease);
}

.rg-row__pp {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 66px;
}

.rg-row__share {
    min-width: 34px;
    font-size: 12px;
    font-weight: 650;
    color: var(--ea-ink-2);
    text-align: right;
}

.rg-row__shops {
    display: block;
    margin: 6px 0 0 26px;
    font-size: 11.5px;
    color: rgba(253, 230, 138, 0.85);
}

.rg-row__shops b {
    color: #fde68a;
    font-weight: 650;
}

.rg-rows--apart {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.rg-row--muted .rg-row__name {
    color: var(--ea-ink-2);
}

.rg-footnote--tight {
    margin-top: 6px;
}

/* ---------- delivery mix keys ---------- */
/* ---------- cities ---------- */
.rg-cities {
    display: grid;
    gap: 2px;
    margin-top: 6px;
}

.rg-city {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 40px 62px 28px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 2px;
    border-radius: 10px;
    text-align: left;
}

.rg-city--head {
    padding: 0 2px;
}

.rg-city--head .rg-city__val,
.rg-city--head .rg-city__o {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ea-ink-3);
}

:is(#regions-root, #sales-geo) button.rg-city:active {
    background: rgba(255, 255, 255, 0.04);
}

.rg-city__n {
    font-size: 11px;
    font-weight: 700;
    color: var(--ea-ink-4);
    text-align: right;
}

/* the name (+ NP's hint) is cut with an ellipsis; the oblast tag after it always stays whole */
.rg-city__name {
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.rg-city__txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-city__name small {
    font-size: 11px;
    font-weight: 500;
    color: var(--ea-ink-3);
}

.rg-tag {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 650;
    color: var(--ea-mint);
    background: rgba(94, 234, 212, 0.11);
    vertical-align: 1px;
}

.rg-city__bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.rg-city__bar span {
    display: block;
    height: 100%;
    width: calc(var(--rg-w, 0) * 1%);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.5), var(--ea-mint));
    transform-origin: left center;
    animation: rgGrowX 0.9s var(--ea-ease) both;
    animation-delay: 0.2s;
}

.rg-city__val {
    font-size: 12.5px;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}

.rg-city__o {
    font-size: 11px;
    color: var(--ea-ink-3);
    text-align: right;
}

/* ---------- real buyers vs GA ---------- */
.rg-panel--ga::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 70% at 100% 0%, rgba(203, 213, 225, 0.06), transparent 60%);
    pointer-events: none;
}

.rg-panel--folded {
    padding: 12px 14px;
}

:is(#regions-root, #sales-geo) .rg-fold {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
}

.rg-fold__text {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ea-ink-3);
}

.rg-fold__text b {
    font-size: 14px;
    font-weight: 650;
    color: var(--ea-ink);
}

.rg-fold__go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ea-ink-2);
    white-space: nowrap;
}

.rg-answer {
    display: grid;
    gap: 10px;
    margin: 12px 0 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.rg-ans {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 12px;
    font-size: 13px;
    color: var(--ea-ink-2);
}

.rg-ans__k {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rg-ans--over .rg-ans__k { color: var(--rg-up); }
.rg-ans--under .rg-ans__k { color: var(--rg-down); }

.rg-ans__it b {
    color: var(--ea-ink);
    font-weight: 700;
}

.rg-ans--note {
    display: block;
    font-size: 12px;
    color: var(--ea-ink-3);
}

.rg-ans--note b {
    color: var(--ea-ink-2);
}

.rg-gahead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 12px;
}

.rg-gahead .rg-legend {
    margin-top: 0;
}

.rg-gars {
    display: grid;
    gap: 9px;
}

.rg-gars__sep {
    height: 1px;
    margin: 2px 0;
    background: var(--ea-line);
}

.rg-gar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 1fr 48px;
    align-items: center;
    gap: 10px;
}

.rg-gar__name {
    font-size: 12.5px;
    color: var(--ea-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-gar--special .rg-gar__name {
    color: var(--ea-ink-3);
}

.rg-gar__bars {
    display: grid;
    gap: 3px;
}

.rg-gar__bar {
    display: block;
    height: 5px;
    width: calc(var(--rg-w, 0) * 1%);
    min-width: 2px;
    border-radius: 3px;
    transform-origin: left center;
    animation: rgGrowX 0.9s var(--ea-ease) both;
    animation-delay: calc(0.1s + var(--rg-j, 0) * 35ms);
}

.rg-gar__bar--db {
    background: linear-gradient(90deg, var(--ea-mint-deep), var(--ea-mint));
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.25);
}

/* GA: the other source, drawn as an outline */
.rg-gar__bar--ga {
    background: rgba(203, 213, 225, 0.14);
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.6);
}

.rg-gar__v {
    display: grid;
    justify-items: end;
    font-size: 11.5px;
    line-height: 1.15;
}

.rg-gar__v b {
    color: var(--ea-mint);
    font-weight: 650;
}

.rg-gar__v span {
    color: var(--rg-ga);
}

/* ---------- how it is counted ---------- */
.rg-foot {
    padding: 0 4px;
}

/* the coverage legend lines up with the kit's split inside «Як рахуємо» */
.ea-how .rg-legend {
    margin-left: 17px;
}

/* inside «Як рахуємо» the legend's numbers stay in the softer ink of the block */
.ea-how .rg-legend b {
    color: var(--ea-ink-2);
}

/* ---------- region sheet: the kit's bottom sheet (.ea-sheet.rg-sheet); the page fills its body ---------- */
.rg-sh__hero {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rg-sh__rev {
    font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.rg-sh__vs {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ea-ink-3);
}

.rg-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ea-line);
}

.rg-stat {
    padding: 0 10px;
    min-width: 0;
}

.rg-stat + .rg-stat {
    border-left: 1px solid var(--ea-line);
}

.rg-stat:first-child {
    padding-left: 0;
}

.rg-stat__k {
    font-size: 10.5px;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ea-ink-3);
}

.rg-stat__v {
    margin-top: 5px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.rg-stat__s {
    margin-top: 2px;
    font-size: 11px;
    color: var(--ea-ink-3);
}

.rg-sh__nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 20px;
}

.rg-sh__nav .ea-chip {
    max-width: 49%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- motion ---------- */
@keyframes rgRise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes rgGrowX { from { transform: scaleX(0); } }
@keyframes rgPop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
@keyframes rgShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes rgDriftA { to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes rgDriftB { to { transform: translate(-50px, -30px) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
    #regions-root *,
    #regions-root *::before,
    #regions-root *::after,
    #sales-geo *,
    #sales-geo *::before,
    #sales-geo *::after,
    .rg-sheet,
    .rg-sheet * {
        animation: none !important;
        transition: none !important;
    }
}

/* ── the region against itself: week by week / month by month (Sasha / Samir 15.10) ──
   one row per week / month, newest first (rule 9: a long series is a vertical list): label, a bar against
   the best bucket, the sum and orders, the change against the bucket before (this one so far: against the
   same days of the one before) */
.rg-tr-head {
    align-items: center;
}

.rg-trend {
    margin-top: 8px;
}

.rg-tr {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 74px 54px;
    align-items: center;
    column-gap: 9px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.rg-tr:first-child {
    border-top: 0;
}

.rg-tr__lbl {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ea-ink-2);
}

.rg-tr__lbl small {
    font-size: 10.5px;
    font-weight: 600;
    color: #5eead4;
}

.rg-tr--now .rg-tr__lbl {
    color: #5eead4;
}

.rg-tr__bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.rg-tr__bar span {
    display: block;
    width: calc(var(--w) * 1%);
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #0d9488, #2dd4bf);
}

/* the bucket still running: striped, it isn't the whole week / month yet */
.rg-tr--now .rg-tr__bar span {
    background: repeating-linear-gradient(135deg, rgba(45, 212, 191, 0.75) 0 5px, rgba(45, 212, 191, 0.35) 5px 10px);
}

.rg-tr__val {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--ea-ink);
}

.rg-tr__val small {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ea-ink-4);
}

.rg-tr__d {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
}

.rg-tr__few {
    font-size: 12px;
    color: var(--ea-ink-4);
}

.rg-tr-sk {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rg-tr-sk i {
    display: block;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

/* ── the top block on Продажі (web/geo-card.js, Sasha 15.10: «set this widget on the sales page») ── */
#sales-geo.ea-page {
    display: block;
    margin: 6px 16px 18px;
    padding: 0;
    cursor: pointer;
}

#sales-geo .rg-hero {
    animation: none;
}

.rg-kicker--card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5eead4;
}

.rg-kicker__muted {
    color: rgba(255, 255, 255, 0.45);
}

.rg-hero__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 12px;
    padding: 9px;
    border-radius: 12px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.22);
    font-size: 13px;
    font-weight: 650;
    color: #5eead4;
}

/* the top row's right side: Ріст | Частка and map | list */
.rg-hero__ctl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.rg-hero__ctl .hidden {
    display: none;
}

.rg-hero__views .ea-seg__btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
}

.rg-hlist {
    margin-top: 2px;
}

.rg-hlist.hidden,
.rg-map.hidden {
    display: none;
}

.rg-hlist .ea-footnote {
    margin-top: 8px;
}