/* Boxes follow the width they actually get (sidebar open or not), not only the screen width.
   Pattern: at most N columns, each at least a readable minimum; below it, fewer columns. */
.form-grid{grid-template-columns:repeat(auto-fit,minmax(max(min(100%,210px),calc((100% - 17px) / 2)),1fr))}
.two-col{grid-template-columns:repeat(auto-fit,minmax(max(min(100%,320px),calc((100% - 22px) / 2)),1fr))}
.three-col{grid-template-columns:repeat(auto-fit,minmax(max(min(100%,230px),calc((100% - 36px) / 3)),1fr))}
.form-grid>*,.two-col>*,.three-col>*{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%;box-sizing:border-box}
.form-grid .full,.form-grid .wide{grid-column:1/-1}

/* Simple tables (labelled by src/responsive.js): one card per row when their box is narrow. */
.stack-wrap{container-type:inline-size}
@container (max-width:640px){
 table.stackable{white-space:normal}
 table.stackable thead{display:none}
 table.stackable,table.stackable tbody,table.stackable tr,table.stackable td{display:block;width:100%;box-sizing:border-box}
 table.stackable tr{padding:12px 0;border-bottom:1px solid #eef0f6}
 table.stackable tr:last-child{border-bottom:0}
 table.stackable td{display:flex;gap:14px;align-items:center;justify-content:space-between;min-height:30px;padding:5px 18px;border:0;text-align:right}
 table.stackable td::before{content:attr(data-label);flex:none;max-width:45%;font-size:10px;color:#8c95ac;text-align:left}
 table.stackable td[data-label=""]::before,table.stackable td:first-child::before{content:none}
 table.stackable td:first-child{justify-content:flex-start;text-align:left;padding-bottom:8px}
 table.stackable td:empty{display:none}
 table.stackable td[data-label=""]:not(:first-child){justify-content:flex-end}
 table.stackable td .buttons{flex-wrap:wrap;justify-content:flex-end}
}

/* Settings: identity form + side column; one column when the content area is narrow. */
.settings-wrap{container-type:inline-size}
.settings-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:22px;align-items:start}
.settings-side{display:grid;gap:22px;align-content:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.settings-side .panel,.settings-identity{margin:0}
.settings-card-head h2{margin:0}
.settings-card-head .subtext{margin:6px 0 0}
.settings-official{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;padding:12px 14px;border-radius:10px;background:#f6f3fe;border:1px solid #e7e0f8;font-size:12px;line-height:1.6;color:#5f587a}
.settings-official svg{flex:none;width:16px;height:16px;margin-top:2px;color:#6a55c4}
.settings-official strong{color:#4b3fa0}
.settings-group{border:0;margin:0;padding:18px 0 20px;min-width:0}
.settings-group+.settings-group{border-top:1px solid #f0edf7}
/* A floated legend lays out like a normal heading instead of sitting on the fieldset border. */
.settings-group legend{float:left;width:100%;padding:0;margin:0 0 12px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7c6fc0}
.settings-group legend+*{clear:both}
.settings-group .form-grid{gap:14px 17px}
.settings-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px solid #f0edf7}
.settings-actions .subtext{font-size:11px;margin:0}
.settings-buttons{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:16px}
.settings-buttons .btn{justify-content:flex-start}
.settings-side .danger-zone .subtext{margin:6px 0 16px}
.settings-fine{margin-top:16px;font-size:10px}
@container (max-width:860px){
 .settings-page{grid-template-columns:minmax(0,1fr)}
 .settings-buttons{flex-direction:row;flex-wrap:wrap}
}
@container (max-width:520px){
 .settings-actions .btn{width:100%;justify-content:center}
}

/* Buttons hidden by script stay hidden despite their display rule. */
.btn[hidden]{display:none!important}