/* screens.css - layout shared across screens. Screen-specific rules live in the
   matching per-screen file (new-run.css, working.css, ...). */

.section { margin-bottom: 26px; }
.section:last-child { margin-bottom: 0; }
.section-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.section-h h2 { font-size: 16px; letter-spacing: -0.01em; }
.section-h .section-note { font-size: 12.5px; color: var(--muted); }

/* A two-column screen body that collapses on phones. */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cols-1-2 { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .cols, .cols-1-2 { grid-template-columns: 1fr; } }

/* Sticky footer bar (pick plans, new run submit summary) */
.sticky-foot {
  position: sticky; bottom: 0; z-index: 20; margin-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.sticky-foot .sf-summary { font-size: 13.5px; color: var(--ink-2); }
.sticky-foot .sf-summary strong { color: var(--ink); }

/* Download tile (Ready) */
.dl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 640px) { .dl-tiles { grid-template-columns: 1fr; } }

/* Generic stub screen placeholder wrapper */
.stub { padding-top: 8px; }