/* Phones only (linked with media="(max-width: 700px)" after site.css, so these rules win). Goals: a short sticky bar,
   nothing wider than the screen, and the data close to the top. */

/* One swipeable row: filters, then zones. The row itself scrolls; the chip groups just sit in it. */
.appbar .toolbar { padding: 8px 0; gap: 6px; }
.toolbar-row {
    flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 10px;
    overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none;
}
.toolbar-row::-webkit-scrollbar { display: none; }
.filters, .zonenav { flex: 0 0 auto; flex-wrap: nowrap; overflow: visible; margin: 0; padding: 0; }
.zonenav { padding-left: 10px; border-left: 1px solid var(--line); }
.fchip, .zlink { flex: 0 0 auto; white-space: nowrap; padding: 5px 12px; font-size: .82rem; }
.filterpanel { max-height: 45vh; }
.zone { scroll-margin-top: 100px; }

/* Hero: less chrome above the data. */
.hero { padding: 20px 0 10px; }
.lead { display: none; }
.stats { margin-top: 12px; gap: 6px; }
.reset-note { margin-top: 8px; font-size: .8rem; }

/* Panels */
.panel { margin-top: 14px; padding: 12px; }
.hist-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sumtable { font-size: .82rem; }
.sumtable th, .sumtable td { padding: 6px 8px; }
/* keep the reward name visible while the zone columns scroll */
.sumtable tbody th { position: sticky; left: 0; z-index: 1; background: var(--card); }

/* Zone headings: name | count | PL | arrow in fixed columns so they line up row to row. */
.zone-head { grid-template-columns: minmax(0, 1fr) 4.6rem 5.8rem 1rem; gap: 0 6px; }
.zone-head h2 { font-size: 1.2rem; }
.zone-head .count { justify-self: end; font-size: .78rem; }
.zone-head .range { font-size: .72rem; padding: 2px 7px; }

/* Level-rewards button collapses to a star so the zone name keeps its room. */
.lvl-full { display: none; }
.lvl-short { display: inline; }
.lvl-btn { padding: 1px 8px; }
.lvl-table th, .lvl-table td { padding: 6px 5px; }
.lvl-table td { font-size: .84rem; }