/* --- Panels: a raised card for forms, tools and messages ----------------------------------- */

/* Elevation 1: --surface with a hairline edge, no shadow. Settings groups, the upload
   drop zone, admin tables and empty states sit in panels. Album grids and tracklists
   never do: "cards without boxes" is the Sleeve rule.

   A panel is a raised surface, so controls inside it are outlined in --line-strong
   (buttons.css sets --control-border on .panel). */
.panel {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.panel + .panel { margin-top: var(--space-4); }

.panel-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
}

/* A sub-block inside a panel, ruled off from what comes before it. */
.panel-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

/* Right under the title there is nothing to rule off: a section that follows it, at
   once or past a hidden line (Settings' Account when /api/me cannot be read), takes no
   rule. */
.panel-title + .panel-section,
.panel-title + [hidden] + .panel-section { margin-top: 0; padding-top: 0; border-top: 0; }

/* A panel whose content runs to its edges (a .table): no padding, and its rows'
   hover grounds are clipped to the rounded corners. */
.panel-flush { padding: 0; overflow: hidden; }

@media (max-width: 40rem) {
  .panel { padding: var(--space-4); }
  .panel-flush { padding: 0; }
  .panel-section { margin-top: var(--space-4); padding-top: var(--space-4); }
}