/* CompetitorBase — the report body.

   Everything it takes to draw one competitor's report: the hero card with the
   verdict, the radar, the diff at the head of it, the scan timeline, the
   channel bento and the source footer. Lifted verbatim out of
   static/index.html, which is why the section comments still read like the
   SPA's — this file is the SPA's report CSS, not a second copy of it.

   Two pages load it: static/index.html (a live run, and a report opened from
   the landing funnel) and templates/report.html (the same report inside the
   signed-in app shell). Both supply the same tokens, so nothing here defines
   one; --hatch is the exception, since app_base.html's chassis has no need
   for the stopped tier's fill.

   Nothing landing-particular belongs here, and nothing here belongs to the
   app shell: the shell's own components live in app_base.html. */
:root{ --hatch:repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 7px); }

/* ---------- hero (§3.2) ---------- */
.hero{margin:34px 0 0}
.hero-card{background:var(--card);border:1px solid var(--txt);overflow:hidden}
.hero-top{padding:34px 38px 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
          gap:38px;align-items:center}
.hero-top>*{min-width:0}
.subject{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.favicon{width:36px;height:36px;background:var(--txt);color:#fff;display:grid;place-items:center;
         font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;flex:none}
.subject .dom{font-weight:600;font-size:18px;letter-spacing:-.02em;overflow-wrap:anywhere}
.subject .sub{font-size:12.5px;color:var(--dim)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--faint);margin-bottom:14px}
.eyebrow.err{color:var(--txt)}
/* The verdict is the report's one drama moment, and the only place the display
   serif is allowed inside the product. It stays well clear of the 32px floor. */
.headline{font-family:var(--disp);font-weight:400;font-size:clamp(32px,3.6vw,50px);
          line-height:1.0;letter-spacing:-.026em;text-wrap:balance}
.headline em{font-style:italic}
.headline .big{font-size:1.12em}
.headline .of9{color:var(--faint)}
/* Below the serif floor, so Inter 600, per rule 1. */
.headline.small{font-family:inherit;font-size:19px;line-height:1.35;letter-spacing:-.015em;
                font-weight:600}
.tagline{margin-top:16px;font-size:15px;color:var(--dim);max-width:54ch;line-height:1.65;
         letter-spacing:-.008em}
.tagline b{font-weight:600;color:var(--txt)}

/* tier tally: the count and the radar legend at once (§3.2). White rows,
   hairline borders, and a solid key only on confirmed. */
.tally{display:flex;flex-direction:column;gap:0;margin-top:24px;border-top:1px solid var(--txt)}
.tally-row{display:flex;align-items:center;gap:12px;padding:9px 2px;
           border-bottom:1px solid var(--line);background:#fff;text-align:left;width:100%;
           font-family:inherit;cursor:default}
.tally-key{width:10px;height:10px;flex:none;background:#fff;border:1px solid var(--rule)}
.tally-row.c .tally-key{background:var(--txt);border-color:var(--txt)}
.tally-row.l .tally-key{border-color:var(--txt)}
.tally-row.s .tally-key{background:var(--hatch);border-color:var(--rule)}
.tally-n{font-weight:600;font-size:21px;letter-spacing:-.03em;min-width:22px;line-height:1;
         font-variant-numeric:tabular-nums}
.tally-row.q .tally-n,.tally-row.u .tally-n{color:var(--faint)}
.tally-lab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
           text-transform:uppercase;color:var(--dim)}
.tally-row.q .tally-lab,.tally-row.u .tally-lab{color:var(--faint)}
.tally-ch{font-size:12.5px;color:var(--dim);margin-left:auto;text-align:right;
          min-width:0;overflow-wrap:anywhere}

