/* cf.css — Cloudflare edge dashboard (EA v2): only what is the page's own. The shared parts (top bar,
   hero, switch, panels, rows, charts, skeletons, error card, motion) are the kit: web/ea-ui.css.
   Colour carries one meaning each:
     people = mint                bots = muted violet (verified lighter, other bots deeper)
     errors that matter = red     "worth a look" = amber
     everything else (cache, speed, ads, radar, spinners) = neutral white / grey
   Motion: the hero plays once on open; a panel rises the first time it scrolls into view; range
   switches and refreshes never replay an entrance. Only two loops run for good: the pulse end-dot
   beat and the calm radar sweep (plus the status ping while something is wrong). */

.cf, .sales-cf-bots {
    --cf-human: #5eead4;
    --cf-verified: #6a60b6;
    --cf-verified-2: #554c98;
    --cf-verified-3: #433c7c;
    --cf-verified-4: rgba(255, 255, 255, 0.13);
    --cf-verified-ink: #a99ff0;
    --cf-auto: #46308a;
    --cf-auto-ink: #9d89e2;
    --cf-bot-band: rgba(124, 111, 217, 0.25);
    /* bots our firewall stopped: Cloudflare's own orange (Sasha 09.10: not grey) */
    --cf-stopped: #f38020;
    /* bots that got our pages: rose, the number to worry about (Sasha 09.10) */
    --cf-leak: #fb7185;
}

/* ---------- 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). */
.cf {
    /* fainter grey text than the kit (.70 / .56 / .36) */
    --ea-ink-2: rgba(236, 236, 248, 0.68);
    --ea-ink-3: rgba(236, 236, 248, 0.46);
    --ea-ink-4: rgba(236, 236, 248, 0.26);
}
/* the hero number in the system face, not the rounded one the kit gives it (iPhone shows the difference) */
#cf-root .ea-big .ea-num { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* nothing to show at all: one card, no switch, no panels */
#cf-root.is-down .ea-sentinel,
#cf-root.is-down .ea-switch-wrap,
#cf-root.is-down .ea-stamp,
#cf-root.is-down .ea-panels,
#cf-root.is-down .ea-foot { display: none; }

/* ---------- hero: the 60-minute pulse, the origin note, the entrance ---------- */
.cf .ea-hero.is-dim .cf-pulse svg,
.cf .ea-hero.is-dim .cf-pulse__axis { opacity: 0.55; }
.cf-pulse { position: relative; margin: 14px -2px 0; height: 88px; }
.cf-pulse svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cf-pulse__axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--ea-ink-4); }
.cf-sk-pulse { height: 88px; margin-top: 14px; border-radius: 12px; }

.cf-origin { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); font-size: 13px; color: var(--ea-ink-2); }
.cf-origin svg { flex-shrink: 0; color: var(--ea-watch); }
.cf-origin[data-state="errors"] svg, .cf-origin[data-state="unreachable"] svg { color: var(--ea-bad); }
.cf-origin b { color: var(--ea-ink); font-weight: 600; }

/* hero entrance, once per open: shell 0 → number 100 ms (JS) → pulse 250 → ring 400 → stats 550 */
.cf .ea-hero.is-enter { animation: eaRise 0.45s var(--ea-ease) both; }
.cf .ea-hero.is-enter .cf-draw--pulse { animation: eaDraw 0.9s var(--ea-ease) 0.25s both; }
.cf .ea-hero.is-enter .cf-hf { animation: eaFade 0.5s ease 0.45s both; }
.cf .ea-hero.is-enter .cf-enddot { animation: eaFade 0.15s linear 1.15s both; } /* the line reaches it at 0.25 + 0.9 s */
.cf .ea-hero.is-enter .cf-beat { animation-delay: 1.3s; }
.cf .ea-hero.is-enter .ea-ring__seg { animation: eaRing 0.9s var(--ea-ease) 0.4s both; }
.cf .ea-hero.is-enter .ea-ring__center { animation: eaFade 0.3s ease 0.55s both; }
.cf .ea-hero.is-enter .ea-stats,
.cf .ea-hero.is-enter .cf-origin { animation: eaFadeUp 0.3s ease 0.55s both; }
.cf-beat { animation: cfBeat 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---------- errors: the seismograph's labels ---------- */
.cf-seis__usual { fill: var(--ea-ink-2); paint-order: stroke; stroke: #14151f; stroke-width: 4px; stroke-linejoin: round; }
.cf-seis__note { font-size: 11px; fill: var(--ea-ink); font-weight: 650; }
.cf-seis__note-sub { fill: var(--ea-ink-3); font-weight: 500; }
.ea-enter.is-in .cf-seis { animation: eaReveal 0.9s var(--ea-ease) 0.15s both; }

/* ---------- speed ---------- */
.cf-speed { display: flex; align-items: flex-end; gap: 22px; margin-top: 14px; }
.cf-speed__v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ea-ink-2); line-height: 1; }
.cf-speed__v small, .cf-speed .ea-lead__num small { font-size: 13px; margin-left: 3px; }
.cf-speed__lbl { margin-top: 5px; font-size: 12px; line-height: 1.3; color: var(--ea-ink-3); max-width: 170px; }
.ea-enter.is-in .cf-speed { animation: eaFadeUp 0.3s ease 0.12s both; }

