/* ================================================================
    SEO — app-specific components, on top of Team's design system
    (app.css: tokens, cards, tiles, chips, tables). Uses the same
    variables only, so light/dark themes come for free.
   ================================================================ */

/* ── Site colours (identity of each site; validated light + dark) ── */
.sa--coral  { --site-c: #d2553a; --site-c-dim: rgba(210,85,58,.12); }
.sa--ocean  { --site-c: #1f6fb2; --site-c-dim: rgba(31,111,178,.12); }
.sa--gilt   { --site-c: #c28034; --site-c-dim: rgba(194,128,52,.13); }
.sa--plum   { --site-c: #7a4aa8; --site-c-dim: rgba(122,74,168,.12); }
.sa--forest { --site-c: #2c7a4b; --site-c-dim: rgba(44,122,75,.12); }
.sa--slate  { --site-c: #4b5a6b; --site-c-dim: rgba(75,90,107,.12); }
:root[data-theme="dark"] .sa--coral  { --site-c: #e0674c; --site-c-dim: rgba(224,103,76,.18); }
:root[data-theme="dark"] .sa--ocean  { --site-c: #4a8bd2; --site-c-dim: rgba(74,139,210,.18); }
:root[data-theme="dark"] .sa--gilt   { --site-c: #bf8236; --site-c-dim: rgba(191,130,54,.20); }
:root[data-theme="dark"] .sa--plum   { --site-c: #9a70c9; --site-c-dim: rgba(154,112,201,.18); }
:root[data-theme="dark"] .sa--forest { --site-c: #45a066; --site-c-dim: rgba(69,160,102,.18); }
:root[data-theme="dark"] .sa--slate  { --site-c: #8e9eb2; --site-c-dim: rgba(142,158,178,.18); }

.site-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--site-c, var(--c-accent)); flex-shrink: 0; }
.site-tag {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px;
    background: var(--site-c-dim, var(--c-accent-dim)); color: var(--c-text);
    font-size: 11.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.nav-item__icon--site { color: var(--site-c) !important; }

/* ── Deltas (text ink + arrow; direction × good/bad) ─────────── */
.delta { display: inline-flex; align-items: center; font: 600 12px/1 var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta--good { color: var(--c-success); }
.delta--bad  { color: var(--c-danger); }
.delta--flat { color: var(--c-muted-2); }

/* ── Period picker / toolbar ─────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar__note { font-size: 12px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 6px; }
.toolbar__note .material-icons-round { font-size: 15px; color: var(--c-muted-2); }
.seg-tabs--scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-tabs--scroll::-webkit-scrollbar { display: none; }

/* ── KPI cards (stat-card from app.css + sparkline) ──────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { gap: 4px; padding: 16px 18px 12px; }
.kpi .stat-card__value { font-size: 26px; font-variant-numeric: normal; }
.kpi__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kpi__prev { font-size: 11px; color: var(--c-muted-2); font-family: var(--font-mono); }
.kpi .spark { margin-top: 6px; }
.kpi__hint { font-size: 11px; color: var(--c-muted); }

/* ── Sparklines (server-rendered SVG) ────────────────────────── */
.spark { display: block; width: 100%; height: 32px; overflow: visible; }
.spark__line { fill: none; stroke: var(--site-c, var(--c-accent)); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.spark__area { fill: var(--site-c, var(--c-accent)); opacity: .10; }
.spark__dot  { fill: var(--site-c, var(--c-accent)); stroke: var(--c-surface); stroke-width: 2px; }
.spark--empty line { stroke: var(--c-border); stroke-width: 1; stroke-dasharray: 0; }

/* ── Line chart ──────────────────────────────────────────────── */
.lchart-wrap { position: relative; }
.lchart-switch { margin-bottom: 10px; }
.lchart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; font-size: 12px; color: var(--c-muted); }
.lchart-legend:empty { display: none; }
.lchart-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.lchart-legend__key { width: 14px; height: 2px; border-radius: 2px; }
.lchart-plot { position: relative; width: 100%; }
.lchart { display: block; outline: none; touch-action: pan-y; }
.lchart:focus-visible { box-shadow: 0 0 0 3px var(--c-accent-dim); border-radius: 8px; }
.lchart__grid line { stroke: var(--c-border-dim); stroke-width: 1; }
.lchart__tick { fill: var(--c-muted); font: 500 10.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.lchart__line { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.lchart__area { opacity: .10; }
.lchart__dot { stroke: var(--c-surface); stroke-width: 2px; }
.lchart__cross line { stroke: var(--c-border-hi); stroke-width: 1; }
.lchart__markers line { stroke: var(--c-muted-2); stroke-width: 1; opacity: .7; }
.lchart__markers circle { fill: var(--c-text); stroke: var(--c-surface); stroke-width: 2px; }
.lchart-tip {
    position: absolute; z-index: 5; pointer-events: none; min-width: 150px; max-width: 260px;
    padding: 9px 11px; border-radius: 12px;
    background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: 0 8px 24px rgba(28,26,23,.14);
    font-size: 12px; color: var(--c-text);
}
.lchart-tip__date { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--c-muted); margin-bottom: 5px; }
.lchart-tip__row { display: flex; align-items: center; gap: 7px; line-height: 1.6; }
.lchart-tip__row strong { font-variant-numeric: tabular-nums; font-size: 13px; }
.lchart-tip__key { width: 12px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.lchart-tip__name { color: var(--c-muted); }
.lchart-tip__marker { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--c-border-dim); color: var(--c-text); }
.lchart-tip__marker .material-icons-round { font-size: 13px; color: var(--c-muted); margin-top: 1px; }
.lchart-note { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--c-muted); margin-top: 6px; }
.lchart-note .material-icons-round { font-size: 13px; }
.lchart-data { margin-top: 8px; }
.lchart-data summary { cursor: pointer; font-size: 12px; color: var(--c-muted); width: max-content; }
.lchart-data summary:hover { color: var(--c-text); }
.lchart-data .table-scroll { max-height: 280px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--c-border-dim); border-radius: 12px; }
.lchart-data .ga-table tbody tr { cursor: default; }
.lchart-data .ga-table td, .lchart-data .ga-table th { padding: 6px 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* Chart cards side by side */
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 18px; align-items: start; }
@media (min-width: 1200px) { .chart-grid--split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.chart-grid .data-card + .data-card { margin-top: 0; }

/* ── Realtime pill ───────────────────────────────────────────── */
.live {
    display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
    background: var(--c-surface); border: 1px solid var(--c-border-dim);
    font-size: 12.5px; color: var(--c-text); white-space: nowrap;
}
.live strong { font-variant-numeric: tabular-nums; }
.live__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); flex-shrink: 0; }
.live__pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-success); opacity: 0; animation: live-pulse 2s ease-out infinite; }
.live--idle .live__pulse { background: var(--c-muted-2); }
.live--idle .live__pulse::after { display: none; }
@keyframes live-pulse { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live__pulse::after { animation: none; } }
.live__bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 14px; }
.live__bars span { width: 2px; border-radius: 1px 1px 0 0; background: var(--site-c, var(--c-success)); opacity: .85; min-height: 1px; }
.live--compact { height: 24px; padding: 0 9px 0 8px; font-size: 11.5px; }

/* ── Overview: site tiles ────────────────────────────────────── */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stile { --tile-accent: var(--site-c); gap: 14px; }
.stile::before { opacity: .9; }
.stile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stile__name { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.stile__kind { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.stile__main { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 14px; }
.stile__value { font: 700 28px/1 var(--font-mono); letter-spacing: -1px; }
.stile__label { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .8px; color: var(--c-muted); margin-top: 6px; display: flex; gap: 8px; align-items: center; }
.stile__stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.stile .tile__foot { gap: 8px; }
.tile__foot .flag .material-icons-round { color: inherit; }
.stile__stat { min-width: 0; }
.stile__stat-v { font: 600 14px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stile__stat-l { font-size: 11px; color: var(--c-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stile__flags { display: flex; gap: 6px; flex-wrap: wrap; }
.flag {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.flag .material-icons-round { font-size: 13px; }
.flag--accent  { background: var(--c-accent-dim); color: var(--c-accent); }
.flag--danger  { background: var(--c-danger-bg); color: var(--c-danger); }
.flag--muted   { background: var(--c-muted-bg); color: var(--c-muted); }

/* ── Keyword cards ───────────────────────────────────────────── */
.kw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.kw-card { gap: 10px; padding: 14px 16px; --tile-accent: var(--site-c); }
.kw-card__head { display: flex; align-items: flex-start; gap: 8px; min-height: 40px; }
.kw-card__query { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kw-card__badges { display: inline-flex; gap: 4px; flex-shrink: 0; }
.kw-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 6px; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .4px; }
.kw-badge .material-icons-round { font-size: 14px; }
.kw-badge--brand { background: var(--c-muted-bg); color: var(--c-muted); }
.kw-badge--tracked { color: var(--c-warning); padding: 0 2px; }
.kw-badge--new { background: var(--c-success-bg); color: var(--c-success); }
.kw-card__mid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.kw-pos { display: flex; flex-direction: column; gap: 3px; min-width: 64px; }
.kw-pos__value { font: 700 24px/1 var(--font-mono); letter-spacing: -0.5px; }
.kw-pos__label { font: 600 9.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .7px; color: var(--c-muted); display: flex; align-items: center; gap: 6px; }
.kw-card__spark .spark { height: 38px; }
.kw-card__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 10px; border-top: 1px solid var(--c-border-dim); }
.kw-metric__v { font: 600 13px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; align-items: baseline; gap: 5px; }
.kw-metric__v .delta { font-size: 10.5px; }
.kw-metric__l { font-size: 10.5px; color: var(--c-muted); margin-top: 2px; }

/* Position band chips: status colours, always with a text label */
.band { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; font: 600 9.5px/1 var(--font-mono); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.band--top3  { background: var(--c-success-bg); color: var(--c-success); }
.band--top10 { background: var(--c-info-bg); color: var(--c-info); }
.band--top20 { background: var(--c-warning-bg); color: var(--c-warning); }
.band--far, .band--none { background: var(--c-muted-bg); color: var(--c-muted); }

/* Keyword filter bar */
.kw-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.kw-filters__row { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.kw-filters .list-search { margin-bottom: 0; flex: 1 1 220px; max-width: 360px; }
.kw-filters .ga-select { width: auto; min-width: 150px; height: 32px; border-radius: 999px; padding-left: 14px; }
.kw-results.htmx-request { opacity: .55; transition: opacity 150ms; }
.kw-query-cell { max-width: 420px; overflow-wrap: anywhere; font-weight: 500; }
.kw-query-cell a { color: var(--c-text); text-decoration: none; }
.kw-query-cell a:hover { color: var(--c-accent); }

/* Position bands strip (counts) */
.bands-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-border-dim); border-radius: 16px; overflow: hidden; background: var(--c-surface); }
.bands-strip__cell { padding: 12px 14px; border-right: 1px solid var(--c-border-dim); min-width: 0; }
.bands-strip__cell:last-child { border-right: 0; }
.bands-strip__v { font: 700 20px/1.1 var(--font-mono); display: flex; align-items: baseline; gap: 6px; }
.bands-strip__l { margin-top: 6px; }
@media (max-width: 520px) { .bands-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bands-strip__cell:nth-child(2) { border-right: 0; } .bands-strip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--c-border-dim); } }

/* Channel bars (GA4) */
.channels { display: flex; flex-direction: column; gap: 9px; }
.channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 12.5px; }
.channel__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--c-muted); }
.channel__bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--c-border-dim); overflow: hidden; }
.channel__bar span { display: block; height: 100%; border-radius: 3px; background: var(--c-muted-2); }
.channel--organic .channel__bar span { background: var(--site-c, var(--c-accent)); }
.channel--organic .channel__name { font-weight: 600; }

/* ── Insights (opportunities) ────────────────────────────────── */
.insight-groups { display: flex; flex-direction: column; gap: 16px; }
.insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 20px; border-top: 1px solid var(--c-border-dim); }
.insight:first-child { border-top: 0; }
.insight__icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--c-accent-dim); color: var(--c-accent); }
.insight__icon .material-icons-round { font-size: 18px; }
.tone--warning .insight__icon, .insight.tone--warning .insight__icon { background: var(--c-warning-bg); color: var(--c-warning); }
.tone--danger  .insight__icon, .insight.tone--danger .insight__icon  { background: var(--c-danger-bg);  color: var(--c-danger); }
.tone--success .insight__icon, .insight.tone--success .insight__icon { background: var(--c-success-bg); color: var(--c-success); }
.tone--info    .insight__icon, .insight.tone--info .insight__icon    { background: var(--c-info-bg);    color: var(--c-info); }
.insight__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.insight__query { font-size: 14px; font-weight: 600; color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; }
a.insight__query:hover { color: var(--c-accent); }
.insight__text { font-size: 13px; color: var(--c-text); margin-top: 3px; }
.insight__action { display: flex; gap: 6px; font-size: 12.5px; color: var(--c-muted); margin-top: 6px; line-height: 1.5; }
.insight__action .material-icons-round { font-size: 15px; color: var(--c-accent); margin-top: 1px; flex-shrink: 0; }
.insight__page { font-size: 11.5px; color: var(--c-muted); margin-top: 4px; font-family: var(--font-mono); overflow-wrap: anywhere; }
.insight__page a { color: inherit; }
.insight__pages { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.insight__pages li { display: flex; gap: 8px; color: var(--c-muted); overflow-wrap: anywhere; }
.insight__pages li span:first-child { font-family: var(--font-mono); color: var(--c-text); flex-shrink: 0; }
.insight-more { padding: 10px 20px 14px; font-size: 12.5px; }

/* ── Journal ─────────────────────────────────────────────────── */
.jentry { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px 20px; border-top: 1px solid var(--c-border-dim); }
.jentry:first-child { border-top: 0; }
.jentry__date { font: 600 12px/1.3 var(--font-mono); color: var(--c-muted); }
.jentry__date strong { display: block; font-size: 15px; color: var(--c-text); }
.jentry__title { font-size: 14px; font-weight: 600; }
.jentry__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.jentry__body { font-size: 13px; color: var(--c-muted); margin-top: 6px; white-space: pre-line; }
.jentry__impact { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--c-surface-2); font-size: 12px; }
.jentry__impact span { display: inline-flex; align-items: center; gap: 6px; }
.jentry__impact .material-icons-round { font-size: 15px; color: var(--c-muted); }
@media (max-width: 520px) { .jentry { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.cat-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--c-muted-bg); color: var(--c-muted); font-size: 11px; font-weight: 600; }
.cat-chip .material-icons-round { font-size: 13px; }

/* Keyword detail: page list + tracking form */
.track-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.track-form .ga-input { width: 74px; height: 34px; }
.url-cell { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; max-width: 520px; }
.url-cell a { color: var(--c-text); text-decoration: none; }
.url-cell a:hover { color: var(--c-accent); text-decoration: underline; }

/* Findings banner rows link to the keyword */
.ana-finding-item a { color: inherit; text-decoration: none; }
.ana-finding-item a:hover strong { color: var(--c-accent); }

/* Section header between blocks */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; }
.section-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; }

