/* Looks the public site adds to the hub's States pages (static/hub/css/states.css, state.css, compare.css: synced). Hand-written; the sync never touches it. */

/* The server-built page (the status box's content, for crawlers and readers without scripts) goes away when the hub's script runs. flag.js sets
   data-audience on <html> when scripts run. The hub's own controls, which need the script to fill them, stay hidden until it does. */
html[data-audience="public"] .ssr-only { display: none; }
html:not([data-audience="public"]) .hub-states .view-toggle,
html:not([data-audience="public"]) .hub-compare .cmp-controls { display: none; }

/* the map's tooltip is added to <body>, outside the page's wrapper class the synced rules sit under */
.map-tip { position: fixed; z-index: 50; max-width: 280px; padding: 7px 10px; border-radius: 6px; background: var(--text); color: var(--panel);
  font-size: 12px; line-height: 1.4; pointer-events: none; }

/* The owner's rule (2026-10-02): no big-number stat tiles. The profile's header counts read as one line: the number (bold, not large), then its words. */
.hub-state .stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 6px 0 0; border-top: 0; }
.hub-state .stat, .hub-state .stat:first-child { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; align-items: baseline;
  padding: 0; border-left: 0; min-width: 0; }
.hub-state .stat dd { font-size: inherit; font-weight: 600; line-height: inherit; }
.hub-state .stat dt { margin: 0; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted); }
@media (max-width: 640px) {
  .hub-state .stats { display: flex; gap: 4px 14px; }
  .hub-state .stat, .hub-state .stat:first-child { padding: 0; }
}

/* a bill's type chips (the hub lets them run on one line) wrap inside the row on a phone, so the page never scrolls sideways */
.hub-state .rows .what { overflow-wrap: anywhere; }
.hub-state .tag { white-space: normal; }

/* the profile's heading is a level-1 heading by role (see the sync config): it looks as the hub's h1 does */
.hub-state .hero .h1 { font-family: var(--font-display); font-weight: bold; font-size: 26px; line-height: 1.15; margin: 0; letter-spacing: .2px; }
@media (max-width: 640px) { .hub-state .hero .h1 { font-size: 22px; } }

/* the hub's page header (compare) sits inside the page here, under the site's own bar */
.hub-compare header { padding: 0 0 10px; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
.hub-compare header h1 { margin: 0; }

.hub-states .hub-credit, .hub-state .hub-credit, .hub-compare .hub-credit { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  color: var(--faint); font-size: 11.5px; }