/* ---------- ads ---------- */
.cf-paid { margin-top: 6px; }
.cf-paid__row { padding: 14px 0; }
.cf-paid__row + .cf-paid__row { border-top: 1px solid var(--ea-line); }
.cf-paid__row:last-child { padding-bottom: 4px; }
.cf-paid__top { display: flex; align-items: center; gap: 10px; }
.cf-paid__logo { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; }
.cf-paid__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; }
.cf-paid__name small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--ea-ink-3); }
.cf-paid__pct { text-align: right; }
.cf-paid__pct b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cf-paid__pct span { font-size: 11px; color: var(--ea-ink-3); }
.cf-paid__pct b.is-bad { color: var(--ea-bad); }
.cf-paid__pct b.is-warn { color: var(--ea-watch); }

/* ---------- radar ---------- */
.cf-blips { margin-top: 6px; }
.cf-blip { padding: 12px 0; border-top: 1px solid var(--ea-line); min-width: 0; }
.cf-blip:first-child { border-top: 0; }
.cf-blip__top { display: flex; align-items: center; gap: 10px; }
.cf-blip__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-blip__note { margin-top: 1px; font-size: 12px; color: var(--ea-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-blip__bar { display: flex; height: 6px; margin-top: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.cf-blip__base { width: calc(var(--v) * 1%); background: rgba(255, 255, 255, 0.3); transform-origin: left center; }
.cf-blip__extra { width: calc(var(--v) * 1%); background: var(--c, var(--cf-verified)); transform-origin: left center; }
.cf-blip__nums { margin-top: 5px; font-size: 12px; color: var(--ea-ink-3); }
.cf-growth { flex-shrink: 0; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--cf-verified-ink); background: rgba(124, 111, 217, 0.16); }
.cf-growth--new { color: var(--ea-ink); background: rgba(124, 111, 217, 0.3); }
.cf-radar-calm { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.cf-radar-scope {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: radial-gradient(circle, transparent 0 23%, rgba(255, 255, 255, 0.1) 24% 25%, transparent 26% 48%, rgba(255, 255, 255, 0.08) 49% 50%, transparent 51%);
    overflow: hidden;
}
.cf-radar-scope::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 72%, rgba(255, 255, 255, 0.32) 100%);
    animation: eaSpin 4s linear infinite;
}
.cf-radar-scope::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--ea-neutral); }
.cf-radar-calm__t { font-size: 15px; font-weight: 650; }
.cf-radar-calm__s { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ea-ink-3); }

/* ---------- the Integrations card: 30 thin bars like the neighbours (meta lines: kit .ea-cardmeta) ---------- */
.integration-card__metric-pill--cf { color: #5eead4; background: rgba(94, 234, 212, 0.12); }
#integration-cf-card .cf-cs { display: flex; align-items: flex-end; gap: 1.5px; height: 36px; }
#integration-cf-card .cf-cs__bar { position: relative; flex: 1; height: 100%; }
#integration-cf-card .cf-cs__g,
#integration-cf-card .cf-cs__h { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; transform-origin: bottom; animation: eaGrowY 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--k, 0) * 18ms); }
#integration-cf-card .cf-cs__g { height: calc(var(--g) * 1%); background: rgba(124, 111, 217, 0.18); }
#integration-cf-card .cf-cs__h { height: max(2px, calc(var(--h) * 0.9%)); background: linear-gradient(180deg, #5eead4, #14b8a6); }

/* ---------- motion ---------- */
@keyframes cfBeat { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    #integration-cf-card * {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Продажі: the bot line under the GA live card (cf.js renderSalesBots) ----------
   Reads as the card's footer: the card loses its bottom edge, the line carries it on. */
#sales-live-card:not(.hidden):has(+ .sales-cf-bots:not(.hidden)) {
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom-width: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.sales-cf-bots {
    margin: 0 18px 16px;
    padding: 0 16px 13px;
    background: rgba(34, 197, 94, 0.02);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-top-width: 0;
    border-radius: 0 0 14px 14px;
    color: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 1.4s ease, border-color 1.4s ease, opacity 0.4s ease;
}
.sales-cf-bots:active { background: rgba(34, 197, 94, 0.06); transition: background 0.1s; }
.ga-live-card--stale + .sales-cf-bots { background: rgba(255, 255, 255, 0.01); border-color: rgba(255, 255, 255, 0.10); }
.sales-cf-bots.is-stale { opacity: 0.55; }
.sales-cf-bots__in { padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sales-cf-bots__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sales-cf-bots__t { font-size: 13px; min-width: 0; }
.sales-cf-bots__t b { font: 800 15px var(--ea-font-num); color: var(--cf-verified-ink); }
.sales-cf-bots__age { font-size: 10.5px; color: rgba(255, 255, 255, 0.38); white-space: nowrap; }
.sales-cf-bots__bar { display: flex; gap: 2px; margin: 8px 0 7px; }
.sales-cf-bots__bar i { display: block; height: 100%; transition: width 0.6s var(--ea-ease); }
.sales-cf-bots .is-human { background: var(--cf-human); }
.sales-cf-bots .is-verified { background: var(--cf-verified); }
.sales-cf-bots .is-auto { background: var(--cf-leak); }
.sales-cf-bots .is-stopped { background: var(--cf-stopped); }
.sales-cf-bots__rows { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; font-size: 11.5px; color: rgba(255, 255, 255, 0.62); }
.sales-cf-bots__rows i { width: 8px; height: 8px; border-radius: 2px; }
.sales-cf-bots__rows b { font-weight: 700; color: rgba(255, 255, 255, 0.88); text-align: right; font-variant-numeric: tabular-nums; }
.sales-cf-bots__n { color: rgba(255, 255, 255, 0.5); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the people count inside the people row (Sasha 09.10: one line less) */
.sales-cf-bots__rows .sales-cf-bots__ppl { font: 700 12.5px var(--ea-font-num); color: var(--cf-human); text-align: left; }
@media (prefers-reduced-motion: reduce) { .sales-cf-bots__bar i { transition: none; } }