.flexible-clock-panel{display:grid;grid-template-columns:minmax(240px,330px) minmax(200px,1fr);gap:16px;align-items:stretch;margin:0 0 16px auto;max-width:690px}
.flexible-clock-form,.flexible-clock-status{background:#fff;border:1px solid #e2ded7;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px}
.flexible-clock-form label,.flexible-clock-status strong{font-weight:700;font-size:14px;color:#364a3d}
.flexible-clock-form select,.flexible-clock-form textarea{width:100%;box-sizing:border-box;border:1px solid #d1d4d0;border-radius:7px;padding:9px;background:#fff;font:inherit}
.flexible-clock-button{border:0;border-radius:9px;background:#548a57;color:white;padding:13px 18px;font-weight:750;font-size:16px;cursor:pointer}
.flexible-clock-button.is-checked-in{background:#a13946}
.flexible-clock-button:disabled{opacity:.5;cursor:not-allowed}
.flexible-clock-status{justify-content:center;background:#f7faf5}
#flexible-clock-message{font-size:13px;line-height:1.4}
#flexible-clock-time{font-size:12px;color:#536457}
@media(max-width:650px){.flexible-clock-panel{grid-template-columns:1fr;max-width:none}}

/* Volunteer calendar: full-width flexible check-in first, date heading below. */
.volunteer-calendar-section .volunteer-calendar-heading{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.volunteer-calendar-section .flexible-clock-panel{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.volunteer-calendar-section .two-week-heading{width:100%;margin:0;padding:0 0 4px}
.volunteer-calendar-section .two-week-heading h2{margin:0 0 4px}
.volunteer-calendar-section .two-week-heading p{margin:3px 0}
@media(max-width:650px){.volunteer-calendar-section .flexible-clock-panel{grid-template-columns:1fr}}

/* Clear separation between check-in controls and calendar heading. */
.volunteer-calendar-section .volunteer-calendar-heading { row-gap: 22px; }
.volunteer-calendar-section .two-week-heading { padding-top: 10px; }
#flexible-clock-panel { scroll-margin-top: 100px; }
.flexible-opportunity-checkin-link { display: inline-flex; align-items: center; width: fit-content; margin-top: 12px; padding: 8px 14px; border: 1px solid #a4b792; border-radius: 999px; color: #365f3c; font-weight: 700; font-size: 13px; text-decoration: none; background: #f4f8f0; }
.flexible-opportunity-checkin-link:hover, .flexible-opportunity-checkin-link:focus-visible { background: #e6efe0; text-decoration: underline; }