/* Shared primitives. Keep business markup/IDs stable for existing integrations. */
:root{--ui-control-height:44px;--ui-radius:8px;--ui-border:#bccbdc;--ui-help:#52667d;--ui-focus:#174f96}
.ui-field,.field{min-width:0}
.ui-grid,.fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-control,.field input,.field select,.field textarea,.hoursfield input{max-width:100%;min-width:0;min-height:var(--ui-control-height);border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:#fff;color:var(--ink);padding:10px 12px;line-height:1.5}
.ui-button,.primary,.outline,.soft{min-height:var(--ui-control-height);max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.4;border-radius:var(--ui-radius)}
.ui-control:focus-visible,.ui-button:focus-visible,.field :is(input,select,textarea):focus-visible,.hoursfield input:focus-visible{outline:3px solid var(--ui-focus);outline-offset:2px}
.ui-help{color:var(--ui-help);font-size:12px;line-height:1.6}
.ui-grid>*{min-width:0}
/* Prevent intrinsic input/file/select widths from enlarging the grid track. */
.form-layout{grid-template-columns:minmax(0,760px) minmax(0,270px)}
.form-layout>*{min-width:0;max-width:100%}
#reportForm{min-width:0;max-width:100%;overflow-wrap:anywhere}
#reportForm .fields,#reportForm .attendees{grid-template-columns:repeat(2,minmax(0,1fr))}
#reportForm :is(.formcard,.field,.photo-input,.hoursfield,.checkperson){min-width:0;max-width:100%}
#reportForm :is(input,select,textarea){max-width:100%}
#reportForm input[type=file]{width:100%;min-width:0}
#reportForm :is(.hint,.checkperson small,.attendeeheader small,.hoursfield label){color:var(--ui-help);font-size:12px;line-height:1.6}
#reportForm :is(.checkperson,.radio-group label){font-size:13px;min-height:44px}
#reportForm :is(.checkperson,.hoursfield)>:not(input){min-width:0}
#reportForm .checkperson input{flex:0 0 20px;width:20px;height:20px}
#reportForm .hoursfield input{flex:0 0 80px;width:80px}
#reportForm .attendeeheader{gap:12px;flex-wrap:wrap}
#reportForm .textbtn{min-height:44px}
#reportForm .radio-group{gap:10px}
#reportForm .radio-group label{padding:10px 12px}
#reportForm .form-status{color:#405b77;line-height:1.6}
#reportForm .form-actions{flex-wrap:wrap;gap:12px}
#reportForm .form-actions button{flex:1 1 120px}
#reportForm :is(input,select,textarea,button){scroll-margin-block:90px}
.ui-choice-group{border:0;padding:0;margin:0;min-width:0}
.ui-choice-group legend{font-weight:600;margin-bottom:9px;font-size:12px}
@media(max-width:1150px){.form-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
 .ui-grid,.fields,#reportForm .fields,#reportForm .attendees{grid-template-columns:minmax(0,1fr)}
 .ui-control,.field input,.field select,.field textarea,.hoursfield input{font-size:16px}
 .form-layout{gap:16px}
 #reportForm .formcard h2{align-items:flex-start;line-height:1.5}
 #reportForm .step{flex-shrink:0}
 #reportForm .radio-group{display:grid;grid-template-columns:minmax(0,1fr)}
 #reportForm .form-actions{padding-bottom:max(13px,env(safe-area-inset-bottom))}
 .modalfoot{flex-wrap:wrap}
 .modalfoot>*{min-width:0;max-width:100%}
 dialog{max-width:calc(100vw - 24px)}
}
@media(max-width:400px){
 .topbar{height:auto;min-height:75px;padding-block:8px}
 .topright{flex-wrap:wrap;justify-content:flex-end;min-width:0}
 .topright .outline{flex-shrink:0;overflow-wrap:normal}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}