/* The Search screen (SEO rankings and analytics), on the back office's own tokens (app.css) and the Business
   screen's building blocks (business.css: .biz, .card.tight, .kpis, .ages, .hbars, .stack-rows, table.keep).
   Every selector sits under .seo. No new font; the only new colours are the four rank-band steps below, one hue
   (the back office's azure), validated as an ordinal ramp on --raised: monotone lightness, light end 3.4:1.
   Like the real page (strict Content-Security-Policy), nothing here relies on an inline style: widths come from
   classes (.w-N in the mockup, data-w set by seo.js in the real screen). */
.seo{--band1:#d3dcff;--band2:#9fb2ff;--band3:#6d8bff;--band4:#3f63f0;--band0:#66718a}

/* the week chart: keywords by position band, one column per weekly run */
.seo .chart.weeks{height:230px}
.seo .chart.weeks svg{height:100%}
.seo .chart .grid line{stroke:var(--grid);stroke-width:1}
.seo .chart .axis{stroke:var(--line);stroke-width:1}
.seo rect.b1{fill:var(--band1)}.seo rect.b2{fill:var(--band2)}.seo rect.b3{fill:var(--band3)}.seo rect.b4{fill:var(--band4)}.seo rect.b0{fill:var(--band0)}
.seo .legend .sw.b1{background:var(--band1)}.seo .legend .sw.b2{background:var(--band2)}.seo .legend .sw.b3{background:var(--band3)}
.seo .legend .sw.b4{background:var(--band4)}.seo .legend .sw.b0{background:var(--band0)}
.seo .chart text.now{fill:#eef2fb;font-weight:600}

/* a "sample" tag beside a heading, as the mockups mark draft words */
.seo .hdr h2 .draft{display:inline-block;margin-left:.55rem;vertical-align:middle}

/* position cells: a number when we rank, a quiet dash when we do not */
.seo td.pos{font-family:var(--austin);font-size:1.02rem;text-align:right;font-variant-numeric:tabular-nums}
.seo td.pos.none{font-family:var(--sans);font-size:.8rem;color:var(--quiet)}
.seo td.pos.unread{font-family:var(--sans);font-size:.74rem;color:var(--quiet);font-style:italic}
.seo td .page{display:block;font-size:.74rem;color:var(--quiet);margin-top:.15rem;word-break:break-all}
.seo th.mk{text-align:right}

/* indexed by section: the stack rows of business.css, with room for a count beside each */
.seo .stack-rows .lab .sub{display:block;font-size:.72rem;color:var(--quiet);margin-top:.1rem}

/* what the mockups took from mockups.css, which the back office does not load: here, under .seo */
.seo .scroll-x{overflow-x:auto;margin:0 -.2rem;padding:0 .2rem}
.seo .scroll-x table{min-width:560px}
.seo .scroll-x:focus-visible{outline:2px solid var(--azure);outline-offset:2px;border-radius:6px}
.seo .mt1{margin-top:1rem}
.seo .muted{color:var(--muted)}
.seo table.keep td.n,.seo table.keep th.n{text-align:right;font-variant-numeric:tabular-nums}
.seo tr[hidden]{display:none}

/* grid children may shrink below their content, so a wide table scrolls inside its card instead of widening the
   column past the screen (a 1fr track is minmax(auto,1fr) and would take the table's 560px minimum) */
.seo .grid2>*{min-width:0}
/* small tables that fit a phone as they are: no 560px floor, and their labels may wrap */
.seo .scroll-x table.fit{min-width:0}
/* the new look (ui2.css) keeps every table head sticky 108px below the top of the page; inside a sideways scroller that
   offset is measured from the scroller, which pushed each head down over the rows, so here the heads stay in place */
.seo .scroll-x th{position:static}
.seo table.fit td:first-child{overflow-wrap:anywhere}
.seo table.fit td.n,.seo table.fit td.pos{white-space:nowrap}

/* page speed: Largest Contentful Paint on a 0 to 8 second track, with Google's 2.5 s "good" line. One row per
   page, so a phone can put the bar under its own label */
.seo .lcp{display:grid;gap:.75rem;font-size:.86rem}
.seo .lcp .r{display:grid;grid-template-columns:minmax(0,13rem) 1fr 6.5rem;grid-template-areas:"lab trk val";gap:.4rem 1rem;align-items:center}
.seo .lcp .lab .sub{overflow-wrap:anywhere}
.seo .lcp .lab{grid-area:lab;color:#eef2fb}
.seo .lcp .trk{grid-area:trk}
.seo .lcp .val{grid-area:val}
.seo .lcp .lab .sub{display:block;font-size:.72rem;color:var(--quiet)}
.seo .lcp .trk{position:relative;display:block;height:12px;background:var(--track);border-radius:0 4px 4px 0}
.seo .lcp .bar{display:block;height:12px;min-width:3px;border-radius:0 4px 4px 0;background:var(--data)}
.seo .lcp .tick{position:absolute;top:-5px;bottom:-5px;left:31.25%;width:2px;background:var(--teal)}
.seo .lcp .val{text-align:right;font-variant-numeric:tabular-nums;color:#eef2fb;white-space:nowrap}
.seo .lcp .val .st{margin-left:.5rem;font-size:.74rem}
.seo .legend .tk{width:2px;height:14px;background:var(--teal)}

/* the card that waits for a source: a status line, what it will show, and what unlocks it */
.seo .card.waiting{border-style:dashed}
.seo .card.waiting ul{margin:.6rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.86rem;line-height:1.5}

/* the competitor table's own bar column */
.seo td.barcell{width:34%}
.seo td.barcell .trk{display:block;height:10px}
.seo td.barcell .bar{display:block;height:10px;min-width:3px;border-radius:0 4px 4px 0;background:var(--data)}
.seo tr.us td{color:#eef2fb;background:rgba(50,95,255,.10)}

@media (max-width:1000px){
  .seo .grid2{grid-template-columns:1fr}
}
@media (max-width:760px){
  .seo .chart.weeks{height:190px}
  /* outranks business.css's phone rule (.biz table.keep td{display:table-cell}) */
  .seo table.keep td.barcell,.seo table.keep th.barcell{display:none}
  .seo .lcp .r{grid-template-columns:1fr max-content;grid-template-areas:"lab val" "trk trk"}
}