/* Shared section gutters use canonical spacing tokens across every page section. */
.main-sidebar-header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}
#sidebar .main-sidebar-header .brand{flex:1;min-width:0;margin:0;padding:0}
#sidebar .main-sidebar-header .brand img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain}
.main-sidebar-toggle{display:grid;place-items:center;flex:none;width:24px;height:24px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer}
.main-sidebar-toggle svg{display:block}
@media(min-width:768px){
  html.main-sidebar-collapsed{--sidebar:72px}
  .main-sidebar-collapsed #sidebar{padding-inline:var(--space-3)}
  .main-sidebar-collapsed .main-sidebar-header{flex-direction:column}
  .main-sidebar-collapsed #sidebar .brand{width:32px;flex:none}
  .main-sidebar-collapsed #sidebar :is(#nav,.privacy){display:none}
  .main-sidebar-collapsed .main-sidebar-toggle svg{transform:rotate(180deg)}
}
#input-states .input-matrix{column-gap:var(--space-3)}
/* Configuration text follows the Data table's established 14px type scale. */
main#main .controls,
main#main .cp-controls{font-size:var(--type-small);line-height:1.5}
main#main :is(.controls,.cp-controls) :is(label,legend){font-size:var(--type-small);font-weight:500;line-height:1.5}
main#main :is(.controls,.cp-controls) :is(input,select,textarea,option){font-size:var(--type-small);font-weight:400;line-height:1.5}
main#main :is(.controls,.cp-controls) button{font-size:var(--type-small);line-height:1.5}
main#main > .section{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:var(--space-8);
}
@media(max-width:767px){
  main#main > .section{padding-inline:var(--space-4)}
}