/* Settings: keep controls and focus rings inside the panel at all widths. */
html:root body .settings-modal .settings-content{
 min-width:0;container-type:inline-size;overflow-wrap:anywhere;
}
html:root body .settings-modal .settings-content>label{
 display:grid;gap:9px;min-width:0;
}
html:root body .settings-modal .settings-content>label>textarea,
html:root body .settings-modal .settings-content>label>select{
 display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;
 font:inherit;line-height:1.5;
}
html:root body .settings-modal .settings-content>label>textarea{
 min-height:112px;padding:14px 16px;resize:vertical;
}
html:root body .settings-modal .settings-content>label>select{
 min-height:44px;padding:8px 12px;
}
html:root body .settings-modal .settings-content>label+.row-between{
 margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
}
html:root body .settings-modal .settings-content>.row-between>button{
 max-width:100%;height:auto;min-height:44px;white-space:normal;line-height:1.4;
}
html:root body .settings-modal .agia-sum{box-sizing:border-box;max-width:100%;min-width:0}
html:root body .settings-modal .agia-sum .agia-row{
 grid-template-columns:minmax(0,1fr) auto auto auto auto;
}
html:root body .settings-modal .agia-sum .agia-row>*{min-width:0}
html:root body .settings-modal>.modal-footer{flex-wrap:wrap;gap:16px;min-width:0}
html:root body .settings-modal>.modal-footer>.small{flex:1 1 200px;min-width:0;max-width:100%;overflow-wrap:anywhere}
html:root body .settings-modal>.modal-footer>.button{flex:0 1 auto;margin-left:auto;max-width:100%;white-space:normal}
@container (max-width:620px){
 html:root body .settings-modal .agia-sum .agia-row{grid-template-columns:minmax(0,1fr) auto auto;gap:8px 10px;padding:12px 0}
 html:root body .settings-modal .agia-sum .agia-row>span{grid-column:1/-1}
 html:root body .settings-modal .agia-sum .agia-row .agia-prov{display:none}
 html:root body .settings-modal .agia-sum .agia-row b{white-space:normal;overflow-wrap:anywhere}
}