/* Shared spacing contract. Page gutters, card insets and control gaps are distinct. */
:root{--page-gutter:16px;--page-top:24px;--card-inset:20px;--section-gap:28px;--control-gap:12px;--field-gap:20px;--row-inset:20px}
@media(min-width:600px){:root{--page-gutter:24px;--page-top:28px;--card-inset:24px;--section-gap:32px}}
@media(min-width:900px){:root{--page-gutter:32px;--page-top:32px;--card-inset:28px;--row-inset:24px}}
@media(min-width:1440px){:root{--page-gutter:48px;--page-top:40px;--section-gap:36px}}
main,.participant main{padding-inline:var(--page-gutter);padding-top:var(--page-top)}
.brand,.participant .brand{padding-inline:var(--page-gutter)}
.demo-bar{padding-inline:var(--page-gutter)}
.panel,.participant .panel,.dashboard-next,.participant .dashboard-next{padding:var(--card-inset)}
.panel>:last-child{margin-bottom:0}
.grid,.grid3,.project-grid,.participant .project-grid{gap:var(--field-gap)}
.headrow{gap:var(--field-gap);margin-bottom:24px}
.actions{gap:var(--control-gap)}
.section{margin-top:var(--section-gap)}
.field{gap:8px;margin-bottom:var(--field-gap)}
.participant .capture .field{margin-bottom:var(--field-gap)}
.participant .capture .formfields{margin-top:24px}
.capture .form-footer{gap:var(--field-gap)}
.participant .project-map{margin-bottom:var(--section-gap)}
.participant .response-sections{margin-top:24px}
.participant .response-sections .request:not(.next-section){padding-block:var(--row-inset);padding-inline:0;column-gap:20px;row-gap:8px}
.participant .response-sections .request.next-section{padding:var(--card-inset);gap:20px;border-radius:12px}
.participant .response-sections .next-section h2{margin:0 0 8px;line-height:1.25}
.participant .response-sections .next-section p{margin:0}
.participant .response-sections .next-section>.primary{padding:12px 20px}
.room-answer,.participant .room-answer{padding:var(--card-inset);gap:16px}
.room-add,.participant .room-add{margin-top:24px}
.room-options,.participant .room-options{gap:var(--control-gap)}
.radio-options,.participant .radio-options,.topic-options,.participant .topic-options{gap:var(--control-gap)}
.participant .radio-options:not(.room-kind) label,.participant .topic-options label{padding:16px;gap:12px}
.participant .room-kind label{padding:10px;gap:8px}
.gallery-grid,.participant .gallery-grid{gap:16px}
.gallery-tile .gallery-card span,.participant .gallery-tile .gallery-card span{padding:16px}
.notice{padding:16px 20px;margin:20px 0}
.review-controls label{margin-top:20px;margin-bottom:8px}
.review-controls .actions{margin-top:20px}
.project-bottom,.participant .project-bottom{padding-top:20px;margin-top:20px;gap:16px}
.attachment,.participant .attachment{gap:12px;padding-block:12px}
.footer,.participant .footer{margin-top:var(--section-gap);padding-top:16px;gap:20px}
dialog{padding:var(--card-inset) var(--card-inset) calc(var(--card-inset) + env(safe-area-inset-bottom))}
dialog .actions{gap:12px;margin-top:24px}
@media(max-width:899px){
 .participant .capture .form-footer{padding-inline:var(--page-gutter);padding-top:12px;gap:8px}
 .participant .response-sections .request.next-section{margin:0 0 24px}
 .participant .response-sections .next-section>.primary{margin-top:20px}
}
@media(min-width:900px){
 .participant .response-sections .request.next-section{margin:24px 0 0}
 .participant .response-sections .next-section>.primary{margin:0;flex-shrink:0}
 .participant .capture .form-footer{margin-top:32px;padding-top:16px}
}