/* fetch-1500: the rules are a dialog over the Staff Plan (event-staffing-plan.css sizes it); the band and its toggle are gone. */
.csp-body { display: grid; gap: var(--s-3); padding: 0; }
.csp-body fieldset { min-width: 0; }
.csp-body legend { margin-block: var(--s-3); font-weight: 600; }
.csp-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-3); }
.csp-fields input,.csp-fields select { min-width: 0; width: 100%; min-height: var(--control-height-touch); box-sizing: border-box; }
.csp-schedule { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-3); }
.csp-shift { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.csp-shift p { margin: 0; color: var(--muted); font-size: var(--t-sub); }
.csp-budget { display: flex; flex-wrap: wrap; gap: var(--s-3); font-variant-numeric: tabular-nums; }
.csp-checkpoints { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--t-sub); }
.csp-body summary { cursor: pointer; min-height: var(--control-height-touch); align-content: center; }
.csp-body button { min-height: var(--control-height-touch); }
.csp-body textarea { display: block; width: 100%; min-height: 6em; box-sizing: border-box; font: inherit; font-size: 1rem; }
.csp-approval .esp-field { display: grid; gap: var(--s-1); margin-block: var(--s-2); }
@media(max-width: 640px) { .csp-fields,.csp-schedule { grid-template-columns: minmax(0,1fr); } .csp-toggle { flex-direction: column; gap: var(--s-1); } }