/* The flow 2 pages' shared layout. app.css carries the tokens, the title
   and the button; this holds the page column and the field label. */
.flow-page { max-width: 40rem; margin: 0 auto; padding: 24px 16px; box-sizing: border-box; }
.flow-label { font-weight: 700; }

/* The practice page (information-flow 2.2; Task 22). app.css carries the
   fields, the banner and the button; this lays out the radio pair, the
   stage names and the Skip beside the hourly rate. */
.practice { display: flex; flex-direction: column; gap: 16px; }
.practice-fields { margin-top: 8px; }
.practice-fields fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.practice-choice { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.practice-choice legend { width: 100%; margin-bottom: 8px; }
.practice-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.practice-radio input { width: 20px; height: 20px; margin: 0; }
.practice-stages { display: grid; gap: 12px; }
.practice-stage-label { display: block; margin-bottom: 4px; }
.practice-skip { margin-top: 8px; min-height: 44px; }
.practice .btn-primary { align-self: flex-start; min-height: 44px; min-width: 44px; }
.practice .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }