.squats { max-width: 900px; margin: auto; padding: 100px 20px 40px; }
.squats section { padding: 24px 0; }
.squats h1 { font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.15; }
.squats p { margin: 16px 0; }
.squats .eyebrow { color: #fff500; }
.squats label { display: block; margin-bottom: 8px; }
.handle-field { display: flex; align-items: center; border: 1px solid #888; border-radius: 4px; background: #1a1a1a; padding-left: 12px; max-width: 520px; }
.handle-field input { min-width: 0; width: 100%; background: transparent; color: white; border: 0; padding: 16px 8px; font: inherit; font-size: 16px; }
.squats button { min-height: 48px; cursor: pointer; font: inherit; }
.squats a { overflow-wrap: anywhere; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.days button { border: 1px solid #888; background: #292929; color: white; min-height: 64px; border-radius: 4px; }
.days button[aria-pressed="true"] { background: #fff500; color: #212121; border-color: #fff500; }
.days button:disabled { opacity: .45; cursor: default; }
.squats button:focus-visible, .squats input:focus-visible { outline: 3px solid #fff500; outline-offset: 3px; }
.squats progress { width: 100%; height: 22px; accent-color: #fff500; }
#roster { list-style: none; padding: 0; }
#roster li { padding: 16px 0; border-bottom: 1px solid #555; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#roster a { min-height: 44px; display: inline-flex; align-items: center; }
@media(min-width: 700px) { .days { grid-template-columns: repeat(10, minmax(0, 1fr)); } }

.handle-field > span { flex: 0 0 auto; }

#edit-link { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; font: inherit; }
/* Site button styles must not override ownership and recovery visibility. */
.squats [hidden] { display: none !important; }
#person-title { overflow-wrap: anywhere; }

#roster li > a:first-child { font-size: 1.2rem; font-weight: 500; flex: 1; }
#roster .roster-instagram { font-size: .85rem; }
#roster progress { flex-basis: 100%; height: 8px; }

.squats .leave-control { margin-top: 32px; }
.squats #leave { background: none; border: 0; color: #bbb; padding: 0; font-size: .875rem; text-decoration: underline; }
.squats #leave:hover { color: white; }