.notice + .notice { margin-top: 10px; }

/* ── Comparison line (previous period / last year) ───────────── */
.lchart__line--dash { stroke-width: 1.75px; stroke-dasharray: 5 4; }
.lchart-legend__key.is-dash, .lchart-tip__key.is-dash {
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
            mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
}
.seg-tabs--compare .seg-tabs__item .material-icons-round { font-size: 15px; }
.seg-tabs__item.is-disabled { opacity: .45; cursor: not-allowed; }

/* ── What SEO brings in (GA4 outcomes) ───────────────────────── */
.outcome-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--c-border-dim); border-bottom: 1px solid var(--c-border-dim); }
.outcome-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; border-right: 1px solid var(--c-border-dim); min-width: 0; }
.outcome-stat:last-child { border-right: 0; }
.outcome-stat__v { font: 700 22px/1.1 var(--font-mono); letter-spacing: -0.5px; white-space: nowrap; }
@media (max-width: 760px) {
    .outcome-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outcome-stat:nth-child(2) { border-right: 0; }
    .outcome-stat:nth-child(-n+2) { border-bottom: 1px solid var(--c-border-dim); }
}
.outcomes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 20px 20px; }
@media (min-width: 1100px) { .outcomes__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.landing-list { display: flex; flex-direction: column; gap: 10px; counter-reset: landing; }
.landing-list li { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.landing-list__path { font-family: var(--font-mono); font-size: 12px; color: var(--c-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-list__path:hover { color: var(--c-accent); text-decoration: underline; }
.landing-list__v { font-variant-numeric: tabular-nums; }
.landing-list__v strong { color: var(--site-c, var(--c-accent)); margin-right: 4px; }
.outcomes__note { display: flex; gap: 6px; margin-top: 14px; font-size: 11.5px; line-height: 1.45; color: var(--c-muted); }
.outcomes__note .material-icons-round { font-size: 14px; margin-top: 1px; flex-shrink: 0; }

/* ── Audience: devices, countries ────────────────────────────── */
.devbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--c-border-dim); gap: 2px; margin-bottom: 14px; }
.devbar__seg { display: block; height: 100%; }
.devbar__seg--mobile  { background: var(--site-c, var(--c-accent)); }
.devbar__seg--desktop { background: var(--c-muted-2); }
.devbar__seg--tablet  { background: var(--c-border-hi); }
.devlist { display: flex; flex-direction: column; gap: 10px; }
.devlist__row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; font-size: 12.5px; }
.devlist__key { width: 10px; height: 10px; border-radius: 3px; }
.devlist__name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.devlist__name .material-icons-round { font-size: 16px; color: var(--c-muted); }
.devlist__v { font-variant-numeric: tabular-nums; text-align: right; }
.devlist__pos { grid-column: 2 / -1; font-size: 11.5px; color: var(--c-muted); font-family: var(--font-mono); }
.sharebar { display: inline-block; vertical-align: middle; width: calc(100% - 46px); height: 6px; border-radius: 3px; background: var(--c-border-dim); overflow: hidden; }
.sharebar span { display: block; height: 100%; border-radius: 3px; background: var(--site-c, var(--c-accent)); }
.sharebar__v { display: inline-block; width: 40px; margin-left: 6px; text-align: right; font: 500 11.5px var(--font-mono); color: var(--c-muted); }

/* Site tiles with GA4: position, top 10, SEO sessions, SEO revenue in 2 × 2 */
.stile__stats:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }

