/* The SEO page (seo/seo.js; docs/seo-in-hub.md), in the calm redesign. Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules. Colours only from the tokens in styles.css (light and dark alike). */

.seo-screen .seo-hero .seo-src { margin-top: 8px; }
.seo-src { margin: 4px 0 0; font: 400 .85rem/1.4 var(--rt-body); color: var(--text-2); }

/* Two columns on a wide computer; one list on a phone. */
.seo-cols { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .seo-cols { grid-template-columns: 1fr 1fr; } }

.seo-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--calm-line); border-radius: var(--r-card); background: var(--surface); }
.seo-h { margin: 0; font: 700 1.05rem/1.3 var(--rt-body); color: var(--text); }
.seo-h3 { margin: 6px 0 0; font: 600 .9rem/1.3 var(--rt-body); color: var(--text-2); }

/* The numbers: Barlow Condensed, the words under them quiet. */
.seo-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.seo-stat { display: flex; flex-direction: column; min-width: 0; }
.seo-num { font: 700 2rem/1.05 var(--rt-cond); color: var(--text); font-variant-numeric: tabular-nums; }
.seo-lab { font: 400 .85rem/1.3 var(--rt-body); color: var(--text-2); }

/* A row with a soft bar under it (pages, where leads came from). */
.seo-bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.seo-bar-t { display: flex; justify-content: space-between; gap: 12px; font: 400 .95rem/1.35 var(--rt-body); color: var(--text); }
.seo-bar-l { min-width: 0; overflow-wrap: anywhere; }
.seo-bar-n { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.seo-bar-track { display: block; height: 6px; margin-top: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.seo-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--link); transition: width var(--t-screen) var(--ease-out); }

/* The top searches: the words, the counts, and ours or not ours. */
.seo-terms { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.seo-term { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.seo-term:first-child { border-top: 0; }
.seo-term-q { min-width: 0; font: 600 .95rem/1.35 var(--rt-body); color: var(--text); overflow-wrap: anywhere; }
.seo-term-n { grid-column: 1; font: 400 .85rem/1.3 var(--rt-body); color: var(--text-2); }
.seo-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 2px 10px; border-radius: var(--r-pill); font: 600 .8rem/1.5 var(--rt-body); }
.seo-tag.ours { background: var(--rt-ok-bg); color: var(--rt-ok); }
.seo-tag.not { background: var(--rt-neutral-bg); color: var(--rt-neutral); }

.seo-err { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font: 400 .9rem/1.4 var(--rt-body); color: var(--rt-bad); }
.seo-err .ic { flex: none; margin-top: 2px; }
.seo-missing { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.seo-missing p { display: flex; gap: 8px; margin: 0; }
.seo-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.seo-links .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 900px) { .seo-cols > .seo-gsc { grid-column: 1 / -1; } }