/* Spacing refinements for the approved Handoff components, not a new theme. */
:root{--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--page-gutter:2rem}

/* Shared page rhythm and wrapping toolbars. */
.admin-topbar{padding:1.25rem var(--page-gutter);gap:var(--space-md)}
#admin-eyebrow{margin:0 0 var(--space-xs)}
.admin-topbar h1{margin:0}
.admin-content{padding:var(--space-xl) var(--page-gutter)}
#admin-alert{margin:var(--space-md) var(--page-gutter)}
.content-toolbar{gap:var(--space-sm);margin-bottom:var(--space-md)}
.content-toolbar .search{flex:1 1 240px;max-width:380px;min-width:0}
.status-filter{flex-shrink:0;gap:var(--space-xs)}
.status-filter select,.filter{min-height:44px}
.card-title{gap:var(--space-md);flex-wrap:wrap}
.card-title>div{min-width:0}
.card-title .text-button{display:inline-flex;align-items:center;gap:var(--space-xs);white-space:nowrap;flex-shrink:0}
.metric-grid,.dashboard-grid,.profile-grid,.user-grid{gap:var(--space-md)}
.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.metric-card small{min-height:2.8em;line-height:1.4}
.dashboard-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);align-items:start}
.timeline>div{grid-template-columns:12px minmax(0,1fr) auto}

/* Keep pagination subordinate to the list and separate each control. */
.table-footer{align-items:center;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-sm) var(--space-md)}
.table-footer>div{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.table-footer>span,.table-footer>div>span{white-space:nowrap}
.table-footer>div>span{min-width:2.5rem;text-align:center}
#users-pagination{margin-top:var(--space-md);padding:var(--space-sm) 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}

/* Cards retain their reference width; long identity data can wrap safely. */
.user-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.user-card{min-width:0;display:flex;flex-direction:column}
.user-card h3{margin:var(--space-md) 0 .25rem;overflow-wrap:anywhere}
.user-card-meta{align-items:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);padding:var(--space-md) 0}
.user-card-meta small{flex:1 1 12rem;text-align:right;line-height:1.5}
.user-card>button{margin-top:auto;min-height:44px}
.profile-grid{grid-template-columns:300px minmax(0,1fr);align-items:start}
.profile-summary h2{overflow-wrap:anywhere}
.profile-summary dl{margin-bottom:0}
.profile-summary dl div{gap:var(--space-sm);flex-wrap:wrap;align-items:baseline}
.profile-summary dd{margin:0;text-align:right;flex:1 1 7rem;overflow-wrap:anywhere}
.password-card form{padding:var(--space-lg)}
.two-fields{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-md);margin-bottom:1.25rem}
.two-fields .field{min-width:0;margin-bottom:0}
.password-card form>small{margin:0 0 var(--space-md);line-height:1.5}

/* Forms, panels and previews use the same internal insets. */
.field small{line-height:1.5}
.slug-field input{min-width:0}
#app-dialog .dialog-head,#app-dialog .dialog-body{padding:var(--space-lg)}
#app-dialog .dialog-head{gap:var(--space-md)}
#app-dialog .dialog-actions{padding:var(--space-md) var(--space-lg);gap:var(--space-sm)}
#app-dialog .dialog-body>:first-child{margin-top:0}
#app-dialog .dialog-body>:last-child{margin-bottom:0}
#app-dialog .field+p.muted{margin-top:-.75rem;margin-bottom:1.25rem;font-size:.75rem}
#dialog-feedback{margin:var(--space-xs) var(--space-lg) var(--space-md)}
.preview-shell header{gap:var(--space-md);align-items:flex-start;flex-wrap:wrap;padding:var(--space-md) var(--space-lg)}
.preview-shell header>div:first-child{flex:1 1 16rem}
.preview-shell header>div:last-child{display:flex;align-items:center;gap:var(--space-xs);flex-shrink:0;margin-left:auto}
.preview-shell header button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs)}
#preview-tools{gap:var(--space-xs);padding:var(--space-sm) var(--space-lg)}
#preview-content{padding:var(--space-lg)}
#preview-content pre{margin:0;line-height:1.7}
#preview-feedback{margin:var(--space-sm) var(--space-lg)}

/* Public pages: reserve room for actions and let titles use the available width. */
.public-header{gap:var(--space-md);flex-shrink:0}
.public-header .brand{flex-shrink:0}
.public-footer{gap:var(--space-md);flex-shrink:0}
.access-layout>*{min-width:0}
.login-brand{gap:var(--space-xl)}
.login-brand h1{overflow-wrap:anywhere}
.login-box>.step-number{display:inline-block;margin-bottom:var(--space-sm)}
.workspace-head>div:first-child{min-width:0}
.workspace-actions{flex-shrink:0}
.workspace-actions .button{white-space:nowrap}
.section-toolbar{gap:var(--space-sm);flex-wrap:wrap}
.section-toolbar>div{min-width:0}
.editor-foot{gap:var(--space-sm);flex-wrap:wrap}
.connection-banner{gap:var(--space-md);flex-wrap:wrap}

@media(max-width:1200px){.user-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:minmax(0,1fr)}}
@media(min-width:781px) and (max-width:1100px){#admin-pads th,#admin-pads td{padding:.85rem .65rem}#admin-pads td:nth-child(4){white-space:nowrap}}
@media(max-width:780px){
  :root{--page-gutter:1rem}
  .admin-topbar{padding:var(--space-md);gap:var(--space-xs)}
  .admin-topbar>div:first-of-type{margin-left:0;min-width:0}
  .admin-content{padding:var(--space-md)}
  .content-toolbar .search{flex:auto;max-width:none}
  .filter-group .filter{flex:1}
  .user-grid,.profile-grid{grid-template-columns:minmax(0,1fr)}
  .workspace-head{flex-direction:column;align-items:stretch;gap:var(--space-md)}
  .workspace-actions{justify-content:space-between;gap:var(--space-md)}
  .workspace-head h1{font-size:clamp(1.25rem,4.5vw,1.65rem)}
  .login-brand h1{font-size:clamp(2rem,8.5vw,2.8rem)}
  #app-dialog .dialog-head,#app-dialog .dialog-body{padding:1.25rem}
  #app-dialog .dialog-actions{padding:var(--space-md) 1.25rem max(var(--space-md),env(safe-area-inset-bottom))}
  #dialog-feedback{margin:var(--space-xs) 1.25rem var(--space-md)}
}
@media(max-width:520px){
  .metric-grid{grid-template-columns:minmax(0,1fr)}
  .timeline>div{grid-template-columns:12px minmax(0,1fr);row-gap:.35rem}
  .timeline time{grid-column:2;text-align:left}
  .table-footer>div{margin-left:auto}
  .file-row{grid-template-columns:32px minmax(0,1fr);gap:var(--space-xs)}
  .file-actions{grid-column:2;justify-self:end;gap:.25rem}
  .file-actions button,.file-actions a{min-width:44px;min-height:44px}
  #editor{padding:var(--space-md)}
  .preview-shell header{padding:var(--space-md)}
  #preview-content{padding:var(--space-md)}
  #preview-tools{padding:var(--space-sm) var(--space-md)}
  #preview-feedback{margin:var(--space-sm) var(--space-md)}
}
@media(max-width:360px){
  .public-header{height:auto;min-height:70px;padding:var(--space-md) 0;flex-wrap:wrap;gap:var(--space-sm)}
  .public-header .header-actions{width:100%;justify-content:space-between;margin:0}
  .public-footer{height:auto;min-height:64px;flex-wrap:wrap;padding:var(--space-md) 0;gap:var(--space-xs)}
}