/* Case analytics use the site's existing light surfaces, Inter and Mono UI. */
.tc-analytics {
  --analytics-bg: var(--tc-surface);
  --analytics-surface: var(--tc-paper);
  --analytics-line: var(--tc-rule);
  --analytics-text: var(--tc-ink);
  --analytics-muted: var(--tc-quiet);
  --analytics-total: var(--tc-ink);
  --analytics-yandex: var(--accent-red);
  --analytics-google: var(--blue-dark);
  --analytics-form: var(--accent-red);
  --analytics-phone: var(--blue-dark);
  --analytics-impressions: var(--blue-dark);
  --analytics-clicks: color-mix(in srgb, var(--accent-green) 55%, var(--tc-ink));
  --analytics-ctr: var(--red-dark);
  --analytics-position: var(--blue-dark);
  --analytics-click-position: var(--red-dark);
  --analytics-pages: color-mix(in srgb, var(--accent-green) 55%, var(--tc-ink));
  width: 100%;
  margin-inline: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--analytics-bg);
  color: var(--analytics-text);
  font-family: var(--font-sans), sans-serif;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--analytics-line);
  border-radius: 2px;
  color-scheme: light;
}
.tc-analytics [hidden] { display: none !important; }
.tc-analytics [data-series-key="total"] { --series-color: var(--analytics-total); }
.tc-analytics [data-series-key="yandex"] { --series-color: var(--analytics-yandex); --series-dash: none; }
.tc-analytics [data-series-key="google"] { --series-color: var(--analytics-google); --series-dash: none; }
.tc-analytics [data-series-key="form"] { --series-color: var(--analytics-form); }
.tc-analytics [data-series-key="phone"] { --series-color: var(--analytics-phone); --series-dash: 8 4; }
.tc-analytics [data-series-key="impressions"] { --series-color: var(--analytics-impressions); }
.tc-analytics [data-series-key="clicks"] { --series-color: var(--analytics-clicks); --series-dash: 8 4; }
.tc-analytics [data-series-key="ctr"] { --series-color: var(--analytics-ctr); }
.tc-analytics [data-series-key="position"] { --series-color: var(--analytics-position); }
.tc-analytics [data-series-key="click_position"] { --series-color: var(--analytics-click-position); --series-dash: 8 4; }
.tc-analytics [data-series-key="pages"] { --series-color: var(--analytics-pages); }
.tc-analytics-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 2rem; }
.tc-analytics-logo { display: block; width: clamp(4rem, 8vw, 6rem); max-width: 100%; height: auto; object-fit: contain; }
.tc-analytics-header .tc-analytics-growth { align-items: flex-end; text-align: right; margin-left: auto; }
.tc-analytics-header .tc-analytics-period { margin-top: .75rem; }
.tc-analytics-period { display: inline-flex; align-items: center; gap: .5rem; color: var(--analytics-muted); font-size: .75rem; }
.tc-analytics-period svg { flex: none; width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.5; fill: none; }
.tc-analytics-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; gap: 2rem; padding-block: .5rem 2rem; }
.tc-analytics-growth { display: flex; flex-direction: column; align-items: flex-start; }
.tc-analytics-metric-label { color: var(--analytics-muted); font-size: .8125rem; }
.tc-analytics-growth > strong { margin-block: .5rem; font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; white-space: nowrap; }
.tc-analytics-delta { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; }
.tc-analytics-delta img { width: .75rem; height: .875rem; flex: none; }
.tc-analytics-comparison { max-width: 40rem; font-size: .875rem; line-height: 1.55; }
.tc-analytics-comparison > p:first-child { margin-bottom: .75rem; color: var(--analytics-text); }
.tc-analytics-comparison > p:last-child { color: var(--analytics-muted); }
.tc-analytics-chart { margin-top: 1.25rem !important; padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--analytics-line); border-radius: .25rem; background: var(--analytics-surface); }
.tc-analytics-chart-bar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.25rem; }
.tc-page .tc-analytics-chart-title { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.04em; }
.tc-analytics-chart-subtitle { color: var(--analytics-muted); font-size: .75rem; margin-top: .375rem !important; max-width: 40rem; }
.tc-analytics-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tc-analytics-chart[data-analytics-kind="traffic"] .tc-analytics-controls { width: 100%; }
.tc-analytics-chart[data-analytics-kind="traffic"] .tc-analytics-control { height: 2.75rem; white-space: nowrap; }
.tc-analytics-control { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem .75rem; border: 1px solid var(--analytics-line); border-radius: 2px; background: transparent; color: var(--analytics-muted); font: .75rem/1.3 var(--font-mono), monospace; transition: border-color 160ms, background-color 160ms, color 160ms; touch-action: manipulation; }
.tc-analytics-control[aria-pressed="true"] { border-color: var(--analytics-text); background: var(--analytics-bg); color: var(--analytics-text); }
.tc-analytics-control[aria-pressed="false"] .tc-analytics-legend-line { opacity: .35; }
.tc-analytics-control:hover { border-color: var(--analytics-text); }
.tc-analytics-controls--groups { width: 100%; }
.tc-analytics-controls--groups .tc-analytics-control[aria-pressed="true"] { color: var(--analytics-surface); background: var(--analytics-text); }
.tc-analytics-active-legend { min-height: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.tc-analytics-legend-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; }
.tc-analytics-legend-line { flex: none; width: 1.25rem; height: .1875rem; background: var(--series-color); border-radius: 1px; }
.tc-analytics-control .tc-analytics-search-logo { display: block; flex: 0 0 1rem; width: 1rem; height: 1rem; margin: 0; }
.tc-analytics [data-series-key="clicks"] .tc-analytics-legend-line,
.tc-analytics [data-series-key="click_position"] .tc-analytics-legend-line { background: repeating-linear-gradient(to right, var(--series-color) 0 7px, transparent 7px 10px); }
.tc-analytics-axis-titles { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: 1.5rem; color: var(--analytics-muted); font-size: .6875rem; }
.tc-analytics-axis-titles > span:last-child { text-align: right; }
.tc-analytics-plot { position: relative; height: clamp(14rem, 27vw, 23rem); margin: 1.5rem .25rem 0 3.5rem; touch-action: pan-y; }
.tc-analytics-start { pointer-events: none; }
.tc-analytics-start line { stroke: var(--analytics-text); stroke-width: 1; stroke-dasharray: 5 5; opacity: .48; vector-effect: non-scaling-stroke; }
.tc-analytics-start circle { display: none; }
.tc-analytics-start-label { position: absolute; top: .3rem; transform: translateX(-50%); padding: .25rem .45rem; background: var(--analytics-text); color: white; font: .6rem/1 var(--font-mono), monospace; white-space: nowrap; pointer-events: none; }
.tc-analytics-start[hidden], .tc-analytics-start-label[hidden] { display: none; }
.tc-analytics-chart--dual-axis .tc-analytics-plot { margin-right: 3.5rem; }
.tc-analytics-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tc-analytics-partial rect { fill: var(--analytics-bg); }
.tc-analytics-grid line { stroke: var(--analytics-line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .75; }
.tc-analytics-line { stroke: var(--series-color); stroke-width: 2.5; stroke-dasharray: var(--series-dash, none); fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tc-analytics-end { stroke: var(--series-color); fill: var(--analytics-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tc-analytics-axis { position: absolute; top: 0; bottom: 0; color: var(--analytics-muted); font-size: .6875rem; }
.tc-analytics-axis span { position: absolute; transform: translateY(-50%); white-space: nowrap; }
.tc-analytics-axis--left { left: -3.5rem; width: 3rem; }
.tc-analytics-axis--left span { right: 0; }
.tc-analytics-axis--right { right: -3.5rem; width: 3rem; }
.tc-analytics-axis--right span { left: 0; }
.tc-analytics-months { position: relative; height: 1rem; margin: 1.25rem .25rem 0 3.5rem; }
.tc-analytics-chart--dual-axis .tc-analytics-months { margin-right: 3.5rem; }
.tc-analytics-months span { position: absolute; color: var(--analytics-muted); font-size: .6875rem; transform: translateX(-50%); white-space: nowrap; }
.tc-analytics-months span:first-child { transform: none; }
.tc-analytics-months span:last-child { transform: translateX(-100%); }
.tc-analytics-crosshair { stroke: var(--analytics-muted); stroke-dasharray: 4 5; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.tc-analytics-hover-point { stroke: var(--series-color); fill: var(--analytics-surface); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.tc-analytics-tooltip { position: absolute; z-index: 15; top: .75rem; left: 0; width: 18rem; max-width: 100%; padding: 1rem; color: var(--analytics-text); background: var(--analytics-surface); border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: 0 .25rem .75rem color-mix(in srgb, var(--tc-ink) 8%, transparent); pointer-events: none; }
.tc-analytics-tooltip > strong { display: block; margin-bottom: .875rem; font-size: .75rem; font-weight: 400; }
.tc-analytics-tooltip-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-top: .625rem; font-size: .75rem; }
.tc-analytics-tooltip-row > span { color: var(--analytics-muted); }
.tc-analytics-tooltip-row > span::before { content: ''; display: inline-block; width: .375rem; height: .375rem; border-radius: 50%; background: var(--series-color); margin-right: .375rem; }
.tc-analytics-tooltip-row strong { white-space: nowrap; font-weight: 400; color: var(--analytics-text); }
.tc-analytics-chart-help { margin-top: 1.5rem; max-width: 65rem; color: var(--analytics-muted); font-size: .75rem; line-height: 1.6; }
.tc-analytics-table-details { margin-top: 1rem; border-top: 1px solid var(--analytics-line); }
.tc-analytics :is(.tc-analytics-table-details, .tc-analytics-methodology) > summary { min-height: 2.75rem; width: fit-content; max-width: 100%; padding-block: .75rem; color: var(--analytics-text); font-size: .75rem; cursor: pointer; }
.tc-analytics-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .5rem; }
.tc-analytics-table { width: 100%; border-collapse: collapse; font-size: .75rem; text-align: right; white-space: nowrap; }
.tc-analytics-table caption { text-align: left; margin-bottom: .75rem; color: var(--analytics-muted); }
.tc-analytics-table th, .tc-analytics-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--analytics-line); font-weight: 400; }
.tc-analytics-table th:first-child { text-align: left; padding-left: 0; }
.tc-analytics-table thead th { color: var(--analytics-muted); }
.tc-analytics-table-partial { display: block; color: var(--analytics-muted); font-size: .6875rem; }
.tc-analytics-position-note { margin-top: 1.5rem !important; max-width: 65rem; font-size: .8125rem; line-height: 1.6; color: var(--analytics-muted); }
.tc-analytics-position-note strong { color: var(--analytics-text); font-weight: 400; }
.tc-analytics-methodology { margin-top: 1.5rem; padding-top: .5rem; border-top: 1px solid var(--analytics-line); }
.tc-analytics-method-copy { display: grid; gap: 1rem; padding-block: .5rem 1rem; max-width: 65rem; color: var(--analytics-muted); font-size: .8125rem; line-height: 1.6; }
.tc-analytics-verification { color: var(--analytics-text); }
.tc-analytics-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tc-analytics :is(button, summary, [tabindex]):focus-visible { outline: 2px solid var(--analytics-text); outline-offset: 4px; }
.tc-analytics :is(.tc-analytics-period, .tc-analytics-metric-label, .tc-analytics-delta, .tc-analytics-comparison > p:first-child, .tc-analytics-chart-subtitle, .tc-analytics-control, .tc-analytics-legend-item, .tc-analytics-axis-titles, .tc-analytics-axis, .tc-analytics-months, .tc-analytics-tooltip, .tc-analytics-chart-help, .tc-analytics-table, summary) { font-family: var(--font-mono), monospace; font-weight: 400; letter-spacing: -.03em; line-height: 1.4; }
@media (max-width: 47.99rem) {
  .tc-analytics-summary { grid-template-columns: 1fr; gap: 1.25rem; padding-bottom: 1rem; }
  .tc-analytics-header { margin-bottom: 1.5rem; }
  .tc-analytics-chart { padding-inline: .75rem; }
  .tc-analytics-controls { width: 100%; }
  .tc-analytics-controls--groups .tc-analytics-control { flex: 1 1 auto; }
  .tc-analytics-months span:nth-child(even) { display: none; }
  .tc-analytics-axis-titles { font-size: .625rem; }
  .tc-analytics-plot { margin-left: 3rem; }
  .tc-analytics-chart--dual-axis .tc-analytics-plot { margin-right: 2.5rem; }
  .tc-analytics-months { margin-left: 3rem; }
  .tc-analytics-chart--dual-axis .tc-analytics-months { margin-right: 2.5rem; }
  .tc-analytics-axis--left { left: -3rem; width: 2.5rem; }
  .tc-analytics-axis--right { right: -2.5rem; width: 2rem; }
  .tc-analytics-tooltip { width: 14rem; padding: .75rem; }
  .tc-analytics-chart--dual-axis .tc-analytics-tooltip { max-width: calc(100% + 2rem); }
}
@media (max-width: 24rem) {
  .tc-analytics { padding: .75rem; }
  .tc-analytics-chart { padding-inline: .5rem; }
  .tc-analytics-axis { font-size: .625rem; }
  .tc-analytics-months span:not(:first-child):not(:last-child) { display: none; }
  .tc-analytics-tooltip-row { font-size: .6875rem; gap: .375rem; }
}
@media (prefers-reduced-motion: reduce) { .tc-analytics-control { transition: none; } }

/* Topvisor positions: a compact before/after table within the case analytics. */
.tc-analytics .tc-positions { margin-top: 1.5rem; padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--analytics-line); border-radius: .25rem; background: var(--analytics-surface); }
.tc-positions-filters { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-block: 1.5rem; }
.tc-positions-filters label { display: grid; gap: .5rem; min-width: 12rem; max-width: 100%; color: var(--analytics-muted); font: .75rem/1.4 var(--font-mono), monospace; }
.tc-positions-filters select { min-height: 2.75rem; width: 100%; max-width: 100%; padding: .5rem 2rem .5rem .75rem; border: 1px solid var(--analytics-line); border-radius: 2px; background: var(--analytics-surface); color: var(--analytics-text); font: .8125rem/1.4 var(--font-mono), monospace; cursor: pointer; }
.tc-positions-filters select:focus-visible { outline: 2px solid var(--analytics-text); outline-offset: 4px; }
.tc-positions-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; margin-top: 1.5rem; }
.tc-positions-table { width: 100%; border-collapse: collapse; color: var(--analytics-text); font-size: .8125rem; line-height: 1.5; }
.tc-positions-table th, .tc-positions-table td { padding: 1rem .75rem; text-align: right; vertical-align: top; border-bottom: 1px solid var(--analytics-line); font-weight: 400; }
.tc-positions-table th:first-child { width: 38%; min-width: 15rem; padding-left: 0; text-align: left; }
.tc-positions-table :is(th, td):last-child { padding-right: 0; }
.tc-positions-table thead th { white-space: nowrap; color: var(--analytics-muted); font: .6875rem/1.4 var(--font-mono), monospace; }
.tc-positions-keyword { display: block; overflow-wrap: anywhere; }
.tc-positions-number, .tc-positions-gain { display: block; font: 1.125rem/1.2 var(--font-mono), monospace; color: var(--analytics-text); white-space: nowrap; }
.tc-positions-gain > span { font-family: var(--font-sans), sans-serif; }
.tc-positions-heading-label { display: inline-flex; align-items: center; gap: .375rem; }
.tc-positions-engine-logo { display: block; flex: 0 0 1rem; width: 1rem; height: 1rem; }
.tc-positions-cell-label { display: none; }
.tc-positions-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.tc-positions-count, .tc-positions-empty { color: var(--analytics-muted); font: .75rem/1.5 var(--font-mono), monospace; }
.tc-positions-empty { padding-block: 1.5rem; max-width: 40rem; }
@media (max-width: 47.99rem) {
  .tc-analytics .tc-positions { padding-inline: .75rem; }
  .tc-positions-filters label { flex: 1 1 12rem; min-width: 0; }
  .tc-positions-table-scroll { overflow-x: visible; }
  .tc-positions-table { display: block; }
  .tc-positions-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tc-positions-table tbody { display: block; }
  .tc-positions-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .75rem; padding-block: 1.25rem; border-bottom: 1px solid var(--analytics-line); }
  .tc-positions-table tbody th, .tc-positions-table tbody td { display: block; width: auto; min-width: 0; padding: 0; text-align: left; border: 0; }
  .tc-positions-table tbody th { grid-column: 1 / -1; }
  .tc-positions-before { grid-column: 1; grid-row: 2; }
  .tc-positions-after { grid-column: 2; grid-row: 2; }
  .tc-positions-change { grid-column: 3; grid-row: 2; }
  .tc-positions-cell-label { display: block; margin-bottom: .5rem; color: var(--analytics-muted); font: .75rem/1.4 var(--font-mono), monospace; }
  .tc-positions-table .tc-positions-number, .tc-positions-table .tc-positions-gain { font-size: 1rem; }
}