/* jobs.css
 * Scheduled Jobs panel. Rendered by public/modules/panels/jobs.js.
 *
 * This panel had no stylesheet of its own until the panel layout contract went
 * in — it borrowed .m3-* atoms from m3-atoms.css and nothing else. The atoms are
 * shared across panels, so its layout could not live there without leaking into
 * every other consumer. It lives here instead.
 *
 * Host contract: public/styles/panel-layout.css
 */

/* Two independent controls at 1560px would put the Create form's submit button
   a full screen from its own fields. 1400 keeps the pair readable. */
.jobs-panel { --panel-max-wide: 1400px; }

/* ── Wide layout ──────────────────────────────────────────────────────────────
   The panel is exactly two blocks: a create form and the list of existing jobs.
   Stacked, the form pushes the list below the fold and you cannot see what you
   already scheduled while you schedule the next one. Side by side, with the form
   pinned, you can. That is the whole reason to spend the width here. */

@media (min-width: 1024px) {
  .jobs-panel {
    display: grid;
    grid-template-columns: minmax(0, var(--panel-aside)) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  /* The create form is the aside and stays put while the job list scrolls. */
  .jobs-panel > .m3-section:first-child {
    position: sticky;
    top: 0;
    align-self: start;
  }
}