/* one section style on every page, the same as the lists on Home and the Matches page: a title row, then the
   content on one card. Small cards inside a section (tiles, players, teams) sit on the tile colour. The coding
   screen keeps its own layout */

/* ---------------------------------------------------------------- every width: one card level */

.panel:not(.coder .panel, .level-side .panel) { padding: 0; background: var(--card); }
.panel:not(.coder .panel, .level-side .panel) > .panel-head { min-height: 0; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.panel:not(.coder .panel, .level-side .panel) > .panel-body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: none; }
.panel:not(.coder .panel, .level-side .panel) > .panel-body:only-child { border-radius: var(--radius-lg); }
/* sections that hold their cards directly (Top players, the Teams grid) */
.panel > .players-grid, .panel > .team-grid { padding: 12px 14px 14px; }
.panel .pcard, .panel .tcard { background: var(--tile); }
.panel a.tcard:hover { background: var(--tile-hover, var(--tile)); }

/* ---------------------------------------------------------------- phones: sections run edge to edge */

@media screen and (max-width: 760px) {
  .page, .page-cols, .dash, .team-page, .player-page, .pp-main, .pp-side, .match-page, .mp-body, .story-page, .story-main, .story-side-col { gap: 0; }

  /* the page headers too */
  .team-hero, .match-hero, .story-hero { margin: 0 -16px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .team-hero, .story-hero { padding: 12px 16px 16px; }
  .match-hero { padding: 12px 16px 16px; }

  .panel:not(.coder .panel, .level-side .panel) { margin: 0 -16px; border-radius: 0; background: none; }
  .panel:not(.coder .panel, .level-side .panel) > .panel-head { padding: 16px 16px 8px; border-bottom: 0; }
  .panel:not(.coder .panel, .level-side .panel) > .panel-head .title { font-size: 18px; }
  .panel:not(.coder .panel, .level-side .panel) > :not(.panel-head) { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--card); }
  .panel:not(.coder .panel, .level-side .panel) > .panel-body { padding: 12px 16px; }
  .panel:not(.coder .panel, .level-side .panel) > .panel-body:has(> .mlines.g) { padding: 0; }
  .panel > .players-grid, .panel > .team-grid { padding: 12px 16px; }
  /* a section with no title row (the story's text) starts a little lower */
  .panel:not(.coder .panel, .level-side .panel) > .panel-body:only-child { margin-top: 12px; }
}