/* share.html?r=<id>: the public read-only report (js/pages/share.js). No shell: a logo bar, the page head and the
   report view of css/pages/monthly.css (share.html links it). Tokens only (css/tokens.css). */
.share { min-height: 100vh; min-height: 100dvh; padding: 20px; display: flex; justify-content: center; outline: none; }
.sh { width: min(1180px, 100%); display: flex; flex-direction: column; gap: var(--gap-section); }
.sh-top { display: flex; align-items: center; gap: 10px; }
.sh-logo { width: 44px; height: 44px; flex: none; }
.sh-brand { flex: 1; font-size: var(--fs-ui); color: var(--muted); }
.sh-ro {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--card); color: var(--muted); font-size: var(--fs-small);
}
.sh-ro .ph { font-size: 14px; }
.sh-google {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--card); font-size: var(--fs-ui); white-space: nowrap;
}
.sh-google .ph-fill { color: var(--ac); font-size: 16px; }
.sh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh .empty { margin-top: 10vh; }
@media (max-width: 900px) {
  .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .share { padding: 14px; }
  .sh-google { height: 40px; padding: 0 14px; font-size: var(--fs-meta); }
}