/* =====================================================================================================================
   Grow Admin · shared/ap-intel.css: Competitor research section (real data). Loaded only by competitors/* pages.
   DS tokens only; no color-mix() (WebKit). Mobile-first; container queries on main.
   ===================================================================================================================== */

/* source + real-data badges, "not available" */
.ci-src { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--bg); color: var(--ink-2);
  font-size: 12px; font-weight: 650; line-height: 1.2; vertical-align: middle; }
.ci-src svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.ci-src span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sec-h p .ci-src, .ci-badges .ci-src { margin: 2px 0; }
.ap-sec-h p { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.ap-sec-h { min-width: 0; }
.ap-sec-h > * { min-width: 0; max-width: 100%; }
.ci-real { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--evt-soft); color: var(--evt-ink);
  font-size: 12px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.ci-real svg { width: 13px; height: 13px; }
.ci-na { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.ci-na-why { font-weight: 550; }
.ci-na-s { display: inline-block; min-width: 1.5em; text-align: center; color: var(--ink-3); font-weight: 600; cursor: help; border-bottom: 1px dotted var(--line-2); line-height: 1.2; }
.ci-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ci-legend b { color: var(--ink-2); }
.ci-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ci-asof { font-size: 12.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

/* brand dot / link / you tag */
.ci-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 0; background: var(--cprev); }
.ci-dlink { display: inline-flex; align-items: center; color: var(--ink); font-weight: 650; text-decoration: none; white-space: nowrap; }
.ci-dlink:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.ci-you { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--acc-soft); color: var(--acc-ink); font-size: 11px; font-weight: 750; }
.ci-ext { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ci-ext svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.ci-ext:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* loading */
.ci-loading { display: flex; align-items: center; gap: 10px; padding: 28px 4px; color: var(--ink-3); font-weight: 600; }
.ci-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ci-spin .8s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }

/* section intro note */
.ci-intro { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 18px; border-radius: var(--r-tile); background: var(--sf); box-shadow: var(--e1);
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ci-intro > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ink-3); }
.ci-intro b { color: var(--ink); }
.ci-intro > div { flex: 1; min-width: 0; }
.ci-intro-act { flex: none; align-self: center; white-space: nowrap; }
@media (max-width: 600px) { .ci-intro { flex-wrap: wrap; } .ci-intro-act { margin-left: 28px; min-height: 40px; } }

/* scorecard (overview) */
.ci-score { container: ciscore / inline-size; }
.ci-st { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ci-st th, .ci-st td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ci-st thead th { position: sticky; top: calc(var(--hdr) + var(--stripe-h)); z-index: 2; background: var(--sf); font-size: 12px; font-weight: 650; color: var(--ink-3); vertical-align: bottom; white-space: normal; min-width: 84px; max-width: 132px; line-height: 1.25; }
.ci-swrap .ci-st thead th { position: static; }
.ci-st thead th small { display: block; font-weight: 550; font-size: 11px; margin-top: 2px; }
.ci-st th:first-child, .ci-st td:first-child { text-align: left; position: sticky; left: 0; background: var(--sf); z-index: 1; }
.ci-st thead th:first-child { z-index: 3; }
.ci-st tbody tr:hover td, .ci-st tbody tr:hover th { background: var(--hover); }
.ci-st tbody tr.is-base td, .ci-st tbody tr.is-base th { background: var(--acc-soft); }
.ci-st tbody tr:last-child td, .ci-st tbody tr:last-child th { border-bottom: 0; }
.ci-st td .ci-na { font-size: 12px; }
.ci-st td .ci-cell { display: inline-grid; justify-items: end; gap: 2px; }
.ci-st td .ci-cell small { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.ci-st .ci-grp td { padding-top: 14px; padding-bottom: 6px; text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--sf); }
.ci-swrap { position: relative; overflow-x: auto; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); }
.ci-na-s { position: relative; }
.ci-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--bg); overflow: hidden; min-width: 60px; }
.ci-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--c2); }
.ci-best { color: var(--evt-ink); }

