/* Intrinsic sizing keeps long values and native date controls inside their fields. */
.shell#app>main{container-type:inline-size;container-name:workspace}
main *,dialog *, .cloud-auth-card *{box-sizing:border-box}
main :is(.grid,.summary,.dispatch,.sliders,.weather,.metars,.tiles,.two-col,.field,.card,.head,.train-title,.mission-row,.student-context){min-width:0}
main :is(.grid,.summary,.dispatch,.sliders,.weather,.metars,.tiles,.two-col)>*{min-width:0}
main :is(input,select,textarea),dialog :is(input,select,textarea),.cloud-auth-card :is(input,select){max-width:100%;min-width:0}
main :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]){width:100%}
main :is(p,h2,h3,h4,strong,.helper,.train-mini,.status),dialog :is(p,label,span){overflow-wrap:anywhere}
main .button-row{gap:10px;align-items:center;justify-content:flex-start}
main :is(.head,.student-context,.queue,.score-head){flex-wrap:wrap}
main :is(.head,.student-context,.queue,.score-head)>*{min-width:0}
main button,dialog button{white-space:normal;max-width:100%}
#missionScreen .grid>.field>:is(label,.label){white-space:normal}
#missionScreen .grid>.field{display:flex;flex-direction:column;gap:7px}
#missionScreen .grid>.field>:is(label,.label){min-height:1.5em}
#missionScreen .grid>.field .helper{margin-top:0}
.airport-picker{position:relative;min-width:0}
.airport-options{top:100%;max-width:100%}
.metar code{white-space:normal;overflow-wrap:anywhere}
#trainingPanel .prep-row{align-items:flex-start}
#trainingPanel input[type=checkbox]{appearance:none;-webkit-appearance:none;display:grid;place-content:center;position:relative;flex:0 0 22px;width:22px;height:22px;min-width:22px;padding:0;margin:2px 0 0;border:1px solid #888;border-radius:3px;background:#fff;overflow:hidden}
#trainingPanel input[type=checkbox]:checked::after{content:'✓';display:block;position:static;transform:none;width:auto;height:auto;border:0;font:600 20px/1 Arial,sans-serif;color:var(--orange)}
#trainingPanel input[type=checkbox]:disabled{opacity:1;cursor:default}
#trainingPanel input[type=checkbox]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.signup-terms{display:flex;align-items:flex-start;gap:10px;margin:16px 0}
.signup-terms input{flex:0 0 20px;width:20px;height:20px}
@container workspace (max-width:850px){
 #missionScreen .grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dispatch,#trainingPanel .two-col{grid-template-columns:minmax(0,1fr)}
 #trainingPanel .solo-checkout{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container workspace (max-width:600px){
 .grid,.grid.three,#missionScreen .grid.three,.summary,.weather,.metars,.sliders{grid-template-columns:minmax(0,1fr)!important}
 .full{grid-column:auto}
 #trainingPanel .solo-checkout{grid-template-columns:minmax(0,1fr)}
 #trainingPanel .phase-grid,#trainingPanel .train-metrics{grid-template-columns:minmax(0,1fr)}
 .result{grid-template-columns:minmax(0,1fr)}
 .mission-row{grid-template-columns:minmax(0,1fr)}
 #trainingPanel .lesson-row{flex-wrap:wrap}
 #trainingPanel .lesson-row .grow{flex:1 1 60%}
 #trainingPanel .lesson-row button{min-height:44px}
 .student-context{align-items:flex-start;flex-direction:column}
 .student-context select{width:100%;max-width:100%}
 #trainingPanel .milestone-boxes{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media(max-width:850px){
 main :is(input,select,textarea){font-size:16px}
 .top{gap:8px}.top .brand{min-width:0}.top .account{flex-shrink:0}
 dialog.pb-share-dialog{padding:20px 16px}
 .pb-share-dialog fieldset{min-width:0;padding:12px}
 .pb-share-dialog .button-row{display:flex;flex-wrap:wrap;gap:8px}
 #memberWorkspace #profileForm .qualifications-table :is(input,select){padding-left:6px;padding-right:6px}
}
@media(max-width:420px){
 .top .pb-wordmark{font-size:20px}.top .pb-feather{width:29px}.top #signOut{padding:6px!important}
 #trainingPanel .card,main .card{padding:14px 10px}
 #profileForm .profile-actions>button{flex:1 1 100%}
}
/* Grid items with fixed preferred input widths must still shrink on phones. */
#trainingPanel .field{min-width:0;grid-template-columns:minmax(0,1fr)}
#trainingPanel .field>*{min-width:0;max-width:100%;overflow-wrap:anywhere}
@container workspace (max-width:850px){#missionScreen .grid.three>.field{grid-column:auto}#missionScreen .grid.three>.field.full{grid-column:1/-1}}