/* ----------------------------------------------------------------------- */
/* Panels                                                                   */
/* ----------------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--gap-5);
  margin-bottom: var(--gap-5);
}
.panel--quiet  { background: transparent; }
.panel--sunken { background: var(--surface-2); }
.panel--accent {
  background: var(--accent-soft);
  border-color: rgba(233, 78, 27, 0.3);
}

.panel__header {
  margin: calc(-1 * var(--gap-5)) calc(-1 * var(--gap-5)) var(--gap-4);
  padding: var(--gap-3) var(--gap-5);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  flex-wrap: wrap;
}
.panel__header h2,
.panel__header h3 { margin: 0; }

.panel__footer {
  margin: var(--gap-4) calc(-1 * var(--gap-5)) calc(-1 * var(--gap-5));
  padding: var(--gap-3) var(--gap-5);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Empty state inside a panel */
.empty {
  padding: var(--gap-7) var(--gap-5);
  text-align: center;
  color: var(--ink-muted);
}
/* Foot row inside a panel — small muted text with a top divider */
.panel-meta-row {
  margin-top: var(--gap-3);
  padding-top: var(--gap-2);
  border-top: 1px solid var(--rule);
}