/* changes strip (§5.5): not a fifth tier, so white ground and a hairline */
.changes{display:flex;flex-direction:column;gap:0;margin-top:18px;border-top:1px solid var(--line)}
.chg-lab{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
         text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.chg-row{display:flex;align-items:baseline;gap:10px;padding:8px 2px;
         border-bottom:1px solid var(--line-soft);background:#fff;font-size:12.5px;color:var(--dim)}
.chg-row .m{font-family:var(--mono);font-size:12px;line-height:1;flex:none;color:var(--txt)}
.chg-row .m.down{color:var(--faint)}
.chg-row b{font-weight:500;color:var(--txt);font-family:var(--mono);font-size:12px}
.chg-none{font-size:12.5px;color:var(--faint);margin-top:18px}

/* what changed (§5.5): the diff at the head of the report, above the verdict,
   because "anything new?" outranks the standing posture. One 2px accent rule
   carries the whole emphasis — no badges, no tier colours. */
.wchg{margin:0 0 22px;padding-left:13px;border-left:2px solid var(--accent)}
.wchg-lab{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
          text-transform:uppercase;color:var(--dim);margin:0 0 7px}
.wc-row{display:flex;align-items:baseline;gap:11px;padding:4px 0;font-size:13px;color:var(--dim)}
/* Wide enough for the longest tag (COMPETITORS) so the sentences below line
   up as one column. */
.wc-kind{flex:none;width:9.2em;font-family:var(--mono);font-size:9px;font-weight:500;
         letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.wc-txt{min-width:0;color:var(--txt)}
.wc-txt b{font-weight:500;font-family:var(--mono);font-size:12px}
.wchg .hid{display:none}
.wchg.open .hid{display:flex}
.wc-more{margin-top:7px;padding:0;background:none;border:0;cursor:pointer;
         font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;
         text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.wc-more:hover{color:var(--txt)}
.wchg.open .wc-more{display:none}

/* scan timeline: one demoted line, not a panel. Dates only; a dot marks a
   scan that carried news, the one on screen is ink and the rest are faint. */
.tline{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin:0 0 20px;
       font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;
       text-transform:uppercase;color:var(--faint)}
.tline b{font-weight:500;color:var(--faint);margin-right:3px}
.tline a{color:var(--faint);text-decoration:none;cursor:pointer;
         border-bottom:1px solid transparent}
.tline a:hover{color:var(--txt);border-bottom-color:var(--rule)}
.tline a.on{color:var(--txt)}
.tline a i{display:inline-block;width:3px;height:3px;margin-left:4px;
           vertical-align:2px;background:var(--txt)}
.tline a:not(.on) i{background:var(--rule)}
.tline .sep{color:var(--line)}
.tline .hid{display:none}
.tline.open .hid{display:inline}
.tline.open .wc-more{display:none}

/* The error state's one action, drawn as the hero's quiet plate. */
.retry{margin-top:22px;height:40px;padding:0 20px;border:1px solid var(--txt);background:#fff;
       color:var(--txt);font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;
       cursor:pointer;transition:background .15s, color .15s}
.retry:hover{background:var(--txt);color:#fff}

/* ---------- radar (§3.3) ---------- */
.radar-wrap{position:relative;min-width:0}
.radar{width:100%;height:auto;display:block;overflow:visible}
.radar-cap{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint);
           text-align:center;text-transform:uppercase;margin-top:6px}
@keyframes sweep{to{transform:rotate(360deg)}}
.sweep{transform-box:view-box;transform-origin:300px 300px;animation:sweep 9s linear infinite}
.node{cursor:pointer;transition:r .18s ease}
.node:hover{r:9}
.node:focus-visible,.lbl:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.halo{pointer-events:none}
.blip{animation:blip 2.6s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.10}50%{opacity:.42}}
.lbl{font-family:var(--mono);font-size:17px;font-weight:500;letter-spacing:.12em;
     fill:var(--dim);cursor:pointer;transition:fill .18s}
.lbl:hover{fill:var(--txt)}
.lbl.c{fill:#111111}.lbl.l{fill:#525252}.lbl.s{fill:#525252}
.lbl.q{fill:#8a8a8a}.lbl.u{fill:#8a8a8a}
.lblv{font-family:var(--mono);font-size:13px;letter-spacing:.04em;fill:var(--faint)}

/* meta bar (§3.2) */
.meta-bar{border-top:1px solid var(--txt);background:var(--wash);padding:12px 38px;display:flex;
          gap:22px;flex-wrap:wrap;align-items:center;font-size:10px;color:var(--faint);
          font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}
.meta-bar b{color:var(--txt);font-weight:500}
.meta-bar a{color:var(--faint);cursor:pointer;text-decoration:none;
            border-bottom:1px solid var(--rule)}
.meta-bar a:hover{color:var(--txt);border-bottom-color:var(--txt)}
.meta-bar .pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#fff;
                color:var(--txt);border:1px solid var(--txt);padding:4px 10px;font-weight:500}
.meta-bar .pill i{width:5px;height:5px;background:var(--txt);display:block}
.meta-bar .pill.bad{border-color:var(--rule);color:var(--dim)}
.meta-bar .pill.bad i{background:var(--stop)}
.meta-bar .pill.wait{border-color:var(--rule);color:var(--dim)}
.meta-bar .pill.wait i{background:var(--faint)}


/* ---------- section head (§3.4) ---------- */
.sec-head{display:flex;align-items:baseline;gap:14px;margin:52px 0 16px}
.sec-head h2{font-size:19px;font-weight:600;letter-spacing:-.02em}
.sec-head p{margin:0;font-size:9.5px;color:var(--faint);font-family:var(--mono);
            letter-spacing:.14em;text-transform:uppercase}
.sec-head .rule{flex:1;height:1px;background:var(--line)}

/* ---------- monitor invitation ----------
   Not a footnote: monitoring is the product, so the invitation is a plate the
   eye lands on — a boxed card with the offset shadow the trial plate uses,
   sitting directly under the report hero and above the channel breakdown. */
.monitor-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:26px 0 0;
             padding:22px 24px;border:1px solid var(--txt);background:var(--card);
             box-shadow:4px 4px 0 var(--txt)}
.monitor-cta .mtxt{flex:1 1 280px;min-width:0;font-size:15.5px;line-height:1.5;
                   color:var(--txt);letter-spacing:-.01em}
.monitor-cta .mtxt b{color:var(--txt);font-weight:600}
.monitor-cta button{border:0;background:var(--accent);color:#fff;height:44px;
                    padding:0 22px;font:500 10.5px var(--mono);letter-spacing:.18em;
                    text-transform:uppercase;cursor:pointer;transition:background .15s}
.monitor-cta button:hover{background:#1d4ed8}
.monitor-cta button:active{background:var(--txt)}
/* Already monitoring: the same plate states the fact, without the shout. */
.monitor-cta.passive{box-shadow:none;border-color:var(--line);padding:17px 20px}
.monitor-cta.passive .mtxt{font-size:14px;color:var(--dim)}

/* ---------- bento grid + cards (§3.4 to §3.6) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  background:var(--card);border:1px solid var(--line);padding:22px 24px;
  position:relative;display:flex;flex-direction:column;min-width:0;
  transition:border-color .18s ease;scroll-margin-top:90px;
}
/* Confirmed is the only tier that gets a solid mark: an ink top rail and an
   ink edge. Likely repeats the shape as a hairline. Stopped interrupts it. */
.card.confirmed{border-color:var(--txt)}
.card.confirmed::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;
    background:var(--txt)}
.card.likely::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;
    background:var(--rule)}
.card.stopped::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;
    background:var(--hatch);border-bottom:1px solid var(--line)}
.card.quiet{background:var(--wash);border-style:dashed;border-color:var(--rule)}
/* Zero blur, spread only: a printed register mark, not a glow. */
.card.flash{box-shadow:0 0 0 2px var(--flash,var(--txt))}

.span12{grid-column:span 12} .span7{grid-column:span 7} .span6{grid-column:span 6}
.span5{grid-column:span 5} .span4{grid-column:span 4}

.chead{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.ico{width:30px;height:30px;display:grid;place-items:center;flex:none;
     border:1px solid var(--line);background:#fff;color:var(--dim)}
.confirmed .ico{background:var(--txt);border-color:var(--txt);color:#fff}
.likely .ico{border-color:var(--txt);color:var(--txt)}
.stopped .ico{border-color:var(--rule);color:var(--dim)}
.quiet .ico{background:var(--wash);color:var(--faint)}
.cname{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.16em;
       text-transform:uppercase;min-width:0}
.delta{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--faint);margin-left:7px}
/* The badge is the design system's table header band at chip scale: solid ink
   with reversed 9.5px mono for confirmed, squared hairlines for the rest. */
.badge{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
       font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
       padding:4px 8px;white-space:nowrap;flex:none;background:#fff;border:1px solid var(--line);
       color:var(--dim)}
.badge.c{background:var(--txt);border-color:var(--txt);color:#fff}
.badge.c::before{content:"\2713";color:var(--ok);letter-spacing:0}
.badge.l{border-color:var(--txt);color:var(--txt)}
.badge.s{border-color:var(--rule);color:var(--txt)}
.badge.s::before{content:"\275A\275A";color:var(--stop);letter-spacing:0;font-size:8px}
.badge.q{background:var(--wash);border-color:var(--line);color:var(--faint)}
.intensity{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
           font-weight:500;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;
           margin-bottom:12px}
.intensity .bars{display:flex;gap:2px}
.intensity .bars i{width:3px;height:10px;background:var(--txt);display:block}

/* Claims sit below the serif floor, so they are Inter 600 (rule 1). */
.claim{font-weight:600;letter-spacing:-.022em;line-height:1.25;color:var(--txt);
       overflow-wrap:anywhere}
.confirmed .claim{font-size:22px;margin:6px 0 2px}
.likely .claim{font-size:17px;margin:8px 0 2px}
.likely.promoted .claim{font-size:22px}
.stopped .claim{font-size:21px;margin:8px 0 2px}
.quiet .claim{font-size:15px;color:var(--dim);margin:6px 0 0}
.sub-claim{font-size:13.5px;color:var(--dim);line-height:1.6;margin-top:8px}

.stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.stat{min-width:0}
.stat .v{font-weight:600;font-size:25px;letter-spacing:-.03em;line-height:1;
         overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.stat .v.sm{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:0;padding-top:6px}
.stat .k{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.14em;
         text-transform:uppercase;color:var(--faint);margin-top:6px}
.stat .v small{font-size:13px;font-weight:500;color:var(--faint);letter-spacing:-.01em}
.stat .v.up{color:var(--txt)}
.stat .v.dead{color:var(--dim)}
.stat .v.muted{color:var(--faint)}

/* Meters and bars: the design system's progress recipe, ink on a --line-soft
   track. Descending series step ink, #525252, #8a8a8a instead of changing hue. */
.meter{margin-top:16px}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;
           color:var(--dim);margin-bottom:7px;gap:10px;flex-wrap:wrap}
.meter-top b{color:var(--txt);font-weight:600}
.track{height:10px;background:var(--line-soft);overflow:hidden;display:flex}
.track i{display:block;height:100%}
.track.slim{height:6px}
.swatch{display:inline-block;width:8px;height:8px;margin-right:6px}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{font-family:var(--mono);font-size:11px;padding:3px 8px;background:#fff;
     border:1px solid var(--line);color:var(--dim);max-width:100%;overflow:hidden;
     text-overflow:ellipsis;white-space:nowrap}
.tag.more{background:transparent;border-style:dashed;color:var(--faint)}

.rows{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.row{display:flex;align-items:center;gap:11px;font-size:13px}
.row .nm{width:104px;flex:none;color:var(--dim);white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis}
.row .bar{flex:1 1 40px;min-width:40px;height:7px;background:var(--line-soft);overflow:hidden}
.row .bar i{display:block;height:100%}
.row .n{width:60px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--faint);
        flex:none}

.panel{margin-top:18px;background:var(--wash);border:1px solid var(--line);padding:12px 14px 9px}
.axis{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:9px;
      color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
/* Stopped, drawn as an interruption: the panel ground is the 45-degree hatch. */
.flatline{margin-top:16px;background:var(--hatch);border:1px solid var(--line);
          padding:12px 14px 8px}
.flatline .fl-x{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:var(--faint);
                margin-top:6px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.dark-note{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--mono);
           font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
           background:#fff;border:1px solid var(--rule);padding:5px 10px}
.gauge-wrap{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.gauge-lab{font-size:12.5px;color:var(--dim);line-height:1.5;min-width:0;flex:1 1 140px}
.gauge-lab b{display:block;font-weight:600;font-size:14.5px;color:var(--txt);letter-spacing:-.015em}

details.more{margin-top:auto;padding-top:16px}
details.more>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border:1px solid var(--rule);background:#fff;
  padding:7px 12px;transition:.15s;user-select:none;
}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary:hover{color:var(--txt);border-color:var(--txt)}
details.more>summary .chev{transition:transform .2s}
details.more[open]>summary .chev{transform:rotate(180deg)}
.dbody{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;display:flex;
       flex-direction:column;gap:11px;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kv{display:flex;gap:14px;font-size:13px;align-items:flex-start;margin:0}
.kv dt{width:132px;flex:none;color:var(--faint);font-family:var(--mono);font-size:9.5px;
       font-weight:400;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.kv dd{margin:0;color:var(--dim);line-height:1.6;min-width:0;flex:1;overflow-wrap:anywhere}
.kv dd b{font-weight:600;color:var(--txt)}
.kv dd a{color:var(--txt);text-decoration:none;border-bottom:1px solid var(--rule)}
.kv dd a:hover{border-bottom-color:var(--txt)}

details.src{margin-top:2px}
details.src>summary{list-style:none;cursor:pointer;color:var(--faint);font-family:var(--mono);
                    font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;user-select:none}
details.src>summary::-webkit-details-marker{display:none}
details.src>summary::before{content:"+";margin-right:8px;color:var(--rule)}
details.src[open]>summary::before{content:"\2212";color:var(--dim)}
details.src>summary:hover{color:var(--dim)}
details.src p{font-size:12.5px;color:var(--faint);margin:10px 0 0;max-width:56em;line-height:1.65}

.card.quiet .why{margin-top:10px;font-size:12.5px;color:var(--faint);line-height:1.55}
.card.quiet .recheck{display:inline-block;align-self:flex-start;margin-top:10px;
                     font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
                     text-transform:uppercase;color:var(--dim);cursor:pointer;background:none;
                     border:0;padding:0;border-bottom:1px solid var(--rule)}
.card.quiet .recheck:hover{color:var(--txt);border-bottom-color:var(--txt)}
.checkstrip{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.checkstrip span{font-family:var(--mono);font-size:10.5px;color:var(--faint);background:var(--wash);
                 border:1px solid var(--line);padding:3px 8px;
                 text-decoration:line-through;text-decoration-color:var(--faint);
                 text-decoration-thickness:1px}
.qstrip .qnames{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.qstrip .qnames span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
                     text-transform:uppercase;color:var(--faint);border:1px dashed var(--rule);
                     padding:3px 9px}

/* creatives + keyword table, inside the ads drawer */
.creatives{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin-top:6px}
.ad{background:#fff;border:1px solid var(--line);padding:10px 11px 11px;
    font-size:12px;color:var(--dim);line-height:1.55;min-width:0;overflow-wrap:anywhere}
.ad .thumb{display:block;width:100%;height:92px;object-fit:cover;background:var(--wash);
           margin-bottom:8px}
.ad .adv{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.16em;
         text-transform:uppercase;color:var(--faint)}
.ad .cp{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:5px 0}
.ad .cta{display:inline-block;border:1px solid var(--rule);padding:0 5px;
         margin-right:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
         text-transform:uppercase;color:var(--dim)}
.ad a{color:var(--txt);text-decoration:none;font-size:11px;border-bottom:1px solid var(--rule)}
/* The evidence table is the data instrument: a solid ink header band with
   reversed mono type, then hairline rows. */
.kw{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px;color:var(--dim)}
.kw th{text-align:left;background:var(--txt);color:#fff;font-family:var(--mono);
       font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;padding:6px 10px;
       border-bottom:1px solid var(--txt)}
.kw td{padding:7px 10px;border-bottom:1px solid var(--line-soft)}
.kw td:first-child{color:var(--txt)}
.kw td+td{font-family:var(--mono);font-size:11px;letter-spacing:0}
.scrollx{overflow-x:auto;max-width:100%}


/* ---------- footer (§3.7) ---------- */
footer{margin:56px 0 60px;padding-top:22px;border-top:1px solid var(--txt);display:flex;
       flex-wrap:wrap;gap:16px;align-items:center;font-family:var(--mono);font-size:10px;
       color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
footer .sources{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
footer .sources span{background:#fff;border:1px solid var(--line);padding:3px 8px;
                     color:var(--dim);font-size:9.5px}


@media(max-width:1080px){
  .hero-top{grid-template-columns:1fr;gap:26px}
  .radar-wrap{max-width:560px;margin:0 auto;width:100%}
  .span7,.span5,.span6{grid-column:span 12}
  .span4{grid-column:span 6}
}
/* The report's own responsive floor. The landing page's breakpoints stayed in
   static/index.html with the layout they belong to; these are the report body's
   and nothing else's, so the same rules apply inside the app shell. */
@media(max-width:760px){
  .hero-top{padding:26px 20px 22px}
  .headline{font-size:34px}
  .meta-bar{padding-left:20px;padding-right:20px;gap:14px}
  .meta-bar .pill{margin-left:0}
  .span4{grid-column:span 12}
  .card{padding:20px}
  .kv{flex-direction:column;gap:3px}
  .kv dt{width:auto}
  .stats{gap:18px}
  .row .nm{width:96px;font-size:12.5px}
  .sec-head{flex-wrap:wrap;gap:6px 12px;margin-top:38px}
  .sec-head .rule{flex:1 0 100%}
  .lbl{font-size:21px;letter-spacing:.07em}
  .lblv{font-size:17px}
  .tally-ch{font-size:11px;max-width:44%}
}
@media (prefers-reduced-motion:reduce){
  .sweep,.blip{animation:none}
  .card{transition:none}
  .card.flash{transition:none}
}