/* SEO (pages/seo.js): four tiles, the clients' table with a trend drawn per row, and one client's report: its
   tiles, two charts, its queries and what they say. The owner's mock sets the look: cards on the raised tone, small
   capital column heads, numbers in the mono face. */
.page[data-page="seo"] { max-width: 1340px; padding: 24px 28px 80px; }
.seo-range, .seo-src { font-size: 12px; font-weight: 700; color: var(--text3); background: var(--chip); border-radius: 999px; padding: 0 10px; line-height: 24px; white-space: nowrap; }
.seo-src { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; background: none; border: 1px dashed var(--line2); border-radius: 6px; padding: 0 8px; }

.seo-kpis { margin-bottom: 16px; }
.seo-kpi .v { margin-top: 2px; }
.seo-kpi .v.ok { color: var(--ok); } .seo-kpi .v small { font-size: 16px; font-weight: 700; color: var(--text3); }
.seo-kpi .d { margin-top: 2px; min-height: 18px; }
.seo-chg { font-weight: 700; white-space: nowrap; } .seo-chg.up { color: var(--ok); } .seo-chg.down { color: var(--bad); }

.seo-card { background: var(--raise); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.seo-x { border: 0; border-radius: 0; background: none; }  /* a table inside a card: no box of its own */
.seo-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.seo-name a { color: var(--head); text-decoration: none; } .seo-name a:hover { text-decoration: underline; }
.seo-name small { display: block; color: var(--text3); font-weight: 500; font-size: 12px; }
.seo-spark { display: block; }
.seo-tag { --tc: #9a2fa3; display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 20px; padding: 0 9px; border-radius: 999px; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); white-space: nowrap; }
.seo-tag.base { --tc: var(--text3); } .seo-name .seo-tag { margin-left: 8px; }
:root[data-theme="dark"] .seo-tag:not(.base) { --tc: #d46ad8; }
.seo-foot { margin-top: 10px; }
.seo-warn { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--note-line); background: var(--note-bg); font-weight: 600; }
.seo-warn svg { color: var(--warn); }

/* a source that is not connected: what it is, and where its sign-in or key goes */
.seo-off { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px dashed var(--line2); border-radius: 12px; margin-bottom: 16px; }
.seo-off svg { color: var(--text3); margin-top: 3px; } .seo-off b { color: var(--head); } .seo-off p { margin: 2px 0 0; color: var(--text3); max-width: 70ch; }
.seo-card .seo-off { border: 0; margin: 0; }

/* a client's report */
.seo-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--text3); font-size: 13px; text-decoration: none; } .seo-back:hover { color: var(--text); }
.seo-url { display: inline-flex; align-items: center; gap: 5px; vertical-align: -2px; } .seo-url svg { width: 13px; height: 13px; }
.seo-two { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-bottom: 16px; }
.seo-card h3 { display: flex; align-items: center; gap: 9px; margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--head); }
.seo-card h3 svg { color: var(--red); } .seo-card h3 span { margin-left: auto; font-weight: 500; color: var(--text3); font-size: 12px; }
.seo-card .b { padding: 14px 16px; }
.seo-chart { display: block; width: 100%; } .seo-chart text { font-size: 10px; fill: var(--faint); } .seo-chart text.n { font-family: var(--mono); }
.seo-chart .rule { stroke: var(--line); } .seo-chart .cut { stroke: var(--line2); stroke-dasharray: 3 3; }
.seo-says p { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); } .seo-says p:last-child { border-bottom: 0; }

@media (max-width: 1100px) { .seo-two { grid-template-columns: 1fr; } }
/* A phone: the list keeps Client, Clicks, its Δ and Impressions; the queries keep Query, Clicks and Pos. */
@media (max-width: 760px) {
  .page[data-page="seo"] { padding: 20px 16px 40px; }
  .seo-tw :is(th, td:not([colspan])):is(:nth-child(2), :nth-child(5), :nth-child(7), :nth-child(8)), .seo-x :is(th, td):is(:nth-child(3), :nth-child(4)) { display: none; }
  :is(.seo-tw, .seo-x) td:is(:first-child, [colspan]) { white-space: normal; }
  .seo-tw :is(th, td) { padding-left: 8px; padding-right: 8px; } .seo-av { display: none; }
}