/* KPI grid used on several pages */
.ci-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin-bottom: 18px; }
.ci-kpi { padding: 14px 16px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); min-width: 0; }
.ci-kpi-l { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ci-kpi-v { display: block; margin-top: 6px; font-size: 24px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ci-kpi-v .ci-na { font-size: 13px; }
.ci-kpi-s { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); font-weight: 550; line-height: 1.35; }

/* two-column grids */
.ci-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container main (min-width: 900px) { .ci-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ci-grid2 > .wide { grid-column: 1 / -1; } }
.ci-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container main (min-width: 760px) { .ci-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container main (min-width: 1180px) { .ci-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-legend-row i { width: 10px !important; height: 10px !important; border-radius: 3px !important; }
.ci-hbars li > span { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* change feed */
.ci-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.ci-feed li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.ci-feed li:last-child { border-bottom: 0; }
.ci-feed .ap-itile { width: 34px; height: 34px; }
.ci-feed p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.ci-feed p b { color: var(--ink); }
.ci-feed small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.ci-feed time { font-size: 12.5px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.ci-feed a { color: inherit; }

/* ad gallery */
.ci-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.ci-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); overflow: hidden; }
.ci-card:hover { box-shadow: var(--e2); }
.ci-card-m { position: relative; display: block; background: var(--bg); aspect-ratio: 1 / 1; overflow: hidden; }
.ci-thumb { position: absolute; inset: 0; display: grid; place-items: center; }
/* contain, never crop: ad creatives carry text and logos at the edges; a soft blurred copy fills the letterbox.
   Both images are pinned to the frame (a % height inside the auto-sized grid row would not resolve and the
   creative would overflow the frame and be clipped). */
.ci-thumb img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.ci-thumb .ci-thumb-bg { inset: -12px; z-index: 0; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(14px) saturate(.9); opacity: .55; }
.ci-thumb.big { position: relative; }
.ci-thumb.big img { position: static; height: auto; max-height: 70vh; object-fit: contain; }
.ci-thumb-none { gap: 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; align-content: center; justify-items: center; }
.ci-thumb-none svg { width: 26px; height: 26px; }
.ci-play { position: absolute; z-index: 2; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 14px;
  background: rgba(20, 22, 24, .72); color: #fff; font-size: 12px; font-weight: 700; }
.ci-play svg { width: 14px; height: 14px; }
.ci-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ci-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--bg); color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.ci-pill svg { width: 12px; height: 12px; }
.ci-pill[data-on="1"] { background: var(--evt-soft); color: var(--evt-ink); }
.ci-card-b { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; min-width: 0; flex: 1; }
.ci-card-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 13px; }
.ci-card-who .ci-dlink { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ci-card-who small { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.ci-card-t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ci-card-t a { color: inherit; text-decoration: none; }
.ci-card-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ci-card-t a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ci-card { position: relative; }
.ci-card-who { position: relative; z-index: 1; }
.ci-card-x { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.ci-card-f { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ci-card-f > * { position: relative; z-index: 1; }
.ci-card-f .ci-meta-i { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.ci-card-f .ci-meta-i svg { width: 13px; height: 13px; flex: none; }
.ci-card-f .ibtn { width: 32px; height: 32px; margin-left: auto; }
.ci-card-f .ibtn svg { width: 16px; height: 16px; }
.ci-viewtoggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); }
.ci-viewtoggle button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font: 650 13px/1 var(--font); cursor: pointer; }
.ci-viewtoggle button[aria-pressed="true"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
.ci-viewtoggle svg { width: 16px; height: 16px; }
.ci-more { display: flex; justify-content: center; margin-top: 18px; }
.ci-count { font-size: 13px; color: var(--ink-3); font-weight: 600; margin: 0 0 12px; }

/* ad detail */
.ci-addet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container main (min-width: 980px) {
  .ci-addet { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .ci-addet > :first-child { position: sticky; top: calc(var(--hdr) + var(--stripe-h) + 16px); }
}
.ci-mediabox { border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); overflow: hidden; }
.ci-mediabox video, .ci-mediabox img { display: block; width: 100%; height: auto; max-height: min(72vh, 720px); object-fit: contain; background: #0E1012; }
.ci-mediabox img { background: var(--bg); }
.ci-mstrip { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.ci-mstrip button { flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--bg); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.ci-mstrip button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.ci-mstrip img { width: 100%; height: 100%; object-fit: cover; }
.ci-caption { margin: 0; padding: 14px 16px; border-radius: var(--r-tile); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ci-caption-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.ci-caption-h h2 { margin: 0; font-size: 15.5px; }
.ci-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.ci-cards > div { padding: 10px 12px; border-radius: var(--r-tile); background: var(--bg); font-size: 13px; color: var(--ink-2); }
.ci-cards b { display: block; color: var(--ink); margin-bottom: 3px; }
.ci-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 7px; background: var(--bg); color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.ci-chip[data-k="hook"] { background: var(--unread-soft); color: var(--unread-ink); }
.ci-chip[data-k="offer"] { background: var(--disc-soft); color: var(--disc-ink); }
.ci-chip[data-k="theme"] { background: var(--evt-soft); color: var(--evt-ink); }

/* SEO / backlinks */
.ci-tabs { margin-bottom: 16px; }
.ci-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ci-filters .sel { width: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; max-width: 100%; }
.ci-filters .search { flex: 1 1 220px; max-width: 360px; }
.ci-filters .search .inp { min-height: 40px; }
.ci-pos { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.ci-pos[data-top="3"] { background: var(--evt-soft); color: var(--evt-ink); }
.ci-pos[data-top="10"] { background: var(--unread-soft); color: var(--unread-ink); }
.ci-move { font-size: 12px; font-weight: 700; margin-left: 4px; }
.ci-move[data-dir="up"] { color: var(--evt-ink); }
.ci-move[data-dir="down"] { color: var(--alert-ink); }
.ci-url { display: inline-block; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--ink-2); }
.ci-adcopy { display: grid; gap: 10px; }
.ci-adcopy > div { padding: 12px 14px; border-radius: var(--r-tile); background: var(--bg); }
.ci-adcopy .ci-g-url { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 600; overflow-wrap: anywhere; }
.ci-adcopy .ci-g-t { display: block; margin: 3px 0; color: var(--unread-ink); font-size: 15px; font-weight: 700; }
.ci-adcopy p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.ci-adcopy small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.ci-linkcount { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ci-linkcount span { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--bg); font-size: 12px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }

/* profile */
.ci-phead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
@container main (min-width: 980px) { .ci-phead { grid-template-columns: minmax(0, 1fr) 420px; } }
.ci-shot { display: block; border-radius: var(--r-card); overflow: hidden; background: var(--bg); box-shadow: var(--e1); aspect-ratio: 1366 / 860; }
.ci-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ci-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ci-prices li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.ci-prices b { font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-prices small { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.ci-social { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ci-social li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.ci-social li > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ci-social svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.ci-social b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ci-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ci-picker a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 9px; background: var(--sf); box-shadow: var(--e1); color: var(--ink-2); font-size: 13px; font-weight: 650; text-decoration: none; }
.ci-picker a[aria-current="page"] { background: var(--ink); color: var(--sf); box-shadow: none; }
.ci-picker a[aria-current="page"] .ci-dot { box-shadow: 0 0 0 2px var(--sf); }

/* data sources */
.ci-srcs { display: grid; gap: 12px; }
.ci-srow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); }
@container main (min-width: 820px) { .ci-srow { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); align-items: start; } }
.ci-srow > * { min-width: 0; }
.ci-srow h3 { margin: 0 0 4px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ci-srow p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.ci-srow .ci-srow-link { margin-top: 6px; font-size: 13px; }
.ci-srow dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 13px; }
.ci-srow dt { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.ci-srow dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ci-srow-note { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-tile); background: var(--bg); }
.ci-srow-note p { font-size: 13px; }
.ci-detail { font-size: 12.5px; color: var(--ink-3); white-space: pre-line; overflow-wrap: anywhere; }
.ci-paid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ci-paid th, .ci-paid td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.ci-paid thead th { font-size: 12px; color: var(--ink-3); font-weight: 650; background: var(--sf); }
.ci-paid td { color: var(--ink-2); line-height: 1.45; }
.ci-paid td b { color: var(--ink); }
.ci-paid tr.is-pick td { background: var(--acc-soft); }
.ci-roster { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ci-roster th, .ci-roster td { padding: 9px 12px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.ci-roster thead th { font-size: 12px; color: var(--ink-3); font-weight: 650; }
.ci-roster td { color: var(--ink-2); }
.ci-roster code, .ci-srow code, .ci-intro code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; background: var(--bg); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

/* phone */
@media (max-width: 600px) {
  .ci-kpi-v { font-size: 21px; }
  .ci-gal { grid-template-columns: minmax(0, 1fr); }
  .ci-url { max-width: 200px; }
  .ci-st th, .ci-st td { padding: 9px 10px; }
  .ci-filters .sel { flex: 1 1 calc(50% - 10px); }
  .ci-filters .search { max-width: none; flex-basis: 100%; }
  /* touch targets ≥ 40px tall */
  .ci-st .ci-dlink, .ci-roster .ci-dlink, .ci-paid .ci-dlink { min-height: 40px; }
  .ci-picker a { min-height: 40px; padding: 0 13px; }
  .ci-viewtoggle button { min-height: 40px; }
  .ci-srow .ci-ext, .ap-sec-h .ci-ext, .ap-card-h .ci-ext { display: inline-flex; min-height: 40px; align-items: center; }
  .ap-card-h .btn-sm, .ci-caption-h .btn-sm { min-height: 40px; }
  .ci-card-f .ibtn { width: 40px; height: 40px; }
  .ci-card-who .ci-dlink { min-height: 40px; }
  .ci-card-t a { display: inline-block; min-height: 24px; padding: 8px 0; margin: -8px 0; }
  .ci-adcopy .ci-dlink, .ci-paid td .ci-ext, .ci-social .ci-ext, .ci-roster .ci-ext { min-height: 40px; display: inline-flex; align-items: center; }
  .ci-social li { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ci-spin { animation: none; } }

/* =====================================================================================================================
   r5 · SEO intelligence (SEO dashboard, Keyword gap, Paid search, Site health, 90-day plan)
   ===================================================================================================================== */
.ci-subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -6px 0 14px; padding: 2px; }
.ci-subnav::-webkit-scrollbar { display: none; }
.ci-subnav a { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 9px; background: var(--sf); box-shadow: var(--e1);
  color: var(--ink-2); font-size: 13px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.ci-subnav a:hover { color: var(--ink); }
.ci-subnav a[aria-current="page"] { background: var(--ink); color: var(--sf); box-shadow: none; }
.ci-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.ci-h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ci-h3 small { font-weight: 600; }
.ci-kpi-a { text-decoration: none; color: inherit; display: block; }
.ci-kpi-a:hover { box-shadow: var(--e2); }
.ci-kpi-a .ci-kpi-l::after { content: " →"; color: var(--ink-3); }

/* scorecard sort buttons */
.ci-sortb { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; cursor: pointer; }
.ci-sortb small { display: block; font-weight: 550; font-size: 11px; }
.ci-sortb svg { width: 12px; height: 12px; color: var(--ink-2); }
.ci-sortb:hover { color: var(--ink); }
th[aria-sort="descending"] .ci-sortb { color: var(--ink); }

/* trend chart controls */
.ci-trend-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.ci-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg); }
.ci-seg button { min-height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font: 650 12.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.ci-seg button[aria-pressed="true"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
.ci-trend-lg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ci-trend-lg span { display: inline-flex; align-items: center; gap: 6px; }
.ci-trend-lg i { width: 10px; height: 10px; border-radius: 3px; }
.ci-trend-lg .is-grow { color: var(--ink); font-weight: 750; }
.ap-ch-line.ci-grow-line { stroke-width: 3.25; }
.ap-chart .is-sec { opacity: .8; }

/* share of voice / visibility bars: Grow emphasised */
.ci-sov li.is-grow > span, .ci-sov li.is-grow > b { color: var(--ink); font-weight: 800; }
.ci-sov li > span a { color: inherit; text-decoration: none; }
.ci-sov li > span a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* position distribution stacked bars */
.ci-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ci-stack li { display: grid; grid-template-columns: minmax(84px, 120px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.ci-stack li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.ci-stack li > span:first-child a { color: inherit; text-decoration: none; }
.ci-stack li.is-grow > span:first-child, .ci-stack li.is-grow > b { color: var(--ink); font-weight: 800; }
.ci-stack-b { display: flex; height: 12px; min-width: 4px; border-radius: 4px; overflow: hidden; background: var(--bg); }
.ci-stack-b i { display: block; height: 100%; }
.ci-stack-b i + i { box-shadow: inset 1px 0 0 var(--sf); }
.ci-stack b { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-stack b small { font-weight: 600; color: var(--ink-3); }
.ci-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* heat tables (SERP features, content themes) */
.ci-heat td { text-align: center; }
.ci-heatc { display: inline-grid; place-items: center; min-width: 44px; height: 26px; padding: 0 6px; border-radius: 6px; font-weight: 700; font-size: 12.5px;
  background: rgba(46, 156, 121, var(--a, 0)); color: var(--ink); }
html[data-mode="dark"] .ci-heatc { background: rgba(80, 200, 150, var(--a, 0)); }
.ci-heat thead th { text-align: center; }

/* rank sparkline */
.ci-rspark { width: 96px; height: 24px; display: block; }
.ci-rspark path { fill: none; stroke: var(--c1); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }

/* keyword gap categories / opportunity pills */
.ci-cat { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 750; white-space: nowrap; background: var(--bg); color: var(--ink-2); }
.ci-cat[data-c="missing"] { background: var(--alert-soft); color: var(--alert-ink); }
.ci-cat[data-c="untapped"] { background: var(--unread-soft); color: var(--unread-ink); }
.ci-cat[data-c="weak"] { background: var(--disc-soft); color: var(--disc-ink); }
.ci-cat[data-c="strong"] { background: var(--evt-soft); color: var(--evt-ink); }
.ci-cpos { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.ci-cpos span { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--bg); font-size: 11.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.ci-cpos .ci-dot { width: 7px; height: 7px; margin: 0; }
.ci-opp { display: inline-grid; justify-items: end; gap: 3px; }
.ci-opp .ci-bar { min-width: 56px; }

/* content clusters / plan cards */
.ci-clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.ci-cl { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); min-width: 0; }
.ci-cl h3 { margin: 0; font-size: 14.5px; line-height: 1.35; }
.ci-cl .ci-cl-k { display: flex; flex-wrap: wrap; gap: 4px; }
.ci-cl .ci-cl-k span { display: inline-flex; height: 22px; align-items: center; padding: 0 7px; border-radius: 6px; background: var(--bg); color: var(--ink-2); font-size: 12px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-cl-m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ci-cl-m b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ci-cl-s { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ci-cl-s b { color: var(--ink); }
.ci-cl-f { margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--ink-3); }

/* plan */
.ci-plan { counter-reset: plan; display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.ci-plan > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); }
.ci-plan > li::before { counter-increment: plan; content: counter(plan); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--acc-soft); color: var(--acc-ink); font-weight: 800; font-size: 14px; }
.ci-plan h3 { margin: 4px 0 4px; font-size: 15px; line-height: 1.35; }
.ci-plan p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ci-plan .ci-cl-m { margin-top: 6px; }
.ci-phase { display: grid; gap: 14px; }
@container main (min-width: 980px) { .ci-phase { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ci-phase > section h3 { margin: 0 0 4px; font-size: 15px; }
.ci-phase > section > p { margin: 0 0 10px; font-size: 13px; color: var(--ink-3); }
.ci-phase ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.ci-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 750; background: var(--bg); color: var(--ink-2); vertical-align: 1px; }
.ci-tag[data-t="error"], .ci-tag[data-t="high"] { background: var(--alert-soft); color: var(--alert-ink); }
.ci-tag[data-t="warning"], .ci-tag[data-t="med"] { background: var(--disc-soft); color: var(--disc-ink); }
.ci-tag[data-t="notice"], .ci-tag[data-t="low"] { background: var(--unread-soft); color: var(--unread-ink); }
.ci-tag[data-t="sample"] { background: var(--disc-soft); color: var(--disc-ink); }
.ci-issue { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.ci-issue:last-child { border-bottom: 0; }
.ci-issue-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ci-issue-h b { font-size: 14px; color: var(--ink); }
.ci-issue-h .n { margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ink); }
.ci-issue p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.ci-issue details summary { cursor: pointer; font-size: 12.5px; font-weight: 650; color: var(--ink-3); min-height: 28px; display: inline-flex; align-items: center; }
.ci-issue details ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; }
.ci-health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ci-gauge { width: 120px; height: 120px; }
.ci-gauge circle { fill: none; stroke-width: 12; }
.ci-gauge .bg { stroke: var(--bg); }
.ci-gauge .fg { stroke: var(--c1); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ci-gauge text { font: 800 28px/1 var(--font); fill: var(--ink); }
.ci-gauge text.s { font: 650 11px/1 var(--font); fill: var(--ink-3); }
.ci-status { min-width: 128px; }
.ci-status select { min-height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--sf); color: var(--ink); font: 600 12.5px/1 var(--font); padding: 0 6px; max-width: 100%; }
.ci-adtext { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; white-space: normal; max-width: 420px; }
.ci-adtext b { display: block; color: var(--unread-ink); font-size: 13px; }
@media (max-width: 600px) {
  .ci-subnav a { min-height: 40px; }
  .ci-seg button { min-height: 40px; }
  .ci-stack li { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .ci-health { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ci-status select { min-height: 40px; }
  .ci-sortb { min-height: 40px; justify-content: flex-end; }
}

/* r5 visual fixes (round 1) */
.ap-ch-line.ci-grow-line { stroke-width: 3.5; }
.ap-ch-line.ci-comp-line { stroke-width: 1.4; opacity: .55; }
.ap-ch-marks.ci-comp-line { opacity: .45; }
.ci-top { align-items: start; }
.ci-sc thead th { vertical-align: bottom; }
.ci-sc .ci-sortb { min-height: 36px; justify-content: flex-end; }
.ci-stack li { grid-template-columns: minmax(100px, 150px) minmax(0, 1fr) auto; }
.ci-stack-b { min-width: 6px; }

/* r5 fixes (round 2) */
.ci-cpos .ci-cnt { font-style: normal; margin-left: 4px; padding-left: 5px; border-left: 1px solid var(--line); color: var(--ink); font-weight: 750; }
.ci-cl-k .ap-muted { background: none; }
.ci-cl-f .ci-url { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ci-cl { container-type: inline-size; }

/* r5 touch targets (≥ 40px tall at phone widths) */
@media (max-width: 600px) {
  .ci-sc .ci-sortb { min-height: 44px; }
  .ci-trend-top .btn-sm { min-height: 40px; }
  .ci-sov li > span a, .ci-stack li > span:first-child a { display: inline-flex; align-items: center; min-height: 40px; }
  .ci-sov li, .ci-stack li { min-height: 40px; }
  .ci-intro a, .ci-note a, .ci-phase a, .ci-cl-f a, .ci-issue details a, .ci-st td a:not(.ci-dlink), .ci-st th a:not(.ci-dlink) { display: inline-flex; align-items: center; min-height: 40px; }
  .ci-cl-f .ci-url, .ci-issue details .ci-url { display: inline-flex; align-items: center; min-height: 40px; }
  .ci-issue details li { min-height: 40px; display: flex; align-items: center; }
  .ci-issue details summary { min-height: 40px; }
}
@media (max-width: 600px) { .ap-fclear { display: inline-flex; align-items: center; min-height: 40px; padding: 0 6px; } }
@media (max-width: 600px) {
  .ci-sov li > span a, .ci-stack li > span:first-child a, .ci-st td a:not(.ci-dlink), .ci-phase a { min-width: 32px; justify-content: center; }
  .ci-plan .ci-url, .ci-cl-m .ci-url { display: inline-flex; align-items: center; min-height: 40px; }
}
/* r5: source chips inside card headers never push the page wider than the viewport */
.ap-card-h > .ci-badges, .ap-card-h > .ci-src { min-width: 0; max-width: 100%; }
.ap-card-h > div:first-child { min-width: 0; }
.ci-badges { min-width: 0; max-width: 100%; }
.ci-badges .ci-src { max-width: 100%; }
@media (max-width: 600px) { .ap-card-h > .ci-badges, .ap-card-h > .ci-src { flex: 1 1 100%; } }
/* r5: scrolling sub-nav fades at the edge on narrow screens; an odd last KPI card spans the row on phones */
@media (max-width: 760px) { .ci-subnav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; } }
@media (max-width: 600px) { .ci-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* r5: brand colours 6–13 as tokens (light / dark) so charts and dots stay readable in dark mode */
:root { --ci-b6: #7A8B99; --ci-b7: #2E9C79; --ci-b8: #B5651D; --ci-b9: #8E6CC0; --ci-b10: #C2185B; --ci-b11: #00838F; --ci-b12: #9E9D24; --ci-b13: #5D6D7E; }
html[data-mode="dark"] { --ci-b6: #AEBDC9; --ci-b7: #5FD3A8; --ci-b8: #E59A5C; --ci-b9: #C3A6F0; --ci-b10: #F27AA6; --ci-b11: #4FD0DC; --ci-b12: #D2D05A; --ci-b13: #9FB0C2; }
html[data-mode="dark"] .ap-ch-line.ci-comp-line { opacity: .72; stroke-width: 1.6; }
html[data-mode="dark"] .ap-ch-marks.ci-comp-line { opacity: .6; }
html[data-mode="dark"] .ci-subnav a[aria-current="page"] { background: var(--acc-soft); color: var(--acc-ink); box-shadow: inset 0 0 0 1px var(--acc-ink); }
html[data-mode="dark"] .ci-bar { background: rgba(255, 255, 255, .08); }