/* gsc.css — «Пошук Google» (web/gsc.js): only what is the page's own. The shared parts (top bar,
   hero, switch, panels, rows, split bars, column chart, caption, sheet, skeletons, error card,
   motion) are the kit: web/ea-ui.css. Built for 440 and 384 px only.
   Colour carries one meaning each:
     clicks (people coming from Google) = mint   impressions = a thin neutral bar
     weekends = soft pink                         brand queries = neutral white (the rest = mint)
     the Google blue only on the logo and the icon chips (the integration's accent)
   Good / bad changes use the kit pills (green / rose); a lower position is the good direction.
   No accent line on the left of anything. Motion: the hero rises and counts up once per open; a
   period switch only tweens numbers (0.3 s) and cross-fades the chart. */

.sc {
    --sc-desk: #14b8a6;
    --sc-tab: rgba(255, 255, 255, 0.32);
    --sc-brand: rgba(236, 236, 248, 0.62);
    --sc-impr: rgba(255, 255, 255, 0.3);
    --sc-wkd: #f9a8d4;
    --sc-blue: #8ab4f8;
}

/* ---------- top bar: back · logo · «Пошук Google» + source line · refresh ---------- */
.sc .ea-top { gap: 10px; }
.sc .ea-top__id { gap: 10px; }
.sc .sc-mark { width: 24px; height: 24px; }
.sc .ea-top__title { white-space: nowrap; }
.sc .ea-top__sub.is-failed { color: var(--ea-bad); }

/* ---------- the period switch: above the hero, the only thing it changes (so it does not stick) ---------- */
.sc .sc-switch-wrap { position: static; margin: 0 0 12px; padding: 0; background: none; }
.sc .sc-switch-wrap::after { content: none; }
#sc-root.is-down .sc-switch-wrap { display: none; }

/* ---------- hero ---------- */
.sc .ea-hero.is-enter { animation: eaRise 0.45s var(--ea-ease) both; }
.sc .sc-kick { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc .ea-hero__row .ea-live { flex-shrink: 0; }
.sc .sc-main { margin-top: 12px; }
.sc .ea-big { font-size: min(58px, calc((100vw - 64px) * 0.165)); }
.sc .ea-big__label { margin-top: 6px; }
.sc-chg { flex-shrink: 0; align-self: flex-start; margin-top: 6px; }
.sc-chg.is-none { visibility: hidden; }
.sc-say { margin-top: 10px; min-height: 38px; font-size: 13px; line-height: 1.45; color: var(--ea-ink-2); }
.sc-say__dim { color: var(--ea-ink-3); white-space: nowrap; }
.sc .sc-hchart { height: 112px; margin-top: 12px; }
.sc .sc-cap { margin-top: 10px; }
.sc .sc-cap .ea-cap__when { white-space: nowrap; }
.sc .ea-col-mark.sc-wkd { fill: var(--sc-wkd); opacity: 0.7; }
.sc .ea-axis-lbl.sc-wkd { fill: var(--sc-wkd); opacity: 0.85; }
.sc .sc-wkd-t { color: var(--sc-wkd); }

/* three more figures of the period: name + a plain line on the left, value + change on the right */
.sc-kvs { margin-top: 12px; border-top: 1px solid var(--ea-line); }
.sc-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.sc-kv + .sc-kv { border-top: 1px solid var(--ea-line); }
.sc-kv__k { min-width: 0; font-size: 15px; font-weight: 600; }
.sc-kv__k small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--ea-ink-3); }
.sc-kv__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; width: 116px; } /* fixed: a wider value never re-wraps the left column */
.sc-kv__v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.sc-kv__d { display: flex; min-height: 21px; align-items: center; }

/* ---------- the 28-day section header ---------- */
.sc-sect { margin: 22px 2px 0; }
.sc-sect__txt { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--ea-ink-3); }
.sc .sc-panels { margin-top: 12px; }
.sc-warn { margin-top: 10px; }

