/* VoiceGrade mobile-first spacing patch v2 — scoped to existing PHP markup */
:root{--vg-gap:12px}
html,body{max-width:100%;overflow-x:clip}
.page-content{min-width:0}
.page-content *, .topnav *{min-width:0}
.page-content input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.page-content select,.page-content textarea{box-sizing:border-box;max-width:100%;}
.page-content form{max-width:100%}
.page-content label{max-width:100%}
.page-content label input:not([type=hidden]),.page-content label select,.page-content label textarea{display:block;width:100%;}
.page-content .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.page-content .actions>a,.page-content .actions>button,.page-content .actions>form{margin:0!important}
.page-content .actions>form{display:flex;align-items:stretch;gap:12px}
.page-content .actions>form>button{margin:0}
.page-content button,.page-content .btn{white-space:normal;overflow-wrap:anywhere;text-align:center}
.page-content input:focus-visible,.page-content textarea:focus-visible,.page-content select:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.page-content .table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.page-content .table-scroll table{width:max-content;min-width:100%}
.page-content th,.page-content td{white-space:normal}
@media(max-width:700px){
  .wrap{width:100%;max-width:100%;padding:8px;margin:0 auto}
  .panel{max-width:100%;border-radius:16px}
  .page-content{padding:18px 16px 26px}
  .topnav{padding:16px;gap:14px}
  .brand{font-size:21px}
  .nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  .nav-links>a,.nav-links>form{width:100%;min-width:0;margin:0!important}
  .nav-links>a,.nav-links>form>button{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:10px 8px;text-align:center;font-size:14px}
  .page-content input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  .page-content select,.page-content textarea{display:block;width:100%!important;max-width:100%!important;margin:8px 0 16px!important;min-height:44px}
  .page-content form input:not([type=hidden]):not([type=checkbox]):not([type=radio]) + button,
  .page-content form input:not([type=hidden]):not([type=checkbox]):not([type=radio]) + .btn{margin-top:4px!important}
  .page-content form:has(> input:not([type=hidden])){max-width:100%}
  /* Action groups: two equal buttons, third takes full second row */
  .page-content .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 20px;align-items:stretch}
  .page-content .actions>a,.page-content .actions>button,.page-content .actions>form{width:100%;min-width:0;min-height:46px;box-sizing:border-box}
  .page-content .actions>a,.page-content .actions>button{display:flex;align-items:center;justify-content:center;padding:10px 8px}
  .page-content .actions>form>button{width:100%;min-height:46px;padding:10px 8px}
  .page-content .actions>:last-child:nth-child(odd){grid-column:1/-1}
  /* Standalone forms with a textbox and button: separate vertically */
  .page-content form:has(> input:not([type=hidden])):has(> button){display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .page-content form:has(> input:not([type=hidden])):has(> button)>button{width:100%;min-height:46px;margin:0!important}
  .page-content form:has(> input:not([type=hidden])):has(> button)>input:not([type=hidden]){margin:0!important}
  .page-content .table-scroll{width:100%;border-radius:12px}
  .page-content .table-scroll table{min-width:620px;margin:0}
  .page-content h1{font-size:24px;line-height:1.3}
  .page-content h2{font-size:19px;line-height:1.35}
  .page-content .stats{grid-template-columns:1fr}
}
@media(max-width:370px){.page-content{padding:16px 12px}.nav-links{gap:8px}.page-content .actions{gap:8px}}