/* ── Google Business Profile ─────────────────────────────────── */
.setup-steps { list-style: decimal; padding: 16px 20px 20px 40px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; line-height: 1.55; }
.setup-steps code { font-size: 12px; }
.copy-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border-dim); }
.copy-field code { overflow-wrap: anywhere; flex: 1 1 260px; }
.code-block { margin: 6px 0; padding: 10px 12px; border-radius: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border-dim); font: 12px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.gconn__icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--c-muted-bg); color: var(--c-muted); }
.gconn__icon.is-on { background: var(--c-success-bg); color: var(--c-success); }
.gconn__icon .material-icons-round { font-size: 20px; }
.stars-inline { color: #e0a526; }

.gbp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gbp-head__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.gbp-head__title .material-icons-round { font-size: 19px; color: var(--site-c, var(--c-accent)); }
.gbp-head__sub { font-size: 12px; color: var(--c-muted); margin-top: 2px; }
.kpi__icon { font-size: 14px !important; vertical-align: -2px; margin-right: 5px; color: var(--c-muted-2); }

.stars { color: #e0a526; letter-spacing: 1px; font-size: 15px; white-space: nowrap; }
.stars--sm { font-size: 12.5px; }
.rating-big { display: flex; align-items: baseline; gap: 8px; }
.rating-big strong { font: 700 28px/1 var(--font-mono); letter-spacing: -1px; }
.rating-dist { display: flex; flex-direction: column; gap: 6px; }
.rating-dist__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font: 500 11.5px var(--font-mono); color: var(--c-muted); }
.rating-dist__row .sharebar { width: 100%; }
.rating-dist__row .sharebar span { background: #e0a526; }
.rating-dist__n { text-align: right; }
.review-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border-dim); }
.review-stats > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.review-stats strong { font: 700 18px/1.1 var(--font-mono); display: flex; align-items: baseline; gap: 6px; }
.review-stats span { font-size: 11.5px; color: var(--c-muted); }
.review-stats .is-alert strong { color: var(--c-danger); }
.review-list { display: flex; flex-direction: column; }
.review { padding: 12px 20px; border-top: 1px solid var(--c-border-dim); }
.review:first-child { border-top: 0; }
.review__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review__who { font-size: 13px; font-weight: 600; }
.review__date { font-size: 11.5px; color: var(--c-muted); font-family: var(--font-mono); }
.review__top .flag { margin-left: auto; }
.review__text { font-size: 13px; color: var(--c-text); margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }
.flag--rating { background: rgba(224,165,38,.14); color: #a87510; }
:root[data-theme="dark"] .flag--rating { color: #e8b84a; }