/* ---------- rows ---------- */
:where(.ea-page, .ea-sheet) button.sc-row { display: block; width: 100%; min-height: 44px; text-align: left; }
:where(.ea-page, .ea-sheet) .sc-row.is-tap .ea-row__val::after { content: '›'; margin-left: 7px; color: var(--ea-ink-4); font-weight: 600; }
:where(.ea-page, .ea-sheet) .sc-row.is-tap:active { opacity: 0.7; }
:where(.ea-page, .ea-sheet) .sc-path { font-family: var(--ea-font-mono); font-size: 13px; font-weight: 500; }
:where(.ea-page, .ea-sheet) .sc-bar2 { margin-top: 3px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.sc .sc-row.is-part .ea-row__bar .ea-row__fill { opacity: 0.5; }
.sc .sc-tag { --c: var(--ea-ink-2); }
.sc .sc-open svg { transform: none; }

/* brand: two split bars (clicks, impressions) with their numbers, then the two lists behind a mini toggle */
.sc-bsplit { margin-top: 14px; }
.sc-bsplit__k { font-size: 12px; font-weight: 600; color: var(--ea-ink-3); }
.sc .sc-bsplit .ea-split { margin-top: 6px; }
.sc-bsplit__lbls { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--ea-ink-3); }
.sc-bsplit__lbls span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.sc-bsplit__lbls b { font-size: 13px; font-weight: 650; color: var(--ea-ink); }
.sc-bsplit__lbls em { font-style: normal; color: var(--ea-ink-2); }
.sc-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--ea-mint); align-self: center; }
.sc-sw--brand { background: var(--sc-brand); }
.sc-bhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.sc-bhead__n { font-size: 12px; color: var(--ea-ink-3); }
.sc .sc-term { color: var(--ea-ink-2); font-weight: 600; }

.sc .sc-how summary { min-height: 44px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; text-indent: 0; padding-left: 0; }
.sc .sc-how summary::before { flex-shrink: 0; }
.sc .sc-how ul { padding: 0; }
.sc .sc-how li { margin-top: 6px; }

/* ---------- sheets: a full list with a search box, a page with its queries ---------- */
.ea-sheet.sc-sheet .ea-sheet__body { padding-top: 4px; }
.sc-find {
    position: sticky;
    top: 0; /* #app-content scroll-padding-top already keeps it under the glass header */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px; /* the field itself 44 px */
    padding: 0 12px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: #161a28;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--ea-ink-3);
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.9);
}
.sc-find__in {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: none;
    border: 0;
    outline: none;
    color: var(--ea-ink);
    font-family: inherit;
    font-size: 16px; /* 16 px: iPhone does not zoom into the field */
    -webkit-appearance: none;
    appearance: none;
}
.sc-find__in::placeholder { color: var(--ea-ink-4); }
.sc-find__in::-webkit-search-cancel-button { -webkit-appearance: none; }
.sc-find__n { flex-shrink: 0; font-size: 12px; color: var(--ea-ink-3); }
.sc-smore {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ea-ink-2);
    cursor: pointer;
}
.sc-empty { padding: 18px 0; font-size: 13px; line-height: 1.45; color: var(--ea-ink-3); text-align: center; }
.sc-backlink { display: inline-flex; align-items: center; gap: 4px; height: 44px; margin: -6px 0 0 -4px; padding: 0 4px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ea-ink-2); background: none; border: 0; cursor: pointer; }
.sc-url { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 44px; margin: -8px 0 -6px; font-family: var(--ea-font-mono); font-size: 12px; line-height: 1.4; color: var(--sc-blue); text-decoration: none; overflow-wrap: anywhere; }
.sc-url svg { flex-shrink: 0; }
.sc-sstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--ea-line); border-bottom: 1px solid var(--ea-line); }
.sc-sstat { min-width: 0; padding: 0 8px; }
.sc-sstat:first-child { padding-left: 0; }
.sc-sstat + .sc-sstat { border-left: 1px solid var(--ea-line); }
.sc-sstat__k { font-size: 12px; color: var(--ea-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-sstat__v { margin-top: 3px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.ea-sheet .sc-ssub { margin-top: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ea-sheet .sc-ssub small { font-size: 12px; font-weight: 400; color: var(--ea-ink-3); white-space: nowrap; }
.sc-snote { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--ea-ink-3); }
.sc-sheet .sc-srows { margin-top: 12px; }

/* ---------- S24 (384 px): the top bar keeps its words ---------- */
@media (max-width: 419px) {
    .sc .ea-top__title { font-size: 18px; }
    .sc .ea-top, .sc .ea-top__id { gap: 8px; }
}